beyond-rails 0.0.281 → 0.0.286

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4fdbef0c60df577d5177297214104a62d44879abf628e92ba2ac9b263e344d22
-  data.tar.gz: 91e93ce0cc411b0721d5172b1813d347ce40268ae0815c404a34cf9c50960026
+  metadata.gz: 9ec3e181da10e04daca80c0dfa0429d270b01c321688f86fc7a2b4d329d56c51
+  data.tar.gz: 8e3e668db1593b11e606335a70bbfbfa328b4e91539ac796355936c5f480bfe5
 SHA512:
-  metadata.gz: aadf392da4fb29588d3871759b48aecaacd6e5250c9e6fcff7ec08f6d19232cb5260461565741a53c55a2397f8c6ae07a0ed7384325c9ddf2dc4066c3e19faea
-  data.tar.gz: e93b2ed5099895a980dcb14466a70a7e985b10cf020b83658130420050845c6c8e99043fc185f030ea060b34fcee4e61ca734b0479e67f47b0da1778d3e329f1
+  metadata.gz: 2105d76b9738d20809c5771e9ceed7526d7fb1c39e237e3301340a82de4607aa6277728ea3072e4b89d08a85cdb6172351c52ed3c6eafab579e03329b437fcc1
+  data.tar.gz: 9268795c6484a78e794a072a19ba382358204da091a43e549743794cfa128f72a9414d938cdb48969d31c71212f173cb69eab4baf757bd327245b50a8b0a0df5

data/src/js/components/Pagination.js

@@ -0,0 +1,273 @@
+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)
+  }
+
+  hideInput() {
+    this.input.parentNode.style.display = 'none'
+  }
+
+  showInput() {
+    this.input.parentNode.style.display = 'flex'
+  }
+
+  drawRegularPages(currentPage = this.page) {
+
+    this.hideInput()
+
+    range(1, this.total + 1)
+      .forEach(page => {
+        const li = this.getLiNode(page)
+        this.insertPageLi(li)
+      })
+    this.setActive(currentPage)
+  }
+
+  drawPagesWithInput(page = this.page) {
+
+    this.clearPages()
+
+    this.showInput()
+
+    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/_modal.scss

@@ -78,6 +78,7 @@
       font-size: 14px;
       font-weight: 400;
     }
+    .btn.btn-danger,
     .btn.btn-primary {
       margin-left: 10px;
     }

data/src/sass/components/_pagination.scss

@@ -1,7 +1,4 @@
-.pagination {
-  display: flex;
-  list-style: none;
-}
+$page-active-color: #3c4258;
 
 %page-link {
   border-radius: 3px;
@@ -14,9 +11,61 @@
   &:disabled {
     cursor: not-allowed;
   }
+  &.js-active,
   &:hover {
-    background-color: #3c4258;
+    background-color: $page-active-color;
+    color: #fff;
+  }
+}
+
+.pagination-wrap {
+  display: flex;
+  .pagination-input {
+    display: none;
+  }
+  > .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.281
+  version: 0.0.286
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-01-27 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