ginebra/chrome/bedrockchrome/toolbar2.snippet/toolbar.js
changeset 0 1450b09d0cfd
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ginebra/chrome/bedrockchrome/toolbar2.snippet/toolbar.js	Tue May 04 12:39:35 2010 +0300
@@ -0,0 +1,611 @@
+
+var tbCb;
+
+/* create all functions with toolbar.* */
+//
+// INIT the webView Toolbar
+//
+
+/* Fade functions - modified the 3rdparty solution*/
+var FadeAnim = {
+
+    fade : function (id) {
+        opacity = 96;
+        this.fadeLoop(id, opacity);
+    },
+    fadeLoop : function (id, opacity) {
+        var o = document.getElementById(id);
+        if (opacity >= 5) {
+            FadeAnim.setOpacity(o, opacity);
+            opacity -= 4;
+            window.setTimeout("FadeAnim.fadeLoop('" + id + "', " + opacity + ")", 50);
+        } else {
+//                        o.style.display = "none";
+            o.style.visibility = 'hidden';
+            //window.chrome.alert("Menu is " +  o.style.visibility);
+            tbCb("hideCplt");
+              
+        }
+    },
+    setOpacity : function (o, opacity) {
+        o.style.filter = "alpha(style=0,opacity:" + opacity + ")";      // IE
+        o.style.KHTMLOpacity = opacity / 100;                           // Konqueror
+        o.style.MozOpacity = opacity / 100;                                     // Mozilla (old)
+        o.style.opacity = opacity / 100;                                        // Mozilla (new)
+    },
+
+    show : function (id) {
+        opacity = 4;
+        this.showLoop(id, opacity);
+    },
+    showLoop : function (id, opacity) {
+        var o = document.getElementById(id);
+        if (opacity <= 100) {
+            FadeAnim.setOpacity(o, opacity);
+            opacity += 4;
+            window.setTimeout("FadeAnim.showLoop('" + id + "', " + opacity + ")", 50);
+        }
+        else {
+            tbCb("showCplt");
+        }
+    }
+}
+
+/* Utility functions */
+function Util() {
+    
+    /* Utility function to strip off the given string
+     */
+    function convertToValue(num, str) {
+
+        var i = num.indexOf(str);
+        var value = 0;
+        if (i > -1) {
+            value = num.slice(0, i);
+        }
+        return Number(value);
+    }
+
+    /* Get the first button if of the toolbar specified by 'view' */
+    function firstBtn(tbId) {
+        var rowid = getRowId(tbId);
+        return (document.getElementById(rowid).firstChild.id);
+    }
+
+    /* Get the last button if of the toolbar specified by 'view' */
+    function lastBtn(tbId) {
+        var rowid = getRowId(tbId);
+        return (document.getElementById(rowid).lastChild.id);
+    }
+
+    /* Get the row id of the toolbar specified by 'view' */
+    function getRowId(tbId) {
+       var id;
+        switch( tbId) {
+            case  "WebViewToolbarId":
+                id = "webViewRow";
+                break;
+            case  "WebViewMiniToolbarId":
+                id = "webViewMiniRow";
+                break;
+            case  "HistoryViewToolbarId":
+                id = "historyRow";
+                break;
+            case  "BookmarkViewToolbarId":
+                id = "bookmarkRow";
+                break;
+            case  "BookmarkHistoryViewToolbarId":
+                id = "bookmarkHistoryRow";
+                break;
+            case  "WindowViewToolbarId":
+                id = "windowRow";
+                break;
+            default:
+                break;
+        }
+        return id;
+
+    }
+
+    /* This function calculates the margin-right needed */
+    this.setMarginRight = function(tbId) {
+
+        /* Get the total number of images in the toolbar */
+        var firstIcon = firstBtn(tbId);
+    
+        var el = document.getElementById(getRowId(tbId));
+        Icons = el.getElementsByTagName("img");
+
+        numIcons = Icons.length;
+        /* Get total width and total width od all icons */
+        var  iconW = document.getElementById(firstIcon).offsetWidth;
+        var  totalW =  document.getElementById(tbId).offsetWidth;
+        var totalIconW= (iconW * numIcons);
+        var firstobj = document.getElementById(firstIcon);
+        var lastObj = document.getElementById(lastBtn(tbId));
+
+        switch (numIcons) {
+            case 1:
+                /* Only one icon */
+                var leftMarginStr=document.defaultView.getComputedStyle(firstobj, '').getPropertyValue("margin-left");
+                var leftMargin = convertToValue(leftMarginStr, "px");
+        
+                var marginRight = totalW - totalIconW - leftMargin;
+                Icons[0].style.marginRight = marginRight + "px";
+                break;
+            
+        default:
+            /* More than two buttons */
+            var leftMarginStr=document.defaultView.getComputedStyle(firstobj, '').getPropertyValue("margin-left");
+            var rightmarginStr=document.defaultView.getComputedStyle(lastObj, '').getPropertyValue("margin-right");
+            var leftMargin = convertToValue(leftMarginStr, "px");
+            var rightMargin = convertToValue(rightmarginStr, "px");
+            var totalMargin = rightMargin + leftMargin ;
+
+
+            /* Now determine remaining space */
+            var marginRight = (totalW - totalIconW - totalMargin)/(numIcons - 1);
+            for (var i = 0; i < numIcons; i++ ) {
+    
+                if (i !== (numIcons-1)  ){
+                    Icons[i].style.marginRight = marginRight + "px";
+                }
+            }
+            break;
+        }
+
+    }
+}
+
+/* create all functions with toolbar.* */
+//
+// INIT the webView Toolbar
+//
+
+function WebViewToolbar()
+{
+
+    var utils = new Util();
+    var menuTimeoutCb = _hideToolbar;
+    var menuTimeoutId = 0;
+    tbCb = _handleToolbarMenuCb;
+
+
+    //Private methods
+    //write webview toolbar HTML code to document
+    function _writeWebViewToolbar() {
+    var html = ''+
+        '<span id="webViewRow" style="width:100%">'+
+        '<img class="toolBarBtn firstButton" id="backButton" >'+
+        '<span id="menu" >'+
+        '<img class="toolBarBtn" id="zoomIn"   >'+
+        '<img class="toolBarBtn" id="zoomOut" >'+
+        '<img class="toolBarBtn" id="winButton" >'+
+        '<img class="toolBarBtn" id="contextMenuButton" >'+
+        '</span>'+
+        '<img class="toolBarBtn lastButton" id="mvButton">'+
+        '</span>';
+        document.write(html);
+
+        // We can immediately set up the simple buttons
+        // ActionButtons have to wait until the page is loaded
+        var index = window.pageController.pageCount();
+        var base = "toolbar2.snippet/fjicons/windows" + index;
+        new SimpleButton("winButton",
+                         base + ".png",
+                         base + "_pushed.png",
+                         base + ".png",
+                         _goToWindowView);
+
+       new SimpleButton("mvButton",
+                         "toolbar2.snippet/fjicons/mostVisited.png",
+                         "toolbar2.snippet/fjicons/mostVisited_pushed.png",
+                         "toolbar2.snippet/fjicons/mostVisited.png",
+                         _activateMostVisited);
+
+
+
+        new SimpleButton("contextMenuButton",
+                          "toolbar2.snippet/fjicons/menu.png",
+                          "toolbar2.snippet/fjicons/menu_pushed.png",
+                          "toolbar2.snippet/fjicons/menu.png",
+                          _contextMenuF);
+//       document.getElementById("menu").style.visibility = 'hidden';
+       utils.setMarginRight("WebViewToolbarId");
+   }
+
+    /* Adds the back action button  using ActionButton from ../../js/ActionButton.js */
+    function _setActions () {
+        new ActionButton("backButton",
+                     "toolbar2.snippet/fjicons/back.png",
+                     "toolbar2.snippet/fjicons/back_pushed.png",
+                     "toolbar2.snippet/fjicons/back_disabled.png",
+                     window.pageController.actions.back);
+
+        new ActionButton("zoomIn",
+                     "toolbar2.snippet/fjicons/zoom+.png",
+                     "toolbar2.snippet/fjicons/zoom+_pushed.png",
+                     "toolbar2.snippet/fjicons/zoom+_disabled.png",
+                     window.webView.actions.zoomIn);
+
+
+        new ActionButton("zoomOut",
+                     "toolbar2.snippet/fjicons/zoom-.png",
+                     "toolbar2.snippet/fjicons/zoom-_pushed.png",
+                     "toolbar2.snippet/fjicons/zoom-_disabled.png",
+                     window.webView.actions.zoomOut);
+
+        /* Add 'addWindow' action */
+        new ActionButton("addWindow",
+                         "toolbar2.snippet/fjicons/addwindow.png",
+                         "toolbar2.snippet/fjicons/addwindow_pushed.png",
+                         "toolbar2.snippet/fjicons/addwindow_disabled.png",
+                         window.viewManager.WindowView.actions.addWindow);
+    }
+
+    var timeoutId = 0;
+    function _contextMenuF ()
+    {
+    	  var hideFlag = 0;
+    	    
+    	  hideFlag = window.snippets.ContextMenuId.getContextMenuFlag();
+    	     
+    	  if(hideFlag == 1)
+    	  {
+    	     	 window.snippets.ContextMenuBgId.hide();
+    	     	 window.snippets.ContextMenuId.hide();
+    	       return;
+    	  }
+    	  
+    	    
+        clearTimeout(timeoutId);
+    	
+        window.snippets.ContextMenuBgId.setPosition(0,20);
+        window.snippets.ContextMenuBgId.show();
+        window.snippets.ContextMenuBgId.zValue = 1;
+    	
+        window.snippets.ContextMenuId.repaint();
+        if (window.snippets.ContextMenuId.getDisplayMode() == "portrait")
+            window.snippets.ContextMenuId.setPosition(83,270);
+        else //landscape
+            window.snippets.ContextMenuId.setPosition(223,130);
+
+        window.snippets.ContextMenuId.show();
+        window.snippets.ContextMenuId.zValue = 10;
+           
+        timeoutId = setTimeout ( 'window.snippets.ContextMenuId.hide(); window.snippets.ContextMenuBgId.hide()', 6000 ); // close the menu after 6 secs
+//        _showToolbar();
+    }
+
+    /* Update the windows icon based on the number of windows open */
+    function _changeWindowIcon () {
+        var index = window.pageController.pageCount();
+        var base = "toolbar2.snippet/fjicons/windows" + index;
+
+        document.getElementById('winButton').button.updateImages(base + ".png",
+                                                                 base + "_pushed.png",
+                                                                 base + ".png");
+        //window.snippets.repaint("WebViewToolbarId");
+
+    }
+
+    function _goToWindowView () {        
+        window.viewStack.switchView("WindowView", "webView");
+    }
+
+    function _goToGoAnywhereView () {
+        /* Change to history view */
+        window.viewStack.switchView("goAnywhereView", "webView");
+    }
+
+    function _goToBookmarkView () {
+        /* Change to Bookmark view */
+        window.viewStack.switchView("bookmarkTreeView", "webView");
+    }
+
+    function _goToRecentUrlView () {
+         window.viewStack.switchView("bookmarkHistoryView", "webView");
+    }
+
+    function _activateMostVisited () {
+        
+    }
+
+    function _chromeLoadComplete () {
+        _setActions();
+        _changeWindowIcon();
+
+        /* Connect to pageCreated signal */
+        window.pageController.pageCreated.connect(_changeWindowIcon);
+
+        /*
+        window.pageController.loadStarted.connect(_showToolbar);
+        window.pageController.loadFinished.connect(startMenuHideTimer);
+        window.pageController.pageScrollRequested.connect(_showToolbar);
+        */
+    }
+
+    function _showToolbar()  {
+        var el = document.getElementById("menu");
+        //window.chrome.alert("show Toolbar " +  el.style.visibility);
+        if (el.style.visibility != 'visible') {
+            document.getElementById("menu").style.visibility = 'visible';
+            FadeAnim.show("menu");
+        }
+    }
+
+    function startMenuHideTimer() {
+
+        //window.chrome.alert("startMenuHideTimer");
+        var el = document.getElementById("menu");
+        if (el.style.visibility == 'visible' && (!menuTimeoutId) ) {
+            //window.chrome.alert("startMenuHideTimer: started timer");
+            //menuTimeoutId = setTimeout ('_hideToolbar()', 1000);
+            menuTimeoutId = setTimeout (menuTimeoutCb, 3000);
+        }
+    }
+
+    function _hideToolbar()  {
+        //window.chrome.alert("hideToolbar " +  document.getElementById("menu").style.visibility);
+
+        var el = document.getElementById("menu");
+
+        clearTimeout(menuTimeoutId);
+        menuTimeoutId = 0;
+
+        if (el.style.visibility != 'hidden' ) {
+            FadeAnim.fade("menu");
+            //window.chrome.alert("hide Toolbar " +  document.getElementById("menu").style.visibility);
+        }
+    }
+
+    function _handleToolbarMenuCb(x) {
+
+        if (x == "showCplt" ) {
+            startMenuHideTimer();
+        }
+        else if (x == "hideCplt"){
+
+        }
+    }
+
+    function _activateBookmark () {
+        window.chrome.toggleVisibility("BookmarkViewToolbarId");
+    }
+
+    function _deActivateBookmark () {
+        window.chrome.toggleVisibility("BookmarkViewToolbarId");
+    }
+
+    function _activateHistory () {
+        window.chrome.toggleVisibility("HistoryViewToolbarId");
+    }
+
+    function _deActivateHistory () {
+        window.chrome.toggleVisibility("HistoryViewToolbarId");
+    }
+
+    function _activateBookMarkHistory () {
+        window.chrome.toggleVisibility("BookmarkHistoryViewToolbarId");
+    }
+
+    function _deActivateBookMarkHistory () {
+        window.chrome.toggleVisibility("BookmarkHistoryViewToolbarId");
+    }
+
+    function _activateWebView () {
+        window.chrome.toggleVisibility("WebViewToolbarId");
+    }
+
+    function _deActivateWebView () {
+        window.chrome.toggleVisibility("WebViewToolbarId");
+    }
+
+    function _activateWindowView () {
+
+        window.chrome.alert("_activateWindowView");
+
+        /* Show the window count snippet */
+        document.getElementById('WindowCountBarId').wcChrome.wcUpdateWindowHtml();
+        window.chrome.toggleVisibility("WindowCountBarId");
+
+        window.chrome.toggleVisibility("WindowViewToolbarId");
+    }
+
+    function _deActivateWindowView () {
+
+        window.chrome.toggleVisibility("WindowCountBarId");
+        window.chrome.toggleVisibility("WindowViewToolbarId");
+
+        /* Set the windows icon based on the number of windows */
+        _changeWindowIcon();
+    }
+
+    function _pageChanged() {
+        _changeWindowIcon();
+        window.chrome.alert("_pageChanged");
+        document.getElementById('WindowCountBarId').wcChrome.wcUpdateWindowHtml();
+    }
+
+    function _updateToolbar() {
+       utils.setMarginRight("WebViewToolbarId");
+
+    }
+
+    _writeWebViewToolbar();
+    window.chrome.loadComplete.connect(_chromeLoadComplete);
+    window.viewStack.activateBookmark.connect(_activateBookmark);
+    window.viewStack.deActivateBookmark.connect(_deActivateBookmark);
+    window.viewStack.activateHistory.connect(_activateHistory);
+    window.viewStack.deActivateHistory.connect(_deActivateHistory);
+    window.viewStack.activateBookMarkHistory.connect(_activateBookMarkHistory);
+    window.viewStack.deActivateBookMarkHistory.connect(_deActivateBookMarkHistory);
+    window.viewStack.activateWebView.connect(_activateWebView);
+    window.viewStack.deActivateWebView.connect(_deActivateWebView);
+    window.viewStack.activateWindowView.connect(_activateWindowView);
+    window.viewStack.deActivateWindowView.connect(_deActivateWindowView);
+    window.viewStack.pageChanged.connect(_pageChanged);
+    window.chrome.onDisplayModeChanged.connect(_updateToolbar);
+    window.chrome.viewPortResize.connect(_updateToolbar);
+
+} //end of class webViewToolbar
+
+
+// INIT the History View Toolbar
+function HistoryViewToolbar()
+{
+    //Private methods
+    //write historyview toolbar HTML code to document
+    function _writeHistoryViewToolbar() {
+        var tbhtml = ''+
+        //'<span id="historyRow" style="width:100%">'+
+        //'<img class="toolBarBtn firstButton" id="goBacktoWebViewHist">'+
+        //'</span>';
+
+        '<table class="toolBarTable">' +
+        '<tr>' +
+        '<td class="toolBarBtnCell" style="width=100%;"><img class="toolBarBtn" id="goBacktoWebViewHist"></td>'+
+        '</tr>' +
+        '</table>';
+         document.write(tbhtml);
+
+         /* add back button as a simple button */
+         new SimpleButton("goBacktoWebViewHist",
+                          "toolbar2.snippet/fjicons/back.png",
+                          "toolbar2.snippet/fjicons/back_pushed.png",
+                          "toolbar2.snippet/fjicons/back.png",
+                          _goBackFromGoAnywhereView);
+
+    }
+
+    _goBackFromGoAnywhereView = function() {
+        window.viewStack.switchView("webView", "goAnywhereView");
+    }
+
+    _writeHistoryViewToolbar();
+
+} //end of class HistoryViewToolbar
+
+// INIT the bookmark View Toolbar
+function BookmarkViewToolbar()
+{
+    //Private methods
+    //write webview toolbar HTML code to document
+    function _writeBookmarkViewToolbar() {
+        var tbhtml = ''+
+        //'<span id="bookmarkRow" style="width:100%">'+
+        //'<img class="toolBarBtn firstButton" id="goBacktoWebViewBM">'+
+        //'<img class="toolBarBtn lastButton"  id="addToBookMark">'+
+        //'</span>';
+        '<table class="toolBarTable">' +
+            '<tr>' +
+            '<td class="toolBarBtnCell" style="width=50%;"><img class="toolBarBtn" id="goBacktoWebViewBM"></td>'+
+            '<td class="toolBarBtnCell" style="width=50%;"><img class="toolBarBtn" id="addToBookMark"></td>'+
+            '</tr>'+
+            '</table>';
+
+         document.write(tbhtml);
+
+
+         /* add back button as a simple button */
+         new SimpleButton("goBacktoWebViewBM",
+                          "toolbar2.snippet/fjicons/back.png",
+                          "toolbar2.snippet/fjicons/back_pushed.png",
+                          "toolbar2.snippet/fjicons/back.png",
+                          _goBackFromBookmarkView);
+
+         /* add bookmark button as a simple button */
+         new SimpleButton("addToBookMark",
+                         "toolbar2.snippet/fjicons/addwindow.png",
+                         "toolbar2.snippet/fjicons/addwindow_pushed.png",
+                         "toolbar2.snippet/fjicons/addwindow.png",
+                         _addCurrentPageToBookMark);
+
+    }
+
+    function _goBackFromBookmarkView () {
+        window.viewStack.switchView("webView", "bookmarkTreeView");
+    }
+
+    function _addCurrentPageToBookMark () {
+        /* Change to history view */
+        window.chrome.addCurrentPageToBookMark();
+    }
+
+
+    _writeBookmarkViewToolbar();
+
+}
+
+// INIT the Bookmark History View Toolbar
+function BookmarkHistoryViewToolbar()
+{
+    /* BookmarkHist View Toolbar */
+    function _writeBookmarkHistoryViewToolbar() {
+        var tbhtml = ''+
+        //'<span id="bookmarkHistoryRow" style="width:100%">'+
+        //'<img class="toolBarBtn firstButton" id="goBacktoWebViewBMH">'+
+        //'</span>';
+        '<table class="toolBarTable">' +
+            '<tr>' +
+            '<td class="toolBarBtnCell" style="width=100%;"><img class="toolBarBtn" id="goBacktoWebViewBMH"></td>'+
+            '</tr>'+
+            '</table>';
+         document.write(tbhtml);
+
+         /* add back button as a simple button */
+         new SimpleButton("goBacktoWebViewBMH",
+                          "toolbar2.snippet/fjicons/back.png",
+                          "toolbar2.snippet/fjicons/back_pushed.png",
+                          "toolbar2.snippet/fjicons/back.png",
+                          _goBackFromRecentUrlView);
+    }
+
+    /* This function changes the view to webView and updates the layout correspondingly */
+    _goBackFromRecentUrlView = function()
+    {
+        window.viewStack.switchView("webView", "bookmarkHistoryView");
+    }
+
+    _writeBookmarkHistoryViewToolbar();
+
+}
+
+
+// INIT the Window View Toolbar
+function WindowViewToolbar()
+{
+    /* Window View Toolbar */
+    function _writeWindowToolbar() {
+        var tbhtml = ''+
+            //    '<span id="windowRow" style="width:100%">'+
+            //    '<img class="toolBarBtn firstButton" id="goBacktoWebViewWin">'+
+            //    '<img class="toolBarBtn" id="addWindow">'+
+            //    '</span>';
+            '<table class="toolBarTable">' +
+            '<tr>' +
+            '<td class="toolBarBtnCell" style="width=50%;"><img class="toolBarBtn" id="goBacktoWebViewWin"></td>'+
+            '<td class="toolBarBtnCell" style="width=50%;"><img class="toolBarBtn" id="addWindow"></td>'+
+            '</tr>'+
+            '</table>';
+
+
+         document.write(tbhtml);
+
+         /* add back as simple button, add window is an action button */
+         new SimpleButton("goBacktoWebViewWin",
+                          "toolbar2.snippet/fjicons/back.png",
+                          "toolbar2.snippet/fjicons/back_pushed.png",
+                          "toolbar2.snippet/fjicons/back.png",
+                          _goBackFromWindowView);
+
+       }
+
+    _goBackFromWindowView = function() {
+        window.viewStack.switchView("webView", "WindowView");
+    }
+    _writeWindowToolbar();
+}
+
+
+