$("#BookReader").empty();
this.initToolbar(this.mode, this.ui); // Build inside of toolbar div
-
- $("#BookReader").append("<div id='BRcontainer'></div>");
+ $("#BookReader").append("<div id='BRcontainer' dir='ltr'></div>");
$("#BRcontainer").append("<div id='BRpageview'></div>");
- // Autohide nav after showing for awhile
- var self = this;
- if (this.uiAutoHide) {
- $(window).bind('load', function() {
- setTimeout(function() { self.hideNavigation(); }, 3000);
- });
- };
-
$("#BRcontainer").bind('scroll', this, function(e) {
e.data.loadLeafs();
});
$(window).bind('resize', this, function(e) {
//console.log('resize!');
+
if (1 == e.data.mode) {
//console.log('centering 1page view');
if (e.data.autofit) {
this.firstIndex = startIndex;
this.prepareThumbnailView();
this.jumpToIndex(startIndex);
- } else {
- //this.resizePageView();
-
+ } else {
this.displayedIndices=[0];
this.firstIndex = startIndex;
this.displayedIndices = [this.firstIndex];
this.initNavbar();
this.bindNavigationHandlers();
+ // Set strings in the UI
+ this.initUIStrings();
+
// Start AJAX request for OL data
if (this.getOpenLibraryRecord) {
this.getOpenLibraryRecord(this.gotOpenLibraryRecord);
}
+
}
BookReader.prototype.setupKeyListeners = function() {
$('#pagediv'+index).remove();
}
} else {
- /*
- var mRow = this.displayedRows[i];
- var mLeafs = '[' + [leaf.num for each (leaf in leafMap[mRow].leafs)] + ']';
- console.log('NOT Removing row ' + mRow + ' ' + mLeafs);
- */
+ // var mRow = this.displayedRows[i];
+ // var mLeafs = '[' + [leaf.num for each (leaf in leafMap[mRow].leafs)] + ']';
+ // console.log('NOT Removing row ' + mRow + ' ' + mLeafs);
}
}
//this.indicesToDisplay=[firstLeaf, firstLeaf+1];
//console.log('indicesToDisplay: ' + this.indicesToDisplay[0] + ' ' + this.indicesToDisplay[1]);
-
+
this.drawLeafsTwoPage();
this.updateToolbarZoom(this.reduce);
// set based on reduction factor
spreadSize = this.getSpreadSizeFromReduce(firstIndex, secondIndex, this.reduce);
}
-
+
// Both pages together
this.twoPage.height = spreadSize.height;
this.twoPage.width = spreadSize.width;
height: this._getPageHeight(secondIndex),
width: this._getPageWidth(secondIndex)
}
-
+
var firstIndexRatio = first.height / first.width;
var secondIndexRatio = second.height / second.width;
//console.log('firstIndexRatio = ' + firstIndexRatio + ' secondIndexRatio = ' + secondIndexRatio);
var ratio;
if (Math.abs(firstIndexRatio - canon5Dratio) < Math.abs(secondIndexRatio - canon5Dratio)) {
ratio = firstIndexRatio;
- //console.log('using firstIndexRatio ' + ratio);
} else {
ratio = secondIndexRatio;
- //console.log('using secondIndexRatio ' + ratio);
}
var totalLeafEdgeWidth = parseInt(this.numLeafs * 0.1);
return spreadSize.reduce;
}
+// twoPageIsZoomedIn
+//______________________________________________________________________________
+// Returns true if the pages extend past the edge of the view
+BookReader.prototype.twoPageIsZoomedIn = function() {
+ var autofitReduce = this.twoPageGetAutofitReduce();
+ var isZoomedIn = false;
+ if (this.twoPage.autofit != 'auto') {
+ if (this.reduce < this.twoPageGetAutofitReduce()) {
+ isZoomedIn = true;
+ }
+ }
+ return isZoomedIn;
+}
+
BookReader.prototype.onePageGetAutofitWidth = function() {
var widthPadding = 20;
return (this.getMedianPageSize().width + 0.0) / ($('#BRcontainer').attr('clientWidth') - widthPadding * 2);
function(e) {
if (e.button == 2) {
// right click
- return;
+ return true;
}
-
- if (e.data.self.reduce <= e.data.self.twoPage.autofit) {
- // Don't trigger if zoomed in
+
+ if (! e.data.self.twoPageIsZoomedIn()) {
e.data.self.ttsStop();
e.data.self.left();
}
function(e) {
if (e.button == 2) {
// right click
- return;
+ return true;
}
- if (e.data.self.reduce <= e.data.self.twoPage.autofit) {
- // Don't trigger if zoomed in
+
+ if (! e.data.self.twoPageIsZoomedIn()) {
e.data.self.ttsStop();
- e.data.self.right();
+ e.data.self.right();
}
e.preventDefault();
}
BookReader.prototype.initNavbar = function() {
// Setup nav / chapter / search results bar
- // $$$ should make this work inside the BookReader div (self-contained), rather than after
- $('#BookReader').after(
+ $('#BookReader').append(
'<div id="BRnav">'
+ '<div id="BRpage">' // Page turn buttons
+ '<button class="BRicon onepg"></button>'
$("#BRzoombtn").draggable({axis:'y',containment:'parent'});
- //XXXmang remove once done testing
- //this.addSearchResult("There is a place where the <strong>sidewalk</strong> ends And before the street begins, And there the grass grows soft and white, And there the sun burns crimson bright,And there the moon-bird rests from his flight To cool in the peppermint wind.", "20", 31);
- //this.addSearchResult("There is a place where the <strong>sidewalk</strong> BEGINS And there the moon-bird rests from his flight To cool in the peppermint wind.", "60", 71);
-
+ /* Initial hiding
+ $('#BRtoolbar').delay(3000).animate({top:-40});
+ $('#BRnav').delay(3000).animate({bottom:-53});
+ changeArrow();
+ $('.BRnavCntl').delay(3000).animate({height:'43px'}).delay(1000).animate({opacity:.25},1000);
+ */
}
BookReader.prototype.updateNavPageNum = function(index) {
readIcon = "<button class='BRicon read modal'></button>";
}
- $("body").append(
+ $("#BookReader").append(
"<div id='BRtoolbar'>"
+ "<span id='BRtoolbarbuttons'>"
- /* XXXmang integrate search */
+ "<form action='javascript:br.search($(\"#textSrch\").val());' 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 play'></button>"
+ "<button class='BRicon pause'></button>"
+ "</span>"
+ "<span><a class='logo' href='" + this.logoURL + "'></a></span>"
+ "<span id='BRreturn'><span>Back to</span><a href='" + this.bookUrl + "'>" + this.bookTitle + "</a></span>"
- + "<div id='BRnavCntlTop' class='BRnavCntl BRup'></div>"
+ + "<div id='BRnavCntlTop' class='BRnabrbuvCntl'></div>"
+ "</div>"
/*
+ "<div id='BRzoomer'>"
+ "</div>"
*/
);
-
+
+ $('#BRtoolbar .BRnavCntl').addClass('BRup');
$('#BRtoolbar .pause').hide();
this.updateToolbarZoom(this.reduce); // Pretty format
// We build in mode 2
jToolbar.append();
-
- // Navigation handlers will be bound after all UI is in place -- makes moving icons between
- // the toolbar and nav bar easier
-
- // Setup tooltips -- later we could load these from a file for i18n
- var titles = { '.logo': 'Go to Archive.org',
- '.zoom_in': 'Zoom in',
- '.zoom_out': 'Zoom out',
- '.onepg': 'One-page view',
- '.twopg': 'Two-page view',
- '.thumb': 'Thumbnail view',
- '.print': 'Print this page',
- '.embed': 'Embed BookReader',
- '.link': 'Link to this book (and page)',
- '.bookmark': 'Bookmark this page',
- '.read': 'Read this book aloud',
- '.full': 'Show fullscreen',
- '.book_left': 'Flip left',
- '.book_right': 'Flip right',
- '.book_up': 'Page up',
- '.book_down': 'Page down',
- '.play': 'Play',
- '.pause': 'Pause',
- '.book_top': 'First page',
- '.book_bottom': 'Last page'
- };
- if ('rl' == this.pageProgression) {
- titles['.book_leftmost'] = 'Last page';
- titles['.book_rightmost'] = 'First page';
- } else { // LTR
- titles['.book_leftmost'] = 'First page';
- titles['.book_rightmost'] = 'Last page';
- }
-
- for (var icon in titles) {
- jToolbar.find(icon).attr('title', titles[icon]);
- }
-
+
// Hide mode buttons and autoplay if 2up is not available
// $$$ if we end up with more than two modes we should show the applicable buttons
if ( !this.canSwitchToMode(this.constMode2up) ) {
if ( ! (this.canSwitchToMode(this.constMode2up) || this.canSwitchToMode(this.constModeThumb)) ) {
jToolbar.find('.one_page_mode').hide();
}
+
+ // $$$ Don't hardcode ids
+ var self = this;
+ jToolbar.find('.share').colorbox({inline: true, opacity: "0.5", href: "#BRshare", onLoad: function() { self.ttsStop(); } });
+ jToolbar.find('.info').colorbox({inline: true, opacity: "0.5", href: "#BRinfo", onLoad: function() { self.ttsStop(); } });
+ $('<div style="display: none;"></div>').append(this.blankShareDiv()).append(this.blankInfoDiv()).appendTo($('body'));
+
+ $('#BRinfo .BRfloatTitle a').attr( {'href': this.bookUrl} ).text(this.bookTitle).addClass('title');
+
+ // These functions can be overridden
+ this.buildInfoDiv($('#BRinfo'));
+ this.buildShareDiv($('#BRshare'));
+
// Switch to requested mode -- binds other click handlers
//this.switchToolbarMode(mode);
}
+BookReader.prototype.blankInfoDiv = function() {
+ return $([
+ '<div class="BRfloat" id="BRinfo">',
+ '<div class="BRfloatHead">About this book',
+ '<a class="floatShut" href="javascript:;" onclick="$.fn.colorbox.close();"><span class="shift">Close</span></a>',
+ '</div>',
+ '<div class="BRfloatBody">',
+ '<div class="BRfloatCover">',
+ '</div>',
+ '<div class="BRfloatMeta">',
+ '<div class="BRfloatTitle">',
+ '<h2><a/></h2>',
+ '</div>',
+ '</div>',
+ '</div>',
+ '<div class="BRfloatFoot">',
+ '<a href="http://openlibrary.org/dev/docs/bookreader">About the BookReader</a>',
+ '</div>',
+ '</div>'].join('\n')
+ );
+}
+
+BookReader.prototype.blankShareDiv = function() {
+ return $([
+ '<div class="BRfloat" id="BRshare">',
+ '<div class="BRfloatHead">',
+ 'Share',
+ '<a class="floatShut" href="javascript:;" onclick="$.fn.colorbox.close();"><span class="shift">Close</span></a>',
+ '</div>',
+ '</div>'].join('\n')
+ );
+}
+
// switchToolbarMode
//______________________________________________________________________________
return false;
});
+ $('.BRnavCntl').click(
+ function(){
+ if ($('#BRnavCntlBtm').hasClass('BRdn')) {
+ $('#BRtoolbar').animate({top:-40});
+ $('#BRnav').animate({bottom:-55});
+ $('#BRnavCntlBtm').addClass('BRup').removeClass('BRdn');
+ $('#BRnavCntlTop').addClass('BRdn').removeClass('BRup');
+ $('#BRnavCntlBtm.BRnavCntl').animate({height:'45px'});
+ $('.BRnavCntl').delay(1000).animate({opacity:.25},1000);
+ } else {
+ $('#BRtoolbar').animate({top:0});
+ $('#BRnav').animate({bottom:0});
+ $('#BRnavCntlBtm').addClass('BRdn').removeClass('BRup');
+ $('#BRnavCntlTop').addClass('BRup').removeClass('BRdn');
+ $('#BRnavCntlBtm.BRnavCntl').animate({height:'30px'});
+ $('.BRvavCntl').animate({opacity:1})
+ };
+ }
+ );
+ $('#BRnavCntlBtm').mouseover(function(){
+ if ($(this).hasClass('BRup')) {
+ $('.BRnavCntl').animate({opacity:1},250);
+ };
+ });
+ $('#BRnavCntlBtm').mouseleave(function(){
+ if ($(this).hasClass('BRup')) {
+ $('.BRnavCntl').animate({opacity:.25},250);
+ };
+ });
+ $('#BRnavCntlTop').mouseover(function(){
+ if ($(this).hasClass('BRdn')) {
+ $('.BRnavCntl').animate({opacity:1},250);
+ };
+ });
+ $('#BRnavCntlTop').mouseleave(function(){
+ if ($(this).hasClass('BRdn')) {
+ $('.BRnavCntl').animate({opacity:.25},250);
+ };
+ });
+
+
this.initSwipeData();
$('#BookReader').die('mousemove.navigation').live('mousemove.navigation',
{ 'br': this },
// Currently only want touch handlers in 2up
$('#BookReader').bind('MozTouchDown', function(event) {
- //console.log('MozTouchDown ' + event.streamId + ' ' + event.clientX + ',' + event.clientY);
+ //console.log('MozTouchDown ' + event.originalEvent.streamId + ' ' + event.target + ' ' + event.clientX + ',' + event.clientY);
if (this.mode == this.constMode2up) {
event.preventDefault();
}
})
.bind('MozTouchMove', function(event) {
- //console.log('MozTouchMove - ' + event.streamId + ' ' + event.clientX + ',' + event.clientY)
+ //console.log('MozTouchMove - ' + event.originalEvent.streamId + ' ' + event.target + ' ' + event.clientX + ',' + event.clientY)
if (this.mode == this.constMode2up) {
event.preventDefault();
}
})
.bind('MozTouchUp', function(event) {
- //console.log('MozTouchUp - ' + event.streamId + ' ' + event.clientX + ',' + event.clientY);
+ //console.log('MozTouchUp - ' + event.originalEvent.streamId + ' ' + event.target + ' ' + event.clientX + ',' + event.clientY);
if (this.mode = this.constMode2up) {
event.preventDefault();
}
}
}
+// changeArrow
+//______________________________________________________________________________
+// Change the nav bar arrow
+function changeArrow(){
+ setTimeout(function(){
+ $('#BRnavCntlBtm').removeClass('BRdn').addClass('BRup');
+ },3000);
+};
+
+
// firstDisplayableIndex
//______________________________________________________________________________
// Returns the index of the first visible page, dependent on the mode.
if ('undefined' != typeof(params.page)) {
fragments.push('page', params.page);
} else {
- // Don't have page numbering -- use index instead
- fragments.push('page', 'n' + params.index);
+ if ('undefined' != typeof(params.index)) {
+ // Don't have page numbering but we do have the index
+ fragments.push('page', 'n' + params.index);
+ }
}
// $$$ highlight
BookReader.prototype.gotOpenLibraryRecord = function(self, olObject) {
// $$$ could refactor this so that 'this' is available
if (olObject) {
+ //console.log(olObject);
if (olObject['table_of_contents']) {
// XXX check here that TOC is valid
self.updateTOC(olObject['table_of_contents']);
}
- }
-
- // $$$mang cleanup
- $('#BRreturn a').attr('href', 'http://openlibrary.org' + olObject.key);
+ // $$$mang cleanup
+ self.bookUrl = 'http://openlibrary.org' + olObject.key;
+ self.bookTitle = olObject['title'];
+ $('#BRreturn a').attr('href', this.bookUrl);
+ $('#BookReader .logo').attr('title', 'Go to Open Library'); // i18n
+
+ $('#BRinfo').remove();
+ $('#BRshare').after(self.blankInfoDiv());
+ self.buildInfoDiv($('#BRinfo'));
+ }
}
// Library functions
return (outer.document || outer);
},
+ escapeHTML: function (str) {
+ return(
+ str.replace(/&/g,'&').
+ replace(/>/g,'>').
+ replace(/</g,'<').
+ replace(/"/g,'"')
+ );
+ },
+
decodeURIComponentPlus: function(value) {
// Decodes a URI component and converts '+' to ' '
return decodeURIComponent(value).replace(/\+/g, ' ');
// showProgressPopup
//______________________________________________________________________________
BookReader.prototype.showProgressPopup = function(msg) {
- if (soundManager.debugMode) console.log('showProgressPopup index='+this.ttsIndex+' pos='+this.ttsPosition);
+ //if (soundManager.debugMode) console.log('showProgressPopup index='+this.ttsIndex+' pos='+this.ttsPosition);
if (this.popup) return;
this.popup = document.createElement("div");
self.ttsNextChunk();
},500);
}
-//FADING, ETC.
- function changeArrow(){
- setTimeout(function(){
- $('#BRnavCntlBtm').removeClass('BRdn').addClass('BRup');
- },3000);
- };
- $().ready(function(){
- /*
- $('#BRtoolbar').delay(3000).animate({top:-40});
- $('#BRnav').delay(3000).animate({bottom:-53});
- changeArrow();
- $('.BRnavCntl').delay(3000).animate({height:'43px'}).delay(1000).animate({opacity:.25},1000);
- */
- $('.BRnavCntl').click(
- function(){
- if ($('#BRnavCntlBtm').hasClass('BRdn')) {
- $('#BRtoolbar').animate({top:-40});
- $('#BRnav').animate({bottom:-55});
- $('#BRnavCntlBtm').addClass('BRup').removeClass('BRdn');
- $('#BRnavCntlTop').addClass('BRdn').removeClass('BRup');
- $('#BRnavCntlBtm.BRnavCntl').animate({height:'45px'});
- $('.BRnavCntl').delay(1000).animate({opacity:.25},1000);
- } else {
- $('#BRtoolbar').animate({top:0});
- $('#BRnav').animate({bottom:0});
- $('#BRnavCntlBtm').addClass('BRdn').removeClass('BRup');
- $('#BRnavCntlTop').addClass('BRup').removeClass('BRdn');
- $('#BRnavCntlBtm.BRnavCntl').animate({height:'30px'});
- $('.BRvavCntl').animate({opacity:1})
- };
- }
- );
- $('#BRnavCntlBtm').mouseover(function(){
- if ($(this).hasClass('BRup')) {
- $('.BRnavCntl').animate({opacity:1},250);
- };
- });
- $('#BRnavCntlBtm').mouseleave(function(){
- if ($(this).hasClass('BRup')) {
- $('.BRnavCntl').animate({opacity:.25},250);
- };
- });
- $('#BRnavCntlTop').mouseover(function(){
- if ($(this).hasClass('BRdn')) {
- $('.BRnavCntl').animate({opacity:1},250);
- };
- });
- $('#BRnavCntlTop').mouseleave(function(){
- if ($(this).hasClass('BRdn')) {
- $('.BRnavCntl').animate({opacity:.25},250);
- };
- });
+
+BookReader.prototype.buildShareDiv = function(jShareDiv)
+{
+ var pageView = document.location + '';
+ var bookView = (pageView + '').replace(/#.*/,'');
+ var self = this;
+
+ var jForm = $([
+ '<p>Copy and paste one of these options to share this book elsewhere.</p>',
+ '<form method="post" action="">',
+ '<fieldset>',
+ '<label for="pageview">Link to this page view:</label>',
+ '<input type="text" name="pageview" id="pageview" value="' + pageView + '"/>',
+ '</fieldset>',
+ '<fieldset>',
+ '<label for="booklink">Link to the book:</label>',
+ '<input type="text" name="booklink" id="booklink" value="' + bookView + '"/>',
+ '</fieldset>',
+ '<fieldset>',
+ '<label for="iframe">Embed a mini Book Reader:</label>',
+ '<fieldset class="sub">',
+ '<label class="sub">',
+ '<input type="radio" name="pages" value="' + this.constMode1up + '" checked="checked"/>',
+ '1 page',
+ '</label>',
+ '<label class="sub">',
+ '<input type="radio" name="pages" value="' + this.constMode2up + '"/>',
+ '2 pages',
+ '</label>',
+ '<label class="sub">',
+ '<input type="checkbox" name="thispage" value="thispage"/>',
+ 'Open to this page?',
+ '</label>',
+ '</fieldset>',
+ '<textarea cols="30" rows="4" name="iframe" class="BRframeEmbed"></textarea>',
+ '<p class="meta"><strong>NOTE:</strong> We\'ve tested EMBED on blogspot.com blogs as well as self-hosted Wordpress blogs. This feature will NOT work on wordpress.com blogs.</p>',
+ '</fieldset>',
+ '<fieldset class="center">',
+ '<button type="button" onclick="$.fn.colorbox.close();">Finished</button>',
+ '</fieldset>',
+ '</form>'].join('\n'));
+
+ jForm.appendTo(jShareDiv);
+
+ jForm.find('input').bind('change', function() {
+ var form = $(this).parents('form:first');
+ var params = {};
+ params.mode = $(form.find('input[name=pages]:checked')).val();
+ if (form.find('input[name=thispage]').attr('checked')) {
+ params.page = self.getPageNum(self.currentIndex());
+ }
+
+ // console.log(params);
+ var embedLink = self.getEmbedURL( params );
+ form.find('.BRframeEmbed').val('<iframe src="' + embedLink + '" width="480" height="480"></iframe>');
+ })
+ jForm.find('input[name=thispage]').trigger('change');
+ jForm.find('input, textarea').bind('focus', function() {
+ this.select();
});
+
+ jForm.appendTo(jShareDiv);
+ jForm = ''; // closure
+
+}
+
+// Should be overridden
+BookReader.prototype.buildInfoDiv = function(jInfoDiv)
+{
+ jInfoDiv.find('.BRfloatTitle a').attr({'href': this.bookUrl, 'alt': this.bookTitle}).text(this.bookTitle);
+}
+
+// Can be overriden
+BookReader.prototype.initUIStrings = function()
+{
+ // Navigation handlers will be bound after all UI is in place -- makes moving icons between
+ // the toolbar and nav bar easier
+
+ // Setup tooltips -- later we could load these from a file for i18n
+ var titles = { '.logo': 'Go to Archive.org', // $$$ update after getting OL record
+ '.zoom_in': 'Zoom in',
+ '.zoom_out': 'Zoom out',
+ '.onepg': 'One-page view',
+ '.twopg': 'Two-page view',
+ '.thumb': 'Thumbnail view',
+ '.print': 'Print this page',
+ '.embed': 'Embed BookReader',
+ '.link': 'Link to this book (and page)',
+ '.bookmark': 'Bookmark this page',
+ '.read': 'Read this book aloud',
+ '.share': 'Share this book',
+ '.info': 'About this book',
+ '.full': 'Show fullscreen',
+ '.book_left': 'Flip left',
+ '.book_right': 'Flip right',
+ '.book_up': 'Page up',
+ '.book_down': 'Page down',
+ '.play': 'Play',
+ '.pause': 'Pause',
+ '.BRdn': 'Show/hide nav bar', // Would have to keep updating on state change to have just "Hide nav bar"
+ '.BRup': 'Show/hide nav bar',
+ '.book_top': 'First page',
+ '.book_bottom': 'Last page'
+ };
+ if ('rl' == this.pageProgression) {
+ titles['.book_leftmost'] = 'Last page';
+ titles['.book_rightmost'] = 'First page';
+ } else { // LTR
+ titles['.book_leftmost'] = 'First page';
+ titles['.book_rightmost'] = 'Last page';
+ }
+
+ for (var icon in titles) {
+ if (titles.hasOwnProperty(icon)) {
+ $('#BookReader').find(icon).attr('title', titles[icon]);
+ }
+ }
+}
projects / bookreader.git / blobdiff