From f8c0aa27cb7bdfe0ef05fa46e03a2a7329f2fed2 Mon Sep 17 00:00:00 2001 From: Oleksandr Miroshnichenko Date: Tue, 12 May 2015 12:56:16 +0300 Subject: [PATCH 01/75] MAGETWO-34949: Modal Window Widget --- .../adminhtml/web/js/new-category-dialog.js | 42 +---- .../view/adminhtml/web/order/edit/message.js | 62 +++----- lib/web/mage/dialog.js | 143 +++++++++++++++++- 3 files changed, 168 insertions(+), 79 deletions(-) diff --git a/app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js b/app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js index 46ad787624620..b8ea9083e7ccb 100644 --- a/app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js +++ b/app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js @@ -7,6 +7,7 @@ define([ 'jquery', 'jquery/ui', + 'mage/dialog', 'mage/translate', 'mage/backend/tree-suggest', 'mage/backend/validation' @@ -51,43 +52,10 @@ define([ options.errorClass, options.validClass || ''); } }); - this.element.dialog({ + type: 'slideOut', + className: 'mage-new-category-dialog form-inline', title: $.mage.__('Create Category'), - autoOpen: false, - width: '75%', - dialogClass: 'mage-new-category-dialog form-inline', - modal: true, - multiselect: true, - resizable: false, - position: { - my: 'left top', - at: 'center top', - of: 'body' - }, - open: function () { - // fix for suggest field - overlapping dialog z-index - $('#new_category_parent-suggest').css('z-index', $.ui.dialog.maxZ + 1); - var enteredName = $('#category_ids-suggest').val(); - $('#new_category_name').val(enteredName); - if (enteredName === '') { - $('#new_category_name').focus(); - } - $('#new_category_messages').html(''); - $(this).closest('.ui-dialog').addClass('ui-dialog-active'); - - var topMargin = $(this).closest('.ui-dialog').children('.ui-dialog-titlebar').outerHeight() + 15; - $(this).closest('.ui-dialog').css('margin-top', topMargin); - }, - close: function () { - $('#new_category_name, #new_category_parent-suggest').val(''); - var validationOptions = newCategoryForm.validation('option'); - validationOptions.unhighlight($('#new_category_parent-suggest').get(0), - validationOptions.errorClass, validationOptions.validClass || ''); - newCategoryForm.validation('clearError'); - $('#category_ids-suggest').focus(); - $(this).closest('.ui-dialog').removeClass('ui-dialog-active'); - }, buttons: [{ text: $.mage.__('Create Category'), 'class': 'action-primary', @@ -96,8 +64,8 @@ define([ if (!newCategoryForm.valid()) { return; } + var thisButton = $(this); - var thisButton = $(event.target).closest('[data-action=save]'); thisButton.prop('disabled', true); $.ajax({ type: 'POST', @@ -126,7 +94,7 @@ define([ $('#new_category_name, #new_category_parent-suggest').val(''); $('#category_ids-suggest').val(''); clearParentCategory(); - widget.element.dialog('close'); + widget.element.trigger('close'); } else { $('#new_category_messages').html(data.messages); } diff --git a/app/code/Magento/Sales/view/adminhtml/web/order/edit/message.js b/app/code/Magento/Sales/view/adminhtml/web/order/edit/message.js index 06ee87a09018b..6a93aae56d92d 100644 --- a/app/code/Magento/Sales/view/adminhtml/web/order/edit/message.js +++ b/app/code/Magento/Sales/view/adminhtml/web/order/edit/message.js @@ -7,10 +7,10 @@ define([ "jquery", "jquery/ui", + "mage/dialog", "mage/translate" ], function($){ "use strict"; - $.widget('mage.orderEditDialog', { options: { url: null, @@ -29,7 +29,7 @@ define([ * Show dialog */ showDialog: function() { - this.options.dialog.html(this.options.message).dialog('open'); + this.options.dialog.html(this.options.message).trigger('open'); }, /** @@ -46,44 +46,26 @@ define([ _prepareDialog: function() { var self = this; - this.options.dialog = $('
') - .dialog({ - autoOpen: false, - title: $.mage.__('Edit Order'), - modal: true, - resizable: false, - width: '75%', - dialogClass: 'edit-order-popup', - position: { - my: 'left top', - at: 'center top', - of: 'body' - }, - open: function () { - jQuery(this).closest('.ui-dialog').addClass('ui-dialog-active'); - - var topMargin = $(this).closest('.ui-dialog').children('.ui-dialog-titlebar').outerHeight() - 20; - $(this).closest('.ui-dialog').css('margin-top', topMargin); - }, - close: function() { - jQuery(this).closest('.ui-dialog').removeClass('ui-dialog-active'); - }, - buttons: [{ - text: $.mage.__('Ok'), - 'class': 'action-primary', - click: function(){ - self.redirect(); - } - }, { - text: $.mage.__('Cancel'), - 'class': 'action-close', - click: function(){ - $(this).dialog('close'); - } - }] - }); + this.options.dialog = $('
').dialog({ + type: 'modal', + className: 'edit-order-popup', + title: $.mage.__('Edit Order'), + buttons: [{ + text: $.mage.__('Ok'), + 'class': 'action-primary', + click: function(){ + self.redirect(); + } + }, { + text: $.mage.__('Cancel'), + 'class': 'action-close', + click: function(){ + self.options.dialog.trigger('close'); + } + }] + }); } }); - + return $.mage.orderEditDialog; -}); \ No newline at end of file +}); diff --git a/lib/web/mage/dialog.js b/lib/web/mage/dialog.js index e09d3d05c91fa..fbd8aefc775b7 100644 --- a/lib/web/mage/dialog.js +++ b/lib/web/mage/dialog.js @@ -4,14 +4,153 @@ */ define([ "jquery", + "mage/template", "jquery/ui" -], function($){ +], function($, template){ "use strict"; /** * Dialog Widget - this widget is a wrapper for the jQuery UI Dialog */ - $.widget('mage.dialog', $.ui.dialog, {}); + $.widget('mage.dialog', { + options: { + type: 'modal', + title: null, + template: '
close
', + buttons: [], + show: null, + events: [], + className: '', + position: { + modal: { + width: '75%', + position: 'fixed', + top: '50px', + left: '12.5%', + right: '12.5%' + }, + slideOut: { + width: 'auto', + position: 'fixed', + top: '0', + left: '100%', + bottom: '0', + right: '0' + } + } + }, + + + _create: function() { + this._createWrapper(); + this._createTitlebar(); + this._createButtons(); + this._style(); + this._insertContent(); + + this.element.on('open', _.bind(this.open, this)); + this.element.on('close', _.bind(this.close, this)); + + return this.element; + }, + open: function() { + this._isOpen = true; + + this._position(); + this._createOverlay(); + this.uiDialog.show(); + this.uiDialog.addClass('ui-dialog-active'); + if ( this.options.type === 'slideOut' ) { + this.uiDialog.animate({ + left: '148px' + }, 300); + } + }, + close: function() { + var that = this; + this._isOpen = false; + + if ( this.options.type === 'slideOut' ) { + this.uiDialog.animate({ + left: '100%' + }, 300, function() { + that._destroyOverlay(); + }); + } else { + this.uiDialog.removeClass('ui-dialog-active'); + this._destroyOverlay(); + } + }, + _createWrapper: function() { + this.uiDialog = $('
') + .addClass('ui-dialog ' + this.options.className) + .hide() + .html(this.options.template) + .appendTo( this._appendTo() ); + }, + _appendTo: function() { + var element = this.options.appendTo; + + if ( element && (element.jquery || element.nodeType) ) { + return $( element ); + } + + return this.document.find( element || "body" ).eq( 0 ); + }, + _createTitlebar: function() { + this.uiDialog.find('.ui-dialog-title').html(this.options.title); + this.closeButton = this.uiDialog.find('.ui-dialog-titlebar-close'); + this.closeButton.on('click', _.bind(this.close, this)); + }, + _createButtons: function() { + var that = this; + + this.buttonsPane = this.uiDialog.find('.dialog-actions'); + _.each(this.options.buttons, function(btn){ + var button = $('') + .addClass(btn.class).html(btn.text); + + button.on('click', btn.click); + that.buttonsPane.append(button); + }); + }, + _createOverlay: function() { + var that = this; + + document.body.style.overflow = 'hidden'; + this.overlay = $("
") + .addClass("overlay_magento") + .appendTo( this._appendTo() ); + this.overlay.on('click', function(){ + that.close(); + }); + }, + _insertContent: function() { + this.content = this.uiDialog.find('.dialog-content'); + this.element + .show() + .appendTo( this.content ); + }, + _destroyOverlay: function() { + document.body.style.overflow = 'auto'; + if ( this.overlay ) { + this.overlay.remove(); + this.overlay = null; + } + }, + _style: function() { + this.uiDialog.css({ + padding: '30px', + backgroundColor: '#fff', + zIndex: 1000 + }); + }, + _position: function() { + var type = this.options.type; + + this.uiDialog.css(this.options.position[type]); + } + }); return $.mage.dialog; }); \ No newline at end of file From 42a4f5412ff203479f3d61366f8a263080af068a Mon Sep 17 00:00:00 2001 From: Oleksandr Miroshnichenko Date: Tue, 12 May 2015 19:46:24 +0300 Subject: [PATCH 02/75] MAGETWO-34949: Modal Window Widget --- .../Product/Helper/Form/Category.php | 2 +- .../adminhtml/web/js/new-category-dialog.js | 6 +- .../view/adminhtml/web/order/edit/message.js | 8 +- .../Ui/view/base/web/js/dialog/dialog.js | 151 ++++++++++++++++++ .../base/web/templates/dialog/dialog.html | 22 +++ lib/web/mage/dialog.js | 143 +---------------- 6 files changed, 183 insertions(+), 149 deletions(-) create mode 100644 app/code/Magento/Ui/view/base/web/js/dialog/dialog.js create mode 100644 app/code/Magento/Ui/view/base/web/templates/dialog/dialog.html diff --git a/app/code/Magento/Catalog/Block/Adminhtml/Product/Helper/Form/Category.php b/app/code/Magento/Catalog/Block/Adminhtml/Product/Helper/Form/Category.php index b5c69b661f085..cf00d8b7707c3 100644 --- a/app/code/Magento/Catalog/Block/Adminhtml/Product/Helper/Form/Category.php +++ b/app/code/Magento/Catalog/Block/Adminhtml/Product/Helper/Form/Category.php @@ -132,7 +132,7 @@ public function getAfterElementHtml() 'id' => 'add_category_button', 'label' => $newCategoryCaption, 'title' => $newCategoryCaption, - 'onclick' => 'jQuery("#new-category").dialog("open")', + 'onclick' => 'jQuery("#new-category").trigger("openDialog")', 'disabled' => $this->getDisabled(), ] ); diff --git a/app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js b/app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js index b8ea9083e7ccb..02c72bacac2c6 100644 --- a/app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js +++ b/app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js @@ -7,7 +7,7 @@ define([ 'jquery', 'jquery/ui', - 'mage/dialog', + 'Magento_Ui/js/dialog/dialog', 'mage/translate', 'mage/backend/tree-suggest', 'mage/backend/validation' @@ -54,7 +54,7 @@ define([ }); this.element.dialog({ type: 'slideOut', - className: 'mage-new-category-dialog form-inline', + dialogClass: 'mage-new-category-dialog form-inline', title: $.mage.__('Create Category'), buttons: [{ text: $.mage.__('Create Category'), @@ -94,7 +94,7 @@ define([ $('#new_category_name, #new_category_parent-suggest').val(''); $('#category_ids-suggest').val(''); clearParentCategory(); - widget.element.trigger('close'); + widget.element.trigger('closeDialog'); } else { $('#new_category_messages').html(data.messages); } diff --git a/app/code/Magento/Sales/view/adminhtml/web/order/edit/message.js b/app/code/Magento/Sales/view/adminhtml/web/order/edit/message.js index 6a93aae56d92d..24e81c051419a 100644 --- a/app/code/Magento/Sales/view/adminhtml/web/order/edit/message.js +++ b/app/code/Magento/Sales/view/adminhtml/web/order/edit/message.js @@ -7,7 +7,7 @@ define([ "jquery", "jquery/ui", - "mage/dialog", + 'Magento_Ui/js/dialog/dialog', "mage/translate" ], function($){ "use strict"; @@ -29,7 +29,7 @@ define([ * Show dialog */ showDialog: function() { - this.options.dialog.html(this.options.message).trigger('open'); + this.options.dialog.html(this.options.message).trigger('openDialog'); }, /** @@ -48,7 +48,7 @@ define([ this.options.dialog = $('
').dialog({ type: 'modal', - className: 'edit-order-popup', + dialogClass: 'edit-order-popup', title: $.mage.__('Edit Order'), buttons: [{ text: $.mage.__('Ok'), @@ -60,7 +60,7 @@ define([ text: $.mage.__('Cancel'), 'class': 'action-close', click: function(){ - self.options.dialog.trigger('close'); + self.options.dialog.trigger('closeDialog'); } }] }); diff --git a/app/code/Magento/Ui/view/base/web/js/dialog/dialog.js b/app/code/Magento/Ui/view/base/web/js/dialog/dialog.js new file mode 100644 index 0000000000000..d57481689b679 --- /dev/null +++ b/app/code/Magento/Ui/view/base/web/js/dialog/dialog.js @@ -0,0 +1,151 @@ +/** + * Copyright © 2015 Magento. All rights reserved. + * See COPYING.txt for license details. + */ +define([ + "jquery", + "mage/template", + "text!ui/template/dialog/dialog.html", + "jquery/ui" +], function($, template, dialogTemplate){ + "use strict"; + + /** + * Dialog Widget - this widget is a wrapper for the jQuery UI Dialog + */ + $.widget('mage.dialog', { + options: { + type: 'modal', + title: null, + template: template(dialogTemplate), + buttons: [], + events: [], + dialogClass: '', + dialogActiveClass: 'ui-dialog-active', + overlayClass: 'overlay_magento', + dialogTitleSelector: '.ui-dialog-title', + dialogCloseBtnSelector: '.ui-dialog-titlebar-close', + dialogContentSelector: '.dialog-content', + dialogActionsSelector: '.dialog-actions', + appendTo: 'body', + position: { + modal: { + width: '75%', + position: 'fixed', + top: '50px', + left: '12.5%', + right: '12.5%' + }, + slideOut: { + width: 'auto', + position: 'fixed', + top: '0', + left: '100%', + bottom: '0', + right: '0' + } + } + }, + + + _create: function() { + this._createWrapper(); + this._createTitlebar(); + this._createButtons(); + this._style(); + this._insertContent(); + + this.element.on('openDialog', _.bind(this.openDialog, this)); + this.element.on('closeDialog', _.bind(this.closeDialog, this)); + + return this.element; + }, + openDialog: function() { + this._isOpen = true; + + this._position(); + this._createOverlay(); + this.uiDialog.show(); + this.uiDialog.addClass(this.options.dialogActiveClass); + if ( this.options.type === 'slideOut' ) { + this.uiDialog.animate({ + left: '148px' + }, 300); + } + }, + closeDialog: function() { + var that = this; + this._isOpen = false; + + if ( this.options.type === 'slideOut' ) { + this.uiDialog.animate({ + left: '100%' + }, 300, function() { + that._destroyOverlay(); + }); + } else { + this.uiDialog.removeClass(this.options.dialogActiveClass); + this._destroyOverlay(); + } + }, + _createWrapper: function() { + this.uiDialog = $(this.options.template({data: this.options})) + .addClass(this.options.dialogClass) + .appendTo(this.options.appendTo); + }, + _createTitlebar: function() { + this.uiDialog.find(this.options.dialogTitleSelector).html(this.options.title); + this.closeButton = this.uiDialog.find(this.options.dialogCloseBtnSelector); + this.closeButton.on('click', _.bind(this.closeDialog, this)); + }, + _insertContent: function() { + this.content = this.uiDialog.find(this.options.dialogContentSelector); + this.element + .show() + .appendTo( this.content ); + }, + _createButtons: function() { + var that = this; + + this.buttonsPane = this.uiDialog.find(this.options.dialogActionsSelector); + _.each(this.options.buttons, function(btn, key) { + var button = that.buttonsPane.children()[key]; + + button.on('click', btn.click); + }); + }, + _createOverlay: function() { + var that = this; + + document.body.style.overflow = 'hidden'; + this.overlay = $('
') + .addClass(this.options.overlayClass) + .appendTo( this.options.appendTo ); + this.overlay.on('click', function(){ + that.closeDialog(); + }); + }, + + _destroyOverlay: function() { + document.body.style.overflow = 'auto'; + if ( this.overlay ) { + this.overlay.remove(); + this.overlay = null; + } + }, + _style: function() { + this.uiDialog.css({ + padding: '30px', + backgroundColor: '#fff', + zIndex: 1000 + }); + }, + _position: function() { + var type = this.options.type; + + this.uiDialog.css(this.options.position[type]); + } + }); + + return $.mage.dialog; +}); \ No newline at end of file diff --git a/app/code/Magento/Ui/view/base/web/templates/dialog/dialog.html b/app/code/Magento/Ui/view/base/web/templates/dialog/dialog.html new file mode 100644 index 0000000000000..89e1ac6e65d33 --- /dev/null +++ b/app/code/Magento/Ui/view/base/web/templates/dialog/dialog.html @@ -0,0 +1,22 @@ + +
+
+
+ + + close + +
+
+
+
+ <% _.each(data.buttons, function(button) { %> + + <% }); %> +
+
\ No newline at end of file diff --git a/lib/web/mage/dialog.js b/lib/web/mage/dialog.js index fbd8aefc775b7..e09d3d05c91fa 100644 --- a/lib/web/mage/dialog.js +++ b/lib/web/mage/dialog.js @@ -4,153 +4,14 @@ */ define([ "jquery", - "mage/template", "jquery/ui" -], function($, template){ +], function($){ "use strict"; /** * Dialog Widget - this widget is a wrapper for the jQuery UI Dialog */ - $.widget('mage.dialog', { - options: { - type: 'modal', - title: null, - template: '
close
', - buttons: [], - show: null, - events: [], - className: '', - position: { - modal: { - width: '75%', - position: 'fixed', - top: '50px', - left: '12.5%', - right: '12.5%' - }, - slideOut: { - width: 'auto', - position: 'fixed', - top: '0', - left: '100%', - bottom: '0', - right: '0' - } - } - }, - - - _create: function() { - this._createWrapper(); - this._createTitlebar(); - this._createButtons(); - this._style(); - this._insertContent(); - - this.element.on('open', _.bind(this.open, this)); - this.element.on('close', _.bind(this.close, this)); - - return this.element; - }, - open: function() { - this._isOpen = true; - - this._position(); - this._createOverlay(); - this.uiDialog.show(); - this.uiDialog.addClass('ui-dialog-active'); - if ( this.options.type === 'slideOut' ) { - this.uiDialog.animate({ - left: '148px' - }, 300); - } - }, - close: function() { - var that = this; - this._isOpen = false; - - if ( this.options.type === 'slideOut' ) { - this.uiDialog.animate({ - left: '100%' - }, 300, function() { - that._destroyOverlay(); - }); - } else { - this.uiDialog.removeClass('ui-dialog-active'); - this._destroyOverlay(); - } - }, - _createWrapper: function() { - this.uiDialog = $('
') - .addClass('ui-dialog ' + this.options.className) - .hide() - .html(this.options.template) - .appendTo( this._appendTo() ); - }, - _appendTo: function() { - var element = this.options.appendTo; - - if ( element && (element.jquery || element.nodeType) ) { - return $( element ); - } - - return this.document.find( element || "body" ).eq( 0 ); - }, - _createTitlebar: function() { - this.uiDialog.find('.ui-dialog-title').html(this.options.title); - this.closeButton = this.uiDialog.find('.ui-dialog-titlebar-close'); - this.closeButton.on('click', _.bind(this.close, this)); - }, - _createButtons: function() { - var that = this; - - this.buttonsPane = this.uiDialog.find('.dialog-actions'); - _.each(this.options.buttons, function(btn){ - var button = $('') - .addClass(btn.class).html(btn.text); - - button.on('click', btn.click); - that.buttonsPane.append(button); - }); - }, - _createOverlay: function() { - var that = this; - - document.body.style.overflow = 'hidden'; - this.overlay = $("
") - .addClass("overlay_magento") - .appendTo( this._appendTo() ); - this.overlay.on('click', function(){ - that.close(); - }); - }, - _insertContent: function() { - this.content = this.uiDialog.find('.dialog-content'); - this.element - .show() - .appendTo( this.content ); - }, - _destroyOverlay: function() { - document.body.style.overflow = 'auto'; - if ( this.overlay ) { - this.overlay.remove(); - this.overlay = null; - } - }, - _style: function() { - this.uiDialog.css({ - padding: '30px', - backgroundColor: '#fff', - zIndex: 1000 - }); - }, - _position: function() { - var type = this.options.type; - - this.uiDialog.css(this.options.position[type]); - } - }); + $.widget('mage.dialog', $.ui.dialog, {}); return $.mage.dialog; }); \ No newline at end of file From 7acd5fecd425c64303d63e447dcf1d2d00052b3f Mon Sep 17 00:00:00 2001 From: Oleksandr Miroshnichenko Date: Tue, 19 May 2015 13:48:41 +0300 Subject: [PATCH 03/75] MAGETWO-34949: Modal Window Widget --- .../adminhtml/web/js/new-category-dialog.js | 99 +++++------ .../view/adminhtml/web/order/edit/message.js | 21 +-- .../Ui/view/base/web/js/dialog/dialog.js | 156 +++++++++++------- .../base/web/templates/dialog/dialog.html | 18 +- 4 files changed, 159 insertions(+), 135 deletions(-) diff --git a/app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js b/app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js index 02c72bacac2c6..ef65271bf2747 100644 --- a/app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js +++ b/app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js @@ -23,6 +23,7 @@ define([ $.widget('mage.newCategoryDialog', { _create: function () { var widget = this; + $('#new_category_parent').before($('', { id: 'new_category_parent-suggest', placeholder: $.mage.__('start typing to search category') @@ -52,62 +53,66 @@ define([ options.errorClass, options.validClass || ''); } }); - this.element.dialog({ + this.dialog = this.element.dialog({ type: 'slideOut', dialogClass: 'mage-new-category-dialog form-inline', title: $.mage.__('Create Category'), buttons: [{ text: $.mage.__('Create Category'), 'class': 'action-primary', - 'data-action': 'save', - click: function (event) { - if (!newCategoryForm.valid()) { - return; - } - var thisButton = $(this); - - thisButton.prop('disabled', true); - $.ajax({ - type: 'POST', - url: widget.options.saveCategoryUrl, - data: { - general: { - name: $('#new_category_name').val(), - is_active: 1, - include_in_menu: 1 - }, - parent: $('#new_category_parent').val(), - use_config: ['available_sort_by', 'default_sort_by'], - form_key: FORM_KEY, - return_session_messages_only: 1 - }, - dataType: 'json', - context: $('body') - }) - .success( - function (data) { - if (!data.error) { - $('#category_ids-suggest').trigger('selectItem', { - id: data.category.entity_id, - label: data.category.name - }); - $('#new_category_name, #new_category_parent-suggest').val(''); - $('#category_ids-suggest').val(''); - clearParentCategory(); - widget.element.trigger('closeDialog'); - } else { - $('#new_category_messages').html(data.messages); - } - } - ) - .complete( - function () { - thisButton.prop('disabled', false); - } - ); + click: function () { + widget.insideDialog.trigger('openDialog'); + //if (!newCategoryForm.valid()) { + // return; + //} + //var thisButton = $(this); + // + //thisButton.prop('disabled', true); + //$.ajax({ + // type: 'POST', + // url: widget.options.saveCategoryUrl, + // data: { + // general: { + // name: $('#new_category_name').val(), + // is_active: 1, + // include_in_menu: 1 + // }, + // parent: $('#new_category_parent').val(), + // use_config: ['available_sort_by', 'default_sort_by'], + // form_key: FORM_KEY, + // return_session_messages_only: 1 + // }, + // dataType: 'json', + // context: $('body') + //}) + // .success( + // function (data) { + // if (!data.error) { + // $('#category_ids-suggest').trigger('selectItem', { + // id: data.category.entity_id, + // label: data.category.name + // }); + // $('#new_category_name, #new_category_parent-suggest').val(''); + // $('#category_ids-suggest').val(''); + // clearParentCategory(); + // widget.dialog.trigger('closeDialog'); + // } else { + // $('#new_category_messages').html(data.messages); + // } + // } + //) + // .complete( + // function () { + // thisButton.prop('disabled', false); + // } + //); } }] }); + this.insideDialog = $('
lol
').dialog({ + type: 'slideOut', + dialogClass: 'mage-new-category-dialog form-inline' + }); } }); diff --git a/app/code/Magento/Sales/view/adminhtml/web/order/edit/message.js b/app/code/Magento/Sales/view/adminhtml/web/order/edit/message.js index 24e81c051419a..5479b72127223 100644 --- a/app/code/Magento/Sales/view/adminhtml/web/order/edit/message.js +++ b/app/code/Magento/Sales/view/adminhtml/web/order/edit/message.js @@ -44,26 +44,7 @@ define([ * @protected */ _prepareDialog: function() { - var self = this; - - this.options.dialog = $('
').dialog({ - type: 'modal', - dialogClass: 'edit-order-popup', - title: $.mage.__('Edit Order'), - buttons: [{ - text: $.mage.__('Ok'), - 'class': 'action-primary', - click: function(){ - self.redirect(); - } - }, { - text: $.mage.__('Cancel'), - 'class': 'action-close', - click: function(){ - self.options.dialog.trigger('closeDialog'); - } - }] - }); + this.options.dialog = $('
').dialog(); } }); diff --git a/app/code/Magento/Ui/view/base/web/js/dialog/dialog.js b/app/code/Magento/Ui/view/base/web/js/dialog/dialog.js index d57481689b679..ae38d716e721e 100644 --- a/app/code/Magento/Ui/view/base/web/js/dialog/dialog.js +++ b/app/code/Magento/Ui/view/base/web/js/dialog/dialog.js @@ -4,10 +4,11 @@ */ define([ "jquery", + "underscore", "mage/template", "text!ui/template/dialog/dialog.html", "jquery/ui" -], function($, template, dialogTemplate){ +], function($, _,template, dialogTemplate){ "use strict"; /** @@ -16,18 +17,25 @@ define([ $.widget('mage.dialog', { options: { type: 'modal', - title: null, - template: template(dialogTemplate), - buttons: [], + title: '', + template: dialogTemplate, + buttons: [{ + text: $.mage.__('Ok'), + 'class': 'action-primary', + click: function(){ + this.closeDialog(); + } + }], events: [], dialogClass: '', dialogActiveClass: 'ui-dialog-active', overlayClass: 'overlay_magento', - dialogTitleSelector: '.ui-dialog-title', - dialogCloseBtnSelector: '.ui-dialog-titlebar-close', - dialogContentSelector: '.dialog-content', - dialogActionsSelector: '.dialog-actions', + dialogBlock: '[data-role="dialog"]', + dialogCloseBtn: '[data-role="closeBtn"]', + dialogContent: '[data-role="content"]', + dialogAction: '[data-role="action"]', appendTo: 'body', + wrapperId: 'dialogs-wrapper', position: { modal: { width: '75%', @@ -40,101 +48,119 @@ define([ width: 'auto', position: 'fixed', top: '0', - left: '100%', + left: '148px', bottom: '0', right: '0' } } }, - _create: function() { + this.options.transitionEvent = this.whichTransitionEvent(); this._createWrapper(); - this._createTitlebar(); + this._renderDialog(); this._createButtons(); this._style(); - this._insertContent(); + this.dialog.find(this.options.dialogCloseBtn).on('click', _.bind(this.closeDialog, this)); this.element.on('openDialog', _.bind(this.openDialog, this)); this.element.on('closeDialog', _.bind(this.closeDialog, this)); - - return this.element; + }, + _getElem: function(elem) { + return this.dialog.find(elem); }, openDialog: function() { this._isOpen = true; - this._position(); this._createOverlay(); - this.uiDialog.show(); - this.uiDialog.addClass(this.options.dialogActiveClass); - if ( this.options.type === 'slideOut' ) { - this.uiDialog.animate({ - left: '148px' - }, 300); - } + this.dialog.show(); + this.dialog.addClass(this.options.dialogActiveClass); + + return this.dialog; }, closeDialog: function() { var that = this; - this._isOpen = false; - if ( this.options.type === 'slideOut' ) { - this.uiDialog.animate({ - left: '100%' - }, 300, function() { - that._destroyOverlay(); - }); - } else { - this.uiDialog.removeClass(this.options.dialogActiveClass); + this._isOpen = false; + this.dialog.one(this.options.transitionEvent, function() { + that.dialog.hide(); + that._destroyOverlay(); + }); + this.dialog.removeClass(this.options.dialogActiveClass); + if ( !this.options.transitionEvent ) { + this.dialog.hide(); this._destroyOverlay(); } + + return this.dialog; }, _createWrapper: function() { - this.uiDialog = $(this.options.template({data: this.options})) - .addClass(this.options.dialogClass) - .appendTo(this.options.appendTo); - }, - _createTitlebar: function() { - this.uiDialog.find(this.options.dialogTitleSelector).html(this.options.title); - this.closeButton = this.uiDialog.find(this.options.dialogCloseBtnSelector); - this.closeButton.on('click', _.bind(this.closeDialog, this)); + this.dialogWrapper = $('#'+this.options.wrapperId); + + if ( !this.dialogWrapper.length ) { + this.dialogWrapper = $('
') + .attr('id', this.options.wrapperId) + .appendTo(this.options.appendTo); + } }, - _insertContent: function() { - this.content = this.uiDialog.find(this.options.dialogContentSelector); - this.element - .show() - .appendTo( this.content ); + _renderDialog: function() { + this.dialog = $(template( + this.options.template, + { + data: this.options + })).appendTo(this.dialogWrapper); + + this.element.show().appendTo(this._getElem(this.options.dialogContent)); + this.dialog.hide(); }, _createButtons: function() { var that = this; - this.buttonsPane = this.uiDialog.find(this.options.dialogActionsSelector); + this.buttons = this._getElem(this.options.dialogAction); _.each(this.options.buttons, function(btn, key) { - var button = that.buttonsPane.children()[key]; + var button = that.buttons[key]; - button.on('click', btn.click); + button.on('click', _.bind(btn.click, that)); }); }, _createOverlay: function() { - var that = this; + var that = this, + events; - document.body.style.overflow = 'hidden'; - this.overlay = $('
') - .addClass(this.options.overlayClass) - .appendTo( this.options.appendTo ); - this.overlay.on('click', function(){ + this.overlay = $('.' + this.options.overlayClass); + if ( !this.overlay.length ) { + document.body.style.overflow = 'hidden'; + this.overlay = $('
') + .addClass(this.options.overlayClass) + .appendTo( this.options.appendTo ); + } else { + var zIndex =this.overlay.zIndex(); + this.overlay.zIndex(zIndex + 1); + } + events = this.overlay.data('events'); + if ( events ) { + this.prevOverlayHandler = events.click[0].handler; + } + this.overlay.unbind().on('click', function() { that.closeDialog(); }); }, _destroyOverlay: function() { - document.body.style.overflow = 'auto'; - if ( this.overlay ) { + var dialogCount = this.dialogWrapper.find(this.options.dialogBlock).filter(':visible').length; + + if ( !dialogCount ) { + document.body.style.overflow = 'auto'; this.overlay.remove(); this.overlay = null; + } else { + var zIndex =this.overlay.zIndex(); + this.overlay.zIndex(zIndex - 1); + this.overlay.unbind().on('click', this.prevOverlayHandler); } }, _style: function() { - this.uiDialog.css({ + this.dialog.css({ padding: '30px', backgroundColor: '#fff', zIndex: 1000 @@ -143,7 +169,23 @@ define([ _position: function() { var type = this.options.type; - this.uiDialog.css(this.options.position[type]); + this.dialog.css(this.options.position[type]); + }, + whichTransitionEvent: function() { + var t, + el = document.createElement('fakeelement'), + transitions = { + 'transition': 'transitionend', + 'OTransition': 'oTransitionEnd', + 'MozTransition': 'transitionend', + 'WebkitTransition': 'webkitTransitionEnd' + }; + + for (t in transitions){ + if ( el.style[t] !== undefined && transitions.hasOwnProperty(t) ) { + return transitions[t]; + } + } } }); diff --git a/app/code/Magento/Ui/view/base/web/templates/dialog/dialog.html b/app/code/Magento/Ui/view/base/web/templates/dialog/dialog.html index 89e1ac6e65d33..b77f93faf5f7a 100644 --- a/app/code/Magento/Ui/view/base/web/templates/dialog/dialog.html +++ b/app/code/Magento/Ui/view/base/web/templates/dialog/dialog.html @@ -4,19 +4,15 @@ * See COPYING.txt for license details. */ --> -
-
-
- - - close - -
+
+
+

<%= data.title %>

+
-
-
+
+
<% _.each(data.buttons, function(button) { %> - + <% }); %>
\ No newline at end of file From 26ab1a1ea255154cd474d86615340c3b36186d83 Mon Sep 17 00:00:00 2001 From: Oleksandr Miroshnichenko Date: Tue, 19 May 2015 16:49:23 +0300 Subject: [PATCH 04/75] MAGETWO-36407: Error on invoice creation page in console --- .../view/adminhtml/templates/order/invoice/create/items.phtml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/code/Magento/Sales/view/adminhtml/templates/order/invoice/create/items.phtml b/app/code/Magento/Sales/view/adminhtml/templates/order/invoice/create/items.phtml index fff76e569226d..0253050d8f3b0 100644 --- a/app/code/Magento/Sales/view/adminhtml/templates/order/invoice/create/items.phtml +++ b/app/code/Magento/Sales/view/adminhtml/templates/order/invoice/create/items.phtml @@ -132,7 +132,7 @@