From: Kasun Gajasinghe <kasunbg@gmail.com>
Date: Sat, 4 Dec 2010 11:43:42 +0000 (+0000)
Subject: webhelp: Usability improvement - when click on a node in the TOC tree, the child... 
X-Git-Tag: release/1.79.1~6^2~784
X-Git-Url: https://granicus.if.org/sourcecode?a=commitdiff_plain;h=cca00db99f53e25939f85ab8516fcba431a85542;p=docbook-dsssl

webhelp: Usability improvement - when click on a node in the TOC tree, the child nodes will auto populate now.
---

diff --git a/xsl/webhelp/template/common/main.js b/xsl/webhelp/template/common/main.js
index dee730360..7a06c4deb 100755
--- a/xsl/webhelp/template/common/main.js
+++ b/xsl/webhelp/template/common/main.js
@@ -5,37 +5,41 @@
  *
  */
 
-$(document).ready(function() {  
-  //  $("#showHideHighlight").button(); //add jquery button styling to 'Go' button
+var treesettings = {
+    collapsed: true,
+    animated: "medium",
+    control: "#sidetreecontrol",
+    persist: "cookie"
+};
+
+$(document).ready(function() {
+    //  $("#showHideHighlight").button(); //add jquery button styling to 'Go' button
     //Generate tabs in nav-pane with JQuery
     $(function() {
-            $("#tabs").tabs({
-                cookie: {
-                    // store cookie for 2 days.
-                    expires: 2
-                }
-            });
+        $("#tabs").tabs({
+            cookie: {
+                // store cookie for 2 days.
+                expires: 2
+            }
         });
+    });
 
     //Generate the tree
-     $("#ulTreeDiv").attr("style","");
-    $("#tree").treeview({
-        collapsed: true,
-        animated: "medium",
-        control: "#sidetreecontrol",
-        persist: "cookie"
-    });
+    $("#ulTreeDiv").attr("style", "");
+    $("#tree").treeview(treesettings);
 
     //after toc fully styled, display it. Until loading, a 'loading' image will be displayed
-    $("#tocLoading").attr("style","display:none;");
-//    $("#ulTreeDiv").attr("style","display:block;");
+    $("#tocLoading").attr("style", "display:none;");
+    //    $("#ulTreeDiv").attr("style","display:block;");
 
     //.searchButton is the css class applied to 'Go' button 
     $(function() {
-		$("button", ".searchButton").button();
+        $("button", ".searchButton").button();
 
-		$("button", ".searchButton").click(function() { return false; });
-	});
+        $("button", ".searchButton").click(function() {
+            return false;
+        });
+    });
 
     //'ui-tabs-1' is the cookie name which is used for the persistence of the tabs.(Content/Search tab)
     if ($.cookie('ui-tabs-1') === '1') {    //search tab is visible 
@@ -43,7 +47,7 @@ $(document).ready(function() {
             document.getElementById('textToSearch').value = $.cookie('textToSearch');
             Verifie('diaSearch_Form');
             searchHighlight($.cookie('textToSearch'));
-            $("#showHideHighlight").css("display","block");
+            $("#showHideHighlight").css("display", "block");
         }
     }
 
@@ -52,11 +56,38 @@ $(document).ready(function() {
 });
 
 /**
- * Synchronize with the tableOfContents 
+ * Synchronize with the tableOfContents
  */
-function syncToc(){
+function syncToc() {
     var a = document.getElementById("webhelp-currentid");
     if (a != undefined) {
+        //Expanding the child sections of the selected node.
+        var nodeClass = a.getAttribute("class");
+        if (nodeClass != null && !nodeClass.match(/collapsable/)) {
+            a.setAttribute("class", "collapsable");
+            //remove display:none; css style from <ul> block in the selected node.
+            var ulNode = a.getElementsByTagName("ul")[0];
+            if (ulNode != undefined) {
+                if (ulNode.hasAttribute("style")) {
+                    ulNode.setAttribute("style", "display: block;");
+                } else {
+                    var ulStyle = document.createAttribute("style");
+                    ulStyle.nodeValue = "display: block;";
+                    ulNode.setAttributeNode(ulStyle);
+            }   }
+            //adjust tree's + sign to -
+            var divNode = a.getElementsByTagName("div")[0];
+            if (divNode != undefined) {
+                if (divNode.hasAttribute("class")) {
+                    divNode.setAttribute("class", "hitarea collapsable-hitarea");
+                } else {
+                    var divClass = document.createAttribute("class");
+                    divClass.nodeValue = "hitarea collapsable-hitarea";
+                    divNode.setAttributeNode(divClass);
+            }   }
+            //set persistence cookie when a node is auto expanded
+            //     setCookieForExpandedNode("webhelp-currentid");
+        }
         var b = a.getElementsByTagName("a")[0];
 
         if (b != undefined) {
@@ -65,14 +96,13 @@ function syncToc(){
             if (style != null && !style.match(/background-color: Background;/)) {
                 a.setAttribute("style", "background-color: #6495ed;  " + style);
                 b.setAttribute("style", "color: white;");
-            } else if (style != null) {
+            } else if (style != null || style != "") {
                 a.setAttribute("style", "background-color: #6495ed;  " + style);
                 b.setAttribute("style", "color: white;");
             } else {
                 a.setAttribute("style", "background-color: #6495ed;  ");
                 b.setAttribute("style", "color: white;");
-            }
-        }
+    }   }
 
         //shows the node related to current content.
         //goes a recursive call from current node to ancestor nodes, displaying all of them.
@@ -87,9 +117,36 @@ function syncToc(){
                 parentNode.firstChild.setAttribute("class", "hitarea collapsable-hitarea ");
             }
             a = parentNode;
-        }
-    }
-}
+}   }  }
+/*
+ function setCookieForExpandedNode(nodeName) {
+ var tocDiv = document.getElementById("tree"); //get table of contents Div
+ var divs = tocDiv.getElementsByTagName("div");
+ var matchedDivNumber;
+ var i;
+ for (i = 0; i < divs.length; i++) {        //1101001
+ var div = divs[i];
+ var liNode = div.parentNode;
+ }
+//create a new cookie if a treeview does not exist
+ if ($.cookie(treeCookieId) == null || $.cookie(treeCookieId) == "") {
+ var branches = $("#tree").find("li");//.prepareBranches(treesettings);
+ var data = [];
+ branches.each(function(i, e) {
+ data[i] = $(e).is(":has(>ul:visible)") ? 1 : 0;
+ });
+ $.cookie(treeCookieId, data.join(""));
+
+ }
+
+ if (i < divs.length) {
+ var treeviewCookie = $.cookie(treeCookieId);
+ var tvCookie1 = treeviewCookie.substring(0, i);
+ var tvCookie2 = treeviewCookie.substring(i + 1);
+ var newTVCookie = tvCookie1 + "1" + tvCookie2;
+ $.cookie(treeCookieId, newTVCookie);
+ }
+ }       */
 
 /**
  * Code for Show/Hide TOC
@@ -104,13 +161,13 @@ function showHideToc() {
         //Hide TOC
         showHideButton.removeClass('pointLeft').addClass('pointRight');
         content.css("margin", "0 0 0 0");
-        leftNavigation.css("display","none");
+        leftNavigation.css("display", "none");
         showHideButton.attr("title", "Show the TOC tree");
     } else {
         //Show the TOC
         showHideButton.removeClass('pointRight').addClass('pointLeft');
         content.css("margin", "0 0 0 280px");
-        leftNavigation.css("display","block");
+        leftNavigation.css("display", "block");
         showHideButton.attr("title", "Hide the TOC Tree");
     }
 }
@@ -132,7 +189,7 @@ function searchHighlight(searchText) {
         wList = searchText.split(" ");
         $("#content").highlight(wList); //Highlight the search input
 
-        if(typeof stemmer != "undefined" ){
+        if (typeof stemmer != "undefined") {
             //Highlight the stems
             for (var i = 0; i < wList.length; i++) {
                 var stemW = stemmer(wList[i]);
@@ -142,20 +199,20 @@ function searchHighlight(searchText) {
             sList = wList;
         }
         $("#content").highlight(sList); //Highlight the search input's all stems
-    } 
+    }
 }
 
-function searchUnhighlight(){
+function searchUnhighlight() {
     highlightOn = false;
-     //unhighlight the search input's all stems
+    //unhighlight the search input's all stems
     $("#content").unhighlight();
     $("#content").unhighlight();
 }
 
-function toggleHighlight(){
-    if(highlightOn) {
+function toggleHighlight() {
+    if (highlightOn) {
         searchUnhighlight();
     } else {
         searchHighlight($.cookie('textToSearch'));
     }
-}
\ No newline at end of file
+}