5831/feature/unified read button dropdown

openlibrary/i18n/messages.pot

@@ -3654,14 +3654,6 @@ msgstr ""
 msgid "in %(languagelist)s"
 msgstr ""
 
-#: books/edition-sort.html
-msgid "Libraries near you:"
-msgstr ""
-
-#: books/edition-sort.html
-msgid "Look for this edition at WorldCat"
-msgstr ""
-
 #: SearchNavigation.html books/mybooks_breadcrumb_select.html lib/nav_foot.html
 #: mybooks.py
 msgid "Books"
@@ -6058,8 +6050,8 @@ msgstr ""
 msgid "Search Open Library for %s"
 msgstr ""
 
-#: BookSearchInside.html FulltextSearchSuggestion.html SearchNavigation.html
-#: search/inside.html search/snippets.html
+#: BookSearchInside.html FulltextSearchSuggestion.html ReadButton.html
+#: SearchNavigation.html search/inside.html search/snippets.html
 msgid "Search Inside"
 msgstr ""
 
@@ -7498,6 +7490,14 @@ msgstr ""
 msgid "Listen"
 msgstr ""
 
+#: ReadButton.html
+msgid "Download"
+msgstr ""
+
+#: ReadButton.html
+msgid "Locate"
+msgstr ""
+
 #: ReadMore.html
 msgid "Read more"
 msgstr ""

openlibrary/macros/LoanStatus.html

@@ -39,14 +39,19 @@
 
 $ is_edition = doc.key.split('/')[1] == 'books'
 
+$# Pass work key to Read Button for worldcat
+$ edition_key = None
+$if is_edition:
+  $ edition_key = doc.key.split('/')[2]
+
 $def analytics_attr(action):
   $if analytics_override:
     data-ol-link-track="$analytics_override"
   $else:
     data-ol-link-track="CTAClick|$action"
 
 $if user_loan:
-  $:macros.ReadButton(ocaid, analytics_attr, loan=user_loan, listen=listen)
+  $:macros.ReadButton(ocaid, analytics_attr, loan=user_loan, listen=listen, edition_key=edition_key)
   $if secondary_action:
     $:macros.ReturnForm(ocaid)
     $:macros.FormatExpiry(user_loan['expiry'])
@@ -57,23 +62,21 @@
 
 $elif availability.get('is_readable') or availability.get('status') == 'open':
   $# Open / Publicly Readable (Unrestricted)
-  $:macros.ReadButton(ocaid, analytics_attr, listen=listen)
-  $if secondary_action:
-    $:macros.BookSearchInside(ocaid)
+  $:macros.ReadButton(ocaid, analytics_attr, listen=listen, edition_key=edition_key)
 
 $elif ocaid and ctx.user and ctx.user.is_printdisabled():
   $# Exemptions for patrons with Print Disabilities
   $ pd_eligible = availability and availability.get('is_printdisabled')
   $ std_borrow = availability.get("available_to_borrow") or availability.get("available_to_browse")
   $if secondary_action and (availability.get('is_printdisabled') or availability.get('is_lendable')):
     $:macros.BookPreview(ocaid, analytics_attr, show_only=False)
-  $:macros.ReadButton(ocaid, analytics_attr, borrow=pd_eligible, printdisabled=not std_borrow, listen=listen)
+  $:macros.ReadButton(ocaid, analytics_attr, borrow=pd_eligible, printdisabled=not std_borrow, listen=listen, edition_key=edition_key)
 
 $elif availability.get('is_lendable'):
   $if secondary_action:
     $:macros.BookPreview(ocaid, analytics_attr, show_only=False)
   $if availability.get("available_to_borrow") or availability.get("available_to_browse"):
-    $:macros.ReadButton(ocaid, analytics_attr, borrow=True, listen=listen)
+    $:macros.ReadButton(ocaid, analytics_attr, borrow=True, listen=listen, edition_key=edition_key)
   $elif availability.get('available_to_waitlist'):
     $if waiting_loan:
       $if secondary_action:
@@ -135,12 +138,12 @@
 
 $else:
   $# Only render clickable NotInLibrary when not on an edition's page, for that specific edition.
-  $# secondary_action means we're on a book page and it's the button under the cover image.
-  $ key = doc.key if is_edition else work_key
-  $if (is_edition and is_book_page) or secondary_action:
-      $:macros.NotInLibrary(None, analytics_attr)
-  $else:
-      $:macros.NotInLibrary(key, analytics_attr)
+    $# secondary_action means we're on a book page and it's the button under the cover image.
+    $ key = doc.key if is_edition else work_key
+    $if (is_edition and is_book_page) or secondary_action:
+        $:macros.NotInLibrary(None, analytics_attr)
+    $else:
+        $:macros.NotInLibrary(key, analytics_attr)
 
 $:post
 

