From 2e04af953463643791f6362bd8ef4c6ba190abfa Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 18 Apr 2012 13:48:51 -0700 Subject: Squashed commit of the following: commit 2054551bfb01a0f4ca2e138b9d724835462d45cd Merge: 765c2da 616a853 Author: Valerio Virgillito Date: Wed Apr 18 13:48:21 2012 -0700 Merge branch 'refs/heads/master' into integration commit 765c2da8e1aa03550caf42b2bd5f367555ad2843 Author: Valerio Virgillito Date: Tue Apr 17 15:29:41 2012 -0700 updating the picasa carousel Signed-off-by: Valerio Virgillito commit 9484f1c82b81e27edf2dc0a1bcc1fa3b12077406 Merge: d27f2df cacb4a2 Author: Valerio Virgillito Date: Tue Apr 17 15:03:50 2012 -0700 Merge branch 'refs/heads/master' into integration commit d27f2df4d846064444263d7832d213535962abe7 Author: Valerio Virgillito Date: Wed Apr 11 10:39:36 2012 -0700 integrating new picasa carousel component Signed-off-by: Valerio Virgillito commit 6f98384c9ecbc8abe55ccfe1fc25a0c7ce22c493 Author: Valerio Virgillito Date: Tue Apr 10 14:33:00 2012 -0700 fixed the text area case issue Text area was renamed from TextArea to Textarea Signed-off-by: Valerio Virgillito commit 1e83e26652266136802bc7af930379c1ecd631a6 Author: Valerio Virgillito Date: Mon Apr 9 22:10:45 2012 -0700 integrating montage v0.8 into ninja. Signed-off-by: Valerio Virgillito Signed-off-by: Valerio Virgillito --- .../montage/ui/popup/alert.reel/alert.html | 32 ++--- .../montage/ui/popup/confirm.reel/confirm.html | 32 ++--- .../montage/ui/popup/notifier.reel/notifier.js | 4 +- node_modules/montage/ui/popup/popup.reel/popup.js | 135 ++++++++++++++------- 4 files changed, 103 insertions(+), 100 deletions(-) (limited to 'node_modules/montage/ui/popup') diff --git a/node_modules/montage/ui/popup/alert.reel/alert.html b/node_modules/montage/ui/popup/alert.reel/alert.html index cb4ef751..40b0d2d5 100755 --- a/node_modules/montage/ui/popup/alert.reel/alert.html +++ b/node_modules/montage/ui/popup/alert.reel/alert.html @@ -8,8 +8,8 @@ - + + } diff --git a/node_modules/montage/ui/popup/confirm.reel/confirm.html b/node_modules/montage/ui/popup/confirm.reel/confirm.html index 63b521bd..5762f1ad 100755 --- a/node_modules/montage/ui/popup/confirm.reel/confirm.html +++ b/node_modules/montage/ui/popup/confirm.reel/confirm.html @@ -8,8 +8,8 @@ - + + } diff --git a/node_modules/montage/ui/popup/notifier.reel/notifier.js b/node_modules/montage/ui/popup/notifier.reel/notifier.js index 6346cd19..ac3dcff9 100755 --- a/node_modules/montage/ui/popup/notifier.reel/notifier.js +++ b/node_modules/montage/ui/popup/notifier.reel/notifier.js @@ -78,14 +78,12 @@ var Notifier = exports.Notifier = Montage.create(Component, /** @lends module:"m popup = Popup.create(); this.popup = popup; popup.type = 'notify'; - popup.boxed = false; this.application._notifyPopup = popup; notifier = Notifier.create(); popup.content = notifier; } notifier = popup.content; - //popup.modal = !!modal; notifier.msg = msg; if (!position) { @@ -100,7 +98,7 @@ var Notifier = exports.Notifier = Montage.create(Component, /** @lends module:"m if(timeout) { timeout = parseInt(timeout, 10) || 3000; - popup.autoDismiss = timeout; + popup.autoHide = timeout; } popup.show(); 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 hasTemplate: {value: true}, - // anchor element to which this popup must be anchored to - anchor: {value: null}, + // the HTML Element to which the popup must be anchored to + anchorElement: {value: null}, + + _anchor: {value: null}, + /** + * The HTMLElement or Montage Component that the popup must be anchored to + */ + anchor: { + get: function() { + return this._anchor; + }, + set: function(value) { + if(value) { + this._anchor = value; + if(value.nodeName) { + // HTMLElement + this.anchorElement = value; + } else { + this.anchorElement = value.element; + } + } + } + }, // A Delegate to control positioning (and other features, in future) of the popup in a custom manner delegate: {value: null}, @@ -138,7 +159,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul /** * Number of milliseconds after which the Popup must be dismissed. Default is 0. */ - autoDismiss: { value: 0 }, + autoHide: { value: 0 }, /** @private */ _displayed: { value: false }, @@ -188,26 +209,37 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul curWd += obj.offsetWidth; } while ((obj = obj.offsetParent)); } - return [curleft,curtop, curHt, curWd]; + return { + top: curtop, + left: curleft, + height: curHt, + width: curWd + }; + //return [curleft,curtop, curHt, curWd]; } }, + _getCSSValue: { + value: function(value) { + if(value != null) { + if(typeof value === 'number') { + value = value + 'px'; + } + return value; + } + return ''; + } + }, + _positionPopup: { value: function() { - var position, delegate = this.delegate, anchor = this.anchor, type = this.type; + var defaultPosition, position, delegate = this.delegate, anchor = this.anchorElement, type = this.type; - // if a delegate is provided, use that to get the position - if(delegate && (typeof delegate.willPositionPopup === 'function')) { - var anchorPosition; - if(anchor) { - anchorPosition = this._getElementPosition(anchor); - } - position = delegate.willPositionPopup(this, anchor, anchorPosition); - } else if(this.position !== null) { + if(this.position !== null) { // If a position has been specified but no delegate has been provided // we assume that the position is static and hence use that - position = this.position; + defaultPosition = this.position; } else { // @todo - advanced positioning support var $el = this.contentEl || this.content.element; @@ -220,43 +252,46 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul if (anchor) { // if an anchor is provided, we position the popup relative to the anchor - // - if (anchor.nodeName) { - // if anchor is an element - var elPosition = this._getElementPosition(anchor); - var tgtHeight = parseFloat(anchor.style.height || 0) || anchor.offsetHeight || 0; - var tgtWidth = parseFloat(anchor.style.width || 0) || anchor.offsetWidth || 0; - - position = { - top: elPosition[1] + tgtHeight + 20 /* pointer */, - left: elPosition[0] + (tgtWidth / 2) - (elWidth / 2) - }; - - if (position.left < 0) { - position.left = elPosition[0]; - this._showHidePointer(false); - // dont show the pointer - @todo - support pointer arrow at different parts of the popup - } - } else { - // anchor is absolute position {top, left} - position = anchor; + var elPosition = this._getElementPosition(anchor); + var tgtHeight = parseFloat(anchor.style.height || 0) || anchor.offsetHeight || 0; + var tgtWidth = parseFloat(anchor.style.width || 0) || anchor.offsetWidth || 0; + + defaultPosition = { + top: elPosition.top + tgtHeight, + left: elPosition.left + (tgtWidth / 2) - (elWidth / 2) + }; + + if (defaultPosition.left < 0) { + defaultPosition.left = elPosition.left; + this._showHidePointer(false); + // dont show the pointer - @todo - support pointer arrow at different parts of the popup } + } else { // No positioning hints provided. POsition it at the center of the viewport by default - position = { + defaultPosition = { top: (viewportHeight / 2 - (elHeight / 2)), left: (viewportWidth / 2 - (elWidth / 2)) }; } } + + + // if a delegate is provided, use that to get the position + if(delegate && (typeof delegate.willPositionPopup === 'function')) { + position = delegate.willPositionPopup(this, defaultPosition); + } else { + position = defaultPosition; + } + //this.position = position; var popupSlot = this._popupSlot; if(position) { - popupSlot.element.style.top = (position.top ? position.top + 'px' : ''); - popupSlot.element.style.left = (position.left ? position.left + 'px' : ''); - popupSlot.element.style.right = (position.right ? position.right + 'px' : ''); - popupSlot.element.style.bottom = (position.bottom ? position.bottom + 'px' : ''); + popupSlot.element.style.top = this._getCSSValue(position.top); + popupSlot.element.style.left = this._getCSSValue(position.left); + popupSlot.element.style.right = this._getCSSValue(position.right); + popupSlot.element.style.bottom = this._getCSSValue(position.bottom); } } @@ -313,6 +348,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul */ show: { value: function() { + //console.log("popup show", this.element); var type = this.type, self = this; this.application.getPopupSlot(type, this, function(slot) { @@ -328,13 +364,16 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul */ hide: { value: function() { + //console.log('popup hide', this.element); this._removeEventListeners(); var type = this.type, self = this; - this.application.returnPopupSlot(type); - this.displayed = false; + this.application.getPopupSlot(type, this, function(slot) { + self.application.returnPopupSlot(type); + self.displayed = false; + }); } }, @@ -376,6 +415,14 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul this.element.classList.add('montage-modal'); } else { this.element.classList.remove('montage-modal'); + + if (this.autoHide) { + var self = this; + setTimeout(function() { + self.hide(); + }, this.autoHide); + } + } // @todo - positioning should happen inside the draw. Looks like this is only possible @@ -389,12 +436,6 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul // TODO do we want the panel to be focusable? this.content.element.setAttribute("tabindex", "0"); // Make the popup content focusable - if (this.autoDismiss) { - var self = this; - setTimeout(function() { - self.hide(); - }, this.autoDismiss); - } } else { if (!this.element.classList.contains('montage-invisible')) { this.element.classList.add('montage-invisible'); -- cgit v1.2.3