diff options
Diffstat (limited to 'node_modules/montage/ui/popup/popup.reel')
-rwxr-xr-x | node_modules/montage/ui/popup/popup.reel/popup.js | 159 |
1 files changed, 64 insertions, 95 deletions
diff --git a/node_modules/montage/ui/popup/popup.reel/popup.js b/node_modules/montage/ui/popup/popup.reel/popup.js index f13a6aed..2a61e75e 100755 --- a/node_modules/montage/ui/popup/popup.reel/popup.js +++ b/node_modules/montage/ui/popup/popup.reel/popup.js | |||
@@ -27,6 +27,10 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
27 | // A Delegate to control positioning (and other features, in future) of the popup in a custom manner | 27 | // A Delegate to control positioning (and other features, in future) of the popup in a custom manner |
28 | delegate: {value: null}, | 28 | delegate: {value: null}, |
29 | 29 | ||
30 | /** | ||
31 | Internal property. | ||
32 | @private | ||
33 | */ | ||
30 | contentEl: { | 34 | contentEl: { |
31 | value: null | 35 | value: null |
32 | }, | 36 | }, |
@@ -34,66 +38,24 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
34 | Description TODO | 38 | Description TODO |
35 | @type {Property} | 39 | @type {Property} |
36 | @default {Container} null | 40 | @default {Container} null |
41 | @private | ||
37 | */ | 42 | */ |
38 | containerEl: { | 43 | containerEl: { |
39 | value: null | 44 | value: null |
40 | }, | 45 | }, |
41 | 46 | ||
42 | /** | 47 | |
43 | Description TODO | ||
44 | @private | ||
45 | */ | ||
46 | _pointer: { | ||
47 | value: true | ||
48 | }, | ||
49 | /** | ||
50 | Description TODO | ||
51 | @type {Function} | ||
52 | @default {Boolean} true | ||
53 | */ | ||
54 | pointer: { | ||
55 | get: function() { | ||
56 | return this._pointer; | ||
57 | }, | ||
58 | set: function(value) { | ||
59 | if (this._pointer !== value) { | ||
60 | this._pointer = value; | ||
61 | this.needsDraw = true; | ||
62 | } | ||
63 | } | ||
64 | }, | ||
65 | /** | ||
66 | Description TODO | ||
67 | @private | ||
68 | */ | ||
69 | _boxed: { | ||
70 | value: true | ||
71 | }, | ||
72 | /** | ||
73 | Description TODO | ||
74 | @type {Function} | ||
75 | @default {Boolean} true | ||
76 | */ | ||
77 | boxed: { | ||
78 | get: function() { | ||
79 | return this._boxed; | ||
80 | }, | ||
81 | set: function(value) { | ||
82 | if (this._boxed !== value) { | ||
83 | this._boxed = value; | ||
84 | this.needsDraw = true; | ||
85 | } | ||
86 | } | ||
87 | }, | ||
88 | /** | 48 | /** |
89 | Description TODO | 49 | Description TODO |
90 | @private | 50 | @private |
91 | */ | 51 | */ |
92 | _slot: {value: null}, | 52 | _slot: {value: null}, |
93 | /** | 53 | /** |
54 | |||
94 | Description TODO | 55 | Description TODO |
95 | @type {Function} | 56 | @type {Function} |
96 | @default null | 57 | @default null |
58 | @private | ||
97 | */ | 59 | */ |
98 | slot: { | 60 | slot: { |
99 | get: function() { | 61 | get: function() { |
@@ -112,7 +74,8 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
112 | */ | 74 | */ |
113 | _content: {value: null}, | 75 | _content: {value: null}, |
114 | /** | 76 | /** |
115 | Description TODO | 77 | The Montage component that will be shown in this popup. |
78 | |||
116 | @type {Function} | 79 | @type {Function} |
117 | @default null | 80 | @default null |
118 | */ | 81 | */ |
@@ -137,7 +100,8 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
137 | */ | 100 | */ |
138 | _modal: { value: false }, | 101 | _modal: { value: false }, |
139 | /** | 102 | /** |
140 | Description TODO | 103 | If true, the Popup will be rendered as a Modal. |
104 | |||
141 | @type {Function} | 105 | @type {Function} |
142 | @default {Boolean} false | 106 | @default {Boolean} false |
143 | */ | 107 | */ |
@@ -156,8 +120,10 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
156 | } | 120 | } |
157 | }, | 121 | }, |
158 | 122 | ||
159 | // An Object wtih values {top, left}. Set it only if the popup should display at a | 123 | /** |
160 | // given location instead of anchoring it to a anchor element or at the center of the screen. | 124 | An Object wtih values {top, left}. Set it only if the popup should display at a |
125 | given location always. | ||
126 | */ | ||
161 | _position: {value: null}, | 127 | _position: {value: null}, |
162 | position: { | 128 | position: { |
163 | get: function() { | 129 | get: function() { |
@@ -169,8 +135,12 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
169 | } | 135 | } |
170 | }, | 136 | }, |
171 | 137 | ||
138 | /** | ||
139 | * Number of milliseconds after which the Popup must be dismissed. Default is 0. | ||
140 | */ | ||
172 | autoDismiss: { value: 0 }, | 141 | autoDismiss: { value: 0 }, |
173 | 142 | ||
143 | /** @private */ | ||
174 | _displayed: { value: false }, | 144 | _displayed: { value: false }, |
175 | displayed: { | 145 | displayed: { |
176 | get: function() { | 146 | get: function() { |
@@ -204,9 +174,10 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
204 | 174 | ||
205 | 175 | ||
206 | /** | 176 | /** |
177 | Internal method. | ||
207 | @private | 178 | @private |
208 | */ | 179 | */ |
209 | _getPosition: { | 180 | _getElementPosition: { |
210 | value: function(obj) { | 181 | value: function(obj) { |
211 | var curleft = 0, curtop = 0, curHt = 0, curWd = 0; | 182 | var curleft = 0, curtop = 0, curHt = 0, curWd = 0; |
212 | if (obj.offsetParent) { | 183 | if (obj.offsetParent) { |
@@ -222,16 +193,21 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
222 | } | 193 | } |
223 | }, | 194 | }, |
224 | 195 | ||
225 | _calculatePosition: { | 196 | _positionPopup: { |
226 | value: function() { | 197 | value: function() { |
227 | var pos, delegate = this.delegate, anchor = this.anchor, type = this.type; | 198 | var position, delegate = this.delegate, anchor = this.anchor, type = this.type; |
228 | 199 | ||
229 | if(delegate && (typeof delegate.positionPopup === 'function')) { | 200 | // if a delegate is provided, use that to get the position |
201 | if(delegate && (typeof delegate.willPositionPopup === 'function')) { | ||
230 | var anchorPosition; | 202 | var anchorPosition; |
231 | if(anchor) { | 203 | if(anchor) { |
232 | anchorPosition = this._getPosition(anchor); | 204 | anchorPosition = this._getElementPosition(anchor); |
233 | } | 205 | } |
234 | pos = delegate.positionPopup(this, anchor, anchorPosition); | 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 | ||
209 | // we assume that the position is static and hence use that | ||
210 | position = this.position; | ||
235 | } else { | 211 | } else { |
236 | // @todo - advanced positioning support | 212 | // @todo - advanced positioning support |
237 | var $el = this.contentEl || this.content.element; | 213 | var $el = this.contentEl || this.content.element; |
@@ -243,67 +219,55 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
243 | var viewportWidth = window.innerWidth; | 219 | var viewportWidth = window.innerWidth; |
244 | 220 | ||
245 | if (anchor) { | 221 | if (anchor) { |
222 | // if an anchor is provided, we position the popup relative to the anchor | ||
223 | // | ||
246 | if (anchor.nodeName) { | 224 | if (anchor.nodeName) { |
247 | // if anchor is an element | 225 | // if anchor is an element |
248 | var elPosition = this._getPosition(anchor); | 226 | var elPosition = this._getElementPosition(anchor); |
249 | var tgtHeight = parseFloat(anchor.style.height || 0) || anchor.offsetHeight || 0; | 227 | var tgtHeight = parseFloat(anchor.style.height || 0) || anchor.offsetHeight || 0; |
250 | var tgtWidth = parseFloat(anchor.style.width || 0) || anchor.offsetWidth || 0; | 228 | var tgtWidth = parseFloat(anchor.style.width || 0) || anchor.offsetWidth || 0; |
251 | 229 | ||
252 | pos = { | 230 | position = { |
253 | top: elPosition[1] + tgtHeight + 20 /* pointer */, | 231 | top: elPosition[1] + tgtHeight + 20 /* pointer */, |
254 | left: elPosition[0] + (tgtWidth / 2) - (elWidth / 2) | 232 | left: elPosition[0] + (tgtWidth / 2) - (elWidth / 2) |
255 | }; | 233 | }; |
256 | 234 | ||
257 | if (pos.left < 0) { | 235 | if (position.left < 0) { |