adding IA ebook preview button

internetarchive · Aug 25, 2019 · ac69568 · ac69568
1 parent e68d4df
commit ac69568
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 31 deletions.
diff --git a/openlibrary/macros/LoanStatus.html b/openlibrary/macros/LoanStatus.html
@@ -5,6 +5,7 @@
 $# * editions_page renders additional data if you're seeing LoanStatus rendered in the sidebar of an edition page v. in the work's table.
 $# * block_name is a BEM block name
 
+$ ocaid = page.get('ocaid')
 $ work = page.works and page.works[0]
 $ meta_fields = page.get_ia_meta_fields() or {}
 $ contributor = meta_fields.get('contributor')
@@ -15,7 +16,7 @@
 $ availability_status = availability.get('status', 'error')
 $ current_and_available_loans = []
 
-$if page.get('ocaid'):
+$if ocaid:
   $ current_and_available_loans = page.get_current_and_available_loans()
   $ user_loan = None
   $if ctx.user:
@@ -75,29 +76,42 @@
           <input type="submit" class="cta-btn cta-btn--unavailable" id="waitlist_ebook" value="Join Waitlist"/>
         </form>
 
-$elif page.get('ocaid') and not page.is_access_restricted() and editions_page:
+$elif ocaid and not page.is_access_restricted() and editions_page:
     $ viewbook = "//%s/stream/XXX?ref=ol" % bookreader_host()
-    <a href="$viewbook.replace('XXX', page.ocaid)" title="Use BookReader to read online" class="cta-btn cta-btn--available">Read</a>
+    <a href="$viewbook.replace('XXX', ocaid)" title="Use BookReader to read online" class="cta-btn cta-btn--available">Read</a>
 
-$elif (not page.get('ocaid') or page.is_access_restricted()) and editions_page:
+$elif (not ocaid or page.is_access_restricted()) and editions_page:
+  $ sponsorship = qualifies_for_sponsorship(page)
+  $if (input(sponsorship=None) or user and user.is_sponsor()) and sponsorship.get('is_eligible'):
+    $ isbn = (page.isbn_13 and page.isbn_13[0] or page.isbn_10 and page.isbn_10[0])
+    $ user_id = user.key.split("/")[-1] if user else ''
+    <a href="$(sponsorship['url'])&userid=$(user_id)"
+       class="cta-btn cta-btn--sponsor"
+       data-ol-link-track="book-sponsorship">Sponsor eBook</a>
+    <p>
+      We don’t have this book yet. You can add it to our Lending
+      Library with a \$50 tax deductible donation.
+      <a href="/sponsorship" target="_blank">Learn More</a>
+    </p>
+  $else:
     <form>
       <input type="submit" class="cta-btn" disabled value="No ebook available">
     </form>
 
-
-$if editions_page and page.get('ocaid'):
-  $:macros.daisy(page, block_name=block_name)
-
-  $# If waitlisted, show other possible editions after daisy download link
-  $if (availability_status == 'borrow_unavailable'):
-      $ checkedout = current_and_available_loans[0] if current_and_available_loans else []
-      $if checkedout and not user_loan:
-        $if work and work.edition_count > 1:
-          <div class="check-availability">
-            <p>
-              Other editions of this book may be available:
-            </p>
-            <p class="check-other-editions">
-              <a data-ol-link-track="EditionPageCheckOtherEditionsButton" href="$work.url()">Check Other Editions</a>
-            </p>
-          </div>
+$if ocaid:
+  <p>
+    <a class="cta-btn cta-btn--preview" href="#bookPreview" id="bookPreviewButton">Preview</a>
+  </p>
+  <div class="hidden">
+    <div class="floater" id="bookPreview">
+      <div class="floaterHead">
+        <h2>Preview Book</h2>
+        <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.close();">&times;<span class="shift">$_("Close")</span></a>
+      </div>
+      <div id="bookPreviewIframe" class="lazyIframe" style="border-top: 1px solid #eee;">
+        <iframe width="100%" height="515" 
+                data-src="https://archive.org/stream/$ocaid">
+        </iframe>
+      </div>
+    </div>
+  </div>
diff --git a/openlibrary/macros/WorldcatLink.html b/openlibrary/macros/WorldcatLink.html
@@ -3,10 +3,7 @@
 $if oclc_numbers or isbn:
   <hr>
   <div class="cta-section">
