hakumi_components 0.1.3.pre

data/app/javascript/hakumi_components/controllers/hakumi/pagination_controller.js

@@ -0,0 +1,406 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+  static targets = ["prev", "next", "page", "jumpPrev", "jumpNext", "sizeChanger", "quickJumper", "simpleInput"]
+  static values = {
+    current: { type: Number, default: 1 },
+    pageSize: { type: Number, default: 10 },
+    total: { type: Number, default: 0 },
+    disabled: { type: Boolean, default: false },
+    simple: { type: Boolean, default: false },
+    href: { type: String, default: "" },
+    pageParam: { type: String, default: "page" },
+    perPageParam: { type: String, default: "per_page" },
+    turboFrame: { type: String, default: "" },
+    turboAction: { type: String, default: "" },
+    preserveParams: { type: String, default: "" }
+  }
+
+  setup() {
+    this.#setupSizeChangerListener()
+  }
+
+  teardown() {
+    this.#removeSizeChangerListener()
+  }
+
+  registerApi() {
+    this.element.hakumiComponent = {
+      name: "pagination",
+      version: 1,
+      singleton: false,
+      api: {
+        getCurrent: () => this.currentValue,
+        setCurrent: (page) => this.goTo(page),
+        goTo: (page) => this.goTo(page),
+        getPageSize: () => this.pageSizeValue,
+        setPageSize: (size) => this.changeSize(size),
+        getTotal: () => this.totalValue,
+        setTotal: (total) => this.setTotal(total),
+        getTotalPages: () => this.totalPages,
+        next: () => this.next(),
+        prev: () => this.prev(),
+        jumpNext: () => this.jumpNext(),
+        jumpPrev: () => this.jumpPrev(),
+        refresh: () => this.refresh()
+      }
+    }
+  }
+
+  setTotal(total) {
+    this.totalValue = total
+    this.#updateUI(true)
+  }
+
+  refresh() {
+    this.#updateUI(true)
+  }
+
+  get totalPages() {
+    return Math.ceil(this.totalValue / this.pageSizeValue)
+  }
+
+  #setupSizeChangerListener() {
+    if (!this.hasSizeChangerTarget) return
+
+    this.boundOnSizeChange = this.#onSizeChange.bind(this)
+    this.sizeChangerTarget.addEventListener("hakumi--select:change", this.boundOnSizeChange)
+  }
+
+  #removeSizeChangerListener() {
+    if (!this.hasSizeChangerTarget || !this.boundOnSizeChange) return
+
+    this.sizeChangerTarget.removeEventListener("hakumi--select:change", this.boundOnSizeChange)
+  }
+
+  #onSizeChange(event) {
+
+    if (!this.sizeChangerTarget.contains(event.target)) return
+
+    const { value } = event.detail
+    const newSize = parseInt(value, 10)
+    if (newSize && newSize !== this.pageSizeValue) {
+      this.changeSize(newSize)
+    }
+  }
+
+  prev() {
+    if (this.disabledValue || this.currentValue <= 1) return
+    this.goTo(this.currentValue - 1)
+  }
+
+  next() {
+    if (this.disabledValue || this.currentValue >= this.totalPages) return
+    this.goTo(this.currentValue + 1)
+  }
+
+  jumpPrev() {
+    if (this.disabledValue) return
+    this.goTo(Math.max(1, this.currentValue - 5))
+  }
+
+  jumpNext() {
+    if (this.disabledValue) return
+    this.goTo(Math.min(this.totalPages, this.currentValue + 5))
+  }
+
+  goToPage(event) {
+    if (this.disabledValue) return
+    const page = parseInt(event.currentTarget.dataset.page, 10)
+    if (page && page !== this.currentValue) {
+      this.goTo(page)
+    }
+  }
+
+  jumpToPage(event) {
+    if (this.disabledValue) return
+
+    const input = event.currentTarget
+    const page = parseInt(input.value, 10)
+
+    if (page && page >= 1 && page <= this.totalPages && page !== this.currentValue) {
+      this.goTo(page)
+    }
+
+
+    if (!this.simpleValue) {
+      input.value = ""
+    }
+  }
+
+  goTo(page) {
+    const validPage = Math.max(1, Math.min(page, this.totalPages))
+    if (validPage === this.currentValue) return
+
+    this.currentValue = validPage
+    this.#updateUI()
+    this.#dispatchChange()
+    this.#navigate()
+  }
+
+  changeSize(size) {
+    const oldTotalPages = this.totalPages
+    this.pageSizeValue = size
+    const newTotalPages = this.totalPages
+
+
+    if (this.currentValue > newTotalPages) {
+      this.currentValue = newTotalPages || 1
+    }
+
+
+    this.#updateUI(oldTotalPages !== newTotalPages)
+    this.#dispatchSizeChange()
+    this.#navigate()
+  }
+
+  #updateUI(forceRebuild = false) {
+
+    if (forceRebuild || this.totalPages > 7) {
+      this.#rebuildPageItems()
+    } else {
+
+      this.pageTargets.forEach(page => {
+        const pageNum = parseInt(page.dataset.page, 10)
+        page.classList.toggle("hakumi-pagination-item-active", pageNum === this.currentValue)
+      })
+    }
+
+
+    if (this.hasPrevTarget) {
+      const prevDisabled = this.currentValue <= 1
+      this.prevTarget.classList.toggle("hakumi-pagination-disabled", prevDisabled)
+      const prevBtn = this.prevTarget.querySelector("button")
+      if (prevBtn) prevBtn.disabled = prevDisabled
+    }
+
+    if (this.hasNextTarget) {
+      const nextDisabled = this.currentValue >= this.totalPages
+      this.nextTarget.classList.toggle("hakumi-pagination-disabled", nextDisabled)
+      const nextBtn = this.nextTarget.querySelector("button")
+      if (nextBtn) nextBtn.disabled = nextDisabled
+    }
+
+
+    if (this.hasSimpleInputTarget) {
+      this.simpleInputTarget.value = this.currentValue
+    }
+
+
+    if (this.hasSizeChangerTarget) {
+      const totalPagesEl = this.element.querySelector(".hakumi-pagination-simple-total")
+      if (totalPagesEl) {
+        totalPagesEl.textContent = this.totalPages
+      }
+    }
+  }
+
+  #rebuildPageItems() {
+
+    const prevEl = this.hasPrevTarget ? this.prevTarget : null
+    const nextEl = this.hasNextTarget ? this.nextTarget : null
+    if (!prevEl || !nextEl) return
+
+
+    const toRemove = []
+    let sibling = prevEl.nextElementSibling
+    while (sibling && sibling !== nextEl) {
+      if (sibling.classList.contains("hakumi-pagination-item") ||
+        sibling.classList.contains("hakumi-pagination-jump-prev") ||
+        sibling.classList.contains("hakumi-pagination-jump-next")) {
+        toRemove.push(sibling)
+      }
+      sibling = sibling.nextElementSibling
+    }
+    toRemove.forEach(el => el.remove())
+
+
+    const items = this.#calculatePageItems()
+    const fragment = document.createDocumentFragment()
+
+    items.forEach(item => {
+      if (item.type === "page") {
+        const li = document.createElement("li")
+        li.className = `hakumi-pagination-item hakumi-pagination-item-${item.number}${item.number === this.currentValue ? " hakumi-pagination-item-active" : ""}`
+        li.dataset.page = item.number
+        li.dataset.action = "click->hakumi--pagination#goToPage"
+        li.dataset.antPaginationTarget = "page"
+        li.innerHTML = `<a rel="nofollow">${item.number}</a>`
+        fragment.appendChild(li)
+      } else if (item.type === "jump_prev") {
+        fragment.appendChild(this.#createJumpElement("prev"))
+      } else if (item.type === "jump_next") {
+        fragment.appendChild(this.#createJumpElement("next"))
+      }
+    })
+
+
+    nextEl.parentNode.insertBefore(fragment, nextEl)
+  }
+
+  #createJumpElement(direction) {
+    const li = document.createElement("li")
+    li.className = `hakumi-pagination-jump-${direction} hakumi-pagination-jump-${direction}-custom-icon`
+    li.dataset.action = `click->hakumi--pagination#jump${direction === "prev" ? "Prev" : "Next"}`
+    li.dataset.antPaginationTarget = `jump${direction === "prev" ? "Prev" : "Next"}`
+    li.innerHTML = `
+      <a rel="nofollow" class="hakumi-pagination-item-link">
+        <span class="hakumi-pagination-item-container">
+          <span class="hakumi-pagination-item-link-icon">
+            <span class="hakumi-icon hakumi-icon-double-${direction === "prev" ? "left" : "right"}">
+              <svg viewBox="64 64 896 896" focusable="false" fill="currentColor" width="1em" height="1em">
+                ${direction === "prev"
+        ? '<path d="M272.9 512l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L186.8 492.3a31.99 31.99 0 000 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H532c6.7 0 10.4-7.7 6.3-12.9L272.9 512zm304 0l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L490.8 492.3a31.99 31.99 0 000 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H836c6.7 0 10.4-7.7 6.3-12.9L576.9 512z"></path>'
+        : '<path d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path>'
+      }
+              </svg>
+            </span>
+          </span>
+          <span class="hakumi-pagination-item-ellipsis">
+            <span class="hakumi-icon hakumi-icon-ellipsis">
+              <svg viewBox="64 64 896 896" focusable="false" fill="currentColor" width="1em" height="1em">
+                <path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path>
+              </svg>
+            </span>
+          </span>
+        </span>
+      </a>
+    `
+    return li
+  }
+
+  #calculatePageItems() {
+    const items = []
+    const total = this.totalPages
+    const current = this.currentValue
+
+
+    items.push({ type: "page", number: 1 })
+
+    if (total <= 7) {
+
+      for (let n = 2; n <= total; n++) {
+        items.push({ type: "page", number: n })
+      }
+    } else {
+
+      if (current <= 4) {
+
+        for (let n = 2; n <= 5; n++) {
+          items.push({ type: "page", number: n })
+        }
+        items.push({ type: "jump_next" })
+        items.push({ type: "page", number: total })
+      } else if (current >= total - 3) {
+
+        items.push({ type: "jump_prev" })
+        for (let n = total - 4; n <= total; n++) {
+          items.push({ type: "page", number: n })
+        }
+      } else {
+
+        items.push({ type: "jump_prev" })
+        for (let n = current - 1; n <= current + 1; n++) {
+          items.push({ type: "page", number: n })
+        }
+        items.push({ type: "jump_next" })
+        items.push({ type: "page", number: total })
+      }
+    }
+
+    return items
+  }
+
+  #dispatchChange() {
+    this.dispatch("change", {
+      detail: {
+        current: this.currentValue,
+        pageSize: this.pageSizeValue,
+        total: this.totalValue
+      }
+    })
+  }
+
+  #dispatchSizeChange() {
+    this.dispatch("sizeChange", {
+      detail: {
+        current: this.currentValue,
+        pageSize: this.pageSizeValue,
+        total: this.totalValue
+      }
+    })
+  }
+
+  #navigate() {
+    if (!this.hrefValue) return
+
+    const url = this.#buildUrl()
+
+
+    if (this.turboFrameValue) {
+      const frame = document.getElementById(this.turboFrameValue)
+      if (frame) {
+        frame.src = url
+        return
+      }
+    }
+
+
+    if (this.turboActionValue && window.Turbo) {
+      window.Turbo.visit(url, { action: this.turboActionValue })
+      return
+    }
+
+
+    if (window.Turbo) {
+      window.Turbo.visit(url)
+    } else {
+      window.location.href = url
+    }
+  }
+
+  #buildUrl() {
+    const url = new URL(this.hrefValue, window.location.origin)
+    
+
+    if (this.hasPreserveParamsValue && this.preserveParamsValue) {
+      const paramsToPreserve = this.preserveParamsValue.split(",").map(p => p.trim())
+      const stateEl = this.#findServerStateElement()
+      
+      if (stateEl) {
+        paramsToPreserve.forEach(param => {
+          const dataKey = this.#paramToDataKey(param)
+          const value = stateEl.dataset[dataKey]
+          if (value) {
+            url.searchParams.set(param, value)
+          }
+        })
+      }
+    }
+    
+    url.searchParams.set(this.pageParamValue, this.currentValue)
+    url.searchParams.set(this.perPageParamValue, this.pageSizeValue)
+    return url.toString()
+  }
+
+  #findServerStateElement() {
+
+    const table = this.element.closest("[data-pagination-state]")
+    if (table) return table
+
+
+    let frame = null
+    if (this.hasTurboFrameValue && this.turboFrameValue) {
+      frame = document.getElementById(this.turboFrameValue)
+    }
+    if (!frame) {
+      frame = this.element.closest("turbo-frame")
+    }
+    return frame?.querySelector("[data-pagination-state]")
+  }
+
+  #paramToDataKey(param) {
+
+    return param.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())
+  }
+}