Changeset 25922

Show
Ignore:
Timestamp:
10.07.2012 14:15:16 (7 years ago)
Author:
sjm84
Message:

New TOC layout

Files:
1 modified

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>