Recent changes
[bookreader.git] / BookReader / BookReader.js
index 2082923..c3481ef 100644 (file)
@@ -157,13 +157,23 @@ BookReader.prototype.init = function() {
     $("#BookReader").empty();
         
     this.initToolbar(this.mode, this.ui); // Build inside of toolbar div
+    
     $("#BookReader").append("<div id='BRcontainer'></div>");
     $("#BRcontainer").append("<div id='BRpageview'></div>");
+    
+    this.initNavbar();
+    this.bindNavigationHandlers();
+    
+    // Autohide nav after showing for awhile
+    var self = this;
+    $(window).bind('load', function() {
+        setTimeout(function() { self.hideNavigation(); }, 3000);
+    });
 
     $("#BRcontainer").bind('scroll', this, function(e) {
         e.data.loadLeafs();
     });
-        
+    
     this.setupKeyListeners();
     this.startLocationPolling();
 
@@ -235,6 +245,8 @@ BookReader.prototype.init = function() {
         
     // Enact other parts of initial params
     this.updateFromParams(params);
+    
+    //XXXmang window.setTimeout(self.hideNavigation, 3000);
 }
 
 BookReader.prototype.setupKeyListeners = function() {
@@ -3158,29 +3170,161 @@ BookReader.prototype.jumpIndexForRightEdgePageX = function(pageX) {
     }
 }
 
+// initNavbar
+//______________________________________________________________________________
+// Initialize the navigation bar.
+// $$$ this could also add the base elements to the DOM, so disabling the nav bar
+//     could be as simple as not calling this function
+BookReader.prototype.initNavbar = function() {
+    // Setup nav / chapter / search results bar
+    $('.chapter').bt({
+        contentSelector: '$(this).find(".title")',
+        trigger: 'hover',
+        closeWhenOthersOpen: true,
+        cssStyles: {
+            backgroundColor: '#000',
+            border: '2px solid #e2dcc5',
+            borderBottom: 'none',
+            padding: '5px 10px',
+            fontFamily: '"Arial", sans-serif',
+            fontSize: '11px',
+            fontWeight: '700',
+            color: '#fff',
+            whiteSpace: 'nowrap'
+        },
+        shrinkToFit: true,
+        width: '200px',
+        padding: 0,
+        spikeGirth: 0,
+        spikeLength: 0,
+        overlap: '16px',
+        overlay: false,
+        killTitle: true, 
+        textzIndex: 9999,
+        boxzIndex: 9998,
+        wrapperzIndex: 9997,
+        offsetParent: null,
+        positions: ['top'],
+        fill: 'black',
+        windowMargin: 10,
+        strokeWidth: 0,
+        cornerRadius: 0,
+        centerPointX: 0,
+        centerPointY: 0,
+        shadow: false
+    });
+    $('.search').bt({
+        contentSelector: '$(this).find(".query")',
+        trigger: 'click',
+        closeWhenOthersOpen: true,
+        cssStyles: {
+            padding: '10px 10px 15px',
+            backgroundColor: '#fff',
+            border: '3px solid #e2dcc5',
+            borderBottom: 'none',
+            fontFamily: '"Lucida Grande","Arial",sans-serif',
+            fontSize: '12px',
+            lineHeight: '18px',
+            color: '#615132'
+        },
+        shrinkToFit: false,
+        width: '230px',
+        padding: 0,
+        spikeGirth: 0,
+        spikeLength: 0,
+        overlap: '10px',
+        overlay: false,
+        killTitle: false, 
+        textzIndex: 9999,
+        boxzIndex: 9998,
+        wrapperzIndex: 9997,
+        offsetParent: null,
+        positions: ['top'],
+        fill: 'white',
+        windowMargin: 10,
+        strokeWidth: 3,
+        strokeStyle: '#e2dcc5',
+        cornerRadius: 0,
+        centerPointX: 0,
+        centerPointY: 0,
+        shadow: false
+    });
+    $('.searchChap').bt({
+        contentSelector: '$(this).find(".query")',
+        trigger: 'click',
+        closeWhenOthersOpen: true,
+        cssStyles: {
+            width: '250px',
+            padding: '10px 10px 15px',
+            backgroundColor: '#fff',
+            border: '3px solid #e2dcc5',
+            borderBottom: 'none',
+            fontFamily: '"Lucida Grande","Arial",sans-serif',
+            fontSize: '12px',
+            lineHeight: '18px',
+            color: '#615132'
+        },
+        shrinkToFit: false,
+        width: '230px',
+        padding: 0,
+        spikeGirth: 0,
+        spikeLength: 0,
+        overlap: '10px',
+        overlay: false,
+        killTitle: true, 
+        textzIndex: 9999,
+        boxzIndex: 9998,
+        wrapperzIndex: 9997,
+        offsetParent: null,
+        positions: ['top'],
+        fill: 'white',
+        windowMargin: 10,
+        strokeWidth: 3,
+        strokeStyle: '#e2dcc5',
+        cornerRadius: 0,
+        centerPointX: 0,
+        centerPointY: 0,
+        shadow: false
+    });
+    $('.chapter').each(function(){
+        $(this).hover(function(){
+            $(this).addClass('front');
+        },function(){
+            $(this).removeClass('front');
+        });
+    });
+    $('.search').each(function(){
+        $(this).hover(function(){
+            $(this).addClass('front');
+        },function(){
+            $(this).removeClass('front');
+        });
+    });
+    $('.searchChap').each(function(){
+        $(this).hover(function(){
+            $(this).addClass('front');
+        },function(){
+            $(this).removeClass('front');
+        });
+    });
+    $("#BRslider").draggable({axis:'x',containment:'parent'});
+}
+
 BookReader.prototype.initToolbar = function(mode, ui) {
 
     $("body").append("<div id='BRtoolbar'>"
-        + "<span id='BRtoolbarbuttons' style='float:right;'>"
-        +   "<button class='BRicon bookmark modal'></button>"
-        +   "<button class='BRicon link modal'></button>"
-        +   "<button class='BRicon embed modal'></button>"
+        + "<span id='BRtoolbarbuttons'>"
+        /* XXXmang integrate search */
+        +   "<form method='get' id='booksearch'><input type='search' id='textSrch' name='textSrch' val='' placeholder='Search inside'/><button type='submit' id='btnSrch' name='btnSrch'>GO</button></form>"
+        +   "<button class='BRicon info' onclick='br.switchMode(3); return false;'></button>"
+        +   "<button class='BRicon share' onclick='br.switchMode(2); return false;'></button>"
         +   "<button class='BRicon read modal'></button>"
         +   "<button class='BRicon full'></button>"
-//        +   "<div class='BRtoolbarmode2' style='display: none'><button class='BRicon book_leftmost'></button><button class='BRicon book_left'></button><button class='BRicon book_right'></button><button class='BRicon book_rightmost'></button></div>"
-//        +   "<div class='BRtoolbarmode1' style='display: none'><button class='BRicon book_top'></button><button class='BRicon book_up'></button> <button class='BRicon book_down'></button><button class='BRicon book_bottom'></button></div>"
-//        +   "<div class='BRtoolbarmode3' style='display: none'><button class='BRicon book_top'></button><button class='BRicon book_up'></button> <button class='BRicon book_down'></button><button class='BRicon book_bottom'></button></div>"
-//        +   "<button class='BRicon play'></button><button class='BRicon pause' style='display: none'></button>"
         + "</span>"
         
         + "<span>"
         +   "<a class='logo' href='" + this.logoURL + "'></a>"
-        +   "<button class='BRicon glass'></button>"
-        /* XXXmang integrate search */
-        +   "<form method='get' id='booksearch'><input type='search' id='textSrch' name='textSrch' val='' placeholder='Search'/><button type='submit' id='btnSrch' name='btnSrch'>GO</button></form>"
-        +   "<button class='BRicon fit'></button>"
-        +   "<button class='BRicon thumb' onclick='br.switchMode(3); return false;'></button>"
-        +   "<button class='BRicon twopg' onclick='br.switchMode(2); return false;'></button>"
+        +   "<div id='BRreturn'><span>Back to</span><a href='BOOK URL'>Book Title</a></div>"
         + "</span>"
         
         + "</div>");
@@ -3386,6 +3530,73 @@ BookReader.prototype.updateToolbarZoom = function(reduce) {
     $('#BRzoom').text(value);
 }
 
+// bindNavigationHandlers
+//______________________________________________________________________________
+// Bind navigation handlers
+BookReader.prototype.bindNavigationHandlers = function() {
+    $('#BookReader').die('mousemove.navigation').live('mousemove.navigation',
+        { 'br': this },
+        this.navigationMousemoveHandler
+    );
+}
+
+// unbindNavigationHandlers
+//______________________________________________________________________________
+// Unbind navigation handlers
+BookReader.prototype.unbindNavigationHandlers = function() {
+    $('#BookReader').die('mousemove.navigation');
+}
+
+// navigationMousemoveHandler
+//______________________________________________________________________________
+// Handle mousemove related to navigation.  Bind at #BookReader level to allow autohide.
+BookReader.prototype.navigationMousemoveHandler = function(event) {
+    // $$$ possibly not great to be calling this for every mousemove
+    var navkey = $(document).height() - 75;
+    if ((event.pageY < 76) || (event.pageY > navkey)) {
+        // inside or near navigation elements
+        event.data['br'].hideNavigation();
+    } else {
+        event.data['br'].showNavigation();
+    }
+}
+
+// navigationIsVisible
+//______________________________________________________________________________
+// Returns true if the navigation elements are currently visible
+BookReader.prototype.navigationIsVisible = function() {
+    // $$$ doesn't account for transitioning states, nav must be fully visible to return true
+    var toolpos = $('#BRtoolbar').offset();
+    var tooltop = toolpos.top;
+    if (tooltop == 0) {
+        return true;
+    }
+    return false;
+}
+
+// hideNavigation
+//______________________________________________________________________________
+// Hide navigation elements, if visible
+BookReader.prototype.hideNavigation = function() {
+    // Check if navigation is showing
+    if (this.navigationIsVisible()) {
+        // $$$ don't hardcode height
+        $('#BRtoolbar').animate({top:-60});
+        $('#BRnav').animate({bottom:-60});
+    }
+}
+
+// showNavigation
+//______________________________________________________________________________
+// Show navigation elements
+BookReader.prototype.showNavigation = function() {
+    // Check if navigation is hidden
+    if (!this.navigationIsVisible()) {
+        $('#BRtoolbar').animate({top:0});
+        $('#BRnav').animate({bottom:0});
+    }
+}
+
 // firstDisplayableIndex
 //______________________________________________________________________________
 // Returns the index of the first visible page, dependent on the mode.