| 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 | || $('[name=' + this.hash.slice(1) +']');
|
|---|
| 23 | if (!(this.hash == "#searchDiv" || this.hash == "#treeDiv" || this.hash == "") && $target.length) {
|
|---|
| 24 | var targetOffset = $target.offset().top - 120;
|
|---|
| 25 | $('html,body')
|
|---|
| 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 | } |
|---|
