Skip to content

Commit 42a4f54

Browse files
slopokslopok
committed
MAGETWO-34949: Modal Window Widget
1 parent f8c0aa2 commit 42a4f54

File tree

6 files changed

+183
-149
lines changed

6 files changed

+183
-149
lines changed

‎app/code/Magento/Catalog/Block/Adminhtml/Product/Helper/Form/Category.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ public function getAfterElementHtml()
132132
'id' => 'add_category_button',
133133
'label' => $newCategoryCaption,
134134
'title' => $newCategoryCaption,
135-
'onclick' => 'jQuery("#new-category").dialog("open")',
135+
'onclick' => 'jQuery("#new-category").trigger("openDialog")',
136136
'disabled' => $this->getDisabled(),
137137
]
138138
);

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
define([
88
'jquery',
99
'jquery/ui',
10-
'mage/dialog',
10+
'Magento_Ui/js/dialog/dialog',
1111
'mage/translate',
1212
'mage/backend/tree-suggest',
1313
'mage/backend/validation'
@@ -54,7 +54,7 @@ define([
5454
});
5555
this.element.dialog({
5656
type: 'slideOut',
57-
className: 'mage-new-category-dialog form-inline',
57+
dialogClass: 'mage-new-category-dialog form-inline',
5858
title: $.mage.__('Create Category'),
5959
buttons: [{
6060
text: $.mage.__('Create Category'),
@@ -94,7 +94,7 @@ define([
9494
$('#new_category_name, #new_category_parent-suggest').val('');
9595
$('#category_ids-suggest').val('');
9696
clearParentCategory();
97-
widget.element.trigger('close');
97+
widget.element.trigger('closeDialog');
9898
} else {
9999
$('#new_category_messages').html(data.messages);
100100
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
define([
88
"jquery",
99
"jquery/ui",
10-
"mage/dialog",
10+
'Magento_Ui/js/dialog/dialog',
1111
"mage/translate"
1212
], function($){
1313
"use strict";
@@ -29,7 +29,7 @@ define([
2929
* Show dialog
3030
*/
3131
showDialog: function() {
32-
this.options.dialog.html(this.options.message).trigger('open');
32+
this.options.dialog.html(this.options.message).trigger('openDialog');
3333
},
3434

3535
/**
@@ -48,7 +48,7 @@ define([
4848

4949
this.options.dialog = $('<div class="ui-dialog-content ui-widget-content"></div>').dialog({
5050
type: 'modal',
51-
className: 'edit-order-popup',
51+
dialogClass: 'edit-order-popup',
5252
title: $.mage.__('Edit Order'),
5353
buttons: [{
5454
text: $.mage.__('Ok'),
@@ -60,7 +60,7 @@ define([
6060
text: $.mage.__('Cancel'),
6161
'class': 'action-close',
6262
click: function(){
63-
self.options.dialog.trigger('close');
63+
self.options.dialog.trigger('closeDialog');
6464
}
6565
}]
6666
});

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

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
/**
2+
* Copyright © 2015 Magento. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
define([
6+
"jquery",
7+
"mage/template",
8+
"text!ui/template/dialog/dialog.html",
9+
"jquery/ui"
10+
], function($, template, dialogTemplate){
11+
"use strict";
12+
13+
/**
14+
* Dialog Widget - this widget is a wrapper for the jQuery UI Dialog
15+
*/
16+
$.widget('mage.dialog', {
17+
options: {
18+
type: 'modal',
19+
title: null,
20+
template: template(dialogTemplate),
21+
buttons: [],
22+
events: [],
23+
dialogClass: '',
24+
dialogActiveClass: 'ui-dialog-active',
25+
overlayClass: 'overlay_magento',
26+
dialogTitleSelector: '.ui-dialog-title',
27+
dialogCloseBtnSelector: '.ui-dialog-titlebar-close',
28+
dialogContentSelector: '.dialog-content',
29+
dialogActionsSelector: '.dialog-actions',
30+
appendTo: 'body',
31+
position: {
32+
modal: {
33+
width: '75%',
34+
position: 'fixed',
35+
top: '50px',
36+
left: '12.5%',
37+
right: '12.5%'
38+
},
39+
slideOut: {
40+
width: 'auto',
41+
position: 'fixed',
42+
top: '0',
43+
left: '100%',
44+
bottom: '0',
45+
right: '0'
46+
}
47+
}
48+
},
49+
50+
51+
_create: function() {
52+
this._createWrapper();
53+
this._createTitlebar();
54+
this._createButtons();
55+
this._style();
56+
this._insertContent();
57+
58+
this.element.on('openDialog', _.bind(this.openDialog, this));
59+
this.element.on('closeDialog', _.bind(this.closeDialog, this));
60+
61+
return this.element;
62+
},
63+
openDialog: function() {
64+
this._isOpen = true;
65+
66+
this._position();
67+
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+
}
75+
},
76+
closeDialog: function() {
77+
var that = this;
78+
this._isOpen = false;
79+
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);
88+
this._destroyOverlay();
89+
}
90+
},
91+
_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));
100+
},
101+
_insertContent: function() {
102+
this.content = this.uiDialog.find(this.options.dialogContentSelector);
103+
this.element
104+
.show()
105+
.appendTo( this.content );
106+
},
107+
_createButtons: function() {
108+
var that = this;
109+
110+
this.buttonsPane = this.uiDialog.find(this.options.dialogActionsSelector);
111+
_.each(this.options.buttons, function(btn, key) {
112+
var button = that.buttonsPane.children()[key];
113+
114+
button.on('click', btn.click);
115+
});
116+
},
117+
_createOverlay: function() {
118+
var that = this;
119+
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(){
125+
that.closeDialog();
126+
});
127+
},
128+
129+
_destroyOverlay: function() {
130+
document.body.style.overflow = 'auto';
131+
if ( this.overlay ) {
132+
this.overlay.remove();
133+
this.overlay = null;
134+
}
135+
},
136+
_style: function() {
137+
this.uiDialog.css({
138+
padding: '30px',
139+
backgroundColor: '#fff',
140+
zIndex: 1000
141+
});
142+
},
143+
_position: function() {
144+
var type = this.options.type;
145+
146+
this.uiDialog.css(this.options.position[type]);
147+
}
148+
});
149+
150+
return $.mage.dialog;
151+
});

‎app/code/Magento/Ui/view/base/web/templates/dialog/dialog.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!--
2+
/**
3+
* Copyright © 2015 Magento. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
-->
7+
<div class="ui-dialog">
8+
<div class="dialog-header">
9+
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
10+
<span id="ui-id-3" class="ui-dialog-title"></span>
11+
<a class="ui-dialog-titlebar-close ui-corner-all" role="button">
12+
<span class="ui-icon ui-icon-closethick">close</span>
13+
</a>
14+
</div>
15+
</div>
16+
<div class="dialog-content"></div>
17+
<div class="dialog-actions">
18+
<% _.each(data.buttons, function(button) { %>
19+
<button type="button" class="<%= button.class %>"><%= button.text %></button>
20+
<% }); %>
21+
</div>
22+
</div>

0 commit comments

Comments
 (0)