aboutsummaryrefslogtreecommitdiff
path: root/js/components/popup.reel/popup.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/popup.reel/popup.js')
-rw-r--r--js/components/popup.reel/popup.js245
1 files changed, 245 insertions, 0 deletions
diff --git a/js/components/popup.reel/popup.js b/js/components/popup.reel/popup.js
new file mode 100644
index 00000000..ae483ea9
--- /dev/null
+++ b/js/components/popup.reel/popup.js
@@ -0,0 +1,245 @@
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
7////////////////////////////////////////////////////////////////////////
8//
9var Montage = require("montage/core/core").Montage,
10 Component = require("montage/ui/component").Component;
11////////////////////////////////////////////////////////////////////////
12//Exporting as Popup
13exports.Popup = Montage.create(Component, {
14 ////////////////////////////////////////////////////////////////////
15 //
16 hasTemplate: {
17 value: true
18 },
19 ////////////////////////////////////////////////////////////////////
20 //
21 _content: {
22 numerable: false,
23 value: null
24 },
25 ////////////////////////////////////////////////////////////////////
26 //
27 content: {
28 enumerable: true,
29 get: function() {
30 return this._content;
31 },
32 set: function(value) {
33 this._content = value;
34 }
35 },
36 ////////////////////////////////////////////////////////////////////
37 //
38 _position: {
39 numerable: false,
40 value: null
41 },
42 ////////////////////////////////////////////////////////////////////
43 //Position is set with X,Y Coordinates from Top and Left respetively
44 position: {
45 enumerable: true,
46 get: function() {
47 return this._position;
48 },
49 set: function(value) {
50 this._position = value;
51 if (value.x) {
52 this.element.style.left = value.x;
53 }
54 if (value.y) {
55 this.element.style.top = value.y;
56 }
57 }
58 },
59 ////////////////////////////////////////////////////////////////////
60 //
61 _tooltip: {
62 numerable: false,
63 value: null
64 },
65 ////////////////////////////////////////////////////////////////////
66 //
67 tooltip: {
68 enumerable: true,
69 get: function() {
70 return this._tooltip;
71 },
72 set: function(value) {
73 this._tooltip = value;
74 }
75 },
76 ////////////////////////////////////////////////////////////////////
77 //
78 prepareForDraw: {
79 enumerable: false,
80 value: function() {
81 this.element.style.pointerEvents = 'auto';
82 }
83 },
84 ////////////////////////////////////////////////////////////////////
85 //
86 willDraw: {
87 enumerable: false,
88 value: function() {
89 //
90 }
91 },
92 ////////////////////////////////////////////////////////////////////
93 //
94 draw: {
95 enumerable: false,
96 value: function() {
97 //
98 if (!this._content) {
99 return;
100 }
101 if (!this._content.style.width) {
102 this._content.style.width = 'auto';
103 }
104 if (!this._content.style.float) {
105 this._content.style.float = 'left';
106 }
107 this.element.getElementsByClassName('content')[0].appendChild(this._content);
108 //
109 if (!this.tooltip) {
110 this.tooltip = {};
111 this.tooltip.side = 'none';
112 this.tooltip.align = 'none';
113 }
114 switch (this.tooltip.side.toLowerCase()) {
115 case 'top':
116 this.element.style.marginTop = (this.element.getElementsByClassName('tooltip')[0].clientHeight) + 'px';
117 break;
118 case 'bottom':
119 this.element.style.marginTop = -(this.element.clientHeight+(this.element.getElementsByClassName('tooltip')[0].clientHeight)) + 'px';
120 break;
121 case 'left':
122 this.element.style.marginLeft = (this.element.getElementsByClassName('tooltip')[0].clientWidth) + 'px';
123 break;
124 case 'right':
125 this.element.style.marginLeft = -(this.element.clientWidth + this.element.getElementsByClassName('tooltip')[0].clientWidth) + 'px';
126 break;
127 default:
128 //console.log("Error: Tooltip side value of "+this.tooltip.side.toLowerCase()+" property not allowed");
129 break;
130 }
131 //
132 switch (this.tooltip.align.toLowerCase()) {
133 case 'top':
134 this.element.style.marginTop = -Math.round((this.element.getElementsByClassName('tooltip')[0].clientHeight/2)+this.element.getElementsByClassName('tooltip')[0].offsetTop) + 'px';
135 break;
136 case 'bottom':
137 this.element.style.marginTop = -Math.round(this.element.clientHeight-((this.element.clientHeight - this.element.getElementsByClassName('tooltip')[0].offsetTop)-(this.element.getElementsByClassName('tooltip')[0].clientHeight/2))) + 'px';
138 break;
139 case 'left':
140 this.element.style.marginLeft = -Math.round(this.element.clientWidth-((this.element.clientWidth - this.element.getElementsByClassName('tooltip')[0].offsetLeft)-(this.element.getElementsByClassName('tooltip')[0].clientWidth/2))) + 'px';
141 break;
142 case 'right':
143 this.element.style.marginLeft = -(this.element.clientWidth - this.element.getElementsByClassName('tooltip')[0].clientWidth) + 'px';
144 break;
145 case 'center':
146 this.element.style.marginLeft = -Math.round(this.element.clientWidth/2-((this.element.clientWidth/2 - this.element.getElementsByClassName('tooltip')[0].offsetLeft)-(this.element.getElementsByClassName('tooltip')[0].clientWidth/2))) + 'px';
147 break;
148 case 'middle':
149 this.element.style.marginTop = -Math.round(this.element.clientHeight/2-((this.element.clientHeight/2 - this.element.getElementsByClassName('tooltip')[0].offsetTop)-(this.element.getElementsByClassName('tooltip')[0].clientHeight/2))) + 'px';
150 break;
151 default:
152 //console.log("Error: Tooltip align value of "+this.tooltip.align.toLowerCase()+" property not allowed");
153 break;
154 }
155 //
156 this.drawTooltip();
157 }
158 },
159 ////////////////////////////////////////////////////////////////////
160 //
161 didDraw: {
162 enumerable: false,
163 value: function() {
164 //Removed own event, relying on firstDraw event of m-js
165 }
166 },
167 ////////////////////////////////////////////////////////////////////
168 //
169 drawTooltip: {
170 enumerable: true,
171 value: function () {
172 //
173 var longD = '22px', shortD = '10px', shortP = '-10px', longP = '8px', tip = this.element.getElementsByClassName('tooltip')[0];
174 //
175 if (this.tooltip && this.tooltip.side) {
176 switch (this.tooltip.side.toLowerCase()) {
177 case 'top':
178 tip.style.top = shortP;
179 tip.style.height = shortD;
180 tip.style.width = longD;
181 break;
182 case 'bottom':
183 tip.style.bottom = shortP;
184 tip.style.height = shortD;
185 tip.style.width = longD;
186 tip.getElementsByTagName('span')[0].style.marginTop = '-6px';
187 break;
188 case 'left':
189 tip.style.left = shortP;
190 tip.style.width = shortD;
191 tip.style.height = longD;
192 //this.element.style.left = parseInt(this.element.style.left) + parseInt(tip.style.width) + 'px';
193 break;
194 case 'right':
195 tip.style.right = shortP;
196 tip.style.width = shortD;
197 tip.style.height = longD;
198 tip.getElementsByTagName('span')[0].style.marginLeft = '-6px';
199 break;
200 default:
201 tip.style.display = 'none';
202 //console.log("Error: Tooltip side value of "+this.tooltip.side.toLowerCase()+" property not allowed");
203 break;
204 }
205 } else {
206 tip.style.display = 'none';
207 }
208 //
209 if (this.tooltip && this.tooltip.align) {
210 switch (this.tooltip.align.toLowerCase()) {
211 case 'top':
212 tip.style.top = longP;
213 break;
214 case 'bottom':
215 tip.style.bottom = longP;
216 break;
217 case 'left':
218 tip.style.left = longP;
219 break;
220 case 'right':
221 tip.style.right = longP;
222 break;
223 case 'center':
224 tip.style.left = '50%';
225 tip.style.marginLeft = -Math.round(parseFloat(tip.style.width)/2)+'px';
226 break;