Ignore:
Timestamp:
2012-07-10T14:15:16+12:00 (12 years ago)
Author:
sjm84
Message:

New TOC layout

File:
1 edited

Legend:

Unmodified
Added
Removed
  • main/trunk/greenstone3/web/interfaces/default/transform/layouts/toc.xsl

    r25822 r25922  
    1010   
    1111    <xsl:template name="rightSidebar">
    12         <table id="rightSidebar">
    13             <tr><td>
    14                 <xsl:call-template name="viewOptions"/>
    15             </td></tr>
    16             <tr><td>
    17                 <div id="contentsArea">
    18                     <!-- show the berry basket if it's turned on -->
    19                     <gslib:berryBasket/>
     12        <div id="rightSidebar">
     13            <xsl:call-template name="displayCoverImage"/>
     14            <xsl:call-template name="viewOptions"/>
     15            <xsl:call-template name="displayTOC"/>
     16        </div>
     17    </xsl:template>
     18   
     19    <xsl:template name="displayCoverImage">
     20        <!-- Need to be in the context of the top-level documentNode rather than the document for the gsf:metadata call to work -->
     21        <xsl:for-each select="documentNode">
     22            <xsl:variable name="hasCover"><gsf:metadata name="hascover"/></xsl:variable>
     23            <xsl:if test="$hasCover = '1' and (not(/page/pageResponse/format[@type='display']/gsf:option[@name='coverImage']) or /page/pageResponse/format[@type='display']/gsf:option[@name='coverImage']/@value='true')">
     24                <!-- the book's cover image -->
     25                <div id="coverImage">
     26                    <img>
     27                        <xsl:attribute name="src"><xsl:value-of select="$httpPath"/>/index/assoc/<gsf:metadata name="assocfilepath"/>/cover.jpg</xsl:attribute>
     28                    </img><xsl:text> </xsl:text>
     29                </div>
     30            </xsl:if>
     31        </xsl:for-each>
     32    </xsl:template>
     33   
     34    <xsl:template name="displayTOC">
     35        <div class="tableOfContentsContainer ui-state-default">
     36            <table class="tocTable ui-widget-content">
     37                <tr>
     38                    <td style="vertical-align:top; text-align:right;">
     39                        <a id="sidebarMinimizeButton" href="javascript:minimizeSidebar();" style="float: right; font-size:0.6em;">
     40                            <img class="icon" style="padding-top:3px;">
     41                                <xsl:attribute name="src">
     42                                    <xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'collapse_image')"/>
     43                                </xsl:attribute>
     44                            </img>
     45                        </a>
     46                        <a id="sidebarMaximizeButton" href="javascript:maximizeSidebar();" style="float: right; font-size:0.6em; display:none;">
     47                            <img class="icon" style="padding-top:3px;">
     48                                <xsl:attribute name="src">
     49                                    <xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'expand_image')"/>
     50                                </xsl:attribute>
     51                            </img>
     52                        </a>
     53                    </td>
     54                </tr>
     55                <tr><td>
     56                    <div id="contentsArea">
     57                        <!-- show the berry basket if it's turned on -->
     58                        <gslib:berryBasket/>
    2059
    21                     <!-- Need to be in the context of the top-level documentNode rather than the document for the gsf:metadata call to work -->
    22                     <xsl:for-each select="documentNode">
    23                         <xsl:variable name="hasCover"><gsf:metadata name="hascover"/></xsl:variable>
    24                         <xsl:if test="$hasCover = '1'">
    25                             <!-- the book's cover image -->
    26                             <div id="coverImage">
    27                                 <xsl:attribute name="class">
    28                                     <xsl:choose>
    29                                         <xsl:when test="not(/page/pageResponse/format[@type='display']/gsf:option[@name='coverImage']) or /page/pageResponse/format[@type='display']/gsf:option[@name='coverImage']/@value='true'">visible</xsl:when>
    30                                         <xsl:otherwise>hidden</xsl:otherwise>   
    31                                     </xsl:choose>
    32                                 </xsl:attribute>
    33                                 <gslib:coverImage/><xsl:text> </xsl:text>
    34                             </div>
    35                         </xsl:if>
    36                     </xsl:for-each>
    37 
    38                     <!-- the contents (if enabled) -->
    39                     <xsl:choose>
    40           <xsl:when test="/page/pageResponse/document/@docType = 'simple'"></xsl:when>
    41                         <xsl:when test="/page/pageResponse/document/@docType = 'paged'">
    42                             <gsf:image type="Thumb"/>
    43                             <!-- Table of contents will be dynamically retrieved when viewing a paged document -->
    44                             <script type="text/javascript">
    45                                 <xsl:text disable-output-escaping="yes">
    46                                     $(window).load(function()
    47                                     {
    48                                         retrieveTableOfContentsAndTitles();
    49                                     });
    50                                 </xsl:text>
    51                             </script>
    52                             <div id="tableOfContents"><xsl:text> </xsl:text></div>
    53                             <div id="tocLoadingImage" style="text-align:center;">
    54                                 <img src="{util:getInterfaceText($interface_name, /page/@lang, 'loading_image')}"/><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.loading')"/><xsl:text>...</xsl:text>
    55                             </div>
    56                             <table style="width:100%;"><tbody><tr>
    57                                 <td><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.filter_pages')"/><xsl:text>: </xsl:text><input id="filterText" type="text" size="27"/></td>
    58                             </tr></tbody></table>
    59                         </xsl:when>
    60                         <xsl:when test="not(/page/pageRequest/paramList/param[@name = 'ed']/@value = '1')">
    61                             <div id="tableOfContents">
     60                        <!-- the contents (if enabled) -->
     61                        <xsl:choose>
     62                            <xsl:when test="/page/pageResponse/document/@docType = 'paged'">
     63                                <gsf:image type="Thumb"/>
     64                                <!-- Table of contents will be dynamically retrieved when viewing a paged document -->
     65                                <script type="text/javascript">
     66                                    <xsl:text disable-output-escaping="yes">
     67                                        $(window).load(function()
     68                                        {
     69                                            retrieveTableOfContentsAndTitles();
     70                                        });
     71                                    </xsl:text>
     72                                </script>
     73                                <div id="tableOfContents"><xsl:text> </xsl:text></div>
    6274                                <div id="tocLoadingImage" style="text-align:center;">
    6375                                    <img src="{util:getInterfaceText($interface_name, /page/@lang, 'loading_image')}"/><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.loading')"/><xsl:text>...</xsl:text>
    6476                                </div>
    65                             </div>
    66                             <script type="text/javascript">
    67                                 <xsl:text disable-output-escaping="yes">
    68                                     $(window).load(function()
    69                                     {
    70                                         retrieveFullTableOfContents();
    71                                     });
    72                                 </xsl:text>
    73                             </script>
    74                         </xsl:when>
    75                         <xsl:otherwise>
    76                             <div id="tableOfContents">
    77                                 <xsl:attribute name="class">
    78                                     <xsl:choose>
    79                                         <xsl:when 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'">visible</xsl:when>
    80                                         <xsl:otherwise>hidden</xsl:otherwise>
    81                                     </xsl:choose>
    82                                 </xsl:attribute>
    83                                 <xsl:for-each select="documentNode">
    84                                     <xsl:call-template name="documentNodeTOC"/>
    85                                 </xsl:for-each>
    86                             </div>
    87                         </xsl:otherwise>
    88                     </xsl:choose>
    89                 </div>
    90             </td></tr>
    91         </table>
     77                                <table style="width:100%;"><tbody><tr>
     78                                    <td><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.filter_pages')"/><xsl:text>: </xsl:text><input id="filterText" type="text" size="27"/></td>
     79                                </tr></tbody></table>
     80                            </xsl:when>
     81                            <xsl:when test="not(/page/pageRequest/paramList/param[@name = 'ed']/@value = '1')">
     82                                <div id="tableOfContents">
     83                                    <div id="tocLoadingImage" style="text-align:center;">
     84                                        <img src="{util:getInterfaceText($interface_name, /page/@lang, 'loading_image')}"/><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.loading')"/><xsl:text>...</xsl:text>
     85                                    </div>
     86                                </div>
     87                                <script type="text/javascript">
     88                                    <xsl:text disable-output-escaping="yes">
     89                                        $(window).load(function()
     90                                        {
     91                                            retrieveFullTableOfContents();
     92                                        });
     93                                    </xsl:text>
     94                                </script>
     95                            </xsl:when>
     96                            <xsl:otherwise>
     97                                <div id="tableOfContents">
     98                                    <xsl:attribute name="class">
     99                                        <xsl:choose>
     100                                            <xsl:when 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'">visible</xsl:when>
     101                                            <xsl:otherwise>hidden</xsl:otherwise>
     102                                        </xsl:choose>
     103                                    </xsl:attribute>
     104                                    <xsl:for-each select="documentNode">
     105                                        <xsl:call-template name="documentNodeTOC"/>
     106                                    </xsl:for-each>
     107                                </div>
     108                            </xsl:otherwise>
     109                        </xsl:choose>
     110                    </div>
     111                </td></tr>
     112            </table>
     113        </div>
    92114    </xsl:template>
    93115   
     
    193215   
    194216    <xsl:template name="viewOptions">
    195         <table class="viewOptions ui-state-default ui-corner-all"><tr>
    196 
    197             <!-- Paged-image options -->
    198             <xsl:if test="count(//documentNode/metadataList/metadata[@name = 'Screen']) > 0 or /page/pageResponse/document/documentNode/@docType = 'paged'">
    199                 <td>
    200                     <select id="viewSelection" onchange="changeView();">
    201                         <xsl:choose>
    202                             <xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'image'">
    203                                 <option>Default view</option>
    204                                 <option selected="true">Image view</option>
    205                                 <option>Text view</option>
    206                             </xsl:when>
    207                             <xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'text'">
    208                                 <option>Default view</option>
    209                                 <option>Image view</option>
    210                                 <option selected="true">Text view</option>
    211                             </xsl:when>
    212                             <xsl:otherwise>
    213                                 <option selected="true">Default view</option>
    214                                 <option>Image view</option>
    215                                 <option>Text view</option>
    216                             </xsl:otherwise>
    217                         </xsl:choose>
    218                     </select>
    219                 </td>
    220             </xsl:if>
    221        
    222             <!-- Realistic books link -->
    223             <xsl:if test="/page/pageResponse/collection[@name = $collName]/metadataList/metadata[@name = 'tidyoption'] = 'tidy'">
    224                 <td>
    225                     <img>
    226                         <xsl:attribute name="src"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'realistic_books_image')"/></xsl:attribute>
    227                     </img>
    228                     <input id="rbOption" type="checkbox" onclick="bookInit();" class="optionCheckBox"/>
    229                 </td>
    230             </xsl:if>
     217        <div id="viewAndZoomOptions" class="ui-state-default ui-corner-all">
     218            <ul id="viewOptions">
     219                <!-- Paged-image options -->
     220                <xsl:if test="count(//documentNode/metadataList/metadata[@name = 'Screen']) > 0 or /page/pageResponse/document/documentNode/@docType = 'paged'">
     221                    <li>
     222                        <select id="viewSelection" onchange="changeView();">
     223                            <xsl:choose>
     224                                <xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'image'">
     225                                    <option>Default view</option>
     226                                    <option selected="true">Image view</option>
     227                                    <option>Text view</option>
     228                                </xsl:when>
     229                                <xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'text'">
     230                                    <option>Default view</option>
     231                                    <option>Image view</option>
     232                                    <option selected="true">Text view</option>
     233                                </xsl:when>
     234                                <xsl:otherwise>
     235                                    <option selected="true">Default view</option>
     236                                    <option>Image view</option>
     237                                    <option>Text view</option>
     238                                </xsl:otherwise>
     239                            </xsl:choose>
     240                        </select>
     241                    </li>
     242                </xsl:if>
    231243           
    232             <!-- Highlight on/off button -->
    233             <xsl:if test="/page/pageRequest/paramList/param[@name = 'p.a']/@value = 'q' or /page/pageRequest/paramList/param[@name = 's1.query']">
    234                 <td>
    235                     <img>
    236                         <xsl:attribute name="src"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'highlight_image')"/></xsl:attribute>
    237                     </img>
    238                     <input id="highlightOption" type="checkbox" class="optionCheckBox" onclick="swapHighlight();">
    239                         <xsl:if test="/page/pageRequest/paramList/param[@name = 'hl']/@value = 'on'">
    240                             <xsl:attribute name="checked">true</xsl:attribute>
    241                         </xsl:if>
    242                     </input>
    243                 </td>
    244             </xsl:if>
    245             <td style="vertical-align:top; text-align:right;">
    246                 <xsl:if test="not(/page/pageResponse/document/@docType='simple') and (not(/page/pageResponse/format[@type='display']/gsf:option[@name='TOC']) or /page/pageResponse/format[@type='display']/gsf:option[@name='TOC']/@value='true')">
    247                     <span class="tableOfContentsTitle"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.table_of_contents')"/></span>
    248 
    249                     <a id="sidebarMinimizeButton" href="javascript:minimizeSidebar();" style="float: right; font-size:0.6em;">
    250                         <img class="icon" style="padding-top:3px;">
    251                             <xsl:attribute name="src">
    252                                 <xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'collapse_image')"/>
    253                             </xsl:attribute>
     244                <!-- Realistic books link -->
     245                <xsl:if test="/page/pageResponse/collection[@name = $collName]/metadataList/metadata[@name = 'tidyoption'] = 'tidy'">
     246                    <li>
     247                        <xsl:attribute name="title"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.realisticBooksTooltip')"/></xsl:attribute>
     248                        <img>
     249                            <xsl:attribute name="src"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'realistic_books_image')"/></xsl:attribute>
    254250                        </img>
    255                     </a>
    256                     <a id="sidebarMaximizeButton" href="javascript:maximizeSidebar();" style="float: right; font-size:0.6em; display:none;">
    257                         <img class="icon" style="padding-top:3px;">
    258                             <xsl:attribute name="src">
    259                                 <xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'expand_image')"/>
    260                             </xsl:attribute>
     251                        <input id="rbOption" type="checkbox" onclick="bookInit();" class="optionCheckBox"/>
     252                    </li>
     253                </xsl:if>
     254               
     255                <!-- Highlight on/off button -->
     256                <xsl:if test="util:contains(/page/pageRequest/paramList/param[@name = 'p.s']/@value, 'Query')">
     257                    <li>
     258                        <xsl:attribute name="title"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.highlightTooltip')"/></xsl:attribute>
     259                        <img>
     260                            <xsl:attribute name="src"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'highlight_image')"/></xsl:attribute>
    261261                        </img>
    262                     </a>
     262                        <input id="highlightOption" type="checkbox" class="optionCheckBox" onclick="swapHighlight();">
     263                            <xsl:if test="/page/pageRequest/paramList/param[@name = 'hl']/@value = 'on'">
     264                                <xsl:attribute name="checked">true</xsl:attribute>
     265                            </xsl:if>
     266                        </input>
     267                    </li>
    263268                </xsl:if>
    264             </td>
    265         </tr>
    266         <tr id="zoomOptions">
    267             <!-- This is invisible unless it is made visible by Javascript controlling the image zooming -->
    268             <xsl:attribute name="style">display: none;</xsl:attribute>
    269             <td style="width:40%;">
    270                 <xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.zoom')"/><input id="zoomToggle" type="checkbox"/>
     269            </ul>
     270            <ul id="zoomOptions">
     271                <!-- This is invisible unless it is made visible by Javascript controlling the image zooming -->
     272                <xsl:attribute name="style">display: none;</xsl:attribute>
     273                <li style="width:10%;">
     274                    <xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.zoom')"/>
     275                </li>
     276                <li style="width:5%;">
     277                    <input id="zoomToggle" type="checkbox"/>
     278                    <script type="text/javascript">
     279                        <xsl:text disable-output-escaping="yes">
     280                            $("#zoomToggle").change(function()
     281                            {
     282                                _imageZoomEnabled = !_imageZoomEnabled;
     283                            });
     284                        </xsl:text>
     285                    </script>
     286                </li>
     287                <li style="width:15%;"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.zoom_size')"/><xsl:text>:</xsl:text></li>
     288                <li id="zoomSlider" style="width:50%; height:5px;"><xsl:text> </xsl:text></li>
    271289                <script type="text/javascript">
    272290                    <xsl:text disable-output-escaping="yes">
    273                         $("#zoomToggle").change(function()
     291                        $("#zoomSlider").slider(
    274292                        {
    275                             _imageZoomEnabled = !_imageZoomEnabled;
     293                            change: function(event, ui)
     294                            {
     295                                var sliderValue = ui.value;
     296                                var divs = document.getElementsByTagName("DIV");
     297                                for(var i = 0; i &lt; divs.length; i++)
     298                                {
     299                                    if(divs[i].getAttribute("id") &amp;&amp; divs[i].getAttribute("id").search(/^mover.*/) != -1)
     300                                    {
     301                                        divs[i].style.height = 200 + (2 * sliderValue) + "px";
     302                                        divs[i].style.width = 200 + (2 * sliderValue) + "px";
     303                                    }
     304                                }
     305                            }
    276306                        });
    277307                    </xsl:text>
    278308                </script>
    279             </td>
    280             <td style="width:60%;">
    281                 <div>
    282                     <div style="float:left; width:30%;"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.zoom_size')"/><xsl:text>:</xsl:text></div>
    283                     <div id="zoomSlider" style="float:right; width:65%; height:5px; margin-top:6px;"><xsl:text> </xsl:text></div>
    284                     <script type="text/javascript">
    285                         <xsl:text disable-output-escaping="yes">
    286                             $("#zoomSlider").slider(
    287                             {
    288                                 change: function(event, ui)
    289                                 {
    290                                     var sliderValue = ui.value;
    291                                     var divs = document.getElementsByTagName("DIV");
    292                                     for(var i = 0; i &lt; divs.length; i++)
    293                                     {
    294                                         if(divs[i].getAttribute("id") &amp;&amp; divs[i].getAttribute("id").search(/^mover.*/) != -1)
    295                                         {
    296                                             divs[i].style.height = 200 + (2 * sliderValue) + "px";
    297                                             divs[i].style.width = 200 + (2 * sliderValue) + "px";
    298                                         }
    299                                     }
    300                                 }
    301                             });
    302                         </xsl:text>
    303                     </script>
    304                     <style>.ui-slider .ui-slider-handle{height:0.8em; width:1.0em;}</style>
    305                     <div style="float:clear;"><xsl:text> </xsl:text></div>
    306                 </div>
    307             </td>
    308         </tr>
    309         </table>   
     309                <style>.ui-slider .ui-slider-handle{height:0.8em; width:1.0em;}</style>
     310            </ul>
     311        </div>
    310312    </xsl:template>
    311313</xsl:stylesheet>
Note: See TracChangeset for help on using the changeset viewer.