Ignore:
Timestamp:
2016-05-09T22:04:34+12:00 (8 years ago)
Author:
davidb
Message:

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:
1 edited

Legend:

Unmodified
Added
Removed

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

    r30463 r30519  
    4848    </gsf:variable>
    4949   
     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>
    5056    <gsf:variable name="cgiParamPageWidth">
    5157      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageWidth']/@value"/>
    … …  
    5460      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageHeight']/@value"/>
    5561    </gsf:variable>
     62    <gsf:variable name="cgiParamPageWidthWithBreakbar">
     63      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pageWidthWithBreakbar']/@value"/>
     64    </gsf:variable>
    5665    <gsf:variable name="cgiParamPagePrefix">
    5766      <xsl:value-of select="/page/pageRequest/paramList/param[@name = 'pagePrefix']/@value"/>
    … …  
    6776    </gsf:variable>
    6877
    69    
    70     <table id="gotoNavBar" align="center" width="{$cgiParamPageWidth}">
     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;">
    7181      <tr>
    7282        <td align="left" width="20%">
    … …  
    118128      </tr>
    119129    </table>
     130
    120131    <table width="100%">
     132      <tbody>
    121133      <tr>
    122         <td/>
    123         <td>
     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;">
    124208          <div id="thispage" style="cursor: e-resize; background: white;        position: relative; left: 0px; top: 0px;        width: {$cgiParamPageWidth}px; height: {gs.cgiparam.PageHeight}px;">
    125209        <a onClick="return false;" onContextMenu="return false;" onMouseDown="return musicStand.nextOrPrevPageEvent(event,gs.cgiParams['d'],'.png')" onMouseUp="return false;">
    … …  
    129213          <img border="0" id="nextpageimg" src=""/>
    130214        </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>
    131218        <div id="prevpagediv" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);">
    132219          <img border="0" id="prevpageimg" src=""/>
    133220        </div>
    134         <div id="animedgebleed" style="clip : rect(0px, {$cgiParamPageWidth}px, {$cgiParamPageHeight}px, {$cgiParamPageWidth}px);">                             </div>                              <div id="loading">
    135         <table height="100%" width="100%">
    136           <tr>
    137             <td width="45%">                                            </td>                                           <td align="left">
    138             <span id="loadingdots">loading</span>
    139           </td>
     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>
    140233          </tr>
    141234        </table>
    … …  
    227320         
    228321          <div id="annotateCanvas" style="position: absolute; left: 0px; top: 0px; visibility: visible; z-index: 2;" >
    229         <!-- filler -->
    230           </div>
    231         </td>
     322        <xsl:comment>filler</xsl:comment>
     323          </div>
     324        </td>
     325
     326<!--
     327
    232328        <td>
    233329          <div id="slidercontainer" style="background: white; position: relative; left: 0px; top: 0px; width: 40px; height: {$cgiParamPageHeight}px;">
    234330        <div id="sliderbg">
    235331          <div id="slidertrackabove" style="position: absolute; left: 8px; top: 0px; width: 4px; height: 500px; z-index:4; background-color:#606060;">
    236             <!-- filler -->
     332            <xsl:comment>filler</xsl:comment>
    237333          </div>
    238334          <div id="slidertrackbelow" style="position: absolute; left: 10px; top: 500px; width: 1px; height: 100px; z-index:4; background-color:#606060;">
    239             <!-- filler -->
     335            <xsl:comment>filler</xsl:comment>
    240336          </div>
    241337        </div>
    … …  
    289385          </div>
    290386        </td>
     387
     388-->
     389       
    291390         </tr>
     391         </tbody>
    292392        </table>
    293                      
     393
     394        </div> <!-- end of centering div -->
     395     
    294396      </div>
    295397    </div>
Note: See TracChangeset for help on using the changeset viewer.