Revert unintended "Merge branch 'read_aloud' of git@github.com:openlibrary/bookreader"
[bookreader.git] / BookReader / BookReader.js
index e4f955f..5390e66 100644 (file)
@@ -94,20 +94,16 @@ function BookReader() {
     // Object to hold parameters related to 1up mode
     this.onePage = {
         autofit: 'height'                                     // valid values are height, width, none
-    },
+    };
     
     // 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
+        autofit: 'auto'
     };
     
-    // Background color for pages (e.g. when loading page image)
-    // $$$ TODO dynamically calculate based on page images
-    this.pageDefaultBackgroundColor = 'rgb(234, 226, 205)';
-    
     return this;
 };
 
@@ -159,7 +155,7 @@ BookReader.prototype.init = function() {
     $("#BRcontainer").bind('scroll', this, function(e) {
         e.data.loadLeafs();
     });
-    
+        
     this.setupKeyListeners();
     this.startLocationPolling();
 
@@ -167,6 +163,9 @@ BookReader.prototype.init = function() {
         //console.log('resize!');
         if (1 == e.data.mode) {
             //console.log('centering 1page view');
+            if (e.data.autofit) {
+                e.data.resizePageView();
+            }
             e.data.centerPageView();
             $('#BRpageview').empty()
             e.data.displayedIndices = [];
@@ -773,7 +772,6 @@ BookReader.prototype.drawLeafsTwoPage = function() {
         left: this.twoPage.gutter-this.twoPage.scaledWL+'px',
         right: '',
         top:    top+'px',
-        backgroundColor: this.getPageBackgroundColor(indexL),
         height: this.twoPage.height +'px', // $$$ height forced the same for both pages
         width:  this.twoPage.scaledWL + 'px',
         borderRight: '1px solid black',
@@ -793,7 +791,6 @@ BookReader.prototype.drawLeafsTwoPage = function() {
         left:   this.twoPage.gutter+'px',
         right: '',
         top:    top+'px',
-        backgroundColor: this.getPageBackgroundColor(indexR),
         height: this.twoPage.height + 'px', // $$$ height forced the same for both pages
         width:  this.twoPage.scaledWR + 'px',
         borderLeft: '1px solid black',
@@ -876,8 +873,14 @@ BookReader.prototype.zoom1up = function(direction) {
     }
     
     var reduceFactor = this.nextReduce(this.reduce, direction, this.onePage.reductionFactors);
+    
+    if (this.reduce == reduceFactor.reduce) {
+        // Already at this level
+        return;
+    }
+    
     this.reduce = reduceFactor.reduce; // $$$ incorporate into function
-    this.autofit = reduceFactor.autofit;
+    this.onePage.autofit = reduceFactor.autofit;
         
     this.pageScale = this.reduce; // preserve current reduce
     this.resizePageView();
@@ -939,7 +942,10 @@ BookReader.prototype.resizePageView1up = function() {
     this.onePageCalculateReductionFactors( $('#BRcontainer').attr('clientWidth'),
                                            $('#BRcontainer').attr('clientHeight') );                                        
     // Update current reduce (if in autofit)
-    // this.onePageUpdateReduce(); // XXX
+    if (this.onePage.autofit) {
+        var reductionFactor = this.nextReduce(this.reduce, this.onePage.autofit, this.onePage.reductionFactors);
+        this.reduce = reductionFactor.reduce;
+    }
     
     for (i=0; i<this.numLeafs; i++) {
         viewHeight += parseInt(this._getPageHeight(i)/this.reduce) + this.padding; 
@@ -1073,14 +1079,14 @@ BookReader.prototype.getThumbnailWidth = function(thumbnailColumns) {
 // quantizeReduce(reduce)
 //______________________________________________________________________________
 // Quantizes the given reduction factor to closest power of two from set from 12.5% to 200%
-BookReader.prototype.quantizeReduce = function(reduce) {
-    var quantized = this.reductionFactors[0].reduce;
+BookReader.prototype.quantizeReduce = function(reduce, reductionFactors) {
+    var quantized = reductionFactors[0].reduce;
     var distance = Math.abs(reduce - quantized);
-    for (var i = 1; i < this.reductionFactors.length; i++) {
-        newDistance = Math.abs(reduce - this.reductionFactors[i].reduce);
+    for (var i = 1; i < reductionFactors.length; i++) {
+        newDistance = Math.abs(reduce - reductionFactors[i].reduce);
         if (newDistance < distance) {
             distance = newDistance;
-            quantized = this.reductionFactors[i].reduce;
+            quantized = reductionFactors[i].reduce;
         }
     }
     
@@ -1154,7 +1160,7 @@ BookReader.prototype.jumpToPage = function(pageNum) {
 //______________________________________________________________________________
 BookReader.prototype.jumpToIndex = function(index, pageX, pageY) {
 
-    if (2 == this.mode) {
+    if (this.constMode2up == this.mode) {
         this.autoStop();
         
         // By checking against min/max we do nothing if requested index
@@ -1165,7 +1171,7 @@ BookReader.prototype.jumpToIndex = function(index, pageX, pageY) {
             this.flipFwdToIndex(index);
         }
 
-    } else if (3 == this.mode) {
+    } else if (this.constModeThumb == this.mode) {
         var viewWidth = $('#BRcontainer').attr('scrollWidth') - 20; // width minus buffer
         var i;
         var leafWidth = 0;
@@ -1198,6 +1204,7 @@ BookReader.prototype.jumpToIndex = function(index, pageX, pageY) {
             $('#BRcontainer').animate({scrollTop: leafTop },'fast');
         }
     } else {
+        // 1up
         var i;
         var leafTop = 0;
         var leafLeft = 0;
@@ -1213,12 +1220,18 @@ BookReader.prototype.jumpToIndex = function(index, pageX, pageY) {
             offset -= $('#BRcontainer').attr('clientHeight') >> 1;
             //console.log( 'jumping to ' + leafTop + ' ' + offset);
             leafTop += offset;
+        } else {
+            // Show page just a little below the top
+            leafTop -= this.padding / 2;
         }
 
         if (pageX) {
             var offset = parseInt( (pageX) / this.reduce);
             offset -= $('#BRcontainer').attr('clientWidth') >> 1;
             leafLeft += offset;
+        } else {
+            // Preserve left position
+            leafLeft = $('#BRcontainer').scrollLeft();
         }
 
         //$('#BRcontainer').attr('scrollTop', leafTop);
@@ -1255,16 +1268,19 @@ BookReader.prototype.switchMode = function(mode) {
     // $$$ TODO preserve center of view when switching between mode
     //     See https://bugs.edge.launchpad.net/gnubook/+bug/416682
 
+    // XXX maybe better to preserve zoom in each mode
     if (1 == mode) {
-        this.reduce = this.quantizeReduce(this.reduce);
+        this.onePageCalculateReductionFactors( $('#BRcontainer').attr('clientWidth'), $('#BRcontainer').attr('clientHeight'));
+        this.reduce = this.quantizeReduce(this.reduce, this.onePage.reductionFactors);
         this.prepareOnePageView();
     } else if (3 == mode) {
-        this.reduce = this.quantizeReduce(this.reduce);
+        this.reduce = this.quantizeReduce(this.reduce, this.reductionFactors);
         this.prepareThumbnailView();
     } else {
         // $$$ why don't we save autofit?
-        this.twoPage.autofit = false; // Take zoom level from other mode
-        this.reduce = this.quantizeReduce(this.reduce);
+        this.twoPage.autofit = null; // Take zoom level from other mode
+        this.twoPageCalculateReductionFactors();
+        this.reduce = this.quantizeReduce(this.reduce, this.twoPage.reductionFactors);
         this.prepareTwoPageView();
         this.twoPageCenterView(0.5, 0.5); // $$$ TODO preserve center
     }
@@ -1411,7 +1427,7 @@ BookReader.prototype.prepareTwoPageView = function(centerPercentageX, centerPerc
         visibility: 'visible',
         position: 'absolute',
         left: this.twoPage.bookCoverDivLeft + 'px',
-        top: this.twoPage.bookCoverDivTop+'px',
+        top: this.twoPage.bookCoverDivTop+'px'
     }).appendTo('#BRtwopageview');
     
     this.leafEdgeR = document.createElement('div');
@@ -1420,7 +1436,7 @@ BookReader.prototype.prepareTwoPageView = function(centerPercentageX, centerPerc
         width: this.twoPage.leafEdgeWidthR + 'px',
         height: this.twoPage.height-1 + 'px',
         left: this.twoPage.gutter+this.twoPage.scaledWR+'px',
-        top: this.twoPage.bookCoverDivTop+this.twoPage.coverInternalPadding+'px',
+        top: this.twoPage.bookCoverDivTop+this.twoPage.coverInternalPadding+'px'
     }).appendTo('#BRtwopageview');
     
     this.leafEdgeL = document.createElement('div');
@@ -1429,7 +1445,7 @@ BookReader.prototype.prepareTwoPageView = function(centerPercentageX, centerPerc
         width: this.twoPage.leafEdgeWidthL + 'px',
         height: this.twoPage.height-1 + 'px',
         left: this.twoPage.bookCoverDivLeft+this.twoPage.coverInternalPadding+'px',
-        top: this.twoPage.bookCoverDivTop+this.twoPage.coverInternalPadding+'px',    
+        top: this.twoPage.bookCoverDivTop+this.twoPage.coverInternalPadding+'px'
     }).appendTo('#BRtwopageview');
 
     div = document.createElement('div');
@@ -1506,7 +1522,7 @@ BookReader.prototype.prepareTwoPagePopUp = function() {
     this.twoPagePopUp = document.createElement('div');
     this.twoPagePopUp.className = 'BRtwoPagePopUp';
     $(this.twoPagePopUp).css({
-        zIndex: '1000',
+        zIndex: '1000'
     }).appendTo('#BRcontainer');
     $(this.twoPagePopUp).hide();
     
@@ -1719,13 +1735,12 @@ BookReader.prototype.twoPageGetAutofitReduce = function() {
 }
 
 BookReader.prototype.onePageGetAutofitWidth = function() {
-    var widthPadding = 50;
+    var widthPadding = 20;
     return (this.getMedianPageSize().width + 0.0) / ($('#BRcontainer').attr('clientWidth') - widthPadding * 2);
 }
 
 BookReader.prototype.onePageGetAutofitHeight = function() {
-    var heightPadding = 10;
-    return (this.getMedianPageSize().height + 0.0) / ($('#BRcontainer').attr('clientHeight') - heightPadding * 2);
+    return (this.getMedianPageSize().height + 0.0) / ($('#BRcontainer').attr('clientHeight') - this.padding * 2); // make sure a little of adjacent pages show
 }
 
 BookReader.prototype.getMedianPageSize = function() {
@@ -1893,10 +1908,15 @@ BookReader.prototype.last = function() {
 //______________________________________________________________________________
 // Scrolls down one screen view
 BookReader.prototype.scrollDown = function() {
-    if ($.inArray(this.mode, [this.constMode2up, this.constModeThumb]) >= 0) {
+    if ($.inArray(this.mode, [this.constMode1up, this.constModeThumb]) >= 0) {
+        if ( this.mode == this.constMode1up && (this.reduce >= this.onePageGetAutofitHeight()) ) {
+            // Whole pages are visible, scroll whole page only
+            return this.next();
+        }
+    
         $('#BRcontainer').animate(
-            { scrollTop: '+=' + $('#BRcontainer').height() * 0.95 + 'px'},
-            450, 'easeInOutQuint'
+            { scrollTop: '+=' + this._scrollAmount() + 'px'},
+            400, 'easeInOutExpo'
         );
         return true;
     } else {
@@ -1908,10 +1928,15 @@ BookReader.prototype.scrollDown = function() {
 //______________________________________________________________________________
 // Scrolls up one screen view
 BookReader.prototype.scrollUp = function() {
-    if ($.inArray(this.mode, [this.constMode2up, this.constModeThumb]) >= 0) {
+    if ($.inArray(this.mode, [this.constMode1up, this.constModeThumb]) >= 0) {
+        if ( this.mode == this.constMode1up && (this.reduce >= this.onePageGetAutofitHeight()) ) {
+            // Whole pages are visible, scroll whole page only
+            return this.prev();
+        }
+
         $('#BRcontainer').animate(
-            { scrollTop: '-=' + $('#BRcontainer').height() * 0.95 + 'px'},
-            450, 'easeInOutQuint'
+            { scrollTop: '-=' + this._scrollAmount() + 'px'},
+            400, 'easeInOutExpo'
         );
         return true;
     } else {
@@ -1919,6 +1944,18 @@ BookReader.prototype.scrollUp = function() {
     }
 }
 
+// _scrollAmount()
+//______________________________________________________________________________
+// The amount to scroll vertically in integer pixels
+BookReader.prototype._scrollAmount = function() {
+    if (this.constMode1up == this.mode) {
+        // Overlap by % of page size
+        return parseInt($('#BRcontainer').attr('clientHeight') - this.getPageHeight(this.currentIndex()) / this.reduce * 0.03);
+    }
+    
+    return parseInt(0.9 * $('#BRcontainer').attr('clientHeight'));
+}
+
 
 // flipBackToIndex()
 //______________________________________________________________________________
@@ -2271,6 +2308,13 @@ BookReader.prototype.prefetchImg = function(index) {
     if (loadImage) {
         //console.log('prefetching ' + index);
         var img = document.createElement("img");
+        img.className = 'BRpageimage';
+        if (index < 0 || index > (this.numLeafs - 1) ) {
+            // Facing page at beginning or end, or beyond
+            $(img).css({
+                'background-color': 'transparent'
+            });
+        }
         img.src = pageURI;
         img.uri = pageURI; // browser may rewrite src so we stash raw URI here
         this.prefetchedImgs[index] = img;
@@ -2312,7 +2356,6 @@ BookReader.prototype.prepareFlipLeftToRight = function(prevL, prevR) {
         top:    top+'px',
         height: this.twoPage.height,
         width:  scaledW+'px',
-        backgroundColor: this.getPageBackgroundColor(prevL),
         borderRight: '1px solid black',
         zIndex: 1
     }
@@ -2330,7 +2373,6 @@ BookReader.prototype.prepareFlipLeftToRight = function(prevL, prevR) {
         top:    top+'px',
         height: this.twoPage.height,
         width:  '0px',
-        backgroundColor: this.getPageBackgroundColor(prevR),
         borderLeft: '1px solid black',
         zIndex: 2
     }
@@ -2365,7 +2407,6 @@ BookReader.prototype.prepareFlipRightToLeft = function(nextL, nextR) {
         position: 'absolute',
         left:   gutter+'px',
         top:    top+'px',
-        backgroundColor: this.getPageBackgroundColor(nextR),
         height: this.twoPage.height,
         width:  scaledW+'px',
         borderLeft: '1px solid black',
@@ -2383,7 +2424,6 @@ BookReader.prototype.prepareFlipRightToLeft = function(nextL, nextR) {
         position: 'absolute',
         right:   $('#BRtwopageview').attr('clientWidth')-gutter+'px',
         top:    top+'px',
-        backgroundColor: this.getPageBackgroundColor(nextL),
         height: this.twoPage.height,
         width:  0+'px', // Start at 0 width, then grow to the left
         borderRight: '1px solid black',
@@ -2807,62 +2847,6 @@ BookReader.prototype.removeSearchHilites = function() {
 //______________________________________________________________________________
 BookReader.prototype.printPage = function() {
     window.open(this.getPrintURI(), 'printpage', 'width=400, height=500, resizable=yes, scrollbars=no, toolbar=no, location=no');
-
-    /* iframe implementation
-
-    if (null != this.printPopup) { // check if already showing
-        return;
-    }
-    this.printPopup = document.createElement("div");
-    $(this.printPopup).css({
-        position: 'absolute',
-        top:      '20px',
-        left:     ($('#BRcontainer').width()-400)/2 + 'px',
-        width:    '400px',
-        padding:  "20px",
-        border:   "3px double #999999",
-        zIndex:   3,
-        backgroundColor: "#fff"
-    }).appendTo('#BookReader');
-
-    var indexToPrint;
-    if (this.constMode1up == this.mode) {
-        indexToPrint = this.firstIndex;
-    } else {
-        indexToPrint = this.twoPage.currentIndexL;
-    }
-    
-    this.indexToPrint = indexToPrint;
-    
-    var htmlStr = '<div style="text-align: center;">';
-    htmlStr =  '<p style="text-align:center;"><b><a href="javascript:void(0);" onclick="window.frames[0].focus(); window.frames[0].print(); return false;">Click here to print this page</a></b></p>';
-    htmlStr += '<div id="printDiv" name="printDiv" style="text-align: center; width: 233px; margin: auto">'
-    htmlStr +=   '<p style="text-align:right; margin: 0; font-size: 0.85em">';
-    //htmlStr +=     '<button class="BRicon rollover book_up" onclick="br.updatePrintFrame(-1); return false;"></button> ';
-    //htmlStr +=     '<button class="BRicon rollover book_down" onclick="br.updatePrintFrame(1); return false;"></button>';
-    htmlStr += '<a href="#" onclick="br.updatePrintFrame(-1); return false;">Prev</a> <a href="#" onclick="br.updatePrintFrame(1); return false;">Next</a>';
-    htmlStr +=   '</p>';
-    htmlStr += '</div>';
-    htmlStr += '<p style="text-align:center;"><a href="" onclick="br.printPopup = null; $(this.parentNode.parentNode).remove(); return false">Close popup</a></p>';
-    htmlStr += '</div>';
-    
-    this.printPopup.innerHTML = htmlStr;
-    
-    var iframe = document.createElement('iframe');
-    iframe.id = 'printFrame';
-    iframe.name = 'printFrame';
-    iframe.width = '233px'; // 8.5 x 11 aspect
-    iframe.height = '300px';
-    
-    var self = this; // closure
-        
-    $(iframe).load(function() {
-        var doc = BookReader.util.getIFrameDocument(this);
-        $('body', doc).html(self.getPrintFrameContent(self.indexToPrint));
-    });
-    
-    $('#printDiv').prepend(iframe);
-    */
 }
 
 // Get print URI from current indices and mode
@@ -2874,7 +2858,7 @@ BookReader.prototype.getPrintURI = function() {
         indexToPrint = this.firstIndex; // $$$ the index in the middle of the viewport would make more sense
     }
     
-    var options = 'id=' + this.bookId + '&server=' + this.server + '&zip=' + this.zip
+    var options = 'id=' + this.subPrefix + '&server=' + this.server + '&zip=' + this.zip
         + '&format=' + this.imageFormat + '&file=' + this._getPageFile(indexToPrint)
         + '&width=' + this._getPageWidth(indexToPrint) + '&height=' + this._getPageHeight(indexToPrint);
    
@@ -3255,7 +3239,7 @@ BookReader.prototype.bindToolbarNavHandlers = function(jToolbar) {
     });
         
     jToolbar.find('.book_up').bind('click', function(e) {
-        if ($.inArray(self.mode, [self.constMode2up, self.constModeThumb]) >= 0) {
+        if ($.inArray(self.mode, [self.constMode1up, self.constModeThumb]) >= 0) {
             self.scrollUp();
         } else {
             self.prev();
@@ -3264,7 +3248,7 @@ BookReader.prototype.bindToolbarNavHandlers = function(jToolbar) {
     });        
         
     jToolbar.find('.book_down').bind('click', function(e) {
-        if ($.inArray(self.mode, [self.constMode2up, self.constModeThumb]) >= 0) {
+        if ($.inArray(self.mode, [self.constMode1up, self.constModeThumb]) >= 0) {
             self.scrollDown();
         } else {
             self.next();
@@ -3318,8 +3302,17 @@ BookReader.prototype.bindToolbarNavHandlers = function(jToolbar) {
 // Update the displayed zoom factor based on reduction factor
 BookReader.prototype.updateToolbarZoom = function(reduce) {
     var value;
-    if (this.constMode2up == this.mode && this.twoPage.autofit) {
-        value = 'Auto';
+    var autofit = null;
+
+    // $$$ TODO preserve zoom/fit for each mode
+    if (this.mode == this.constMode2up) {
+        autofit = this.twoPage.autofit;
+    } else {
+        autofit = this.onePage.autofit;
+    }
+    
+    if (autofit) {
+        value = autofit.slice(0,1).toUpperCase() + autofit.slice(1);
     } else {
         value = (100 / reduce).toFixed(2);
         // Strip trailing zeroes and decimal if all zeroes
@@ -3690,19 +3683,6 @@ BookReader.prototype.searchHighlightVisible = function() {
     return false;
 }
 
-// getPageBackgroundColor
-//--------
-// Returns a CSS property string for the background color for the given page
-// $$$ turn into regular CSS?
-BookReader.prototype.getPageBackgroundColor = function(index) {
-    if (index >= 0 && index < this.numLeafs) {
-        // normal page
-        return this.pageDefaultBackgroundColor;
-    }
-    
-    return '';
-}
-
 // _getPageWidth
 //--------
 // Returns the page width for the given index, or first or last page if out of range