romo 0.19.10 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,385 +1,309 @@
1
- $.fn.romoModal = function() {
2
- return $.map(this, function(element) {
3
- return new RomoModal(element);
4
- });
5
- }
6
-
7
- var RomoModal = function(element) {
8
- this.elem = $(element);
9
- this.doInitPopup();
10
- this.romoAjax = this.elem.romoAjax()[0];
11
- this.romoAjax.doUnbindElem(); // disable auto invoke on click
12
-
13
- if (this.elem.data('romo-modal-disable-click-invoke') !== true) {
14
- this.elem.unbind('click');
15
- this.elem.on('click', $.proxy(this.onToggleClick, this));
16
- }
17
- this.elem.on('modal:triggerToggle', $.proxy(this.onToggleClick, this));
18
- this.elem.on('modal:triggerPopupOpen', $.proxy(this.onPopupOpen, this));
19
- this.elem.on('modal:triggerPopupClose', $.proxy(this.onPopupClose, this));
20
- this.elem.on('romoAjax:callStart', $.proxy(function(e, romoAjax) {
21
- this.doLoadBodyStart();
22
- return false;
23
- }, this));
24
- this.elem.on('romoAjax:callSuccess', $.proxy(function(e, data, romoAjax) {
25
- this.doLoadBodySuccess(data);
26
- return false;
27
- }, this));
28
- this.elem.on('romoAjax:callError', $.proxy(function(e, xhr, romoAjax) {
29
- this.doLoadBodyError(xhr);
30
- return false;
31
- }, this));
32
-
33
- this.doBindElemKeyUp();
1
+ var RomoModal = RomoComponent(function(elem) {
2
+ this.elem = elem;
34
3
 
35
4
  this.doInit();
36
- this.doInitBody();
5
+ this._bindElem();
37
6
 
38
- this.elem.trigger('modal:ready', [this]);
39
- }
7
+ Romo.trigger(this.elem, 'romoModal:ready', [this]);
8
+ });
40
9
 
