Skip to content

Commit 138bc3b

Browse files
slopokslopok
committed
MAGETWO-37594: Implementation and fixes after review
1 parent 1e94c95 commit 138bc3b

File tree

7 files changed

+177
-60
lines changed

7 files changed

+177
-60
lines changed

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

Lines changed: 50 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ define([
2323
$.widget('mage.newCategoryDialog', {
2424
_create: function () {
2525
var widget = this;
26-
2726
$('#new_category_parent').before($('<input>', {
2827
id: 'new_category_parent-suggest',
2928
placeholder: $.mage.__('start typing to search category')
@@ -53,20 +52,19 @@ define([
5352
options.errorClass, options.validClass || '');
5453
}
5554
});
56-
this.dialog = this.element.dialog({
55+
this.element.dialog({
5756
type: 'slide',
5857
dialogClass: 'mage-new-category-dialog form-inline',
5958
title: $.mage.__('Create Category'),
6059
buttons: [{
6160
text: $.mage.__('Create Category'),
62-
'class': 'action-primary',
61+
class: 'action-primary',
6362
click: function () {
64-
widget.insideDialog.trigger('openDialog');
63+
widget.somedialog4.trigger('openDialog');
6564
//if (!newCategoryForm.valid()) {
6665
// return;
6766
//}
6867
//var thisButton = $(this);
69-
//
7068
//thisButton.prop('disabled', true);
7169
//$.ajax({
7270
// type: 'POST',
@@ -95,7 +93,7 @@ define([
9593
// $('#new_category_name, #new_category_parent-suggest').val('');
9694
// $('#category_ids-suggest').val('');
9795
// clearParentCategory();
98-
// widget.dialog.trigger('closeDialog');
96+
// widget.element.trigger('closeDialog');
9997
// } else {
10098
// $('#new_category_messages').html(data.messages);
10199
// }
@@ -108,11 +106,53 @@ define([
108106
//);
109107
}
110108
}]
111-
}).data('mage-dialog');
112-
113-
this.insideDialog = $('<div>Another dialog</div>').dialog({
109+
});
110+
this.somedialog1 = $('<div></div>').dialog({
111+
type: 'slide',
112+
responsive: true,
113+
title: $.mage.__('1 Category'),
114+
buttons: [{
115+
text: $.mage.__('Create Category'),
116+
class: 'action-primary',
117+
click: function () {
118+
//widget.somedialog2.trigger('openDialog');
119+
}
120+
}]
121+
});
122+
this.somedialog2 = $('<div></div>').dialog({
123+
type: 'slide',
124+
title: $.mage.__('2 Category'),
125+
buttons: [{
126+
text: $.mage.__('Create Category'),
127+
class: 'action-primary',
128+
click: function () {
129+
widget.somedialog1.trigger('openDialog');
130+
}
131+
}]
132+
});
133+
this.somedialog3 = $('<div></div>').dialog({
114134
type: 'slide',
115-
dialogClass: 'mage-new-category-dialog form-inline'
135+
title: $.mage.__('3 Category'),
136+
buttons: [{
137+
text: $.mage.__('Create Category'),
138+
class: 'action-primary',
139+
click: function () {
140+
widget.somedialog2.trigger('openDialog');
141+
}
142+
}]
143+
});
144+
this.somedialog4 = $('<div></div>').dialog({
145+
type: 'modal',
146+
responsive: true,
147+
innerScroll: true,
148+
title: $.mage.__('4 Category'),
149+
buttons: [{
150+
text: $.mage.__('Create Category'),
151+
class: 'action-primary',
152+
click: function () {
153+
widget.somedialog3.trigger('openDialog');
154+
}
155+
}]
116156
});
117157
}
118158
});

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

Lines changed: 111 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -7,41 +7,47 @@ define([
77
"underscore",
88
"mage/template",
99
"text!ui/template/dialog/dialog-modal.html",
10+
"text!ui/template/dialog/dialog-slide.html",
1011
"jquery/ui",
1112
"mage/translate"
12-
], function($, _,template, dialogTemplate){
13+
], function($, _, template, modalTpl, slideTpl){
1314
"use strict";
1415

1516
/**
16-
* Dialog Widget - this widget is a wrapper for the jQuery UI Dialog
17+
* Dialog Widget
1718
*/
1819
$.widget('mage.dialog', {
1920
options: {
2021
type: 'modal',
2122
title: '',
22-
template: dialogTemplate,
23-
buttons: [{
24-
text: $.mage.__('Ok'),
25-
class: 'action-primary',
26-
click: function(){
27-
this.closeDialog();
28-
}
29-
}],
30-
events: [],
3123
dialogClass: '',
32-
dialogActiveClass: '_show',
24+
modalTpl: modalTpl,
25+
slideTpl: slideTpl,
26+
dialogVisibleClass: '_show',
3327
parentDialogClass: '_has-dialog',
34-
overlayClass: 'overlay_magento',
35-
responsiveClass: 'dialog-slide',
28+
innerScrollClass: '_inner-scroll',
3629
responsive: false,
30+
innerScroll: false,
3731
dialogBlock: '[data-role="dialog"]',
3832
dialogCloseBtn: '[data-role="closeBtn"]',
3933
dialogContent: '[data-role="content"]',
4034
dialogAction: '[data-role="action"]',
4135
appendTo: 'body',
42-
wrapperId: 'dialogs-wrapper'
36+
wrapperClass: 'dialogs-wrapper',
37+
overlayClass: 'overlay_magento',
38+
responsiveClass: 'dialog-slide',
39+
dialogLeftMargin: 45,
40+
buttons: [{
41+
text: $.mage.__('Ok'),
42+
class: '',
43+
click: function(){
44+
this.closeDialog();
45+
}
46+
}]
4347
},
44-
48+
/**
49+
* Creates dialog widget.
50+
*/
4551
_create: function() {
4652
this.options.transitionEvent = this.whichTransitionEvent();
4753
this._createWrapper();
@@ -52,14 +58,42 @@ define([
5258
this.element.on('openDialog', _.bind(this.openDialog, this));
5359
this.element.on('closeDialog', _.bind(this.closeDialog, this));
5460
},
61+
/**
62+
* Returns element from dialog node.
63+
* @return {Object} - element.
64+
*/
5565
_getElem: function(elem) {
5666
return this.dialog.find(elem);
5767
},
68+
/**
69+
* Gets visible dialog count.
70+
* * @return {Number} - visible dialog count.
71+
*/
72+
_getVisibleCount: function() {
73+
return this.dialogWrapper.find('.'+this.options.dialogVisibleClass).length;
74+
},
75+
/**
76+
* Gets visible slide type dialog count.
77+
* * @return {Number} - visible dialog count.
78+
*/
79+
_getVisibleSlideCount: function() {
80+
var elems = this.dialogWrapper.find('[data-type="'+this.options.type+'"]');
81+
82+
return elems.filter('.'+this.options.dialogVisibleClass).length;
83+
},
5884
openDialog: function() {
85+
var that = this;
86+
5987
this.options.isOpen = true;
6088
this._createOverlay();
61-
this.dialog.show();
62-
this.dialog.addClass(this.options.dialogActiveClass);
89+
this._setActive();
90+
this.dialog.one(this.options.transitionEvent, function() {
91+
that._trigger('opened');
92+
});
93+
this.dialog.addClass(this.options.dialogVisibleClass);
94+
if ( !this.options.transitionEvent ) {
95+
that._trigger('opened');
96+
}
6397

6498
return this.element;
6599
},
@@ -68,91 +102,125 @@ define([
68102

69103
this.options.isOpen = false;
70104
this.dialog.one(this.options.transitionEvent, function() {
71-
that.dialog.removeClass(that.options.dialogActiveClass);
72105
that._close();
73106
});
74-
this.dialog.removeClass(this.options.dialogActiveClass);
107+
this.dialog.removeClass(this.options.dialogVisibleClass);
75108
if ( !this.options.transitionEvent ) {
76-
that.dialog.removeClass(this.options.dialogActiveClass);
77109
that._close();
78110
}
79111

80112
return this.element;
81113
},
114+
/**
115+
* Helper for closeDialog function.
116+
*/
82117
_close: function() {
83-
this.dialog.hide();
118+
var trigger = _.bind(this._trigger, this, 'closed', this.dialog);
119+
84120
this._destroyOverlay();
85-
this._trigger('dialogClosed');
121+
this._unsetActive();
122+
_.defer(trigger, this);
123+
},
124+
/**
125+
* Set z-index and margin for dialog and overlay.
126+
*/
127+
_setActive: function() {
128+
var zIndex = this.dialog.zIndex();
129+
130+
this.prevOverlayIndex = this.overlay.zIndex();
131+
this.dialog.zIndex(zIndex + this._getVisibleCount());
132+
this.overlay.zIndex(zIndex + (this._getVisibleCount() - 1));
133+
if ( this._getVisibleSlideCount() ) {
134+
this.dialog.css('marginLeft', this.options.dialogLeftMargin * this._getVisibleSlideCount());
135+
}
136+
},
137+
/**
138+
* Unset styles for dialog and set z-index for previous dialog.
139+
*/
140+
_unsetActive: function() {
141+
this.dialog.removeAttr('style');
142+
this.overlay.zIndex(this.prevOverlayIndex);
86143
},
144+
/**
145+
* Creates wrapper to hold all dialogs.
146+
*/
87147
_createWrapper: function() {
88-
this.dialogWrapper = $('#'+this.options.wrapperId);
148+
this.dialogWrapper = $('.'+this.options.wrapperClass);
89149
if ( !this.dialogWrapper.length ) {
90150
this.dialogWrapper = $('<div></div>')
91-
.attr('id', this.options.wrapperId)
151+
.addClass(this.options.wrapperClass)
92152
.appendTo(this.options.appendTo);
93153
}
94154
},
155+
/**
156+
* Compile template and append to wrapper.
157+
*/
95158
_renderDialog: function() {
96-
this.dialog = $(template(
97-
this.options.template,
159+
$(template(
160+
this.options[this.options.type + 'Tpl'],
98161
{
99162
data: this.options
100163
})).appendTo(this.dialogWrapper);
101-
164+
this.dialog = this.dialogWrapper.find(this.options.dialogBlock).last();
102165
this.element.show().appendTo(this._getElem(this.options.dialogContent));
103166
},
167+
/**
168+
* Creates buttons pane.
169+
*/
104170
_createButtons: function() {
105171
var that = this;
106172

107173
this.buttons = this._getElem(this.options.dialogAction);
108174
_.each(this.options.buttons, function(btn, key) {
109175
var button = that.buttons[key];
110176

111-
$(button).on('click', _.bind(btn.click, that));
177+
$(button).on('click', _.bind(btn.click, button));
112178
});
113179
},
180+
/**
181+
* Creates overlay, append it to wrapper, set previous click event on overlay.
182+
*/
114183
_createOverlay: function() {
115184
var that = this,
116185
events;
117186

118187
this.overlay = $('.' + this.options.overlayClass);
119188
if ( !this.overlay.length ) {
120-
121189
$(this.options.appendTo).addClass(this.options.parentDialogClass);
122190
this.overlay = $('<div></div>')
123191
.addClass(this.options.overlayClass)
124-
.appendTo( this.options.appendTo );
125-
} else {
126-
var zIndex =this.overlay.zIndex();
127-
this.overlay.zIndex(zIndex + 1);
192+
.appendTo(this.dialogWrapper);
128193
}
129-
events = this.overlay.data('events');
194+
195+
events = $._data(this.overlay.get(0), 'events');
130196
if ( events ) {
131197
this.prevOverlayHandler = events.click[0].handler;
132198
}
133199
this.overlay.unbind().on('click', function() {
134200
that.closeDialog();
135201
});
136202
},
137-
203+
/**
204+
* Destroy overlay.
205+
*/
138206
_destroyOverlay: function() {
139-
var dialogCount = this.dialogWrapper.find(this.options.dialogBlock).filter(this.option.dialogClass).length;
207+
var dialogCount = this.dialogWrapper.find('.'+this.options.dialogVisibleClass).length;
140208

141209
if ( !dialogCount ) {
142-
143210
$(this.options.appendTo).removeClass(this.options.parentDialogClass);
144-
145211
this.overlay.remove();
146212
this.overlay = null;
213+
147214
} else {
148-
var zIndex =this.overlay.zIndex();
149-
this.overlay.zIndex(zIndex - 1);
150215
this.overlay.unbind().on('click', this.prevOverlayHandler);
151216
}
152217
},
218+
/**
219+
* Detects browser transition event.
220+
*/
153221
whichTransitionEvent: function() {
154222
var transition,
155-
el = document.createElement('fakeelement'),
223+
el = document.createElement('element'),
156224
transitions = {
157225
'transition': 'transitionend',
158226
'OTransition': 'oTransitionEnd',
@@ -169,4 +237,4 @@ define([
169237
});
170238

171239
return $.mage.dialog;
172-
});
240+
});

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,11 @@
66
-->
77

88
<section
9-
class="dialog-<%= data.type %> <% if(data.responsive){ %><%= data.responsiveClass %><% } %> <%= data.dialogClass %>"
10-
data-role="dialog">
9+
class="dialog-<%= data.type %> <%= data.dialogClass %>
10+
<% if(data.responsive){ %><%= data.responsiveClass %><% } %>
11+
<% if(data.innerScroll){ %><%= data.innerScrollClass %><% } %>"
12+
data-role="dialog"
13+
data-type="<%= data.type %>">
1114
<div class="dialog-inner-wrap">
1215
<header class="dialog-header">
1316
<h1 class="dialog-title"

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
-->
77

88
<section
9-
class="dialog-<%= data.type %> <% if(data.responsive){ %><%= data.responsiveClass %><% } %> <%= data.dialogClass %>"
10-
data-role="dialog">
9+
class="dialog-<%= data.type %> <%= data.dialogClass %>"
10+
data-role="dialog"
11+
data-type="<%= data.type %>">
1112
<div class="dialog-inner-wrap">
1213
<header class="dialog-header">
1314
<h1 class="dialog-title"

‎app/design/adminhtml/Magento/backend/web/css/source/components/_popups.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -514,7 +514,7 @@
514514

515515
.overlay_magento {
516516
&:extend(.ui-widget-overlay all);
517-
z-index: 800 !important;
517+
z-index: 900;
518518
}
519519

520520
//

0 commit comments

Comments
 (0)