feat: implement load more script (#51)

* feat: implement load more script * chore: update all enquiry templates
virtualidentityag · Nov 13, 2024 · 08def4d · 08def4d
1 parent 97ef88a
commit 08def4d
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 111 deletions.
diff --git a/src/js/load-more.js b/src/js/load-more.js
@@ -0,0 +1,44 @@
+;(() => {
+  const getButton = (section) => section.querySelector('button')
+  const getArea = (section) => section.querySelector('[load-more-area]')
+  const getCurrentPage = (area) => parseInt(area.getAttribute('data-page'))
+  const getPerPage = (area) => parseInt(area.getAttribute('data-per-page'))
+  const getTotal = (area) => parseInt(area.getAttribute('data-total'))
+
+  const init = (section) => {
+    const area = getArea(section)
+    const perPage = getPerPage(area)
+    const total = area.children.length
+
+    area.setAttribute('data-total', total)
+    area.setAttribute('data-page', 1)
+    Array.from(area.children)
+      .slice(perPage)
+      .forEach((child) => child.classList.add('d-none'))
+  }
+
+  const handleLoadMore = (section) => {
+    const area = getArea(section)
+    const currentPage = getCurrentPage(area)
+    const perPage = getPerPage(area)
+    const total = getTotal(area)
+
+    const start = currentPage * perPage
+    const end = Math.min(start + perPage, total)
+
+    Array.from(area.children)
+      .slice(start, end)
+      .forEach((child) => child.classList.remove('d-none'))
+
+    area.setAttribute('data-page', currentPage + 1)
+
+    if (end >= total) {
+      getButton(section).classList.add('d-none')
+    }
+  }
+
+  document.querySelectorAll('[load-more-section]').forEach((section) => {
+    init(section)
+    getButton(section).addEventListener('click', () => handleLoadMore(section))
+  })
+})()
diff --git a/src/js/scripts.js b/src/js/scripts.js
@@ -1,3 +1,4 @@
 import 'bootstrap'
 import './darkmode.js'
-import './tiles-showcase.js'
+import './load-more.js'
+import './tiles-showcase.js'
diff --git a/src/pages/enquiry-all-states.twig b/src/pages/enquiry-all-states.twig
@@ -152,46 +152,51 @@
         </div>
       </div>
 
-      <div class='d-flex flex-column gap-5 mb-5' role='region' aria-live='polite'>
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'coordinating'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'requested'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'denied'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'partially-provided'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'ready'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'reviewing'
-          }
-        %}
-      </div>
-
-      <div class='d-flex justify-content-center'>
-        {%
-          include 'partials::base/b_link.twig' with {
-          text: 'Mehr Datenanfragen anzeigen',
-          icon: 'plus-lg'
-          }
-        %}
+      <div load-more-section>
+        <div
+          class='d-flex flex-column gap-5 mb-5'
+          role='region'
+          aria-live='polite'
+          load-more-area
+          data-per-page='5'
+          data-page='0'
+        >
+          {% for i in 0..5 %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'coordinating'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'requested'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'denied'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'partially-provided'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'ready'
+              }
+            %}
+          {% endfor %}
+        </div>
+        <div class='d-flex justify-content-center'>
+          {%
+            include 'partials::base/b_link.twig' with {
+            text: 'Mehr Datenanfragen anzeigen',
+            icon: 'plus-lg'
+            }
+          %}
+        </div>
       </div>
     </div>
   </section>

diff --git a/src/pages/enquiry-validated.twig b/src/pages/enquiry-validated.twig
@@ -160,41 +160,51 @@
         </div>
       </div>
 
-      <div class='d-flex flex-column gap-5 mb-5' role='region' aria-live='polite'>
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'coordinating'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'requested'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'denied'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'partially-provided'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'ready'
-          }
-        %}
-      </div>
-
-      <div class='d-flex justify-content-center'>
-        {%
-          include 'partials::base/b_link.twig' with {
-          text: 'Mehr Datenanfragen anzeigen',
-          icon: 'plus-lg'
-          }
-        %}
+      <div load-more-section>
+        <div
+          class='d-flex flex-column gap-5 mb-5'
+          role='region'
+          aria-live='polite'
+          load-more-area
+          data-per-page='5'
+          data-page='0'
+        >
+          {% for i in 0..5 %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'coordinating'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'requested'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'denied'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'partially-provided'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'ready'
+              }
+            %}
+          {% endfor %}
+        </div>
+        <div class='d-flex justify-content-center'>
+          {%
+            include 'partials::base/b_link.twig' with {
+            text: 'Mehr Datenanfragen anzeigen',
+            icon: 'plus-lg'
+            }
+          %}
+        </div>
       </div>
     </div>
   </section>

diff --git a/src/pages/enquiry.twig b/src/pages/enquiry.twig
@@ -152,42 +152,52 @@
         </div>
       </div>
 
-      <div class='d-flex flex-column gap-5 mb-5' role='region' aria-live='polite'>
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'coordinating'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'coordinating'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'coordinating'
-          }
-        %}
-
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'requested'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'coordinating'
-          }
-        %}
-      </div>
+      <div load-more-section>
+        <div
+          class='d-flex flex-column gap-5 mb-5'
+          role='region'
+          aria-live='polite'
+          load-more-area
+          data-per-page='5'
+          data-page='0'
+        >
+          {% for i in 0..5 %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'coordinating',
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'coordinating'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'coordinating'
+              }
+            %}
 
-      <div class='d-flex justify-content-center'>
-        {%
-          include 'partials::base/b_link.twig' with {
-          text: 'Mehr Datenanfragen anzeigen',
-          icon: 'plus-lg'
-          }
-        %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'requested'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'coordinating'
+              }
+            %}
+          {% endfor %}
+        </div>
+        <div class='d-flex justify-content-center'>
+          {%
+            include 'partials::base/b_link.twig' with {
+            text: 'Mehr Datenanfragen anzeigen',
+            icon: 'plus-lg'
+            }
+          %}
+        </div>
       </div>
     </div>
   </section>