ginebra/chrome/demochrome/chrome.html
changeset 0 1450b09d0cfd
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ginebra/chrome/demochrome/chrome.html	Tue May 04 12:39:35 2010 +0300
@@ -0,0 +1,329 @@
+<html>
+  <head>
+    <script type="text/javascript" src="../js/Bind.js"></script>
+    <script type="text/javascript" src="../js/ActionButton.js"></script>
+
+    <script type="text/javascript">
+      
+      function loadToMainWindow(url){
+         window.pageController.currentLoad(url);
+      }
+      
+      
+      function newStyle(style){
+         //alert("New Style: " + style);
+         var styleLink = document.getElementById("CSSLink");
+         //alert (styleLink);
+         styleLink.href = style;
+         window.chrome.toggleVisibility("SettingsChromeId");
+      }
+
+     
+      var topBar = false;
+
+      function topToggle()
+      {
+          if(topBar){
+              window.chrome.toggleVisibility("TopChromeId");
+          }
+          else {
+              window.chrome.setAnchor("TopChromeId", "AnchorTop");
+              window.chrome.show("TopChromeId", 0,0);
+              topBar = true;
+          }
+      }      
+     
+      var settingsPopUp = false;
+
+      function toggleSettings()
+      {
+          if(settingsPopUp){
+              window.chrome.toggleVisibility("SettingsChromeId");
+          }
+          else {
+              window.chrome.show("SettingsChromeId", 10,120);      
+              window.chrome.setAnchor("SettingsChromeId", "AnchorCenter");    
+              settingsPopUp = true;
+          }
+      }      
+ 
+      function onLoad() {
+         settingsPopUp = false;
+         // Load the emergency backup page.
+         loadToMainWindow("chrome/demochrome/static.html");
+         // Now load the real starting page.
+         loadToMainWindow("http://www.google.com");
+         window.chrome.setAnchor("TopChromeId", "AnchorTop");
+         window.chrome.setVisibilityAnimator("TopChromeId", "G_VISIBILITY_FADE_ANIMATOR");
+         window.chrome.setAnchor("BottomChromeId","AnchorBottom");
+         window.chrome.setVisibilityAnimator("BottomChromeId", "G_VISIBILITY_FADE_ANIMATOR");
+
+         // Attach buttons to the underlying QActions.
+         new ActionButton("backButton", 
+                      "images/backArrow.png", 
+                      "images/backArrowDown.png", 
+                      "images/backArrowDisabled.png", 
+                      window.pageController.actions.back);
+         new ActionButton("forwardButton", 
+                      "images/forwardArrow.png", 
+                      "images/forwardArrowDown.png", 
+                      "images/forwardArrowDisabled.png", 
+                      window.pageController.actions.forward);
+         new ActionButton("stopButton", 
+                      "images/stop.png", 
+                      "images/stopDown.png", 
+                      "images/stopDisabled.png", 
+                      window.pageController.actions.stop);
+         new ActionButton("reloadButton", 
+                      "images/reload.png", 
+                      "images/reloadDown.png", 
+                      "images/reloadDisabled.png", 
+                      window.pageController.actions.reload);
+         new ActionButton("zoomInButton",
+                          "images/zoomIn.png", 
+                          "images/zoomInDown.png", 
+                          "images/zoomInDisabled.png", 
+                          window.webView.actions.zoomIn);
+         new ActionButton("zoomOutButton", 
+                          "images/zoomOut.png", 
+                          "images/zoomOutDown.png", 
+                          "images/zoomOutDisabled.png", 
+                          window.webView.actions.zoomOut);
+      }
+      
+      
+      var pageInfoShowing = false;
+      
+      function flipPageInfo() {
+         if(!pageInfoShowing){
+            document.getElementById("pageInfo_UrlId").value = window.viewManager.pageController.currentDocUrl;
+            document.getElementById("pageInfo_TitleId").value = window.viewManager.pageController.currentDocTitle;
+            window.chrome.flipFromCurrentView("PageInfoId");
+            pageInfoShowing = true;
+         } else {
+            window.chrome.flipToCurrentView("PageInfoId");
+            pageInfoShowing = false;
+        }
+      }
+
+     function showGoAnywhere() {
+          window.viewManager.showContent("goAnywhereView");
+          window.viewManager.goAnywhereView.setPosition(40, 40);
+          window.viewManager.goAnywhereView.done.connect(
+              function() {
+                  window.viewManager.showContent("webView");
+              }
+          );
+      }
+      
+      function chromeSelect(){
+      var p = document.getElementsByName("ChromeSelection");
+      for(i = 0; i < p.length; i ++){
+          if(p[i].checked == true){
+            
+            return p[i].value;
+          }
+        }
+      }
+
+      function styleSelect() {
+        var p = document.getElementsByName("StyleSelection");
+        for(i = 0; i < p.length; i ++){
+          if(p[i].checked == true){
+            return p[i].value;
+          }
+        }
+      }
+
+      function HTML5Tests(){
+        var p = document.getElementsByClassName("TopChrome");
+        for(i = 0; i < p.length; i ++){
+            alert (p[i].getAttribute("data-Ginebra.Anchor"));
+          }
+      }
+
+      function showHistory() {
+          window.viewManager.showContent("historyView");
+//          window.viewManager.historyView.setPosition(40, 40);
+
+          window.chrome.hide("TopChromeId");
+          window.chrome.hide("BottomChromeId");
+          //topToggle();
+          //bottomToggle();
+          
+          window.viewManager.historyView.done.connect(
+              function() {
+                  window.chrome.show("TopChromeId");
+                  window.chrome.show("BottomChromeId");
+                  window.viewManager.showContent("webView");
+//                  window.viewManager.webView.setPosition(0, 0);
+                  //topToggle();
+                  //bottomToggle();
+              }
+          );
+      }
+
+      // This function is for highlighting text in the go to entry
+      function selectAll(el) 
+      { 
+             el.select(); 
+      } 
+
+
+      window.pageController.loadStarted.connect(
+        function() {
+        document.getElementById("PBar").style.width = "0%";
+        //topToggle();
+        }
+      );
+
+      window.pageController.loadProgress.connect(
+        function(percent) {
+         var parentWidth = document.getElementById("PBarWrapper").offsetWidth;
+         document.getElementById("PBar").style.width = (parentWidth * percent)/100 + "px";
+        }
+      );
+
+      window.pageController.loadFinished.connect(
+        function(ok) {
+        document.getElementById("PBar").style.width = "0%";
+        //topToggle();
+        }
+      );
+
+      window.pageController.networkRequestError.connect(
+        function(reply) {
+        window.chrome.alert("onNetworkRequestError: " + reply.error());
+        }
+      );
+
+      window.pageController.titleChanged.connect(
+        function(title) {
+        // TBD
+        }
+      );
+
+      window.pageController.partialUrlChanged.connect(
+        function(partialUrl) {
+        document.getElementById("urlBox").value = partialUrl;
+        }
+      );      
+
+      window.chrome.onDisplayModeChanged.connect(
+        function(orientation){
+          window.chrome.alert("onDisplayModeChanged: " + orientation);
+        }
+      );
+
+		window.chrome.loadComplete.connect(
+				function(){
+		        window.chrome.alert("loadComplete");
+		        onLoad();
+				}
+		);
+      
+    </script>
+
+    <link rel="stylesheet" id = "CSSLink" type="text/css" href="css/chromeStyleBlack.css" />
+  </head>
+
+  <body>
+    <div class ="InitialChrome">
+      <div class = "GinebraSnippet" id="TopChromeId" name="TopChrome" 
+           data-GinebraAnchor = "AnchorTop" data-GinebraVisible = "true"
+           style="width:100%">
+        <form name = "gotoUrlForm" style="width: 100%">
+          <span id="PBarWrapper" class="ProgressBarWrapper" style="position: absolute; top: 3px; left:4px; height:20px">
+                <span id="PBar" class="ProgressBar" style="position:absolute; left: 1px; height: 18px;">
+                </span>
+                <input type ="text"
+                   class = "Text"
+                   id = "urlBox"
+                   name = "textBox"
+                   style = "position: absolute; width: 260px; height: 16px"
+                   value="http://www.google.com/"/>
+          </span>
+          <span style="position: absolute; left: 270px; display: inline">
+                <input type = "button" class="Button" value="Go" style="display: inline"
+               onclick="loadToMainWindow(document.gotoUrlForm.textBox.value)"/>
+            <!--img src="images/stop.png" align="center" style="width: 18px" class="ButtonImage" onclick="window.webView.stop()"/-->
+                <input type = "button" class="Button" value="Min" style="display: inline"
+               onclick = "window.chrome.toggleVisibility('TopChromeId');window.chrome.toggleVisibility('BottomChromeId')"/>
+          </span>
+        </form>
+      </div>
+      <div class = "GinebraSnippet" id="BottomChromeId" name="BottomChrome" data-GinebraAnchor="AnchorBottom" data-ginebraVisible="true">
+        <span class="ButtonRow" style="width:100%">
+          <img id="backButton" src="images/backArrow.png" align="center" 
+           style="width: 18px" class="ButtonImage"/>
+          <img id="forwardButton" src="images/forwardArrow.png" align="center" 
+           style="width: 18px" class="ButtonImage"/>
+          <img id="stopButton" src="images/stop.png" align="center" 
+           style="width: 18px" class="ButtonImage"/>
+          <img id="reloadButton" src="images/reload.png" align="center" 
+           style="width: 20px" class="ButtonImage"
+          <img id="zoomInButton" src="images/zoomIn.png" align="center" 
+               style="width: 20px" class="ButtonImage"/>
+          <img id="zoomOutButton" src="images/zoomOut.png" align="center" 
+               style="width: 20px" class="ButtonImage"/>
+          <img src="images/history.png" align="center"  class="ButtonImage" onclick="showHistory()"/>
+          <img src="images/info.png" align="center" style="width: 20px" class="ButtonImage" onclick="flipPageInfo()"/>
+          <img src="images/star.png" align="center" style="width: 20px" class="ButtonImage" onclick="showGoAnywhere()"/>
+          <img src="images/wrench_icon.jpg" align="center"  class="ButtonImage" onclick="toggleSettings()"/>
+          <img src="images/red_sox_logo.png" align="center"  class="ButtonImage" onclick="window.chrome.loadChrome('chrome/boston-chrome.html');"/>
+      </div>
+      
+      <div class = "GinebraSnippet PageInfo" id="PageInfoId">
+        <div class = "PageInfoInner">
+          <form>
+            Title: <input id="pageInfo_TitleId" type="text"></br>
+            URL: <input id="pageInfo_UrlId" type="text"></br>
+            Text Language: <input id="language" type="text"></br>
+          </form>
+              <div align="right" style="margin-right: 20px">
+                <input type = "button" class="Button" value="OK" onclick="flipPageInfo()"/>
+          </div>
+        </div>
+      </div>
+      
+      
+      <div class = "PopChrome" id="SettingsChromeId">
+    
+    <h3>Chrome settings</h3>
+    <hr/>
+    Chrome:
+    <br/>
+    Simple
+    <input type ="radio"
+               checked = "checked"
+               name = "ChromeSelection"
+           value="chrome.html"/>
+    
+    <button type="button" class="Button" onclick="window.chrome.loadChrome('chrome/' + chromeSelect());">Update</button>
+    
+    <br/>
+    Veggie
+    <input type ="radio"
+               name = "ChromeSelection"
+           value="veggie-chrome.html"/>
+    <hr/>    
+    Style:
+    <br/>
+    Simple
+    <input type ="radio"
+               name = "StyleSelection"
+           value="chromeStyleFlat.css"/>
+    <button type="button" class="Button" onclick="newStyle('css/' + styleSelect());">Update</button>
+    
+    <br/>
+    Curved
+    <input type ="radio"
+               checked = "checked"
+               name = "StyleSelection"
+           value="chromeStyleBlack.css"/>
+    <br/>
+      </div>
+      
+  </body>
+</html>
+