aboutsummaryrefslogtreecommitdiff
path: root/js/components/popup-manager.reel/popup-manager.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/popup-manager.reel/popup-manager.js')
-rwxr-xr-xjs/components/popup-manager.reel/popup-manager.js212
1 files changed, 106 insertions, 106 deletions
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 132 //Adding Popup to view
133 this.addPopup(container); 133 this.addPopup(container);
134 pop.needsDraw = true; 134 pop.needsDraw = true;
135 //Returns pop component 135 //Returns pop component
136 return pop; 136 return pop;
137 } 137 }
138 }, 138 },
139 //////////////////////////////////////////////////////////////////// 139 ////////////////////////////////////////////////////////////////////
140 //Accepts parent to scan for z-index and returns highest children 140 //Accepts parent to scan for z-index and returns highest children
141 _getNextHighestZindex: { 141 _getNextHighestZindex: {
142 numerable: false, 142 numerable: false,
143 value: function (parent) { 143 value: function (parent) {
144 //CSS specificity in javascript found at http://gbradley.com/2009/10/02/css-specificity-in-javascript used with permission from Graham Bradley 144 //CSS specificity in javascript found at http://gbradley.com/2009/10/02/css-specificity-in-javascript used with permission from Graham Bradley
145 var high = 0, current = 0, children = [], i; 145 var high = 0, current = 0, children = [], i;
146 // 146 //
147 if (parent) { 147 if (parent) {
148 children = parent.getElementsByTagName('*'); 148 children = parent.getElementsByTagName('*');
149 } else { 149 } else {
150 children = document.getElementsByTagName('*'); 150 children = document.getElementsByTagName('*');
151 } 151 }
152 // 152 //
153 for (i=0; children[i]; i++) { 153 for (i=0; children[i]; i++) {
154 if (children[i].currentStyle) { 154 if (children[i].currentStyle) {
155 current = parseFloat(children[i].currentStyle['zIndex']); 155 current = parseFloat(children[i].currentStyle['zIndex']);
156 } else if (window.getComputedStyle) { 156 } else if (window.getComputedStyle) {
157 current = parseFloat(document.defaultView.getComputedStyle(children[i],null).getPropertyValue('z-index')); 157 current = parseFloat(document.defaultView.getComputedStyle(children[i],null).getPropertyValue('z-index'));
158