|
1 <html> |
|
2 <head> |
|
3 <script type="text/javascript"> |
|
4 function loadToMainWindow(url){ |
|
5 // alert("Loading:" + url); |
|
6 window.pageController.currentLoad(url); |
|
7 } |
|
8 |
|
9 |
|
10 function newStyle(style){ |
|
11 var styleLink = document.getElementById("CSSLink"); |
|
12 styleLink.href = style; |
|
13 } |
|
14 |
|
15 |
|
16 var settingsPopUp = false; |
|
17 |
|
18 function toggleSettings() |
|
19 { |
|
20 if(settingsPopUp){ |
|
21 window.chrome.toggleVisibility("SettingsChromeId"); |
|
22 } |
|
23 else { |
|
24 window.chrome.show("SettingsChromeId", 10, 120); |
|
25 settingsPopUp = true; |
|
26 } |
|
27 } |
|
28 |
|
29 |
|
30 var pageInfoShowing = false; |
|
31 |
|
32 function showPageInfo() { |
|
33 //window.chrome.setBackgroundColor(255,255,255); |
|
34 //alert("showPageInfo"); |
|
35 if(!pageInfoShowing){ |
|
36 document.getElementById("pageInfo_UrlId").value = window.pageController.currentDocUrl; |
|
37 document.getElementById("pageInfo_TitleId").value = window.pageController.currentDocTitle; |
|
38 window.chrome.showPageInfo(); |
|
39 pageInfoShowing = true; |
|
40 } |
|
41 else { |
|
42 window.chrome.hidePageInfo(); |
|
43 pageInfoShowing = false; |
|
44 } |
|
45 } |
|
46 |
|
47 function chromeSelect(){ |
|
48 var p = document.getElementsByName("ChromeSelection"); |
|
49 for(i = 0; i < p.length; i++){ |
|
50 if(p[i].checked == true){ |
|
51 return p[i].value; |
|
52 } |
|
53 } |
|
54 } |
|
55 |
|
56 function animatorSelect(){ |
|
57 var p = document.getElementsByName("AnimatorSelection"); |
|
58 for(i = 0; i < p.length; i++){ |
|
59 if(p[i].checked == true){ |
|
60 return p[i].value; |
|
61 } |
|
62 } |
|
63 } |
|
64 |
|
65 |
|
66 function onLoad(){ |
|
67 window.chrome.setBackgroundColor(0xDD,0x66,0x33); |
|
68 window.chrome.setAnchor("TopChromeId", "AnchorTop"); |
|
69 window.chrome.setAnchor("BottomChromeId", "AnchorBottom"); |
|
70 window.chrome.setVisibilityAnimator("BottomChromeId", "G_VISIBILITY_FLYOUT_ANIMATOR"); |
|
71 window.chrome.setAttentionAnimator("Button6", "G_ATTENTION_BOUNCE_ANIMATOR"); |
|
72 } |
|
73 |
|
74 window.pageController.loadStarted.connect( |
|
75 function() { |
|
76 window.chrome.alert("handleLoadStart"); |
|
77 document.getElementById("PBar").style.width = "0%"; |
|
78 } |
|
79 ); |
|
80 window.pageController.loadProgress.connect( |
|
81 function(percent) { |
|
82 var parentWidth = document.getElementById("PBarWrapper").offsetWidth; |
|
83 document.getElementById("PBar").style.width = (parentWidth * percent)/100 + "px"; |
|
84 } |
|
85 ); |
|
86 window.pageController.loadFinished.connect( |
|
87 function(ok) { |
|
88 window.chrome.alert("handleLoadFinished: " + ok); |
|
89 document.getElementById("PBar").style.width = "0%"; |
|
90 } |
|
91 ); |
|
92 window.pageController.networkRequestError.connect( |
|
93 function(reply) { |
|
94 window.chrome.alert("onNetworkRequestError: " + reply.error()); |
|
95 } |
|
96 ); |
|
97 window.pageController.titleChanged.connect( |
|
98 function(title) { |
|
99 // TBD |
|
100 } |
|
101 ); |
|
102 window.pageController.currentPageUrlChanged.connect( |
|
103 function(url){ |
|
104 document.getElementById("urlBox").value = url; |
|
105 window.chrome.toggleAttention("Button6"); |
|
106 } |
|
107 ); |
|
108 |
|
109 </script> |
|
110 |
|
111 <link id="CSSLink" rel="stylesheet" type="text/css" href="css/chromeStyleTransparent.css" /> |
|
112 |
|
113 </head> |
|
114 <body onload="onLoad();"> |
|
115 <div class ="InitialChrome"> |
|
116 <div class = "TopChrome" id="TopChromeId"> |
|
117 <form name = "gotoUrlForm"> |
|
118 <span style="width: 300px; height: 24px; position: absolute; left: 4px"> |
|
119 <span id="PBarWrapper" class="ProgressBarWrapper" style="position: absolute; top: 3px; height:24px"> |
|
120 <span id="PBar" class="ProgressBar" style="position:absolute; left: 1px; height: 20px;"> |
|
121 </span> |
|
122 <span> |
|
123 <input type ="text" |
|
124 class = "Text" |
|
125 id = "urlBox" |
|
126 name = "textBox" |
|
127 style = "position: absolute; width: 300px; height: 18px" |
|
128 value="http://news.google.com"/> |
|
129 </span> |
|
130 |
|
131 <image src = "./images/carrot.png" height="36px" width="36px" style = "top: -3px; position: relative; left: 280px;" onclick="loadToMainWindow(document.gotoUrlForm.textBox.value)"/> |
|
132 |
|
133 <image src = "./images/tomato.png" height="36px" width="36px" |
|
134 style = "top: -3px; position: relative; left: 280px;" onclick = "window.chrome.toggleVisibility('BottomChromeId');"/> |
|
135 </span> |
|
136 </span> |
|
137 </form> |
|
138 </div> |
|
139 |
|
140 <div class = "BottomChrome" id="BottomChromeId"> |
|
141 <img id="Button1" name="ChromeRowButton" src="./images/lettuce.png" height="36px" width="36px" style="position: relative; left:30px" onclick="window.pageController.currentBack()"/> |
|
142 <img id="Button2" name="ChromeRowButton" src="./images/onion.png" height="36px" width="36px" style="position: relative; left:40px" onclick="window.pageController.currentForward()"/> |
|
143 <img id="Button3" name="ChromeRowButton" src="./images/corn.png" height="36px" width="36px" style="position: relative; left:50px" onclick="window.pageController.currentStop()"/> |
|
144 <img id="Button4" name="ChromeRowButton" src="./images/cuke.png" height="36px" width="36px" style="position: relative; left:60px" onclick="window.pageController.currentReload()"/> |
|
145 <img id="Button5" name="ChromeRowButton" src="./images/pepper.png" height="36px" width="36px" style="position: relative; left:70px" onclick="toggleSettings()"> |
|
146 <img id="Button6" name="ChromeRowButton" src="./images/tomato.png" height="36px" width="36px" style="position: relative; left:80px" onclick="showPageInfo()"/> |
|
147 </div> |
|
148 </div> |
|
149 |
|
150 |
|
151 <div class = "PageInfo" id="PageInfoId"> |
|
152 <form> |
|
153 Title: <input id="pageInfo_TitleId" type="text"></br> |
|
154 URL: <input id="pageInfo_UrlId" type="text"></br> |
|
155 Text Language: <input id="language" type="text"></br> |
|
156 </form> |
|
157 <input type = "button" class="Button" value="OK" onclick="window.chrome.hidePageInfo()"/> |
|
158 </div> |
|
159 |
|
160 |
|
161 <div class = "PopChrome" id="SettingsChromeId"> |
|
162 <h3>Chrome settings</h3> |
|
163 <hr/> |
|
164 Chrome: |
|
165 <br/> |
|
166 Simple |
|
167 <input type ="radio" |
|
168 name = "ChromeSelection" |
|
169 value="chrome.html"/> |
|
170 <button type="button" class="Button" onclick="window.chrome.loadChrome('chrome/' + chromeSelect());">Update</button> |
|
171 <br/> |
|
172 Veggie |
|
173 <input type ="radio" |
|
174 checked = "checked" |
|
175 name = "ChromeSelection" |
|
176 value="veggie-chrome.html"/> |
|
177 |
|
178 <hr/> |
|
179 Animations: |
|
180 <br/> |
|
181 Fadeout |
|
182 <input type ="radio" |
|
183 checked = "checked" |
|
184 name = "AnimatorSelection" |
|
185 value="G_VISIBILITY_FADE_ANIMATOR"/> |
|
186 |
|
187 |
|
188 <button type="button" class="Button" onclick="window.chrome.setVisibilityAnimator('BottomChromeId', animatorSelect());toggleSettings()">Update</button> |
|
189 |
|
190 |
|
191 <br/> |
|
192 Flyout |
|
193 <input type ="radio" |
|
194 checked = "checked" |
|
195 name = "AnimatorSelection" |
|
196 value="G_VISIBILITY_FLYOUT_ANIMATOR"/> |
|
197 |
|
198 <br/> |
|
199 Malstrom |
|
200 <input type ="radio" |
|
201 name = "AnimatorSelection" |
|
202 value="G_VISIBILITY_MALSTROM_ANIMATOR"/> |
|
203 <hr/> |
|
204 |
|
205 |
|
206 </div> |
|
207 <div class = "PopChrome" id="PopChromeId2"> |
|
208 Other pop chrome content |
|
209 </div> |
|
210 |
|
211 </body> |
|
212 </html> |
|
213 |