1 <html> |
|
2 <head> |
|
3 <script type="text/javascript" src="../js/ActionButton.js"></script> |
|
4 |
|
5 <script type="text/javascript"> |
|
6 |
|
7 // Do any snippet initialization in a handler for the chrome.loadComplete signal. |
|
8 // Note that chrome may not be fully initialized when the html <body onload> event |
|
9 // is invoked, whereas chrome initialization is guaranteed to be complete when |
|
10 // this signal is invoked. |
|
11 |
|
12 function onChromeComplete() { |
|
13 window.snippets.BottomChromeId.setVisibilityAnimator("G_VISIBILITY_SLIDE_ANIMATOR"); |
|
14 window.snippets.TopChromeId.setVisibilityAnimator("G_VISIBILITY_FADE_ANIMATOR"); |
|
15 |
|
16 |
|
17 // Attach buttons to the underlying QActions. |
|
18 new ActionButton("backButton", |
|
19 "images/backArrow.png", |
|
20 "images/backArrowDown.png", |
|
21 "images/backArrowDisabled.png", |
|
22 window.pageController.actions.back); |
|
23 new ActionButton("forwardButton", |
|
24 "images/forwardArrow.png", |
|
25 "images/forwardArrowDown.png", |
|
26 "images/forwardArrowDisabled.png", |
|
27 window.pageController.actions.forward); |
|
28 new ActionButton("stopButton", |
|
29 "images/stop.png", |
|
30 "images/stopDown.png", |
|
31 "images/stopDisabled.png", |
|
32 window.pageController.actions.stop); |
|
33 new ActionButton("reloadButton", |
|
34 "images/reload.png", |
|
35 "images/reloadDown.png", |
|
36 "images/reloadDisabled.png", |
|
37 window.pageController.actions.reload); |
|
38 new ActionButton("zoomInButton", |
|
39 "images/zoomIn.png", |
|
40 "images/zoomInDown.png", |
|
41 "images/zoomInDisabled.png", |
|
42 window.webView.actions.zoomIn); |
|
43 new ActionButton("zoomOutButton", |
|
44 "images/zoomOut.png", |
|
45 "images/zoomOutDown.png", |
|
46 "images/zoomOutDisabled.png", |
|
47 window.webView.actions.zoomOut); |
|
48 } |
|
49 |
|
50 window.chrome.loadComplete.connect( |
|
51 function(){ |
|
52 onChromeComplete(); |
|
53 } |
|
54 ); |
|
55 |
|
56 // Functions used by the settings pop up chrome snippet |
|
57 |
|
58 function newStyle(style){ |
|
59 //alert("New Style: " + style); |
|
60 var styleLink = document.getElementById("CSSLink"); |
|
61 //alert (styleLink); |
|
62 styleLink.href = style; |
|
63 window.snippets.SettingsChromeId.toggleVisibility(); |
|
64 } |
|
65 |
|
66 function chromeSelect(){ |
|
67 var p = document.getElementsByName("ChromeSelection"); |
|
68 for(i = 0; i < p.length; i ++){ |
|
69 if(p[i].checked == true){ |
|
70 |
|
71 return p[i].value; |
|
72 } |
|
73 } |
|
74 } |
|
75 |
|
76 function styleSelect() { |
|
77 var p = document.getElementsByName("StyleSelection"); |
|
78 for(i = 0; i < p.length; i ++){ |
|
79 if(p[i].checked == true){ |
|
80 return p[i].value; |
|
81 } |
|
82 } |
|
83 } |
|
84 |
|
85 // Functions used by the page info flip chrome |
|
86 |
|
87 var pageInfoShowing = false; |
|
88 |
|
89 function flipPageInfo() { |
|
90 if(!pageInfoShowing){ |
|
91 document.getElementById("pageInfo_UrlId").value = window.pageController.currentDocUrl; |
|
92 document.getElementById("pageInfo_TitleId").value = window.pageController.currentDocTitle; |
|
93 window.chrome.flipFromCurrentView("PageInfoId"); |
|
94 pageInfoShowing = true; |
|
95 } |
|
96 else { |
|
97 window.chrome.flipToCurrentView("PageInfoId"); |
|
98 pageInfoShowing = false; |
|
99 } |
|
100 } |
|
101 |
|
102 // Functions to instantiate views |
|
103 |
|
104 function showGoAnywhere() { |
|
105 window.viewManager.showContent("goAnywhereView"); |
|
106 window.viewManager.goAnywhereView.setPosition(40, 40); |
|
107 window.viewManager.goAnywhereView.done.connect( |
|
108 function() { |
|
109 window.viewManager.showContent("webView"); |
|
110 } |
|
111 ); |
|
112 } |
|
113 |
|
114 function showHistory() { |
|
115 window.chrome.alert("handleLoadStart"); |
|
116 window.viewManager.showContent("historyView"); |
|
117 window.viewManager.historyView.setPosition(40, 40); |
|
118 window.viewManager.historyView.done.connect( |
|
119 function() { |
|
120 window.viewManager.showContent("webView"); |
|
121 } |
|
122 ); |
|
123 } |
|
124 |
|
125 // This function is for highlighting text in the go to entry |
|
126 function selectAll(el) |
|
127 { |
|
128 el.select(); |
|
129 } |
|
130 |
|
131 // Add an extra button in landscape mode |
|
132 |
|
133 function handleOrientation(orientation) { |
|
134 if(orientation == "landscape"){ |
|
135 document.getElementById("StarButtonId").style.display = "inline"; |
|
136 } |
|
137 else{ |
|
138 document.getElementById("StarButtonId").style.display = "none"; |
|
139 } |
|
140 } |
|
141 |
|
142 window.chrome.onDisplayModeChanged.connect( |
|
143 function(orientation){ |
|
144 // handleOrientation(orientation); |
|
145 } |
|
146 ); |
|
147 |
|
148 // Functions to animate the load progress bar |
|
149 |
|
150 window.pageController.loadStarted.connect( |
|
151 function() { |
|
152 window.chrome.alert("handleLoadStart"); |
|
153 document.getElementById("PBar").style.width = "0%"; |
|
154 } |
|
155 ); |
|
156 |
|
157 window.pageController.loadProgress.connect( |
|
158 function(percent) { |
|
159 var parentWidth = document.getElementById("PBarWrapper").offsetWidth; |
|
160 document.getElementById("PBar").style.width = (parentWidth * percent)/100 + "px"; |
|
161 } |
|
162 ); |
|
163 |
|
164 window.pageController.loadFinished.connect( |
|
165 function(ok) { |
|
166 //window.chrome.alert("handleLoadFinished: " + ok); |
|
167 //onChromeComplete(); |
|
168 document.getElementById("PBar").style.width = "0%"; |
|
169 } |
|
170 ); |
|
171 |
|
172 // Update the url entry box with current url |
|
173 |
|
174 window.pageController.currentPageUrlChanged.connect( |
|
175 function(url){ |
|
176 document.getElementById("urlBox").value = url; |
|
177 } |
|
178 ); |
|
179 |
|
180 window.pageController.networkRequestError.connect( |
|
181 function(reply) { |
|
182 window.chrome.alert("networkRequestError: " + reply.error()); |
|
183 } |
|
184 ); |
|
185 |
|
186 window.pageController.titleChanged.connect( |
|
187 function(title) { |
|
188 // TBD |
|
189 } |
|
190 ); |
|
191 |
|
192 </script> |
|
193 |
|
194 <link rel="stylesheet" id = "CSSLink" type="text/css" href="css/chromeStyleBlack.css" /> |
|
195 </head> |
|
196 |
|
197 <body onload="window.pageController.currentLoad('file:///C:/data/Others/chrome/demochrome/static.html');"> |
|
198 <div class ="InitialChrome"> |
|
199 <div class = "GinebraSnippet" id="TopChromeId" data-GinebraVisible="true" data-GinebraAnchor="AnchorTop"> |
|
200 <form name = "gotoUrlForm"> |
|
201 <span id="PBarWrapper" class="ProgressBarWrapper" style="width: 260px; position: absolute; top: 3px; left:4px; height:20px"> |
|
202 <span id="PBar" class="ProgressBar" style="position:absolute; left: 1px; height: 18px;"> |
|
203 </span> |
|
204 <input type ="text" |
|
205 class = "Text" |
|
206 id = "urlBox" |
|
207 name = "textBox" |
|
208 style = "position: absolute; width: 260px; height: 18px" |
|
209 value="http://www.google.com/webhp?hl=en&output=html" |
|
210 onFocus="selectAll(this); return false;" |
|
211 onMouseUp="return false;"/> |
|
212 </span> |
|
213 <span style="position: absolute; left: 270px; display: inline"> |
|
214 <input type = "button" class="Button" value="Go" style="display: inline" |
|
215 onclick=" window.pageController.currentLoad(document.gotoUrlForm.textBox.value)"/> |
|
216 <input type = "button" class="Button" value="Min" style="display: inline" |
|
217 onclick = "window.snippets.BottomChromeId.toggleVisibility()"/> |
|
218 </span> |
|
219 </form> |
|
220 </div> |
|
221 |
|
222 <div class = "GinebraSnippet" id="BottomChromeId" name="BottomChrome" data-GinebraVisible="true" data-GinebraAnchor="AnchorBottom"> |
|
223 <img id="backButton" src="images/backArrow.png" align="center" |
|
224 style="width: 18px" class="ButtonImage" |
|
225 onclick="window.pageController.actions.back.trigger()"/> |
|
226 <img id="forwardButton" src="images/forwardArrow.png" align="center" |
|
227 style="width: 18px" class="ButtonImage"/> |
|
228 <img id="stopButton" src="images/stop.png" align="center" |
|
229 style="width: 18px" class="ButtonImage"/> |
|
230 <img id="reloadButton" src="images/reload.png" align="center" |
|
231 style="width: 20px" class="ButtonImage"/> |
|
232 <img src="./images/history.png" align="center" class="ButtonImage" onclick="showHistory()"/> |
|
233 <img id="zoomInButton" src="images/zoomIn.png" align="center" |
|
234 style="width: 20px" class="ButtonImage"/> |
|
235 <img id="zoomOutButton" src="images/zoomOut.png" align="center" |
|
236 style="width: 20px" class="ButtonImage"/> |
|
237 <img src="./images/info.png" align="center" style="width: 20px" class="ButtonImage" onclick="flipPageInfo()"/> |
|
238 <img src="images/star.png" align="center" style="width: 20px" class="ButtonImage" onclick="showGoAnywhere()"/> |
|
239 <img src="./images/wrench_icon.jpg" align="center" class="ButtonImage" onclick="window.snippets.SettingsChromeId.toggleVisibility()"/> |
|
240 </div> |
|
241 |
|
242 <div class = "GinebraSnippet" id="PageInfoId"> |
|
243 <div class = "PageInfoInner"> |
|
244 <form> |
|
245 Title: <input id="pageInfo_TitleId" type="text"></br> |
|
246 URL: <input id="pageInfo_UrlId" type="text"></br> |
|
247 Text Language: <input id="language" type="text"></br> |
|
248 </form> |
|
249 <div align="right" style="margin-right: 20px"> |
|
250 <input type = "button" class="Button" value="OK" onclick="flipPageInfo()"/> |
|
251 </div> |
|
252 </div> |
|
253 </div> |
|
254 |
|
255 |
|
256 <div class = "GinebraSnippet" id="SettingsChromeId" data-GinebraAnchor="AnchorCenter"> |
|
257 |
|
258 <h3>Chrome settings</h3> |
|
259 <hr/> |
|
260 Chrome: |
|
261 <br/> |
|
262 Simple |
|
263 <input type ="radio" |
|
264 checked = "checked" |
|
265 name = "ChromeSelection" |
|
266 value="s60-chrome.html"/> |
|
267 |
|
268 <button type="button" class="Button" onclick="window.chrome.loadChrome('file:///C:/data/Others/chrome/' + chromeSelect());">Update</button> |
|
269 |
|
270 <br/> |
|
271 Veggie |
|
272 <input type ="radio" |
|
273 name = "ChromeSelection" |
|
274 value="s60-veggie-chrome.html"/> |
|
275 <hr/> |
|
276 Style: |
|
277 <br/> |
|
278 Simple |
|
279 <input type ="radio" |
|
280 name = "StyleSelection" |
|
281 checked = "checked" |
|
282 value="chromeStyleFlat.css"/> |
|
283 <button type="button" class="Button" onclick="newStyle('css/' + styleSelect());">Update</button> |
|
284 |
|
285 <br/> |
|
286 Curved |
|
287 <input type ="radio" |
|
288 name = "StyleSelection" |
|
289 value="chromeStyleBlack.css"/> |
|
290 <br/> |
|
291 </div> |
|
292 </body> |
|
293 </html> |
|