-    <p>
-      <span class="cta-section-title">Prefer the physical book?</span>
-      Check nearby libraries with:
-    </p>
+    <p class="cta-section-title">Check your local library</p>
     <ul class="book-locate-options">
       <li><a class="worldcat-link" data-ol-link-track="worldcat-search" href="$macros.WorldcatUrl(isbn=isbn, oclc_numbers=oclc_numbers)" title="Check WorldCat for an edition near you">WorldCat</a></li>
       $if isbn:

diff --git a/openlibrary/macros/daisy.html b/openlibrary/macros/daisy.html
@@ -3,17 +3,21 @@
 $# * page
 $# * block_name is a BEM block name
 
-$ msg = msg or _("Download ebook for print-disabled")
+$ msg = msg or _("Daisy ebook")
 
 $if block_name:
   $ prefix = block_name + '__' 
 $else:
   $ prefix = ''
 
-<p class="$(prefix)print-disabled-download">
+<hr>
+<div class="cta-section">
+  <p class="cta-section-title">Download for print-disabled</p>
+  <img src="/images/icons/icon-encrypto-sm.png" class="daisy-lock" width="8" height="12" alt="Download Protected DAISY"/>
+  &nbsp;
   <a href="$(url or page.url('/daisy'))" title="Download Protected DAISY">
     <meta itemprop="bookFormat" content="EBook/DAISY3"/>
     $msg
-    <img src="/images/icons/icon-encrypto-sm.png" class="daisy-lock" width="8" height="12" alt="Download Protected DAISY"/>
   </a>
-</p>
+</div>
+
diff --git a/openlibrary/macros/databarWork.html b/openlibrary/macros/databarWork.html
@@ -63,6 +63,9 @@ <h3 class="header">
         $if page.get('ocaid') and not page.is_access_restricted():
             $:macros.DownloadOptions(page)
 
+        $if editions_page and page.get('ocaid'):
+            $:macros.daisy(page, block_name="read-options-panel")
+
         $:macros.WorldcatLink(isbn=isbn, oclc_numbers=oclc_numbers, referer=page.url(relative=False))
 
         $if isbn or asin or scribd:

diff --git a/openlibrary/plugins/openlibrary/js/ol.js b/openlibrary/plugins/openlibrary/js/ol.js
@@ -338,6 +338,24 @@ export default function init(){
             $('.wmd-preview').before('<h3 id="prevHead" style="margin:15px 0 10px;padding:0;">Preview</h3>');
         }
     });
+
+    // For Book Sponsorship Button
+    $(document).ready(function(){
+        $("#bookPreviewButton").colorbox({
+            inline: true,
+            opacity: "0.5",
+            href: "#bookPreview"
+        })
+    })
+
+    $(".lazyIframe").show(function(){
+      // Find the iframes within our newly-visible element
+      $(this).find("iframe").prop("src", function(){
+        // Set their src attribute to the value of data-src
+        return $(this).data("src");
+      });
+    });
+
     initReadingListFeature();
     initBorrowAndReadLinks();
 }

diff --git a/static/css/components/buttonCta.less b/static/css/components/buttonCta.less
@@ -26,6 +26,22 @@ a.cta-btn {
   }
   &--unavailable {
     background-color: @orange;
+    color: @white;
+  }
+
+  &--preview, &--preview:link, &--preview:visited {
+    background-color: @white;
+    border: 1px solid @lighter-grey;
+    color: @black;
+  }
+
+  &--sponsor {
+    background: @white-blue;
+    border: 2px solid @link-blue;
+  }
+
+  &--sponsor:link {
+      color: @link-blue;
   }
   &__badge {
     background-color: @orange-two;
@@ -35,7 +51,7 @@ a.cta-btn {
   }
 }
 
-// Top margin to button coming after another button 
+// Top margin to button coming after another button
 .cta-btn + form input.cta-btn, .cta-btn + .cta-btn {
   margin-top: 5px;
 }
diff --git a/static/css/page-plain.less b/static/css/page-plain.less
@@ -24,7 +24,6 @@ body#plain {
   /* stylelint-disable selector-max-specificity */
   #contentBody,
   #contentHead {
-    width: 690px;
     padding: 0 134px;
     margin: 0;
   }