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,343 +1,268 @@
1
- $.fn.romoTooltip = function() {
2
- return $.map(this, function(element) {
3
- return new RomoTooltip(element);
4
- });
5
- }
1
+ var RomoTooltip = RomoComponent(function(elem) {
2
+ this.elem = elem;
6
3
 
7
- var RomoTooltip = function(element) {
8
- this.elem = $(element);
9
- this.doInitPopup();
4
+ this.doInit();
5
+ this._bindElem();
10
6
 
11
- this.hoverState = 'out';
12
- this.delayEnter = 0;
13
- this.delayLeave = 0;
14
- if (this.elem.data('romo-tooltip-delay') !== undefined && this.elem.data('romo-tooltip-delay') !== '') {
15
- this.delayEnter = this.elem.data('romo-tooltip-delay');
16
- this.delayLeave = this.elem.data('romo-tooltip-delay');
17
- }
18
- if (this.elem.data('romo-tooltip-delay-enter') !== undefined && this.elem.data('romo-tooltip-delay-enter') !== '') {
19
- this.delayEnter = this.elem.data('romo-tooltip-delay-enter');
20
- }
21
- if (this.elem.data('romo-tooltip-delay-leave') !== undefined && this.elem.data('romo-tooltip-delay-leave') !== '') {
22
- this.delayLeave = this.elem.data('romo-tooltip-delay-leave');
23
- }
7
+ Romo.trigger(this.elem, 'romoTooltip:ready', [this]);
8
+ });
24
9
 
25
- if (this.elem.data('romo-tooltip-style-class') !== undefined) {
26
- this.bodyElem.addClass(this.elem.data('romo-tooltip-style-class'));
27
- }
10
+ RomoTooltip.prototype.popupOpen = function() {
11
+ return Romo.hasClass(this.popupElem, 'romo-tooltip-open') === true;
12
+ }
28
13
 
29
- this.elem.on('mouseenter', $.proxy(this.onToggleEnter, this));
30
- this.elem.on('mouseleave', $.proxy(this.onToggleLeave, this));
31
- this.elem.on('tooltip:triggerPopupOpen', $.proxy(this.onPopupOpen, this));
32
- this.elem.on('tooltip:triggerPopupClose', $.proxy(this.onPopupClose, this));
33
- this.elem.on('tooltip:triggerSetContent', $.proxy(this.onSetContent, this));
34
- $(window).on('resize', $.proxy(this.onResizeWindow, this))
14
+ RomoTooltip.prototype.popupClosed = function() {
15
+ return Romo.hasClass(this.popupElem, 'romo-tooltip-open') === false;
16
+ }
35
17
 
36
- this.doInit();
37
- this.doInitBody();
38
- if (this.elem.data('romo-tooltip-content') === undefined) {
39
- this.doBindAjax();
18
+ RomoTooltip.prototype.doPopupOpen = function() {
19
+ var scrollParentElems = Romo.scrollableParents(this.elem).concat([window]);
20
+ Romo.on(scrollParentElems, 'scroll', Romo.proxy(this._onScrollableParentsScroll, this));
21
+
22
+ if (this.romoAjax !== undefined) {
23
+ this.romoAjax.doInvoke();
24
+ } else {
25
+ this._setBodyHtml(Romo.data(this.elem, 'romo-tooltip-content'));
40
26
  }
27
+ Romo.addClass(this.popupElem, 'romo-tooltip-open');
28
+ this.doPlacePopupElem();
41
29
 
42
- this.elem.trigger('tooltip:ready', [this]);
43
- }
30
+ var bodyElem = Romo.f('body')[0];
31
+ Romo.on(bodyElem, 'romoModal:mousemove', Romo.proxy(this._onModalPopupChange, this));
32
+ Romo.on(bodyElem, 'romoPopupStack:popupClose', Romo.proxy(this._onModalPopupChange, this));
33
+ Romo.on(window, 'resize', Romo.proxy(this._onResizeWindow, this));
44
34
 
45
- RomoTooltip.prototype.doInit = function() {
46
- // override as needed
35
+ Romo.trigger(this.elem, 'romoTooltip:popupOpen', [this]);
47
36
  }
48
37
 
49
- RomoTooltip.prototype.doInitPopup = function() {
50
- this.popupElem = $('<div class="romo-tooltip-popup"><div class="romo-tooltip-arrow"></div><div class="romo-tooltip-body"></div></div>');
51
- this.popupElem.appendTo(this.elem.closest(this.elem.data('romo-tooltip-append-to-closest') || 'body'));
38
+ RomoTooltip.prototype.doPopupClose = function() {
39
+ Romo.removeClass(this.popupElem, 'romo-tooltip-open');
52
40
 
53
- this.bodyElem = this.popupElem.find('> .romo-tooltip-body');
41
+ var scrollParentElems = Romo.scrollableParents(this.elem).concat([window]);
42
+ Romo.off(scrollParentElems, 'scroll', Romo.proxy(this._onScrollableParentsScroll, this));
54
43
 
55
- this.popupPosition = this.elem.data('romo-tooltip-position') || 'top';
56
- this.popupElem.attr('data-romo-tooltip-position', this.popupPosition);
44
+ var bodyElem = Romo.f('body')[0];
45
+ Romo.off(bodyElem, 'romoModal:mousemove', Romo.proxy(this._onModalPopupChange, this));
46
+ Romo.off(bodyElem, 'romoPopupStack:popupClose', Romo.proxy(this._onModalPopupChange, this));
47
+ Romo.off(window, 'resize', Romo.proxy(this._onResizeWindow, this));
57
48
 
58
- this.popupAlignment = this.elem.data('romo-tooltip-alignment') || 'center';
59
- this.popupElem.attr('data-romo-tooltip-alignment', this.popupAlignment);
49
+ Romo.trigger(this.elem, 'romoTooltip:popupClose', [this]);
50
+ }
60
51
 
61
- this.doSetPopupZIndex(this.elem);
52
+ RomoTooltip.prototype.doPlacePopupElem = function() {
53
+ var configHeight = Romo.data(this.elem, 'romo-tooltip-height') ||
54
+ Romo.data(this.elem, 'romo-tooltip-max-height');
55
+ var configPosition = this.popupPosition;
62
56
 
63
- // don't propagate click events on the popup elem. this prevents the popup
64
- // from closing when clicked (see body click event bind on popup open)
65
- this.popupElem.on('click', function(e) {
66
- if (e !== undefined) {
67
- e.stopPropagation();
57
+ if (configHeight === 'detect' && (configPosition === 'top' || configPosition === 'bottom')) {
58
+ var popupHeight = this.popupElem.offsetHeight;
59
+ var topAvailHeight = this._getPopupMaxAvailableHeight('top');
60
+ var bottomAvailHeight = this._getPopupMaxAvailableHeight('bottom');
61
+
62
+ if (popupHeight < topAvailHeight && popupHeight < bottomAvailHeight) {
63
+ // if it fits both ways, use the config position way
64
+ configHeight = this._getPopupMaxAvailableHeight(configPosition);
65
+ } else if (topAvailHeight > bottomAvailHeight) {
66
+ configPosition = 'top';
67
+ configHeight = topAvailHeight;
68
+ } else {
69
+ configPosition = 'bottom';
70
+ configHeight = bottomAvailHeight;
68
71
  }
69
- })
70
72
 
71
- // the popup should be treated like a child elem. add it to Romo's
72
- // parent-child elems so it will be removed when the elem is removed.
73
- // delay adding it b/c other components may `append` generated tooltips
74
- // meaning the tooltip is removed and then re-added. if added immediately
75
- // the "remove" part will incorrectly remove the popup.
76
- setTimeout($.proxy(function() {
77
- Romo.parentChildElems.add(this.elem, [this.popupElem]);
78
- }, this), 1);
79
- }
73
+ Romo.setStyle(this.bodyElem, 'max-height', configHeight.toString() + 'px');
74
+ }
80
75
 
81
- RomoTooltip.prototype.doInitBody = function() {
82
- this.doResetBody();
76
+ var elemRect = this.elem.getBoundingClientRect();
77
+ var elemOffset = Romo.offset(this.elem);
83
78
 
84
- this.bodyElem.css({
85
- 'min-width': this.elem.data('romo-tooltip-min-width'),
86
- 'max-width': this.elem.data('romo-tooltip-max-width'),
87
- 'width': this.elem.data('romo-tooltip-width'),
88
- 'min-height': this.elem.data('romo-tooltip-min-height'),
89
- 'height': this.elem.data('romo-tooltip-height')
90
- });
79
+ var elemHeight = elemRect.height;
80
+ var elemWidth = elemRect.width;
81
+ var elemTop = elemOffset.top;
82
+ var elemLeft = elemOffset.left
91
83
 
92
- if (this.elem.data('romo-tooltip-max-height') === undefined) {
93
- this.elem.attr('data-romo-tooltip-max-height', 'detect');
94
- }
95
- if (this.elem.data('romo-tooltip-max-height') !== 'detect') {
96
- this.bodyElem.css({
97
- 'max-height': this.elem.data('romo-tooltip-max-height')
98
- });
99
- }
100
- }
84
+ var popupOffsetHeight = this.popupElem.offsetHeight;
85
+ var popupOffsetWidth = this.popupElem.offsetWidth;
101
86
 
102
- RomoTooltip.prototype.doResetBody = function() {
103
- this.bodyElem.css({
104
- 'min-width': '',
105
- 'max-width': '',
106
- 'width': '',
107
- 'min-height': '',
108
- 'max-height': '',
109
- 'height': '',
110
- });
111
- }
87
+ var pad = 6 + 1; // arrow size + spacing
112
88
 
113
- RomoTooltip.prototype.doBindAjax = function() {
114
- this.romoAjax = this.elem.romoAjax()[0];
115
- this.romoAjax.doUnbindElem(); // disable auto invoke on click
89
+ Romo.setData(this.popupElem, 'romo-tooltip-arrow-position', configPosition);
116
90
 
117
- this.elem.on('romoAjax:callStart', $.proxy(function(e, romoAjax) {
118
- this.doLoadBodyStart();
119
- return false;
120
- }, this));
121
- this.elem.on('romoAjax:callSuccess', $.proxy(function(e, data, romoAjax) {
122
- this.doLoadBodySuccess(data);
123
- return false;
124
- }, this));
125
- this.elem.on('romoAjax:callError', $.proxy(function(e, xhr, romoAjax) {
126
- this.doLoadBodyError(xhr);
127
- return false;
128
- }, this));
129
- }
91
+ var posTop = undefined;
92
+ var posLeft = undefined;
93
+ switch (configPosition) {
94
+ case 'top':
95
+ posTop = elemTop - popupOffsetHeight - pad;
96
+ posLeft = elemLeft + (elemWidth / 2) - (popupOffsetWidth / 2);
97
+ break;
98
+ case 'bottom':
99
+ posTop = elemTop + elemHeight + pad;
100
+ posLeft = elemLeft + (elemWidth / 2) - (popupOffsetWidth / 2);
101
+ break;
102
+ case 'left':
103
+ posTop = elemTop + (elemHeight / 2) - (popupOffsetHeight / 2);
104
+ posLeft = elemLeft - popupOffsetWidth - pad;
105
+ break;
106
+ case 'right':
107
+ posTop = elemTop + (elemHeight / 2) - (popupOffsetHeight / 2);
108
+ posLeft = elemLeft + elemWidth + pad;
109
+ break;
110
+ }
130
111
 
131
- RomoTooltip.prototype.doLoadBodyStart = function() {
132
- this._setBodyHtml('');
133
- this.doInitBody();
134
- this.doPlacePopupElem();
135
- this.elem.trigger('tooltip:loadBodyStart', [this]);
112
+ Romo.setStyle(this.popupElem, 'top', posTop + 'px');
113
+ Romo.setStyle(this.popupElem, 'left', posLeft + 'px');
136
114
  }
137
115
 
138
- RomoTooltip.prototype.doLoadBodySuccess = function(data) {
139
- Romo.initHtml(this.bodyElem, data);
140
- this.doInitBody();
116
+ RomoTooltip.prototype.doSetContent = function(value) {
117
+ Romo.setData(this.elem, 'romo-tooltip-content', value);
118
+ this._setBodyHtml(Romo.data(this.elem, 'romo-tooltip-content'));
141
119
  this.doPlacePopupElem();
142
- this.elem.trigger('tooltip:loadBodySuccess', [data, this]);
120
+ Romo.pushFn(Romo.proxy(this.doPlacePopupElem, this));
143
121
  }
144
122
 
145
- RomoTooltip.prototype.doLoadBodyError = function(xhr) {
146
- this.elem.trigger('tooltip:loadBodyError', [xhr, this]);
123
+ RomoTooltip.prototype.doSetPopupZIndex = function(relativeElem) {
124
+ var relativeZIndex = Romo.parseZIndex(relativeElem);
125
+ Romo.setStyle(this.popupElem, 'z-index', relativeZIndex + 1100); // see z-index.css
147
126
  }
148
127
 
149
- RomoTooltip.prototype.onToggleEnter = function(e) {
150
- if (e !== undefined) {
151
- e.preventDefault();
152
- }
153
-
154
- this.hoverState = 'in';
155
- if (this.elem.hasClass('disabled') === false) {
156
- clearTimeout(this.timeout);
157
- this.timeout = setTimeout($.proxy(function() {
158
- if (this.hoverState ==='in') {
159
- this.doPopupOpen();
160
- }
161
- }, this), this.delayEnter);
162
- }
163
- }
128
+ // private
164
129
 
165
- RomoTooltip.prototype.onToggleLeave = function(e) {
166
- if (e !== undefined) {
167
- e.preventDefault();
130
+ RomoTooltip.prototype._bindElem = function() {
131
+ this._bindPopup();
132
+ if (Romo.data(this.elem, 'romo-tooltip-content') === undefined) {
133
+ this._bindAjax();
168
134
  }
135
+ this._bindBody();
169
136
 
170
137
  this.hoverState = 'out';
171
- if (this.elem.hasClass('disabled') === false) {
172
- clearTimeout(this.timeout);
173
- this.timeout = setTimeout($.proxy(function() {
174
- if (this.hoverState === 'out') {
175
- this.doPopupClose();
176
- }
177
- }, this), this.delayLeave);
178
- }
179
- }
180
-
181
- RomoTooltip.prototype.onResizeWindow = function(e) {
182
- if (this.elem.hasClass('disabled') === false && this.hoverState === 'in') {
183
- this.doPlacePopupElem();
184
- }
185
- }
138
+ this.delayEnter = 0;
139
+ this.delayLeave = 0;
186
140
 
187
- RomoTooltip.prototype.onPopupOpen = function(e) {
188
- if (e !== undefined) {
189
- e.preventDefault();
141
+ if (Romo.data(this.elem, 'romo-tooltip-delay') !== undefined && Romo.data(this.elem, 'romo-tooltip-delay') !== '') {
142
+ this.delayEnter = Romo.data(this.elem, 'romo-tooltip-delay');
143
+ this.delayLeave = Romo.data(this.elem, 'romo-tooltip-delay');
190
144
  }
191
-
192
- if (this.elem.hasClass('disabled') === false) {
193
- this.doPopupOpen();
145
+ if (Romo.data(this.elem, 'romo-tooltip-delay-enter') !== undefined && Romo.data(this.elem, 'romo-tooltip-delay-enter') !== '') {
146
+ this.delayEnter = Romo.data(this.elem, 'romo-tooltip-delay-enter');
194
147
  }
195
- }
196
-
197
- RomoTooltip.prototype.doPopupOpen = function() {
198
- if (this.romoAjax !== undefined) {
199
- this.romoAjax.doInvoke();
200
- } else {
201
- this._setBodyHtml(this.elem.data('romo-tooltip-content'));
148
+ if (Romo.data(this.elem, 'romo-tooltip-delay-leave') !== undefined && Romo.data(this.elem, 'romo-tooltip-delay-leave') !== '') {
149
+ this.delayLeave = Romo.data(this.elem, 'romo-tooltip-delay-leave');
202
150
  }
203
- this.popupElem.addClass('romo-tooltip-open');
204
- this.doPlacePopupElem();
205
151
 
206
- if (this.elem.parents('.romo-modal-popup').size() !== 0) {
207
- $('body').on('modal:mousemove', $.proxy(this.onModalPopupChange, this));
208
- $('body').on('modal:popupclose', $.proxy(this.onModalPopupChange, this));
209
- }
210
- $(window).on('resize', $.proxy(this.onResizeWindow, this));
152
+ Romo.on(this.elem, 'mouseenter', Romo.proxy(this._onToggleEnter, this));
153
+ Romo.on(this.elem, 'mouseleave', Romo.proxy(this._onToggleLeave, this));
154
+ Romo.on(this.elem, 'romoTooltip:triggerPopupOpen', Romo.proxy(this._onPopupOpen, this));
155
+ Romo.on(this.elem, 'romoTooltip:triggerPopupClose', Romo.proxy(this._onPopupClose, this));
156
+ Romo.on(this.elem, 'romoTooltip:triggerSetContent', Romo.proxy(this._onSetContent, this));
211
157
 
212
- this.elem.trigger('tooltip:popupOpen', [this]);
158
+ Romo.on(window, 'resize', Romo.proxy(this._onResizeWindow, this))
213
159
  }
214
160
 
215
- RomoTooltip.prototype.onPopupClose = function(e) {
216
- if (e !== undefined) {
217
- e.preventDefault();
218
- }
161
+ RomoTooltip.prototype._bindPopup = function() {
162
+ this.popupElem = Romo.elems('<div class="romo-tooltip-popup"><div class="romo-tooltip-arrow"></div><div class="romo-tooltip-body"></div></div>')[0];
163
+ var popupParentElem = Romo.closest(this.elem, Romo.data(this.elem, 'romo-tooltip-append-to-closest') || 'body');
164
+ Romo.append(popupParentElem, this.popupElem);
219
165
 
220
- if (this.elem.hasClass('disabled') === false) {
221
- this.doPopupClose();
166
+ this.bodyElem = Romo.children(this.popupElem).find(Romo.proxy(function(childElem){
167
+ return Romo.is(childElem, '.romo-tooltip-body');
168
+ }, this));
169
+ if (Romo.data(this.elem, 'romo-tooltip-style-class') !== undefined) {
170
+ Romo.addClass(this.bodyElem, Romo.data(this.elem, 'romo-tooltip-style-class'));
222
171
  }
223
- }
224
172
 
225
- RomoTooltip.prototype.doPopupClose = function() {
226
- this.popupElem.removeClass('romo-tooltip-open');
173
+ this.popupPosition = Romo.data(this.elem, 'romo-tooltip-position') || 'top';
174
+ Romo.setData(this.popupElem, 'romo-tooltip-position', this.popupPosition);
227
175
 
228
- if (this.elem.parents('.romo-modal-popup').size() !== 0) {
229
- $('body').off('modal:mousemove', $.proxy(this.onModalPopupChange, this));
230
- $('body').off('modal:popupclose', $.proxy(this.onModalPopupChange, this));
231
- }
232
- $(window).off('resize', $.proxy(this.onResizeWindow, this));
176
+ this.popupAlignment = Romo.data(this.elem, 'romo-tooltip-alignment') || 'center';
177
+ Romo.setData(this.popupElem, 'romo-tooltip-alignment', this.popupAlignment);
233
178
 
234
- this.elem.trigger('tooltip:popupClose', [this]);
235
- }
179
+ this.doSetPopupZIndex(this.elem);
236
180
 
237
- RomoTooltip.prototype.onModalPopupChange = function(e) {
238
- if (e !== undefined) {
239
- this.doPopupClose();
240
- }
241
- return true;
242
- }
181
+ // don't propagate click events on the popup elem. this prevents the popup
182
+ // from closing when clicked (see body click event bind on popup open)
183
+ Romo.on(this.popupElem, 'click', function(e) {
184
+ e.stopPropagation();
185
+ })
243
186
 
244
- RomoTooltip.prototype.onSetContent = function(e, value) {
245
- if (e !== undefined) {
246
- e.preventDefault();
247
- }
248
- this.doSetContent(value);
187
+ Romo.parentChildElems.add(this.elem, [this.popupElem]);
249
188
  }
250
189
 
251
- RomoTooltip.prototype.doSetContent = function(value) {
252
- this.elem.data('romo-tooltip-content', value);
253
- this._setBodyHtml(this.elem.data('romo-tooltip-content'));
254
- this.doPlacePopupElem();
255
- }
190
+ RomoTooltip.prototype._bindAjax = function() {
191
+ this.romoAjax = new RomoAjax(this.elem);
192
+ this.romoAjax.doUnbindElem(); // disable auto invoke on click
256
193
 
257
- RomoTooltip.prototype.onResizeWindow = function(e) {
258
- this.doPlacePopupElem();
259
- return true;
194
+ Romo.on(this.elem, 'romoAjax:callStart', Romo.proxy(function(e, romoAjax) {
195
+ this._loadBodyStart();
196
+ return false;
197
+ }, this));
198
+ Romo.on(this.elem, 'romoAjax:callSuccess', Romo.proxy(function(e, data, romoAjax) {
199
+ this._loadBodySuccess(data);
200
+ return false;
201
+ }, this));
202
+ Romo.on(this.elem, 'romoAjax:callError', Romo.proxy(function(e, xhr, romoAjax) {
203
+ this._loadBodyError(xhr);
204
+ return false;
205
+ }, this));
260
206
  }
261
207
 
262
- RomoTooltip.prototype.doPlacePopupElem = function() {
263
- if (this.elem.parents('.romo-modal-popup').size() !== 0) {
264
- this.popupElem.css({'position': 'fixed'});
265
- }
266
-
267
- var pos = $.extend({}, this.elem[0].getBoundingClientRect(), this.elem.offset());
268
- var w = this.popupElem[0].offsetWidth;
269
- var h = this.popupElem[0].offsetHeight;
270
- var pad = 6 + 1; // arrow size + spacing
271
- var offset = {};
272
-
273
- var configHeight = this.elem.data('romo-tooltip-height') || this.elem.data('romo-tooltip-max-height');
274
- var configPosition = this.popupPosition;
275
-
276
- if (configHeight === 'detect' && (configPosition === 'top' || configPosition === 'bottom')) {
277
- var popupHeight = this.popupElem.height();
278
- var topAvailHeight = this._getPopupMaxAvailableHeight('top');
279
- var bottomAvailHeight = this._getPopupMaxAvailableHeight('bottom');
208
+ RomoTooltip.prototype._bindBody = function() {
209
+ this._resetBody();
280
210
 
281
- if (popupHeight < topAvailHeight && popupHeight < bottomAvailHeight) {
282
- // if it fits both ways, use the config position way
283
- configHeight = this._getPopupMaxAvailableHeight(configPosition);
284
- this.popupElem.attr('data-romo-tooltip-arrow-position', configPosition);
285
- } else if (topAvailHeight > bottomAvailHeight) {
286
- configPosition = 'top';
287
- configHeight = topAvailHeight;
288
- this.popupElem.attr('data-romo-tooltip-arrow-position', 'top');
289
- } else {
290
- configPosition = 'bottom';
291
- configHeight = bottomAvailHeight;
292
- this.popupElem.attr('data-romo-tooltip-arrow-position', 'bottom');
293
- }
211
+ Romo.setStyle(this.bodyElem, 'min-width', Romo.data(this.elem, 'romo-tooltip-min-width'));
212
+ Romo.setStyle(this.bodyElem, 'max-width', Romo.data(this.elem, 'romo-tooltip-max-width'));
213
+ Romo.setStyle(this.bodyElem, 'width', Romo.data(this.elem, 'romo-tooltip-width'));
214
+ Romo.setStyle(this.bodyElem, 'min-height', Romo.data(this.elem, 'romo-tooltip-min-height'));
215
+ Romo.setStyle(this.bodyElem, 'height', Romo.data(this.elem, 'romo-tooltip-height'));
294
216
 
295
- this.bodyElem.css({'max-height': configHeight.toString() + 'px'});
296
- } else {
297
- this.popupElem.attr('data-romo-tooltip-arrow-position', configPosition);
217
+ if (Romo.data(this.elem, 'romo-tooltip-max-height') === undefined) {
218
+ Romo.setData(this.elem, 'romo-tooltip-max-height', 'detect');
298
219
  }
299
-
300
-
301
- if(h > configHeight) {
302
- h = configHeight;
220
+ if (Romo.data(this.elem, 'romo-tooltip-max-height') !== 'detect') {
221
+ Romo.setStyle(this.bodyElem, 'max-height', Romo.data(this.elem, 'romo-tooltip-max-height'));
303
222
  }
223
+ }
304
224
 
305
- switch (configPosition) {
306
- case 'top':
307
- $.extend(offset, { top: pos.top - h - pad, left: pos.left + pos.width / 2 - w / 2 });
308
- break;
309
- case 'bottom':
310
- $.extend(offset, { top: pos.top + pos.height + pad, left: pos.left + pos.width / 2 - w / 2 });
311
- break;
312
- case 'left':
313
- $.extend(offset, { top: pos.top + pos.height / 2 - h / 2, left: pos.left - w - pad });
314
- break;
315
- case 'right':
316
- $.extend(offset, { top: pos.top + pos.height / 2 - h / 2, left: pos.left + pos.width + pad });
317
- break;
318
- }
225
+ RomoTooltip.prototype._resetBody = function() {
226
+ Romo.rmStyle(this.bodyElem, 'min-width');
227
+ Romo.rmStyle(this.bodyElem, 'max-width');
228
+ Romo.rmStyle(this.bodyElem, 'width');
229
+ Romo.rmStyle(this.bodyElem, 'min-height');
230
+ Romo.rmStyle(this.bodyElem, 'max-height');
231
+ Romo.rmStyle(this.bodyElem, 'height');
232
+ }
319
233
 
320
- this.popupElem.offset(offset);
234
+ RomoTooltip.prototype._loadBodyStart = function() {
235
+ this._setBodyHtml('');
236
+ this._bindBody();
237
+ this.doPlacePopupElem();
238
+ Romo.pushFn(Romo.proxy(this.doPlacePopupElem, this));
239
+ Romo.trigger(this.elem, 'romoTooltip:loadBodyStart', [this]);
321
240
  }
322
241
 
323
- RomoTooltip.prototype.doSetPopupZIndex = function(relativeElem) {
324
- var relativeZIndex = Romo.parseZIndex(relativeElem);
325
- this.popupElem.css({'z-index': relativeZIndex + 1100}); // see z-index.css
242
+ RomoTooltip.prototype._loadBodySuccess = function(data) {
243
+ Romo.initUpdateHtml(this.bodyElem, data);
244
+ this._bindBody();
245
+ this.doPlacePopupElem();
246
+ Romo.pushFn(Romo.proxy(this.doPlacePopupElem, this));
247
+ Romo.trigger(this.elem, 'romoTooltip:loadBodySuccess', [data, this]);
326
248
  }
327
249
 
328
- // private
250
+ RomoTooltip.prototype._loadBodyError = function(xhr) {
251
+ Romo.trigger(this.elem, 'romoTooltip:loadBodyError', [xhr, this]);
252
+ }
329
253
 
330
254
  RomoTooltip.prototype._getPopupMaxAvailableHeight = function(position) {
331
255
  var maxHeight = undefined;
332
256
 
333
257
  switch (position) {
334
258
  case 'top':
335
- var elemTop = this.elem[0].getBoundingClientRect().top;
259
+ var elemTop = this.elem.getBoundingClientRect().top;
336
260
  maxHeight = elemTop - this._getPopupMaxHeightDetectPad(position);
337
261
  break;
338
262
  case 'bottom':
339
- var elemBottom = this.elem[0].getBoundingClientRect().bottom;
340
- maxHeight = $(window).height() - elemBottom - this._getPopupMaxHeightDetectPad(position);
263
+ var viewportHeight = document.documentElement.clientHeight;
264
+ var elemBottom = this.elem.getBoundingClientRect().bottom;
265
+ maxHeight = viewportHeight - elemBottom - this._getPopupMaxHeightDetectPad(position);
341
266
  break;
342
267
  }
343
268
 
@@ -345,13 +270,74 @@ RomoTooltip.prototype._getPopupMaxAvailableHeight = function(position) {
345
270
  }
346
271
 
347
272
  RomoTooltip.prototype._getPopupMaxHeightDetectPad = function(position) {
348
- return this.elem.data('romo-tooltip-max-height-detect-pad-'+position) || this.elem.data('romo-tooltip-max-height-detect-pad') || 10;
273
+ return (
274
+ Romo.data(this.elem, 'romo-tooltip-max-height-detect-pad-'+position) ||
275
+ Romo.data(this.elem, 'romo-tooltip-max-height-detect-pad') ||
276
+ 10
277
+ );
349
278
  }
350
279
 
351
280
  RomoTooltip.prototype._setBodyHtml = function(content) {
352
- this.bodyElem.html(content || '');
281
+ Romo.updateHtml(this.bodyElem, '<div>'+content+'</div>');
353
282
  }
354
283
 
355
- Romo.onInitUI(function(e) {
356
- Romo.initUIElems(e, '[data-romo-tooltip-auto="true"]').romoTooltip();
357
- });
284
+ // event functions
285
+
286
+ RomoTooltip.prototype.romoEvFn._onToggleEnter = function(e) {
287
+ this.hoverState = 'in';
288
+ if (Romo.hasClass(this.elem, 'disabled') === false) {
289
+ clearTimeout(this.timeout);
290
+ this.timeout = setTimeout(Romo.proxy(function() {
291
+ if (this.hoverState ==='in') {
292
+ this.doPopupOpen();
293
+ }
294
+ }, this), this.delayEnter);
295
+ }
296
+
297
+ return false;
298
+ }
299
+
300
+ RomoTooltip.prototype.romoEvFn._onToggleLeave = function(e) {
301
+ this.hoverState = 'out';
302
+ if (Romo.hasClass(this.elem, 'disabled') === false) {
303
+ clearTimeout(this.timeout);
304
+ this.timeout = setTimeout(Romo.proxy(function() {
305
+ if (this.hoverState === 'out') {
306
+ this.doPopupClose();
307
+ }
308
+ }, this), this.delayLeave);
309
+ }
310
+
311
+ return false;
312
+ }
313
+
314
+ RomoTooltip.prototype.romoEvFn._onPopupOpen = function(e) {
315
+ if (Romo.hasClass(this.elem, 'disabled') === false) {
316
+ this.doPopupOpen();
317
+ }
318
+ }
319
+
320
+ RomoTooltip.prototype.romoEvFn._onPopupClose = function(e) {
321
+ this.doPopupClose();
322
+ }
323
+
324
+ RomoTooltip.prototype.romoEvFn._onModalPopupChange = function(e) {
325
+ this.doPopupClose();
326
+ }
327
+
328
+ RomoTooltip.prototype.romoEvFn._onSetContent = function(e, value) {
329
+ this.doSetContent(value);
330
+ }
331
+
332
+ RomoTooltip.prototype.romoEvFn._onScrollableParentsScroll = function(e) {
333
+ this.doPopupClose();
334
+ }
335
+
336
+ RomoTooltip.prototype.romoEvFn._onResizeWindow = function(e) {
337
+ this.doPlacePopupElem();
338
+ return true;
339
+ }
340
+
341
+ // init
342
+
343
+ Romo.addElemsInitSelector('[data-romo-tooltip-auto="true"]', RomoTooltip);
@@ -1,19 +1,19 @@
1
1
  var RomoWordBoundaryFilter = function(filterString, setElems, getElemTextContentCallback) {
2
2
  this.boundaryCharsRegex = /[\s-_]+/;
3
- this.matchingNodes = [];
4
- this.notMatchingNodes = [];
3
+ this.matchingElems = [];
4
+ this.notMatchingElems = [];
5
5
  this.filters = filterString
6
6
  .trim()
7
7
  .toLowerCase()
8
8
  .split(this.boundaryCharsRegex);
9
9
 
10
- Romo.toArray(setElems).forEach($.proxy(function(node) {
11
- var contentStack = getElemTextContentCallback($(node))
10
+ Romo.array(setElems).forEach(Romo.proxy(function(elem) {
11
+ var contentStack = getElemTextContentCallback(elem)
12
12
  .trim()
13
13
  .toLowerCase()
14
14
  .split(this.boundaryCharsRegex).reverse();
15
15
 
16
- var match = this.filters.reduce($.proxy(function(filterMatch, filter) {
16
+ var match = this.filters.reduce(Romo.proxy(function(filterMatch, filter) {
17
17
  if (filterMatch === false) {
18
18
  // short-circuit the reduce
19
19
  return false;
@@ -33,12 +33,9 @@ var RomoWordBoundaryFilter = function(filterString, setElems, getElemTextContent
33
33
  }, this), true);
34
34
 
35
35
  if (match === true) {
36
- this.matchingNodes.push(node);
36
+ this.matchingElems.push(elem);
37
37
  } else {
38
- this.notMatchingNodes.push(node);
38
+ this.notMatchingElems.push(elem);
39
39
  }
40
40
  }, this));
41
-
42
- this.matchingElems = $(this.matchingNodes);
43
- this.notMatchingElems = $(this.notMatchingNodes);
44
41
  }