- + - +

- + diff --git a/node_modules/montage/ui/popup/confirm.reel/confirm.js b/node_modules/montage/ui/popup/confirm.reel/confirm.js index 8e1660c5..7e186e29 100755 --- a/node_modules/montage/ui/popup/confirm.reel/confirm.js +++ b/node_modules/montage/ui/popup/confirm.reel/confirm.js @@ -34,7 +34,7 @@ var Confirm = exports.Confirm = Montage.create(Component, /** @lends module:"mon msg: { value: 'Are you sure?' }, - + /** Text to display on the OK button @type {Property} @@ -43,7 +43,7 @@ var Confirm = exports.Confirm = Montage.create(Component, /** @lends module:"mon okLabel: { value: 'OK' }, - + /** Text to display on the Cancel button @type {Property} @@ -52,7 +52,7 @@ var Confirm = exports.Confirm = Montage.create(Component, /** @lends module:"mon cancelLabel: { value: 'Cancel' }, - + /** Description TODO @private @@ -164,9 +164,9 @@ var Confirm = exports.Confirm = Montage.create(Component, /** @lends module:"mon confirm = Confirm.create(); popup.content = confirm; } - + confirm = popup.content; - + if (typeof(options) === "string") { confirm.msg = options; confirm.okLabel = "OK"; @@ -176,7 +176,7 @@ var Confirm = exports.Confirm = Montage.create(Component, /** @lends module:"mon confirm.okLabel = options.okLabel || "OK"; confirm.cancelLabel = options.cancelLabel || "Cancel"; } - + confirm.okCallback = okCallback || null; confirm.cancelCallback = cancelCallback || null; 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 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ /* these need to be moved to montage.css when that is created */ -.montage-hide { +.montage-invisible { display: none; } .clearfix:after { @@ -15,7 +15,7 @@ clear: both; height: 0; } - + .montage-off-left { position: absolute; @@ -25,20 +25,19 @@ .montage-popup-modal-mask { position: fixed; - background-color: #000; left: 0; top: 0; right: 0; bottom: 0; + background-color: #000; opacity: 0.8; - z-index: 9000; } .montage-popup-container { background-color: #fff; border-radius: 5px; border: 3px solid #000; - + } .montage-popup-noborder { @@ -53,8 +52,8 @@ outline: none; } -.montage-popup-wrapper { - +.montage-popup-wrapper { + } .montage-popup-header { @@ -66,5 +65,5 @@ background-color: whitesmoke; padding: 10px 15px; border-top: 1px solid #ddd; - + } 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 @@ -

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 @@ */ /** - @module "montage/ui/popup/popup.reel" + @module "montage/ui/popup/popup.reel" @requires montage/core/core @requires montage/ui/component */ @@ -190,7 +190,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul */ prepareForDraw: { value: function() { - + this.type = this.type || 'custom'; } }, @@ -224,7 +224,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul _calculatePosition: { value: function() { - var pos, delegate = this.delegate, anchor = this.anchor, type = (this.type || 'custom'); + var pos, delegate = this.delegate, anchor = this.anchor, type = this.type; if(delegate && (typeof delegate.positionPopup === 'function')) { var anchorPosition; @@ -303,8 +303,9 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul value: function() { var el = document.createElement('div'); el.classList.add('montage-popup-modal-mask'); - el.style['z-index'] = 9000; - el.classList.add('montage-hide'); + el.style['z-index'] = 6999; + el.classList.add('montage-invisible'); + document.body.appendChild(el); return el; } @@ -341,7 +342,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul show: { value: function() { - var type = this.type || "custom", + var type = this.type, self = this; this.application.getPopupSlot(type, this, function(slot) { self._popupSlot = slot; @@ -355,11 +356,40 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul value: function() { this._removeEventListeners(); - var type = this.type || "custom", + var type = this.type, self = this; - this.application.getPopupSlot(type, null, function() { - self.displayed = false; - }); + + this.application.returnPopupSlot(type); + this.displayed = false; + } + }, + + _showModalMask: { + value: function() { + this._modalDialogMask = document.querySelector('.montage-popup-modal-mask'); + this._modalDialogMask = this._modalDialogMask || this._createModalMask(); + this._modalDialogMask.classList.remove('montage-invisible'); + } + }, + + _hideModalMask: { + value: function() { + // check to see if there is at least one modal dialog in the DOM + // See https://github.com/Motorola-Mobility/montage/issues/32 + var activePopups = this.application._getActivePopupSlots(); + var count = 0; + if(activePopups && activePopups.length > 0) { + // look to see if any content is a modal + var i, len = activePopups.length; + for(i=0; i< len; i++) { + if(activePopups[i].content && activePopups[i].content.modal === true) { + count++; + } + } + } + if(count <= 0) { + this._modalDialogMask.classList.add('montage-invisible'); + } } }, @@ -372,9 +402,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul // kishore - does the above restriction make sense ? should we restrict it ? if(this.modal === true) { - this._modalDialogMask = document.querySelector('.montage-popup-modal-mask'); - this._modalDialogMask = this._modalDialogMask || this._createModalMask(); - this.element.classList.add('montage-modal'); + this.element.classList.add('montage-modal'); } else { this.element.classList.remove('montage-modal'); } @@ -384,9 +412,9 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul // For the first release, we position inside the didDraw //this._positionPopup(); - this.element.classList.remove('montage-hide'); + this.element.classList.remove('montage-invisible'); this.content.element.style.display = 'block'; - this.content.element.classList.remove('montage-hide'); + this.content.element.classList.remove('montage-invisible'); // TODO do we want the panel to be focusable? // this.content.element.setAttribute("tabindex", "0"); // Make the alert focusable @@ -397,10 +425,10 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul }, this.autoDismiss); } } else { - if (!this.element.classList.contains('montage-hide')) { - this.element.classList.add('montage-hide'); + if (!this.element.classList.contains('montage-invisible')) { + this.element.classList.add('montage-invisible'); } - this.content.element.classList.add('montage-hide'); + this.content.element.classList.add('montage-invisible'); if(this._popupSlot) { this._popupSlot.content = null; } @@ -415,8 +443,9 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul value: function() { if (this._displayed) { this.content.element.focus(); + if(this.modal === true) { - this._modalDialogMask.classList.remove('montage-hide'); + this._showModalMask(); } this.position = this.position || this._calculatePosition(); @@ -424,7 +453,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul } else { if(this.modal === true) { - this._modalDialogMask.classList.add('montage-hide'); + this._hideModalMask(); } } // kishore: invoking this event in didDraw as we need the dimensions of the content. -- cgit v1.2.3

Confirmation