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/script/musicstand.js

    r30461 r30519  
    2222  var topVal    = 0;
    2323  var rightVal  = pageXDim;
    24   var bottomVal = 0;
    25   var leftVal   = 0;
     24  var bleedingEdgeValY = 0;
     25  var bleedingEdgeValX = 0;
     26  var leftVal    = 0;
    2627
    2728  var pageNum = cgiGotoPage;
    … …  
    156157  }
    157158
    158 
    159   pageAnimPrivate = function(direction,pagePrefix,pageSuffix)
    160   {
    161     var imagediv = (direction>0) ? 'nextpagediv' : 'prevpagediv';
    162         var imagelayer = document.getElementById(imagediv)
    163         var bleedlayer = document.getElementById('animedgebleed')
    164 
    165     var deltaY;
    166     var deltaTime;
    167 
    168     if (bottomVal<speedBreak) {
    169       deltaY = 2;
    170       deltaTime = 10;
    171     }
    172     else {
    173       deltaY = 1;
    174       deltaTime = 30;
    175     }
    176 
    177     if(bottomVal < pageYDim) { 
    178         bottomVal += deltaY;
    179         imagelayer.style.clip="rect("+topVal+"px "+rightVal+"px "+bottomVal+"px "+leftVal+"px)"
    180         bleedlayer.style.clip="rect("+topVal+"px "+rightVal+"px "+(bottomVal+2)+"px "+leftVal+"px)"
    181         var callPageAnim = "pageAnimPrivate("+direction+",'"+pagePrefix+"','"+pageSuffix+"')";
    182         pageAnimTimer = setTimeout(callPageAnim,deltaTime)
    183     }
    184     else {
    185 
    186       // finished => update the image that is the current page
    187       var thisimg = document.getElementById('thispageimg')
    188       var nextimg = document.getElementById('nextpageimg')
    189       var previmg = document.getElementById('prevpageimg')
    190      
    191       if (direction>0) {
    192         if (pageNum<totalPageCount) {
    193             pageNum++;
    194         previmg.src = thisimg.src;
    195             thisimg.src = nextimg.src;
    196 
    197         resetValues(); // reset clip rectangles
    198 
    199             var nextSrc = httpnextanimPrivate(pagePrefix,pageSuffix,pageNum+1);
    200             nextimg.src = nextSrc;
    201 
    202             var nextspan = document.getElementById('nextpagespan');
    203 
    204         // update page numbers displayed for next and prev
    205             var nextval = document.getElementById('nextpageval');
    206         if (pageNum<totalPageCount) {
    207             nextval.innerHTML = (pageNum+1);
    208             displayInline('nextpagespan');
    209         }
    210         else {
    211             nextval.innerHTML = "";
    212             displayNone('nextpagespan');
    213         }
    214 
    215             var prevval = document.getElementById('prevpageval');
    216         prevval.innerHTML = (pageNum-1);
    217 
    218         displayInline('prevpagespan');
    219         }
     159   
     160  pageAnimFinishedPrivate = function(direction,pagePrefix,pageSuffix)
     161  {
     162      var thisimg = document.getElementById('thispageimg')
     163
     164      var nextimg = document.getElementById('nextpageimg')
     165      var nextimg_lr = document.getElementById('nextpage-lr-img')
     166
     167      var previmg = document.getElementById('prevpageimg')
     168      var previmg_lr = document.getElementById('prevpage-lr-img')
     169     
     170      if (direction>0) {
     171      if (pageNum<totalPageCount) {
     172          pageNum++;
     173          previmg.src = thisimg.src;
     174          previmg_lr.src = thisimg.src;       
     175          thisimg.src = nextimg.src;
     176
     177          setTimeout(function() {
     178          resetValues(); // reset clip rectangles
     179         
     180          var nextSrc = httpnextanimPrivate(pagePrefix,pageSuffix,pageNum+1);
     181          nextimg.src = nextSrc;
     182          nextimg_lr.src = nextSrc;
     183         
     184          var nextspan = document.getElementById('nextpagespan');
     185         
     186          // update page numbers displayed for next and prev
     187          var nextval = document.getElementById('nextpageval');
     188          if (pageNum<totalPageCount) {
     189              nextval.innerHTML = (pageNum+1);
     190              displayInline('nextpagespan');
     191          }
     192          else {
     193              nextval.innerHTML = "";
     194              displayNone('nextpagespan');
     195          }
     196         
     197          var prevval = document.getElementById('prevpageval');
     198          prevval.innerHTML = (pageNum-1);
     199         
     200          displayInline('prevpagespan');
     201          },700);
    220202      }
    221       else {
    222         // previous page
    223         if (pageNum>0) {
    224             pageNum--;
    225         nextimg.src = thisimg.src;
    226             thisimg.src = previmg.src;
    227 
    228         resetValues(); // reset clip rectangles
    229 
    230             var prevSrc = httpnextanimPrivate(pagePrefix,pageSuffix,pageNum-1);
    231             previmg.src = prevSrc;
    232 
    233         // update page numbers displayed for next and prev
    234             var nextval = document.getElementById('nextpageval');
    235         nextval.innerHTML = (pageNum+1);
    236 
    237         displayInline('nextpagespan');
    238             //var nextspan = document.getElementById('nextpagespan');
    239         //nextspan.style.display = "block";
    240 
    241             var prevspan = document.getElementById('prevpagespan');
    242 
    243             var prevval = document.getElementById('prevpageval');
    244         if (pageNum>1) {
    245             prevval.innerHTML = (pageNum-1);
    246             displayInline('prevpagespan');
    247         }
    248         else {
    249             prevval.innerHTML = "";
    250             displayNone('prevpagespan');
    251         }
    252         }
    253       }
    254 
    255       // update docid member variable (pageNum reflect new page value)
    256           docid = docRoot + "." + pageNum;
    257 
    258 /*
     203      }
     204      else {
     205      // previous page
     206      if (pageNum>0) {
     207          pageNum--;
     208          nextimg.src = thisimg.src;
     209          nextimg_lr.src = thisimg.src;
     210          thisimg.src = previmg.src;
     211
     212          setTimeout(function() {
     213          resetValues(); // reset clip rectangles
     214         
     215          var prevSrc = httpnextanimPrivate(pagePrefix,pageSuffix,pageNum-1);
     216          previmg.src = prevSrc;
     217          previmg_lr.src = prevSrc;
     218         
     219          // update page numbers displayed for next and prev
     220          var nextval = document.getElementById('nextpageval');
     221          nextval.innerHTML = (pageNum+1);
     222         
     223          displayInline('nextpagespan');
     224          //var nextspan = document.getElementById('nextpagespan');
     225          //nextspan.style.display = "block";
     226         
     227          var prevspan = document.getElementById('prevpagespan');
     228         
     229          var prevval = document.getElementById('prevpageval');
     230          if (pageNum>1) {
     231              prevval.innerHTML = (pageNum-1);
     232              displayInline('prevpagespan');
     233          }
     234          else {
     235              prevval.innerHTML = "";
     236              displayNone('prevpagespan');
     237          }
     238          }, 700);
     239      }         
     240      }
     241     
     242      // update docid member variable (pageNum reflect new page value)
     243      docid = docRoot + "." + pageNum;
     244     
     245      /*
    259246      // remove any existing annotations
    260247      annotate.clearAnnotations();
    … …  
    272259
    273260
    274       var username = musicStand.getUsername();
    275       var metaval;
    276 
    277       if (username != null) {
    278           // try of user specific one, if it exists
    279           var metaname = username + "-sliderposTop";
    280           metaval  = gsapi.getLiveMetadata(docid,metaname);
     261      var username = musicStand.getUsername();
     262      var metaval;
     263     
     264      if (username != null) {
     265      // try of user specific one, if it exists
     266      var metaname = username + "-sliderposTop";
     267      metaval  = gsapi.getLiveMetadata(docid,metaname);
    281268          if (metaval == "") {
    282269              // fallback to looking up non-user specific one
    283270              metaval  = gsapi.getLiveMetadata(docid,"sliderposTop");
    284271          }
    285       }
    286       else {
    287               //metaval  = gsapi.getLiveMetadata(docid,"sliderposTop");
    288               metaval  = 700; // ******** hack
    289       }
    290       var sliderposTop = parseInt(metaval);
    291 
    292       updateSlider(sliderposTop);
    293 
     272      }
     273      else {
     274          //metaval  = gsapi.getLiveMetadata(docid,"sliderposTop");
     275          metaval  = 700; // ******** hack
     276      }
     277      var sliderposTop = parseInt(metaval);
     278     
     279      updateSlider(sliderposTop);     
     280  }
     281   
     282  pageAnimPrivate = function(direction,pagePrefix,pageSuffix)
     283  {
     284    var imagediv = (direction>0) ? 'nextpagediv' : 'prevpagediv';
     285        var imagelayer = document.getElementById(imagediv)
     286        var bleedlayer = document.getElementById('animedgebleed')
     287
     288    var deltaY = 3;
     289    var deltaTime = 15;
     290        var callback;
     291     
     292    if (bleedingEdgeValY<speedBreak) {
     293        callback="pageAnimPrivate";
    294294    }
    295   }
    296 
     295    else {
     296        callback="pageAnimLRPrivate";
     297    }
     298
     299    if(bleedingEdgeValY < pageYDim) {   
     300        bleedingEdgeValY += deltaY;
     301        imagelayer.style.clip="rect("+topVal+"px "+rightVal+"px "+bleedingEdgeValY+"px "+leftVal+"px)"
     302        bleedlayer.style.clip="rect("+topVal+"px "+rightVal+"px "+(bleedingEdgeValY+2)+"px "+leftVal+"px)"
     303        var callPageAnim = callback+"("+direction+",'"+pagePrefix+"','"+pageSuffix+"')";
     304        pageAnimTimer = setTimeout(callPageAnim,deltaTime)
     305    }
     306    else {
     307        // finished => update the image that is the current page
     308        pageAnimFinished();
     309    }
     310  }
     311
     312
     313  pageAnimLRPrivate = function(direction,pagePrefix,pageSuffix)
     314  {
     315    var imagediv = (direction>0) ? 'nextpage-lr-div' : 'prevpage-lr-div';
     316        var imagelayer = document.getElementById(imagediv)
     317        var bleedlayer = document.getElementById('animedgebleed-lr')
     318
     319        var deltaX = 2;
     320    var deltaTime = 40; // used to be 30
     321
     322    if(bleedingEdgeValX < pageXDim) {   
     323        bleedingEdgeValX += deltaX;
     324        imagelayer.style.clip="rect("+(bleedingEdgeValY+2)+"px "+bleedingEdgeValX+"px "+pageYDim+"px "+leftVal+"px)"
     325        bleedlayer.style.clip="rect("+(bleedingEdgeValY+2)+"px "+(bleedingEdgeValX+2)+"px "+pageYDim+"px "+leftVal+"px)"
     326        var callPageAnim = "pageAnimLRPrivate("+direction+",'"+pagePrefix+"','"+pageSuffix+"')";
     327        pageAnimTimer = setTimeout(callPageAnim,deltaTime)
     328    }
     329    else {
     330        // finished => update the image that is the current page
     331        pageAnimFinishedPrivate(direction,pagePrefix,pageSuffix);
     332    }
     333  }
     334
     335
     336   
     337
     338   
    297339  cancelPageAnimPrivate = function() {
    298340      clearTimeout(pageAnimTimer);
    … …  
    502544  {
    503545      var nextlayer = document.getElementById('nextpagediv')
     546      var nextlayer_lr = document.getElementById('nextpage-lr-div')
     547
    504548      var prevlayer = document.getElementById('prevpagediv')
     549      var prevlayer_lr = document.getElementById('prevpage-lr-div')
     550
    505551      var bleedlayer = document.getElementById('animedgebleed')
     552      var bleedlayer_lr = document.getElementById('animedgebleed-lr')
    506553
    507554      topVal=0;
    508555      rightVal=pageXDim;
    509       bottomVal=0;
     556      bleedingEdgeValY=0;
     557      bleedingEdgeValX=0;
    510558      leftVal=0
    511559
    512       var startingClip = "rect("+topVal+"px "+rightVal+"px "+bottomVal+"px "+leftVal+"px)";
     560      //var startingClip = "rect("+topVal+"px "+rightVal+"px "+bleedingEdgeValY+"px "+leftVal+"px)";
     561      var startingClip = "rect(0px 0px 0px 0px)";
    513562
    514563      nextlayer.style.clip=startingClip;
     564      nextlayer_lr.style.clip=startingClip;
     565
    515566      prevlayer.style.clip=startingClip;
     567      prevlayer_lr.style.clip=startingClip;
     568
    516569      bleedlayer.style.clip=startingClip;
     570      bleedlayer_lr.style.clip=startingClip;
    517571  }
    518572}
Note: See TracChangeset for help on using the changeset viewer.