aboutsummaryrefslogtreecommitdiff
path: root/js/components/popup-manager.reel
diff options
context:
space:
mode:
authorKris Kowal2012-07-06 11:52:06 -0700
committerKris Kowal2012-07-06 15:01:48 -0700
commit648ee61ae84216d0236e0dbc211addc13b2cfa3a (patch)
tree8f0f55557bd0c47a84e49c1977c950645d284607 /js/components/popup-manager.reel
parentaedd14b18695d031f695d27dfbd94df5614495bb (diff)
downloadninja-648ee61ae84216d0236e0dbc211addc13b2cfa3a.tar.gz
Expand tabs
Diffstat (limited to 'js/components/popup-manager.reel')
-rwxr-xr-xjs/components/popup-manager.reel/popup-manager.html18
-rwxr-xr-xjs/components/popup-manager.reel/popup-manager.js212
2 files changed, 115 insertions, 115 deletions
diff --git a/js/components/popup-manager.reel/popup-manager.html b/js/components/popup-manager.reel/popup-manager.html
index 281477f1..1a6e9553 100755
--- a/js/components/popup-manager.reel/popup-manager.html
+++ b/js/components/popup-manager.reel/popup-manager.html
@@ -31,10 +31,10 @@ POSSIBILITY OF SUCH DAMAGE.
31</copyright> 31</copyright>
32--> 32-->
33<html lang="en"> 33<html lang="en">
34 <head> 34 <head>
35 35
36 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 36 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
37 37
38 <script type="text/montage-serialization"> 38 <script type="text/montage-serialization">
39 { 39 {
40 "owner": { 40 "owner": {
@@ -45,13 +45,13 @@ POSSIBILITY OF SUCH DAMAGE.
45 } 45 }
46 } 46 }
47 </script> 47 </script>
48 48
49 </head> 49 </head>
50 50
51 <body> 51 <body>
52 52
53 <section data-montage-id="popupWindows"></section> 53 <section data-montage-id="popupWindows"></section>
54 54
55 </body> 55 </body>
56 56
57</html> 57</html>
diff --git a/js/components/popup-manager.reel/popup-manager.js b/js/components/popup-manager.reel/popup-manager.js
index 07a07806..a32642b4 100755
--- a/js/components/popup-manager.reel/popup-manager.js
+++ b/js/components/popup-manager.reel/popup-manager.js
@@ -30,144 +30,144 @@ POSSIBILITY OF SUCH DAMAGE.
30 30
31//////////////////////////////////////////////////////////////////////// 31////////////////////////////////////////////////////////////////////////
32// 32//
33var Montage = require("montage/core/core").Montage, 33var Montage = require("montage/core/core").Montage,
34 Component = require("montage/ui/component").Component, 34 Component = require("montage/ui/component").Component,
35 Popup = require("js/components/popup.reel").Popup; 35 Popup = require("js/components/popup.reel").Popup;
36//////////////////////////////////////////////////////////////////////// 36////////////////////////////////////////////////////////////////////////
37//Exporting as PopupManager 37//Exporting as PopupManager
38exports.PopupManager = Montage.create(Component, { 38exports.PopupManager = Montage.create(Component, {
39 //////////////////////////////////////////////////////////////////// 39 ////////////////////////////////////////////////////////////////////
40 // 40 //
41 deserializedFromTemplate: { 41 deserializedFromTemplate: {
42 value: function () { 42 value: function () {
43 //Setting styles to popup container 43 //Setting styles to popup container
44 this.element.style.zIndex = this._getNextHighestZindex(document.body); // Highest z-index in body 44 this.element.style.zIndex = this._getNextHighestZindex(document.body); // Highest z-index in body
45 this.element.style.position = 'absolute'; 45 this.element.style.position = 'absolute';
46 this.element.style.top = 0; 46 this.element.style.top = 0;
47 this.element.style.left = 0; 47 this.element.style.left = 0;
48 this.element.style.width = '100%'; 48 this.element.style.width = '100%';
49 this.element.style.height = '100%'; 49 this.element.style.height = '100%';
50 //Allowing mouse events to pass through this layer 50 //Allowing mouse events to pass through this layer
51 this.element.style.pointerEvents = 'none'; 51 this.element.style.pointerEvents = 'none';
52 } 52 }
53 }, 53 },
54 //////////////////////////////////////////////////////////////////// 54 ////////////////////////////////////////////////////////////////////
55 //Adding the popup object 55 //Adding the popup object
56 addPopup: { 56 addPopup: {
57 enumerable: true, 57 enumerable: true,
58 value: function (popup, depth, blackout) { 58 value: function (popup, depth, blackout) {
59 //Fix to ensure always highest 59 //Fix to ensure always highest
60 this.element.style.zIndex = this._getNextHighestZindex(document.body); // Highest z-index in body 60 this.element.style.zIndex = this._getNextHighestZindex(document.body); // Highest z-index in body
61 //TODO: Add blackout background 61 //TODO: Add blackout background
62 //Checking for manual or setting auto to next highest depth 62 //Checking for manual or setting auto to next highest depth
63 if (depth) { 63 if (depth) {
64 popup.style.zIndex = depth; 64 popup.style.zIndex = depth;
65 } else { 65 } else {
66 popup.style.zIndex = this._getNextHighestZindex(this.element); 66 popup.style.zIndex = this._getNextHighestZindex(this.element);
67 } 67 }
68 //Adding pointer events (inherits none) 68 //Adding pointer events (inherits none)
69 popup.style.pointerEvents = 'auto'; 69 popup.style.pointerEvents = 'auto';
70 this.element.appendChild(popup); 70 this.element.appendChild(popup);
71 //TODO: Test further (perhaps defined in CSS) 71 //TODO: Test further (perhaps defined in CSS)
72 popup.style.opacity = 0; 72 popup.style.opacity = 0;
73 popup.style.webkitTransitionProperty = 'opacity'; 73 popup.style.webkitTransitionProperty = 'opacity';
74 popup.style.webkitTransitionDuration = '150ms'; 74 popup.style.webkitTransitionDuration = '150ms';
75 //TODO: Fix animation hack 75 //TODO: Fix animation hack
76 if (popup.style.webkitTransitionDuration) { 76 if (popup.style.webkitTransitionDuration) {
77 setTimeout(function () {popup.style.opacity = 1}.bind(this), parseInt(popup.style.webkitTransitionDuration)); 77 setTimeout(function () {popup.style.opacity = 1}.bind(this), parseInt(popup.style.webkitTransitionDuration));
78 } else { 78 } else {
79 popup.style.opacity = 1; 79 popup.style.opacity = 1;
80 } 80 }
81 } 81 }
82 }, 82 },
83 //////////////////////////////////////////////////////////////////// 83 ////////////////////////////////////////////////////////////////////
84 //Removing the popup object 84 //Removing the popup object
85 removePopup: { 85 removePopup: {
86 enumerable: true, 86 enumerable: true,
87 value: function (popup) { 87 value: function (popup) {
88 popup.style.opacity = 0; 88 popup.style.opacity = 0;
89 //TODO: Fix animation hack 89 //TODO: Fix animation hack
90 if (popup.style && popup.style.webkitTransitionDuration) { 90 if (popup.style && popup.style.webkitTransitionDuration) {
91 setTimeout(function () {this.element.removeChild(popup)}.bind(this), parseInt(popup.style.webkitTransitionDuration)); 91 setTimeout(function () {this.element.removeChild(popup)}.bind(this), parseInt(popup.style.webkitTransitionDuration));
92 } else { 92 } else {
93 this.element.removeChild(popup); 93 this.element.removeChild(popup);
94 } 94 }
95 } 95 }
96 }, 96 },
97 //////////////////////////////////////////////////////////////////// 97 ////////////////////////////////////////////////////////////////////
98 //Swapping first with second object 98 //Swapping first with second object
99 swapPopup: { 99 swapPopup: {
100 enumerable: true, 100 enumerable: true,
101 value: function (first, second) { 101 value: function (first, second) {
102 var f = first.style.zIndex, s = second.style.zIndex; 102 var f = first.style.zIndex, s = second.style.zIndex;
103 //Setting after storing values 103 //Setting after storing values
104 first.style.zIndex = s; 104 first.style.zIndex = s;
105 second.style.zIndex = f; 105 second.style.zIndex = f;
106 } 106 }
107 }, 107 },
108 //////////////////////////////////////////////////////////////////// 108 ////////////////////////////////////////////////////////////////////
109 //Setting Popup to highest z-index 109 //Setting Popup to highest z-index
110 bringToFrontPopup: { 110 bringToFrontPopup: {
111 enumerable: true, 111 enumerable: true,
112 value: function (popup) { 112 value: function (popup) {
113 popup.style.zIndex = this._getNextHighestZindex(this.element); 113 popup.style.zIndex = this._getNextHighestZindex(this.element);
114 } 114 }
115 }, 115 },
116 //////////////////////////////////////////////////////////////////// 116 ////////////////////////////////////////////////////////////////////
117 // 117 //
118 createPopup: { 118 createPopup: {
119 enumerable: true, 119 enumerable: true,
120 value: function (content, position, tooltip) { 120 value: function (content, position, tooltip) {
121 //Creating container for Popup 121 //Creating container for Popup
122 var container = document.createElement('div'); 122 var container = document.createElement('div');
123 var pop = Popup.create(); 123 var pop = Popup.create();
124 //Setting container and content 124 //Setting container and content
125 pop.element = container; 125 pop.element = container;
126 pop.content = content; 126 pop.content = content;
127 //Checking for optional parameters 127 //Checking for optional parameters
128 if (position) 128 if (position)
129 pop.position = position; 129 pop.position = position;
130 if (tooltip) 130 if (tooltip)
131 pop.tooltip = tooltip; 131 pop.tooltip = tooltip;
132 //Adding Popup to view