romo 0.0.1 → 0.1.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.
Files changed (46) hide show
  1. data/.gitignore +2 -0
  2. data/Gemfile +9 -1
  3. data/README.md +1 -1
  4. data/assets/css/romo/_mixins.scss +486 -0
  5. data/assets/css/romo/_vars.scss +159 -0
  6. data/assets/css/romo/base.scss +454 -0
  7. data/assets/css/romo/buttons.scss +211 -0
  8. data/assets/css/romo/datepicker.scss +73 -0
  9. data/assets/css/romo/dropdown.scss +33 -0
  10. data/assets/css/romo/forms.scss +193 -0
  11. data/assets/css/romo/grid.scss +271 -0
  12. data/assets/css/romo/grid_table.scss +129 -0
  13. data/assets/css/romo/labels.scss +41 -0
  14. data/assets/css/romo/lists.scss +37 -0
  15. data/assets/css/romo/modal.scss +32 -0
  16. data/assets/css/romo/normalize.scss +425 -0
  17. data/assets/css/romo/select.scss +89 -0
  18. data/assets/css/romo/sortable.scss +14 -0
  19. data/assets/css/romo/table.scss +99 -0
  20. data/assets/css/romo/tabs.scss +71 -0
  21. data/assets/css/romo/tooltip.scss +89 -0
  22. data/assets/css/romo/z_index.scss +26 -0
  23. data/assets/js/romo/base.js +177 -0
  24. data/assets/js/romo/datepicker.js +541 -0
  25. data/assets/js/romo/dropdown.js +309 -0
  26. data/assets/js/romo/dropdown_form.js +92 -0
  27. data/assets/js/romo/form.js +182 -0
  28. data/assets/js/romo/indicator.js +88 -0
  29. data/assets/js/romo/inline.js +77 -0
  30. data/assets/js/romo/inline_form.js +86 -0
  31. data/assets/js/romo/invoke.js +87 -0
  32. data/assets/js/romo/modal.js +311 -0
  33. data/assets/js/romo/modal_form.js +101 -0
  34. data/assets/js/romo/select.js +139 -0
  35. data/assets/js/romo/select_dropdown.js +325 -0
  36. data/assets/js/romo/sortable.js +201 -0
  37. data/assets/js/romo/tooltip.js +258 -0
  38. data/lib/romo/dassets.rb +64 -0
  39. data/lib/romo/version.rb +1 -1
  40. data/lib/romo.rb +9 -0
  41. data/romo.gemspec +4 -2
  42. data/test/support/.gitkeep +0 -0
  43. data/test/system/.gitkeep +0 -0
  44. data/test/unit/dassets_tests.rb +67 -0
  45. data/test/unit/romo_tests.rb +21 -0
  46. metadata +53 -10
