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

Last change on this file since 30519 was 30519, checked in by davidb, 8 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
File size: 18.2 KB
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 repository browser.