beyond-rails 0.0.284 → 0.0.285

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 63ba182611ef8ef26ad8589924f920756257dffa44cec1b672f49aae74f00a72
-  data.tar.gz: bff2df6564e4937dc29c5a52227a8bf4f8c961e9c3733fcaa1d1fbb3c6a504b1
+  metadata.gz: 99b44239e1951ebd60eb5f8b80a1609e93172b5fead61ccf423a2df51e782e49
+  data.tar.gz: 20114de4f99d04f58660e3eabaac8a3d3adcfb42040dfa2715c36593da0c19bd
 SHA512:
-  metadata.gz: 880db176153aaf81da3896873b71b8ed4c05e3b2e29f2b6f41f322b95677ff637c344e62c9114c07d34de76466f3f75da646930d8541cdc55502383486f16a2c
-  data.tar.gz: 48178537bbff03a5daad5e3a2225234066df79fb0f459c229a9f70ec8693ceca9d99bae1375ce7fa08986ff3401869b22013e9c08340d240799563643bddba6f
+  metadata.gz: c07afe4d926ff5303e0a9cb197a207df07cbaf331802dc44eb68b35d38a01205f9d34e2a01b6df9d1ff8c57158a55bc05babaa2bf08ce57eb2e066c13db9837c
+  data.tar.gz: 2cf313ed7cdd8a38be5414d89e36ab502831bf95c8869deea2dd69fe4404aa805f7b7a4d230792421afe940fea9ad5fc6492106a62f722e25c3d9f1a6b83e656

data/src/js/components/Pagination.js

