3 * In portrait mode, the snippet is placed below the status bar while in landscape |
3 * In portrait mode, the snippet is placed below the status bar while in landscape |
4 * mode, it is overlaid on the status bar |
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 |
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 |
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 |
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 |
8 * used to display the circles and its bakground changes between black and white based |
9 * on the display mode. |
9 * on the display mode. |
10 */ |
10 */ |
11 |
11 |
12 // |
12 // |
13 // INIT the WindowCount snippet |
13 // INIT the WindowCount snippet |
14 // |
14 // |
15 function WindowCountBar(id) |
15 function WindowCountBar(id) |
16 { |
16 { |
17 |
17 |
18 this.id = id; |
18 this.id = id; |
19 |
19 |
20 this.begin = |
20 this.begin = |
21 '<table id="wcrow" align=center >'+ |
21 '<table id="wcrow" align=center >'+ |
22 '<tr>'+ |
22 '<tr>'+ |
23 '<td id="wcfirst" style="background-color: transparent;">'+ |
23 '<td id="wcfirst" style="background-color: transparent;">'+ |
24 '</td>'+ |
24 '</td>'+ |
25 '<td id="wccontent">'; |
25 '<td id="wccontent">'; |
26 |
26 |
27 this.filledimg = |
27 this.filledimg = |
28 '<img class="wcicon" src="windowcount.snippet/icons/filledcircle.png" >' ; |
28 '<img class="wcicon" src="windowcount.snippet/icons/filledcircle.png" >' ; |
29 |
29 |
30 this.emptyimg = |
30 this.emptyimg = |
31 '<img class="wcicon" src="windowcount.snippet/icons/emptycircle.png" >' ; |
31 '<img class="wcicon" src="windowcount.snippet/icons/emptycircle.png" >' ; |
32 |
32 |
33 this.end = |
33 this.end = |
34 '</td>'+ |
34 '</td>'+ |
35 '<td id="wclast" style="background-color: transparent;">'+ |
35 '<td id="wclast" style="background-color: transparent;">'+ |
36 '</td>'+ |
36 '</td>'+ |
37 '</tr>'+ |
37 '</tr>'+ |
38 '</table>' ; |
38 '</table>' ; |
55 |
55 |
56 } |
56 } |
57 |
57 |
58 this.wcUpdateWindowHtml = function() { |
58 this.wcUpdateWindowHtml = function() { |
59 |
59 |
60 window.app.debug("WC: wcUpdateWindowHtml "+ window.pageController.pageCount()); |
60 //window.app.debug("WC: wcUpdateWindowHtml "+ window.pageController.pageCount()); |
61 |
61 //If we are in webview get page count from pageController |
|
62 if (window.views.current().type == "webView" ) { |
|
63 count = window.pageController.pageCount(); |
|
64 } |
|
65 else if (window.views.current().type == "WindowView" ){ |
|
66 count = window.views.WindowView.pageCount(); |
|
67 } |
|
68 |
|
69 //app.debug("wcUpdateWindowHtml: View " + window.views.current().type + " Count : " + count); |
62 /* Generate html based on the number of windows open */ |
70 /* Generate html based on the number of windows open */ |
63 switch(window.pageController.pageCount()) { |
71 switch (count) { |
64 case 1: |
72 case 1: |
65 this.wcOneWindow(); |
73 this.wcOneWindow(); |
66 break; |
74 break; |
67 case 2: |
75 case 2: |
68 this.wcTwoWindows(); |
76 this.wcTwoWindows(); |
84 } |
92 } |
85 |
93 |
86 this.wcOneWindow = function() { |
94 this.wcOneWindow = function() { |
87 var htmlText = '' + |
95 var htmlText = '' + |
88 this.begin + this.filledimg + this.end; |
96 this.begin + this.filledimg + this.end; |
89 |
97 |
90 var el = document.getElementById("wcrow"); |
98 var el = document.getElementById("wcrow"); |
91 if (el) { |
99 if (el) { |
92 el.innerHTML = htmlText; |
100 el.innerHTML = htmlText; |
93 } |
101 } |
94 else { |
102 else { |
95 document.write(htmlText); |
103 document.write(htmlText); |
96 } |
104 } |
97 } |
105 } |
119 } |
127 } |
120 |
128 |
121 this.wcFiveWindows = function() { |
129 this.wcFiveWindows = function() { |
122 var htmlText = '' + |
130 var htmlText = '' + |
123 this.begin + this.emptyimg + this.emptyimg + this.emptyimg + this.emptyimg + this.emptyimg + this.end; |
131 this.begin + this.emptyimg + this.emptyimg + this.emptyimg + this.emptyimg + this.emptyimg + this.end; |
124 |
132 |
125 this.setHtmlText(htmlText) |
133 this.setHtmlText(htmlText) |
126 } |
134 } |
127 |
135 |
128 this.setHtmlText = function(htmlText) { |
136 this.setHtmlText = function(htmlText) { |
129 |
137 |
130 var el = document.getElementById("wcrow"); |
138 var el = document.getElementById("wcrow"); |
131 if (el) { |
139 if (el) { |
132 el.innerHTML = htmlText; |
140 el.innerHTML = htmlText; |
133 } |
141 } |
134 else { |
142 else { |
135 document.write(htmlText); |
143 document.write(htmlText); |
136 } |
144 } |
137 this.setCurrentIndex(); |
145 this.setCurrentIndex(); |
138 } |
146 } |
139 |
147 |
140 this.setCurrentIndex = function(){ |
148 this.setCurrentIndex = function(){ |
141 var el = document.getElementById("wcrow"); |
149 var el = document.getElementById("wcrow"); |
142 Icons = el.getElementsByTagName("img"); |
150 Icons = el.getElementsByTagName("img"); |
143 |
151 |
144 Icons[window.pageController.currentPageIndex].setAttribute('src', "windowcount.snippet/icons/filledcircle.png"); |
152 if (window.views.current().type == "webView" ) { |
|
153 index = window.pageController.currentPageIndex(); |
|
154 } |
|
155 else if (window.views.current().type == "WindowView" ){ |
|
156 index = window.views.WindowView.currentPageIndex(); |
|
157 } |
|
158 |
|
159 //app.debug("setCurrentIndex: View " + window.views.current().type + " Index : " + index); |
|
160 Icons[index].setAttribute('src', "windowcount.snippet/icons/filledcircle.png"); |
145 } |
161 } |
146 |
162 |
147 |
163 |
148 this.setSnippetPosition = function() { |
164 this.setSnippetPosition = function() { |
149 |
165 |
150 if (window.snippets.WindowCountBarId ) { |
166 if (window.snippets.WindowCountBarId ) { |
151 mode = window.chrome.displayMode; |
167 mode = window.chrome.displayMode; |
152 if (mode == "portrait") { |
168 if (mode == "portrait") { |
153 window.snippets.WindowCountBarId.setPosition(0,27); |
169 window.snippets.WindowCountBarId.setPosition(0,27); |
154 } |
170 } |
164 * set the widht of first and last cells, |
180 * set the widht of first and last cells, |
165 * set the background of middle cell based on |
181 * set the background of middle cell based on |
166 * display mode |
182 * display mode |
167 */ |
183 */ |
168 this.setProps = function() { |
184 this.setProps = function() { |
169 |
185 |
170 var leftW = document.getElementById("strength").offsetWidth + |
186 var leftW = document.getElementById("strength").offsetWidth + |
171 document.getElementById("provider").offsetWidth + |
187 document.getElementById("provider").offsetWidth + |
172 document.getElementById("title").offsetWidth; |
188 document.getElementById("title").offsetWidth; |
173 |
189 |
174 var rightW = document.getElementById("clock").offsetWidth + |
190 var rightW = document.getElementById("clock").offsetWidth + |
175 document.getElementById("battery").offsetWidth; |
191 document.getElementById("battery").offsetWidth; |
176 |
192 |
177 if (window.snippets.WindowCountBarId) { |
193 if (window.snippets.WindowCountBarId) { |
178 if (window.chrome.displayMode == "portrait" ) { |
194 if (window.chrome.displayMode == "portrait" ) { |
179 // for some reason setting width to 0 doesn't work |
195 // for some reason setting width to 0 doesn't work |
180 document.getElementById("wcfirst").width = "1px"; |
196 document.getElementById("wcfirst").width = "1px"; |
181 document.getElementById("wclast").width = "1px"; |
197 document.getElementById("wclast").width = "1px"; |
184 document.getElementById("wcfirst").width = leftW + "px"; |
200 document.getElementById("wcfirst").width = leftW + "px"; |
185 document.getElementById("wclast").width = rightW + "px"; |
201 document.getElementById("wclast").width = rightW + "px"; |
186 } |
202 } |
187 } |
203 } |
188 } |
204 } |
189 |
205 |
190 function updateWCSnippet(mode) { |
206 function updateWCSnippet(mode) { |
191 el = document.getElementById('WindowCountBarId').wcChrome; |
207 el = document.getElementById('WindowCountBarId').wcChrome; |
192 el.setSnippetPosition(); |
208 el.setSnippetPosition(); |
193 el.setProps(); |
209 el.setProps(); |
194 } |
210 } |
195 |
211 |
|
212 function onPageAdded() { |
|
213 |
|
214 //app.debug("onPageAdded: Count " + window.views.WindowView.pageCount()); |
|
215 document.getElementById('WindowCountBarId').wcChrome.wcUpdateWindowHtml(); |
|
216 //app.debug("Leave onPageAdded "); |
|
217 } |
|
218 |
196 /* Initialize */ |
219 /* Initialize */ |
197 this.InitWCBar(); |
220 this.InitWCBar(); |
198 |
221 |
199 /* Slots */ |
222 /* Slots */ |
200 window.chrome.chromeComplete.connect( |
223 window.chrome.chromeComplete.connect( |
201 function() { |
224 function() { |
202 el = document.getElementById('WindowCountBarId').wcChrome; |
225 el = document.getElementById('WindowCountBarId').wcChrome; |
203 el.setSnippetPosition(); |
226 el.setSnippetPosition(); |
204 el.wcUpdateWindowHtml(); |
227 //el.wcUpdateWindowHtml(); |
205 window.chrome.aspectChanged.connect(updateWCSnippet); |
228 window.chrome.aspectChanged.connect(updateWCSnippet); |
|
229 window.views.WindowView.pageAdded.connect(onPageAdded); |
206 } |
230 } |
207 ); |
231 ); |
208 |
232 |
209 |
233 |
210 window.ViewStack.pageChanged.connect( |
234 window.ViewStack.pageChanged.connect( |