// You must also add a numLeafs property before calling init().
function BookReader() {
+
+ // Mode constants
+ this.constMode1up = 1;
+ this.constMode2up = 2;
+ this.constModeThumb = 3;
+
this.reduce = 4;
this.padding = 10; // Padding in 1up
- this.mode = 1; //1, 2, 3
- this.ui = 'full'; // UI mode
+
+ this.mode = this.constMode1up;
+ this.ui = 'full'; // UI mode
+ this.uiAutoHide = false; // Controls whether nav/toolbar will autohide
// thumbnail mode
this.thumbWidth = 100; // will be overridden during prepareThumbnailView
// path in the CSS. Would be better to automagically find that path.
this.imagesBaseURL = '/bookreader/images/';
- // Mode constants
- this.constMode1up = 1;
- this.constMode2up = 2;
- this.constModeThumb = 3;
// Zoom levels
// $$$ provide finer grained zooming
autofit: 'auto'
};
+ // This object/dictionary controls which optional features are enabled
+ // XXXmang in progress
+ this.features = {
+ // search
+ // read aloud
+ // open library entry
+ // table of contents
+ // embed/share ui
+ // info ui
+ };
+
return this;
};
// Autohide nav after showing for awhile
var self = this;
- $(window).bind('load', function() {
- setTimeout(function() { self.hideNavigation(); }, 3000);
- });
+ if (this.uiAutoHide) {
+ $(window).bind('load', function() {
+ setTimeout(function() { self.hideNavigation(); }, 3000);
+ });
+ };
$("#BRcontainer").bind('scroll', this, function(e) {
e.data.loadLeafs();
// Enact other parts of initial params
this.updateFromParams(params);
+ // Start AJAX request for OL data
+ this.getOpenLibraryJSON(this.gotOpenLibraryRecord);
+
+}
+
+// XXXmang
+BookReader.prototype.gotOpenLibraryRecord = function(olObject) {
+ // console.log(olObject);
+ if (olObject) {
+ if (olObject['table_of_contents']) {
+ console.log('xxx updating table of contents');
+ br.updateTOC(olObject['table_of_contents']); // XXX
+ }
+ }
+}
+
+BookReader.prototype.updateTOC = function(tocEntries) {
+ this.removeChapters();
+ for (var i = 0; i < tocEntries.length; i++) {
+ this.addChapterFromEntry(tocEntries[i]);
+ }
+}
+
+/*
+ * Example table of contents entry - this format is defined by Open Library
+ * {
+ * "pagenum": "17",
+ * "level": 1,
+ * "label": "CHAPTER I",
+ * "type": {"key": "/type/toc_item"},
+ * "title": "THE COUNTRY AND THE MISSION"
+ * }
+ */
+BookReader.prototype.addChapterFromEntry = function(tocEntryObject) {
+ console.log(tocEntryObject);
+ var pageIndex = this.getPageIndex(tocEntryObject['pagenum']);
+ // Only add if we know where it is
+ if (pageIndex) {
+ this.addChapter(tocEntryObject['title'], tocEntryObject['pagenum'], pageIndex);
+ }
}
BookReader.prototype.setupKeyListeners = function() {
// 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',
+
+ // $$$ should make this work inside the BookReader div (self-contained), rather than after
+ $('#BookReader').after(
+ '<div id="BRnav"><div id="BRnavpos"><div id="pager"></div><div id="BRnavline"></div></div></div>'
+ );
+
+/*
+<!-- LOAD SEARCH RESULTS FIRST SO CHAPTER INDICATORS CAN APPEAR IN FRONT -->
+ <div class="search" style="left:80%;" title="Search result">
+ <div class="query">The Kingdom of the Future, for instance, though interesting in a Caley Robinson way, with its cold, mystical colour relieved by touches of warm reddish browns, and its big draped figures, was a composition in the past, and did not stimulate the <strong><a href="">emotional</a></strong> powers of the observer with a suggestion of coming ages or a prophecy of progress. <span>Page 26</span></div>
+ </div>
+
+ <div class="search" style="left:22%;" title="Search result">
+ <div class="query">A related distinction is between the emotion and the results of the emotion, principally behaviors and <strong><a href="">emotional</a></strong> expressions. People often behave in certain ways as a direct result of their <strong><a href="">emotional</a></strong> state, such as crying, fighting or fleeing. <span>Page 27</span></div>
+ </div>
+
+ <div class="search" style="left:75%;" title="Search result">
+ <div class="query">A related distinction is between the emotion and the results of the emotion, principally behaviors and <strong><a href="">emotional</a></strong> expressions. People often behave in certain ways as a direct result of their <strong><a href="">emotional</a></strong> state, such as crying, fighting or fleeing. <span>Page 27</span></div>
+ </div>
+
+ <div class="chapter" style="left:1%;">
+ <div class="title">I. The Minotaur <span>|</span> Page 1</div>
+ </div>
+
+ <div class="chapter" style="left:17%;">
+ <div class="title">II. The Griffon <span>|</span> Page 44</div>
+ </div>
+
+ <div class="chapter" style="left:30%;">
+ <div class="title">III. The Firedrake <span>|</span> Page 129</div>
+ </div>
+
+ <div class="chapter" style="left:67.5%;">
+ <div class="title">V. The Pegasus <span>|</span> Page 201</div>
+ </div>
+
+ <div class="chapter" style="left:90%;">
+ <div class="title">VI. The Goblin <span>|</span> Page 255</div>
+ </div>
+
+ <div class="searchChap" style="left:49%;" title="Search result">
+ <div class="query">
+ A related distinction is between the emotion and the results of the emotion, principally behaviors and <strong><a href="">emotional</a></strong> expressions. People often behave in certain ways as a direct result of their <strong><a href="">emotional</a></strong> state, such as crying, fighting or fleeing. <span>Page 163</span>
+ <div class="queryChap">IV. The Witch <span>|</span> Page 163</div>
+ </div>
+ </div>
+
+ </div>
+</div>
+*/
+
+ /* $$$mang search results and chapters should automatically coalesce
+ $('.searchChap').bt({
+ contentSelector: '$(this).find(".query")',
+ trigger: 'click',
closeWhenOthersOpen: true,
cssStyles: {
- backgroundColor: '#000',
- border: '2px solid #e2dcc5',
+ width: '250px',
+ padding: '10px 10px 15px',
+ backgroundColor: '#fff',
+ border: '3px solid #e2dcc5',
borderBottom: 'none',
- padding: '5px 10px',
- fontFamily: '"Arial", sans-serif',
- fontSize: '11px',
- fontWeight: '700',
- color: '#fff',
- whiteSpace: 'nowrap'
+ fontFamily: '"Lucida Grande","Arial",sans-serif',
+ fontSize: '12px',
+ lineHeight: '18px',
+ color: '#615132'
},
- shrinkToFit: true,
- width: '200px',
+ shrinkToFit: false,
+ width: '230px',
padding: 0,
spikeGirth: 0,
spikeLength: 0,
- overlap: '16px',
+ overlap: '10px',
overlay: false,
killTitle: true,
textzIndex: 9999,
wrapperzIndex: 9997,
offsetParent: null,
positions: ['top'],
- fill: 'black',
+ fill: 'white',
windowMargin: 10,
- strokeWidth: 0,
+ strokeWidth: 3,
+ strokeStyle: '#e2dcc5',
cornerRadius: 0,
centerPointX: 0,
centerPointY: 0,
shadow: false
});
- $('.search').bt({
+ $('.searchChap').each(function(){
+ $(this).hover(function(){
+ $(this).addClass('front');
+ },function(){
+ $(this).removeClass('front');
+ });
+ });
+ */
+
+ // XXXmang testing
+ this.addSearchResult('hi there', '25', 22);
+ $("#pager").draggable({axis:'x',containment:'parent'});
+}
+
+BookReader.prototype.addSearchResult = function(queryString, pageNumber, pageIndex) {
+ var uiStringSearch = "Search result"; // i18n
+ var uiStringPage = "Page"; // i18n
+
+ var percentThrough = BookReader.util.cssPercentage(pageIndex, this.numLeafs);
+
+ // $$$mang add click-through to page
+ $('<div class="search" style="left:' + percentThrough + ';" title="' + uiStringSearch + '"><div class="query">'
+ + queryString + '<span>' + uiStringPage + ' ' + pageNumber + '</span></div>')
+ .appendTo('#BRnavpos').bt({
contentSelector: '$(this).find(".query")',
trigger: 'click',
closeWhenOthersOpen: true,
centerPointX: 0,
centerPointY: 0,
shadow: false
- });
- $('.searchChap').bt({
- contentSelector: '$(this).find(".query")',
- trigger: 'click',
+ })
+ .hover(function(){
+ $(this).addClass('front');
+ },function(){
+ $(this).removeClass('front');
+ }
+ );
+}
+
+BookReader.prototype.removeSearchResults = function() {
+ $('#BRnavpos .search').remove();
+}
+
+BookReader.prototype.addChapter = function(chapterTitle, pageNumber, pageIndex) {
+ var uiStringPage = 'Page'; // i18n
+
+ var percentThrough = BookReader.util.cssPercentage(pageIndex, this.numLeafs);
+
+ $('<div class="chapter" style="left:' + percentThrough + ';"><div class="title">'
+ + chapterTitle + '<span>|</span> ' + uiStringPage + ' ' + pageNumber + '</div></div>')
+ .appendTo('#BRnavpos')
+ .data({'self': this, 'pageIndex': pageIndex })
+ .bt({
+ contentSelector: '$(this).find(".title")',
+ trigger: 'hover',
closeWhenOthersOpen: true,
cssStyles: {
- width: '250px',
- padding: '10px 10px 15px',
- backgroundColor: '#fff',
- border: '3px solid #e2dcc5',
+ backgroundColor: '#000',
+ border: '2px solid #e2dcc5',
borderBottom: 'none',
- fontFamily: '"Lucida Grande","Arial",sans-serif',
- fontSize: '12px',
- lineHeight: '18px',
- color: '#615132'
+ padding: '5px 10px',
+ fontFamily: '"Arial", sans-serif',
+ fontSize: '11px',
+ fontWeight: '700',
+ color: '#fff',
+ whiteSpace: 'nowrap'
},
- shrinkToFit: false,
- width: '230px',
+ shrinkToFit: true,
+ width: '200px',
padding: 0,
spikeGirth: 0,
spikeLength: 0,
- overlap: '10px',
+ overlap: '16px',
overlay: false,
killTitle: true,
textzIndex: 9999,
wrapperzIndex: 9997,
offsetParent: null,
positions: ['top'],
- fill: 'white',
+ fill: 'black',
windowMargin: 10,
- strokeWidth: 3,
- strokeStyle: '#e2dcc5',
+ strokeWidth: 0,
cornerRadius: 0,
centerPointX: 0,
centerPointY: 0,
shadow: false
+ })
+ .hover( function() {
+ $(this).addClass('front');
+ }, function() {
+ $(this).removeClass('front');
+ }
+ )
+ .bind('click', function() {
+ $(this).data('self').jumpToIndex($(this).data('pageIndex'));
});
- $('.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');
- });
- });
- $("#pager").draggable({axis:'x',containment:'parent'});
+}
+
+BookReader.prototype.removeChapters = function() {
+ $('#BRnavpos .chapter').remove();
}
BookReader.prototype.initToolbar = function(mode, ui) {
+ // $$$mang should be contained within the BookReader div instead of body
$("body").append("<div id='BRtoolbar'>"
+ "<span id='BRtoolbarbuttons' style='float:right;'>"
+ "<button class='BRicon bookmark modal'></button>"
// 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();
+
+ if (event.data['br'].uiAutoHide) {
+ 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();
+ }
}
}
return this.getPageURI(index, reduce, rotate);
}
+
+/////// Functions that can/should be overriden by third-parties
+
+// If your book has a record on Open Library you get some nice things for free
+BookReader.prototype.getOpenLibraryJSON = function(callback) {
+ return null;
+}
+
+
// Library functions
BookReader.util = {
disableSelect: function(jObject) {
return Math.min(Math.max(value, min), max);
},
+ // Given value and maximum, calculate a percentage suitable for CSS
+ cssPercentage: function(value, max) {
+ return parseInt(((value + 0.0) / max) * 100) + '%';
+ },
+
notInArray: function(value, array) {
// inArray returns -1 or undefined if value not in array
return ! (jQuery.inArray(value, array) >= 0);
projects / bookreader.git / blobdiff