4 files changed, 268 insertions, 0 deletions

diff --git a/js/components/ui/modalDialog/modal-dialog-manager.js b/js/components/ui/modalDialog/modal-dialog-manager.js
new file mode 100644
index 00000000..c06b35d6
--- /dev/null
+++ b/js/components/ui/modalDialog/modal-dialog-manager.js
@@ -0,0 +1,123 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Popup =     require("js/components/popup.reel").Popup;
+var popupManagerModule = require("js/components/popup-manager.reel");
+var modalDialogHeader = require("js/components/ui/modalDialog/modalDialogHeader");
+
+exports.ModalDialogMananger = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, {
+
+    _container: {
+        enumerable: false,
+        value: null
+    },
+
+    _blockScreen: {
+        enumerable: false,
+        value: null
+    },
+
+    /**
+     * Assign a container to be the block screen
+     *
+     * @param {Element} container
+     */
+    init: {
+        enumerable: true,
+        value: function (blockScreen, container) {
+                container.style.position = 'absolute';
+                container.style.top = 0;
+                container.style.left = 0;
+                container.style.width = '100%';
+                container.style.height = '100%';
+            container.style.display = "none";
+            this._container = container;
+
+            blockScreen.style.position = 'absolute';
+                blockScreen.style.top = 0;
+                blockScreen.style.left = 0;
+                blockScreen.style.width = '100%';
+                blockScreen.style.height = '100%';
+            blockScreen.style.backgroundColor = "#8c8c8c";
+            blockScreen.style.opacity = "0.8";
+            blockScreen.style.display = "none";
+            this._blockScreen = blockScreen;
+        }
+    },
+
+    /**
+     * Show a modal dialog at the center of the browser
+     */
+    showModalDialog:{
+        writable:false,
+        enumerable:true,
+        value: function(title, popupBackgroundColor, contentDiv){
+            //place block screen on top of everything
+            this._blockScreen.style.zIndex = popupManagerModule.PopupMananger._getNextHighestZindex(document.body);
+            this._blockScreen.style.display = "block";
+            this._container.style.zIndex = parseInt(this._blockScreen.style.zIndex) +1;
+
+
+            var modalContent = document.createElement("div");
+
+            //hack (elements needs to be on DOM to be drawn)
+            //add modal dialog header
+            var headerEl = document.createElement('div');
+            var header = modalDialogHeader.ModalDialogHeader.create();
+            header.element = headerEl;
+            if((typeof title === "undefined") || (title === null)){
+                header.showTitle = false;
+            }else{
+                header.title = title;
+            }
+            this._container.appendChild(headerEl);
+            header.needsDraw = true;
+
+            //add dialog content
+            
+            modalContent.appendChild(contentDiv);
+
+//            var that = this;
+//            setTimeout(function(){that.closeModalDialog()}, 5000);//test
+
+            var popupEl = document.createElement('div');
+                var pop = Popup.create();
+                //Setting container and content
+                pop.element = popupEl;
+                pop.content = modalContent;
+                pop.position = {x:"30%", y:"15%"};//pass in real calculated center position
+            pop.zIndex = popupManagerModule.PopupMananger._getNextHighestZindex(this._container);
+            this._container.appendChild(popupEl);
+            popupEl.style.opacity = 1;
+            pop.needsDraw = true;
+
+            //overrride modal dialog background color
+            if((typeof popupBackgroundColor !== "undefined") || (popupBackgroundColor !== null)){
+                pop.element.style.backgroundColor = popupBackgroundColor;
+            }
+            //hack - place the rendered header in the right place now
+            this._container.removeChild(headerEl);
+            modalContent.insertBefore(headerEl, modalContent.firstChild);
+
+
+            this._container.style.display = "block";
+
+        }
+    },
+
+    closeModalDialog:{
+        writable:false,
+        enumerable:true,
+        value: function(){
+            //remove dialog
+            while(this._container.hasChildNodes()){
+                this._container.removeChild(this._container.lastChild);
+            }
+            this._container.style.display = "none";
+            this._blockScreen.style.display ="none";
+        }
+    }
+});
\ No newline at end of file
diff --git a/js/components/ui/modalDialog/modalDialogHeader.js b/js/components/ui/modalDialog/modalDialogHeader.js
new file mode 100644
index 00000000..6770f60a
--- /dev/null
+++ b/js/components/ui/modalDialog/modalDialogHeader.js
@@ -0,0 +1,82 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+
+var modalDialogManagerModule = require("js/components/ui/modalDialog/modal-dialog-manager");
+
+var ModalDialogHeader = exports.ModalDialogHeader = Montage.create(Component, {
+
+    _firstTime: {
+        enumerable: false,
+        value: true
+    },
+
+    showTitle:{
+        enumerable: true,
+        value: true
+    },
+
+    title:{
+        enumerable : true,
+        value: "Default Title"
+    },
+
+    showClose:{
+        enumerable: true,
+        value: true
+    },
+
+    willDraw: {
+        enumerable: false,
+        value: function() {
+
+        }
+    },
+
+    draw: {
+        enumerable: false,
+        value: function() {
+            var closeElement = this.cross;
+            if(closeElement){
+                if(!this.showClose){
+                    closeElement.style.visibility = "hidden";
+                }else{
+                    closeElement.addEventListener("click", function(){
+                        modalDialogManagerModule.ModalDialogMananger.closeModalDialog();
+                    }, false);
+                }
+            }
+            var titleElement = this.title;
+            if(titleElement){
+                if(this.showTitle){
+                    titleElement.innerHTML = this.title;
+                }else{
+                    titleElement.style.visibility = "hidden";
+                }
+            }
+
+            if(!this.showClose){
+                closeElement.style.display = "none";
+            }
+            if(!this.showTitle){
+                this.separator.style.display = "none";
+            }
+
+            this.element.parentNode.addEventListener("closeDialog", function(evt){
+                modalDialogManagerModule.ModalDialogMananger.closeModalDialog();
+            }, false);
+        }
+    },
+
+    didDraw: {
+        enumerable: false,
+        value: function() {
+
+        }
+    }
+});
\ No newline at end of file
diff --git a/js/components/ui/modalDialog/modalDialogHeader.reel/modalDialogHeader.css b/js/components/ui/modalDialog/modalDialogHeader.reel/modalDialogHeader.css
new file mode 100644
index 00000000..01205298
--- /dev/null
+++ b/js/components/ui/modalDialog/modalDialogHeader.reel/modalDialogHeader.css
@@ -0,0 +1,30 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+.modalDialogHeader{
+    padding-bottom: 5px;