Book preview widget: add option to display latest books

intk · Dec 17, 2024 · 47ca591 · 47ca591
1 parent 058d265
commit 47ca591
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 14 deletions.
diff --git a/server/modules/book-page/index.js b/server/modules/book-page/index.js
@@ -14,7 +14,6 @@ module.exports = {
       area: {
         type: 'area',
         options: {
-          max: 2,
           widgets: {
             donate: {},
             newsletter: {},
@@ -91,6 +90,17 @@ module.exports = {
       },
 
       async beforeShow (req) {
+        const splitTitle = req.data.piece?.title?.split(' ')
+        let formattedTitle = ''
+        for (let titleElement of splitTitle) {
+          if (titleElement.length > 10 && titleElement.endsWith('biography')) {
+            const splitWord = titleElement.split('biography')
+            titleElement = splitWord[0] + '&shy;' + 'biography'
+          }
+          formattedTitle += titleElement + ' '
+        }
+        req.data.piece.formattedTitle = formattedTitle
+
         const latestBooks = await self.apos.book.find(req, {}).limit(8).toArray() || []
 
         let currentPieceAlreadyPresent = false

diff --git a/server/modules/book-page/ui/src/index.js b/server/modules/book-page/ui/src/index.js
@@ -29,4 +29,39 @@ export default () => {
       })
     }
   }
+
+  let isDown = false
+  let startX
+  let scrollLeft
+  const container = document.querySelector('.pdl-book-previews__container')
+  const elements = container.querySelectorAll('.pdl-book-preview')
+  const elementsWrapper = container.querySelector('.pdl-book-previews')
+
+  container.addEventListener('mousedown', e => {
+    isDown = true
+    startX = e.pageX - container.offsetLeft
+    scrollLeft = container.scrollLeft
+  })
+
+  container.addEventListener('mouseup', e => {
+    isDown = false
+    elementsWrapper.style.cursor = 'grab'
+    for (let i = 0; i < elements.length; i++) {
+      elements[i].style.pointerEvents = 'auto'
+    }
+  })
+
+  container.addEventListener('mousemove', e => {
+    if (!isDown) return
+    e.preventDefault()
+    const x = e.pageX - container.offsetLeft
+    const walk = (x - startX) * 2
+    container.scrollLeft = scrollLeft - walk
+
+    elementsWrapper.style.cursor = 'grabbing'
+
+    for (let i = 0; i < elements.length; i++) {
+      elements[i].style.pointerEvents = 'none'
+    }
+  })
 }
diff --git a/server/modules/book-page/ui/src/index.scss b/server/modules/book-page/ui/src/index.scss
@@ -20,6 +20,7 @@
     text-align: left;
     margin: 0;
     letter-spacing: 0.01px;
+    hyphens: manual;
 
     @media (min-width: map-get($breakpoints, 'md')) {
       font-size: 82px;
@@ -523,20 +524,16 @@
       }
 
       .pdl-book-preview__format--second, .pdl-book-preview__format--third {
-        width: 159px;
+        width: 157px;
 
         @media (min-width: map-get($breakpoints, 'sm')) {
-          width: 211px;
+          width: 209px;
         }
 
         @media (min-width: map-get($breakpoints, 'md')) {
-          width: 217px;
+          width: 214px;
           padding-left: 20px;
           font-size: 17px;
-
-          &:hover {
-            width: 215px;
-          }
         }
       }
     }

diff --git a/server/modules/book-page/ui/src/preview.scss b/server/modules/book-page/ui/src/preview.scss
@@ -311,7 +311,6 @@
   .pdl-book-preview__view {
     border-radius: 4px;
     padding: 12px;
-    // padding-top: 12px;
     margin-left: 7px;
     color: black;
     position: absolute;
@@ -353,13 +352,13 @@
     display: none;
     background-color: black;
     color: white;
-    width: 126px;
+    width: 124px;
     padding: 12px 8px;
     gap: 1px;
     transition: color 0.3s, background-color 0.3s, transform 0.3s;
 
     @media (min-width: map-get($breakpoints, 'md')) {
-      width: 172px;
+      width: 170px;
     }
 
     &--first {
@@ -377,7 +376,6 @@
         &:hover {
           background-color: white;
           color: black;
-          width: 170px;
         }
       }
     }
@@ -391,7 +389,6 @@
         &:hover {
           background-color: white;
           color: black;
-          width: 170px;
         }
       }
     }

diff --git a/server/modules/book-page/views/show.html b/server/modules/book-page/views/show.html
@@ -47,7 +47,7 @@
           {{ data.piece._author[0].title }}
         </a>
       {% endif %}
-      <h1>{{ data.piece.title }}</h1>
+      <h1>{{ data.piece.formattedTitle | safe | trim }}</h1>
     </div>
 
     <div class="pdl-book__info pdl-book__info--bottom" id="formats">

diff --git a/server/modules/book-preview-widget/index.js b/server/modules/book-preview-widget/index.js
@@ -1,23 +1,48 @@
 module.exports = {
   extend: '@apostrophecms/widget-type',
+
   options: {
     label: 'Book Preview',
     icon: 'view-column-outline-icon',
   },
+
   icons: {
     'view-column-outline-icon': 'ViewColumnOutline',
   },
+
   fields: {
     add: {
       title: {
         type: 'string',
       },
+      latestBooks: {
+        type: 'boolean',
+        label: 'Show latest books',
+        def: false,
+      },
       _books: {
         type: 'relationship',
         required: true,
         withType: 'book',
         withRelationships: ['_author'],
+        if: {
+          latestBooks: false,
+        },
       },
     },
   },
+
+  extendMethods (self) {
+    return {
+      async load (_super, req, widgets) {
+        await _super(req, widgets)
+        for (const widget of widgets) {
+          if (widget.latestBooks) {
+            const latestBooks = await self.apos.book.find(req, {}).limit(8).toArray() || []
+            widget._books = latestBooks
+          }
+        }
+      },
+    }
+  },
 }