Commit changes for other machine.

public/readingList.js

@@ -29,7 +29,7 @@ function toggleReadingListVisibility() {
 
 function initCustomScrollbar() {
     document.querySelector('#reading-list').addEventListener('scroll', (e) => {
-        const progress = getScrollProgress(e.target)
+        const progress = getScrollProgress()
 
         const bar = document.querySelector('#scrollbar')
         const dot = document.querySelector('#scrollbar-dot')
@@ -41,46 +41,56 @@ function initCustomScrollbar() {
 }
 
 function stopBookScroll() {
-    // const bookMargin = 16 * 2
-    // const bookHeight = 316 + bookMargin / 2
-    // const wrapperBox = document
-    //     .querySelector('#reading-list')
-    //     .getBoundingClientRect()
-    // const startBufferSize =
-    //     (window.visualViewport.height * 0.9 - bookHeight) / 2 + 'px'
-    // const progress = getScrollProgress(
-    //     document.querySelector('#reading-list').children[1]
-    // )
-    // const books = document.querySelectorAll('.book')
-    // books.forEach((book) => {
-    //     const booksProgress =
-    //         (wrapperBox.top - book.getBoundingClientRect().top) *
-    //         (progress / 100)
-    //     if (
-    //         book.children[0]
-    //             .getAttribute('src')
-    //             .includes('img/books/mythical-man-month-5-6.jpg')
-    //     ) {
-    //         console.log(booksProgress)
-    //     }
-    // })
+    const wrapper = document.querySelector('#reading-list').children[1]
+    const modalBox = document
+        .querySelector('#reading-list')
+        .getBoundingClientRect()
+    const wrapperBox = wrapper.getBoundingClientRect()
+
+    const bufferHeight = calcBufferHeight()
+
+    const books = document.querySelectorAll('.book')
+
+    books.forEach((book) => {
+        // Don't use actual div/height approach? full simulation?
+        // blocks of "height", move absolute images in animated state across
+        // screen at speed set by number of images (scroll length)?
+        // 5dvh (wrapper y margin) - y coord of book * scroll progress in percent
+        const listTop = modalBox.height * 0.05
+        const listBottom = modalBox.height * 0.95
+        const listHeight = listBottom - listTop
+        const bookMargin = 16
+        const bookTop = book.getBoundingClientRect().top - bookMargin * 2
+
+        // const progress = ((bookTop - listHeight) / listHeight) * 100
+
+        // if (book.children[0].getAttribute('src').includes('refactoring')) {
+        //     console.log(progress)
+        // }
+
+        // if (progress <= -100) {
+        //     book.classList.add(['absolute'])
+        // }
+    })
 }
 
 function resizeEndBuffers() {
-    // Calculated, currently fixed height + y margins
-    const BOOK_HEIGHT = 316 + 16 * 2
     const buffers = document.querySelectorAll('.reading-list-buffer')
 
-    // Current height of scrollbar set up Tailwind
-    for (let buffer of buffers) {
-        buffer.style.height =
-            (window.visualViewport.height * 0.9 - BOOK_HEIGHT) / 2 + 'px'
-    }
+    buffers.item(0).style.height = calcBufferHeight() + 'px'
+    buffers.item(1).style.height = calcBufferHeight() + 'px'
 }
 
-function getScrollProgress(element) {
-    return (
-        (element.scrollTop / (element.scrollHeight - element.clientHeight)) *
-        100
-    )
+function getScrollProgress() {
+    const modal = document.querySelector('#reading-list')
+    return (modal.scrollTop / (modal.scrollHeight - modal.clientHeight)) * 100
+}
+
+function calcBufferHeight() {
+    // Calculated, currently fixed height
+    const BOOK_HEIGHT = 316
+
+    // Current height of scrollbar set by Tailwind
+    const scrollbarHeight = window.visualViewport.height * 0.9
+    return (scrollbarHeight - BOOK_HEIGHT) / 2 - 16
 }