perf: optimize paginator

XPoet · Jul 12, 2024 · e1cb4c2 · e1cb4c2
1 parent 748ed43
commit e1cb4c2
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 46 deletions.
diff --git a/layout/_partial/paginator.ejs b/layout/_partial/paginator.ejs
@@ -1,27 +1,35 @@
 <% if (page.total > 1) { %>
     <div class="paginator border-box flex-center">
-        <div class="btn-wrap<%= page_info.prev ? ' allowed' : '' %>">
-            <a class="jump-btn"
+        <div class="border-box first-page paginator-btn <%= page_info.prev ? 'allowed' : 'not-allow' %>">
+            <a class="border-box"><i class="fa-solid fa-angle-double-left"></i></a>
+        </div>
+
+        <div class="border-box paginator-btn<%= page_info.prev ? ' allowed' : '' %>">
+            <a class="border-box"
                href="<%- url_for(page_info.prev_link) %>"
             ><i class="fa-solid fa-chevron-left"></i></a>
         </div>
 
 
         <div class="page-number-box border-box flex-center">
-            <input class="page-number-input border-box base-color-size"
+            <input class="page-number-input border-box base-style"
                    type="number"
                    value="<%- page.current %>"
                    min="1"
                    max="<%- page.total %>"
-            ><span class="delimiter base-color-size">/</span><span class="base-color-size"><%- page.total %></span>
+            /><span class="delimiter base-style">/</span><span class="base-style"><%- page.total %></span>
         </div>
 
 
-        <div class="btn-wrap<%= page_info.next ? ' allowed' : '' %>">
-            <a class="jump-btn"
+        <div class="border-box paginator-btn<%= page_info.next ? ' allowed' : '' %>">
+            <a class="border-box"
                href="<%- url_for(page_info.next_link) %>"
             ><i class="fa-solid fa-chevron-right"></i></a>
         </div>
+
+        <div class="border-box last-page paginator-btn <%= page_info.next ? 'allowed' : 'not-allow' %>">
+            <a class="border-box"><i class="fa-solid fa-angle-double-right"></i></a>
+        </div>
     </div>
 <% } %>
 

diff --git a/source/css/layout/_partial/paginator.styl b/source/css/layout/_partial/paginator.styl
@@ -1,57 +1,68 @@
 .paginator {
-  margin-top 2rem
-  padding-top 0.2rem
+  gap 1rem
+  margin-top $page-container-gap
   user-select none
 
-  .btn-wrap {
+  .paginator-btn {
     cursor not-allowed
 
+    a {
+      padding 0.3rem 0.6rem
+      pointer-events none
+
+      i {
+        color var(--text-color-4)
+        font-size 1rem
+      }
+    }
+
+
     &.allowed {
       cursor pointer
 
-      a.jump-btn {
+      a {
         pointer-events auto
 
-
         i {
           color var(--text-color-3)
         }
       }
-    }
 
-    a.jump-btn {
-      padding 0.2rem
-      pointer-events none
-
-      i {
-        color var(--text-color-4)
-        font-size 1rem
+      &:hover {
+        a {
+          i {
+            color var(--primary-color)
+          }
+        }
       }
     }
   }
 
 
-
-  .base-color-size {
-    color var(--text-color-3)
-    font-size 1rem
+  .base-style {
+    color var(--text-color-4)
+    font-size 1.1rem
   }
 
+
   .page-number-box {
-    margin 0 1rem
+    margin 0 0.2rem
 
     .page-number-input {
       width 2.8rem
-      height 1.8rem
+      height 2rem
       margin 0
       padding 0
       font-weight 400 !important
+      font-size 1rem
       text-align center
       background none
       border 0.1rem solid var(--border-color)
       border-radius 0.3rem
       outline none
       -webkit-appearance none
+      transition-t("width, border-color", "0, 0", "0.2, 0.2", "ease, ease")
+
 
       &::-webkit-outer-spin-button
       &::-webkit-inner-spin-button {
@@ -60,6 +71,7 @@
 
       &:hover
       &:focus {
+        width 3.8rem
         border-color var(--primary-color)
       }
     }
@@ -73,3 +85,6 @@
 
 
 
+
+
+
diff --git a/source/js/utils.js b/source/js/utils.js
@@ -584,30 +584,58 @@ KEEP.initUtils = () => {
     // page number jump handle
     pageNumberJump() {
       const inputDom = document.querySelector('.paginator .page-number-input')
-      inputDom &&
-        inputDom.addEventListener('change', (e) => {
-          const min = 1
-          const max = Number(e.target.max)
-          let current = Number(e.target.value)
-
-          if (current <= 0) {
-            inputDom.value = min
-            current = min
-          }
 
-          if (current > max) {
-            inputDom.value = max
-            current = max
-          }
+      if (!inputDom) {
+        return
+      }
 
-          const tempHref = window.location.href.replace(/\/$/, '').split('/page/')[0]
+      const firstPageDom = document.querySelector('.paginator .first-page')
+      const lastPageDom = document.querySelector('.paginator .last-page')
 
-          if (current === 1) {
-            window.location.href = tempHref
-          } else {
-            window.location.href = tempHref + '/page/' + current
-          }
-        })
+      const min = Number(inputDom.min)
+      const max = Number(inputDom.max)
+
+      const tempClass = 'not-allow'
+
+      firstPageDom.addEventListener('click', () => {
+        if (!firstPageDom.classList.contains(tempClass)) {
+          inputDom.value = min
+          jump()
+        }
+      })
+
+      lastPageDom.addEventListener('click', () => {
+        if (!lastPageDom.classList.contains(tempClass)) {
+          inputDom.value = max
+          jump()
+        }
+      })
+
+      const jump = () => {
+        let current = Number(inputDom.value)
+
+        if (current <= 0) {
+          inputDom.value = min
+          current = min
+        }
+
+        if (current > max) {
+          inputDom.value = max
+          current = max
+        }
+
+        const tempHref = window.location.href.replace(/\/$/, '').split('/page/')[0]
+
+        if (current === 1) {
+          window.location.href = tempHref
+        } else {
+          window.location.href = tempHref + '/page/' + current
+        }
+      }
+
+      inputDom.addEventListener('change', (e) => {
+        jump()
+      })
     },
 
     // custom tabs tag active handle