Pass in book title and page names to use as title
[bookreader.git] / GnuBook / GnuBook.js
index 2260c4c..1e94b11 100644 (file)
@@ -50,6 +50,7 @@ function GnuBook() {
     this.twoPagePopUp = null;
     this.leafEdgeTmp  = null;
     this.embedPopup = null;
+    this.printPopup = null;
     
     this.searchResults = {};
     
@@ -322,6 +323,104 @@ GnuBook.prototype.setDragHandler = function(div) {
     });
 }
 
+// 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.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;
+    });
+}
+
 // drawLeafsOnePage()
 //______________________________________________________________________________
 GnuBook.prototype.drawLeafsOnePage = function() {
@@ -408,7 +507,7 @@ GnuBook.prototype.drawLeafsOnePage = function() {
             $('#GBpageview').append(div);
 
             var img = document.createElement("img");
-            img.src = this.getPageURI(index);
+            img.src = this.getPageURI(index, this.reduce, 0);
             $(img).css('width', width+'px');
             $(img).css('height', height+'px');
             $(div).append(img);
@@ -505,13 +604,13 @@ GnuBook.prototype.drawLeafsTwoPage = function() {
         
 
     this.displayedIndices = [this.twoPage.currentIndexL, this.twoPage.currentIndexR];
-    this.setClickHandlers();
+    this.setMouseHandlers2UP();
     this.twoPageSetCursor();
 
     this.updatePageNumBox2UP();
     this.updateToolbarZoom(this.reduce);
     
-    this.twoPagePlaceFlipAreas();
+    // this.twoPagePlaceFlipAreas();  // No longer used
 
 }
 
@@ -1004,7 +1103,9 @@ GnuBook.prototype.prepareTwoPageView = function(centerPercentageX, centerPercent
     
     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',
@@ -1021,6 +1122,7 @@ GnuBook.prototype.prepareTwoPageView = function(centerPercentageX, centerPercent
     }).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',
@@ -1035,9 +1137,10 @@ GnuBook.prototype.prepareTwoPageView = function(centerPercentageX, centerPercent
     }).bind('mousedown', function(e) {
         e.preventDefault();
     }).appendTo('#GBtwopageview');
-
+    */
+    
     this.prepareTwoPagePopUp();
-
+    
     this.displayedIndices = [];
     
     //this.indicesToDisplay=[firstLeaf, firstLeaf+1];
@@ -1233,7 +1336,7 @@ GnuBook.prototype.getIdealSpreadSize = function(firstIndex, secondIndex) {
     
     ideal.width = ($('#GBcontainer').width() - widthOutsidePages) >> 1;
     ideal.width -= 10; // $$$ fudge factor
-    ideal.height = $('#GBcontainer').width() - heightOutsidePages;
+    ideal.height = $('#GBcontainer').height() - heightOutsidePages;
     ideal.height -= 20; // fudge factor
     //console.log('init idealWidth='+ideal.width+' idealHeight='+ideal.height + ' ratio='+ratio);
 
@@ -1579,8 +1682,8 @@ GnuBook.prototype.flipLeftToRight = function(newIndexL, newIndexR) {
             self.updateSearchHilites2UP();
             self.updatePageNumBox2UP();
             
-            self.twoPagePlaceFlipAreas();
-            self.setClickHandlers();
+            // self.twoPagePlaceFlipAreas(); // No longer used
+            self.setMouseHandlers2UP();
             self.twoPageSetCursor();
             
             if (self.animationFinishedCallback) {
@@ -1711,8 +1814,8 @@ GnuBook.prototype.flipRightToLeft = function(newIndexL, newIndexR) {
             self.updateSearchHilites2UP();
             self.updatePageNumBox2UP();
             
-            self.twoPagePlaceFlipAreas();
-            self.setClickHandlers();     
+            // self.twoPagePlaceFlipAreas(); // No longer used
+            self.setMouseHandlers2UP();     
             self.twoPageSetCursor();
             
             if (self.animationFinishedCallback) {
@@ -1723,10 +1826,9 @@ GnuBook.prototype.flipRightToLeft = function(newIndexL, newIndexR) {
     });    
 }
 
-// setClickHandlers
+// setMouseHandlers2UP
 //______________________________________________________________________________
-GnuBook.prototype.setClickHandlers = function() {
-    var self = this;
+GnuBook.prototype.setMouseHandlers2UP = function() {
     /*
     $(this.prefetchedImgs[this.twoPage.currentIndexL]).bind('dblclick', function() {
         //self.prevPage();
@@ -1740,8 +1842,21 @@ GnuBook.prototype.setClickHandlers = function() {
     });
     */
     
-    this.setDragHandler( $(this.prefetchedImgs[this.twoPage.currentIndexL]) );
-    this.setDragHandler( $(this.prefetchedImgs[this.twoPage.currentIndexR]) );
+    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()
@@ -2278,6 +2393,139 @@ GnuBook.prototype.removeSearchHilites = function() {
     }
 }
 
+// printPage
+//______________________________________________________________________________
+GnuBook.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:     ($('#GBcontainer').width()-400)/2 + 'px',
+        width:    '400px',
+        padding:  "20px",
+        border:   "3px double #999999",
+        zIndex:   3,
+        backgroundColor: "#fff"
+    }).appendTo('#GnuBook');
+
+    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="GBicon rollover book_up" onclick="gb.updatePrintFrame(-1); return false;"></button> ';
+    //htmlStr +=     '<button class="GBicon rollover book_down" onclick="gb.updatePrintFrame(1); return false;"></button>';
+    htmlStr += '<a href="#" onclick="gb.updatePrintFrame(-1); return false;">Prev</a> <a href="#" onclick="gb.updatePrintFrame(1); return false;">Next</a>';
+    htmlStr +=   '</p>';
+    htmlStr += '</div>';
+    htmlStr += '<p style="text-align:center;"><a href="" onclick="gb.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 = GnuBook.util.getIFrameDocument(this);
+        $('body', doc).html(self.getPrintFrameContent(self.indexToPrint));
+    });
+    
+    $('#printDiv').prepend(iframe);
+    */
+}
+
+// Get print URI from current indices and mode
+GnuBook.prototype.getPrintURI = function() {
+    var indexToPrint;
+    if (this.constMode2up == this.mode) {
+        indexToPrint = this.twoPage.currentIndexL;        
+    } else {
+        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
+        + '&format=' + this.imageFormat + '&index=' + this.leafMap[indexToPrint]
+        + '&width=' + this.getPageWidth(indexToPrint) + '&height=' + this.getPageHeight(indexToPrint);
+   
+    if (this.constMode2up == this.mode) {
+        options += '&index2=' + this.leafMap[this.twoPage.currentIndexR] + '&width2=' + this.getPageWidth(this.twoPage.currentIndexR);
+        options += '&height2=' + this.getPageHeight(this.twoPage.currentIndexR);
+        options += '&title=' + escape(this.shortTitle(30) + ' - Pages ' + this.getPageNum(this.twoPage.currentIndexL) + ', ' + this.getPageNum(this.twoPage.currentIndexR));
+    } else {
+        options += '&title=' + escape(this.shortTitle(30) + ' - Page ' + this.getPageNum(indexToPrint));
+    }
+
+    return '/bookreader/print.php?' + options;
+}
+
+GnuBook.prototype.getPrintFrameContent = function(index) {    
+    // We fit the image based on an assumed A4 aspect ratio.  A4 is a bit taller aspect than
+    // 8.5x11 so we should end up not overflowing on either paper size.
+    var paperAspect = 8.5 / 11;
+    var imageAspect = this.getPageWidth(index) / this.getPageHeight(index);
+    
+    var rotate = 0;
+    
+    // Rotate if possible and appropriate, to get larger image size on printed page
+    if (this.canRotatePage(index)) {
+        if (imageAspect > 1 && imageAspect > paperAspect) {
+            // more wide than square, and more wide than paper
+            rotate = 90;
+            imageAspect = 1/imageAspect;
+        }
+    }
+    
+    var fitAttrs;
+    if (imageAspect > paperAspect) {
+        // wider than paper, fit width
+        fitAttrs = 'width="95%"';
+    } else {
+        // taller than paper, fit height
+        fitAttrs = 'height="95%"';
+    }
+
+    var imageURL = this.getPageURI(index, 1, rotate);
+    var iframeStr = '<html style="padding: 0; border: 0; margin: 0"><head><title>' + this.bookTitle + '</title></head><body style="padding: 0; border:0; margin: 0">';
+    iframeStr += '<div style="text-align: center; width: 99%; height: 99%; overflow: hidden;">';
+    iframeStr +=   '<img src="' + imageURL + '" ' + fitAttrs + ' />';
+    iframeStr += '</div>';
+    iframeStr += '</body></html>';
+    
+    return iframeStr;
+}
+
+GnuBook.prototype.updatePrintFrame = function(delta) {
+    var newIndex = this.indexToPrint + delta;
+    newIndex = GnuBook.util.clamp(newIndex, 0, this.numLeafs - 1);
+    if (newIndex == this.indexToPrint) {
+        return;
+    }
+    this.indexToPrint = newIndex;
+    var doc = GnuBook.util.getIFrameDocument($('#printFrame')[0]);
+    $('body', doc).html(this.getPrintFrameContent(this.indexToPrint));
+}
+
 // showEmbedCode()
 //______________________________________________________________________________
 GnuBook.prototype.showEmbedCode = function() {
@@ -2470,15 +2718,28 @@ GnuBook.prototype.jumpIndexForRightEdgePageX = function(pageX) {
 
 GnuBook.prototype.initToolbar = function(mode, ui) {
 
-    $("#GnuBook").append("<div id='GBtoolbar'><span style='float:left;'>"
-        + "<a class='GBicon logo rollover' href='" + this.logoURL + "'>&nbsp;</a>"
-        + " <button class='GBicon rollover zoom_out' onclick='gb.zoom(-1); return false;'/>" 
-        + "<button class='GBicon rollover zoom_in' onclick='gb.zoom(1); return false;'/>"
-        + " <span class='label'>Zoom: <span id='GBzoom'>"+parseInt(100/this.reduce)+"</span></span>"
-        + " <button class='GBicon rollover one_page_mode' onclick='gb.switchMode(1); return false;'/>"
-        + " <button class='GBicon rollover two_page_mode' onclick='gb.switchMode(2); return false;'/>"
-        + "&nbsp;&nbsp;<a class='GBblack title' href='"+this.bookUrl+"' target='_blank'>"+this.shortTitle(50)+"</a>"
-        + "</span></div>");
+    $("#GnuBook").append("<div id='GBtoolbar'>"
+        + "<span id='GBtoolbarbuttons' style='float: right'>"
+        +   "<button class='GBicon print rollover' /> <button class='GBicon rollover embed' />"
+        +   "<form class='GBpageform' action='javascript:' onsubmit='gb.jumpToPage(this.elements[0].value)'> <span class='label'>Page:<input id='GBpagenum' type='text' size='3' onfocus='gb.autoStop();'></input></span></form>"
+        +   "<div class='GBtoolbarmode2' style='display: none'><button class='GBicon rollover book_leftmost' /><button class='GBicon rollover book_left' /><button class='GBicon rollover book_right' /><button class='GBicon rollover book_rightmost' /></div>"
+        +   "<div class='GBtoolbarmode1' style='display: none'><button class='GBicon rollover book_top' /><button class='GBicon rollover book_up' /> <button class='GBicon rollover book_down' /><button class='GBicon rollover book_bottom' /></div>"
+        +   "<button class='GBicon rollover play' /><button class='GBicon rollover pause' style='display: none' />"
+        + "</span>"
+        
+        + "<span>"
+        +   "<a class='GBicon logo rollover' href='" + this.logoURL + "'>&nbsp;</a>"
+        +   " <button class='GBicon rollover zoom_out' onclick='gb.zoom(-1); return false;'/>" 
+        +   "<button class='GBicon rollover zoom_in' onclick='gb.zoom(1); return false;'/>"
+        +   " <span class='label'>Zoom: <span id='GBzoom'>"+parseInt(100/this.reduce)+"</span></span>"
+        +   " <button class='GBicon rollover one_page_mode' onclick='gb.switchMode(1); return false;'/>"
+        +   " <button class='GBicon rollover two_page_mode' onclick='gb.switchMode(2); return false;'/>"
+        + "</span>"
+        
+        + "<span id='#GBbooktitle'>"
+        +   "&nbsp;&nbsp;<a class='GBblack title' href='"+this.bookUrl+"' target='_blank'>"+this.bookTitle+"</a>"
+        + "</span>"
+        + "</div>");
     
     this.updateToolbarZoom(this.reduce); // Pretty format
         
@@ -2490,12 +2751,7 @@ GnuBook.prototype.initToolbar = function(mode, ui) {
     var jToolbar = $('#GBtoolbar'); // j prefix indicates jQuery object
     
     // We build in mode 2
-    jToolbar.append("<span id='GBtoolbarbuttons' style='float: right'>"
-        + "<button class='GBicon rollover embed' />"
-        + "<form class='GBpageform' action='javascript:' onsubmit='gb.jumpToPage(this.elements[0].value)'> <span class='label'>Page:<input id='GBpagenum' type='text' size='3' onfocus='gb.autoStop();'></input></span></form>"
-        + "<div class='GBtoolbarmode2' style='display: none'><button class='GBicon rollover book_leftmost' /><button class='GBicon rollover book_left' /><button class='GBicon rollover book_right' /><button class='GBicon rollover book_rightmost' /></div>"
-        + "<div class='GBtoolbarmode1' style='display: none'><button class='GBicon rollover book_top' /><button class='GBicon rollover book_up' /> <button class='GBicon rollover book_down' /><button class='GBicon rollover book_bottom' /></div>"
-        + "<button class='GBicon rollover play' /><button class='GBicon rollover pause' style='display: none' /></span>");
+    jToolbar.append();
 
     this.bindToolbarNavHandlers(jToolbar);
     
@@ -2505,6 +2761,7 @@ GnuBook.prototype.initToolbar = function(mode, ui) {
                    '.zoom_out': 'Zoom out',
                    '.one_page_mode': 'One-page view',
                    '.two_page_mode': 'Two-page view',
+                   '.print': 'Print this page',
                    '.embed': 'Embed bookreader',
                    '.book_left': 'Flip left',
                    '.book_right': 'Flip right',
@@ -2579,6 +2836,11 @@ GnuBook.prototype.bindToolbarNavHandlers = function(jToolbar) {
         gb.next();
         return false;
     });
+
+    jToolbar.find('.print').bind('click', function(e) {
+        gb.printPage();
+        return false;
+    });
         
     jToolbar.find('.embed').bind('click', function(e) {
         gb.showEmbedCode();
@@ -2683,8 +2945,6 @@ GnuBook.prototype.shortTitle = function(maximumCharacters) {
     return title;
 }
 
-
-
 // Parameter related functions
 
 // updateFromParams(params)
@@ -2848,7 +3108,7 @@ GnuBook.prototype.getPageIndices = function(pageNum) {
         try {
             var pageIntStr = pageNum.slice(1, pageNum.length);
             var pageIndex = parseInt(pageIntStr);
-            indices.append(pageIndex);
+            indices.push(pageIndex);
             return indices;
         } catch(err) {
             // Do nothing... will run through page names and see if one matches
@@ -2918,21 +3178,6 @@ GnuBook.prototype.startLocationPolling = function() {
     }, 500);
 }
 
-// getEmbedURL
-//________
-// Returns a URL for an embedded version of the current book
-GnuBook.prototype.getEmbedURL = function() {
-    // We could generate a URL hash fragment here but for now we just leave at defaults
-    return 'http://' + window.location.host + '/stream/'+this.bookId + '?ui=embed';
-}
-
-// getEmbedCode
-//________
-// Returns the embed code HTML fragment suitable for copy and paste
-GnuBook.prototype.getEmbedCode = function() {
-    return "<iframe src='" + this.getEmbedURL() + "' width='480px' height='430px'></iframe>";
-}
-
 // canSwitchToMode
 //________
 // Returns true if we can switch to the requested mode
@@ -2953,5 +3198,11 @@ GnuBook.prototype.canSwitchToMode = function(mode) {
 GnuBook.util = {
     clamp: function(value, min, max) {
         return Math.min(Math.max(value, min), max);
+    },
+
+    getIFrameDocument: function(iframe) {
+        // Adapted from http://xkr.us/articles/dom/iframe-document/
+        var outer = (iframe.contentWindow || iframe.contentDocument);
+        return (outer.document || outer);
     }
-}
\ No newline at end of file
+}