beyond-rails 0.0.284 → 0.0.289

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 63ba182611ef8ef26ad8589924f920756257dffa44cec1b672f49aae74f00a72
-  data.tar.gz: bff2df6564e4937dc29c5a52227a8bf4f8c961e9c3733fcaa1d1fbb3c6a504b1
+  metadata.gz: cb9e9304222537428cb1d6283b208229d204a489a21df5669c3ea32a05c0ef98
+  data.tar.gz: d6a261de41c3f7c9b45b1a4baefe600aa14adcd4d7c413c549459716a01612c4
 SHA512:
-  metadata.gz: 880db176153aaf81da3896873b71b8ed4c05e3b2e29f2b6f41f322b95677ff637c344e62c9114c07d34de76466f3f75da646930d8541cdc55502383486f16a2c
-  data.tar.gz: 48178537bbff03a5daad5e3a2225234066df79fb0f459c229a9f70ec8693ceca9d99bae1375ce7fa08986ff3401869b22013e9c08340d240799563643bddba6f
+  metadata.gz: a0b4edc27d4b0d0e1087d96669cee5d9569f74b7b81503e6d9ca9e4fb33258d33c36d72aebcda0f9ad798e9eeae8283ef0e911595569005f2cb2d3cde2f804a6
+  data.tar.gz: 627f5715183a66d2b2401aada77f5521075498092ecb23e36b805d88a055a706b7fab0d977a3095adb62f561ae493e74f24517e8d46518a0cce3bc2ab9450384

data/src/js/components/Pagination.js

@@ -0,0 +1,282 @@
+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()
+      }
+      if (page === this.page) {
+        return
+      }
+      this.setInputNormal()
+      this.setActiveAndChangeInputViewIfNeeded(page)
+      this.change(page)
+    })
+  }
+
+  setTotal(total) {
+    this.total = total
+    this.drawPages()
+  }
+
+  destroy() {
+    this.clearPages()
+  }
+}

data/src/js/components/SearchDropdown.js

@@ -185,7 +185,7 @@ export default class SearchDropdown {
     const { renderItem } = this.options
 
     const menuItems = items.map((item, i) => {
-      return renderItem(item, i, (selectedIndex === i))
+      return renderItem(item, i, (selectedIndex === i), items)
     })
 
     if (this.noDataMsgVisible) {

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,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;
+      }
+    }
   }
 }
 

data/src/sass/components/_radio.scss

@@ -38,6 +38,14 @@ label.radio {
     }
   }
   .icon-radio {
+
+    // prevent overriden by icomoon
+    font-family: inherit !important;
+    line-height: initial !important;
+    &:before {
+      content: ''
+    }
+
     transform: translateY(-1px);
     background-color: #fff;
     border: 0;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: beyond-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.284
+  version: 0.0.289
 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-06-08 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