1 <html> |
|
2 <head> |
|
3 <script type="text/javascript" class="GinebraCacheable"> |
|
4 |
|
5 function showObj(obj) |
|
6 { |
|
7 window.app.debug("---showObj " + obj + "---"); |
|
8 for(i in obj){ |
|
9 window.app.debug(" " + i + ": " + obj[i]); |
|
10 } |
|
11 window.app.debug("---showObj " + "done---"); |
|
12 } |
|
13 </script> |
|
14 |
|
15 <script type="text/javascript"> |
|
16 |
|
17 function showExplorerPage() |
|
18 { |
|
19 if(!window.views.WebView.currentPageIsSuperPage()) { |
|
20 // Display the explorer superpage. |
|
21 |
|
22 if(window.views.WebView.SpecialPage == undefined) { |
|
23 // Doesn't exist, create it. |
|
24 window.views.WebView.createSuperPage("SuperPage", true); |
|
25 } |
|
26 window.views.WebView.SuperPage.load("c:/data/Others/ginebra2/chrome/ChromeExplorer/Explorer.html"); |
|
27 //window.views.WebView.SuperPage.load("./chrome/ChromeExplorer/Explorer.html"); |
|
28 |
|
29 // Show it. |
|
30 window.views.WebView.showSuperPage("SuperPage"); |
|
31 } |
|
32 else { |
|
33 // Show the normal web page. |
|
34 window.views.WebView.showNormalPage(); |
|
35 } |
|
36 } |
|
37 |
|
38 var docTitle; |
|
39 |
|
40 function onTitleChanged(title){ |
|
41 docTitle = title; |
|
42 var titleWidth = chrome.width()/24; |
|
43 if(title.length > titleWidth) |
|
44 title=docTitle.substr(0,titleWidth) + "..."; |
|
45 document.getElementById("TitleText").innerHTML=title; |
|
46 } |
|
47 |
|
48 function onAspectChanged(aspect) |
|
49 { |
|
50 onTitleChanged(docTitle); |
|
51 } |
|
52 |
|
53 //function onProgress(p){ |
|
54 //document.getElementById("ProgressBar").style.width = p + "%"; |
|
55 //} |
|
56 |
|
57 function onLoadFinished(ok){ |
|
58 window.app.debug("onLoadFinished: " + ok); |
|
59 //window.snippets.NavSnippet.setVisible(false); |
|
60 window.snippets.ProgressSnippet.setVisible(false); |
|
61 document.getElementById("StopButton").innerHTML="<img src='Blank.png' class='GinebraCached' data-GinebraOnClick='Stop()'>"; |
|
62 //document.getElementById("ProgressBar").style.width= "0%"; |
|
63 anchorIcon(); |
|
64 } |
|
65 |
|
66 function onLoadStarted() { |
|
67 //Don't animate this transition since the animation will tend to stall when loading a slow page. |
|
68 //This should be better when threaded rendering is available from WebKit |
|
69 //window.snippets.NavSnippet.setVisible(true); |
|
70 window.snippets.ProgressSnippet.setVisible(true); |
|
71 document.getElementById("StopButton").innerHTML="<img src='Stop.png' class='GinebraCached' data-GinebraOnClick='Stop()'>"; |
|
72 //document.getElementById("ProgressBar").style.width= "0%"; |
|
73 } |
|
74 |
|
75 function onUrlChanged(url) { |
|
76 document.getElementById("urlBox").value=url; |
|
77 } |
|
78 |
|
79 function onSecureConnection(secure) { |
|
80 if(secure) |
|
81 document.getElementById("Icons").innerHTML="<img src='Key.png'>"; |
|
82 else |
|
83 document.getElementById("Icons").innerHTML="<img src='Blank.png'>"; |
|
84 } |
|
85 |
|
86 |
|
87 function onSymbianCR() |
|
88 { |
|
89 //alert("Symbian CR"); |
|
90 //if(document.getElementById("urlBox").hasFocus){ |
|
91 window.views.WebView.loadUrltoCurrentPage(document.getElementById("urlBox").value); |
|
92 //} |
|
93 } |
|
94 |
|
95 var backEnabled = false; |
|
96 |
|
97 function onBackEnabled(enabled) |
|
98 { |
|
99 backEnabled = enabled; |
|
100 if(backEnabled) |
|
101 window.snippets.BackSnippet.setEffect("Shadow"); |
|
102 else |
|
103 window.snippets.BackSnippet.setEffect("Blur"); |
|
104 } |
|
105 |
|
106 var forwardEnabled = false; |
|
107 |
|
108 function onForwardEnabled(enabled) |
|
109 { |
|
110 forwardEnabled = enabled; |
|
111 if(forwardEnabled) |
|
112 window.snippets.ForwardSnippet.setEffect("Shadow"); |
|
113 else |
|
114 window.snippets.ForwardSnippet.setEffect("Blur"); |
|
115 } |
|
116 |
|
117 function anchorIcon(){ |
|
118 var pos = window.snippets.StatusBar.childGeometry("TitleCell"); |
|
119 window.snippets.IconSnippet.anchorTo("StatusBar", pos.x, pos.y + 10); |
|
120 window.snippets.IconSnippet.setVisible("true"); |
|
121 } |
|
122 |
|
123 function onContextMenu(x,y) |
|
124 { |
|
125 window.snippets.ContextMenu.toggleVisibility(); |
|
126 } |
|
127 |
|
128 function onChromeComplete(){ |
|
129 window.views.WebView.titleChanged.connect(onTitleChanged); |
|
130 //window.views.WebView.loadProgress.connect(onProgress); |
|
131 window.views.WebView.loadStarted.connect(onLoadStarted); |
|
132 window.views.WebView.loadFinished.connect(onLoadFinished); |
|
133 window.views.WebView.urlChanged.connect(onUrlChanged); |
|
134 window.views.WebView.secureConnection.connect(onSecureConnection); |
|
135 window.views.WebView.backEnabled.connect(onBackEnabled); |
|
136 window.views.WebView.forwardEnabled.connect(onForwardEnabled); |
|
137 window.chrome.aspectChanged.connect(onAspectChanged); |
|
138 //window.snippets.NavSnippet.setVisibilityAnimator("G_VISIBILITY_FADE_ANIMATOR"); |
|
139 window.snippets.NavSnippet.anchorToView("top"); |
|
140 window.snippets.ProgressSnippet.anchorTo("NavSnippet",5,22) |
|
141 //window.snippets.ProgressSnippet.setOpacity(0.30); |
|
142 //window.snippets.ButtonContainer.setEffect("Shadow"); |
|
143 window.snippets.ZoomSnippet.setEffect("Shadow"); |
|
144 window.snippets.BackSnippet.setEffect("Blur"); |
|
145 window.snippets.ForwardSnippet.setEffect("Blur"); |
|
146 window.snippets.HandSnippet.setEffect("Shadow"); |
|
147 window.snippets.HideSnippet.setEffect("Shadow"); |
|
148 window.chrome.symbianCarriageReturn.connect(onSymbianCR); |
|
149 window.snippets.HandSnippet.contextMenuEvent.connect(onContextMenu); |
|
150 window.snippets.ContextMenu.setEffect("Shadow"); |
|
151 //window.snippets.ScrollerSnippet.setEffect("Blur"); |
|
152 //window.chrome.chromeInitialized(); |
|
153 } |
|
154 |
|
155 function onSubmitUrl(){ |
|
156 window.views.WebView.loadUrltoCurrentPage(document.getElementById("urlBox").value); |
|
157 return false; //Disable default submit action |
|
158 } |
|
159 |
|
160 var statusBarOffset=0; |
|
161 |
|
162 function toggleStatusBarOffset() |
|
163 { |
|
164 if(statusBarOffset==0) |
|
165 statusBarOffset=20; |
|
166 else |
|
167 statusBarOffset=0; |
|
168 |
|
169 window.snippets.StatusBar.setAnchorOffset(statusBarOffset); |
|
170 |
|
171 } |
|
172 |
|
173 window.chrome.chromeComplete.connect(onChromeComplete) |
|
174 |
|
175 </script> |
|
176 <style type="text/css"> |
|
177 /* Make chrome items appear to be non-selectable */ |
|
178 ::selection { |
|
179 background: transparent; |
|
180 color: inherit; |
|
181 } |
|
182 </style> |
|
183 |
|
184 </head> |
|
185 <body leftmargin="0" topmargin="0" onload="window.app.debug('body onload')"> |
|
186 |
|
187 <div class="GinebraSnippet" id="StatusBar" data-GinebraVisible="true" data-GinebraAnchor="AnchorTop" style="width:100%; height: 42px; background: -webkit-gradient(linear, left top, left bottom, from(#977), to(#232), color-stop(0.1, #232), color-stop(0.9, #766)); color: White"> |
|
188 <table width="100%"> |
|
189 <tr> |
|
190 <td align="left" valign="center"> |
|
191 <img id="ExplorerButton" src="Home.png" height="32px" width="32px" onClick="showExplorerPage()"/> |
|
192 </td> |
|
193 <td id="Icons" align="left" valign="center" style="width:100px"> |
|
194 <img src="Key.png"> |
|
195 </td> |
|
196 <td id="IconCell" align="center" valign="center"> |
|
197 </td> |
|
198 <td id="TitleCell" align="center" valign="center" style="color:White"> |
|
199 <span id="TitleText" style="font-size: 130%"> |
|
200 </span> |
|
201 </td> |
|
202 <td align="right" valign="center"> |
|
203 <!--img id="ExitButton" src="Exit.png" class="GinebraCached" data-GinebraOnClick="App.quit()"/--> |
|
204 <img id="ExitButton" src="OnOff.png" onClick="window.app.quit()"/> |
|
205 </td> |
|
206 </tr> |
|
207 </table> |
|
208 </div> |
|
209 |
|
210 <div class="GinebraSnippet" id="IconSnippet" data-GinebraVisible="false" data-GinebraNativeClass="GreenChromeSnippet" style="width:20px; height:20px"> |
|
211 </div> |
|
212 |
|
213 <div class="GinebraSnippet" id="NavSnippet" data-GinebraVisible="true" style="width: 100%; height: 42px; background: -webkit-gradient(linear, left top, left bottom, from(#977), to(#232), color-stop(0.1, #232), color-stop(0.9, #766))"> |
|
214 |
|
215 <form onSubmit="return onSubmitUrl();"> |
|
216 <table style="width:100%"> |
|
217 <tr> |
|
218 <td style="width:90%" valign="center"> |
|
219 <span style="position:relative;"> |
|
220 <input type="text" |
|
221 class="Text" |
|
222 id="urlBox" |
|
223 name="textBox" |
|
224 style="width:100%; height:32px; background-color: yellow; border-style:none" |
|
225 value="http://www.google.com/" |
|
226 onMouseUp="return false;"/> |
|
227 </span> |
|
228 </td> |
|
229 <td id="GoButton"> |
|
230 <img src="Go.png" onClick="onSubmitUrl()"> |
|
231 </td> |
|
232 <td id="StopButton"> |
|
233 <img src="Stop.png" class="GinebraCached" data-GinebraOnClick="Stop"> |
|
234 </td> |
|
235 </tr> |
|
236 </table> |
|
237 </form> |
|
238 </div> |
|
239 |
|
240 <!--div class = "GinebraSnippet" id="ActionSnippet" data-GinebraVisible="true" data-GinebraAnchor="AnchorBottom" style="width: 100%; height: 42px; background: -webkit-gradient(linear, left top, left bottom, from(#977), to(#232), color-stop(0.1, #232), color-stop(0.9, #766))"> |
|
241 <table style="width:100%"> |
|
242 <tr> |
|
243 <td style="width:15%" align="left" valign="center"> |
|
244 <img src="Home.png" id="HomeButton" onmousedown="views.WebView.toggleZoom()" onmouseup="views.WebView.stopZoom()"> |
|
245 </td> |
|
246 <td style="width:35%" align="center" valign="center"> |
|
247 <img src="Back.png" class="GinebraCached" id="BackButton" data-GinebraOnClick="views.WebView.back()"> |
|
248 </td> |
|
249 <td style="width:35%" align="center" valign="center"> |
|
250 <img src="Hand.png" class="GinebraCached" id="UrlButton" data-GinebraOnClick="snippets.NavSnippet.toggleVisibility();snippets.NavSnippet.grabFocus();"> |
|
251 </td> |
|
252 <td style="width:15%" align="right" valign="center"> |
|
253 <img src="Minimize.png" class="GinebraCached" id="HideButton" data-GinebraOnClick="snippets.MaximizeSnippet.setOpacity(0.5);snippets.MaximizeSnippet.toggleVisibility();snippets.ActionSnippet.toggleVisibility(); snippets.StatusBar.toggleVisibility()"> |
|
254 </td> |
|
255 </tr> |
|
256 </table> |
|
257 </div--> |
|
258 |
|
259 <div class = "GinebraSnippet" id="MaximizeSnippet" data-GinebraVisible="false" data-GinebraHidesContent="true" data-GinebraAnchor="AnchorBottomRight" style="width: 42px; height: 42px; background-color: gray;"> |
|
260 <img src="Maximize.png" style="position:relative;top:4px;left:4px" id="HideButton" onclick="snippets.MaximizeSnippet.toggleVisibility();snippets.ButtonContainer.toggleVisibility(); snippets.StatusBar.toggleVisibility()"> |
|
261 </div> |
|
262 |
|
263 <!--ProgressBar snippet is a native snippet that updates based on the content loading progress. Position on top of the URL entry bar --> |
|
264 |
|
265 <div class = "GinebraSnippet" id="ProgressSnippet" data-GinebraVisible="true" data-GinebraHidesContent="true" data-GinebraNativeClass="ProgressSnippet" style="width:80%; height:10px; color:red; opacity:0.5"> |
|
266 </div> |
|
267 |
|
268 <div class = "GinebraSnippet" id = "ScrollerSnippet" data-GinebraVisible = "true" data-GinebraAnchor = "AnchorCenter" data-GinebraNativeClass = "ScrollZoomWidget" style="width:40px; height:40px"> |
|
269 Snippet C |
|
270 </div> |
|
271 |
|
272 <div class="GinebraSnippet" id="ButtonContainer" data-GinebraVisible="false" data-GinebraHidesContent="true" data-GinebraAnchor="AnchorBottom" data-GinebraContainer="true" style="width:100%;height:50px"> |
|
273 |
|
274 <div class="GinebraSnippet" id="ZoomSnippet" data-GinebraVisible="true" style="width:45px; height: 45px; background-color:transparent"> |
|
275 <img src="ZoomButtonW.png" id="ZoomButton" onmousedown="views.WebView.toggleZoom();window.snippets.ZoomSnippet.setEffect('Glow')" onmouseup="views.WebView.stopZoom();window.snippets.ZoomSnippet.setEffect('Shadow')"/> |
|
276 </div> |
|
277 |
|
278 <div class="GinebraSnippet" id="BackSnippet" data-GinebraVisible="true" style="width:45px; height: 45px; background-color:transparent"> |
|
279 <img src="BackButtonW.png" class="GinebraCached" id="BackButton" data-GinebraOnClick="Back" onmousedown="if(backEnabled) window.snippets.BackSnippet.setEffect('Glow')" onmouseup="onBackEnabled(backEnabled)"/> |
|
280 </div> |
|
281 |
|
282 <div class="GinebraSnippet" id="ForwardSnippet" data-GinebraVisible="true" style="width:45px; height: 45px; background-color:transparent"> |
|
283 <img src="ForwardButtonW.png" class="GinebraCached" id="ForwardButton" data-GinebraOnClick="Forward" onmousedown="if(forwardEnabled) window.snippets.ForwardSnippet.setEffect('Glow')" onmouseup="onForwardEnabled(forwardEnabled)"/> |
|
284 </div> |
|
285 |
|
286 <div class="GinebraSnippet" id="HandSnippet" data-GinebraVisible="true" style="width:45px; height: 45px"> |
|
287 <!--img src="HandButton.png" class="GinebraCached" id="UrlButton" data-GinebraOnClick="snippets.NavSnippet.toggleVisibility();snippets.ProgressSnippet.toggleVisibility();snippets.NavSnippet.grabFocus();"/--> |
|
288 <img src="HandButtonW.png" id="UrlButton" onmousedown="window.snippets.HandSnippet.setEffect('Glow'); window.chrome." onmouseup="window.snippets.HandSnippet.setEffect('Shadow');toggleStatusBarOffset();"/> |
|
289 </div> |
|
290 <div class="GinebraSnippet" id="HideSnippet" data-GinebraVisible="true" style="width:45px; height: 45px"> |
|
291 <!--img src="HideButton.png" class="GinebraCached" id="HideButton" data-GinebraOnClick="snippets.MaximizeSnippet.setOpacity(0.5);snippets.MaximizeSnippet.toggleVisibility();snippets.ButtonContainer.toggleVisibility(); snippets.StatusBar.toggleVisibility(); snippets.ProgressSnippet.moveBy(0,-42)"/--> |
|
292 <img src="HideButtonW.png" id="HideButton" onClick="snippets.MaximizeSnippet.setOpacity(0.5);snippets.MaximizeSnippet.toggleVisibility();snippets.ButtonContainer.toggleVisibility(); snippets.StatusBar.toggleVisibility();"/> |
|
293 </div> |
|
294 </div> |
|
295 |
|
296 |
|
297 <div class = "GinebraSnippet" id="TextEditor" data-GinebraVisible="true" data-GinebraHidesContent="true" data-GinebraAnchor="AnchorCenter" data-GinebraNativeClass="TextEditSnippet" style="width:80%; height:40px; color:slateblue; background-color:cornflowerblue; padding:5px; border:1px solid transparent;"> |
|
298 </div> |
|
299 |
|
300 <div class="GinebraSnippet" id="ContextMenu" data-GinebraVisible="false" data-GinebraAnchor="AnchorCenter" style="background-color:CornflowerBlue;width:100px; height:200px"> |
|
301 A context menu. |
|
302 </div> |
|
303 |
|
304 </body> |
|
305 </html> |
|
306 |
|