@@ -0,0 +1,261 @@
+import supportDom from '../decorators/supportDom'
+import { range, noop, toInt } from '../utils'
+import { $, $$ } from '../utils/dom'
+
+const ACTIVE_CLASSNAME = 'js-active'
+const DOTS = '⸱⸱⸱'
+
+@supportDom
+export default class Pagination {
+
+  constructor(config) {
+
+    this.dom = config.dom
+    this.page = config.page || 1
+    this.total = config.total || 0
+    this.maxVisiblePage = config.maxVisiblePage || 7
+    this.currentPageNode = null
+    this.change = config.change || noop
+
+    this.init()
+    this.addEvents()
+  }
+
+  init() {
+    const { dom } = this
+    this.ul = $('[data-pagination]', dom)
+    this.prevBtn = $('[data-prev]', dom)
+    this.nextBtn = $('[data-next]', dom)
+    this.input = $('[data-page-input]', dom)
+    this.drawPages()
+  }
+
+  clearPages() {
+    const { ul } = this
+    $$('[data-page-item]', ul)
+      .concat($$('[data-page-dots]', ul))
+      .map(item => item.parentNode)
+      .forEach(item => item.remove())
+  }
+
+  getLiNode(pageOrDots) {
+
+    const li = document.createElement('li')
+    li.className = 'page-item'
+    const anchor = document.createElement('a')
+    anchor.className = 'page-link'
+
+    if (pageOrDots === DOTS) {
+      anchor.setAttribute('data-page-dots', '')
+      anchor.textContent = DOTS
+    }
+    else {
+      const page = pageOrDots
+      anchor.setAttribute('data-page-item', page)
+      anchor.textContent = page
+    }
+
+    li.appendChild(anchor)
+    return li
+  }
+
+  setActive(page) {
+
+    const { currentPageNode } = this
+
+    if (currentPageNode) {
+      currentPageNode.classList.remove(ACTIVE_CLASSNAME)
+    }
+
+    const anchor = $(`[data-page-item="${page}"]`)
+
+    if (! anchor) {
+      return
+    }
+    anchor.classList.add(ACTIVE_CLASSNAME)
+    this.currentPageNode = anchor
+    this.page = page
+  }
+
+  insertPageLi(li) {
+    this.ul.insertBefore(li, this.nextBtn.parentNode)
+  }
+
+  drawRegularPages(currentPage = this.page) {
+
+    range(1, this.total + 1)
+      .forEach(page => {
+        const li = this.getLiNode(page)
+        this.insertPageLi(li)
+      })
+    this.setActive(currentPage)
+  }
+
+  drawPagesWithInput(page = this.page) {
+
+    this.clearPages()
+
+    const { total } = this
+    const beforeLast = total - 1
+
+    const isFirst = (page === 1)
+    const isSecond = (page === 2)
+    const isBeforeLast = (page === beforeLast)
+    const isLast = (page === total)
+
+    // Consider the five cases below:
+    // [1] 2  ...  9  10
+    //  1 [2]  3  ... 10
+    //  1 ... [5] ... 10
+    //  1 ...  8  [9] 10
+    //  1  2  ...  9 [10]
+    const firstLi = this.getLiNode(1)
+    this.insertPageLi(firstLi)
+
+    const secondText = ((page <= 3) || isLast) ? 2 : DOTS
+    const secondLi = this.getLiNode(secondText)
+    this.insertPageLi(secondLi)
+
+    const thirdText = (function(p) {
+      if (isFirst || isLast) {
+        return DOTS
+      }
+      if (isSecond) {
+        return 3
+      }
+      if (isBeforeLast) {
+        return beforeLast - 1
+      }
+      return p
+    })(page)
+
+    const thirdLi = this.getLiNode(thirdText)
+    this.insertPageLi(thirdLi)
+
+    const fourthText = (function(p) {
+      if (isFirst || isBeforeLast || isLast) {
+        return beforeLast
+      }
+      if (p === (beforeLast - 1)) {
+        return beforeLast
+      }
+      return DOTS
+    })(page)
+
+    const fourthLi = this.getLiNode(fourthText)
+    this.insertPageLi(fourthLi)
+
+    const lastLi = this.getLiNode(total)
+    this.insertPageLi(lastLi)
+
+    this.setActive(page)
+  }
+
+  isInputView() {
+    const { total } = this
+    return ((total > this.maxVisiblePage) && (total > 5))
+  }
+
+  drawPages() {
+
+    this.clearPages()
+
+    if (this.isInputView()) {
+      this.drawPagesWithInput()
+    }
+    else {
+      this.drawRegularPages()
+    }
+  }
+
+  isPrevBtn(target) {
+    return ('prev' in target.dataset)
+  }
+
+  isNextBtn(target) {
+    return ('next' in target.dataset)
+  }
+
+  isPageBtn(target) {
+    return ('pageItem' in target.dataset)
+  }
+
+  isDotBtn(target) {
+    return ('pageDots' in target.dataset)
+  }
+
+  handlePageClick(target) {
+    const page = toInt(target.dataset.pageItem)
+    if (page === this.page) {
+      return
+    }
+    this.setActive(page)
+    this.change(page)
+  }
+
+  handleDotBtnClick() {
+    this.input.focus()
+  }
+
+  setActiveAndChangeInputViewIfNeeded(page) {
+    if (this.isInputView()) {
+      return this.drawPagesWithInput(page)
+    }
+    this.setActive(page)
+  }
+
+  isValidPage(page) {
+    return (! isNaN(page)) && (page >= 1) && (page <= this.total)
+  }
+
+  setInputDanger() {
+    this.input.classList.add('is-invalid')
+  }
+
+  setInputNormal() {
+    this.input.classList.remove('is-invalid')
+  }
+
+  addEvents() {
+    this.addEvent(this.ul, 'click', event => {
+
+      let { target } = event
+      if (target.tagName === 'I') {
+        target = target.parentNode
+      }
+
+      const { page } = this
+
+      if (this.isNextBtn(target) && (page < this.total)) {
+        const nextPage = page + 1
+        this.setActiveAndChangeInputViewIfNeeded(nextPage)
+        this.change(nextPage)
+      }
+      else if (this.isPageBtn(target)) {
+        this.handlePageClick(target)
+      }
+      else if (this.isPrevBtn(target) && (page > 1)) {
+        const prevPage = page - 1
+        this.setActiveAndChangeInputViewIfNeeded(prevPage)
+        this.change(prevPage)
+      }
+      else if (this.isDotBtn(target)) {
+        this.handleDotBtnClick()
+      }
+    })
+
+    this.addEvent(this.input, 'change', event => {
+      const page = toInt(event.target.value)
+
+      if (! this.isValidPage(page)) {
+        return this.setInputDanger()
+      }
+      this.setInputNormal()
+      this.setActiveAndChangeInputViewIfNeeded(page)
+    })
+  }
+
+  destroy() {
+    this.clearPages()
+  }
+}

