this.mode = this.constMode1up;
this.ui = 'full'; // UI mode
- this.uiAutoHide = false; // Controls whether nav/toolbar will autohide
+ this.uiAutoHide = true; // Controls whether nav/toolbar will autohide
// thumbnail mode
this.thumbWidth = 100; // will be overridden during prepareThumbnailView
// $$$ 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>'
);
/*
-<!-- 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
});
});
*/
-
- // XXXmang testing
- this.addSearchResult('hi there', '25', 22);
- $("#pager").draggable({axis:'x',containment:'parent'});
}
BookReader.prototype.addSearchResult = function(queryString, pageNumber, pageIndex) {
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>"
- + "<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>"
+ $("body").append(
+ "<div id='BRtoolbar'>"
+ + "<span id='BRtoolbarbuttons'>"
/* 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>"
- + "</span>"
+ + "<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>"
+ + "</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>"
+ + "<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
// $$$ don't hardcode height
$('#BRtoolbar').animate({top:-60});
$('#BRnav').animate({bottom:-60});
+ $('#BRzoomer').animate({right:-26});
}
}
if (!this.navigationIsVisible()) {
$('#BRtoolbar').animate({top:0});
$('#BRnav').animate({bottom:0});
+ $('#BRzoomer').animate({right:0});
}
}
projects / bookreader.git / blobdiff