X-Git-Url: http://git.rot13.org/?a=blobdiff_plain;f=GnuBook%2FGnuBook.js;h=1700035fab08d05ec0dd3f84c82d2033d7c5959a;hb=adb879b083b8a3fb1f982b099a94c37aa1544125;hp=687ae7d0f17458a5de75236b9dd89f3a18948d1d;hpb=de36be02e269c10bae278ed2e13598fe4834f88d;p=bookreader.git diff --git a/GnuBook/GnuBook.js b/GnuBook/GnuBook.js index 687ae7d..1700035 100644 --- a/GnuBook/GnuBook.js +++ b/GnuBook/GnuBook.js @@ -30,18 +30,15 @@ This file is part of GnuBook. // - getPageURI() // You must also add a numLeafs property before calling init(). -//XXX -if (typeof(console) == 'undefined') { - console = { log: function(msg) { } }; -} - function GnuBook() { this.reduce = 4; this.padding = 10; - this.mode = 1; //1 or 2 + this.mode = 1; //1, 2, 3 this.ui = 'full'; // UI mode - + this.thumbScale = 10; // thumbnail default + this.displayedIndices = []; + this.displayedRows=[]; //this.indicesToDisplay = []; this.imgs = {}; this.prefetchedImgs = {}; //an object with numeric keys cooresponding to page index @@ -55,7 +52,7 @@ function GnuBook() { this.twoPagePopUp = null; this.leafEdgeTmp = null; this.embedPopup = null; - + this.searchResults = {}; this.firstIndex = null; @@ -71,10 +68,16 @@ function GnuBook() { // Mode constants this.constMode1up = 1; this.constMode2up = 2; + this.constModeThumb = 3; + // Zoom levels + this.reductionFactors = [0.5, 1, 2, 4, 8, 16]; + // Object to hold parameters related to 2up mode this.twoPage = { coverInternalPadding: 10, // Width of cover + coverExternalPadding: 10, // Padding outside of cover + bookSpineDivWidth: 30, // Width of book spine $$$ consider sizing based on book length autofit: true }; }; @@ -84,6 +87,7 @@ function GnuBook() { GnuBook.prototype.init = function() { var startIndex = undefined; + this.pageScale = this.reduce; // preserve current reduce // Find start index and mode if set in location hash var params = this.paramsFromFragment(window.location.hash); @@ -138,21 +142,47 @@ GnuBook.prototype.init = function() { e.data.displayedIndices = []; e.data.updateSearchHilites(); //deletes hilights but does not call remove() e.data.loadLeafs(); + } else if (3 == e.data.mode){ + e.data.prepareThumbnailView(); } else { //console.log('drawing 2 page view'); - e.data.prepareTwoPageView(); + + // We only need to prepare again in autofit (size of spread changes) + if (e.data.twoPage.autofit) { + e.data.prepareTwoPageView(); + } else { + // Re-center if the scrollbars have disappeared + var center = e.data.twoPageGetViewCenter(); + var doRecenter = false; + if (e.data.twoPage.totalWidth < $('#GBcontainer').attr('clientWidth')) { + center.percentageX = 0.5; + doRecenter = true; + } + if (e.data.twoPage.totalHeight < $('#GBcontainer').attr('clientHeight')) { + center.percentageY = 0.5; + doRecenter = true; + } + if (doRecenter) { + e.data.twoPageCenterView(center.percentageX, center.percentageY); + } + } } }); $('.GBpagediv1up').bind('mousedown', this, function(e) { - //console.log('mousedown!'); + // $$$ the purpose of this is to disable selection of the image (makes it turn blue) + // but this also interferes with right-click. See https://bugs.edge.launchpad.net/gnubook/+bug/362626 }); if (1 == this.mode) { this.resizePageView(); this.firstIndex = startIndex; this.jumpToIndex(startIndex); - } else { + } else if (3 == this.mode) { + this.firstIndex = startIndex; + this.prepareThumbnailView(); + this.jumpToIndex(startIndex); + } else { //this.resizePageView(); this.displayedIndices=[0]; @@ -161,7 +191,6 @@ GnuBook.prototype.init = function() { //console.log('titleLeaf: %d', this.titleLeaf); //console.log('displayedIndices: %s', this.displayedIndices); this.prepareTwoPageView(); - //if (this.auto) this.nextPage(); } // Enact other parts of initial params @@ -170,7 +199,7 @@ GnuBook.prototype.init = function() { GnuBook.prototype.setupKeyListeners = function() { var self = this; - + var KEY_PGUP = 33; var KEY_PGDOWN = 34; var KEY_END = 35; @@ -183,41 +212,48 @@ GnuBook.prototype.setupKeyListeners = function() { // We use document here instead of window to avoid a bug in jQuery on IE7 $(document).keydown(function(e) { - // Keyboard navigation switch(e.keyCode) { case KEY_PGUP: case KEY_UP: // In 1up mode page scrolling is handled by browser if (2 == self.mode) { + e.preventDefault(); self.prev(); } break; case KEY_DOWN: case KEY_PGDOWN: if (2 == self.mode) { + e.preventDefault(); self.next(); } break; case KEY_END: + e.preventDefault(); self.last(); break; case KEY_HOME: + e.preventDefault(); self.first(); break; case KEY_LEFT: if (self.keyboardNavigationIsDisabled(e)) { + e.preventDefault(); break; } if (2 == self.mode) { + e.preventDefault(); self.left(); } break; case KEY_RIGHT: if (self.keyboardNavigationIsDisabled(e)) { + e.preventDefault(); break; } if (2 == self.mode) { + e.preventDefault(); self.right(); } break; @@ -230,17 +266,21 @@ GnuBook.prototype.setupKeyListeners = function() { GnuBook.prototype.drawLeafs = function() { if (1 == this.mode) { this.drawLeafsOnePage(); + } else if(3 == this.mode) { + this.drawLeafsThumbnail(); } else { this.drawLeafsTwoPage(); } } -// setDragHandler1up() +// setDragHandler() //______________________________________________________________________________ -GnuBook.prototype.setDragHandler1up = function(div) { +GnuBook.prototype.setDragHandler = function(div) { div.dragging = false; - $(div).bind('mousedown', function(e) { + $(div).unbind('mousedown').bind('mousedown', function(e) { + e.preventDefault(); + //console.log('mousedown at ' + e.pageY); this.dragging = true; @@ -252,11 +292,12 @@ GnuBook.prototype.setDragHandler1up = function(div) { var startTop = $('#GBcontainer').attr('scrollTop'); var startLeft = $('#GBcontainer').attr('scrollLeft'); - return false; }); - $(div).bind('mousemove', function(ee) { - //console.log('mousemove ' + startY); + $(div).unbind('mousemove').bind('mousemove', function(ee) { + ee.preventDefault(); + + // console.log('mousemove ' + ee.pageX + ',' + ee.pageY); var offsetX = ee.pageX - this.prevMouseX; var offsetY = ee.pageY - this.prevMouseY; @@ -269,22 +310,125 @@ GnuBook.prototype.setDragHandler1up = function(div) { this.prevMouseX = ee.pageX; this.prevMouseY = ee.pageY; - return false; }); - $(div).bind('mouseup', function(ee) { + $(div).unbind('mouseup').bind('mouseup', function(ee) { + ee.preventDefault(); //console.log('mouseup'); this.dragging = false; - return false; }); - $(div).bind('mouseleave', function(e) { + $(div).unbind('mouseleave').bind('mouseleave', function(e) { + e.preventDefault(); + //console.log('mouseleave'); + + this.dragging = false; + }); + + $(div).unbind('mouseenter').bind('mouseenter', function(e) { + e.preventDefault(); + //console.log('mouseenter'); + + this.dragging = false; + }); +} + +// setDragHandler2UP() +//______________________________________________________________________________ +GnuBook.prototype.setDragHandler2UP = function(div) { + div.dragging = false; + + $(div).unbind('mousedown').bind('mousedown', function(e) { + e.preventDefault(); + + //console.log('mousedown at ' + e.pageY); + + this.dragStart = {x: e.pageX, y: e.pageY }; + this.mouseDown = true; + this.dragging = false; // wait until drag distance + this.prevMouseX = e.pageX; + this.prevMouseY = e.pageY; + + var startX = e.pageX; + var startY = e.pageY; + var startTop = $('#GBcontainer').attr('scrollTop'); + var startLeft = $('#GBcontainer').attr('scrollLeft'); + + }); + + $(div).unbind('mousemove').bind('mousemove', function(ee) { + ee.preventDefault(); + + // console.log('mousemove ' + ee.pageX + ',' + ee.pageY); + + var offsetX = ee.pageX - this.prevMouseX; + var offsetY = ee.pageY - this.prevMouseY; + + var minDragDistance = 5; // $$$ constant + + var distance = Math.max(Math.abs(offsetX), Math.abs(offsetY)); + + if (this.mouseDown && (distance > minDragDistance)) { + //console.log('drag start!'); + + this.dragging = true; + } + + if (this.dragging) { + $('#GBcontainer').attr('scrollTop', $('#GBcontainer').attr('scrollTop') - offsetY); + $('#GBcontainer').attr('scrollLeft', $('#GBcontainer').attr('scrollLeft') - offsetX); + this.prevMouseX = ee.pageX; + this.prevMouseY = ee.pageY; + } + + + }); + + /* + $(div).unbind('mouseup').bind('mouseup', function(ee) { + ee.preventDefault(); + //console.log('mouseup'); + + this.dragging = false; + this.mouseDown = false; + }); + */ + + + $(div).unbind('mouseleave').bind('mouseleave', function(e) { + e.preventDefault(); //console.log('mouseleave'); - //$(this).unbind('mousemove mouseup'); + this.dragging = false; + this.mouseDown = false; + }); + + $(div).unbind('mouseenter').bind('mouseenter', function(e) { + e.preventDefault(); + //console.log('mouseenter'); + this.dragging = false; + this.mouseDown = false; + }); +} + +GnuBook.prototype.setClickHandler2UP = function( element, data, handler) { + //console.log('setting handler'); + //console.log(element.tagName); + + $(element).unbind('click').bind('click', data, function(e) { + e.preventDefault(); + + //console.log('click!'); + + if (this.mouseDown && (!this.dragging)) { + //console.log('click not dragging!'); + handler(e); + } + this.dragging = false; + this.mouseDown = false; }); } @@ -369,7 +513,7 @@ GnuBook.prototype.drawLeafsOnePage = function() { $(div).css('height', height+'px'); //$(div).text('loading...'); - this.setDragHandler1up(div); + this.setDragHandler(div); $('#GBpageview').append(div); @@ -411,15 +555,182 @@ GnuBook.prototype.drawLeafsOnePage = function() { } +// drawLeafsThumbnail() +//______________________________________________________________________________ +GnuBook.prototype.drawLeafsThumbnail = function() { + //alert('drawing leafs!'); + this.timer = null; + + var viewWidth = $('#GBcontainer').attr('scrollWidth') - 20; // width minus buffer + + //console.log('top=' + scrollTop + ' bottom='+scrollBottom); + + var i; + var leafWidth; + var leafHeight; + var rightPos = 0; + var bottomPos = 0; + var maxRight = 0; + var currentRow = 0; + var leafIndex = 0; + var leafMap = []; + + for (i=0; i viewWidth){ + currentRow++; + rightPos = 0; + leafIndex = 0; + } + + if (leafMap[currentRow]===undefined) { leafMap[currentRow] = {}; } + if (leafMap[currentRow].leafs===undefined) { + leafMap[currentRow].leafs = []; + leafMap[currentRow].height = 0; + leafMap[currentRow].top = 0; + } + leafMap[currentRow].leafs[leafIndex] = {}; + leafMap[currentRow].leafs[leafIndex].num = i; + leafMap[currentRow].leafs[leafIndex].left = rightPos; + + leafHeight = parseInt(this.getPageHeight(leafMap[currentRow].leafs[leafIndex].num)/this.reduce, 10); + if (leafHeight > leafMap[currentRow].height) { leafMap[currentRow].height = leafHeight; } + if (leafIndex===0) { bottomPos += this.padding + leafMap[currentRow].height; } + rightPos += leafWidth + this.padding; + if (rightPos > maxRight) { maxRight = rightPos; } + leafIndex++; + } + + // reset the bottom position based on thumbnails + $('#GBpageview').height(bottomPos); + + var pageViewBuffer = Math.floor(($('#GBcontainer').attr('scrollWidth') - maxRight) / 2) - 14; + var scrollTop = $('#GBcontainer').attr('scrollTop'); + var scrollBottom = scrollTop + $('#GBcontainer').height(); + + var leafTop = 0; + var leafBottom = 0; + var rowsToDisplay = []; + + for (i=0; i= scrollTop) && (leafTop <= scrollBottom); + var bottomInView = (leafBottom >= scrollTop) && (leafBottom <= scrollBottom); + var middleInView = (leafTop <=scrollTop) && (leafBottom>=scrollBottom); + if (topInView | bottomInView | middleInView) { + //console.log('row to display: ' + j); + rowsToDisplay.push(i); + } + if(leafTop > leafMap[i].top) { leafMap[i].top = leafTop; } + leafTop = leafBottom; + } + + var firstRow = rowsToDisplay[0]; + var lastRow = rowsToDisplay[rowsToDisplay.length-1]; + var rowBuffer = 4; + for (i=1; i= 0) { rowsToDisplay.unshift(firstRow-i); } + if (lastRow+i < leafMap.length) { rowsToDisplay.push(lastRow+i); } + } + + // Update hash, but only if we're currently displaying a leaf + // Hack that fixes #365790 + if (this.displayedRows.length > 0) { + this.updateLocationHash(); + } + + var j; + var row; + var left; + var index; + var div; + var link; + var img; + for (i=0; i0) { + div = $('.GBpagedivthumb_highlight') + div.attr({className: 'GBpagedivthumb' }); + } + // highlight current page + $('#pagediv'+this.currentIndex()).attr({className: 'GBpagedivthumb_highlight' }); + + var k; + for (i=0; i> 1); - top = ($('#GBtwopageview').attr('clientHeight') - this.twoPage.height) >> 1; - bookCoverDivLeft = ($('#GBcontainer').attr('clientWidth') - bookCoverDivWidth) >> 1; - } else { - // $$$ add external padding - middle = $('#GBtwopageview').width() >> 1; - top = this.twoPage.coverInternalPadding; // $$$ TODO getter for top - bookCoverDivLeft = 0; // $$$ TODO getter for left - } + var middle = this.twoPage.middle; // $$$ getter instead? + var top = this.twoPageTop(); + var bookCoverDivLeft = this.twoPage.bookCoverDivLeft; - // $$$ should get getwidth2up? - //var scaledWL = parseInt(this.twoPage.height*widthL/heightL); - var scaledWL = this.getPageWidth2UP(indexL); - var gutter = this.twoPageGutter(); + this.twoPage.scaledWL = this.getPageWidth2UP(indexL); + this.twoPage.gutter = this.twoPageGutter(); this.prefetchImg(indexL); $(this.prefetchedImgs[indexL]).css({ position: 'absolute', - left: gutter-scaledWL+'px', + left: this.twoPage.gutter-this.twoPage.scaledWL+'px', right: '', top: top+'px', backgroundColor: 'rgb(234, 226, 205)', height: this.twoPage.height +'px', // $$$ height forced the same for both pages - width: scaledWL + 'px', + width: this.twoPage.scaledWL + 'px', borderRight: '1px solid black', zIndex: 2 }).appendTo('#GBtwopageview'); - - + var indexR = this.twoPage.currentIndexR; var heightR = this.getPageHeight(indexR); var widthR = this.getPageWidth(indexR); // $$$ should use getwidth2up? //var scaledWR = this.twoPage.height*widthR/heightR; - var scaledWR = this.getPageWidth2UP(indexR); + this.twoPage.scaledWR = this.getPageWidth2UP(indexR); this.prefetchImg(indexR); $(this.prefetchedImgs[indexR]).css({ position: 'absolute', - left: gutter+'px', + left: this.twoPage.gutter+'px', right: '', top: top+'px', backgroundColor: 'rgb(234, 226, 205)', height: this.twoPage.height + 'px', // $$$ height forced the same for both pages - width: scaledWR + 'px', + width: this.twoPage.scaledWR + 'px', borderLeft: '1px solid black', zIndex: 2 }).appendTo('#GBtwopageview'); this.displayedIndices = [this.twoPage.currentIndexL, this.twoPage.currentIndexR]; - this.setClickHandlers(); + this.setMouseHandlers2UP(); + this.twoPageSetCursor(); this.updatePageNumBox2UP(); this.updateToolbarZoom(this.reduce); + + // this.twoPagePlaceFlipAreas(); // No longer used + } // updatePageNumBox2UP @@ -544,7 +849,8 @@ GnuBook.prototype.zoom1up = function(dir) { if (this.reduce >= 8) return; this.reduce*=2; //zoom out } - + + this.pageScale = this.reduce; // preserve current reduce this.resizePageView(); $('#GBpageview').empty() @@ -638,20 +944,102 @@ GnuBook.prototype.centerPageView = function() { // zoom2up(direction) //______________________________________________________________________________ GnuBook.prototype.zoom2up = function(direction) { - // $$$ this is where we can e.g. snap to %2 sizes - if (0 == direction) { // autofit mode - this.twoPage.autofit = true;; - } else if (1 == direction) { - if (this.reduce <= 0.5) return; - this.reduce*=0.5; //zoom in - this.twoPage.autofit = false; - } else { - if (this.reduce >= 8) return; - this.reduce *= 2; // zoom out - this.twoPage.autofit = false; + + // Hard stop autoplay + this.stopFlipAnimations(); + + // Get new zoom state + var newZoom = this.twoPageNextReduce(this.reduce, direction); + if ((this.reduce == newZoom.reduce) && (this.twoPage.autofit == newZoom.autofit)) { + return; + } + this.twoPage.autofit = newZoom.autofit; + this.reduce = newZoom.reduce; + this.pageScale = this.reduce; // preserve current reduce + + // Preserve view center position + var oldCenter = this.twoPageGetViewCenter(); + + // If zooming in, reload imgs. DOM elements will be removed by prepareTwoPageView + // $$$ An improvement would be to use the low res image until the larger one is loaded. + if (1 == direction) { + for (var img in this.prefetchedImgs) { + delete this.prefetchedImgs[img]; + } + } + + // Prepare view with new center to minimize visual glitches + this.prepareTwoPageView(oldCenter.percentageX, oldCenter.percentageY); +} + + +// quantizeReduce(reduce) +//______________________________________________________________________________ +// Quantizes the given reduction factor to closest power of two from set from 12.5% to 200% +GnuBook.prototype.quantizeReduce = function(reduce) { + var quantized = this.reductionFactors[0]; + var distance = Math.abs(reduce - quantized); + for (var i = 1; i < this.reductionFactors.length; i++) { + newDistance = Math.abs(reduce - this.reductionFactors[i]); + if (newDistance < distance) { + distance = newDistance; + quantized = this.reductionFactors[i]; + } + } + + return quantized; +} + +// twoPageNextReduce() +//______________________________________________________________________________ +// Returns the next reduction level +GnuBook.prototype.twoPageNextReduce = function(reduce, direction) { + var result = {}; + var autofitReduce = this.twoPageGetAutofitReduce(); + + if (0 == direction) { // autofit + result.autofit = true; + result.reduce = autofitReduce; + + } else if (1 == direction) { // zoom in + var newReduce = this.reductionFactors[0]; + + for (var i = 1; i < this.reductionFactors.length; i++) { + if (this.reductionFactors[i] < reduce) { + newReduce = this.reductionFactors[i]; + } + } + + if (!this.twoPage.autofit && (autofitReduce < reduce && autofitReduce > newReduce)) { + // use autofit + result.autofit = true; + result.reduce = autofitReduce; + } else { + result.autofit = false; + result.reduce = newReduce; + } + + } else { // zoom out + var lastIndex = this.reductionFactors.length - 1; + var newReduce = this.reductionFactors[lastIndex]; + + for (var i = lastIndex; i >= 0; i--) { + if (this.reductionFactors[i] > reduce) { + newReduce = this.reductionFactors[i]; + } + } + + if (!this.twoPage.autofit && (autofitReduce > reduce && autofitReduce < newReduce)) { + // use autofit + result.autofit = true; + result.reduce = autofitReduce; + } else { + result.autofit = false; + result.reduce = newReduce; + } } - this.prepareTwoPageView(); + return result; } // jumpToPage() @@ -688,7 +1076,38 @@ GnuBook.prototype.jumpToIndex = function(index) { this.flipFwdToIndex(index); } - } else { + } else if (3 == this.mode){ + var viewWidth = $('#GBcontainer').attr('scrollWidth') - 20; // width minus buffer + var i; + var leafWidth = 0; + var leafHeight = 0; + var rightPos = 0; + var bottomPos = 0; + var rowHeight = 0; + var leafTop = 0; + var leafIndex = 0; + + for (i=0; i<(index+1); i++) { + leafWidth = parseInt(this.getPageWidth(i)/this.reduce, 10); + if (rightPos + (leafWidth + this.padding) > viewWidth){ + rightPos = 0; + rowHeight = 0; + leafIndex = 0; + } + leafHeight = parseInt(this.getPageHeight(i)/this.reduce, 10); + if(leafHeight > rowHeight) { rowHeight = leafHeight; } + if (leafIndex==0) { leafTop = bottomPos; } + if (leafIndex==0) { bottomPos += this.padding + rowHeight; } + rightPos += leafWidth + this.padding; + leafIndex++; + } + this.firstIndex=index; + if ($('#GBcontainer').attr('scrollTop') == leafTop) { + this.loadLeafs(); + } else { + $('#GBcontainer').animate({scrollTop: leafTop },'fast'); + } + } else { var i; var leafTop = 0; var h; @@ -719,13 +1138,26 @@ GnuBook.prototype.switchMode = function(mode) { this.removeSearchHilites(); this.mode = mode; - this.switchToolbarMode(mode); + + // reinstate scale if moving from thumbnail view + if (this.pageScale != this.reduce) this.reduce = this.pageScale; + // $$$ TODO preserve center of view when switching between mode + // See https://bugs.edge.launchpad.net/gnubook/+bug/416682 + if (1 == mode) { + this.reduce = this.quantizeReduce(this.reduce); this.prepareOnePageView(); + } else if (3 == mode) { + this.reduce = this.quantizeReduce(this.reduce); + this.prepareThumbnailView(); + this.jumpToIndex(this.currentIndex()); } else { + this.twoPage.autofit = false; // Take zoom level from other mode + this.reduce = this.quantizeReduce(this.reduce); this.prepareTwoPageView(); + this.twoPageCenterView(0.5, 0.5); // $$$ TODO preserve center } } @@ -755,6 +1187,40 @@ GnuBook.prototype.prepareOnePageView = function() { // Bind mouse handlers // Disable mouse click to avoid selected/highlighted page images - bug 354239 gbPageView.bind('mousedown', function(e) { + // $$$ check here for right-click and don't disable. Also use jQuery style + // for stopping propagation. See https://bugs.edge.launchpad.net/gnubook/+bug/362626 + return false; + }) + // Special hack for IE7 + gbPageView[0].onselectstart = function(e) { return false; }; +} + +//prepareThumbnailView() +//______________________________________________________________________________ +GnuBook.prototype.prepareThumbnailView = function() { + + // var startLeaf = this.displayedIndices[0]; + var startLeaf = this.currentIndex(); + this.reduce = this.thumbScale; + + $('#GBcontainer').empty(); + $('#GBcontainer').css({ + overflowY: 'scroll', + overflowX: 'auto' + }); + + var gbPageView = $("#GBcontainer").append("
"); + + this.resizePageView(); + + this.displayedRows = []; + this.drawLeafsThumbnail(); + + // Bind mouse handlers + // Disable mouse click to avoid selected/highlighted page images - bug 354239 + gbPageView.bind('mousedown', function(e) { + // $$$ check here for right-click and don't disable. Also use jQuery style + // for stopping propagation. See https://bugs.edge.launchpad.net/gnubook/+bug/362626 return false; }) // Special hack for IE7 @@ -773,20 +1239,10 @@ GnuBook.prototype.prepareOnePageView = function() { // The two page view div is resized to keep the middle of the book in the middle of the div // even as the page sizes change. To e.g. keep the middle of the book in the middle of the GBcontent // div requires adjusting the offset of GBtwpageview and/or scrolling in GBcontent. -GnuBook.prototype.prepareTwoPageView = function() { +GnuBook.prototype.prepareTwoPageView = function(centerPercentageX, centerPercentageY) { $('#GBcontainer').empty(); $('#GBcontainer').css('overflow', 'auto'); - - // Add the two page view - $('#GBcontainer').append('
'); - // Explicitly set sizes the same - // $$$ calculate first then set - $('#GBtwopageview').css( { - height: $('#GBcontainer').height(), - width: $('#GBcontainer').width(), - position: 'absolute' - }); - + // We want to display two facing pages. We may be missing // one side of the spread because it is the first/last leaf, // foldouts, missing pages, etc @@ -802,70 +1258,59 @@ GnuBook.prototype.prepareTwoPageView = function() { targetLeaf = this.lastDisplayableIndex(); } - this.twoPage.currentIndexL = null; - this.twoPage.currentIndexR = null; - this.pruneUnusedImgs(); + //this.twoPage.currentIndexL = null; + //this.twoPage.currentIndexR = null; + //this.pruneUnusedImgs(); var currentSpreadIndices = this.getSpreadIndices(targetLeaf); this.twoPage.currentIndexL = currentSpreadIndices[0]; this.twoPage.currentIndexR = currentSpreadIndices[1]; this.firstIndex = this.twoPage.currentIndexL; - this.calculateSpreadSize(); //sets twoPage.width, twoPage.height, and twoPage.ratio - - var scaledWL = this.getPageWidth2UP(this.twoPage.currentIndexL); - var scaledWR = this.getPageWidth2UP(this.twoPage.currentIndexR); - var leafEdgeWidthL = this.leafEdgeWidth(this.twoPage.currentIndexL); - var leafEdgeWidthR = this.twoPage.edgeWidth - leafEdgeWidthL; + this.calculateSpreadSize(); //sets twoPage.width, twoPage.height and others - //console.log('idealWidth='+idealWidth+' idealHeight='+idealHeight); - //var bookCoverDivWidth = this.twoPage.width*2+20 + this.twoPage.edgeWidth; - - // The width of the book cover div. The combined width of both pages, twice the width - // of the book cover internal padding (2*10) and the page edges - var bookCoverDivWidth = scaledWL + scaledWR + 2 * this.twoPage.coverInternalPadding + this.twoPage.edgeWidth; - - // The height of the book cover div - var bookCoverDivHeight = this.twoPage.height + 2 * this.twoPage.coverInternalPadding; - - - // XXX explicitly set size of GBtwopageview here then use that when calculating positions - // GBtwopageview should have autoscroll turned off - $('#GBtwopageview').width(bookCoverDivWidth).height(bookCoverDivHeight); + this.pruneUnusedImgs(); + this.prefetch(); // Preload images or reload if scaling has changed - // We want to minimize the unused space in two-up mode (maximize the amount of page - // shown). We give width to the leaf edges and these widths change (though the sum - // of the two remains constant) as we flip through the book. With the book - // cover centered and fixed in the GBcontainer div the page images will meet - // at the "gutter" which is generally offset from the center. - var middle = ($('#GBtwopageview').width() >> 1); // Middle of the page view - var gutter = middle + this.gutterOffsetForIndex(this.twoPage.currentIndexL); + //console.dir(this.twoPage); - //var bookCoverDivLeft = ($('#GBcontainer').width() - bookCoverDivWidth) >> 1; - var bookCoverDivLeft = gutter-scaledWL-leafEdgeWidthL-this.twoPage.coverInternalPadding; - var bookCoverDivTop = ($('#GBtwopageview').height() - bookCoverDivHeight) >> 1; - //console.log('bookCoverDivWidth='+bookCoverDivWidth+' bookCoverDivHeight='+bookCoverDivHeight+ ' bookCoverDivLeft='+bookCoverDivLeft+' bookCoverDivTop='+bookCoverDivTop); + // Add the two page view + // $$$ Can we get everything set up and then append? + $('#GBcontainer').append('
'); - this.twoPageDiv = document.createElement('div'); - $(this.twoPageDiv).attr('id', 'GBbookcover').css({ + // $$$ calculate first then set + $('#GBtwopageview').css( { + height: this.twoPage.totalHeight + 'px', + width: this.twoPage.totalWidth + 'px', + position: 'absolute' + }); + + // If there will not be scrollbars (e.g. when zooming out) we center the book + // since otherwise the book will be stuck off-center + if (this.twoPage.totalWidth < $('#GBcontainer').attr('clientWidth')) { + centerPercentageX = 0.5; + } + if (this.twoPage.totalHeight < $('#GBcontainer').attr('clientHeight')) { + centerPercentageY = 0.5; + } + + this.twoPageCenterView(centerPercentageX, centerPercentageY); + + this.twoPage.coverDiv = document.createElement('div'); + $(this.twoPage.coverDiv).attr('id', 'GBbookcover').css({ border: '1px solid rgb(68, 25, 17)', - width: bookCoverDivWidth + 'px', - height: bookCoverDivHeight+'px', + width: this.twoPage.bookCoverDivWidth + 'px', + height: this.twoPage.bookCoverDivHeight+'px', visibility: 'visible', position: 'absolute', backgroundColor: '#663929', - left: bookCoverDivLeft + 'px', - top: bookCoverDivTop+'px', + left: this.twoPage.bookCoverDivLeft + 'px', + top: this.twoPage.bookCoverDivTop+'px', MozBorderRadiusTopleft: '7px', MozBorderRadiusTopright: '7px', MozBorderRadiusBottomright: '7px', MozBorderRadiusBottomleft: '7px' }).appendTo('#GBtwopageview'); - - - var height = this.getPageHeight(this.twoPage.currentIndexR); - var width = this.getPageWidth(this.twoPage.currentIndexR); - var scaledW = this.twoPage.height*width/height; this.leafEdgeR = document.createElement('div'); this.leafEdgeR.className = 'leafEdgeR'; // $$$ the static CSS should be moved into the .css file @@ -874,11 +1319,11 @@ GnuBook.prototype.prepareTwoPageView = function() { borderColor: 'rgb(51, 51, 34)', borderWidth: '1px 1px 1px 0px', background: 'transparent url(' + this.imagesBaseURL + 'right_edges.png) repeat scroll 0% 0%', - width: leafEdgeWidthR + 'px', + width: this.twoPage.leafEdgeWidthR + 'px', height: this.twoPage.height-1 + 'px', /*right: '10px',*/ - left: gutter+scaledW+'px', - top: bookCoverDivTop+this.twoPage.coverInternalPadding+'px', + left: this.twoPage.gutter+this.twoPage.scaledWR+'px', + top: this.twoPage.bookCoverDivTop+this.twoPage.coverInternalPadding+'px', position: 'absolute' }).appendTo('#GBtwopageview'); @@ -889,40 +1334,64 @@ GnuBook.prototype.prepareTwoPageView = function() { borderColor: 'rgb(51, 51, 34)', borderWidth: '1px 0px 1px 1px', background: 'transparent url(' + this.imagesBaseURL + 'left_edges.png) repeat scroll 0% 0%', - width: leafEdgeWidthL + 'px', + width: this.twoPage.leafEdgeWidthL + 'px', height: this.twoPage.height-1 + 'px', - left: bookCoverDivLeft+this.twoPage.coverInternalPadding+'px', - top: bookCoverDivTop+this.twoPage.coverInternalPadding+'px', + left: this.twoPage.bookCoverDivLeft+this.twoPage.coverInternalPadding+'px', + top: this.twoPage.bookCoverDivTop+this.twoPage.coverInternalPadding+'px', position: 'absolute' }).appendTo('#GBtwopageview'); - - - var bookSpineDivWidth = 30; - bookSpineDivHeight = this.twoPage.height+20; - bookSpineDivLeft = ($('#GBtwopageview').width() - bookSpineDivWidth) >> 1; - bookSpineDivTop = ($('#GBtwopageview').height() - bookSpineDivHeight) >> 1; - div = document.createElement('div'); $(div).attr('id', 'GBbookspine').css({ border: '1px solid rgb(68, 25, 17)', - width: bookSpineDivWidth+'px', - height: bookSpineDivHeight+'px', + width: this.twoPage.bookSpineDivWidth+'px', + height: this.twoPage.bookSpineDivHeight+'px', position: 'absolute', backgroundColor: 'rgb(68, 25, 17)', - left: bookSpineDivLeft+'px', - top: bookSpineDivTop+'px' + left: this.twoPage.bookSpineDivLeft+'px', + top: this.twoPage.bookSpineDivTop+'px' + }).appendTo('#GBtwopageview'); + + var self = this; // for closure + + /* Flip areas no longer used + this.twoPage.leftFlipArea = document.createElement('div'); + this.twoPage.leftFlipArea.className = 'GBfliparea'; + $(this.twoPage.leftFlipArea).attr('id', 'GBleftflip').css({ + border: '0', + width: this.twoPageFlipAreaWidth() + 'px', + height: this.twoPageFlipAreaHeight() + 'px', + position: 'absolute', + left: this.twoPageLeftFlipAreaLeft() + 'px', + top: this.twoPageFlipAreaTop() + 'px', + cursor: 'w-resize', + zIndex: 100 + }).bind('click', function(e) { + self.left(); + }).bind('mousedown', function(e) { + e.preventDefault(); + }).appendTo('#GBtwopageview'); + + this.twoPage.rightFlipArea = document.createElement('div'); + this.twoPage.rightFlipArea.className = 'GBfliparea'; + $(this.twoPage.rightFlipArea).attr('id', 'GBrightflip').css({ + border: '0', + width: this.twoPageFlipAreaWidth() + 'px', + height: this.twoPageFlipAreaHeight() + 'px', + position: 'absolute', + left: this.twoPageRightFlipAreaLeft() + 'px', + top: this.twoPageFlipAreaTop() + 'px', + cursor: 'e-resize', + zIndex: 100 + }).bind('click', function(e) { + self.right(); + }).bind('mousedown', function(e) { + e.preventDefault(); }).appendTo('#GBtwopageview'); - - /* - bookCoverDivWidth = this.twoPage.width*2; - bookCoverDivHeight = this.twoPage.height; - bookCoverDivLeft = ($('#GBcontainer').attr('clientWidth') - bookCoverDivWidth) >> 1; - bookCoverDivTop = ($('#GBcontainer').height() - bookCoverDivHeight) >> 1; */ - + this.prepareTwoPagePopUp(); - + this.displayedIndices = []; //this.indicesToDisplay=[firstLeaf, firstLeaf+1]; @@ -1007,19 +1476,15 @@ GnuBook.prototype.prepareTwoPagePopUp = function() { //______________________________________________________________________________ // Calculates 2-page spread dimensions based on this.twoPage.currentIndexL and // this.twoPage.currentIndexR -// This function sets this.twoPage.height, twoPage.width, and twoPage.ratio +// This function sets this.twoPage.height, twoPage.width GnuBook.prototype.calculateSpreadSize = function() { - console.log('calculateSpreadSize ' + this.twoPage.currentIndexL); // XXX - // $$$ TODO Calculate the spread size based on the reduction factor. If we are using - // fit mode we recalculate the reduction factor based on the current page sizes - // and display size first. - var firstIndex = this.twoPage.currentIndexL; var secondIndex = this.twoPage.currentIndexR; //console.log('first page is ' + firstIndex); + // Calculate page sizes and total leaf width var spreadSize; if ( this.twoPage.autofit) { spreadSize = this.getIdealSpreadSize(firstIndex, secondIndex); @@ -1028,11 +1493,58 @@ GnuBook.prototype.calculateSpreadSize = function() { spreadSize = this.getSpreadSizeFromReduce(firstIndex, secondIndex, this.reduce); } + // Both pages together this.twoPage.height = spreadSize.height; this.twoPage.width = spreadSize.width; - this.twoPage.ratio = spreadSize.ratio; + + // Individual pages + this.twoPage.scaledWL = this.getPageWidth2UP(firstIndex); + this.twoPage.scaledWR = this.getPageWidth2UP(secondIndex); + + // Leaf edges this.twoPage.edgeWidth = spreadSize.totalLeafEdgeWidth; // The combined width of both edges - this.reduce = spreadSize.reduce; + this.twoPage.leafEdgeWidthL = this.leafEdgeWidth(this.twoPage.currentIndexL); + this.twoPage.leafEdgeWidthR = this.twoPage.edgeWidth - this.twoPage.leafEdgeWidthL; + + + // Book cover + // The width of the book cover div. The combined width of both pages, twice the width + // of the book cover internal padding (2*10) and the page edges + this.twoPage.bookCoverDivWidth = this.twoPage.scaledWL + this.twoPage.scaledWR + 2 * this.twoPage.coverInternalPadding + this.twoPage.edgeWidth; + // The height of the book cover div + this.twoPage.bookCoverDivHeight = this.twoPage.height + 2 * this.twoPage.coverInternalPadding; + + + // We calculate the total width and height for the div so that we can make the book + // spine centered + var leftGutterOffset = this.gutterOffsetForIndex(firstIndex); + var leftWidthFromCenter = this.twoPage.scaledWL - leftGutterOffset + this.twoPage.leafEdgeWidthL; + var rightWidthFromCenter = this.twoPage.scaledWR + leftGutterOffset + this.twoPage.leafEdgeWidthR; + var largestWidthFromCenter = Math.max( leftWidthFromCenter, rightWidthFromCenter ); + this.twoPage.totalWidth = 2 * (largestWidthFromCenter + this.twoPage.coverInternalPadding + this.twoPage.coverExternalPadding); + this.twoPage.totalHeight = this.twoPage.height + 2 * (this.twoPage.coverInternalPadding + this.twoPage.coverExternalPadding); + + // We want to minimize the unused space in two-up mode (maximize the amount of page + // shown). We give width to the leaf edges and these widths change (though the sum + // of the two remains constant) as we flip through the book. With the book + // cover centered and fixed in the GBcontainer div the page images will meet + // at the "gutter" which is generally offset from the center. + this.twoPage.middle = this.twoPage.totalWidth >> 1; + this.twoPage.gutter = this.twoPage.middle + this.gutterOffsetForIndex(firstIndex); + + // The left edge of the book cover moves depending on the width of the pages + // $$$ change to getter + this.twoPage.bookCoverDivLeft = this.twoPage.gutter - this.twoPage.scaledWL - this.twoPage.leafEdgeWidthL - this.twoPage.coverInternalPadding; + // The top edge of the book cover stays a fixed distance from the top + this.twoPage.bookCoverDivTop = this.twoPage.coverExternalPadding; + + // Book spine + this.twoPage.bookSpineDivHeight = this.twoPage.height + 2*this.twoPage.coverInternalPadding; + this.twoPage.bookSpineDivLeft = this.twoPage.middle - (this.twoPage.bookSpineDivWidth >> 1); + this.twoPage.bookSpineDivTop = this.twoPage.bookCoverDivTop; + + + this.reduce = spreadSize.reduce; // $$$ really set this here? } GnuBook.prototype.getIdealSpreadSize = function(firstIndex, secondIndex) { @@ -1057,11 +1569,12 @@ GnuBook.prototype.getIdealSpreadSize = function(firstIndex, secondIndex) { var secondIndexRatio = second.height / second.width; //console.log('firstIndexRatio = ' + firstIndexRatio + ' secondIndexRatio = ' + secondIndexRatio); + var ratio; if (Math.abs(firstIndexRatio - canon5Dratio) < Math.abs(secondIndexRatio - canon5Dratio)) { - ideal.ratio = firstIndexRatio; + ratio = firstIndexRatio; //console.log('using firstIndexRatio ' + ratio); } else { - ideal.ratio = secondIndexRatio; + ratio = secondIndexRatio; //console.log('using secondIndexRatio ' + ratio); } @@ -1069,50 +1582,78 @@ GnuBook.prototype.getIdealSpreadSize = function(firstIndex, secondIndex) { var maxLeafEdgeWidth = parseInt($('#GBcontainer').attr('clientWidth') * 0.1); ideal.totalLeafEdgeWidth = Math.min(totalLeafEdgeWidth, maxLeafEdgeWidth); - ideal.width = ($('#GBcontainer').attr('clientWidth') - 30 - ideal.totalLeafEdgeWidth)>>1; - ideal.height = $('#GBcontainer').height() - 30; // $$$ why - 30? book edge width? - //console.log('init idealWidth='+idealWidth+' idealHeight='+idealHeight + ' ratio='+ratio); + var widthOutsidePages = 2 * (this.twoPage.coverInternalPadding + this.twoPage.coverExternalPadding) + ideal.totalLeafEdgeWidth; + var heightOutsidePages = 2* (this.twoPage.coverInternalPadding + this.twoPage.coverExternalPadding); + + ideal.width = ($('#GBcontainer').width() - widthOutsidePages) >> 1; + ideal.width -= 10; // $$$ fudge factor + ideal.height = $('#GBcontainer').height() - heightOutsidePages; + ideal.height -= 20; // fudge factor + //console.log('init idealWidth='+ideal.width+' idealHeight='+ideal.height + ' ratio='+ratio); - if (ideal.height/ideal.ratio <= ideal.width) { + if (ideal.height/ratio <= ideal.width) { //use height - ideal.width = parseInt(ideal.height/ideal.ratio); + ideal.width = parseInt(ideal.height/ratio); } else { //use width - ideal.height = parseInt(ideal.width*ideal.ratio); + ideal.height = parseInt(ideal.width*ratio); } - // XXX check this logic with large spreads + // $$$ check this logic with large spreads ideal.reduce = ((first.height + second.height) / 2) / ideal.height; return ideal; } +// getSpreadSizeFromReduce() +//______________________________________________________________________________ +// Returns the spread size calculated from the reduction factor for the given pages GnuBook.prototype.getSpreadSizeFromReduce = function(firstIndex, secondIndex, reduce) { var spreadSize = {}; // $$$ Scale this based on reduce? var totalLeafEdgeWidth = parseInt(this.numLeafs * 0.1); - var maxLeafEdgeWidth = parseInt($('#GBcontainer').attr('clientWidth') * 0.1); + var maxLeafEdgeWidth = parseInt($('#GBcontainer').attr('clientWidth') * 0.1); // $$$ Assumes leaf edge width constant at all zoom levels spreadSize.totalLeafEdgeWidth = Math.min(totalLeafEdgeWidth, maxLeafEdgeWidth); - // $$$ this isn't quite right when the pages are different sizes + // $$$ Possibly incorrect -- we should make height "dominant" var nativeWidth = this.getPageWidth(firstIndex) + this.getPageWidth(secondIndex); var nativeHeight = this.getPageHeight(firstIndex) + this.getPageHeight(secondIndex); spreadSize.height = parseInt( (nativeHeight / 2) / this.reduce ); spreadSize.width = parseInt( (nativeWidth / 2) / this.reduce ); spreadSize.reduce = reduce; - // XXX - console.log('spread size: ' + firstIndex + ',' + secondIndex + ',' + reduce); - return spreadSize; } +// twoPageGetAutofitReduce() +//______________________________________________________________________________ +// Returns the current ideal reduction factor +GnuBook.prototype.twoPageGetAutofitReduce = function() { + var spreadSize = this.getIdealSpreadSize(this.twoPage.currentIndexL, this.twoPage.currentIndexR); + return spreadSize.reduce; +} + +// twoPageSetCursor() +//______________________________________________________________________________ +// Set the cursor for two page view +GnuBook.prototype.twoPageSetCursor = function() { + // console.log('setting cursor'); + if ( ($('#GBtwopageview').width() > $('#GBcontainer').attr('clientWidth')) || + ($('#GBtwopageview').height() > $('#GBcontainer').attr('clientHeight')) ) { + $(this.prefetchedImgs[this.twoPage.currentIndexL]).css('cursor','move'); + $(this.prefetchedImgs[this.twoPage.currentIndexR]).css('cursor','move'); + } else { + $(this.prefetchedImgs[this.twoPage.currentIndexL]).css('cursor',''); + $(this.prefetchedImgs[this.twoPage.currentIndexR]).css('cursor',''); + } +} + // currentIndex() //______________________________________________________________________________ // Returns the currently active index. GnuBook.prototype.currentIndex = function() { // $$$ we should be cleaner with our idea of which index is active in 1up/2up - if (this.mode == this.constMode1up || this.mode == this.constMode2up) { + if (this.mode == this.constMode1up || this.mode == this.constMode2up || this.mode == this.constModeThumb) { return this.firstIndex; } else { throw 'currentIndex called for unimplemented mode ' + this.mode; @@ -1246,9 +1787,8 @@ GnuBook.prototype.flipBackToIndex = function(index) { if ('rl' != this.pageProgression) { // Assume LTR and we are going backward - var gutter = this.prepareFlipLeftToRight(previousIndices[0], previousIndices[1]); - this.flipLeftToRight(previousIndices[0], previousIndices[1], gutter); - + this.prepareFlipLeftToRight(previousIndices[0], previousIndices[1]); + this.flipLeftToRight(previousIndices[0], previousIndices[1]); } else { // RTL and going backward var gutter = this.prepareFlipRightToLeft(previousIndices[0], previousIndices[1]); @@ -1259,7 +1799,7 @@ GnuBook.prototype.flipBackToIndex = function(index) { // flipLeftToRight() //______________________________________________________________________________ // Flips the page on the left towards the page on the right -GnuBook.prototype.flipLeftToRight = function(newIndexL, newIndexR, gutter) { +GnuBook.prototype.flipLeftToRight = function(newIndexL, newIndexR) { var leftLeaf = this.twoPage.currentIndexL; @@ -1271,8 +1811,9 @@ GnuBook.prototype.flipLeftToRight = function(newIndexL, newIndexR, gutter) { var newWidthL = this.getPageWidth2UP(newIndexL); var newWidthR = this.getPageWidth2UP(newIndexR); - var top = ($('#GBtwopageview').height() - this.twoPage.height) >> 1; - + var top = this.twoPageTop(); + var gutter = this.twoPage.middle + this.gutterOffsetForIndex(newIndexL); + //console.log('leftEdgeTmpW ' + leafEdgeTmpW); //console.log(' gutter ' + gutter + ', scaledWL ' + scaledWL + ', newLeafEdgeWL ' + newLeafEdgeWidthL); @@ -1293,7 +1834,7 @@ GnuBook.prototype.flipLeftToRight = function(newIndexL, newIndexR, gutter) { // and width=twoPage.edgeWidth-newLeafEdgeWidthL. // - resize and move the left leaf edge (leafEdgeL) to left=gutter-newWidthL-newLeafEdgeWidthL // and width=newLeafEdgeWidthL. - // - resize the back cover (twoPageDiv) to left=gutter-newWidthL-newLeafEdgeWidthL-10 + // - resize the back cover (twoPage.coverDiv) to left=gutter-newWidthL-newLeafEdgeWidthL-10 // and width=newWidthL+newWidthR+twoPage.edgeWidth+20 // - move new left leaf (newIndexL) forward to zindex=2 so it can receive clicks. // - remove old left and right leafs from the dom [pruneUnusedImgs()]. @@ -1329,16 +1870,14 @@ GnuBook.prototype.flipLeftToRight = function(newIndexL, newIndexR, gutter) { var left = $(this.prefetchedImgs[leftLeaf]).offset().left; // $$$ This seems very similar to the gutter. May be able to consolidate the logic. var right = $('#GBtwopageview').attr('clientWidth')-left-$(this.prefetchedImgs[leftLeaf]).width()+$('#GBtwopageview').offset().left-2+'px'; + // We change the left leaf to right positioning + // $$$ This causes animation glitches during resize. See https://bugs.edge.launchpad.net/gnubook/+bug/328327 $(this.prefetchedImgs[leftLeaf]).css({ right: right, left: '' }); - left = $(this.prefetchedImgs[leftLeaf]).offset().left - $('#book_div_1').offset().left; - - right = left+$(this.prefetchedImgs[leftLeaf]).width()+'px'; - $(this.leafEdgeTmp).animate({left: gutter}, this.flipSpeed, 'easeInSine'); //$(this.prefetchedImgs[leftLeaf]).animate({width: '0px'}, 'slow', 'easeInSine'); @@ -1355,7 +1894,7 @@ GnuBook.prototype.flipLeftToRight = function(newIndexL, newIndexR, gutter) { //console.log(' animating newIndexR ' + newIndexR + ' to ' + newWidthR + ' from ' + $(self.prefetchedImgs[newIndexR]).width()); $(self.prefetchedImgs[newIndexR]).animate({width: newWidthR+'px'}, self.flipSpeed, 'easeOutSine', function() { $(self.prefetchedImgs[newIndexL]).css('zIndex', 2); - + $(self.leafEdgeR).css({ // Moves the right leaf edge width: self.twoPage.edgeWidth-newLeafEdgeWidthL+'px', @@ -1368,21 +1907,25 @@ GnuBook.prototype.flipLeftToRight = function(newIndexL, newIndexR, gutter) { left: gutter-newWidthL-newLeafEdgeWidthL+'px' }); - - $(self.twoPageDiv).css({ - // Resizes the brown border div - width: newWidthL+newWidthR+self.twoPage.edgeWidth+20+'px', - left: gutter-newWidthL-newLeafEdgeWidthL-10+'px' + // Resizes the brown border div + $(self.twoPage.coverDiv).css({ + width: self.twoPageCoverWidth(newWidthL+newWidthR)+'px', + left: gutter-newWidthL-newLeafEdgeWidthL-self.twoPage.coverInternalPadding+'px' }); $(self.leafEdgeTmp).remove(); self.leafEdgeTmp = null; + + // $$$ TODO refactor with opposite direction flip self.twoPage.currentIndexL = newIndexL; self.twoPage.currentIndexR = newIndexR; + self.twoPage.scaledWL = newWidthL; + self.twoPage.scaledWR = newWidthR; + self.twoPage.gutter = gutter; + self.firstIndex = self.twoPage.currentIndexL; self.displayedIndices = [newIndexL, newIndexR]; - self.setClickHandlers(); self.pruneUnusedImgs(); self.prefetch(); self.animating = false; @@ -1390,6 +1933,10 @@ GnuBook.prototype.flipLeftToRight = function(newIndexL, newIndexR, gutter) { self.updateSearchHilites2UP(); self.updatePageNumBox2UP(); + // self.twoPagePlaceFlipAreas(); // No longer used + self.setMouseHandlers2UP(); + self.twoPageSetCursor(); + if (self.animationFinishedCallback) { self.animationFinishedCallback(); self.animationFinishedCallback = null; @@ -1430,7 +1977,7 @@ GnuBook.prototype.flipFwdToIndex = function(index) { } else { // RTL var gutter = this.prepareFlipLeftToRight(nextIndices[0], nextIndices[1]); - this.flipLeftToRight(nextIndices[0], nextIndices[1], gutter); + this.flipLeftToRight(nextIndices[0], nextIndices[1]); } } @@ -1438,7 +1985,7 @@ GnuBook.prototype.flipFwdToIndex = function(index) { // $$$ better not to have to pass gutter in //______________________________________________________________________________ // Flip from left to right and show the nextL and nextR indices on those sides -GnuBook.prototype.flipRightToLeft = function(newIndexL, newIndexR, gutter) { +GnuBook.prototype.flipRightToLeft = function(newIndexL, newIndexR) { var oldLeafEdgeWidthL = this.leafEdgeWidth(this.twoPage.currentIndexL); var oldLeafEdgeWidthR = this.twoPage.edgeWidth-oldLeafEdgeWidthL; var newLeafEdgeWidthL = this.leafEdgeWidth(newIndexL); @@ -1446,16 +1993,12 @@ GnuBook.prototype.flipRightToLeft = function(newIndexL, newIndexR, gutter) { var leafEdgeTmpW = oldLeafEdgeWidthR - newLeafEdgeWidthR; - var top = ($('#GBtwopageview').height() - this.twoPage.height) >> 1; - + var top = this.twoPageTop(); var scaledW = this.getPageWidth2UP(this.twoPage.currentIndexR); - var middle = ($('#GBtwopageview').attr('clientWidth') >> 1); - var currGutter = middle + this.gutterOffsetForIndex(this.twoPage.currentIndexL); + var middle = this.twoPage.middle; + var gutter = middle + this.gutterOffsetForIndex(newIndexL); - // XXX - console.log('R->L middle(' + middle +') currGutter(' + currGutter + ') gutter(' + gutter + ')'); - this.leafEdgeTmp = document.createElement('div'); $(this.leafEdgeTmp).css({ borderStyle: 'solid none solid solid', @@ -1464,7 +2007,7 @@ GnuBook.prototype.flipRightToLeft = function(newIndexL, newIndexR, gutter) { background: 'transparent url(' + this.imagesBaseURL + 'left_edges.png) repeat scroll 0% 0%', width: leafEdgeTmpW + 'px', height: this.twoPage.height-1 + 'px', - left: currGutter+scaledW+'px', + left: gutter+scaledW+'px', top: top+'px', position: 'absolute', zIndex:1000 @@ -1477,7 +2020,7 @@ GnuBook.prototype.flipRightToLeft = function(newIndexL, newIndexR, gutter) { var currWidthR = this.getPageWidth2UP(this.twoPage.currentIndexR); var newWidthL = this.getPageWidth2UP(newIndexL); var newWidthR = this.getPageWidth2UP(newIndexR); - + $(this.leafEdgeR).css({width: newLeafEdgeWidthR+'px', left: gutter+newWidthR+'px' }); var self = this; // closure-tastic! @@ -1491,15 +2034,16 @@ GnuBook.prototype.flipRightToLeft = function(newIndexL, newIndexR, gutter) { $(self.leafEdgeTmp).animate({left: gutter-newWidthL-leafEdgeTmpW+'px'}, speed, 'easeOutSine'); $(self.prefetchedImgs[newIndexL]).animate({width: newWidthL+'px'}, speed, 'easeOutSine', function() { $(self.prefetchedImgs[newIndexR]).css('zIndex', 2); - + $(self.leafEdgeL).css({ width: newLeafEdgeWidthL+'px', left: gutter-newWidthL-newLeafEdgeWidthL+'px' }); - $(self.twoPageDiv).css({ - width: newWidthL+newWidthR+self.twoPage.edgeWidth+20+'px', - left: gutter-newWidthL-newLeafEdgeWidthL-10+'px' + // Resizes the book cover + $(self.twoPage.coverDiv).css({ + width: self.twoPageCoverWidth(newWidthL+newWidthR)+'px', + left: gutter - newWidthL - newLeafEdgeWidthL - self.twoPage.coverInternalPadding + 'px' }); $(self.leafEdgeTmp).remove(); @@ -1507,9 +2051,12 @@ GnuBook.prototype.flipRightToLeft = function(newIndexL, newIndexR, gutter) { self.twoPage.currentIndexL = newIndexL; self.twoPage.currentIndexR = newIndexR; + self.twoPage.scaledWL = newWidthL; + self.twoPage.scaledWR = newWidthR; + self.twoPage.gutter = gutter; + self.firstIndex = self.twoPage.currentIndexL; self.displayedIndices = [newIndexL, newIndexR]; - self.setClickHandlers(); self.pruneUnusedImgs(); self.prefetch(); self.animating = false; @@ -1518,6 +2065,10 @@ GnuBook.prototype.flipRightToLeft = function(newIndexL, newIndexR, gutter) { self.updateSearchHilites2UP(); self.updatePageNumBox2UP(); + // self.twoPagePlaceFlipAreas(); // No longer used + self.setMouseHandlers2UP(); + self.twoPageSetCursor(); + if (self.animationFinishedCallback) { self.animationFinishedCallback(); self.animationFinishedCallback = null; @@ -1526,30 +2077,59 @@ GnuBook.prototype.flipRightToLeft = function(newIndexL, newIndexR, gutter) { }); } -// setClickHandlers +// setMouseHandlers2UP //______________________________________________________________________________ -GnuBook.prototype.setClickHandlers = function() { - var self = this; - // $$$ TODO don't set again if already set - $(this.prefetchedImgs[this.twoPage.currentIndexL]).click(function() { +GnuBook.prototype.setMouseHandlers2UP = function() { + /* + $(this.prefetchedImgs[this.twoPage.currentIndexL]).bind('dblclick', function() { //self.prevPage(); self.autoStop(); self.left(); }); - $(this.prefetchedImgs[this.twoPage.currentIndexR]).click(function() { + $(this.prefetchedImgs[this.twoPage.currentIndexR]).bind('dblclick', function() { //self.nextPage();' self.autoStop(); self.right(); }); + */ + + this.setDragHandler2UP( this.prefetchedImgs[this.twoPage.currentIndexL] ); + this.setClickHandler2UP( this.prefetchedImgs[this.twoPage.currentIndexL], + { self: this }, + function(e) { + e.data.self.left(); + } + ); + + this.setDragHandler2UP( this.prefetchedImgs[this.twoPage.currentIndexR] ); + this.setClickHandler2UP( this.prefetchedImgs[this.twoPage.currentIndexR], + { self: this }, + function(e) { + e.data.self.right(); + } + ); } // prefetchImg() //______________________________________________________________________________ GnuBook.prototype.prefetchImg = function(index) { - if (undefined == this.prefetchedImgs[index]) { + var pageURI = this.getPageURI(index); + + // Load image if not loaded or URI has changed (e.g. due to scaling) + var loadImage = false; + if (undefined == this.prefetchedImgs[index]) { + //console.log('no image for ' + index); + loadImage = true; + } else if (pageURI != this.prefetchedImgs[index].uri) { + //console.log('uri changed for ' + index); + loadImage = true; + } + + if (loadImage) { //console.log('prefetching ' + index); var img = document.createElement("img"); - img.src = this.getPageURI(index); + img.src = pageURI; + img.uri = pageURI; // browser may rewrite src so we stash raw URI here this.prefetchedImgs[index] = img; } } @@ -1570,24 +2150,22 @@ GnuBook.prototype.prepareFlipLeftToRight = function(prevL, prevR) { var height = this.getPageHeight(prevL); var width = this.getPageWidth(prevL); - var middle = ($('#GBtwopageview').attr('clientWidth') >> 1); - var top = ($('#GBtwopageview').height() - this.twoPage.height) >> 1; - var scaledW = this.twoPage.height*width/height; + var middle = this.twoPage.middle; + var top = this.twoPageTop(); + var scaledW = this.twoPage.height*width/height; // $$$ assumes height of page is dominant // The gutter is the dividing line between the left and right pages. // It is offset from the middle to create the illusion of thickness to the pages var gutter = middle + this.gutterOffsetForIndex(prevL); - // XXX - console.log(' gutter for ' + prevL + ' is ' + gutter); + //console.log(' gutter for ' + prevL + ' is ' + gutter); //console.log(' prevL.left: ' + (gutter - scaledW) + 'px'); //console.log(' changing prevL ' + prevL + ' to left: ' + (gutter-scaledW) + ' width: ' + scaledW); $(this.prefetchedImgs[prevL]).css({ position: 'absolute', - /*right: middle+'px',*/ left: gutter-scaledW+'px', - right: '', + right: '', // clear right property top: top+'px', backgroundColor: 'rgb(234, 226, 205)', height: this.twoPage.height, @@ -1613,32 +2191,28 @@ GnuBook.prototype.prepareFlipLeftToRight = function(prevL, prevR) { }); $('#GBtwopageview').append(this.prefetchedImgs[prevR]); - - - return gutter; } -// XXXmang we're adding an extra pixel in the middle +// $$$ mang we're adding an extra pixel in the middle. See https://bugs.edge.launchpad.net/gnubook/+bug/411667 // prepareFlipRightToLeft() //______________________________________________________________________________ GnuBook.prototype.prepareFlipRightToLeft = function(nextL, nextR) { //console.log(' preparing left<-right for ' + nextL + ',' + nextR); + // Prefetch images this.prefetchImg(nextL); this.prefetchImg(nextR); var height = this.getPageHeight(nextR); var width = this.getPageWidth(nextR); - var middle = ($('#GBtwopageview').attr('clientWidth') >> 1); - var top = ($('#GBtwopageview').height() - this.twoPage.height) >> 1; + var middle = this.twoPage.middle; + var top = this.twoPageTop(); var scaledW = this.twoPage.height*width/height; var gutter = middle + this.gutterOffsetForIndex(nextL); - - console.log('right to left to %d gutter is %d', nextL, gutter); // XXX - + //console.log(' prepareRTL changing nextR ' + nextR + ' to left: ' + gutter); $(this.prefetchedImgs[nextR]).css({ position: 'absolute', @@ -1664,14 +2238,12 @@ GnuBook.prototype.prepareFlipRightToLeft = function(nextL, nextR) { top: top+'px', backgroundColor: 'rgb(234, 226, 205)', height: this.twoPage.height, - width: 0+'px', + width: 0+'px', // Start at 0 width, then grow to the left borderRight: '1px solid black', zIndex: 2 }); $('#GBtwopageview').append(this.prefetchedImgs[nextL]); - - return gutter; } @@ -1718,6 +2290,31 @@ GnuBook.prototype.pruneUnusedImgs = function() { //______________________________________________________________________________ GnuBook.prototype.prefetch = function() { + // prefetch visible pages first + this.prefetchImg(this.twoPage.currentIndexL); + this.prefetchImg(this.twoPage.currentIndexR); + + var adjacentPagesToLoad = 3; + + var lowCurrent = Math.min(this.twoPage.currentIndexL, this.twoPage.currentIndexR); + var highCurrent = Math.max(this.twoPage.currentIndexL, this.twoPage.currentIndexR); + + var start = Math.max(lowCurrent - adjacentPagesToLoad, 0); + var end = Math.min(highCurrent + adjacentPagesToLoad, this.numLeafs - 1); + + // Load images spreading out from current + for (var i = 1; i <= adjacentPagesToLoad; i++) { + var goingDown = lowCurrent - i; + if (goingDown >= start) { + this.prefetchImg(goingDown); + } + var goingUp = highCurrent + i; + if (goingUp <= end) { + this.prefetchImg(goingUp); + } + } + + /* var lim = this.twoPage.currentIndexL-4; var i; lim = Math.max(lim, 0); @@ -1731,6 +2328,7 @@ GnuBook.prototype.prefetch = function() { this.prefetchImg(i); } } + */ } // getPageWidth2UP() @@ -1860,18 +2458,133 @@ GnuBook.prototype.updateSearchHilites1UP = function() { } } -// XXX move, clean up, use everywhere +// twoPageGutter() +//______________________________________________________________________________ +// Returns the position of the gutter (line between the page images) GnuBook.prototype.twoPageGutter = function() { - var middle = ($('#GBtwopageview').width() >> 1); - return middle + this.gutterOffsetForIndex(this.twoPage.currentIndexL); + return this.twoPage.middle + this.gutterOffsetForIndex(this.twoPage.currentIndexL); } -// XXX move, clean up, use everywhere +// twoPageTop() +//______________________________________________________________________________ +// Returns the offset for the top of the page images GnuBook.prototype.twoPageTop = function() { - // XXX this assumes centered... should be dependent on autofit or not - return ($('#GBtwopagview').height() - this.twoPage.height) >> 1; + return this.twoPage.coverExternalPadding + this.twoPage.coverInternalPadding; // $$$ + border? +} + +// twoPageCoverWidth() +//______________________________________________________________________________ +// Returns the width of the cover div given the total page width +GnuBook.prototype.twoPageCoverWidth = function(totalPageWidth) { + return totalPageWidth + this.twoPage.edgeWidth + 2*this.twoPage.coverInternalPadding; } - + +// twoPageGetViewCenter() +//______________________________________________________________________________ +// Returns the percentage offset into twopageview div at the center of container div +// { percentageX: float, percentageY: float } +GnuBook.prototype.twoPageGetViewCenter = function() { + var center = {}; + + var containerOffset = $('#GBcontainer').offset(); + var viewOffset = $('#GBtwopageview').offset(); + center.percentageX = (containerOffset.left - viewOffset.left + ($('#GBcontainer').attr('clientWidth') >> 1)) / this.twoPage.totalWidth; + center.percentageY = (containerOffset.top - viewOffset.top + ($('#GBcontainer').attr('clientHeight') >> 1)) / this.twoPage.totalHeight; + + return center; +} + +// twoPageCenterView(percentageX, percentageY) +//______________________________________________________________________________ +// Centers the point given by percentage from left,top of twopageview +GnuBook.prototype.twoPageCenterView = function(percentageX, percentageY) { + if ('undefined' == typeof(percentageX)) { + percentageX = 0.5; + } + if ('undefined' == typeof(percentageY)) { + percentageY = 0.5; + } + + var viewWidth = $('#GBtwopageview').width(); + var containerClientWidth = $('#GBcontainer').attr('clientWidth'); + var intoViewX = percentageX * viewWidth; + + var viewHeight = $('#GBtwopageview').height(); + var containerClientHeight = $('#GBcontainer').attr('clientHeight'); + var intoViewY = percentageY * viewHeight; + + if (viewWidth < containerClientWidth) { + // Can fit width without scrollbars - center by adjusting offset + $('#GBtwopageview').css('left', (containerClientWidth >> 1) - intoViewX + 'px'); + } else { + // Need to scroll to center + $('#GBtwopageview').css('left', 0); + $('#GBcontainer').scrollLeft(intoViewX - (containerClientWidth >> 1)); + } + + if (viewHeight < containerClientHeight) { + // Fits with scrollbars - add offset + $('#GBtwopageview').css('top', (containerClientHeight >> 1) - intoViewY + 'px'); + } else { + $('#GBtwopageview').css('top', 0); + $('#GBcontainer').scrollTop(intoViewY - (containerClientHeight >> 1)); + } +} + +// twoPageFlipAreaHeight +//______________________________________________________________________________ +// Returns the integer height of the click-to-flip areas at the edges of the book +GnuBook.prototype.twoPageFlipAreaHeight = function() { + return parseInt(this.twoPage.height); +} + +// twoPageFlipAreaWidth +//______________________________________________________________________________ +// Returns the integer width of the flip areas +GnuBook.prototype.twoPageFlipAreaWidth = function() { + var max = 100; // $$$ TODO base on view width? + var min = 10; + + var width = this.twoPage.width * 0.15; + return parseInt(GnuBook.util.clamp(width, min, max)); +} + +// twoPageFlipAreaTop +//______________________________________________________________________________ +// Returns integer top offset for flip areas +GnuBook.prototype.twoPageFlipAreaTop = function() { + return parseInt(this.twoPage.bookCoverDivTop + this.twoPage.coverInternalPadding); +} + +// twoPageLeftFlipAreaLeft +//______________________________________________________________________________ +// Left offset for left flip area +GnuBook.prototype.twoPageLeftFlipAreaLeft = function() { + return parseInt(this.twoPage.gutter - this.twoPage.scaledWL); +} + +// twoPageRightFlipAreaLeft +//______________________________________________________________________________ +// Left offset for right flip area +GnuBook.prototype.twoPageRightFlipAreaLeft = function() { + return parseInt(this.twoPage.gutter + this.twoPage.scaledWR - this.twoPageFlipAreaWidth()); +} + +// twoPagePlaceFlipAreas +//______________________________________________________________________________ +// Readjusts position of flip areas based on current layout +GnuBook.prototype.twoPagePlaceFlipAreas = function() { + // We don't set top since it shouldn't change relative to view + $(this.twoPage.leftFlipArea).css({ + left: this.twoPageLeftFlipAreaLeft() + 'px', + width: this.twoPageFlipAreaWidth() + 'px' + }); + $(this.twoPage.rightFlipArea).css({ + left: this.twoPageRightFlipAreaLeft() + 'px', + width: this.twoPageFlipAreaWidth() + 'px' + }); +} + // showSearchHilites2UP() //______________________________________________________________________________ GnuBook.prototype.updateSearchHilites2UP = function() { @@ -1970,6 +2683,11 @@ GnuBook.prototype.autoToggle = function() { bComingFrom1up = true; this.switchMode(2); } + + // Change to autofit if book is too large + if (this.reduce < this.twoPageGetAutofitReduce()) { + this.zoom2up(0); + } var self = this; if (null == this.autoTimer) { @@ -2004,6 +2722,7 @@ GnuBook.prototype.autoToggle = function() { // autoStop() //______________________________________________________________________________ +// Stop autoplay mode, allowing animations to finish GnuBook.prototype.autoStop = function() { if (null != this.autoTimer) { clearInterval(this.autoTimer); @@ -2014,6 +2733,31 @@ GnuBook.prototype.autoStop = function() { } } +// stopFlipAnimations +//______________________________________________________________________________ +// Immediately stop flip animations. Callbacks are triggered. +GnuBook.prototype.stopFlipAnimations = function() { + + this.autoStop(); // Clear timers + + // Stop animation, clear queue, trigger callbacks + if (this.leafEdgeTmp) { + $(this.leafEdgeTmp).stop(false, true); + } + jQuery.each(this.prefetchedImgs, function() { + $(this).stop(false, true); + }); + + // And again since animations also queued in callbacks + if (this.leafEdgeTmp) { + $(this.leafEdgeTmp).stop(false, true); + } + jQuery.each(this.prefetchedImgs, function() { + $(this).stop(false, true); + }); + +} + // keyboardNavigationIsDisabled(event) // - returns true if keyboard navigation should be disabled for the event //______________________________________________________________________________ @@ -2096,11 +2840,14 @@ GnuBook.prototype.initToolbar = function(mode, ui) { + "" + "