Update bookreader to Internet Archive theme
authorMichael Ang <gtronix@gmail.com>
Thu, 26 Mar 2009 23:13:01 +0000 (23:13 +0000)
committerMichael Ang <gtronix@gmail.com>
Thu, 26 Mar 2009 23:13:01 +0000 (23:13 +0000)
GnuBook/GnuBook.css
GnuBook/GnuBook.js
GnuBookIA/index.php

index 0dc302e..719561b 100644 (file)
@@ -1,12 +1,13 @@
 #GnuBook {
  border:1px solid black;
  position:absolute;
+ font-family: arial, sans-serif;
 }
 
 #GBtoolbar {
     height:25px;
     width:100%;
-    background-color: rgb(241, 239, 237);    
+    background-color: rgb(241, 239, 237);
 }
 
 #GBcontainer {
     overflow-x:auto;
     overflow-y:scroll;    
     /*text-align: center;*/
-    background-color: #625E25;
+    background-color: #FFFFFF;
     position:absolute;
 }
 
 .GBpagediv1up {
     background-color: #ccc;
     overflow:hidden;
-    border-right:3px solid #333;
-    border-bottom:3px solid #333;    
+    border-right: 2px solid #444444;
+    border-bottom: 2px solid #444444; 
 }
 
 .GBpagediv2up {
@@ -37,7 +38,8 @@
 #GnuBookSearch {
     border:1px solid black;
     position:absolute;
-    background-color: #625E25;    
+    background-color: #CCCCCC;
+    font-family: arial, sans-serif;
 }
 
 #GnuBookSearchResults {
@@ -48,6 +50,7 @@
     position: absolute;
     left: 0px;
     right: 0px;    
+    font-family: arial, san-serif;
     font-size: 0.85em; 
     padding: 2px;
 }
     /*width: 100%;*/    /* this causes horizontal scroll bar in FF */
     right: 0px;
     clear: both; 
-    color: #FFF
+    color: #000000
     padding: 0px 0px 0px 10px; 
-    background: #625E25
+    background: #CCCCCC
     height: 2em; 
     line-height: 25px; 
     vertical-align: middle; 