41
- RomoModal.prototype.doInit = function() {
42
- // override as needed
10
+ RomoModal.prototype.popupOpen = function() {
11
+ return Romo.hasClass(this.popupElem, 'romo-modal-open') === true;
43
12
  }
44
13
 
45
- RomoModal.prototype.doInitPopup = function() {
46
- this.popupElem = $('<div class="romo-modal-popup"><div class="romo-modal-body"></div></div>');
47
- this.popupElem.appendTo(this.elem.closest(this.elem.data('romo-modal-append-to-closest') || 'body'));
14
+ RomoModal.prototype.popupClosed = function() {
15
+ return Romo.hasClass(this.popupElem, 'romo-modal-open') === false;
16
+ }
48
17
 
49
- this.bodyElem = this.popupElem.find('> .romo-modal-body');
50
- if (this.elem.data('romo-modal-style-class') !== undefined) {
51
- this.bodyElem.addClass(this.elem.data('romo-modal-style-class'));
18
+ RomoModal.prototype.doToggle = function() {
19
+ if (this.popupOpen()) {
20
+ Romo.pushFn(Romo.proxy(this.doPopupClose, this));
21
+ } else {
22
+ Romo.pushFn(Romo.proxy(this.doPopupOpen, this));
52
23
  }
24
+ Romo.trigger(this.elem, 'romoModal:toggle', [this]);
25
+ }
53
26
 
54
- this.contentElem = $();
55
- this.closeElem = $();
56
- this.dragElem = $();
57
-
58
- // the popup should be treated like a child elem. add it to Romo's
59
- // parent-child elems so it will be removed when the elem is removed.
60
- // delay adding it b/c other components may `append` generated modals
61
- // meaning the modal is removed and then re-added. if added immediately
62
- // the "remove" part will incorrectly remove the popup.
63
- setTimeout($.proxy(function() {
64
- Romo.parentChildElems.add(this.elem, [this.popupElem]);
65
- }, this), 1);
27
+ RomoModal.prototype.doPopupOpen = function() {
28
+ Romo.popupStack.addElem(
29
+ this.popupElem,
30
+ Romo.proxy(this._openPopup, this),
31
+ Romo.proxy(this._closePopup, this),
32
+ Romo.proxy(this.doPlacePopupElem, this)
33
+ );
66
34
  }
67
35
 
68
- RomoModal.prototype.doInitBody = function() {
69
- this.doResetBody();
36
+ RomoModal.prototype.doPopupClose = function() {
37
+ Romo.popupStack.closeThru(this.popupElem);
38
+ }
70
39
 
71
- this.contentElem = this.bodyElem.find('.romo-modal-content').last();
72
- if (this.contentElem.size() === 0) {
73
- this.contentElem = this.bodyElem;
40
+ RomoModal.prototype.doPlacePopupElem = function() {
41
+ var viewportHeight = document.documentElement.clientHeight;
42
+ var viewportWidth = document.documentElement.clientWidth;
43
+
44
+ if (Romo.data(this.elem, 'romo-modal-max-height') === 'detect') {
45
+ var pad = Romo.data(this.elem, 'romo-modal-max-height-detect-pad') || 10;
46
+ var contentTop = this.contentElem.getBoundingClientRect().top;
47
+ var contentBottom = this.contentElem.getBoundingClientRect().bottom;
48
+ var bodyBottom = this.bodyElem.getBoundingClientRect().bottom;
49
+ var padBottom = bodyBottom - contentBottom;
50
+
51
+ var maxHeight = viewportHeight - contentTop - padBottom - pad;
52
+ Romo.setStyle(this.contentElem, 'max-height', maxHeight.toString() + 'px');
74
53
  }
75
54
 
76
- this.closeElem = this.popupElem.find('[data-romo-modal-close="true"]');
77
- this.closeElem.unbind('click');
78
- this.closeElem.on('click', $.proxy(this.onPopupClose, this));
55
+ var popupOffsetHeight = this.popupElem.offsetHeight;
56
+ var popupOffsetWidth = this.popupElem.offsetWidth;
57
+ var minHeightWidth = 75;
58
+ var centerTop = (viewportHeight / 2) - (popupOffsetHeight / 2);
59
+ var centerLeft = (viewportWidth / 2) - (popupOffsetWidth / 2);
79
60
 
80
- this.dragElem = this.popupElem.find('[data-romo-modal-drag="true"]');
81
- this.dragElem.addClass('romo-modal-grab');
82
- this.dragElem.on('mousedown', $.proxy(this.onMouseDown, this));
61
+ var offsetTop = viewportHeight * 0.15;
62
+ if (centerTop < offsetTop) { offsetTop = centerTop; }
63
+ if (offsetTop < minHeightWidth) { offsetTop = minHeightWidth; }
83
64
 
84
- var css = {
85
- 'min-width': this.elem.data('romo-modal-min-width'),
86
- 'max-width': this.elem.data('romo-modal-max-width'),
87
- 'width': this.elem.data('romo-modal-width'),
88
- 'min-height': this.elem.data('romo-modal-min-height'),
89
- 'height': this.elem.data('romo-modal-height'),
90
- 'overflow-x': 'auto',
91
- 'overflow-y': 'auto'
92
- }
65
+ var offsetLeft = centerLeft;
66
+ if (offsetLeft < minHeightWidth) { offsetLeft = minHeightWidth; }
93
67
 
94
- if (this.elem.data('romo-modal-max-height') === undefined) {
95
- this.elem.attr('data-romo-modal-max-height', 'detect');
96
- }
97
- if (this.elem.data('romo-modal-max-height') !== 'detect') {
98
- css['max-height'] = this.elem.data('romo-modal-max-height');
99
- }
100
-
101
- this.contentElem.css(css);
68
+ Romo.setStyle(this.popupElem, 'top', offsetTop + 'px');
69
+ Romo.setStyle(this.popupElem, 'left', offsetLeft + 'px');
102
70
  }
103
71
 
104
- RomoModal.prototype.doResetBody = function() {
105
- this.contentElem.css({
106
- 'min-width': '',
107
- 'max-width': '',
108
- 'width': '',
109
- 'min-height': '',
110
- 'max-height': '',
111
- 'height': '',
112
- 'overflow': ''
113
- });
114
-
115
- this.closeElem.off('click', $.proxy(this.onPopupClose, this));
116
- }
72
+ // private
117
73
 
118
- RomoModal.prototype.doLoadBodyStart = function() {
119
- this.bodyElem.html('');
120
- this.doInitBody();
121
- this.doPlacePopupElem();
122
- this.elem.trigger('modal:loadBodyStart', [this]);
123
- }
74
+ RomoModal.prototype._openPopup = function() {
75
+ if (Romo.data(this.elem, 'romo-modal-content-elem') !== undefined) {
76
+ var contentElem = Romo.elems(Romo.data(this.elem, 'romo-modal-content-elem'))[0];
77
+ this._loadBodySuccess(contentElem.outerHTML);
78
+ } else {
79
+ this.romoAjax.doInvoke();
80
+ }
124
81
 
125
- RomoModal.prototype.doLoadBodySuccess = function(data) {
126
- Romo.initHtml(this.bodyElem, data);
127
- this.doInitBody();
82
+ Romo.addClass(this.popupElem, 'romo-modal-open');
128
83
  this.doPlacePopupElem();
129
- this.elem.trigger('modal:loadBodySuccess', [data, this]);
130
- }
131
84
 
132
- RomoModal.prototype.doLoadBodyError = function(xhr) {
133
- this.elem.trigger('modal:loadBodyError', [xhr, this]);
85
+ Romo.trigger(this.elem, 'romoModal:popupOpen', [this]);
134
86
  }
135
87
 
136
- RomoModal.prototype.onToggleClick = function(e) {
137
- if (e !== undefined) {
138
- e.preventDefault();
139
- }
88
+ RomoModal.prototype._closePopup = function() {
89
+ Romo.removeClass(this.popupElem, 'romo-modal-open');
140
90
 
141
- if (this.elem.hasClass('disabled') === false) {
142
- this.doToggle();
91
+ if (Romo.data(this.elem, 'romo-modal-clear-content') === true) {
92
+ Romo.updateHtml(this.contentElem, '');
143
93
  }
144
- }
145
94
 
146
- RomoModal.prototype.doToggle = function() {
147
- if (this.popupElem.hasClass('romo-modal-open')) {
148
- setTimeout($.proxy(function() {
149
- this.doPopupClose();
150
- }, this), 100);
151
- } else {
152
- setTimeout($.proxy(function() {
153
- this.doPopupOpen();
154
- }, this), 100);
155
- }
156
- this.elem.trigger('modal:toggle', [this]);
95
+ Romo.trigger(this.elem, 'romoModal:popupClose', [this]);
157
96
  }
158
97
 
159
- RomoModal.prototype.onPopupOpen = function(e) {
160
- if (e !== undefined) {
161
- e.preventDefault();
162
- }
98
+ RomoModal.prototype._bindElem = function() {
99
+ this._bindPopup();
100
+ this._bindAjax();
101
+ this._bindBody();
163
102
 
164
- if ((this.elem.hasClass('disabled') === false) &&
165
- (this.popupElem.hasClass('romo-modal-open') === false)) {
166
- setTimeout($.proxy(function() {
167
- this.doPopupOpen();
168
- }, this), 100);
103
+ if (Romo.data(this.elem, 'romo-modal-disable-click-invoke') !== true) {
104
+ Romo.on(this.elem, 'click', Romo.proxy(this._onToggle, this));
169
105
  }
106
+ Romo.on(this.elem, 'romoModal:triggerToggle', Romo.proxy(this._onToggle, this));
107
+ Romo.on(this.elem, 'romoModal:triggerPopupOpen', Romo.proxy(this._onPopupOpen, this));
108
+ Romo.on(this.elem, 'romoModal:triggerPopupClose', Romo.proxy(this._onPopupClose, this));
170
109
  }
171
110
 
172
- RomoModal.prototype.doPopupOpen = function() {
173
- if (this.elem.data('romo-modal-content-elem') !== undefined) {
174
- this.doLoadBodySuccess($(this.elem.data('romo-modal-content-elem')).html())
175
- } else {
176
- this.romoAjax.doInvoke();
111
+ RomoModal.prototype._bindPopup = function() {
112
+ this.popupElem = Romo.elems('<div class="romo-modal-popup"><div class="romo-modal-body"></div></div>')[0];
113
+ var popupParentElem = Romo.closest(this.elem, Romo.data(this.elem, 'romo-dropdown-append-to-closest') || 'body');
114
+ Romo.append(popupParentElem, this.popupElem)
115
+
116
+ this.bodyElem = Romo.children(this.popupElem).find(Romo.proxy(function(childElem){
117
+ return Romo.is(childElem, '.romo-modal-body');
118
+ }, this));
119
+ if (Romo.data(this.elem, 'romo-modal-style-class') !== undefined) {
120
+ Romo.addClass(this.bodyElem, Romo.data(this.elem, 'romo-modal-style-class'));
177
121
  }
178
122
 
179
- this.popupElem.addClass('romo-modal-open');
180
- this.doPlacePopupElem();
123
+ this.contentElem = undefined;
124
+ this.closeElems = [];
125
+ this.dragElems = [];
181
126
 
182
- // bind an event to close the popup when clicking away from the
183
- // popup. Bind on a timeout to allow time for any toggle
184
- // click event to propagate. If no timeout, we'll bind this
185
- // event, then the toggle click will propagate which will call
186
- // this event and immediately close the popup.
187
- setTimeout($.proxy(function() {
188
- this.doBindWindowBodyClick();
189
- }, this), 100);
127
+ Romo.parentChildElems.add(this.elem, [this.popupElem]);
128
+ Romo.on(this.popupElem, 'romoParentChildElems:childRemoved', Romo.proxy(function(e, childElem) {
129
+ Romo.popupStack.closeThru(this.popupElem);
130
+ }, this));
131
+ Romo.on(this.popupElem, 'romoPopupStack:popupClosedByEsc', Romo.proxy(function(e, romoPopupStack) {
132
+ Romo.trigger(this.elem, 'romoModal:popupClosedByEsc', [this]);
133
+ }, this));
190
134
 
191
- // bind "esc" keystroke to toggle close
192
- this.doBindWindowBodyKeyUp();
135
+ }
193
136
 
194
- // bind window resizes reposition modal
195
- $(window).on('resize', $.proxy(this.onResizeWindow, this));
137
+ RomoModal.prototype._bindAjax = function() {
138
+ this.romoAjax = new RomoAjax(this.elem);
139
+ this.romoAjax.doUnbindElem(); // disable auto invoke on click
196
140
 
197
- this.elem.trigger('modal:popupOpen', [this]);
141
+ Romo.on(this.elem, 'romoAjax:callStart', Romo.proxy(function(e, romoAjax) {
142
+ this._loadBodyStart();
143
+ return false;
144
+ }, this));
145
+ Romo.on(this.elem, 'romoAjax:callSuccess', Romo.proxy(function(e, data, romoAjax) {
146
+ this._loadBodySuccess(data);
147
+ return false;
148
+ }, this));
149
+ Romo.on(this.elem, 'romoAjax:callError', Romo.proxy(function(e, xhr, romoAjax) {
150
+ this._loadBodyError(xhr);
151
+ return false;
152
+ }, this));
198
153
  }
199
154
 
200
- RomoModal.prototype.onPopupClose = function(e) {
201
- if (e !== undefined) {
202
- e.preventDefault();
203
- }
155
+ RomoModal.prototype._bindBody = function() {
156
+ this._resetBody();
204
157
 
205
- if (this.elem.hasClass('disabled') === false) {
206
- setTimeout($.proxy(function() {
207
- this.doPopupClose();
208
- }, this), 100);
158
+ var contentElems = Romo.find(this.bodyElem, '.romo-modal-content');
159
+ this.contentElem = contentElems[contentElems.length - 1];
160
+ if (this.contentElem === undefined) {
161
+ this.contentElem = this.bodyElem;
209
162
  }
210
- }
211
163
 
212
- RomoModal.prototype.doPopupClose = function() {
213
- $('body').trigger('modal:popupclose');
214
- this.popupElem.removeClass('romo-modal-open');
164
+ this.closeElems = Romo.find(this.popupElem, '[data-romo-modal-close="true"]');
165
+ Romo.on(this.closeElems, 'click', Romo.proxy(this._onPopupClose, this));
215
166
 
216
- // unbind any event to close the popup when clicking away from it
217
- this.doUnBindWindowBodyClick();
167
+ this.dragElems = Romo.find(this.popupElem, '[data-romo-modal-drag="true"]');
168
+ Romo.on(this.dragElems, 'mousedown', Romo.proxy(this._onMouseDown, this));
169
+ Romo.addClass(this.dragElems, 'romo-modal-grab');
218
170
 
219
- // unbind "esc" keystroke to toggle close
220
- this.doUnBindWindowBodyKeyUp();
171
+ var css = {
172
+ 'min-width': Romo.data(this.elem, 'romo-modal-min-width'),
173
+ 'max-width': Romo.data(this.elem, 'romo-modal-max-width'),
174
+ 'width': Romo.data(this.elem, 'romo-modal-width'),
175
+ 'min-height': Romo.data(this.elem, 'romo-modal-min-height'),
176
+ 'height': Romo.data(this.elem, 'romo-modal-height'),
177
+ 'overflow-x': 'auto',
178
+ 'overflow-y': 'auto'
179
+ }
221
180
 
222
- // unbind window resizes reposition modal
223
- $(window).off('resize', $.proxy(this.onResizeWindow, this));
181
+ if (Romo.data(this.elem, 'romo-modal-max-height') === undefined) {
182
+ Romo.setData(this.elem, 'romo-modal-max-height', 'detect');
183
+ }
184
+ if (Romo.data(this.elem, 'romo-modal-max-height') !== 'detect') {
185
+ css['max-height'] = Romo.data(this.elem, 'romo-modal-max-height');
186
+ }
224
187
 
225
- // clear the content elem markup if configured to
226
- if (this.elem.data('romo-modal-clear-content') === true) {
227
- this.contentElem.html('');
188
+ for (var key in css) {
189
+ Romo.setStyle(this.contentElem, key, css[key]);
228
190
  }
191
+ }
229
192
 
230
- this.elem.trigger('modal:popupClose', [this]);
193
+ RomoModal.prototype._resetBody = function() {
194
+ if (this.contentElem !== undefined) {
195
+ Romo.rmStyle(this.contentElem, 'min-width');
196
+ Romo.rmStyle(this.contentElem, 'max-width');
197
+ Romo.rmStyle(this.contentElem, 'width');
198
+ Romo.rmStyle(this.contentElem, 'min-height');
199
+ Romo.rmStyle(this.contentElem, 'max-height');
200
+ Romo.rmStyle(this.contentElem, 'height');
201
+ Romo.rmStyle(this.contentElem, 'overflow');
202
+ }
203
+
204
+ Romo.off(this.closeElems, 'click', Romo.proxy(this._onPopupClose, this));
231
205
  }
232
206
 
233
- RomoModal.prototype.onMouseDown = function(e) {
234
- e.preventDefault();
235
- e.stopPropagation();
236
- this.doDragStart(e);
237
- return false;
207
+ RomoModal.prototype._loadBodyStart = function() {
208
+ Romo.updateHtml(this.bodyElem, '');
209
+ this._bindBody();
210
+ this.doPlacePopupElem();
211
+ Romo.pushFn(Romo.proxy(this.doPlacePopupElem, this));
212
+ Romo.trigger(this.elem, 'romoModal:loadBodyStart', [this]);
238
213
  }
239
214
 
240
- RomoModal.prototype.doDragStart = function(e) {
241
- this.dragElem.addClass('romo-modal-grabbing');
242
- this.dragElem.removeClass('romo-modal-grab');
215
+ RomoModal.prototype._loadBodySuccess = function(data) {
216
+ Romo.initUpdateHtml(this.bodyElem, data);
217
+ this._bindBody();
218
+ this.doPlacePopupElem();
219
+ Romo.pushFn(Romo.proxy(this.doPlacePopupElem, this));
220
+ Romo.trigger(this.elem, 'romoModal:loadBodySuccess', [data, this]);
221
+ }
243
222
 
244
- this.popupElem.css('width', this.popupElem.width()+'px');
245
- this.popupElem.css('height', this.popupElem.height()+'px');
223
+ RomoModal.prototype._loadBodyError = function(xhr) {
224
+ Romo.trigger(this.elem, 'romoModal:loadBodyError', [xhr, this]);
225
+ }
246
226
 
247
- this._dragDiffX = e.clientX - this.popupElem[0].offsetLeft;
248
- this._dragDiffY = e.clientY - this.popupElem[0].offsetTop;
249
- $(window).on('mousemove', $.proxy(this.onMouseMove, this));
250
- $(window).on('mouseup', $.proxy(this.onMouseUp, this));
227
+ RomoModal.prototype._dragStart = function(e) {
228
+ Romo.addClass(this.dragElems, 'romo-modal-grabbing');
229
+ Romo.removeClass(this.dragElems, 'romo-modal-grab');
251
230
 
252
- this.elem.trigger("modal:dragStart", [this]);
253
- }
231
+ Romo.popupStack.closeTo(this.popupElem);
254
232
 
255
- RomoModal.prototype.onMouseMove = function(e) {
256
- $('body').trigger('modal:mousemove');
257
- e.preventDefault();
258
- e.stopPropagation();
259
- this.doDragMove(e.clientX, e.clientY);
260
- return false;
233
+ Romo.setStyle(this.popupElem, 'width', Romo.css(this.popupElem, 'width'));
234
+ Romo.setStyle(this.popupElem, 'height', Romo.css(this.popupElem, 'height'));
235
+
236
+ this._dragDiffX = e.clientX - this.popupElem.offsetLeft;
237
+ this._dragDiffY = e.clientY - this.popupElem.offsetTop;
238
+ Romo.on(window, 'mousemove', Romo.proxy(this._onMouseMove, this));
239
+ Romo.on(window, 'mouseup', Romo.proxy(this._onMouseUp, this));
240
+
241
+ Romo.trigger(this.elem, "romoModal:dragStart", [this]);
261
242
  }
262
243
 
263
- RomoModal.prototype.doDragMove = function(clientX, clientY) {
244
+ RomoModal.prototype._dragMove = function(clientX, clientY) {
264
245
  var placeX = clientX - this._dragDiffX;
265
246
  var placeY = clientY - this._dragDiffY;
266
- this.popupElem.css({ left: placeX+'px' , top: placeY+'px' });
247
+ Romo.setStyle(this.popupElem, 'left', placeX+'px');
248
+ Romo.setStyle(this.popupElem, 'top', placeY+'px');
267
249
 
268
- this.elem.trigger("modal:dragMove", [placeX, placeY, this]);
250
+ Romo.trigger(this.elem, "romoModal:dragMove", [placeX, placeY, this]);
269
251
  }
270
252
 
271
- RomoModal.prototype.onMouseUp = function(e) {
272
- e.preventDefault();
273
- e.stopPropagation();
274
- this.doDragStop(e);
275
- return false;
276
- }
253
+ RomoModal.prototype._dragStop = function(e) {
254
+ Romo.addClass(this.dragElems, 'romo-modal-grab');
255
+ Romo.removeClass(this.dragElems, 'romo-modal-grabbing');
277
256
 
278
- RomoModal.prototype.doDragStop = function(e) {
279
- this.dragElem.addClass('romo-modal-grab');
280
- this.dragElem.removeClass('romo-modal-grabbing');
281
- this.popupElem.css('width', '');
282
- this.popupElem.css('height', '');
257
+ Romo.rmStyle(this.popupElem, 'width');
258
+ Romo.rmStyle(this.popupElem, 'height');
283
259
 
284
- $(window).off('mousemove', $.proxy(this.onMouseMove, this));
285
- $(window).off('mouseup', $.proxy(this.onMouseUp, this));
260
+ Romo.off(window, 'mousemove', Romo.proxy(this._onMouseMove, this));
261
+ Romo.off(window, 'mouseup', Romo.proxy(this._onMouseUp, this));
286
262
  delete this._dragDiffX;
287
263
  delete this._dragDiffY;
288
264
 
289
- this.elem.trigger("modal:dragStop", [this]);
265
+ Romo.trigger(this.elem, "romoModal:dragStop", [this]);
290
266
  }
291
267
 
292
- RomoModal.prototype.doBindElemKeyUp = function() {
293
- this.elem.on('keyup', $.proxy(this.onElemKeyUp, this));
294
- this.popupElem.on('keyup', $.proxy(this.onElemKeyUp, this));
295
- }
268
+ // event functions
296
269
 
297
- RomoModal.prototype.doUnBindElemKeyUp = function() {
298
- this.elem.off('keyup', $.proxy(this.onElemKeyUp, this));
299
- this.popupElem.off('keyup', $.proxy(this.onElemKeyUp, this));
300
- }
270
+ RomoModal.prototype.romoEvFn._onToggle = function(e) {
271
+ e.preventDefault();
301
272
 
302
- RomoModal.prototype.onElemKeyUp = function(e) {
303
- if (this.elem.hasClass('disabled') === false) {
304
- if (this.popupElem.hasClass('romo-modal-open')) {
305
- if(e.keyCode === 27 /* Esc */ ) {
306
- this.doPopupClose();
307
- return false;
308
- } else {
309
- return true;
310
- }
311
- } else {
312
- return true;
313
- }
273
+ if (Romo.hasClass(this.elem, 'disabled') === false) {
274
+ this.doToggle();
314
275
  }
315
- return true;
316
- }
317
-
318
- RomoModal.prototype.doBindWindowBodyClick = function() {
319
- $('body').on('click', $.proxy(this.onWindowBodyClick, this));
320
276
  }
321
277
 
322
- RomoModal.prototype.doUnBindWindowBodyClick = function() {
323
- $('body').off('click', $.proxy(this.onWindowBodyClick, this));
278
+ RomoModal.prototype.romoEvFn._onPopupOpen = function(e) {
279
+ if (Romo.hasClass(this.elem, 'disabled') === false && this.popupClosed()) {
280
+ this.doPopupOpen();
281
+ }
324
282
  }
325
283
 
326
- RomoModal.prototype.onWindowBodyClick = function(e) {
327
- // if not clicked on the popup elem
328
- if (e !== undefined && $(e.target).parents('.romo-modal-popup').size() === 0) {
284
+ RomoModal.prototype.romoEvFn._onPopupClose = function(e) {
285
+ if (Romo.hasClass(this.elem, 'disabled') === false && this.popupOpen()) {
329
286
  this.doPopupClose();
330
287
  }
331
- return true;
332
- }
333
-
334
- RomoModal.prototype.doBindWindowBodyKeyUp = function() {
335
- $('body').on('keyup', $.proxy(this.onWindowBodyKeyUp, this));
336
288
  }
337
289
 
338
- RomoModal.prototype.doUnBindWindowBodyKeyUp = function() {
339
- $('body').off('keyup', $.proxy(this.onWindowBodyKeyUp, this));
290
+ RomoModal.prototype.romoEvFn._onMouseDown = function(e) {
291
+ this._dragStart(e);
292
+ return false;
340
293
  }
341
294
 
342
- RomoModal.prototype.onWindowBodyKeyUp = function(e) {
343
- if (e.keyCode === 27 /* Esc */) {
344
- this.doPopupClose();
345
- }
346
- return true;
295
+ RomoModal.prototype.romoEvFn._onMouseMove = function(e) {
296
+ Romo.trigger(Romo.f('body')[0], 'romoModal:mousemove');
297
+ this._dragMove(e.clientX, e.clientY);
298
+ return false;
347
299
  }
348
300
 
349
- RomoModal.prototype.onResizeWindow = function(e) {
350
- this.doPlacePopupElem();
351
- return true;
301
+ RomoModal.prototype.romoEvFn._onMouseUp = function(e) {
302
+ this._dragStop(e);
303
+ return false;
352
304
  }
353
305
 
354
- RomoModal.prototype.doPlacePopupElem = function() {
355
- var w = this.popupElem[0].offsetWidth;
356
- var h = this.popupElem[0].offsetHeight;
357
- var min = 75;
358
- var centerTop = $(window).height() / 2 - h / 2;
359
- var centerLeft = $(window).width() / 2 - w / 2;
360
- var css = {};
361
-
362
- css.top = $(window).height() * 0.15;
363
- if (centerTop < css.top) { css.top = centerTop; }
364
- if (css.top < min) { css.top = min; }
365
-
366
- css.left = centerLeft;
367
- if (css.left < min) { css.left = min; }
368
-
369
- this.popupElem.css(css);
370
-
371
- if (this.elem.data('romo-modal-max-height') === 'detect') {
372
- var pad = this.elem.data('romo-modal-max-height-detect-pad') || 10;
373
- var contentTop = this.contentElem[0].getBoundingClientRect().top;
374
- var contentBottom = this.contentElem[0].getBoundingClientRect().bottom;
375
- var bodyBottom = this.bodyElem[0].getBoundingClientRect().bottom;
376
- var padBottom = bodyBottom - contentBottom;
377
-
378
- var maxHeight = $(window).height() - contentTop - padBottom - pad;
379
- this.contentElem.css({'max-height': maxHeight.toString() + 'px'});
380
- }
381
- }
306
+ // init
382
307
 
383
- Romo.onInitUI(function(e) {
384
- Romo.initUIElems(e, '[data-romo-modal-auto="true"]').romoModal();
385
- });
308
+ Romo.popupStack.addStyleClass('romo-modal-popup');
309
+ Romo.addElemsInitSelector('[data-romo-modal-auto="true"]', RomoModal);