Changeset 26226

Timestamp:

2012-09-20T11:31:03+12:00 (12 years ago)

Author:

sjm84

Message:

Added an option to fix the table of contents to the right side of the page

Location:

main/trunk/greenstone3/web

Files:

• WEB-INF/classes/interface_default.properties (modified) (2 diffs)
• interfaces/default/images/floattoc.png (added)
• interfaces/default/images/leftarrow.png (added)
• interfaces/default/js/document_scripts.js (modified) (1 diff)
• interfaces/default/transform/layouts/toc.xsl (modified) (3 diffs)

main/trunk/greenstone3/web/WEB-INF/classes/interface_default.properties

@@ -16 +16 @@
 prev_image=interfaces/__INTERFACE_NAME__/images/previous.png
 zoom_image=interfaces/__INTERFACE_NAME__/images/zoom.png
+left_arrow_image=interfaces/__INTERFACE_NAME__/images/leftarrow.png
+float_toc_image=interfaces/__INTERFACE_NAME__/images/floattoc.png
 
 #***** TEXT FRAGMENTS *****
@@ -135 +137 @@
 doc.zoomTooltip=Enable or disable zooming images in the standard view
 doc.slideshowTooltip=Enable or disable the slide show view
+doc.floatingTooltip=Fix the table of contents to the right side of the screen
 
 doc.document=Document

main/trunk/greenstone3/web/interfaces/default/js/document_scripts.js

@@ -1249 +1249 @@
 }
 
+function floatMenu(enabled)
+{
+    var menu = $(".tableOfContentsContainer");
+    if(enabled)
+    {
+        menu.data("position", menu.css("position"));
+        menu.data("width", menu.css("width"));
+        menu.data("right", menu.css("right"));
+        menu.data("top", menu.css("top"));
+        menu.data("max-height", menu.css("max-height"));
+        menu.data("overflow", menu.css("overflow"));
+        menu.data("z-index", menu.css("z-index"));
+        
+        menu.css("position", "fixed");
+        menu.css("width", "300px");
+        menu.css("right", "0px");
+        menu.css("top", "100px");
+        menu.css("max-height", "600px");
+        menu.css("overflow", "auto");
+        menu.css("z-index", "200");
+        
+        $("#unfloatTOCButton").show();
+    }
+    else
+    {
+        menu.css("position", menu.data("position"));
+        menu.css("width", menu.data("width"));
+        menu.css("right", menu.data("right"));
+        menu.css("top", menu.data("top"));
+        menu.css("max-height", menu.data("max-height"));
+        menu.css("overflow", menu.data("overflow"));
+        menu.css("z-index", menu.data("z-index"));
+        
+        $("#unfloatTOCButton").hide();
+        $("#floatTOCToggle").attr("checked", false);
+    }
+}
+
 function showSlideShow()
 {

main/trunk/greenstone3/web/interfaces/default/transform/layouts/toc.xsl

@@ -39 +39 @@
             <table class="tocTable ui-widget-content">
                 <tr>
+                    <td id="unfloatTOCButton" style="display:none;">
+                        <a href="javascript:floatMenu(false);">
+                            <img class="icon" style="padding-top:3px;">
+                                <xsl:attribute name="src">
+                                    <xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'left_arrow_image')"/>
+                                </xsl:attribute>
+                            </img>
+                        </a>
+                    </td>
                     <td style="vertical-align:top; text-align:right;">
                         <a id="sidebarMinimizeButton" href="javascript:minimizeSidebar();" style="float: right; font-size:0.6em;">
@@ -288 +297 @@
                 </xsl:if><xsl:text> </xsl:text>
                 
+                <!-- Zoom on/off button -->
                 <li id="zoomOptions" style="display:none;">
                     <xsl:attribute name="title"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.zoomTooltip')"/></xsl:attribute>
@@ -303 +313 @@
                     </script>
                 </li>
+
+                <!-- Floating TOC on/off button -->
+                <xsl:if test="count(//documentNode) > 1 and not(/page/pageResponse/format[@type='display']/gsf:option[@name='TOC']) or /page/pageResponse/format[@type='display']/gsf:option[@name='TOC']/@value='true'">
+                    <li id="floatingTOCOptions">
+                        <xsl:attribute name="title"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.floatingTooltip')"/></xsl:attribute>
+                        <img>
+                            <xsl:attribute name="src"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'float_toc_image')"/></xsl:attribute>
+                        </img>
+                        <input id="floatTOCToggle" type="checkbox"/>
+                        <script type="text/javascript">
+                            <xsl:text disable-output-escaping="yes">
+                                $("#floatTOCToggle").attr("checked", false);
+                                $("#floatTOCToggle").click(function()
+                                {
+                                    floatMenu($("#floatTOCToggle").attr("checked"));
+                                });
+                            </xsl:text>
+                        </script>
+                    </li>
+                </xsl:if>
             </ul>
             <div style="clear:both;"><xsl:text> </xsl:text></div>