1 /* This snippet is used to display the circles indicating the number of windows open. |
|
2 * Current window is indicated using filled in circle and others by an empty circle. |
|
3 * In portrait mode, the snippet is placed below the status bar while in landscape |
|
4 * mode, it is overlaid on the status bar |
|
5 * Note: When overlaying the snippet there were some issues repainting when the background was set to none |
|
6 * and hence a table with three cells are being used - the width of first and last cells match the |
|
7 * area we need to see from the status bar and their backgrounds are set to none. The middle cell is |
|
8 * used to display the circles and its bakground changes between black and white based |
|
9 * on the display mode. |
|
10 */ |
|
11 |
|
12 // |
|
13 // INIT the WindowCount snippet |
|
14 // |
|
15 function WindowCountBar(id) |
|
16 { |
|
17 |
|
18 this.id = id; |
|
19 |
|
20 this.begin = |
|
21 '<table id="wcrow" align=center >'+ |
|
22 '<tr>'+ |
|
23 '<td id="wcfirst" style="background-color: transparent;">'+ |
|
24 '</td>'+ |
|
25 '<td id="wccontent">'; |
|
26 |
|
27 this.filledimg = |
|
28 '<img class="wcicon" src="windowcount.snippet/icons/filledcircle.png" >' ; |
|
29 |
|
30 this.emptyimg = |
|
31 '<img class="wcicon" src="windowcount.snippet/icons/emptycircle.png" >' ; |
|
32 |
|
33 this.end = |
|
34 '</td>'+ |
|
35 '<td id="wclast" style="background-color: transparent;">'+ |
|
36 '</td>'+ |
|
37 '</tr>'+ |
|
38 '</table>' ; |
|
39 |
|
40 this.InitWCBar = function() { |
|
41 this.wcUpdateWindowHtml(); |
|
42 this.setId(); |
|
43 } |
|
44 |
|
45 /* To identify the class. This class can also be identified through the |
|
46 * global variable wcbar which saves the instance when initialized |
|
47 * in chrome.html |
|
48 */ |
|
49 this.setId = function () { |
|
50 el = document.getElementById(this.id); |
|
51 if(el.wcChrome) { |
|
52 delete eldom.wcChrome; |
|
53 } |
|
54 el.wcChrome = this; |
|
55 |
|
56 } |
|
57 |
|
58 this.wcUpdateWindowHtml = function() { |
|
59 |
|
60 //window.chrome.alert("wcUpdateWindowHtml "+ window.pageController.pageCount()); |
|
61 |
|
62 /* Generate html based on the number of windows open */ |
|
63 switch(window.pageController.pageCount()) { |
|
64 case 1: |
|
65 this.wcOneWindow(); |
|
66 break; |
|
67 case 2: |
|
68 this.wcTwoWindows(); |
|
69 break; |
|
70 case 3: |
|
71 this.wcThreeWindows(); |
|
72 break; |
|
73 case 4: |
|
74 this.wcFourWindows(); |
|
75 break; |
|
76 case 5: |
|
77 this.wcFiveWindows(); |
|
78 break; |
|
79 default : |
|
80 break; |
|
81 } |
|
82 this.setProps(); |
|
83 |
|
84 } |
|
85 |
|
86 this.wcOneWindow = function() { |
|
87 |
|
88 var htmlText = '' + |
|
89 this.begin + this.filledimg + this.end; |
|
90 |
|
91 var el = document.getElementById("wcrow"); |
|
92 if (el ) { |
|
93 el.innerHTML = htmlText; |
|
94 } |
|
95 else { |
|
96 document.write(htmlText); |
|
97 } |
|
98 } |
|
99 |
|
100 this.wcTwoWindows = function() { |
|
101 var htmlText = '' + |
|
102 this.begin + this.emptyimg + this.emptyimg + this.end; |
|
103 |
|
104 this.setHtmlText(htmlText) |
|
105 |
|
106 |
|
107 } |
|
108 |
|
109 this.wcThreeWindows = function() { |
|
110 var htmlText = '' + |
|
111 this.begin + this.emptyimg + this.emptyimg + this.emptyimg+ this.end; |
|
112 this.setHtmlText(htmlText) |
|
113 } |
|
114 |
|
115 this.wcFourWindows = function() { |
|
116 var htmlText = '' + |
|
117 this.begin + this.emptyimg + this.emptyimg + this.emptyimg + this.emptyimg + this.end; |
|
118 |
|
119 this.setHtmlText(htmlText) |
|
120 } |
|
121 |
|
122 this.wcFiveWindows = function() { |
|
123 var htmlText = '' + |
|
124 this.begin + this.emptyimg + this.emptyimg + this.emptyimg + this.emptyimg + this.emptyimg + this.end; |
|
125 |
|
126 this.setHtmlText(htmlText) |
|
127 } |
|
128 |
|
129 this.setHtmlText = function(htmlText) { |
|
130 |
|
131 var el = document.getElementById("wcrow"); |
|
132 if (el ) { |
|
133 el.innerHTML = htmlText; |
|
134 } |
|
135 else { |
|
136 document.write(htmlText); |
|
137 } |
|
138 this.setCurrentIndex(); |
|
139 } |
|
140 |
|
141 this.setCurrentIndex = function(){ |
|
142 var el = document.getElementById("wcrow"); |
|
143 Icons = el.getElementsByTagName("img"); |
|
144 |
|
145 Icons[window.pageController.currentPageIndex].setAttribute('src', "windowcount.snippet/icons/filledcircle.png"); |
|
146 } |
|
147 |
|
148 |
|
149 this.setSnippetPosition = function(mode) { |
|
150 if (window.snippets.WindowCountBarId ) { |
|
151 if (mode == "portrait") { |
|
152 window.snippets.WindowCountBarId.anchor = "AnchorTop"; |
|
153 window.snippets.WindowCountBarId.anchorOffset = 27; |
|
154 document.getElementById("WindowCountBarId").style.backgroundColor='white'; |
|
155 |
|
156 |
|
157 } |
|
158 else if (mode == "landscape") { |
|
159 window.snippets.WindowCountBarId.anchor = "AnchorNone"; |
|
160 window.snippets.WindowCountBarId.setPosition(0, 0); |
|
161 document.getElementById("WindowCountBarId").style.backgroundColor='transparent'; |
|
162 } |
|
163 |
|
164 } |
|
165 } |
|
166 |
|
167 |
|
168 /* Private method that sets the properties: |
|
169 * set the widht of first and last cells, |
|
170 * set the background of middle cell based on |
|
171 * display mode |
|
172 */ |
|
173 this.setProps = function() { |
|
174 var leftW = document.getElementById("strength").offsetWidth + |
|
175 document.getElementById("title").offsetWidth; |
|
176 |
|
177 var rightW = document.getElementById("clock").offsetWidth + |
|
178 document.getElementById("battery").offsetWidth; |
|
179 |
|
180 if (window.snippets.WindowCountBarId ) { |
|
181 document.getElementById("wcfirst").width = leftW; |
|
182 document.getElementById("wclast").width = rightW; |
|
183 |
|
184 if (window.chrome.displayMode == "portrait" ) { |
|
185 document.getElementById("wccontent").style.backgroundColor='white'; |
|
186 } |
|
187 else { |
|
188 // match status bar style (transparent doesn't repaint/refresh correctly) |
|
189 document.getElementById("wccontent").style.background='-webkit-gradient(linear, left top, left bottom,color-stop(0%,#111122),color-stop(100%,#111144))'; |
|
190 } |
|
191 } |
|
192 |
|
193 } |
|
194 |
|
195 /* Initialize */ |
|
196 this.InitWCBar(); |
|
197 |
|
198 /* Slots */ |
|
199 window.chrome.loadComplete.connect( |
|
200 function() { |
|
201 document.getElementById('WindowCountBarId').wcChrome.setSnippetPosition(window.chrome.displayMode); |
|
202 window.snippets.updateGeometry(); |
|
203 } |
|
204 ); |
|
205 |
|
206 /* Geometry is updated when there is a change in display mode. Here, we |
|
207 * just need to set our attributes |
|
208 */ |
|
209 window.chrome.onDisplayModeChangeStart.connect( |
|
210 function(mode) { |
|
211 document.getElementById('WindowCountBarId').wcChrome.setSnippetPosition(mode); |
|
212 } |
|
213 ); |
|
214 |
|
215 window.chrome.onDisplayModeChanged.connect( |
|
216 function(mode) { |
|
217 document.getElementById('WindowCountBarId').wcChrome.setProps(); |
|
218 } |
|
219 ); |
|
220 |
|
221 |
|
222 } |
|