From b89a7ee8b956c96a1dcee995ea840feddc5d4b27 Mon Sep 17 00:00:00 2001
From: Pierre Frisch
Date: Thu, 22 Dec 2011 07:25:50 -0800
Subject: First commit of Ninja to ninja-internal

Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
---
 .../ui/modalDialog/modal-dialog-manager.js         | 123 +++++++++++++++++++++
 js/components/ui/modalDialog/modalDialogHeader.js  |  82 ++++++++++++++
 .../modalDialogHeader.reel/modalDialogHeader.css   |  30 +++++
 .../modalDialogHeader.reel/modalDialogHeader.html  |  33 ++++++
 4 files changed, 268 insertions(+)
 create mode 100644 js/components/ui/modalDialog/modal-dialog-manager.js
 create mode 100644 js/components/ui/modalDialog/modalDialogHeader.js
 create mode 100644 js/components/ui/modalDialog/modalDialogHeader.reel/modalDialogHeader.css
 create mode 100644 js/components/ui/modalDialog/modalDialogHeader.reel/modalDialogHeader.html

(limited to 'js/components/ui/modalDialog')

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;
+    margin-bottom: 5px;
+}
+
+.modalDialogHeader .separator{
+    height: 4px;
+    width:auto;
+}
+
+.close{
+    float: right;
+    cursor: pointer;
+    position:relative;
+    top:-1.4em;
+    right:5px;
+    color: #8c8c8c;
+    font-weight:bold;
+}
+
+.title{
+    text-align: center;
+}
+
diff --git a/js/components/ui/modalDialog/modalDialogHeader.reel/modalDialogHeader.html b/js/components/ui/modalDialog/modalDialogHeader.reel/modalDialogHeader.html
new file mode 100644
index 00000000..fca3ed78
--- /dev/null
+++ b/js/components/ui/modalDialog/modalDialogHeader.reel/modalDialogHeader.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<!-- <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> -->
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link rel="stylesheet" type="text/css" href="modalDialogHeader.css">
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "module": "js/components/ui/modalDialog/modalDialogHeader",
+            "name": "ModalDialogHeader",
+            "properties": {
+                "element": {"#": "modalDialogHeader"},
+                "cross": {"#": "close"},
+                "title": {"#": "title"},
+                "separator": {"#": "separator"}
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+<div id="modalDialogHeader" class="modalDialogHeader">
+    <div id="title" class="title" >Header Title</div>
+    <span id="close" class="close">x</span>
+    <div id="separator" class="separator"></div>
+</div>
+</body>
+</html>
\ No newline at end of file
-- 
cgit v1.2.3