aboutsummaryrefslogtreecommitdiff
path: root/js/components/ui/modalDialog
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/ui/modalDialog')
-rw-r--r--js/components/ui/modalDialog/modal-dialog-manager.js123
-rw-r--r--js/components/ui/modalDialog/modalDialogHeader.js82
-rw-r--r--js/components/ui/modalDialog/modalDialogHeader.reel/modalDialogHeader.css30
-rw-r--r--js/components/ui/modalDialog/modalDialogHeader.reel/modalDialogHeader.html33
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 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */
6
7var Popup = require("js/components/popup.reel").Popup;
8var popupManagerModule = require("js/components/popup-manager.reel");
9var modalDialogHeader = require("js/components/ui/modalDialog/modalDialogHeader");
10
11exports.ModalDialogMananger = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, {
12
13 _container: {
14 enumerable: false,
15 value: null
16 },
17
18 _blockScreen: {
19 enumerable: false,
20 value: null
21 },
22
23 /**
24 * Assign a container to be the block screen
25 *
26 * @param {Element} container
27 */
28 init: {
29 enumerable: true,
30 value: function (blockScreen, container) {
31 container.style.position = 'absolute';
32 container.style.top = 0;
33 container.style.left = 0;
34 container.style.width = '100%';
35 container.style.height = '100%';
36 container.style.display = "none";
37 this._container = container;
38
39 blockScreen.style.position = 'absolute';
40 blockScreen.style.top = 0;
41 blockScreen.style.left = 0;
42 blockScreen.style.width = '100%';
43 blockScreen.style.height = '100%';
44 blockScreen.style.backgroundColor = "#8c8c8c";
45 blockScreen.style.opacity = "0.8";
46 blockScreen.style.display = "none";
47 this._blockScreen = blockScreen;
48 }
49 },
50
51 /**
52 * Show a modal dialog at the center of the browser
53 */
54 showModalDialog:{
55 writable:false,
56 enumerable:true,
57 value: function(title, popupBackgroundColor, contentDiv){
58 //place block screen on top of everything
59 this._blockScreen.style.zIndex = popupManagerModule.PopupMananger._getNextHighestZindex(document.body);
60 this._blockScreen.style.display = "block";
61 this._container.style.zIndex = parseInt(this._blockScreen.style.zIndex) +1;
62
63
64 var modalContent = document.createElement("div");
65
66 //hack (elements needs to be on DOM to be drawn)
67 //add modal dialog header
68 var headerEl = document.createElement('div');
69 var header = modalDialogHeader.ModalDialogHeader.create();
70 header.element = headerEl;
71 if((typeof title === "undefined") || (title === null)){
72 header.showTitle = false;
73 }else{
74 header.title = title;
75 }
76 this._container.appendChild(headerEl);
77 header.needsDraw = true;
78
79 //add dialog content
80
81 modalContent.appendChild(contentDiv);
82
83// var that = this;
84// setTimeout(function(){that.closeModalDialog()}, 5000);//test
85
86 var popupEl = document.createElement('div');
87 var pop = Popup.create();
88 //Setting container and content
89 pop.element = popupEl;
90 pop.content = modalContent;
91 pop.position = {x:"30%", y:"15%"};//pass in real calculated center position
92 pop.zIndex = popupManagerModule.PopupMananger._getNextHighestZindex(this._container);
93 this._container.appendChild(popupEl);
94 popupEl.style.opacity = 1;
95 pop.needsDraw = true;
96
97 //overrride modal dialog background color
98 if((typeof popupBackgroundColor !== "undefined") || (popupBackgroundColor !== null)){
99 pop.element.style.backgroundColor = popupBackgroundColor;
100 }
101 //hack - place the rendered header in the right place now
102 this._container.removeChild(headerEl);
103 modalContent.insertBefore(headerEl, modalContent.firstChild);
104
105
106 this._container.style.display = "block";
107
108 }
109 },
110
111 closeModalDialog:{
112 writable:false,
113 enumerable:true,
114 value: function(){
115 //remove dialog
116 while(this._container.hasChildNodes()){
117 this._container.removeChild(this._container.lastChild);
118 }
119 this._container.style.display = "none";
120 this._blockScreen.style.display ="none";
121 }
122 }
123}); \ 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 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */
6
7var Montage = require("montage/core/core").Montage;
8var Component = require("montage/ui/component").Component;
9
10var modalDialogManagerModule = require("js/components/ui/modalDialog/modal-dialog-manager");
11
12var ModalDialogHeader = exports.ModalDialogHeader = Montage.create(Component, {
13
14 _firstTime: {
15 enumerable: false,
16 value: true
17 },
18
19 showTitle:{
20 enumerable: true,
21 value: true
22 },
23
24 title:{
25 enumerable : true,
26 value: "Default Title"
27 },
28
29 showClose:{
30 enumerable: true,
31 value: true
32 },
33
34 willDraw: {
35 enumerable: false,
36 value: function() {
37
38 }
39 },
40
41 draw: {
42 enumerable: false,
43 value: function() {
44 var closeElement = this.cross;
45 if(closeElement){
46 if(!this.showClose){
47 closeElement.style.visibility = "hidden";
48 }else{
49 closeElement.addEventListener("click", function(){
50 modalDialogManagerModule.ModalDialogMananger.closeModalDialog();
51 }, false);
52 }
53 }
54 var titleElement = this.title;
55 if(titleElement){
56 if(this.showTitle){
57 titleElement.innerHTML = this.title;
58 }else{
59 titleElement.style.visibility = "hidden";
60 }
61 }
62
63 if(!this.showClose){
64 closeElement.style.display = "none";
65 }
66 if(!this.showTitle){
67 this.separator.style.display = "none";
68 }
69
70 this.element.parentNode.addEventListener("closeDialog", function(evt){
71 modalDialogManagerModule.ModalDialogMananger.closeModalDialog();
72 }, false);
73 }
74 },
75
76 didDraw: {
77 enumerable: false,
78 value: function() {
79
80 }
81 }
82}); \ 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 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
7.modalDialogHeader{
8 padding-bottom: 5px;