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.
- data/.gitignore +2 -0
- data/Gemfile +9 -1
- data/README.md +1 -1
- data/assets/css/romo/_mixins.scss +486 -0
- data/assets/css/romo/_vars.scss +159 -0
- data/assets/css/romo/base.scss +454 -0
- data/assets/css/romo/buttons.scss +211 -0
- data/assets/css/romo/datepicker.scss +73 -0
- data/assets/css/romo/dropdown.scss +33 -0
- data/assets/css/romo/forms.scss +193 -0
- data/assets/css/romo/grid.scss +271 -0
- data/assets/css/romo/grid_table.scss +129 -0
- data/assets/css/romo/labels.scss +41 -0
- data/assets/css/romo/lists.scss +37 -0
- data/assets/css/romo/modal.scss +32 -0
- data/assets/css/romo/normalize.scss +425 -0
- data/assets/css/romo/select.scss +89 -0
- data/assets/css/romo/sortable.scss +14 -0
- data/assets/css/romo/table.scss +99 -0
- data/assets/css/romo/tabs.scss +71 -0
- data/assets/css/romo/tooltip.scss +89 -0
- data/assets/css/romo/z_index.scss +26 -0
- data/assets/js/romo/base.js +177 -0
- data/assets/js/romo/datepicker.js +541 -0
- data/assets/js/romo/dropdown.js +309 -0
- data/assets/js/romo/dropdown_form.js +92 -0
- data/assets/js/romo/form.js +182 -0
- data/assets/js/romo/indicator.js +88 -0
- data/assets/js/romo/inline.js +77 -0
- data/assets/js/romo/inline_form.js +86 -0
- data/assets/js/romo/invoke.js +87 -0
- data/assets/js/romo/modal.js +311 -0
- data/assets/js/romo/modal_form.js +101 -0
- data/assets/js/romo/select.js +139 -0
- data/assets/js/romo/select_dropdown.js +325 -0
- data/assets/js/romo/sortable.js +201 -0
- data/assets/js/romo/tooltip.js +258 -0
- data/lib/romo/dassets.rb +64 -0
- data/lib/romo/version.rb +1 -1
- data/lib/romo.rb +9 -0
- data/romo.gemspec +4 -2
- data/test/support/.gitkeep +0 -0
- data/test/system/.gitkeep +0 -0
- data/test/unit/dassets_tests.rb +67 -0
- data/test/unit/romo_tests.rb +21 -0
- 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
|
+
|