-    font-size: 12px; 
+    font-family: arial, sans-serif;
+    font-size: 12px;
 }
 
 .GBlogotype {
@@ -100,6 +104,10 @@ a.GBwhite                  { color: #fff }
 a.GBwhite:hover                { text-decoration: none; }
 a.GBwhite:visited              { color: #fff }
 
+a.GBblack           { color: #000000 }
+a.GBblack:hover     { text-decoration: none; }
+a.GBblack:visited   { color: #000000 }
+
 .GBnavlinks {
     float:right; 
     padding: 0px 20px 0px 0px; 
@@ -129,15 +137,16 @@ a.GBwhite:visited         { color: #fff }
     float: left; 
 }
 
-.GBicon.zoom_out { background: url(images/zoom_out.png) no-repeat; }
-.GBicon.zoom_in { background: url(images/zoom_in.png) no-repeat; }
-.GBicon.script { background: url(images/script.png) no-repeat; }
-.GBicon.book_open { background: url(images/book_open.png) no-repeat; }
-.GBicon.page_code { background: url(images/page_code.png) no-repeat; }
-.GBicon.book_left { background: url(images/book_left.png) no-repeat; }
-.GBicon.book_right { background: url(images/book_right.png) no-repeat; }
-.GBicon.book_up { background: url(images/page_white_get.png) no-repeat; }
-.GBicon.book_down { background: url(images/page_white_put.png) no-repeat; }
-
-.GBicon.play { background: url(images/control_play_blue.png) no-repeat; }
-.GBicon.pause { background: url(images/control_pause_blue.png) no-repeat; }
+.GBicon.logo { background: url(images/logo_base.png) no-repeat; }
+.GBicon.zoom_out { background: url(images/zoom_out_base.png) no-repeat; }
+.GBicon.zoom_in { background: url(images/zoom_in_base.png) no-repeat; }
+.GBicon.script { background: url(images/one_page_mode_base.png) no-repeat; }
+.GBicon.book_open { background: url(images/two_page_mode_base.png) no-repeat; }
+.GBicon.page_code { background: url(images/embed_base.png) no-repeat; }
+.GBicon.book_left { background: url(images/book_left_base.png) no-repeat; }
+.GBicon.book_right { background: url(images/book_right_base.png) no-repeat; }
+.GBicon.book_up { background: url(images/book_up_base.png) no-repeat; }
+.GBicon.book_down { background: url(images/book_down_base.png) no-repeat; }
+
+.GBicon.play { background: url(images/control_play_base.png) no-repeat; }
+.GBicon.pause { background: url(images/control_pause_base.png) no-repeat; }
index 9587910..2f1a94c 100644 (file)
@@ -76,7 +76,8 @@ GnuBook.prototype.init = function() {
     document.title = title;
     
     $("#GnuBook").empty();
-    $("#GnuBook").append("<div id='GBtoolbar'><span style='float:left;'><button class='GBicon zoom_out' onclick='gb.zoom1up(-1); return false;'/> <button class='GBicon zoom_in' onclick='gb.zoom1up(1); return false;'/> zoom: <span id='GBzoom'>25</span>% <button class='GBicon script' onclick='gb.switchMode(1); return false;'/> <button class='GBicon book_open' onclick='gb.switchMode(2); return false;'/>  &nbsp;&nbsp; <a href='"+this.bookUrl+"' target='_blank'>"+title+"</a></span></div>");
+    // XXXmang hook up logo to url action
+    $("#GnuBook").append("<div id='GBtoolbar'><span style='float:left;'><button class='GBicon logo' /> <button class='GBicon rollover zoom_out' onclick='gb.zoom1up(-1); return false;'/><button class='GBicon rollover zoom_in' onclick='gb.zoom1up(1); return false;'/> Zoom: <span id='GBzoom'>25</span>% <button class='GBicon rollover script' onclick='gb.switchMode(1); return false;'/> <button class='GBicon rollover book_open' onclick='gb.switchMode(2); return false;'/>  &nbsp;&nbsp; <a class='GBblack' href='"+this.bookUrl+"' target='_blank'>"+title+"</a></span></div>");
     this.initToolbar(this.mode); // Build inside of toolbar div
     $("#GnuBook").append("<div id='GBcontainer'></div>");
     $("#GBcontainer").append("<div id='GBpageview'></div>");
@@ -86,6 +87,7 @@ GnuBook.prototype.init = function() {
     });
 
     this.setupKeyListeners();
+    this.setupRollovers();
 
     $(window).bind('resize', this, function(e) {
         //console.log('resize!');
@@ -639,7 +641,7 @@ GnuBook.prototype.prepareTwoPageView = function() {
         height: bookCoverDivHeight+'px',
         visibility: 'visible',
         position: 'absolute',
-        backgroundColor: 'rgb(136, 51, 34)',
+        backgroundColor: '#663929',
         left: bookCoverDivLeft + 'px',
         top: bookCoverDivTop+'px',
         MozBorderRadiusTopleft: '7px',
@@ -1756,7 +1758,7 @@ GnuBook.prototype.initToolbar = function(mode) {
     var jToolbar = $('#GBtoolbar'); // j prefix indicates jQuery object
     
     // We build in mode 2
-    jToolbar.append("<span id='GBtoolbarbuttons' style='float: right'><button class='GBicon page_code' /><form class='GBpageform' action='javascript:' onsubmit='gb.jumpToPage(this.elements[0].value)'> page:<input id='GBpagenum' type='text' size='3' onfocus='gb.autoStop();'></input></form> <button class='GBicon book_left'/> <button class='GBicon book_right' /> <button class='GBicon play' id='autoImg' /></span>");
+    jToolbar.append("<span id='GBtoolbarbuttons' style='float: right'><button class='GBicon rollover page_code' /><form class='GBpageform' action='javascript:' onsubmit='gb.jumpToPage(this.elements[0].value)'> Page:<input id='GBpagenum' type='text' size='3' onfocus='gb.autoStop();'></input></form> <button class='GBicon rollover book_left'/><button class='GBicon rollover book_right' /> <button class='GBicon rollover play' id='autoImg' /></span>");
 
     // Bind the non-changing click handlers
     jToolbar.find('.page_code').bind('click', function(e) {
@@ -1865,3 +1867,20 @@ GnuBook.prototype.lastDisplayableIndex = function() {
         return this.numLeafs - 1;
     }
 }
+
+// setupRollovers
+//______________________________________________________________________________
+// Set up rollover behaviour for icons
+GnuBook.prototype.setupRollovers = function() {
+
+    // TODO precache
+    
+    // XXXmang this doesn't quite work because when we change classes the explicitly set
+    //         url stays with the element
+    // On hover we change the base to rollover.  We switch back on off-hover.
+    $('#GnuBook .rollover').hover( function() {
+        $(this).css('backgroundImage', $(this).css('backgroundImage').replace('_base', '_rollover'));
+    }, function () {
+        $(this).css('backgroundImage', $(this).css('backgroundImage').replace('_rollover', '_base'));
+    });
+}
\ No newline at end of file
index 9eff46a..12b202e 100644 (file)
@@ -23,7 +23,7 @@ $id = $_REQUEST['id'];
 // manually update with output of 'date "+%Y%m%d%H%M"' at each checkin so that browsers
 // do not use old cached version
 // see https://bugs.launchpad.net/gnubook/+bug/330748
-$version = "200903042157";
+$version = "200903192301";
 
 if ("" == $id) {
     echo "No identifier specified!";
@@ -43,7 +43,7 @@ if ("" == $id) {
         <script type="text/javascript" src="/GnuBook/GnuBook.js?v=<? echo($version); ?>"></script>
     <script type="text/javascript" src="/GnuBook/jquery.easing.1.3.js"></script>
 </head>
-<body style="background-color: rgb(249, 248, 208);">
+<body style="background-color: #FFFFFF;">
 
 <div id="GnuBook" style="left:10px; right:200px; top:10px; bottom:2em;">x</div>
 
@@ -55,9 +55,11 @@ if ("" == $id) {
 <script type="text/javascript" src="/GnuBook/GnuBookJSLocate.php?id=<?echo $id;?>"></script>
 
 <div id="GnuBookSearch" style="width:190px; right:0px; top:10px; bottom:2em;">
-<form action='javascript:' onsubmit="gb.search($('#GnuBookSearchBox').val());">
-<input id="GnuBookSearchBox" type="text" size="20" value="search..." onfocus="if('search...'==this.value)this.value='';"/><input type="submit" value="go"/>
-</form>
+    <form action='javascript:' onsubmit="gb.search($('#GnuBookSearchBox').val());">
+        <p style="display: inline">
+            <input id="GnuBookSearchBox" type="text" size="20" value="search..." onfocus="if('search...'==this.value)this.value='';" /><input type="submit" value="go" />
+        </p>
+    </form>
     <div id="GnuBookSearchResults">
         Search results
     </div>
@@ -66,18 +68,13 @@ if ("" == $id) {
 
 <div id="GBfooter">
     <div class="GBlogotype">
-        <a href="http://openlibrary.org/" class="GBwhite">Open Library</a>
-        <a href="http://openlibrary.org/beta" class="GBwhite" style="font-size: 0.8em; text-decoration: underline;">beta</a>
+        <a href="http://archive.org/" class="GBblack">Internet Archive</a>
     </div>
     <div class="GBnavlinks">
-        <a class="GBwhite" href="http://openlibrary.org/dev/docs/bookreader">About the Bookreader</a> |
-        <a class="GBwhite" href="https://bugs.launchpad.net/gnubook/+filebug-advanced">Report Errors</a> |
-        <a class="GBwhite" href="http://openlibrary.org/about">About Us</a> |
-        <a class="GBwhite" href="http://openlibrary.org/index/index.html">Index</a> |
-        <a class="GBwhite" href="http://www.archive.org/">IA</a> |
-        <a class="GBwhite" href="http://www.opencontentalliance.org/">OCA</a> |
-        <a class="GBwhite" href="http://wikimediafoundation.org/">WMF</a> |
-        <a class="GBwhite" href="http://openlibrary.org/about/contact">Contact Us</a>
+        <a class="GBblack" href="http://openlibrary.org/dev/docs/bookreader">About the Bookreader</a> |
+        <a class="GBblack" href="https://bugs.launchpad.net/gnubook/+filebug-advanced">Report Errors</a> |
+        <a class="GBblack" href="http://www.archive.org/details/texts">Texts Collection</a> |
+        <a class="GBblack" href="http://www.archive.org/about/contact.php">Contact Us</a>
     </div>
 </div>