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