Show
Ignore:
Timestamp:
09.05.2016 22:04:34 (4 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

Files:
1 modified

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>