data/src/js/index.js

@@ -19,6 +19,7 @@ import MonthMenu from './components/MonthMenu'
 import Menu from './components/Menu'
 import Modal from './components/Modal'
 import Navbar from './components/Navbar'
+import Pagination from './components/Pagination'
 import PieChart from './components/PieChart'
 import Radio from './components/Radio'
 import SearchDropdown from './components/SearchDropdown'
@@ -58,6 +59,7 @@ export {
   Menu,
   Modal,
   Navbar,
+  Pagination,
   PieChart,
   Radio,
   SearchDropdown,

data/src/js/utils/index.js

@@ -1,9 +1,11 @@
 // @superlanding
 import dateToTimestamp from '@superlanding/datetotimestamp'
+import extend from '@superlanding/extend'
 import getDomPos from '@superlanding/getdompos'
 import getScrollLeft from '@superlanding/getscrollleft'
 import getScrollTop from '@superlanding/getscrolltop'
 import timestampToDate from '@superlanding/timestamptodate'
+import toInt from '@superlanding/toint'
 import toPixel from '@superlanding/topixel'
 
 // date-fns
@@ -47,10 +49,12 @@ import mem from 'mem'
 export {
   // @superlanding
   dateToTimestamp,
+  extend,
   getDomPos,
   getScrollLeft,
   getScrollTop,
   timestampToDate,
+  toInt,
   toPixel,
 
   // date-fns

data/src/sass/components/_pagination.scss

@@ -1,8 +1,4 @@
-.pagination {
-  display: flex;
-  list-style: none;
-  flex-wrap: wrap;
-}
+$page-active-color: #3c4258;
 
 %page-link {
   border-radius: 3px;
@@ -15,9 +11,58 @@
   &:disabled {
     cursor: not-allowed;
   }
+  &.js-active,
   &:hover {
-    background-color: #3c4258;
+    background-color: $page-active-color;
+    color: #fff;
+  }
+}
+
+.pagination-wrap {
+  display: flex;
+  > .input-group {
+    width: initial;
+  }
+  > .input,
+  > .input-group > .input {
+    width: 7em;
+    &.is-invalid:focus {
+      box-shadow: 0 0 0 1px #cd3d64;
+      color: #cd3d64;
+    }
+  }
+  .input-group-append > .input-group-text {
+    background-color: $page-active-color;
     color: #fff;
+    height: 100%;
+  }
+  @media (max-width: $screen-sm) {
+    display: block;
+    > .input-group {
+      margin-top: 1em;
+    }
+    > .pagination {
+      justify-content: space-between;
+    }
+  }
+}
+
+.pagination {
+  display: flex;
+  list-style: none;
+  flex-wrap: wrap;
+  @media (max-width: $screen-sm) {
+    .page-link {
+      margin-left: 3px;
+      margin-right: 3px;
+    }
+    .page-link,
+    .page-link-btn {
+      padding: .2em .5em;
+      i {
+        font-size: 12px;
+      }
+    }
   }
 }
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: beyond-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.284
+  version: 0.0.285
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-03-09 00:00:00.000000000 Z
+date: 2021-03-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc
@@ -143,6 +143,7 @@ files:
 - src/js/components/MonthMenu.js
 - src/js/components/Monthpicker.js
 - src/js/components/Navbar.js
+- src/js/components/Pagination.js
 - src/js/components/PieChart.js
 - src/js/components/Radio.js
 - src/js/components/SearchDropdown.js