Add "Preview" link beneath bookcover on Search Result Cards

openlibrary/macros/BookPreview.html

@@ -1,11 +1,14 @@
-$def with (ocaid, analytics_attr, show_only=False)
+$def with (ocaid, analytics_attr=None, show_only=False, vanilla=True)
 $# :param str ocaid:
 
+$ analytics = analytics_attr('Preview') if analytics_attr else "CTAClick|Preview"
+$ button = "cta-btn--preview" if vanilla else "cta-btn--preview-link"
+
   <div class="cta-button-group">
-    <a class="cta-btn cta-btn--preview"
+    <a class="cta-btn $button"
       data-iframe-src="https://archive.org/details/$ocaid?view=theater&wrapper=false"
       data-iframe-link="https://archive.org/details/$ocaid"
-      $:analytics_attr('Preview') href="#bookPreview">$(_('Preview Only') if show_only else _('Preview'))</a>
+      $:analytics href="#bookPreview">$(_('Preview Only') if show_only else _('Preview'))</a>
   </div>
 
 $if render_once('book-preview-floater'):

openlibrary/macros/LoanStatus.html

@@ -126,8 +126,8 @@
       >$_("Checked Out")</a>
     </div>
 
-$elif ocaid and availability.get('is_previewable') and book_provider.short_name == 'ia':
-  $:macros.BookPreview(ocaid, analytics_attr, show_only=True)
+$elif True:
+  $:macros.BookPreview(ocaid,show_only=True, vanilla=False)
   $if secondary_action:
       $:macros.BookSearchInside(ocaid)
 

openlibrary/macros/SearchResultsWork.html

@@ -1,5 +1,8 @@
 $def with (doc, decorations=None, cta=True, availability=None, extra=None, attrs=None, rating=None, show_librarian_extras=False, include_dropper=False, blur=False, footer=None)
 
+$ availability = (doc.availability or {}) if hasattr(doc, 'availability') else {}
+$ ocaid = doc.get('ocaid') or availability.get('identifier')
+
 $code:
   max_rendered_authors = 9
   doc_type = (
@@ -58,6 +61,7 @@
               alt="$_('Cover of: %(title)s', title=full_title)"
               title="$_('Cover of: %(title)s', title=full_title)"
       /></a>
+      $:macros.BookPreview(ocaid,show_only=False, vanilla=False)
     </span>
 
     <div class="details">

openlibrary/plugins/openlibrary/js/dialog.js

@@ -51,7 +51,7 @@ function initConfirmationDialogs() {
 
 export function initPreviewDialogs() {
     // Colorbox modal + iframe for Book Preview Button
-    const $buttons = $('.cta-btn--preview');
+    const $buttons = $('.cta-btn--preview, .cta-btn--preview-link');
     $buttons.each((i, button) => {
         const $button = $(button);
         $button.colorbox({

openlibrary/plugins/openlibrary/js/index.js

@@ -363,7 +363,7 @@ jQuery(function () {
     }
 
     // TODO: Make these selectors a consistent interface
-    const $dialogs = $('.dialog--open,.dialog--close,#noMaster,#confirmMerge,#leave-waitinglist-dialog,.cta-btn--preview');
+    const $dialogs = $('.dialog--open,.dialog--close,#noMaster,#confirmMerge,#leave-waitinglist-dialog,.cta-btn--preview,.cta-btn--preview-link');
     if ($dialogs.length) {
         import(/* webpackChunkName: "dialog" */ './dialog')
             .then(module => module.initDialogs())

static/css/components/read-panel.less

@@ -14,6 +14,45 @@
   display: none;
 }
 
+.cta-btn--preview-link {
+  color: @primary-blue;
+  text-decoration: none;
+  position: relative;
+  margin-top: -15px; // offsets Illustration margin-bottom: 10px
+  margin-bottom: 5px;
+  padding: 5px 20px 10px; // Increasing click area for mobile text link
+  background-color: transparent;
+
+  // When Preview button is a text link, have it take up only the width
+  // of the content (not full 100% width)
+  flex-basis: content;
+  flex-grow: 0;
+  width: auto;
+
+  /* stylelint-disable selector-max-specificity */
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &::before {
+    width: 22px;
+    height: 18px;
+    display: inline-block;
+    margin-right: 6px;
+    position: relative;
+    top: 2px;
+
+    // Setting pseudo-element content to book icon; mask is used to allow for a 'fill' color
+    content: "";
+    -webkit-mask: url(../images/icons/open-book.svg);
+    mask: url(../images/icons/open-book.svg);
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    background-color: @primary-blue;
+  }
+  /* stylelint-enable selector-max-specificity */
+}
+
 .read-options,
 .Tools .btn-notice {
   font-size: 1em;