Tweak Google Book Preview Display, Take 2

After some additional feedback, this commit makes three changes
to the Google Book preview link:

1) As a solution offered by Dan Scott, rather than move the
button, we simply scroll to the preview when the button is clicked.
This effectively makes it impossible to miss. (In the current
code it sometimes loads off the screen.)

2) Make the viewer display in the same style as other added
content.

3) Allow the added content header to function as an additional
toggle to turn the viewer on and off.

Signed-off-by: Dan Wells <dbw2@calvin.edu>
Signed-off-by: Ben Shum <bshum@biblio.org>

diff --git a/Open-ILS/src/templates/opac/parts/ac_google_books.tt2 b/Open-ILS/src/templates/opac/parts/ac_google_books.tt2
index 8243fe0..3dbb5f9 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/ac_google_books.tt2
+++ b/Open-ILS/src/templates/opac/parts/ac_google_books.tt2
@@ -1,5 +1,6 @@
 <script type="text/javascript">
 var GBisbns = Array();
+var GBPreviewShowing = false;
 
 /**
  *
@@ -34,9 +35,11 @@ function GBPreviewCallback(GBPBookInfo) {
     GBPBadge.style.border = 0;
     GBPBadge.style.margin = '0.5em 0 0 0';
     GBPBadgelink = document.createElement('a');
-    GBPBadgelink.href = 'javascript:GBDisplayPreview();';
+    GBPBadgelink.id = 'gbpbadge_link';
+    GBPBadgelink.href = 'javascript:GBDisplayPreview(true);';
     GBPBadgelink.appendChild( GBPBadge );
     dojo.byId('rdetail_title_div').appendChild( GBPBadgelink );
+    unHideMe(dojo.byId('gbp_extra'));
   }
 }
 
@@ -44,7 +47,7 @@ function GBPreviewCallback(GBPBookInfo) {
  *  This is called when the user clicks on the 'Preview' link.  We assume
  *  a preview is available from Google if this link was made visible.
  */
-function GBDisplayPreview() {
+function GBDisplayPreview(scroll_to_div) {
   var GBPreviewPane = document.createElement('div');
   GBPreviewPane.id = 'rdetail_preview_div';
   GBPreviewPane.style.height = '800px';
@@ -52,19 +55,46 @@ function GBDisplayPreview() {
   GBPreviewPane.style.display = 'block';
   var GBClear = document.createElement('div');
   GBClear.style.padding = '1em';
-  dojo.byId('canvas_main').insertBefore(GBPreviewPane, dojo.byId('rdetail_record_details'));
-  dojo.byId('canvas_main').insertBefore(GBClear, dojo.byId('rdetail_record_details'));
+  dojo.byId('gbp_extra_container').appendChild(GBPreviewPane);
+  dojo.byId('gbp_extra_container').appendChild(GBClear);
   if (GBPreviewPane.getAttribute('loaded') == null || GBPreviewPane.getAttribute('loaded') == "false" ) {
      google.load("books", "0", {"callback" : GBPViewerLoadCallback, "language": "[% ctx.locale.substr(0,2) %]"} );
      GBPreviewPane.setAttribute('loaded', 'true');
   }
+  if (scroll_to_div) document.location.hash = '#gbp_extra';
 }
 
 function GBPViewerLoadCallback() {
   var GBPViewer = new google.books.DefaultViewer(dojo.byId('rdetail_preview_div'));
   GBPViewer.load('ISBN:' + GBisbns[0]);
   GBPViewer.resize();
-  dojo.byId('gbpbadge').style.display = 'none';
+  var GBPBadgelink = dojo.byId('gbpbadge_link');
+  GBPBadgelink.href = 'javascript:GBShowHidePreview(true);';
+  dojo.forEach(
+    dojo.byId('gbp_extra_links').getElementsByTagName('a'),
+    function(link) {
+      link.href = 'javascript:GBShowHidePreview();';
+    }
+  );
+  hideMe(dojo.byId('gbp_arrow_link'));
+  unHideMe(dojo.byId('gbp_arrow_down_link'));
+  GBPreviewShowing = true;
+}
+
+function GBShowHidePreview(from_button) {
+  if (!GBPreviewShowing) {
+    dojo.byId('gbp_extra_container').style.display = 'inherit';
+    hideMe(dojo.byId('gbp_arrow_link'));
+    unHideMe(dojo.byId('gbp_arrow_down_link'));
+    GBPreviewShowing = true;
+  } else if (!from_button) { // button can open, but shouldn't close
+    dojo.byId('gbp_extra_container').style.display = 'none';
+    unHideMe(dojo.byId('gbp_arrow_link'));
+    hideMe(dojo.byId('gbp_arrow_down_link'));
+    GBPreviewShowing = false;
+  }
+  // button should always scroll
+  if (from_button) document.location.hash = '#gbp_extra';
 }
 
 dojo.addOnLoad(function() {

diff --git a/Open-ILS/src/templates/opac/parts/record/extras.tt2 b/Open-ILS/src/templates/opac/parts/record/extras.tt2
index 54f36d9..a6100f1 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/record/extras.tt2
+++ b/Open-ILS/src/templates/opac/parts/record/extras.tt2
@@ -1,5 +1,24 @@
+[%
+    arrow_img = ctx.media_prefix _ '/images/rdetail_arrow.png';
+    arrow_down_img = ctx.media_prefix _ '/images/rdetail_arrow_down.png';
+%]
 <div>
     <div id='rdetail_extras_div' style='width: 100%;'> 
+        [%
+            IF ctx.google_books_preview;
+                label = l('Google Preview');
+                name = 'google_preview';
+                href = 'javascript:GBDisplayPreview();';
+        %]
+        <div id="gbp_extra" class="rdetail_extras hide_me">
+            <div class="rdetail_extras_hr"></div>
+            <div id="gbp_extra_links" class="rdetail_extras_link">
+                <a id='gbp_arrow_link' name='[% name %]' href='[% href %]'><img alt='[% label %]' src='[% arrow_img %]'/></a>
+                <a id='gbp_arrow_down_link' name='[% name %]' href='[% href %]' class='hide_me'><img alt='[% label %]' src='[% arrow_down_img %]'/></a>
+                <a name='[% name %]_lbl' href='[% href %]' class="rdetail_extras_lbl">[% label %]</a></div>
+        </div>
+        <div id="gbp_extra_container" class='rdetail_extras_div'></div>
+        [%  END %]
 
         [%  # Hidden extras are not yet implemented.  Some may require JS
 
@@ -56,14 +75,14 @@
                 [%  
                     IF tab_is_active(name);
                         href = mkurl('', {}, ['expand', 'ac']);
-                        img_url = ctx.media_prefix _ '/images/rdetail_arrow_down.png';
+                        img_url = arrow_down_img;
                     ELSE;
                         IF name == 'addedcontent' AND default_ac;
                             href = mkurl('', {expand => name, ac => default_ac}) _ '#' _ name; 
                         ELSE;
                             href = mkurl('', {expand => name}) _ '#' _ name; 
                         END;
-                        img_url = ctx.media_prefix _ '/images/rdetail_arrow.png';
+                        img_url = arrow_img;
                     END;
                 %]
                 <a name='[% name %]' href='[% href %]'><img alt='[% extra.label %]' src='[% img_url %]'/></a>