openlibrary/macros/ReadButton.html

@@ -1,4 +1,4 @@
-$def with(ocaid, analytics_attr, borrow=False, listen=False, loan=None, label='', printdisabled=False)
+$def with(ocaid, analytics_attr, borrow=False, listen=False, loan=None, label='', printdisabled=False, edition_key=None)
 
 $ stream_url = "/borrow/ia/%s?ref=ol" % ocaid
 
@@ -18,18 +18,49 @@
   $ title = _("Read ebook from Internet Archive")
   $ analytics_action = "Read"
 
-<div class="cta-button-group">
-  <a href="$(stream_url)" title="$title" class="cta-btn cta-btn--ia cta-btn--available cta-btn--$(action)"
-      $:analytics_attr(analytics_action)
-      $if loan:
-        data-userid="$(loan['userid'])"
-      >$label</a>
-  $if listen:
-    <a href="$(stream_url)&_autoReadAloud=show"
-       title="$title using Read Aloud"
-       $:analytics_attr(action.capitalize() + 'Listen')
-       class="cta-btn cta-btn--available cta-btn--w-icon">
-      <span class="btn-icon read-aloud"></span>
-      <span class="btn-label">$_("Listen")</span>
-    </a>
+<div class="cta-dropper">
+  <div class="cta-button-group cta-dropper-button">
+    <a href="$(stream_url)" title="$title" class="cta-btn cta-btn--ia cta-btn--available cta-btn--$(action)"
+        $:analytics_attr(analytics_action)
+        $if loan:
+          data-userid="$(loan['userid'])"
+        >$label</a>
+  </div>
+  <details>
+    <summary>
+    </summary>
+    <ul class="dropper-menu">
+      $if listen:
+        <li>
+          <a href="$(stream_url)&_autoReadAloud=show"
+            title="$title using Read Aloud"
+             $:analytics_attr(action.capitalize() + 'Listen')
+             class="cta-btn cta-btn--available cta-btn--w-icon">
+            <span class="btn-icon listen"></span>
+            <span class="btn-label">$_("Listen")</span>
+          </a>
+        </li>
+      <li>
+        <form action="/borrow/ia/$(ocaid)">
+          <span class="btn-icon search"></span>
+          <input type="text" name="q"
+             data-ol-link-track="CTAClick|ReadSearchInside"
+             placeholder="$_('Search Inside')">
+        </form>
+      </li>
+      <li>
+        <a class="cta-btn cta-btn--available cta-btn--w-icon">
+          <span class="btn-icon download"></span>
+          <span class="btn-label">$_("Download")</span>
+        </a>
+      </li>
+      $if edition_key:
+        <li>
+          <a class="cta-btn cta-btn--available cta-btn--w-icon">
+            <span class="btn-icon map"></span>
+            <span class="btn-label">$_("Locate")</span>
+          </a>
+        </li>
+    </ul>
+  </details>
 </div>

openlibrary/templates/books/edition-sort.html

@@ -91,11 +91,5 @@
           $# render_first is only true on the book page for an edition.
           <li class="read-option">$:macros.LoanStatus(book, is_book_page=render_first)</li>
         </ul>
-        $if oclc_numbers or isbn:
-          <div class="editions-table__links">
-              <span>$_('Libraries near you:')</span>
-              <a href="$macros.WorldcatUrl(isbn=isbn, oclc_numbers=oclc_numbers)"
-                 title="$_('Look for this edition at WorldCat')">WorldCat</a>
-          </div>
       </div>
     </td>

static/css/components/editions.less

@@ -17,6 +17,9 @@ table#editions,
     width: 185px;
     margin: 0 auto;
   }
