|
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.wcOneWindow(); |
|
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 el.wcChrome; |
|
53 } |
|
54 el.wcChrome = this; |
|
55 |
|
56 } |
|
57 |
|
58 this.wcUpdateWindowHtml = function() { |
|
59 |
|
60 window.app.debug("WC: 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 var htmlText = '' + |
|
88 this.begin + this.filledimg + this.end; |
|
89 |
|
90 var el = document.getElementById("wcrow"); |
|
91 if (el) { |
|
92 el.innerHTML = htmlText; |
|
93 } |
|
94 else { |
|
95 document.write(htmlText); |
|
96 } |
|
97 } |
|
98 |
|
99 this.wcTwoWindows = function() { |
|
100 var htmlText = '' + |
|
101 this.begin + this.emptyimg + this.emptyimg + this.end; |
|
102 |
|
103 this.setHtmlText(htmlText) |
|
104 |
|
105 |
|
106 } |
|
107 |
|
108 this.wcThreeWindows = function() { |
|
109 var htmlText = '' + |
|
110 this.begin + this.emptyimg + this.emptyimg + this.emptyimg+ this.end; |
|
111 this.setHtmlText(htmlText) |
|
112 } |
|
113 |
|
114 this.wcFourWindows = function() { |
|
115 var htmlText = '' + |
|
116 this.begin + this.emptyimg + this.emptyimg + this.emptyimg + this.emptyimg + this.end; |
|
117 |
|
118 this.setHtmlText(htmlText) |
|
119 } |
|
120 |
|
121 this.wcFiveWindows = function() { |
|
122 var htmlText = '' + |
|
123 this.begin + this.emptyimg + this.emptyimg + this.emptyimg + this.emptyimg + this.emptyimg + this.end; |
|
124 |
|
125 this.setHtmlText(htmlText) |
|
126 } |
|
127 |
|
128 this.setHtmlText = function(htmlText) { |
|
129 |
|
130 var el = document.getElementById("wcrow"); |
|
131 if (el) { |
|
132 el.innerHTML = htmlText; |
|
133 } |
|
134 else { |
|
135 document.write(htmlText); |
|
136 } |
|
137 this.setCurrentIndex(); |
|
138 } |
|
139 |
|
140 this.setCurrentIndex = function(){ |
|
141 var el = document.getElementById("wcrow"); |
|
142 Icons = el.getElementsByTagName("img"); |
|
143 |
|
144 Icons[window.pageController.currentPageIndex].setAttribute('src', "windowcount.snippet/icons/filledcircle.png"); |
|
145 } |
|
146 |
|
147 |
|
148 this.setSnippetPosition = function() { |
|
149 |
|
150 if (window.snippets.WindowCountBarId ) { |
|
151 mode = window.chrome.displayMode; |
|
152 if (mode == "portrait") { |
|
153 window.snippets.WindowCountBarId.setPosition(0,27); |
|
154 } |
|
155 else if (mode == "landscape") { |
|
156 window.snippets.WindowCountBarId.setPosition(0,0); |
|
157 } |
|
158 |
|
159 } |
|
160 } |
|
161 |
|
162 |
|
163 /* Private method that sets the properties: |
|
164 * set the widht of first and last cells, |
|
165 * set the background of middle cell based on |
|
166 * display mode |
|
167 */ |
|
168 this.setProps = function() { |
|
169 |
|
170 var leftW = document.getElementById("strength").offsetWidth + |
|
171 document.getElementById("provider").offsetWidth + |
|
172 document.getElementById("title").offsetWidth; |
|
173 |
|
174 var rightW = document.getElementById("clock").offsetWidth + |
|
175 document.getElementById("battery").offsetWidth; |
|
176 |
|
177 if (window.snippets.WindowCountBarId) { |
|
178 if (window.chrome.displayMode == "portrait" ) { |
|
179 // for some reason setting width to 0 doesn't work |
|
180 document.getElementById("wcfirst").width = "1px"; |
|
181 document.getElementById("wclast").width = "1px"; |
|
182 } |
|
183 else { |
|
184 document.getElementById("wcfirst").width = leftW + "px"; |
|
185 document.getElementById("wclast").width = rightW + "px"; |
|
186 } |
|
187 } |
|
188 } |
|
189 |
|
190 function updateWCSnippet(mode) { |
|
191 el = document.getElementById('WindowCountBarId').wcChrome; |
|
192 el.setSnippetPosition(); |
|
193 el.setProps(); |
|
194 } |
|
195 |
|
196 /* Initialize */ |
|
197 this.InitWCBar(); |
|
198 |
|
199 /* Slots */ |
|
200 window.chrome.chromeComplete.connect( |
|
201 function() { |
|
202 el = document.getElementById('WindowCountBarId').wcChrome; |
|
203 el.setSnippetPosition(); |
|
204 el.wcUpdateWindowHtml(); |
|
205 window.chrome.aspectChanged.connect(updateWCSnippet); |
|
206 } |
|
207 ); |
|
208 |
|
209 |
|
210 window.ViewStack.pageChanged.connect( |
|
211 function() { |
|
212 document.getElementById('WindowCountBarId').wcChrome.wcUpdateWindowHtml(); |
|
213 } |
|
214 ); |
|
215 |
|
216 window.ViewStack.activateWindowView.connect( |
|
217 function() { |
|
218 updateWCSnippet(); |
|
219 window.snippets.WindowCountBarId.toggleVisibility(false); |
|
220 } |
|
221 ); |
|
222 |
|
223 |
|
224 window.ViewStack.deActivateWindowView.connect( |
|
225 function() { |
|
226 window.snippets.WindowCountBarId.toggleVisibility(false); |
|
227 } |
|
228 ); |
|
229 } |