Skip to content

Commit f8c0aa2

Browse files
slopokslopok
committed
MAGETWO-34949: Modal Window Widget
1 parent 4f25bdd commit f8c0aa2

File tree

3 files changed

+168
-79
lines changed

3 files changed

+168
-79
lines changed

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

Lines changed: 5 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
define([
88
'jquery',
99
'jquery/ui',
10+
'mage/dialog',
1011
'mage/translate',
1112
'mage/backend/tree-suggest',
1213
'mage/backend/validation'
@@ -51,43 +52,10 @@ define([
5152
options.errorClass, options.validClass || '');
5253
}
5354
});
54-
5555
this.element.dialog({
56+
type: 'slideOut',
57+
className: 'mage-new-category-dialog form-inline',
5658
title: $.mage.__('Create Category'),
57-
autoOpen: false,
58-
width: '75%',
59-
dialogClass: 'mage-new-category-dialog form-inline',
60-
modal: true,
61-
multiselect: true,
62-
resizable: false,
63-
position: {
64-
my: 'left top',
65-
at: 'center top',
66-
of: 'body'
67-
},
68-
open: function () {
69-
// fix for suggest field - overlapping dialog z-index
70-
$('#new_category_parent-suggest').css('z-index', $.ui.dialog.maxZ + 1);
71-
var enteredName = $('#category_ids-suggest').val();
72-
$('#new_category_name').val(enteredName);
73-
if (enteredName === '') {
74-
$('#new_category_name').focus();
75-
}
76-
$('#new_category_messages').html('');
77-
$(this).closest('.ui-dialog').addClass('ui-dialog-active');
78-
79-
var topMargin = $(this).closest('.ui-dialog').children('.ui-dialog-titlebar').outerHeight() + 15;
80-
$(this).closest('.ui-dialog').css('margin-top', topMargin);
81-
},
82-
close: function () {
83-
$('#new_category_name, #new_category_parent-suggest').val('');
84-
var validationOptions = newCategoryForm.validation('option');
85-
validationOptions.unhighlight($('#new_category_parent-suggest').get(0),
86-
validationOptions.errorClass, validationOptions.validClass || '');
87-
newCategoryForm.validation('clearError');
88-
$('#category_ids-suggest').focus();
89-
$(this).closest('.ui-dialog').removeClass('ui-dialog-active');
90-
},
9159
buttons: [{
9260
text: $.mage.__('Create Category'),
9361
'class': 'action-primary',
@@ -96,8 +64,8 @@ define([
9664
if (!newCategoryForm.valid()) {
9765
return;
9866
}
67+
var thisButton = $(this);
9968

100-
var thisButton = $(event.target).closest('[data-action=save]');
10169
thisButton.prop('disabled', true);
10270
$.ajax({
10371
type: 'POST',
@@ -126,7 +94,7 @@ define([
12694
$('#new_category_name, #new_category_parent-suggest').val('');
12795
$('#category_ids-suggest').val('');
12896
clearParentCategory();
129-
widget.element.dialog('close');
97+
widget.element.trigger('close');
13098
} else {
13199
$('#new_category_messages').html(data.messages);
132100
}

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

Lines changed: 22 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
define([
88
"jquery",
99
"jquery/ui",
10+
"mage/dialog",
1011
"mage/translate"
1112
], function($){
1213
"use strict";
13-
1414
$.widget('mage.orderEditDialog', {
1515
options: {
1616
url: null,
@@ -29,7 +29,7 @@ define([
2929
* Show dialog
3030
*/
3131
showDialog: function() {
32-
this.options.dialog.html(this.options.message).dialog('open');
32+
this.options.dialog.html(this.options.message).trigger('open');
3333
},
3434

3535
/**
@@ -46,44 +46,26 @@ define([
4646
_prepareDialog: function() {
4747
var self = this;
4848

49-
this.options.dialog = $('<div class="ui-dialog-content ui-widget-content"></div>')
50-
.dialog({
51-
autoOpen: false,
52-
title: $.mage.__('Edit Order'),
53-
modal: true,
54-
resizable: false,
55-
width: '75%',
56-
dialogClass: 'edit-order-popup',
57-
position: {
58-
my: 'left top',
59-
at: 'center top',
60-
of: 'body'
61-
},
62-
open: function () {
63-
jQuery(this).closest('.ui-dialog').addClass('ui-dialog-active');
64-
65-
var topMargin = $(this).closest('.ui-dialog').children('.ui-dialog-titlebar').outerHeight() - 20;
66-
$(this).closest('.ui-dialog').css('margin-top', topMargin);
67-
},
68-
close: function() {
69-
jQuery(this).closest('.ui-dialog').removeClass('ui-dialog-active');
70-
},
71-
buttons: [{
72-
text: $.mage.__('Ok'),
73-
'class': 'action-primary',
74-
click: function(){
75-
self.redirect();
76-
}
77-
}, {
78-
text: $.mage.__('Cancel'),
79-
'class': 'action-close',
80-
click: function(){
81-
$(this).dialog('close');
82-
}
83-
}]
84-
});
49+
this.options.dialog = $('<div class="ui-dialog-content ui-widget-content"></div>').dialog({
50+
type: 'modal',
51+
className: '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('close');
64+
}
65+
}]
66+
});
8567
}
8668
});
87-
69+
8870
return $.mage.orderEditDialog;
89-
});
71+
});

‎lib/web/mage/dialog.js

Lines changed: 141 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,153 @@
44
*/
55
define([
66
"jquery",
7+
"mage/template",
78
"jquery/ui"
8-
], function($){
9+
], function($, template){
910
"use strict";
1011

1112
/**
1213
* Dialog Widget - this widget is a wrapper for the jQuery UI Dialog
1314
*/
14-
$.widget('mage.dialog', $.ui.dialog, {});
15+
$.widget('mage.dialog', {
16+
options: {
17+
type: 'modal',
18+
title: null,
19+
template: '<div class="dialog-header"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-3" class="ui-dialog-title"></span><a class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div></div><div class="dialog-content"></div><div class="dialog-actions"></div>',
20+
buttons: [],
21+
show: null,
22+
events: [],
23+
className: '',
24+
position: {
25+
modal: {
26+
width: '75%',
27+
position: 'fixed',
28+
top: '50px',
29+
left: '12.5%',
30+
right: '12.5%'
31+
},
32+
slideOut: {
33+
width: 'auto',
34+
position: 'fixed',
35+
top: '0',
36+
left: '100%',
37+
bottom: '0',
38+
right: '0'
39+
}
40+
}
41+
},
42+
43+
44+
_create: function() {
45+
this._createWrapper();
46+
this._createTitlebar();
47+
this._createButtons();
48+
this._style();
49+
this._insertContent();
50+
51+
this.element.on('open', _.bind(this.open, this));
52+
this.element.on('close', _.bind(this.close, this));
53+
54+
return this.element;
55+
},
56+
open: function() {
57+
this._isOpen = true;
58+
59+
this._position();
60+
this._createOverlay();
61+
this.uiDialog.show();
62+
this.uiDialog.addClass('ui-dialog-active');
63+
if ( this.options.type === 'slideOut' ) {
64+
this.uiDialog.animate({
65+
left: '148px'
66+
}, 300);
67+
}
68+
},
69+
close: function() {
70+
var that = this;
71+
this._isOpen = false;
72+
73+
if ( this.options.type === 'slideOut' ) {
74+
this.uiDialog.animate({
75+
left: '100%'
76+
}, 300, function() {
77+
that._destroyOverlay();
78+
});
79+
} else {
80+
this.uiDialog.removeClass('ui-dialog-active');
81+
this._destroyOverlay();
82+
}
83+
},
84+
_createWrapper: function() {
85+
this.uiDialog = $('<div/>')
86+
.addClass('ui-dialog ' + this.options.className)
87+
.hide()
88+
.html(this.options.template)
89+
.appendTo( this._appendTo() );
90+
},
91+
_appendTo: function() {
92+
var element = this.options.appendTo;
93+
94+
if ( element && (element.jquery || element.nodeType) ) {
95+
return $( element );
96+
}
97+
98+
return this.document.find( element || "body" ).eq( 0 );
99+
},
100+
_createTitlebar: function() {
101+
this.uiDialog.find('.ui-dialog-title').html(this.options.title);
102+
this.closeButton = this.uiDialog.find('.ui-dialog-titlebar-close');
103+
this.closeButton.on('click', _.bind(this.close, this));
104+
},
105+
_createButtons: function() {
106+
var that = this;
107+
108+
this.buttonsPane = this.uiDialog.find('.dialog-actions');
109+
_.each(this.options.buttons, function(btn){
110+
var button = $('<button type="button"></button>')
111+
.addClass(btn.class).html(btn.text);
112+
113+
button.on('click', btn.click);
114+
that.buttonsPane.append(button);
115+
});
116+
},
117+
_createOverlay: function() {
118+
var that = this;
119+
120+
document.body.style.overflow = 'hidden';
121+
this.overlay = $("<div>")
122+
.addClass("overlay_magento")
123+
.appendTo( this._appendTo() );
124+
this.overlay.on('click', function(){
125+
that.close();
126+
});
127+
},
128+
_insertContent: function() {
129+
this.content = this.uiDialog.find('.dialog-content');
130+
this.element
131+
.show()
132+
.appendTo( this.content );
133+
},
134+
_destroyOverlay: function() {
135+
document.body.style.overflow = 'auto';
136+
if ( this.overlay ) {
137+
this.overlay.remove();
138+
this.overlay = null;
139+
}
140+
},
141+
_style: function() {
142+
this.uiDialog.css({
143+
padding: '30px',
144+
backgroundColor: '#fff',
145+
zIndex: 1000
146+
});
147+
},
148+
_position: function() {
149+
var type = this.options.type;
150+
151+
this.uiDialog.css(this.options.position[type]);
152+
}
153+
});
15154

16155
return $.mage.dialog;
17156
});

0 commit comments

Comments
 (0)