Skip to content

Commit 7acd5fe

Browse files
slopokslopok
committed
MAGETWO-34949: Modal Window Widget
1 parent 8faafec commit 7acd5fe

File tree

4 files changed

+159
-135
lines changed

4 files changed

+159
-135
lines changed

‎app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js

Lines changed: 52 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ define([
2323
$.widget('mage.newCategoryDialog', {
2424
_create: function () {
2525
var widget = this;
26+
2627
$('#new_category_parent').before($('<input>', {
2728
id: 'new_category_parent-suggest',
2829
placeholder: $.mage.__('start typing to search category')
@@ -52,62 +53,66 @@ define([
5253
options.errorClass, options.validClass || '');
5354
}
5455
});
55-
this.element.dialog({
56+
this.dialog = this.element.dialog({
5657
type: 'slideOut',
5758
dialogClass: 'mage-new-category-dialog form-inline',
5859
title: $.mage.__('Create Category'),
5960
buttons: [{
6061
text: $.mage.__('Create Category'),
6162
'class': 'action-primary',
62-
'data-action': 'save',
63-
click: function (event) {
64-
if (!newCategoryForm.valid()) {
65-
return;
66-
}
67-
var thisButton = $(this);
68-
69-
thisButton.prop('disabled', true);
70-
$.ajax({
71-
type: 'POST',
72-
url: widget.options.saveCategoryUrl,
73-
data: {
74-
general: {
75-
name: $('#new_category_name').val(),
76-
is_active: 1,
77-
include_in_menu: 1
78-
},
79-
parent: $('#new_category_parent').val(),
80-
use_config: ['available_sort_by', 'default_sort_by'],
81-
form_key: FORM_KEY,
82-
return_session_messages_only: 1
83-
},
84-
dataType: 'json',
85-
context: $('body')
86-
})
87-
.success(
88-
function (data) {
89-
if (!data.error) {
90-
$('#category_ids-suggest').trigger('selectItem', {
91-
id: data.category.entity_id,
92-
label: data.category.name
93-
});
94-
$('#new_category_name, #new_category_parent-suggest').val('');
95-
$('#category_ids-suggest').val('');
96-
clearParentCategory();
97-
widget.element.trigger('closeDialog');
98-
} else {
99-
$('#new_category_messages').html(data.messages);
100-
}
101-
}
102-
)
103-
.complete(
104-
function () {
105-
thisButton.prop('disabled', false);
106-
}
107-
);
63+
click: function () {
64+
widget.insideDialog.trigger('openDialog');
65+
//if (!newCategoryForm.valid()) {
66+
// return;
67+
//}
68+
//var thisButton = $(this);
69+
//
70+
//thisButton.prop('disabled', true);
71+
//$.ajax({
72+
// type: 'POST',
73+
// url: widget.options.saveCategoryUrl,
74+
// data: {
75+
// general: {
76+
// name: $('#new_category_name').val(),
77+
// is_active: 1,
78+
// include_in_menu: 1
79+
// },
80+
// parent: $('#new_category_parent').val(),
81+
// use_config: ['available_sort_by', 'default_sort_by'],
82+
// form_key: FORM_KEY,
83+
// return_session_messages_only: 1
84+
// },
85+
// dataType: 'json',
86+
// context: $('body')
87+
//})
88+
// .success(
89+
// function (data) {
90+
// if (!data.error) {
91+
// $('#category_ids-suggest').trigger('selectItem', {
92+
// id: data.category.entity_id,
93+
// label: data.category.name
94+
// });
95+
// $('#new_category_name, #new_category_parent-suggest').val('');
96+
// $('#category_ids-suggest').val('');
97+
// clearParentCategory();
98+
// widget.dialog.trigger('closeDialog');
99+
// } else {
100+
// $('#new_category_messages').html(data.messages);
101+
// }
102+
// }
103+
//)
104+
// .complete(
105+
// function () {
106+
// thisButton.prop('disabled', false);
107+
// }
108+
//);
108109
}
109110
}]
110111
});
112+
this.insideDialog = $('<div>lol</div>').dialog({
113+
type: 'slideOut',
114+
dialogClass: 'mage-new-category-dialog form-inline'
115+
});
111116
}
112117
});
113118

‎app/code/Magento/Sales/view/adminhtml/web/order/edit/message.js

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -44,26 +44,7 @@ define([
4444
* @protected
4545
*/
4646
_prepareDialog: function() {
47-
var self = this;
48-
49-
this.options.dialog = $('<div class="ui-dialog-content ui-widget-content"></div>').dialog({
50-
type: 'modal',
51-
dialogClass: 'edit-order-popup',
52-
title: $.mage.__('Edit Order'),
53-
buttons: [{
54-
text: $.mage.__('Ok'),
55-
'class': 'action-primary',
56-
click: function(){
57-
self.redirect();
58-
}
59-
}, {
60-
text: $.mage.__('Cancel'),
61-
'class': 'action-close',
62-
click: function(){
63-
self.options.dialog.trigger('closeDialog');
64-
}
65-
}]
66-
});
47+
this.options.dialog = $('<div class="ui-dialog-content ui-widget-content"></div>').dialog();
6748
}
6849
});
6950

‎app/code/Magento/Ui/view/base/web/js/dialog/dialog.js

Lines changed: 99 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@
44
*/
55
define([
66
"jquery",
7+
"underscore",
78
"mage/template",
89
"text!ui/template/dialog/dialog.html",
910
"jquery/ui"
10-
], function($, template, dialogTemplate){
11+
], function($, _,template, dialogTemplate){
1112
"use strict";
1213

1314
/**
@@ -16,18 +17,25 @@ define([
1617
$.widget('mage.dialog', {
1718
options: {
1819
type: 'modal',
19-
title: null,
20-
template: template(dialogTemplate),
21-
buttons: [],
20+
title: '',
21+
template: dialogTemplate,
22+
buttons: [{
23+
text: $.mage.__('Ok'),
24+
'class': 'action-primary',
25+
click: function(){
26+
this.closeDialog();
27+
}
28+
}],
2229
events: [],
2330
dialogClass: '',
2431
dialogActiveClass: 'ui-dialog-active',
2532
overlayClass: 'overlay_magento',
26-
dialogTitleSelector: '.ui-dialog-title',
27-
dialogCloseBtnSelector: '.ui-dialog-titlebar-close',
28-
dialogContentSelector: '.dialog-content',
29-
dialogActionsSelector: '.dialog-actions',
33+
dialogBlock: '[data-role="dialog"]',
34+
dialogCloseBtn: '[data-role="closeBtn"]',
35+
dialogContent: '[data-role="content"]',
36+
dialogAction: '[data-role="action"]',
3037
appendTo: 'body',
38+
wrapperId: 'dialogs-wrapper',
3139
position: {
3240
modal: {
3341
width: '75%',
@@ -40,101 +48,119 @@ define([
4048
width: 'auto',
4149
position: 'fixed',
4250
top: '0',
43-
left: '100%',
51+
left: '148px',
4452
bottom: '0',
4553
right: '0'
4654
}
4755
}
4856
},
4957

50-
5158
_create: function() {
59+
this.options.transitionEvent = this.whichTransitionEvent();
5260
this._createWrapper();
53-
this._createTitlebar();
61+
this._renderDialog();
5462
this._createButtons();
5563
this._style();
56-
this._insertContent();
5764

65+
this.dialog.find(this.options.dialogCloseBtn).on('click', _.bind(this.closeDialog, this));
5866
this.element.on('openDialog', _.bind(this.openDialog, this));
5967
this.element.on('closeDialog', _.bind(this.closeDialog, this));
60-
61-
return this.element;
68+
},
69+
_getElem: function(elem) {
70+
return this.dialog.find(elem);
6271
},
6372
openDialog: function() {
6473
this._isOpen = true;
65-
6674
this._position();
6775
this._createOverlay();
68-
this.uiDialog.show();
69-
this.uiDialog.addClass(this.options.dialogActiveClass);
70-
if ( this.options.type === 'slideOut' ) {
71-
this.uiDialog.animate({
72-
left: '148px'
73-
}, 300);
74-
}
76+
this.dialog.show();
77+
this.dialog.addClass(this.options.dialogActiveClass);
78+
79+
return this.dialog;
7580
},
7681
closeDialog: function() {
7782
var that = this;
78-
this._isOpen = false;
7983

80-
if ( this.options.type === 'slideOut' ) {
81-
this.uiDialog.animate({
82-
left: '100%'
83-
}, 300, function() {
84-
that._destroyOverlay();
85-
});
86-
} else {
87-
this.uiDialog.removeClass(this.options.dialogActiveClass);
84+
this._isOpen = false;
85+
this.dialog.one(this.options.transitionEvent, function() {
86+
that.dialog.hide();
87+
that._destroyOverlay();
88+
});
89+
this.dialog.removeClass(this.options.dialogActiveClass);
90+
if ( !this.options.transitionEvent ) {
91+
this.dialog.hide();
8892
this._destroyOverlay();
8993
}
94+
95+
return this.dialog;
9096
},
9197
_createWrapper: function() {
92-
this.uiDialog = $(this.options.template({data: this.options}))
93-
.addClass(this.options.dialogClass)
94-
.appendTo(this.options.appendTo);
95-
},
96-
_createTitlebar: function() {
97-
this.uiDialog.find(this.options.dialogTitleSelector).html(this.options.title);
98-
this.closeButton = this.uiDialog.find(this.options.dialogCloseBtnSelector);
99-
this.closeButton.on('click', _.bind(this.closeDialog, this));
98+
this.dialogWrapper = $('#'+this.options.wrapperId);
99+
100+
if ( !this.dialogWrapper.length ) {
101+
this.dialogWrapper = $('<div></div>')
102+
.attr('id', this.options.wrapperId)
103+
.appendTo(this.options.appendTo);
104+
}
100105
},
101-
_insertContent: function() {
102-
this.content = this.uiDialog.find(this.options.dialogContentSelector);
103-
this.element
104-
.show()
105-
.appendTo( this.content );
106+
_renderDialog: function() {
107+
this.dialog = $(template(
108+
this.options.template,
109+
{
110+
data: this.options
111+
})).appendTo(this.dialogWrapper);
112+
113+
this.element.show().appendTo(this._getElem(this.options.dialogContent));
114+
this.dialog.hide();
106115
},
107116
_createButtons: function() {
108117
var that = this;
109118

110-
this.buttonsPane = this.uiDialog.find(this.options.dialogActionsSelector);
119+
this.buttons = this._getElem(this.options.dialogAction);
111120
_.each(this.options.buttons, function(btn, key) {
112-
var button = that.buttonsPane.children()[key];
121+
var button = that.buttons[key];
113122

114-
button.on('click', btn.click);
123+
button.on('click', _.bind(btn.click, that));
115124
});
116125
},
117126
_createOverlay: function() {
118-
var that = this;
127+
var that = this,
128+
events;
119129

120-
document.body.style.overflow = 'hidden';
121-
this.overlay = $('<div></div>')
122-
.addClass(this.options.overlayClass)
123-
.appendTo( this.options.appendTo );
124-
this.overlay.on('click', function(){
130+
this.overlay = $('.' + this.options.overlayClass);
131+
if ( !this.overlay.length ) {
132+
document.body.style.overflow = 'hidden';
133+
this.overlay = $('<div></div>')
134+
.addClass(this.options.overlayClass)
135+
.appendTo( this.options.appendTo );
136+
} else {
137+
var zIndex =this.overlay.zIndex();
138+
this.overlay.zIndex(zIndex + 1);
139+
}
140+
events = this.overlay.data('events');
141+
if ( events ) {
142+
this.prevOverlayHandler = events.click[0].handler;
143+
}
144+
this.overlay.unbind().on('click', function() {
125145
that.closeDialog();
126146
});
127147
},
128148

129149
_destroyOverlay: function() {
130-
document.body.style.overflow = 'auto';
131-
if ( this.overlay ) {
150+
var dialogCount = this.dialogWrapper.find(this.options.dialogBlock).filter(':visible').length;
151+
152+
if ( !dialogCount ) {
153+
document.body.style.overflow = 'auto';
132154
this.overlay.remove();
133155
this.overlay = null;
156+
} else {
157+
var zIndex =this.overlay.zIndex();
158+
this.overlay.zIndex(zIndex - 1);
159+
this.overlay.unbind().on('click', this.prevOverlayHandler);
134160
}
135161
},
136162
_style: function() {
137-
this.uiDialog.css({
163+
this.dialog.css({
138164
padding: '30px',
139165
backgroundColor: '#fff',
140166
zIndex: 1000
@@ -143,7 +169,23 @@ define([
143169
_position: function() {
144170
var type = this.options.type;
145171

146-
this.uiDialog.css(this.options.position[type]);
172+
this.dialog.css(this.options.position[type]);
173+
},
174+
whichTransitionEvent: function() {
175+
var t,
176+
el = document.createElement('fakeelement'),
177+
transitions = {
178+
'transition': 'transitionend',
179+
'OTransition': 'oTransitionEnd',
180+
'MozTransition': 'transitionend',
181+
'WebkitTransition': 'webkitTransitionEnd'
182+
};
183+
184+
for (t in transitions){
185+
if ( el.style[t] !== undefined && transitions.hasOwnProperty(t) ) {
186+
return transitions[t];
187+
}
188+
}
147189
}
148190
});
149191

0 commit comments

Comments
 (0)