diff options
Diffstat (limited to 'node_modules/montage/ui/popup/popup.reel')
-rwxr-xr-x | node_modules/montage/ui/popup/popup.reel/popup.css | 15 | ||||
-rwxr-xr-x | node_modules/montage/ui/popup/popup.reel/popup.html | 2 | ||||
-rwxr-xr-x | node_modules/montage/ui/popup/popup.reel/popup.js | 69 |
3 files changed, 57 insertions, 29 deletions
diff --git a/node_modules/montage/ui/popup/popup.reel/popup.css b/node_modules/montage/ui/popup/popup.reel/popup.css index a0af52ba..4597d8ac 100755 --- a/node_modules/montage/ui/popup/popup.reel/popup.css +++ b/node_modules/montage/ui/popup/popup.reel/popup.css | |||
@@ -4,7 +4,7 @@ | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | /* these need to be moved to montage.css when that is created */ | 6 | /* these need to be moved to montage.css when that is created */ |
7 | .montage-hide { | 7 | .montage-invisible { |
8 | display: none; | 8 | display: none; |
9 | } | 9 | } |
10 | .clearfix:after { | 10 | .clearfix:after { |
@@ -15,7 +15,7 @@ | |||
15 | clear: both; | 15 | clear: both; |
16 | height: 0; | 16 | height: 0; |
17 | } | 17 | } |
18 | 18 | ||
19 | 19 | ||
20 | .montage-off-left { | 20 | .montage-off-left { |
21 | position: absolute; | 21 | position: absolute; |
@@ -25,20 +25,19 @@ | |||
25 | 25 | ||
26 | .montage-popup-modal-mask { | 26 | .montage-popup-modal-mask { |
27 | position: fixed; | 27 | position: fixed; |
28 | background-color: #000; | ||
29 | left: 0; | 28 | left: 0; |
30 | top: 0; | 29 | top: 0; |
31 | right: 0; | 30 | right: 0; |
32 | bottom: 0; | 31 | bottom: 0; |
32 | background-color: #000; | ||
33 | opacity: 0.8; | 33 | opacity: 0.8; |
34 | z-index: 9000; | ||
35 | } | 34 | } |
36 | 35 | ||
37 | .montage-popup-container { | 36 | .montage-popup-container { |
38 | background-color: #fff; | 37 | background-color: #fff; |
39 | border-radius: 5px; | 38 | border-radius: 5px; |
40 | border: 3px solid #000; | 39 | border: 3px solid #000; |
41 | 40 | ||
42 | } | 41 | } |
43 | 42 | ||
44 | .montage-popup-noborder { | 43 | .montage-popup-noborder { |
@@ -53,8 +52,8 @@ | |||
53 | outline: none; | 52 | outline: none; |
54 | } | 53 | } |
55 | 54 | ||
56 | .montage-popup-wrapper { | 55 | .montage-popup-wrapper { |
57 | 56 | ||
58 | } | 57 | } |
59 | 58 | ||
60 | .montage-popup-header { | 59 | .montage-popup-header { |
@@ -66,5 +65,5 @@ | |||
66 | background-color: whitesmoke; | 65 | background-color: whitesmoke; |
67 | padding: 10px 15px; | 66 | padding: 10px 15px; |
68 | border-top: 1px solid #ddd; | 67 | border-top: 1px solid #ddd; |
69 | 68 | ||
70 | } | 69 | } |
diff --git a/node_modules/montage/ui/popup/popup.reel/popup.html b/node_modules/montage/ui/popup/popup.reel/popup.html index 69bf075c..9948b868 100755 --- a/node_modules/montage/ui/popup/popup.reel/popup.html +++ b/node_modules/montage/ui/popup/popup.reel/popup.html | |||
@@ -42,7 +42,7 @@ | |||
42 | 42 | ||
43 | </head> | 43 | </head> |
44 | <body> | 44 | <body> |
45 | <div id="popup-container" class="montage-hide montage-popup-container"> | 45 | <div id="popup-container" class="montage-invisible montage-popup-container"> |
46 | <div id="popup-wrapper" class="montage-popup-tooltip montage-popup-wrapper montage-popup-border"> | 46 | <div id="popup-wrapper" class="montage-popup-tooltip montage-popup-wrapper montage-popup-border"> |
47 | <div id="popup-content" class="montage-popup-content"></div> | 47 | <div id="popup-content" class="montage-popup-content"></div> |
48 | </div> | 48 | </div> |
diff --git a/node_modules/montage/ui/popup/popup.reel/popup.js b/node_modules/montage/ui/popup/popup.reel/popup.js index fdfb0ef9..f13a6aed 100755 --- a/node_modules/montage/ui/popup/popup.reel/popup.js +++ b/node_modules/montage/ui/popup/popup.reel/popup.js | |||
@@ -5,7 +5,7 @@ | |||
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | /** | 7 | /** |
8 | @module "montage/ui/popup/popup.reel" | 8 | @module "montage/ui/popup/popup.reel" |
9 | @requires montage/core/core | 9 | @requires montage/core/core |
10 | @requires montage/ui/component | 10 | @requires montage/ui/component |
11 | */ | 11 | */ |
@@ -190,7 +190,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
190 | */ | 190 | */ |
191 | prepareForDraw: { | 191 | prepareForDraw: { |
192 | value: function() { | 192 | value: function() { |
193 | 193 | this.type = this.type || 'custom'; | |
194 | } | 194 | } |
195 | }, | 195 | }, |
196 | 196 | ||
@@ -224,7 +224,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
224 | 224 | ||
225 | _calculatePosition: { | 225 | _calculatePosition: { |
226 | value: function() { | 226 | value: function() { |
227 | var pos, delegate = this.delegate, anchor = this.anchor, type = (this.type || 'custom'); | 227 | var pos, delegate = this.delegate, anchor = this.anchor, type = this.type; |
228 | 228 | ||
229 | if(delegate && (typeof delegate.positionPopup === 'function')) { | 229 | if(delegate && (typeof delegate.positionPopup === 'function')) { |
230 | var anchorPosition; | 230 | var anchorPosition; |
@@ -303,8 +303,9 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
303 | value: function() { | 303 | value: function() { |
304 | var el = document.createElement('div'); | 304 | var el = document.createElement('div'); |
305 | el.classList.add('montage-popup-modal-mask'); | 305 | el.classList.add('montage-popup-modal-mask'); |
306 | el.style['z-index'] = 9000; | 306 | el.style['z-index'] = 6999; |
307 | el.classList.add('montage-hide'); | 307 | el.classList.add('montage-invisible'); |
308 | |||
308 | document.body.appendChild(el); | 309 | document.body.appendChild(el); |
309 | return el; | 310 | return el; |
310 | } | 311 | } |
@@ -341,7 +342,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
341 | 342 | ||
342 | show: { | 343 | show: { |
343 | value: function() { | 344 | value: function() { |
344 | var type = this.type || "custom", | 345 | var type = this.type, |
345 | self = this; | 346 | self = this; |
346 | this.application.getPopupSlot(type, this, function(slot) { | 347 | this.application.getPopupSlot(type, this, function(slot) { |
347 | self._popupSlot = slot; | 348 | self._popupSlot = slot; |
@@ -355,11 +356,40 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
355 | value: function() { | 356 | value: function() { |
356 | this._removeEventListeners(); | 357 | this._removeEventListeners(); |
357 | 358 | ||
358 | var type = this.type || "custom", | 359 | var type = this.type, |
359 | self = this; | 360 | self = this; |
360 | this.application.getPopupSlot(type, null, function() { | 361 | |
361 | self.displayed = false; | 362 | this.application.returnPopupSlot(type); |
362 | }); | 363 | this.displayed = false; |
364 | } | ||
365 | }, | ||
366 | |||
367 | _showModalMask: { | ||
368 | value: function() { | ||
369 | this._modalDialogMask = document.querySelector('.montage-popup-modal-mask'); | ||
370 | this._modalDialogMask = this._modalDialogMask || this._createModalMask(); | ||
371 | this._modalDialogMask.classList.remove('montage-invisible'); | ||
372 | } | ||
373 | }, | ||
374 | |||
375 | _hideModalMask: { | ||
376 | value: function() { | ||
377 | // check to see if there is at least one modal dialog in the DOM | ||
378 | // See https://github.com/Motorola-Mobility/montage/issues/32 | ||
379 | var activePopups = this.application._getActivePopupSlots(); | ||
380 | var count = 0; | ||
381 | if(activePopups && activePopups.length > 0) { | ||
382 | // look to see if any content is a modal | ||
383 | var i, len = activePopups.length; | ||
384 | for(i=0; i< len; i++) { | ||
385 | if(activePopups[i].content && activePopups[i].content.modal === true) { | ||
386 | count++; | ||
387 | } | ||
388 | } | ||
389 | } | ||
390 | if(count <= 0) { | ||
391 | this._modalDialogMask.classList.add('montage-invisible'); | ||
392 | } | ||
363 | } | 393 | } |
364 | }, | 394 | }, |
365 | 395 | ||
@@ -372,9 +402,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
372 | // kishore - does the above restriction make sense ? should we restrict it ? | 402 | // kishore - does the above restriction make sense ? should we restrict it ? |
373 | 403 | ||
374 | if(this.modal === true) { | 404 | if(this.modal === true) { |
375 | this._modalDialogMask = document.querySelector('.montage-popup-modal-mask'); | 405 | this.element.classList.add('montage-modal'); |
376 | this._modalDialogMask = this._modalDialogMask || this._createModalMask(); | ||
377 | this.element.classList.add('montage-modal'); | ||
378 | } else { | 406 | } else { |
379 | this.element.classList.remove('montage-modal'); | 407 | this.element.classList.remove('montage-modal'); |
380 | } | 408 | } |
@@ -384,9 +412,9 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
384 | // For the first release, we position inside the didDraw | 412 | // For the first release, we position inside the didDraw |
385 | //this._positionPopup(); | 413 | //this._positionPopup(); |
386 | 414 | ||
387 | this.element.classList.remove('montage-hide'); | 415 | this.element.classList.remove('montage-invisible'); |
388 | this.content.element.style.display = 'block'; |