From: Michael Ang <mang@archive.org>
Date: Wed, 6 Oct 2010 00:59:03 +0000 (+0000)
Subject: Merge commit 'lance/newui' into mergelanceui
X-Git-Url: http://git.rot13.org/?a=commitdiff_plain;h=ad312b687b2e805137f78513cc54323b9a12632a;hp=--cc;p=bookreader.git

Merge commit 'lance/newui' into mergelanceui

Conflicts:
	BookReader/BookReader.js
---

ad312b687b2e805137f78513cc54323b9a12632a
diff --cc BookReader/BookReader.js
index 404bf2d,a735c55..4f9adbc
--- a/BookReader/BookReader.js
+++ b/BookReader/BookReader.js
@@@ -3198,39 -3177,23 +3198,59 @@@ BookReader.prototype.jumpIndexForRightE
  //     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,
@@@ -3251,28 -3213,7 +3271,26 @@@
          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,
@@@ -3364,80 -3285,65 +3382,113 @@@ BookReader.prototype.addChapter = funct
          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