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 @@
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 /* 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 @@
    </head>
    <body>
-        <div id="popup-container" class="montage-hide montage-popup-container">
+        <div id="popup-container" class="montage-invisible montage-popup-container">
            <div id="popup-wrapper" class="montage-popup-tooltip montage-popup-wrapper montage-popup-border">
                <div id="popup-content" class="montage-popup-content"></div>
            </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 @@
 </copyright> */
 /**
-        @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.style['z-index'] = 6999;
-            el.classList.add('montage-hide');
+            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.element.classList.add('montage-modal');
-                    this._modalDialogMask = this._modalDialogMask || this._createModalMask(); 
-                    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';
-

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';	416	this.content.element.style.display = 'block';
389