+  .cta-button-group.cta-dropper__button {
+    width: 145px;
+  }
 
   thead {
     border: 1px solid @light-grey;
@@ -198,9 +201,6 @@ table#editions,
     .links a {
       font-size: 120%;
     }
-    .editions-table__links {
-      display: none;
-    }
 
     td.icon {
       width: 100%;
@@ -244,13 +244,3 @@ tbody {
 .edition-adder {
   text-align: right;
 }
-
-.editions-table__links {
-  text-align: center;
-}
-
-a.paginate_button.current {
-  background-color: @lightest-grey;
-  border: 1px solid @lighter-grey;
-  color: @black;
-}

static/css/components/generic-dropper.less

@@ -1,10 +1,10 @@
 .generic-dropper-wrapper {
   position: relative;
-  z-index: @z-index-level-4;
+  z-index: @z-index-level-3;
   min-height: 50px;
 
   &--active {
-    z-index: @z-index-level-5;
+    z-index: @z-index-level-4;
   }
 }
 
@@ -88,3 +88,127 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+/* Unified Read Button Styling */
+.cta-dropper {
+  display: flex;
+  margin-bottom: 10px;
+  // main cta button
+  .cta-dropper-button {
+    .cta-btn {
+      border-radius: 5px 2px 2px 5px;
+    }
+    border-right: 1px solid transparent;
+    flex-grow: 1;
+  }
+  // dropdown button
+  details {
+    background-color: @primary-blue;
+    border-radius: 2px 5px 5px 2px;
+    // raise dropper menu above "Want to Read" dropper
+    z-index: @z-index-level-4;
+    // mark details as nearest container ancestor to dropdown menu
+    contain: layout;
+  }
+  summary {
+    cursor: pointer;
+    list-style-type: none;
+    &:hover { background-color: darken(@primary-blue, 20%); }
+    border-radius: 2px 5px 5px 2px;
+  }
+  summary::after {
+    display: block;
+    margin: 0 8px;
+    padding-top: 16px;
+    width: 24px;
+    height: 24px;
+    // style for animated arrow on dropdown button. Copied from "Want to Read" dropper above
+    content: "";
+    background: url(/images/icons/icon_dropit.png) no-repeat center;
+    background-position: 0;
+    background-size: 45px;
+    // whiten arrow png
+    filter: brightness(0) invert(1);
+  }
+  details[open] summary::after {
+    content: "";
+    background-position: -22px 50%;
+  }
+}
+// dropdown containing Listen/Search/Download/Locate buttons
+.dropper-menu {
+  .cta-btn.cta-btn--w-icon, .cta-btn:link, .cta-btn:visited {
+    background: @white;
+    color: @black;
+    text-align: left;
+    padding: 5px 10px;
+    border-radius: 0;
+    margin: 0;
+  }
+  .cta-btn .btn-label { padding: 0; }
+  .cta-btn:hover { background-color: @lighter-grey; }
+  li {
+    &+li { border-top: 1px solid @lighter-grey; }
+    &:first-child, &:last-child { overflow: clip; }
+    &:first-child { border-radius: 5px 5px 0 0; }
+    &:last-child { border-radius: 0 0 5px 5px; }
+  }
+  // search inside form-specific styles
+  form {
+    display: flex;
+    align-items: center;
+  }
+  input {
+    font-family: inherit;
+    font-size: 16px;
+    border: transparent;
+    padding: 16.25px 10px 8.25px 42px;
+    // override flex min-width: auto to shrink to form
+    min-width: 0;
+    transition: background-color .2s;
+    &:hover { background-color: @lighter-grey; }
+    &::placeholder { color: @black; }
+    &:focus::placeholder { color: transparent; }
+  }
+  .btn-icon {
+    display: inline-block;
+    filter: invert(1);
+    margin: 5px 2px -3px;
+    // width uses higher specificity below
+    height: 1.5em;
+    &.search {
+      position: absolute;
+      margin: 0 2px 0 12px;
+      // highlight/click search box through icon
+      pointer-events: none;
+      // override medium text size in edition table links
+      font-size: 16px;
+    }
+  }
+  // icons
+  .listen { background-image: url(/static/images/icons/icon_listen.png); }
+  .search { background-image: url(/static/images/icons/icon_search.png); }
+  .download { background-image: url(/static/images/icons/icon_download.png); }
+  .map { background-image: url(/static/images/icons/icon_map.png); }
+  .listen, .search, .download, .map {
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+  }
+}
+// extra specificity needed for style overrides
+.cta-dropper .dropper-menu {
+  margin: 5px 0 0;
+  border: 1px solid @lighter-grey;
+  border-radius: 5px;
+  background-color: @white;
+  position: absolute;
+  // align dropper menu with buttons
+  right: 0;
+  width: 194px;
+  li {
+    list-style: none;
+    margin: 0;
+  }
+  .btn-icon { width: 1.5em; }
+}

static/css/components/read-panel.less

@@ -15,7 +15,8 @@
 }
 
 .read-options,
-.Tools .btn-notice {
+.btn-notice {
+  line-height: 1.5em;
   font-size: 1em;
   padding: 15px;
   margin-bottom: 10px;
@@ -24,7 +25,7 @@
   border: 1px solid @lighter-grey;
   margin-top: 0;
 
-  .cta-btn {
+  .cta-btn, .cta-btn.cta-btn--no-pointer {
     margin-bottom: 10px;
   }
 
@@ -76,10 +77,6 @@
     font-size: .78em;
   }
 
-  summary {
-    margin: 5px -5px 0;
-  }
-
   .check-availability {
     font-size: 14px;
     border-top: 1px solid @lightest-grey;