From: Kasun Gajasinghe <kasunbg@gmail.com>
Date: Sun, 2 Oct 2011 05:44:22 +0000 (+0000)
Subject: webhelp - animations for show/hide Sidebar
X-Git-Tag: release/1.79.1~6^2~664
X-Git-Url: https://granicus.if.org/sourcecode?a=commitdiff_plain;h=f62b350bd8ee80c32592d2231debb75080b0afd9;p=docbook-dsssl

webhelp - animations for show/hide Sidebar
---

diff --git a/xsl/webhelp/template/common/css/positioning.css b/xsl/webhelp/template/common/css/positioning.css
index f0f0538ae..167110350 100644
--- a/xsl/webhelp/template/common/css/positioning.css
+++ b/xsl/webhelp/template/common/css/positioning.css
@@ -18,9 +18,7 @@ p, ul, ol, li { font: 10pt Verdana, Geneva, sans-serif; }
 h1 { font: 15pt Arial, Helvetica, geneva;
      color: black!important!;
 }
-h2 { font: normal 12pt Arial, Helvetica, geneva;
-	color: black!important;
-}
+h2 { font: normal 12pt Arial, Helvetica, geneva; }
 
 #header {
     background: url("../images/header-bg.png") scroll top left repeat-x #4d8c83;
@@ -36,12 +34,11 @@ h2 { font: normal 12pt Arial, Helvetica, geneva;
 }
 
 #header h1 {
-    color: #fff;
     margin-left: 310px;
     position: fixed;
     top: 10px;
     left: -15px;
-    color: black!important;
+    color: #404040 !important;
 }
 
 /*
@@ -134,7 +131,11 @@ p.breadcrumbs {
     text-align: right;
 }
 
-#content h1, #content h2 { color: black; }
+#content h1, #content h2 { 
+color: #404040 !important; 
+font-size: 170%;
+font-weight: normal;
+}
 .navfooter { bottom: 2%; }
 .highlight { background-color: #c5d3c3; }
 .highlightButton{ font-size: 0; }
diff --git a/xsl/webhelp/template/common/main.js b/xsl/webhelp/template/common/main.js
index cb71bd7d2..3a8b9a306 100644
--- a/xsl/webhelp/template/common/main.js
+++ b/xsl/webhelp/template/common/main.js
@@ -12,6 +12,9 @@ var treesettings = {
     persist: "cookie"
 };
 
+//Turn ON and OFF the animations for Show/Hide Sidebar. Extend this to other anime as well if any.
+var noAnimations=false;
+
 $(document).ready(function() {
 
 
@@ -189,21 +192,33 @@ function syncToc() {
  */
 function showHideToc() {
     var showHideButton = $("#showHideButton");
-    var leftNavigation = $("#leftnavigation");
+    var leftNavigation = $("#sidebar");
     var content = $("#content");
+    var animeTime=75
 
     if (showHideButton != undefined && showHideButton.hasClass("pointLeft")) {
         //Hide TOC
         showHideButton.removeClass('pointLeft').addClass('pointRight');
-        content.css("margin", "125px 0 0 0");
-        leftNavigation.css("display", "none");
-        showHideButton.attr("title", "Show the TOC tree");
+	
+	if(noAnimations) {
+	    leftNavigation.css("display", "none");
+	    content.css("margin", "125px 0 0 0");
+	} else {
+            leftNavigation.hide(animeTime);
+            content.animate( { "margin-left": 0 }, animeTime);
+        }
+        showHideButton.attr("title", "Show Sidebar");
     } else {
         //Show the TOC
         showHideButton.removeClass('pointRight').addClass('pointLeft');
-        content.css("margin", "125px 0 0 280px");
-        leftNavigation.css("display", "block");
-        showHideButton.attr("title", "Hide the TOC Tree");
+	if(noAnimations) {
+            content.css("margin", "125px 0 0 280px");
+            leftNavigation.css("display", "block");
+	} else {
+            content.animate( { "margin-left": '280px' }, animeTime);
+            leftNavigation.show(animeTime);
+        }
+        showHideButton.attr("title", "Hide Sidebar");
     }
 }
 
diff --git a/xsl/webhelp/xsl/webhelp.xsl b/xsl/webhelp/xsl/webhelp.xsl
index 3ed09adff..527d9a634 100644
--- a/xsl/webhelp/xsl/webhelp.xsl
+++ b/xsl/webhelp/xsl/webhelp.xsl
@@ -741,7 +741,7 @@ border: none; background: none; font-weight: none; color: none; }
                     </xsl:choose>
                 </xsl:variable>
 
-                <div>
+                <div id="sidebar"> <!--#sidebar id is used for showing and hiding the side bar -->
                     <div id="leftnavigation" style="padding-top:3px;">
                         <div id="tabs">
                             <ul>
@@ -933,8 +933,7 @@ border: none; background: none; font-weight: none; color: none; }
                     <head>
 		      <link rel="shortcut icon" href="favicon.ico"/>
 		      <meta http-equiv="Refresh" content="1; URL=content/{$default.topic}"/>
-		      <title><xsl:value-of select="//title[1]"/>&#160;
-		      </title>
+		      <title><xsl:value-of select="//title[1]"/>&#160;</title>
                     </head>
                     <body>
 		      If not automatically redirected, click <a href="content/{$default.topic}">content/<xsl:value-of select="$default.topic"/></a>