root/main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/transform/pages/document.xsl @ 30519

Revision 30519, 18.2 KB (checked in by davidb, 4 years ago)

Breakbar moved from right-hand side to left-hand side. Page turn upgraded to swipe left-to-right after breakbar marker; more carefully prescribed size of window through CGI params so page can be centred in window if opened up full-size, as can happen in Expeditee with embedded browser

Line 
1<?xml version="1.0" encoding="ISO-8859-1"?>
2<xsl:stylesheet version="1.0"
3    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
4    xmlns:java="http://xml.apache.org/xslt/java"
5    xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
6    xmlns:gslib="http://www.greenstone.org/skinning"
7    xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"
8    extension-element-prefixes="java util"
9    exclude-result-prefixes="java util gsf">
10
11 
12  <xsl:template name="wrappedDocument">
13    <div id="gs-document">
14     
15      <xsl:call-template name="documentPre"/>
16      <div id="gs-document-text" class="documenttext" collection="{/page/pageResponse/collection/@name}"><!-- *** -->
17
18    <style>
19      /* Variation on detail given in:
20          http://stackoverflow.com/questions/2279396/how-to-remove-unwanted-space-between-rows-and-columns-in-table
21      */
22     
23      fieldset, form, label, legend,
24      table, caption, tbody, tfoot, thead, tr, th, td {
25        margin: 0;
26        padding: 0;
27        border: 0;
28        font-size: 100%;
29        font: inherit;
30        vertical-align: baseline;
31      }
32      </style>
33
34    <xsl:call-template name="create-html-header"/>
35   
36    <xsl:variable name="httpCollection">
37      <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
38    </xsl:variable>
39
40    <gsf:variable name="cgiParamSite">
41      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'site']/@value"/>
42    </gsf:variable>
43    <gsf:variable name="cgiParamD">
44      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'd']/@value"/>
45    </gsf:variable>
46    <gsf:variable name="cgiParamCL">
47      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'cl']/@value"/>
48    </gsf:variable>
49   
50    <gsf:variable name="cgiParamMusicStandWidth">
51      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'musicStandWidth']/@value"/>
52    </gsf:variable>
53    <gsf:variable name="cgiParamMusicStandHeight">
54      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'musicStandHeight']/@value"/>
55    </gsf:variable>
56    <gsf:variable name="cgiParamPageWidth">
57      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageWidth']/@value"/>
58    </gsf:variable>
59    <gsf:variable name="cgiParamPageHeight">
60      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageHeight']/@value"/>
61    </gsf:variable>
62    <gsf:variable name="cgiParamPageWidthWithBreakbar">
63      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageWidthWithBreakbar']/@value"/>
64    </gsf:variable>
65    <gsf:variable name="cgiParamPagePrefix">
66      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pagePrefix']/@value"/>
67    </gsf:variable>
68    <gsf:variable name="cgiParamPageSuffix">
69      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageSuffix']/@value"/>
70    </gsf:variable>
71    <gsf:variable name="cgiParamNumPages">
72      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'numPages']/@value"/>
73    </gsf:variable>
74    <gsf:variable name="cgiParamScaleFactor">
75      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'scaleFactor']/@value"/>
76    </gsf:variable>
77
78    <div style="width:{$cgiParamMusicStandWidth}px; margin: 0 auto;"> <!-- start of centering div -->
79     
80    <table id="gotoNavBar" align="center" width="{$cgiParamPageWidth}" style="position: relative; left: 30px;">
81      <tr>
82        <td align="left" width="20%">
83          <a href="javascript:musicStand.prevPageAnim(gs.cgiParams['d'],'.png')">
84        <span id="prevpagespan" style="display: inline;">
85          <img class="lessarrow" src="interfaces/{$interface_name}/images/previous-small.png"/>
86          <span id="prevpageval">
87            <script language="javascript" type="text/javascript">musicStand.docwritePrevPageNum()</script>
88          </span>
89        </span>
90          </a>
91          <script language="javascript" type="text/javascript">musicStand.activatePrevPageNum();</script>
92        </td>
93        <td align="center" width="60%">
94          <div>
95        <form name="GotoForm" method="get" action="{$library_name}">
96          <input type="hidden" name="a" value="d" />
97          <input type="hidden" name="site" value="{$cgiParamSite}" />
98          <input type="hidden" name="c" value="{$collNameChecked}" />
99          <input type="hidden" name="excerptid" value="gs-document-text" />
100          <input type="hidden" name="d" value="{$cgiParamD}" />
101          <input type="hidden" name="cl" value="{$cgiParamCL}" />
102          <input type="hidden" name="pageWidth" value="{$cgiParamPageWidth}" />
103          <input type="hidden" name="pageHeight" value="{$cgiParamPageHeight}" />
104          <input type="hidden" name="numPages" value="{$cgiParamNumPages}" />
105          <input type="hidden" name="pagePrefix" value="{$cgiParamPagePrefix}" />
106          <input type="hidden" name="pageSuffix" value="{$cgiParamPageSuffix}" />
107          <input type="hidden" name="scaleFactor" value="{$cgiParamScaleFactor}" />
108          <input type="hidden" name="view" value="simple" />
109          <input type="text" name="gp" size="3" maxlength="4" />
110          <input type="submit" value="go to page" /> <!-- make language fragment multilingual -->
111          <script language="javascript" type="text/javascript">
112            musicStand.docwriteOptOfPages();
113          </script>
114        </form>       
115          </div>         
116        </td>
117        <td align="right" width="20%">
118          <a href="javascript:musicStand.nextPageAnim(gs.cgiParams['d'],'.png')">
119        <span id="nextpagespan" style="display: inline">
120          <span id="nextpageval">
121            <script language="javascript" type="text/javascript">musicStand.docwriteNextPageNum()</script>
122          </span>
123          <img class="morearrow" src="interfaces/{$interface_name}/images/next-small.png"/>
124        </span>
125          </a>
126        </td>
127        <script language="javascript" type="text/javascript">musicStand.activateNextPageNum();</script>
128      </tr>
129    </table>
130
131    <table width="100%">
132      <tbody>
133      <tr>
134        <td><xsl:comment>filler</xsl:comment></td>
135
136        <td width="34">
137          <div id="slidercontainer" style="background: white; position: relative; left: 0px; top: 0px; width: 34px; height: {$cgiParamPageHeight}px;">
138        <div style="position: relative; left: 5px; top 0px;">
139         <div id="sliderbg">
140          <div id="slidertrackabove" style="position: absolute; left: 8px; top: 0px; width: 4px; height: 500px; z-index:4; background-color:#606060;">
141            <xsl:comment>filler</xsl:comment>
142          </div>
143          <div id="slidertrackbelow" style="position: absolute; left: 10px; top: 500px; width: 1px; height: 100px; z-index:4; background-color:#606060;">
144            <xsl:comment>filler</xsl:comment>
145          </div>
146         </div>
147
148         <!--
149         <div id="sliderpos" style="width:30px; height:11px;">
150          <img height="11" src="{$httpCollection}/images/brown2-slider-leftmargin.png" width="30"/>
151          </div>
152          -->
153         <div id="sliderpos" style="width:32px; height:27px;">
154          <img style="position: absolute; top: -15px; left: 5px;" width="32" height="27" src="{$httpCollection}/images/corner-arrow-left-margin.png" />
155         </div>
156
157
158        </div>
159        <script language="javascript" type="text/javascript">
160          <xsl:text disable-output-escaping="yes">var username = musicStand.getUsername();
161      var metaval;
162
163      if (username != null) {
164          var metaname = username + "-sliderposTop";
165          metaval = 700; // ***** major hack ****
166          //metaval  = gsapi.getLiveMetadata(gs.cgiParams["d"],metaname);
167          //if (metaval == "") {
168          //    // fallback to looking up non-user specific one
169          //    metaval  = gsapi.getLiveMetadata(gs.cgiParams["d"],"sliderposTop");
170          //}
171      }
172      else {
173          //metaval  = gsapi.getLiveMetadata(gs.cgiParams["d"],"sliderposTop");
174          metaval = 700; // ***** major hack ****
175      }
176      var sliderposTop = parseInt(metaval);
177
178      var speedBreak = musicStand.getSpeedBreak();
179
180      if (sliderposTop &gt; 0) {
181          sliderposTop *= musicStand.getScaleFactor();
182          speedBreak = sliderposTop;
183          musicStand.setSpeedBreak(speedBreak);
184      }
185
186      var sliderpos = document.getElementById('sliderpos');
187      sliderpos.style.top = speedBreak + "px";
188          sliderpos.style.left = "-8px";
189      sliderpos.onmousedown = dragSlider;
190      var sliderbg = document.getElementById('sliderbg');
191      sliderbg.onmousedown = dragSlider;
192
193
194      var trackabove = document.getElementById('slidertrackabove');
195      trackabove.style.height = speedBreak + "px";
196
197      var trackbelow = document.getElementById('slidertrackbelow');
198      trackbelow.style.top = speedBreak + "px";
199      trackbelow.style.height = (gs.cgiParams["pageHeight"] - speedBreak) + "px";
200          </xsl:text>
201        </script>
202          </div>
203        </td>
204
205
206       
207        <td style="position: relative;">
208          <div id="thispage" style="cursor: e-resize; background: white;        position: relative; left: 0px; top: 0px;        width: {$cgiParamPageWidth}px; height: {gs.cgiparam.PageHeight}px;">
209        <a onClick="return false;" onContextMenu="return false;" onMouseDown="return musicStand.nextOrPrevPageEvent(event,gs.cgiParams['d'],'.png')" onMouseUp="return false;">
210          <img border="0" height="{$cgiParamPageHeight}" id="thispageimg" src="{$httpCollection}/images/blank.gif" width="{$cgiParamPageWidth}"/>
211        </a>
212        <div id="nextpagediv" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);">
213          <img border="0" id="nextpageimg" src=""/>
214        </div>
215        <div id="nextpage-lr-div" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);">
216          <img border="0" id="nextpage-lr-img" src=""/>
217        </div>
218        <div id="prevpagediv" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);">
219          <img border="0" id="prevpageimg" src=""/>
220        </div>
221        <div id="prevpage-lr-div" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);">
222          <img border="0" id="prevpage-lr-img" src=""/>
223        </div>
224        <div id="animedgebleed" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);"><xsl:comment>filler</xsl:comment></div>
225        <div id="animedgebleed-lr" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);"><xsl:comment>filler</xsl:comment></div>
226       
227        <div id="loading">
228          <table height="100%" width="100%">
229            <tr>
230              <td width="45%">                                          </td>                                           <td align="left">
231              <span id="loadingdots">loading</span>
232            </td>
233          </tr>
234        </table>
235          </div>
236          </div>
237          <style>
238        div.postit    {background-color: rgba(250,250,200,0.7);  color: black; }
239        a.postit:link   {background-color: rgba(250,250,200,0.7); color: black; text-decoration: none; }
240        a.postit:visited {background-color: rgba(250,250,200,0.7); color: black; text-decoration: none; }
241       
242        a.postit:hover   {color: rgba(150,110 ,0,0.7); }
243         
244        div.pagemenu    { background-color: rgba(250,250,200,0.7); color: black; }
245          </style>
246         
247         
248         
249          <div id="coord"
250           style="position: absolute; left: 0px; top: 0px; z-index: 10; visibility: hidden;">
251        <xsl:comment>Mouse coord debug div</xsl:comment>
252          </div>
253
254<!--
255<style>
256
257div.postit    {background-color: _postitbgcol_;
258        color: black; }
259a.postit:link    {background-color: _postitbgcol_;
260              color: black;
261              text-decoration: none; }
262a.postit:visited {background-color: _postitbgcol_;
263              color: black;
264              text-decoration: none; }
265
266a.postit:hover   {color: _postitselcol_; }
267
268</style>
269
270<div id="expediteee"
271     style="position: absolute; right: 4px; top: 2px; z-index: 10; visibility: visible;">
272  <a id="expediteemode" class="postit" href=""></a>
273
274  <script type="text/javascript">
275    var href=document.getElementById("expediteemode");
276    var url = document.location.toString();
277
278    var expediteeVal       = (expeditee) ? 1 : 0;
279    var toggleExpediteeVal = (expeditee) ? 0 : 1;
280
281    var replaceRE;
282    var withStr = "&expeditee="+toggleExpediteeVal;
283
284    var cutpos = url.indexOf("&expeditee=");
285
286    if (cutpos>=0) {
287      replaceRE = new RegExp("&expeditee="+expediteeVal);     
288    }
289    else {
290      replaceRE = new RegExp("$");     
291    }
292
293    url = url.replace(replaceRE,withStr);
294    href.setAttribute("href",url);
295
296    if (expeditee) {
297        // toggle
298        href.innerHTML = '<span style="font-size: 9pt;"><i>Switch to standard mode</i></span>';
299    }
300    else {
301        href.innerHTML = '<span style="font-size: 9pt;"><i>Switch to Expeditee mode</i></span>';
302    }
303
304  </script>
305
306
307</div>
308
309-->
310
311
312                           
313              <div class="editable-menu" id="pagemenu" onmouseout="javascript:return musicStand.hidePageMenu(this,event);" style="position: absolute; right: 4px; bottom: 2px;        z-index: 10; visibility: hidden;">
314        <font size="-1">
315          <div class="pagemenu" id="pagemenu1">Cancel turn</div>
316          <div class="pagemenu" id="pagemenu2">Next page</div>
317          <div class="pagemenu" id="pagemenu3">Previous page</div>
318        </font>
319          </div>
320         
321          <div id="annotateCanvas" style="position: absolute; left: 0px; top: 0px; visibility: visible; z-index: 2;" >
322        <xsl:comment>filler</xsl:comment>
323          </div>
324        </td>
325
326<!--
327
328        <td>
329          <div id="slidercontainer" style="background: white; position: relative; left: 0px; top: 0px; width: 40px; height: {$cgiParamPageHeight}px;">
330        <div id="sliderbg">
331          <div id="slidertrackabove" style="position: absolute; left: 8px; top: 0px; width: 4px; height: 500px; z-index:4; background-color:#606060;">
332            <xsl:comment>filler</xsl:comment>
333          </div>
334          <div id="slidertrackbelow" style="position: absolute; left: 10px; top: 500px; width: 1px; height: 100px; z-index:4; background-color:#606060;">
335            <xsl:comment>filler</xsl:comment>
336          </div>
337        </div>
338       
339        <div id="sliderpos" style="width:30px; height:11px;">
340          <img height="11" src="{$httpCollection}/images/brown2-slider.png" width="30"/>
341        </div>
342        <script language="javascript" type="text/javascript">
343          <xsl:text disable-output-escaping="yes">var username = musicStand.getUsername();
344      var metaval;
345
346      if (username != null) {
347          var metaname = username + "-sliderposTop";
348          metaval = 700; // ***** major hack ****
349          //metaval  = gsapi.getLiveMetadata(gs.cgiParams["d"],metaname);
350          //if (metaval == "") {
351          //    // fallback to looking up non-user specific one
352          //    metaval  = gsapi.getLiveMetadata(gs.cgiParams["d"],"sliderposTop");
353          //}
354      }
355      else {
356          //metaval  = gsapi.getLiveMetadata(gs.cgiParams["d"],"sliderposTop");
357          metaval = 700; // ***** major hack ****
358      }
359      var sliderposTop = parseInt(metaval);
360
361      var speedBreak = musicStand.getSpeedBreak();
362
363      if (sliderposTop &gt; 0) {
364          sliderposTop *= musicStand.getScaleFactor();
365          speedBreak = sliderposTop;
366          musicStand.setSpeedBreak(speedBreak);
367      }
368
369      var sliderpos = document.getElementById('sliderpos');
370      sliderpos.style.top = speedBreak + "px";
371          sliderpos.style.left = "-8px";
372      sliderpos.onmousedown = dragSlider;
373      var sliderbg = document.getElementById('sliderbg');
374      sliderbg.onmousedown = dragSlider;
375
376
377      var trackabove = document.getElementById('slidertrackabove');
378      trackabove.style.height = speedBreak + "px";
379
380      var trackbelow = document.getElementById('slidertrackbelow');
381      trackbelow.style.top = speedBreak + "px";
382      trackbelow.style.height = (gs.cgiParams["pageHeight"] - speedBreak) + "px";
383          </xsl:text>
384        </script>
385          </div>
386        </td>
387
388-->
389       
390         </tr>
391         </tbody>
392        </table>
393
394        </div> <!-- end of centering div -->
395     
396      </div>
397    </div>
398  </xsl:template>
399
400
401
402
403
404
405 
406  <xsl:template name="wrappedDocumentXXX">
407    <xsl:choose>
408      <!-- NOTE: alb = ajax load bypass -->
409      <!--
410       If the docType is hierarchy and we want to bypass the ajax load then do this
411       OR If the docType is hierarchy and we have asked for the expanded document OR we have asked for the top level document then do this
412      -->
413      <xsl:when test="/page/pageResponse/document/@docType = 'hierarchy' and (/page/pageRequest/paramList/param[@name = 'alb']/@value = '1' or (string-length(/page/pageRequest/paramList/param[@name = 'd']/@value) > 0 and (/page/pageRequest/paramList/param[@name = 'ed']/@value = '1' or not(util:contains(/page/pageResponse/document/@selectedNode, '.')))))">
414    <div id="gs-document">
415      <xsl:call-template name="documentPre"/>
416      <div id="gs-document-text" class="documenttext" collection="{/page/pageResponse/collection/@name}"><!-- *** -->
417        <xsl:for-each select="documentNode">
418          <xsl:call-template name="wrapDocumentNodes"/>
419        </xsl:for-each>
420      </div>
421    </div>
422      </xsl:when>
423      <xsl:when test="/page/pageResponse/document/@docType = 'paged' or /page/pageResponse/document/@docType = 'pagedhierarchy'">
424    <div id="gs-document">                         
425      <div id="tocLoadingImage" style="text-align:center;">
426        <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>
427      </div>
428    </div>
429    <script type="text/javascript">
430      <xsl:text disable-output-escaping="yes">
431                        $(window).load(function()
432                        {
433                            var sectionID = gs.cgiParams.d;
434                            var callbackFunction = null;
435                            if(sectionID.indexOf("\\.") == -1)
436                            {
437                                callbackFunction = function()
438                                {
439                                    focusSection(sectionID);
440                                };
441                            }
442                       
443                            var docID = sectionID.replace(/([^.]*)\..*/, "$1");
444                            var url = gs.xsltParams.library_name + "?a=d&amp;c=" + gs.cgiParams.c + "&amp;excerptid=gs-document&amp;dt=hierarchy&amp;d=" + docID;
445                            loadTopLevelPage(callbackFunction, url);
446                        });
447      </xsl:text>
448    </script>
449      </xsl:when>
450      <xsl:otherwise>
451    <div id="gs-document">                         
452      <div id="tocLoadingImage" style="text-align:center;">
453        <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>
454      </div>
455    </div>
456    <script type="text/javascript">
457      <xsl:text disable-output-escaping="yes">
458                        $(window).load(function()
459                        {
460                            loadTopLevelPage(function()
461                            {
462                                //Don't focus the section until the table of contents is loaded
463                                var tocCheck = function()
464                                {
465                                    if(gs.variables.tocLoaded)
466                                    {
467                                        focusSection("</xsl:text><xsl:value-of select="/page/pageResponse/document/@selectedNode"/><xsl:text disable-output-escaping="yes">");
468                                    }
469                                    else
470                                    {
471                                        setTimeout(tocCheck, 500);
472                                    }
473                                }
474                                tocCheck();
475                            });
476                        });
477      </xsl:text>
478    </script>
479      </xsl:otherwise>
480    </xsl:choose>
481       
482    <div class="clear"><xsl:text> </xsl:text></div>
483  </xsl:template>
484
485</xsl:stylesheet>
Note: See TracBrowser for help on using the browser.