// 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>'
++ '<div id="BRnav">'
++ + '<div id="BRpage">'
++ + '<button class="BRicon book_left"></button>'
++ + '<button class="BRicon book_right"></button>'
++ + '</div>'
++ + '<div id="BRnavpos">'
++ + '<div id="BRfiller"></div>'
++ + '<div id="BRpager">'
++ + '<div id="BRslider">'
++ + '<div id="slider"></div>'
++ + '<div id="pager"></div>'
++ // XXXmang update code to update pagenum
++ + '<div id="pagenum"><span>n141</span> / 325</div>'
++ + '</div>'
++ + '</div>'
++ + '<div id="BRnavline">'
++ + '<div class="BRnavend" id="BRnavleft"></div>'
++ + '<div class="BRnavend" id="BRnavright"></div>'
++ + '</div>'
++ + '</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>
+*/
+
+ /* $$$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,
centerPointY: 0,
shadow: false
});
- $('.search').bt({
+ $('.searchChap').each(function(){
+ $(this).hover(function(){
+ $(this).addClass('front');
+ },function(){
+ $(this).removeClass('front');
+ });
+ });
+ */
-
- $("#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
+ })
+ .hover( function() {
+ $(this).addClass('front');
+ }, function() {
+ $(this).removeClass('front');
+ }
+ )
+ .bind('click', function() {
+ $(this).data('self').jumpToIndex($(this).data('pageIndex'));
});
+}
+
+/*
+ * Remove all chapters.
+ */
+BookReader.prototype.removeChapters = function() {
+ $('#BRnavpos .chapter').remove();
+}
+
+/*
+ * Update the table of contents based on array of TOC entries.
+ */
+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);
+ }
+ $('.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'});
+ $("#BRzoombtn").draggable({axis:'y',containment:'parent'});
+ $("#BRslider").hover(
+ function(){
+ $("#pagenum").show();
+ },function(){
+ $("#pagenum").hide();
+ });
}
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>"
- + "<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>"
++ // XXXmang icons incorrect or handlers wrong
+ + "<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>"
++ // XXXmang update
+ + "<div id='BRreturn'><span>Back to</span><a href='BOOK URL'>Book Title</a></div>"
+ "</span>"
+ + "</div>"
+ + "<div id='BRzoomer'>"
+ + "<div id='BRzoompos'>"
+ + "<button class='BRicon zoom_out'></button>"
+ + "<div id='BRzoomcontrol'>"
+ + "<div id='BRzoomstrip'></div>"
+ + "<div id='BRzoombtn'></div>"
+ + "</div>"
+ + "<button class='BRicon zoom_in'></button>"
+ + "</div>"
+ "</div>");
this.updateToolbarZoom(this.reduce); // Pretty format
projects / bookreader.git / commitdiff