diff options
Diffstat (limited to 'js/components/ui/modalDialog')
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> | ||
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 | var Popup = require("js/components/popup.reel").Popup; | ||
8 | var popupManagerModule = require("js/components/popup-manager.reel"); | ||
9 | var modalDialogHeader = require("js/components/ui/modalDialog/modalDialogHeader"); | ||
10 | |||
11 | exports.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> | ||
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 | var Montage = require("montage/core/core").Montage; | ||
8 | var Component = require("montage/ui/component").Component; | ||
9 | |||
10 | var modalDialogManagerModule = require("js/components/ui/modalDialog/modal-dialog-manager"); | ||
11 | |||
12 | var 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{ |