$("#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();
// Enact other parts of initial params
this.updateFromParams(params);
+
+ //XXXmang window.setTimeout(self.hideNavigation, 3000);
}
BookReader.prototype.setupKeyListeners = function() {
width: this.twoPage.bookCoverDivWidth + 'px',
height: this.twoPage.bookCoverDivHeight+'px',
visibility: 'visible',
- position: 'absolute',
- backgroundColor: 'transparent',
- /* XXXmang move to CSS */
- backgroundImage: 'url(images/back_pages.png)',
- left: this.twoPage.bookCoverDivLeft + 'px',
- top: this.twoPage.bookCoverDivTop+'px',
- MozBoxShadow: '0 0 2px #000',
- WebkitBoxShadow: '0 0 2px #000'
}).appendTo('#BRtwopageview');
this.leafEdgeR = document.createElement('div');
this.leafEdgeR.className = 'BRleafEdgeR';
$(this.leafEdgeR).css({
width: this.twoPage.leafEdgeWidthR + 'px',
- height: this.twoPage.height-1 + 'px',
+ height: this.twoPage.height + 'px',
left: this.twoPage.gutter+this.twoPage.scaledWR+'px',
top: this.twoPage.bookCoverDivTop+this.twoPage.coverInternalPadding+'px'
}).appendTo('#BRtwopageview');
this.leafEdgeL.className = 'BRleafEdgeL';
$(this.leafEdgeL).css({
width: this.twoPage.leafEdgeWidthL + 'px',
- height: this.twoPage.height-1 + 'px',
+ height: this.twoPage.height + 'px',
left: this.twoPage.bookCoverDivLeft+this.twoPage.coverInternalPadding+'px',
top: this.twoPage.bookCoverDivTop+this.twoPage.coverInternalPadding+'px'
}).appendTo('#BRtwopageview');
this.twoPagePopUp = document.createElement('div');
this.twoPagePopUp.className = 'BRtwoPagePopUp';
$(this.twoPagePopUp).css({
- zIndex: '1000',
- // XXXmang move to CSS
- padding: '6px',
- position: 'absolute',
- fontFamily: 'Arial,sans-serif',
- fontSize: '11px',
- color: 'white',
- zIndex: '1000',
- backgroundColor: '#939598',
- opacity: 0.85,
- webkitBorderRadius: '4px',
- mozBorderRadius: '4px',
- borderRadius: '4px',
- whiteSpace: 'nowrap'
+ zIndex: '1000'
}).appendTo('#BRcontainer');
$(this.twoPagePopUp).hide();
// 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;
+ this.twoPage.bookCoverDivWidth = this.twoPageCoverWidth(this.twoPage.scaledWL + this.twoPage.scaledWR);
// The height of the book cover div
this.twoPage.bookCoverDivHeight = this.twoPage.height + 2 * this.twoPage.coverInternalPadding;
this.leafEdgeTmp.className = 'BRleafEdgeTmp';
$(this.leafEdgeTmp).css({
width: leafEdgeTmpW + 'px',
- height: this.twoPage.height-1 + 'px',
+ height: this.twoPage.height + 'px',
left: leftEdgeTmpLeft + 'px',
top: top+'px',
zIndex:1000
this.leafEdgeTmp.className = 'BRleafEdgeTmp';
$(this.leafEdgeTmp).css({
width: leafEdgeTmpW + 'px',
- height: this.twoPage.height-1 + 'px',
+ height: this.twoPage.height + 'px',
left: gutter+scaledW+'px',
top: top+'px',
zIndex:1000
}
}
+// 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>"
+ /* 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>"
- + "<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>"
+ "</span>"
+ "</div>");
$('#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.
projects / bookreader.git / blobdiff