@@ -0,0 +1,77 @@
1
+ $.fn.romoInline = function() {
2
+ return $.map(this, function(element) {
3
+ return new RomoInline(element);
4
+ });
5
+ }
6
+
7
+ var RomoInline = function(element) {
8
+ this.elem = $(element);
9
+ this.toggleElem = $(this.elem.data('romo-inline-toggle'));
10
+
11
+ this.elem.on('invoke:invoke', $.proxy(function(e, invoke) {
12
+ this.doInvoke();
13
+ }, this));
14
+ this.elem.on('invoke:loadStart', $.proxy(function(e, invoke) {
15
+ this.doLoadStart();
16
+ }, this));
17
+ this.elem.on('invoke:loadSuccess', $.proxy(function(e, data, invoke) {
18
+ this.doLoadSuccess(data);
19
+ }, this));
20
+ this.elem.on('invoke:loadError', $.proxy(function(e, xhr, invoke) {
21
+ this.doLoadError(xhr);
22
+ }, this));
23
+
24
+ this.doBindDismiss();
25
+ this.doInit();
26
+ this.elem.trigger('inline:ready', [this]);
27
+ }
28
+
29
+ RomoInline.prototype.doInit = function() {
30
+ // override as needed
31
+ }
32
+
33
+ RomoInline.prototype.doInvoke = function() {
34
+ this.elem.show();
35
+ this.toggleElem.hide();
36
+ this.elem.trigger('inline:invoke', [this]);
37
+ }
38
+
39
+ RomoInline.prototype.doLoadStart = function() {
40
+ this.elem.html('');
41
+ this.elem.trigger('inline:loadStart', [this]);
42
+ }
43
+
44
+ RomoInline.prototype.doLoadSuccess = function(data) {
45
+ Romo.initHtml(this.elem, data);
46
+ this.doBindDismiss();
47
+ this.elem.trigger('inline:loadSuccess', [data, this]);
48
+ }
49
+
50
+ RomoInline.prototype.doLoadError = function(xhr) {
51
+ this.elem.trigger('inline:loadError', [xhr, this]);
52
+ }
53
+
54
+ RomoInline.prototype.doBindDismiss = function() {
55
+ var dismissElem = this.elem.find('[data-romo-inline-dismiss="true"]');
56
+ dismissElem.unbind('click');
57
+ dismissElem.on('click', $.proxy(this.onDismissClick, this));
58
+ }
59
+
60
+ RomoInline.prototype.onDismissClick = function(e) {
61
+ if (e !== undefined) {
62
+ e.preventDefault();
63
+ }
64
+
65
+ this.doDismiss();
66
+ }
67
+
68
+ RomoInline.prototype.doDismiss = function() {
69
+ this.toggleElem.show();
70
+ this.elem.hide();
71
+ this.elem.trigger('inline:dismiss', [this]);
72
+ }
73
+
74
+ Romo.onInitUI(function(e) {
75
+ Romo.initUIElems(e, '[data-romo-inline-auto="true"]').romoInline();
76
+ });
77
+
@@ -0,0 +1,86 @@
1
+ $.fn.romoInlineForm = function() {
2
+ return $.map(this, function(element) {
3
+ return new RomoInlineForm(element);
4
+ });
5
+ }
6
+
7
+ var RomoInlineForm = function(element) {
8
+ this.elem = $(element);
9
+
10
+ this.inline = this.elem.romoInline()[0];
11
+ this.doBindInline();
12
+
13
+ this.form = undefined;
14
+ this.elem.on('inlineForm:form:triggerSubmit', $.proxy(function(e) {
15
+ if (this.form != undefined) {
16
+ this.form.elem.trigger('form:triggerSubmit', []);
17
+ }
18
+ }, this));
19
+ this.doBindForm();
20
+ this.elem.on('inline:loadSuccess', $.proxy(function(e, data, inline) {
21
+ this.doBindForm();
22
+ }, this));
23
+
24
+ this.doInit();
25
+ this.elem.trigger('inlineForm:ready', [this]);
26
+ }
27
+
28
+ RomoInlineForm.prototype.doInit = function() {
29
+ // override as needed
30
+ }
31
+
32
+ RomoInlineForm.prototype.doBindInline = function() {
33
+ this.elem.on('inline:ready', $.proxy(function(e, inline) {
34
+ this.elem.trigger('inlineForm:inline:ready', [inline, this]);
35
+ }, this));
36
+ this.elem.on('inline:invoke', $.proxy(function(e, inline) {
37
+ this.elem.trigger('inlineForm:inline:invoke', [inline, this]);
38
+ }, this));
39
+ this.elem.on('inline:loadStart', $.proxy(function(e, inline) {
40
+ this.elem.trigger('inlineForm:inline:loadStart', [inline, this]);
41
+ }, this));
42
+ this.elem.on('inline:loadSuccess', $.proxy(function(e, data, inline) {
43
+ this.elem.trigger('inlineForm:inline:loadSuccess', [data, inline, this]);
44
+ }, this));
45
+ this.elem.on('inline:loadError', $.proxy(function(e, xhr, inline) {
46
+ this.elem.trigger('inlineForm:inline:loadError', [xhr, inline, this]);
47
+ }, this));
48
+ this.elem.on('inline:dismiss', $.proxy(function(e, inline) {
49
+ this.elem.trigger('inlineForm:inline:dismiss', [inline, this]);
50
+ }, this));
51
+ }
52
+
53
+ RomoInlineForm.prototype.doBindForm = function() {
54
+ var formElem = this.elem.find('[data-romo-form-auto="inlineForm"]');
55
+
56
+ formElem.on('form:clearMsgs', $.proxy(function(e, form) {
57
+ this.elem.trigger('inlineForm:form:clearMsgs', [form, this]);
58
+ }, this));
59
+ formElem.on('form:ready', $.proxy(function(e, form) {
60
+ this.elem.trigger('inlineForm:form:ready', [form, this]);
61
+ }, this));
62
+ formElem.on('form:beforeSubmit', $.proxy(function(e, form) {
63
+ this.elem.trigger('inlineForm:form:beforeSubmit', [form, this]);
64
+ }, this));
65
+ formElem.on('form:submitSuccess', $.proxy(function(e, data, form) {
66
+ this.elem.trigger('inlineForm:form:submitSuccess', [data, form, this]);
67
+ }, this));
68
+ formElem.on('form:submitInvalidMsgs', $.proxy(function(e, msgs, xhr, form) {
69
+ this.elem.trigger('inlineForm:form:submitInvalidMsgs', [msgs, xhr, form, this]);
70
+ }, this));
71
+ formElem.on('form:submitXhrError', $.proxy(function(e, xhr, form) {
72
+ this.elem.trigger('inlineForm:form:submitXhrError', [xhr, form, this]);
73
+ }, this));
74
+ formElem.on('form:submitError', $.proxy(function(e, xhr, form) {
75
+ this.elem.trigger('inlineForm:form:submitError', [xhr, form, this]);
76
+ }, this));
77
+
78
+ var submitElement = this.elem.find('[data-romo-form-submit="true"]')[0];
79
+ var indicatorElements = this.elem.find('[data-romo-indicator-auto="true"]');
80
+ this.form = formElem.romoForm(submitElement, indicatorElements)[0];
81
+ }
82
+
83
+ Romo.onInitUI(function(e) {
84
+ Romo.initUIElems(e, '[data-romo-inlineForm-auto="true"]').romoInlineForm();
85
+ });
86
+
@@ -0,0 +1,87 @@
1
+ $.fn.romoInvoke = function() {
2
+ return $.map(this, function(element) {
3
+ return new RomoInvoke(element);
4
+ });
5
+ }
6
+
7
+ var RomoInvoke = function(element) {
8
+ this.elem = $(element);
9
+ this.targetElem = $(this.elem.data('romo-invoke-target'));
10
+ this.invokeOn = this.elem.data('romo-invoke-on') || 'click';
11
+ this.invokeAttr = this.elem.data('romo-invoke-attr') || 'href';
12
+ this.loadOnlyOnce = this.elem.data('romo-invoke-load-once') === true;
13
+
14
+ this.elem.unbind(this.invokeOn);
15
+
16
+ this.doInit();
17
+ this.doBindInvoke();
18
+ this._trigger('invoke:ready', [this]);
19
+ }
20
+
21
+ RomoInvoke.prototype.doInit = function() {
22
+ // override as needed
23
+ }
24
+
25
+ RomoInvoke.prototype.doBindInvoke = function() {
26
+ this.doUnBindInvoke();
27
+ this.elem.on(this.invokeOn, $.proxy(this.onInvoke, this));
28
+ this.elem.on('invoke:triggerInvoke', $.proxy(this.onInvoke, this));
29
+ }
30
+
31
+ RomoInvoke.prototype.doUnBindInvoke = function() {
32
+ this.elem.off(this.invokeOn, $.proxy(this.onInvoke, this));
33
+ this.elem.off('invoke:triggerInvoke', $.proxy(this.onInvoke, this));
34
+ }
35
+
36
+ RomoInvoke.prototype.onInvoke = function(e) {
37
+ if (e !== undefined) {
38
+ e.preventDefault();
39
+ }
40
+
41
+ if (this.elem.hasClass('disabled') === false) {
42
+ this.doInvoke();
43
+ }
44
+ }
45
+
46
+ RomoInvoke.prototype.doInvoke = function() {
47
+ var loadHref = this.elem.attr(this.invokeAttr);
48
+ if (this.loadOnlyOnce === true) {
49
+ this.elem.removeAttr(this.invokeAttr);
50
+ }
51
+ if (loadHref !== undefined) {
52
+ this.doLoad(loadHref);
53
+ } else {
54
+ this._trigger('invoke:invoke', [this]);
55
+ }
56
+ }
57
+
58
+ RomoInvoke.prototype.doLoad = function(href) {
59
+ this._trigger('invoke:loadStart', [this]);
60
+
61
+ $.ajax({
62
+ url: href,
63
+ success: $.proxy(this.onLoadAjaxSuccess, this),
64
+ error: $.proxy(this.onLoadAjaxError, this)
65
+ });
66
+ }
67
+
68
+ RomoInvoke.prototype.onLoadAjaxSuccess = function(data, status, xhr) {
69
+ this._trigger('invoke:invoke', [this]);
70
+ this._trigger('invoke:loadSuccess', [data, this]);
71
+ }
72
+
73
+ RomoInvoke.prototype.onLoadAjaxError = function(xhr, errorType, error) {
74
+ this._trigger('invoke:invoke', [this]);
75
+ this._trigger('invoke:loadError', [xhr, this]);
76
+ }
77
+
78
+ RomoInvoke.prototype._trigger = function(event_name, event_data) {
79
+ this.elem.trigger(event_name, event_data);
80
+ if (this.targetElem !== undefined) {
81
+ this.targetElem.trigger(event_name, event_data);
82
+ }
83
+ }
84
+
85
+ Romo.onInitUI(function(e) {
86
+ Romo.initUIElems(e, '[data-romo-invoke-auto="true"]').romoInvoke();
87
+ });
@@ -0,0 +1,311 @@
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.popupElem = $('<div class="romo-modal-popup"><div class="romo-modal-body"></div></div>');
10
+ this.popupElem.appendTo('body');
11
+ this.bodyElem = this.popupElem.find('> .romo-modal-body');
12
+ this.contentElem = $();
13
+ this.closeElem = $();
14
+ this.dragElem = $();
15
+ this.romoInvoke = this.elem.romoInvoke()[0];
16
+
17
+ if (this.elem.data('romo-modal-style-class') !== undefined) {
18
+ this.bodyElem.addClass(this.elem.data('romo-modal-style-class'));
19
+ }
20
+
21
+ this.elem.unbind('click');
22
+ this.elem.on('click', $.proxy(this.onToggleClick, this));
23
+ this.elem.on('modal:triggerToggle', $.proxy(this.onToggleClick, this));
24
+ this.elem.on('modal:triggerPopupOpen', $.proxy(this.onPopupOpen, this));
25
+ this.elem.on('modal:triggerPopupClose', $.proxy(this.onPopupClose, this));
26
+ this.elem.on('invoke:loadStart', $.proxy(function(e, invoke) {
27
+ this.doLoadBodyStart();
28
+ }, this));
29
+ this.elem.on('invoke:loadSuccess', $.proxy(function(e, data, invoke) {
30
+ this.doLoadBodySuccess(data);
31
+ }, this));
32
+ this.elem.on('invoke:loadError', $.proxy(function(e, xhr, invoke) {
33
+ this.doLoadBodyError(xhr);
34
+ }, this));
35
+
36
+ this.doInit();
37
+ this.doInitBody();
38
+
39
+ this.elem.trigger('modal:ready', [this]);
40
+ }
41
+
42
+ RomoModal.prototype.doInit = function() {
43
+ // override as needed
44
+ }
45
+
46
+ RomoModal.prototype.doInitBody = function() {
47
+ this.doResetBody();
48
+
49
+ this.contentElem = this.bodyElem.find('.romo-modal-content').last();
50
+ if (this.contentElem.size() === 0) {
51
+ this.contentElem = this.bodyElem;
52
+ }
53
+ this.closeElem = this.popupElem.find('[data-romo-modal-close="true"]');
54
+ this.dragElem = this.popupElem.find('[data-romo-modal-drag="true"]');
55
+
56
+ var css = {
57
+ 'min-width': this.elem.data('romo-modal-min-width'),
58
+ 'max-width': this.elem.data('romo-modal-max-width'),
59
+ 'width': this.elem.data('romo-modal-width'),
60
+ 'min-height': this.elem.data('romo-modal-min-height'),
61
+ 'height': this.elem.data('romo-modal-height'),
62
+ 'overflow-x': 'auto',
63
+ 'overflow-y': 'auto'
64
+ }
65
+
66
+ if (this.elem.data('romo-modal-max-height') === undefined) {
67
+ this.elem.attr('data-romo-modal-max-height', 'detect');
68
+ }
69
+ if (this.elem.data('romo-modal-max-height') !== 'detect') {
70
+ css['max-height'] = this.elem.data('romo-modal-max-height');
71
+ }
72
+
73
+ this.contentElem.css(css);
74
+
75
+ this.closeElem.unbind('click');
76
+ this.closeElem.on('click', $.proxy(this.onPopupClose, this));
77
+
78
+ this.dragElem.addClass('romo-modal-grab');
79
+ this.dragElem.on('mousedown', $.proxy(this.onMouseDown, this));
80
+ }
81
+
82
+ RomoModal.prototype.doResetBody = function() {
83
+ this.contentElem.css({
84
+ 'min-width': '',
85
+ 'max-width': '',
86
+ 'width': '',
87
+ 'min-height': '',
88
+ 'max-height': '',
89
+ 'height': '',
90
+ 'overflow': ''
91
+ });
92
+
93
+ this.closeElem.off('click', $.proxy(this.onPopupClose, this));
94
+ }
95
+
96
+ RomoModal.prototype.doLoadBodyStart = function() {
97
+ this.bodyElem.html('');
98
+ this.doInitBody();
99
+ this.doPlacePopupElem();
100
+ this.elem.trigger('modal:loadBodyStart', [this]);
101
+ }
102
+
103
+ RomoModal.prototype.doLoadBodySuccess = function(data) {
104
+ Romo.initHtml(this.bodyElem, data);
105
+ this.doInitBody();
106
+ this.doPlacePopupElem();
107
+ this.elem.trigger('modal:loadBodySuccess', [data, this]);
108
+ }
109
+
110
+ RomoModal.prototype.doLoadBodyError = function(xhr) {
111
+ this.elem.trigger('modal:loadBodyError', [xhr, this]);
112
+ }
113
+
114
+ RomoModal.prototype.onToggleClick = function(e) {
115
+ if (e !== undefined) {
116
+ e.preventDefault();
117
+ }
118
+
119
+ if (this.elem.hasClass('disabled') === false) {
120
+ this.doToggle();
121
+ }
122
+ }
123
+
124
+ RomoModal.prototype.doToggle = function() {
125
+ if (this.popupElem.hasClass('romo-modal-open')) {
126
+ setTimeout($.proxy(function() {
127
+ this.doPopupClose();
128
+ }, this), 100);
129
+ } else {
130
+ setTimeout($.proxy(function() {
131
+ this.doPopupOpen();
132
+ }, this), 100);
133
+ }
134
+ this.elem.trigger('modal:toggle', [this]);
135
+ }
136
+
137
+ RomoModal.prototype.onPopupOpen = function(e) {
138
+ if (e !== undefined) {
139
+ e.preventDefault();
140
+ }
141
+
142
+ if ((this.elem.hasClass('disabled') === false) &&
143
+ (this.popupElem.hasClass('romo-modal-open') === false)) {
144
+ setTimeout($.proxy(function() {
145
+ this.doPopupOpen();
146
+ }, this), 100);
147
+ }
148
+ }
149
+
150
+ RomoModal.prototype.doPopupOpen = function() {
151
+ this.romoInvoke.doInvoke();
152
+ this.popupElem.addClass('romo-modal-open');
153
+ this.doPlacePopupElem();
154
+
155
+ // bind an event to close the popup when clicking away from the
156
+ // popup. Bind on a timeout to allow time for any toggle
157
+ // click event to propagate. If no timeout, we'll bind this
158
+ // event, then the toggle click will propagate which will call
159
+ // this event and immediately close the popup.
160
+ setTimeout($.proxy(function() {
161
+ $('body').on('click', $.proxy(this.onWindowBodyClick, this));
162
+ }, this), 100);
163
+
164
+ // bind "esc" keystroke to toggle close
165
+ $('body').on('keyup', $.proxy(this.onWindowBodyKeyUp, this));
166
+
167
+ // bind window resizes reposition modal
168
+ $(window).on('resize', $.proxy(this.onResizeWindow, this));
169
+
170
+ this.elem.trigger('modal:popupOpen', [this]);
171
+ }
172
+
173
+ RomoModal.prototype.onPopupClose = function(e) {
174
+ if (e !== undefined) {
175
+ e.preventDefault();
176
+ }
177
+
178
+ if (this.elem.hasClass('disabled') === false) {
179
+ setTimeout($.proxy(function() {
180
+ this.doPopupClose();
181
+ }, this), 100);
182
+ }
183
+ }
184
+
185
+ RomoModal.prototype.doPopupClose = function() {
186
+ $('body').trigger('modal:popupclose');
187
+ this.popupElem.removeClass('romo-modal-open');
188
+
189
+ // unbind any event to close the popup when clicking away from it
190
+ $('body').off('click', $.proxy(this.onWindowBodyClick, this));
191
+
192
+ // unbind "esc" keystroke to toggle close
193
+ $('body').off('keyup', $.proxy(this.onWindowBodyKeyUp, this));
194
+
195
+ // unbind window resizes reposition modal
196
+ $(window).off('resize', $.proxy(this.onResizeWindow, this));
197
+
198
+ this.elem.trigger('modal:popupClose', [this]);
199
+ }
200
+
201
+ RomoModal.prototype.onMouseDown = function(e) {
202
+ $('body').trigger('modal:mousedown');
203
+ e.preventDefault();
204
+ e.stopPropagation();
205
+ this.doDragStart(e);
206
+ return false;
207
+ }
208
+
209
+ RomoModal.prototype.doDragStart = function(e) {
210
+ this.dragElem.addClass('romo-modal-grabbing');
211
+ this.dragElem.removeClass('romo-modal-grab');
212
+
213
+ this.popupElem.css('width', this.popupElem.width()+'px');
214
+ this.popupElem.css('height', this.popupElem.height()+'px');
215
+
216
+ this._dragDiffX = e.clientX - this.popupElem[0].offsetLeft;
217
+ this._dragDiffY = e.clientY - this.popupElem[0].offsetTop;
218
+ $(window).on('mousemove', $.proxy(this.onMouseMove, this));
219
+ $(window).on('mouseup', $.proxy(this.onMouseUp, this));
220
+
221
+ this.elem.trigger("modal:dragStart", [this]);
222
+ }
223
+
224
+ RomoModal.prototype.onMouseMove = function(e) {
225
+ e.preventDefault();
226
+ e.stopPropagation();
227
+ this.doDragMove(e.clientX, e.clientY);
228
+ return false;
229
+ }
230
+
231
+ RomoModal.prototype.doDragMove = function(clientX, clientY) {
232
+ var placeX = clientX - this._dragDiffX;
233
+ var placeY = clientY - this._dragDiffY;
234
+ this.popupElem.css({ left: placeX+'px' , top: placeY+'px' });
235
+
236
+ this.elem.trigger("modal:dragMove", [placeX, placeY, this]);
237
+ }
238
+
239
+ RomoModal.prototype.onMouseUp = function(e) {
240
+ e.preventDefault();
241
+ e.stopPropagation();
242
+ this.doDragStop(e);
243
+ return false;
244
+ }
245
+
246
+ RomoModal.prototype.doDragStop = function(e) {
247
+ this.dragElem.addClass('romo-modal-grab');
248
+ this.dragElem.removeClass('romo-modal-grabbing');
249
+ this.popupElem.css('width', '');
250
+ this.popupElem.css('height', '');
251
+
252
+ $(window).off('mousemove', $.proxy(this.onMouseMove, this));
253
+ $(window).off('mouseup', $.proxy(this.onMouseUp, this));
254
+ delete this._dragDiffX;
255
+ delete this._dragDiffY;
256
+
257
+ this.elem.trigger("modal:dragStop", [this]);
258
+ }
259
+
260
+ RomoModal.prototype.onWindowBodyClick = function(e) {
261
+ // if not clicked on the popup elem
262
+ if (e !== undefined && $(e.target).parents('.romo-modal-popup').size() === 0) {
263
+ this.doPopupClose();
264
+ }
265
+ return true;
266
+ }
267
+
268
+ RomoModal.prototype.onWindowBodyKeyUp = function(e) {
269
+ if (e.keyCode === 27 /* Esc */) {
270
+ this.doPopupClose();
271
+ }
272
+ return true;
273
+ }
274
+
275
+ RomoModal.prototype.onResizeWindow = function(e) {
276
+ this.doPlacePopupElem();
277
+ return true;
278
+ }
279
+
280
+ RomoModal.prototype.doPlacePopupElem = function() {
281
+ var w = this.popupElem[0].offsetWidth;
282
+ var h = this.popupElem[0].offsetHeight;
283
+ var min = 75;
284
+ var centerTop = $(window).height() / 2 - h / 2;
285
+ var centerLeft = $(window).width() / 2 - w / 2;
286
+ var css = {};
287
+
288
+ css.top = $(window).height() * 0.15;
289
+ if (centerTop < css.top) { css.top = centerTop; }
290
+ if (css.top < min) { css.top = min; }
291
+
292
+ css.left = centerLeft;
293
+ if (css.left < min) { css.left = min; }
294
+
295
+ this.popupElem.css(css);
296
+
297
+ if (this.elem.data('romo-modal-max-height') === 'detect') {
298
+ var pad = this.elem.data('romo-modal-max-height-detect-pad') || 10;
299
+ var contentTop = this.contentElem[0].getBoundingClientRect().top;
300
+ var contentBottom = this.contentElem[0].getBoundingClientRect().bottom;
301
+ var bodyBottom = this.bodyElem[0].getBoundingClientRect().bottom;
302
+ var padBottom = bodyBottom - contentBottom;
303
+
304
+ var maxHeight = $(window).height() - contentTop - padBottom - pad;
305
+ this.contentElem.css({'max-height': maxHeight.toString() + 'px'});
306
+ }
307
+ }
308
+
309
+ Romo.onInitUI(function(e) {
310
+ Romo.initUIElems(e, '[data-romo-modal-auto="true"]').romoModal();
311
+ });
@@ -0,0 +1,101 @@
1
+ $.fn.romoModalForm = function() {
2
+ return $.map(this, function(element) {
3
+ return new RomoModalForm(element);
4
+ });
5
+ }
6
+
7
+ var RomoModalForm = function(element) {
8
+ this.elem = $(element);
9
+
10
+ this.modal = this.elem.romoModal()[0];
11
+ this.doBindModal();
12
+
13
+ this.form = undefined;
14
+ this.elem.on('modalForm:form:triggerSubmit', $.proxy(function(e) {
15
+ if (this.form != undefined) {
16
+ this.form.elem.trigger('form:triggerSubmit', []);
17
+ }
18
+ }, this));
19
+ this.doBindForm();
20
+ this.elem.on('modal:loadBodySuccess', $.proxy(function(e, data, modal) {
21
+ this.doBindForm();
22
+ }, this));
23
+
24
+ this.doInit();
25
+ this.elem.trigger('modalForm:ready', [this]);
26
+ }
27
+
28
+ RomoModalForm.prototype.doInit = function() {
29
+ // override as needed
30
+ }
31
+
32
+ RomoModalForm.prototype.doBindModal = function() {
33
+ this.elem.on('modal:ready', $.proxy(function(e, modal) {
34
+ this.elem.trigger('modalForm:modal:ready', [modal, this]);
35
+ }, this));
36
+ this.elem.on('modal:toggle', $.proxy(function(e, modal) {
37
+ this.elem.trigger('modalForm:modal:toggle', [modal, this]);
38
+ }, this));
39
+ this.elem.on('modal:popupOpen', $.proxy(function(e, modal) {
40
+ this.elem.trigger('modalForm:modal:popupOpen', [modal, this]);
41
+ }, this));
42
+ this.elem.on('modal:popupClose', $.proxy(function(e, modal) {
43
+ this.elem.trigger('modalForm:modal:popupClose', [modal, this]);
44
+ }, this));
45
+ this.elem.on('modal:dragStart', $.proxy(function(e, modal) {
46
+ this.elem.trigger('modalForm:modal:dragStart', [modal, this]);
47
+ }, this));
48
+ this.elem.on('modal:dragMove', $.proxy(function(e, placeX, placeY, modal) {
49
+ this.elem.trigger('modalForm:modal:dragMove', [placeX, placeY, modal, this]);
50
+ }, this));
51
+ this.elem.on('modal:dragStop', $.proxy(function(e, modal) {
52
+ this.elem.trigger('modalForm:modal:dragStop', [modal, this]);
53
+ }, this));
54
+ this.elem.on('modal:loadBodyStart', $.proxy(function(e, modal) {
55
+ this.elem.trigger('modalForm:modal:loadBodyStart', [modal, this]);
56
+ }, this));
57
+ this.elem.on('modal:loadBodySuccess', $.proxy(function(e, data, modal) {
58
+ this.elem.trigger('modalForm:modal:loadBodySuccess', [data, modal, this]);
59
+ }, this));
60
+ this.elem.on('modal:loadBodyError', $.proxy(function(e, xhr, modal) {
61
+ this.elem.trigger('modalForm:modal:loadBodyError', [xhr, modal, this]);
62
+ }, this));
63
+ this.elem.on('modal:dismiss', $.proxy(function(e, modal) {
64
+ this.elem.trigger('modalForm:modal:dismiss', [modal, this]);
65
+ }, this));
66
+ }
67
+
68
+ RomoModalForm.prototype.doBindForm = function() {
69
+ var formElem = this.modal.popupElem.find('[data-romo-form-auto="modalForm"]');
70
+
71
+ formElem.on('form:clearMsgs', $.proxy(function(e, form) {
72
+ this.elem.trigger('modalForm:form:clearMsgs', [form, this]);
73
+ }, this));
74
+ formElem.on('form:ready', $.proxy(function(e, form) {
75
+ this.elem.trigger('modalForm:form:ready', [form, this]);
76
+ }, this));
77
+ formElem.on('form:beforeSubmit', $.proxy(function(e, form) {
78
+ this.elem.trigger('modalForm:form:beforeSubmit', [form, this]);
79
+ }, this));
80
+ formElem.on('form:submitSuccess', $.proxy(function(e, data, form) {
81
+ this.elem.trigger('modalForm:form:submitSuccess', [data, form, this]);
82
+ }, this));
83
+ formElem.on('form:submitInvalidMsgs', $.proxy(function(e, msgs, xhr, form) {
84
+ this.elem.trigger('modalForm:form:submitInvalidMsgs', [msgs, xhr, form, this]);
85
+ }, this));
86
+ formElem.on('form:submitXhrError', $.proxy(function(e, xhr, form) {
87
+ this.elem.trigger('modalForm:form:submitXhrError', [xhr, form, this]);
88
+ }, this));
89
+ formElem.on('form:submitError', $.proxy(function(e, xhr, form) {
90
+ this.elem.trigger('modalForm:form:submitError', [xhr, form, this]);
91
+ }, this));
92
+
93
+ var submitElement = this.modal.popupElem.find('[data-romo-form-submit="true"]')[0];
94
+ var indicatorElements = this.modal.popupElem.find('[data-romo-indicator-auto="true"]');
95
+ this.form = formElem.romoForm(submitElement, indicatorElements)[0];
96
+ }
97
+
98
+ Romo.onInitUI(function(e) {
99
+ Romo.initUIElems(e, '[data-romo-modalForm-auto="true"]').romoModalForm();
100
+ });
101
+