Books page integration

openlibrary/macros/EditionNavBar.html

@@ -10,7 +10,7 @@
     </a>
   </li>
   <li>
-    <a href="#edition-details">$_("This Edition")</a>
+    <a href="#details">$_("Details")</a>
   </li>
   <li>
     <a href="#reader-observations">$_("Reviews")</a>

openlibrary/macros/SubjectTags.html

@@ -1,10 +1,10 @@
-$def with(work,location,tags=[])
+$def with(work, tags=[])
 
 $def render_subjects(label, subjects, track_value, prefix=""):
   $if subjects:
     <div class="section link-box">
+      <span class="clamp" data-before="+ ">
       <h6>$label</h6>
-      <span>
         $for subject in subjects:
           <a href="/subjects/$prefix$utf8(subject.lower().replace(' ', '_').replace(',', '').replace('/', ''))" data-ol-link-track="$track_value">$subject</a>$cond(not loop.last, ",", "")
       </span>
@@ -13,13 +13,10 @@ <h6>$label</h6>
 $if work:
   $for tag in tags:
     $if tag=="Subjects":
-      $if location=="work":
-        $:render_subjects(_("Subjects"), work.get_subjects(),"WorkSection|SubjectClick")
-      $else:
-        $:render_subjects(_("Subjects"), work.get_subjects(),"BookOverview|SubjectClick")
-    $elif tag=="People":
-      $:render_subjects(_("People"), work.subject_people,"WorkSection|SubjectPeopleClick", prefix="person:")
-    $elif tag=="Places":
-      $:render_subjects(_("Places"), work.subject_places,"WorkSection|SubjectPlacesClick", prefix="place:")
-    $elif tag=="Times":
-      $:render_subjects(_("Times"), work.subject_times,"WorkSection|SubjectTimesClick", prefix="time:")
+      $:render_subjects(_("Subjects"), work.get_subjects(),"BookOverview|SubjectClick")
+    $if tag=="People":
+      $:render_subjects(_("People"), work.subject_people,"BookOverview|SubjectPeopleClick", prefix="person:")
+    $if tag=="Places":
+      $:render_subjects(_("Places"), work.subject_places,"BookOverview|SubjectPlacesClick", prefix="place:")
+    $if tag=="Times":
+      $:render_subjects(_("Times"), work.subject_times,"BookOverview|SubjectTimesClick", prefix="time:")

openlibrary/plugins/openlibrary/js/index.js

@@ -196,9 +196,18 @@ jQuery(function () {
             .then(module => module.initRealTimeValidation());
     }
     // conditionally load readmore button based on class in the page
-    if (document.getElementsByClassName('read-more-button').length) {
+    const readMoreButtons = document.getElementsByClassName('read-more-button');
+    const clampers = document.getElementsByClassName('clamp');
+    if (readMoreButtons.length || clampers.length) {
         import(/* webpackChunkName: "readmore" */ './readmore.js')
-            .then(module => module.initReadMoreButton());
+            .then(module => {
+                if (readMoreButtons.length) {
+                    module.initReadMoreButton();
+                }
+                if (clampers.length) {
+                    module.initClampers();
+                }
+            });
     }
     // conditionally loads Goodreads import based on class in the page
     if (document.getElementsByClassName('import-table').length) {

openlibrary/plugins/openlibrary/js/readmore.js

@@ -19,3 +19,22 @@ export function initReadMoreButton() {
         }
     });
 }
+
+export function initClampers() {
+    /*
+      Clamper shows used to show more/less by toggling `hidden`
+      style on parent .clamp tag
+     */
+    $('.clamp').on('click', function(){
+        const up = $(this);
+        if (up.hasClass('clamp')) {
+            up.css({display: up.css('display') === '-webkit-box' ? 'unset' : '-webkit-box'});
+
+            if (up.attr('data-before') === '+ ') {
+                up.attr('data-before', '- ')
+            } else {
+                up.attr('data-before', '+ ')
+            }
+        }
+    });
+}

openlibrary/templates/site/head.html

@@ -31,7 +31,10 @@
     $ style = 'build/page-%s.css'%ctx.get('cssfile', 'user')
     <link href="$static_url(style)" rel="stylesheet" type="text/css" />
 
-
+    <!-- Don't hide content with clamp if no js to show more/less -->
+    <noscript>
+      <style>.clamp { -webkit-line-clamp: unset !important; }</style>
+    </noscript>
  <script>
 
 /* @licstart  The following is the entire license notice for the