webhelp/template/common/main.js

   1 /**
   2  * Miscellaneous js functions for WebHelp
   3  * Kasun Gajasinghe, http://kasunbg.blogspot.com
   4  * David Cramer, http://www.thingbag.net
   5  *
   6  */
   7
   8 //Turn ON and OFF the animations for Show/Hide Sidebar. Extend this to other anime as well if any.
   9 var noAnimations=false;
  10
  11 $(document).ready(function() {
  12         // When you click on a link to an anchor, scroll down
  13         // 105 px to cope with the fact that the banner
  14         // hides the top 95px or so of the page.
  15         // This code deals with the problem when
  16         // you click on a link within a page.
  17         $('a[href*=#]').click(function() {
  18                 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
  19                     && location.hostname == this.hostname) {
  20                     var $target = $(this.hash);
  21                     $target = $target.length && $target
  22                         || $('[id=' + this.hash.slice(1) +']');
  23                 if (!(this.hash == "#searchDiv" || this.hash == "#treeDiv"  || this.hash == "") && $target.length) {
  24                         var targetOffset = $target.offset().top - 120;
  25                         $('#content')
  26                             .animate({scrollTop: targetOffset}, 200);
  27                         return false;
  28                     }
  29                 }
  30             });
  31
  32     //  $("#showHideHighlight").button(); //add jquery button styling to 'Go' button
  33     //Generate tabs in nav-pane with JQuery
  34     $(function() {
  35         $("#tabs").tabs({
  36             cookie: {
  37                 expires: 2 // store cookie for 2 days.
  38             }
  39         });
  40     });
  41
  42     //Generate the tree
  43     $("#ulTreeDiv").attr("style", "");
  44     $("#tree").treeview({
  45         collapsed: true,
  46         animated: "medium",
  47         control: "#sidetreecontrol",
  48         persist: "cookie"
  49     });
  50
  51     //after toc fully styled, display it. Until loading, a 'loading' image will be displayed
  52     $("#tocLoading").attr("style", "display:none;");
  53     //    $("#ulTreeDiv").attr("style","display:block;");
  54
  55     //.searchButton is the css class applied to 'Go' button
  56     $(function() {
  57         $("button", ".searchButton").button();
  58
  59         $("button", ".searchButton").click(function() {
  60             return false;
  61         });
  62     });
  63
  64     //'ui-tabs-1' is the cookie name which is used for the persistence of the tabs.(Content/Search tab)
  65     if ($.cookie('ui-tabs-1') === '1') {    //search tab is active
  66         if ($.cookie('textToSearch') != undefined && $.cookie('textToSearch').length > 0) {
  67             document.getElementById('textToSearch').value = $.cookie('textToSearch');
  68             Verifie('searchForm');
  69             searchHighlight($.cookie('textToSearch'));
  70             $("#showHideHighlight").css("display", "block");
  71         }
  72     }
  73
  74     syncToc(); //Synchronize the toc tree with the content pane, when loading the page.
  75     //$("#doSearch").button(); //add jquery button styling to 'Go' button
  76
  77     // When you click on a link to an anchor, scroll down
  78     // 120 px to cope with the fact that the banner
  79     // hides the top 95px or so of the page.
  80     // This code deals with the problem when
  81     // you click on a link from another page.
  82     var hash = window.location.hash;
  83     if(hash){
  84         var targetOffset = $(hash).offset().top - 120;
  85         $('html,body').animate({scrollTop: targetOffset}, 200);
  86         return false;
  87     }
  88 });
  89
  90
  91 /**
  92  * If an user moved to another page by clicking on a toc link, and then clicked on #searchDiv,
  93  * search should be performed if the cookie textToSearch is not empty.
  94  */
  95 function doSearch() {
  96 //'ui-tabs-1' is the cookie name which is used for the persistence of the tabs.(Content/Search tab)
  97     if ($.cookie('textToSearch') != undefined && $.cookie('textToSearch').length > 0) {
  98         document.getElementById('textToSearch').value = $.cookie('textToSearch');
  99         Verifie('searchForm');
 100     }
 101 }
 102
 103 /**
 104  * Synchronize with the tableOfContents
 105  */
 106 function syncToc() {
 107     var a = document.getElementById("webhelp-currentid");
 108     if (a != undefined) {
 109         //Expanding the child sections of the selected node.
 110         var nodeClass = a.getAttribute("class");
 111         if (nodeClass != null && !nodeClass.match(/collapsable/)) {
 112             a.setAttribute("class", "collapsable");
 113             //remove display:none; css style from <ul> block in the selected node.
 114             var ulNode = a.getElementsByTagName("ul")[0];
 115             if (ulNode != undefined) {
 116                 if (ulNode.hasAttribute("style")) {
 117                     ulNode.setAttribute("style", "display: block; background-color: #D8D8D8 !important;");
 118                 } else {
 119                     var ulStyle = document.createAttribute("style");
 120                     ulStyle.nodeValue = "display: block; background-color: #D8D8D8 !important;";
 121                     ulNode.setAttributeNode(ulStyle);
 122             }   }
 123             //adjust tree's + sign to -
 124             var divNode = a.getElementsByTagName("div")[0];
 125             if (divNode != undefined) {
 126                 if (divNode.hasAttribute("class")) {
 127                     divNode.setAttribute("class", "hitarea collapsable-hitarea");
 128                 } else {
 129                     var divClass = document.createAttribute("class");
 130                     divClass.nodeValue = "hitarea collapsable-hitarea";
 131                     divNode.setAttributeNode(divClass);
 132             }   }
 133             //set persistence cookie when a node is auto expanded
 134             //     setCookieForExpandedNode("webhelp-currentid");
 135         }
 136         var b = a.getElementsByTagName("a")[0];
 137
 138         if (b != undefined) {
 139             //Setting the background for selected node.
 140             var style = a.getAttribute("style", 2);
 141             if (style != null && !style.match(/background-color: Background;/)) {
 142                 a.setAttribute("style", "background-color: #D8D8D8;  " + style);
 143                 b.setAttribute("style", "color: black;");
 144             } else if (style != null) {
 145                 a.setAttribute("style", "background-color: #D8D8D8;  " + style);
 146                 b.setAttribute("style", "color: black;");
 147             } else {
 148                 a.setAttribute("style", "background-color: #D8D8D8;  ");
 149                 b.setAttribute("style", "color: black;");
 150             }
 151         }
 152
 153         //shows the node related to current content.
 154         //goes a recursive call from current node to ancestor nodes, displaying all of them.
 155         while (a.parentNode && a.parentNode.nodeName) {
 156             var parentNode = a.parentNode;
 157             var nodeName = parentNode.nodeName;
 158
 159             if (nodeName.toLowerCase() == "ul") {
 160                 parentNode.setAttribute("style", "display: block;");
 161             } else if (nodeName.toLocaleLowerCase() == "li") {
 162                 parentNode.setAttribute("class", "collapsable");
 163                 parentNode.firstChild.setAttribute("class", "hitarea collapsable-hitarea ");
 164             }
 165             a = parentNode;
 166 }   }  }
 167 /*
 168  function setCookieForExpandedNode(nodeName) {
 169  var tocDiv = document.getElementById("tree"); //get table of contents Div
 170  var divs = tocDiv.getElementsByTagName("div");
 171  var matchedDivNumber;
 172  var i;
 173  for (i = 0; i < divs.length; i++) {        //1101001
 174  var div = divs[i];
 175  var liNode = div.parentNode;
 176  }
 177 //create a new cookie if a treeview does not exist
 178  if ($.cookie(treeCookieId) == null || $.cookie(treeCookieId) == "") {
 179  var branches = $("#tree").find("li");//.prepareBranches(treesettings);
 180  var data = [];
 181  branches.each(function(i, e) {
 182  data[i] = $(e).is(":has(>ul:visible)") ? 1 : 0;
 183  });
 184  $.cookie(treeCookieId, data.join(""));
 185
 186  }
 187
 188  if (i < divs.length) {
 189  var treeviewCookie = $.cookie(treeCookieId);
 190  var tvCookie1 = treeviewCookie.substring(0, i);
 191  var tvCookie2 = treeviewCookie.substring(i + 1);
 192  var newTVCookie = tvCookie1 + "1" + tvCookie2;
 193  $.cookie(treeCookieId, newTVCookie);
 194  }
 195  }       */
 196
 197 /**
 198  * Code for Show/Hide TOC
 199  *
 200  */
 201 function showHideToc() {
 202     var showHideButton = $("#showHideButton");
 203     var leftNavigation = $("#sidebar"); //hide the parent div of leftnavigation, ie sidebar
 204     var content = $("#content");
 205     var animeTime=75
 206
 207     if (showHideButton != undefined && showHideButton.hasClass("pointLeft")) {
 208         //Hide TOC
 209         showHideButton.removeClass('pointLeft').addClass('pointRight');
 210
 211         if(noAnimations) {
 212             leftNavigation.css("display", "none");
 213             content.css("margin", "125px 0 0 0");
 214         } else {
 215             leftNavigation.hide(animeTime);
 216             content.animate( { "margin-left": 0 }, animeTime);
 217         }
 218         showHideButton.attr("title", "Show Sidebar");
 219     } else {
 220         //Show the TOC
 221         showHideButton.removeClass('pointRight').addClass('pointLeft');
 222         if(noAnimations) {
 223             content.css("margin", "125px 0 0 280px");
 224             leftNavigation.css("display", "block");
 225         } else {
 226             content.animate( { "margin-left": '280px' }, animeTime);
 227             leftNavigation.show(animeTime);
 228         }
 229         showHideButton.attr("title", "Hide Sidebar");
 230     }
 231 }
 232
 233 /**
 234  * Code for search highlighting
 235  */
 236 var highlightOn = true;
 237 function searchHighlight(searchText) {
 238     highlightOn = true;
 239     if (searchText != undefined) {
 240         var wList;
 241         var sList = new Array();    //stem list
 242         //Highlight the search terms
 243         searchText = searchText.toLowerCase().replace(/<\//g, "_st_").replace(/\$_/g, "_di_").replace(/\.|%2C|%3B|%21|%3A|@|\/|\*/g, " ").replace(/(%20)+/g, " ").replace(/_st_/g, "</").replace(/_di_/g, "%24_")
 244         searchText = searchText.replace(/  +/g, " ");
 245         searchText = searchText.replace(/ $/, "").replace(/^ /, "");
 246
 247         wList = searchText.split(" ");
 248         $("#content").highlight(wList); //Highlight the search input
 249
 250         if (typeof stemmer != "undefined") {
 251             //Highlight the stems
 252             for (var i = 0; i < wList.length; i++) {
 253                 var stemW = stemmer(wList[i]);
 254                 sList.push(stemW);
 255             }
 256         } else {
 257             sList = wList;
 258         }
 259         $("#content").highlight(sList); //Highlight the search input's all stems
 260     }
 261 }
 262
 263 function searchUnhighlight() {
 264     highlightOn = false;
 265     //unhighlight the search input's all stems
 266     $("#content").unhighlight();
 267     $("#content").unhighlight();
 268 }
 269
 270 function toggleHighlight() {
 271     if (highlightOn) {
 272         searchUnhighlight();
 273     } else {
 274         searchHighlight($.cookie('textToSearch'));
 275     }
 276 }