Merge pull request #456 from VTUL/item-page-count-display

Display page count for each collection item (with IIIF manifest) in search page
VTUL · Apr 5, 2024 · 4fd221d · 4fd221d
2 parents 9fdfb56 + 3a6ac44
commit 4fd221d
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 10 deletions.
diff --git a/src/components/GalleryView.js b/src/components/GalleryView.js
@@ -6,6 +6,16 @@ import { cleanHTML } from "../lib/MetadataRenderer";
 import "../css/SearchResult.scss";
 
 const GalleryView = (props) => {
+  const getPageCount = () => {
+    if (props.item?.archiveOptions) {
+      const { page_count } = JSON.parse(props.item.archiveOptions);
+      return parseInt(page_count) || 0;
+    }
+    return 0;
+  };
+
+  const itemPageCnt = getPageCount();
+
   return (
     <div className="col-md-6 col-lg-4 gallery-item">
       <div className="card">
@@ -25,12 +35,17 @@ const GalleryView = (props) => {
           >
             <h3 className="card-title crop-text-3">{props.item.title}</h3>
           </NavLink>
-          <p className="card-text crop-text-3">
+          <p className={`card-text crop-text-${itemPageCnt > 0 ? "2" : "3"}`}>
             {cleanHTML(
               props.item?.description?.length ? props.item.description[0] : "",
               "html"
             )}
           </p>
+          {itemPageCnt > 0 && (
+            <div className="badge badge-secondary page-count-badge">
+              {itemPageCnt} page(s)
+            </div>
+          )}
         </div>
       </div>
     </div>

diff --git a/src/components/ItemListView.js b/src/components/ItemListView.js
@@ -1,9 +1,9 @@
-import React, { Component } from "react";
+import { Component } from "react";
 import { NavLink } from "react-router-dom";
-import { RenderItems, arkLinkFormatted } from "../lib/MetadataRenderer";
-import { Thumbnail } from "./Thumbnail";
 import "../css/SearchResult.scss";
 import { fetchLanguages } from "../lib/fetchTools";
+import { RenderItems, arkLinkFormatted } from "../lib/MetadataRenderer";
+import { Thumbnail } from "./Thumbnail";
 
 class ItemListView extends Component {
   constructor(props) {
@@ -17,12 +17,30 @@ class ItemListView extends Component {
     fetchLanguages(this, this.props.site, "abbr");
   }
 
-  render() {
-    const keyArray = [
+  renderPageCount = () => {
+    const archiveOptions = this.props.item?.archiveOptions;
+    if (!archiveOptions) return false;
+    const archiveOptObj = JSON.parse(archiveOptions);
+    return "page_count" in archiveOptObj;
+  };
+
+  getKeyArray = () => {
+    let keyArray = [
       { field: "description", label: "Description" },
       { field: "tags", label: "Tags" },
       { field: "creator", label: "Creator" }
     ];
+    if (this.renderPageCount()) {
+      keyArray.push({
+        field: "page_count",
+        label: "Page(s)"
+      });
+    }
+    return keyArray;
+  };
+
+  render() {
+    const keyArray = this.getKeyArray();
     if (this.state.languages !== null) {
       return (
         <div key={this.props.item.id} className="col-12 collection-entry">

diff --git a/src/css/ListPages.scss b/src/css/ListPages.scss
@@ -79,6 +79,12 @@ td.collection-detail-value div span.list-unstyled {
   display: block;
 }
 
+.archive-item-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3em;
+}
+
 a.more-link {
   margin-left: 10px;
   color: var(--hokieOrange);

diff --git a/src/css/SearchResult.scss b/src/css/SearchResult.scss
@@ -79,17 +79,33 @@ div.search-results div.row div#content div.navbar {
   height: 10.5rem;
   border: 1px solid #e2e0e0;
   border-top: none;
-  padding: 1rem;
+  padding: 0.9rem;
+  position: relative;
 }
 
-.crop-text-3 {
-  -webkit-line-clamp: 3;
+@mixin crop-text($max-lines) {
+  -webkit-line-clamp: $max-lines;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
 }
 
+.crop-text-2 {
+  @include crop-text(2);
+}
+
+.crop-text-3 {
+  @include crop-text(3);
+}
+
+.page-count-badge {
+  position: absolute;
+  left: 0.9rem;
+  bottom: 0.9rem;
+  font-size: 0.75rem !important;
+}
+
 .gallery-item .card-body .card-title {
   font-family: "gineso-condensed", sans-serif;
   font-size: 1.1rem;

diff --git a/src/lib/MetadataRenderer.js b/src/lib/MetadataRenderer.js
@@ -253,7 +253,7 @@ function textFormat(item, attr, languages, collectionCustomKey, site) {
   if (item.collection_category) category = "collection";
   if (Array.isArray(item[attr]) && attr !== "description") {
     return (
-      <div>
+      <div className="archive-item-tags">
         {item[attr].map((value, i) => (
           <span className="list-unstyled" key={i} data-cy="multi-field-span">
             {attr === "is_part_of" && i === 0 ? (
@@ -263,6 +263,7 @@ function textFormat(item, attr, languages, collectionCustomKey, site) {
             ) : (
               listValue(category, attr, value, languages)
             )}
+            {i < item[attr].length - 1 && ","}
           </span>
         ))}
       </div>
@@ -292,6 +293,10 @@ function textFormat(item, attr, languages, collectionCustomKey, site) {
     } else {
       return <MoreLink category={category} item={item} />;
     }
+  } else if (attr === "page_count") {
+    if (!item["archiveOptions"]) return;
+    const { page_count } = JSON.parse(item["archiveOptions"]);
+    return parseInt(page_count) || 0;
   } else {
     return item[attr];
   }