diff options
Diffstat (limited to 'node_modules/montage/ui/popup/popup.reel/popup.js')
-rwxr-xr-x | node_modules/montage/ui/popup/popup.reel/popup.js | 135 |
1 files changed, 88 insertions, 47 deletions
diff --git a/node_modules/montage/ui/popup/popup.reel/popup.js b/node_modules/montage/ui/popup/popup.reel/popup.js index 2a61e75e..d0a7a1cc 100755 --- a/node_modules/montage/ui/popup/popup.reel/popup.js +++ b/node_modules/montage/ui/popup/popup.reel/popup.js | |||
@@ -21,8 +21,29 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
21 | 21 | ||
22 | hasTemplate: {value: true}, | 22 | hasTemplate: {value: true}, |
23 | 23 | ||
24 | // anchor element to which this popup must be anchored to | 24 | // the HTML Element to which the popup must be anchored to |
25 | anchor: {value: null}, | 25 | anchorElement: {value: null}, |
26 | |||
27 | _anchor: {value: null}, | ||
28 | /** | ||
29 | * The HTMLElement or Montage Component that the popup must be anchored to | ||
30 | */ | ||
31 | anchor: { | ||
32 | get: function() { | ||
33 | return this._anchor; | ||
34 | }, | ||
35 | set: function(value) { | ||
36 | if(value) { | ||
37 | this._anchor = value; | ||
38 | if(value.nodeName) { | ||
39 | // HTMLElement | ||
40 | this.anchorElement = value; | ||
41 | } else { | ||
42 | this.anchorElement = value.element; | ||
43 | } | ||
44 | } | ||
45 | } | ||
46 | }, | ||
26 | 47 | ||
27 | // A Delegate to control positioning (and other features, in future) of the popup in a custom manner | 48 | // A Delegate to control positioning (and other features, in future) of the popup in a custom manner |
28 | delegate: {value: null}, | 49 | delegate: {value: null}, |
@@ -138,7 +159,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
138 | /** | 159 | /** |
139 | * Number of milliseconds after which the Popup must be dismissed. Default is 0. | 160 | * Number of milliseconds after which the Popup must be dismissed. Default is 0. |
140 | */ | 161 | */ |
141 | autoDismiss: { value: 0 }, | 162 | autoHide: { value: 0 }, |
142 | 163 | ||
143 | /** @private */ | 164 | /** @private */ |
144 | _displayed: { value: false }, | 165 | _displayed: { value: false }, |
@@ -188,26 +209,37 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
188 | curWd += obj.offsetWidth; | 209 | curWd += obj.offsetWidth; |
189 | } while ((obj = obj.offsetParent)); | 210 | } while ((obj = obj.offsetParent)); |
190 | } | 211 | } |
191 | return [curleft,curtop, curHt, curWd]; | 212 | return { |
213 | top: curtop, | ||
214 | left: curleft, | ||
215 | height: curHt, | ||
216 | width: curWd | ||
217 | }; | ||
218 | //return [curleft,curtop, curHt, curWd]; | ||
192 | 219 | ||
193 | } | 220 | } |
194 | }, | 221 | }, |
195 | 222 | ||
223 | _getCSSValue: { | ||
224 | value: function(value) { | ||
225 | if(value != null) { | ||
226 | if(typeof value === 'number') { | ||
227 | value = value + 'px'; | ||
228 | } | ||
229 | return value; | ||
230 | } | ||
231 | return ''; | ||
232 | } | ||
233 | }, | ||
234 | |||
196 | _positionPopup: { | 235 | _positionPopup: { |
197 | value: function() { | 236 | value: function() { |
198 | var position, delegate = this.delegate, anchor = this.anchor, type = this.type; | 237 | var defaultPosition, position, delegate = this.delegate, anchor = this.anchorElement, type = this.type; |
199 | 238 | ||
200 | // if a delegate is provided, use that to get the position | 239 | if(this.position !== null) { |
201 | if(delegate && (typeof delegate.willPositionPopup === 'function')) { | ||
202 | var anchorPosition; | ||
203 | if(anchor) { | ||
204 | anchorPosition = this._getElementPosition(anchor); | ||
205 | } | ||
206 | position = delegate.willPositionPopup(this, anchor, anchorPosition); | ||
207 | } else if(this.position !== null) { | ||
208 | // If a position has been specified but no delegate has been provided | 240 | // If a position has been specified but no delegate has been provided |
209 | // we assume that the position is static and hence use that | 241 | // we assume that the position is static and hence use that |
210 | position = this.position; | 242 | defaultPosition = this.position; |
211 | } else { | 243 | } else { |
212 | // @todo - advanced positioning support | 244 | // @todo - advanced positioning support |
213 | var $el = this.contentEl || this.content.element; | 245 | var $el = this.contentEl || this.content.element; |
@@ -220,43 +252,46 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
220 | 252 | ||
221 | if (anchor) { | 253 | if (anchor) { |
222 | // if an anchor is provided, we position the popup relative to the anchor | 254 | // if an anchor is provided, we position the popup relative to the anchor |
223 | // | 255 | var elPosition = this._getElementPosition(anchor); |
224 | if (anchor.nodeName) { | 256 | var tgtHeight = parseFloat(anchor.style.height || 0) || anchor.offsetHeight || 0; |
225 | // if anchor is an element | 257 | var tgtWidth = parseFloat(anchor.style.width || 0) || anchor.offsetWidth || 0; |
226 | var elPosition = this._getElementPosition(anchor); | 258 | |
227 | var tgtHeight = parseFloat(anchor.style.height || 0) || anchor.offsetHeight || 0; | 259 | defaultPosition = { |
228 | var tgtWidth = parseFloat(anchor.style.width || 0) || anchor.offsetWidth || 0; | 260 | top: elPosition.top + tgtHeight, |
229 | 261 | left: elPosition.left + (tgtWidth / 2) - (elWidth / 2) | |
230 | position = { | 262 | }; |
231 | top: elPosition[1] + tgtHeight + 20 /* pointer */, | 263 | |
232 | left: elPosition[0] + (tgtWidth / 2) - (elWidth / 2) | 264 | if (defaultPosition.left < 0) { |
233 | }; | 265 | defaultPosition.left = elPosition.left; |
234 | 266 | this._showHidePointer(false); | |
235 | if (position.left < 0) { | 267 | // dont show the pointer - @todo - support pointer arrow at different parts of the popup |
236 | position.left = elPosition[0]; | ||
237 | this._showHidePointer(false); | ||
238 | // dont show the pointer - @todo - support pointer arrow at different parts of the popup | ||
239 | } | ||
240 | } else { | ||
241 | // anchor is absolute position {top, left} | ||
242 | position = anchor; | ||
243 | } | 268 | } |
269 | |||
244 | } else { | 270 | } else { |
245 | // No positioning hints provided. POsition it at the center of the viewport by default | 271 | // No positioning hints provided. POsition it at the center of the viewport by default |
246 | position = { | 272 | defaultPosition = { |
247 | top: (viewportHeight / 2 - (elHeight / 2)), | 273 | top: (viewportHeight / 2 - (elHeight / 2)), |
248 | left: (viewportWidth / 2 - (elWidth / 2)) | 274 | left: (viewportWidth / 2 - (elWidth / 2)) |
249 | }; | 275 | }; |
250 | } | 276 | } |
251 | } | 277 | } |
278 | |||
279 | |||
280 | // if a delegate is provided, use that to get the position | ||
281 | if(delegate && (typeof delegate.willPositionPopup === 'function')) { | ||
282 | position = delegate.willPositionPopup(this, defaultPosition); | ||
283 | } else { | ||
284 | position = defaultPosition; | ||
285 | } | ||
286 | |||
252 | //this.position = position; | 287 | //this.position = position; |
253 | var popupSlot = this._popupSlot; | 288 | var popupSlot = this._popupSlot; |
254 | 289 | ||
255 | if(position) { | 290 | if(position) { |
256 | popupSlot.element.style.top = (position.top ? position.top + 'px' : ''); | 291 | popupSlot.element.style.top = this._getCSSValue(position.top); |
257 | popupSlot.element.style.left = (position.left ? position.left + 'px' : ''); | 292 | popupSlot.element.style.left = this._getCSSValue(position.left); |
258 | popupSlot.element.style.right = (position.right ? position.right + 'px' : ''); | 293 | popupSlot.element.style.right = this._getCSSValue(position.right); |
259 | popupSlot.element.style.bottom = (position.bottom ? position.bottom + 'px' : ''); | 294 | popupSlot.element.style.bottom = this._getCSSValue(position.bottom); |
260 | } | 295 | } |
261 | 296 | ||
262 | } | 297 | } |
@@ -313,6 +348,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
313 | */ | 348 | */ |
314 | show: { | 349 | show: { |
315 | value: function() { | 350 | value: function() { |
351 | //console.log("popup show", this.element); | ||
316 | var type = this.type, | 352 | var type = this.type, |
317 | self = this; | 353 | self = this; |
318 | this.application.getPopupSlot(type, this, function(slot) { | 354 | this.application.getPopupSlot(type, this, function(slot) { |
@@ -328,13 +364,16 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
328 | */ | 364 | */ |
329 | hide: { | 365 | hide: { |
330 | value: function() { | 366 | value: function() { |
367 | //console.log('popup hide', this.element); | ||
331 | this._removeEventListeners(); | 368 | this._removeEventListeners(); |
332 | 369 | ||
333 | var type = this.type, | 370 | var type = this.type, |
334 | self = this; | 371 | self = this; |
335 | 372 | ||
336 | this.application.returnPopupSlot(type); | 373 | this.application.getPopupSlot(type, this, function(slot) { |
337 | this.displayed = false; | 374 | self.application.returnPopupSlot(type); |
375 | self.displayed = false; | ||
376 | }); | ||
338 | } | 377 | } |
339 | }, | 378 | }, |
340 | 379 | ||
@@ -376,6 +415,14 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||