beyond-rails 0.0.139

data/src/js/components/Sidebar.js

@@ -0,0 +1,56 @@
+import supportDom from '../helpers/supportDom'
+
+@supportDom
+export default class Sidebar {
+
+  constructor(dom) {
+    this.btn = dom
+    this.sidebar = document.querySelector(`[data-sidebar="${dom.dataset.sidebarOpener}"]`)
+    this.isVisible = false
+    this.init()
+  }
+
+  init() {
+    this.addBackdrop()
+    this.addEvents()
+  }
+
+  addBackdrop() {
+    if (this.backdrop) {
+      return
+    }
+    const backdrop = document.createElement('div')
+    backdrop.className = 'backdrop'
+    document.body.appendChild(backdrop)
+    this.backdrop = backdrop
+  }
+
+  showBackdrop() {
+    this.backdrop.classList.add('opened')
+  }
+
+  hideBackdrop() {
+    this.backdrop.classList.remove('opened')
+  }
+
+  show() {
+    this.showBackdrop()
+    this.sidebar.classList.add('opened')
+    this.isVisible = true
+  }
+
+  hide() {
+    this.hideBackdrop()
+    this.sidebar.classList.remove('opened')
+    this.isVisible = false
+  }
+
+  addEvents() {
+    this.addEvent(this.btn, 'click', () => this.show())
+    this.addEvent(this.backdrop, 'click', () => this.hide())
+  }
+
+  destroy() {
+    this.backdrop.remove()
+  }
+}

data/src/js/components/Tabbox.js

@@ -0,0 +1,229 @@
+import noop from 'lodash.noop'
+import supportDom from '../helpers/supportDom'
+import Dropdown from './Dropdown'
+
+@supportDom
+export default class Tabbox {
+
+  constructor(dom, options = {}) {
+    this.currentNode = null
+    this.optionEl = null
+    this.dom = dom
+    this.options = options
+    this.options.change = options.change || noop
+    this.options.click = options.click || noop
+    this.init()
+  }
+
+  init() {
+    const { dom } = this
+    this.btns = Array.from(dom.querySelectorAll('button[data-tabbox-item]'))
+    this.dropdownBtns = Array.from(dom.querySelectorAll('button[data-tabbox-dropdown]'))
+    this.addEvents()
+    this.appendSlider()
+  }
+
+  adjustSlider() {
+    const [firstBtn] = this.btns
+    if (! firstBtn) {
+      return
+    }
+    const { slider } = this
+    slider.style.top = (firstBtn.offsetHeight - slider.offsetHeight) + 'px'
+    slider.style.left = firstBtn.offsetLeft + 'px'
+  }
+
+  moveTo(name) {
+    const target = this.dom.querySelector(`[data-tabbox-item=${name}]`)
+    if (target) {
+      this.removeCurrentClass()
+      this.currentNode = target
+      this.moveToCurrentNode()
+      this.addCurrentClass()
+    }
+  }
+
+  eachDropdownOption(fn) {
+    let index = 0
+    for (const d of this.dropdownInstances) {
+      const options = Array.from(d.menu.querySelectorAll('[data-tabbox-item]'))
+      for (const optionEl of options) {
+        const going = fn({
+          dropdownBtn: this.dropdownBtns[index],
+          dropdownInstance: d,
+          optionEl
+        })
+        if (going === false) {
+          return
+        }
+      }
+      ++index
+    }
+  }
+
+  getDefaultDropdownData() {
+
+    let res = {}
+
+    this.eachDropdownOption(({ dropdownBtn, dropdownInstance, optionEl }) => {
+      if ('default' in optionEl.dataset) {
+        res = {
+          defaultDropdownBtn: dropdownBtn,
+          defaultDropdownInstance: dropdownInstance,
+          defaultOptionEl: optionEl
+        }
+        return false
+      }
+    })
+    return res
+  }
+
+  appendSlider() {
+    this.slider = document.createElement('div')
+    this.slider.classList.add('js-slider')
+    this.dom.appendChild(this.slider)
+    const defaultBtn = this.btns.find(btn => 'default' in btn.dataset)
+
+    this.adjustSlider()
+
+    if (defaultBtn) {
+      this.currentNode = defaultBtn || defaultSelectBox
+      this.moveToCurrentNode()
+      this.addCurrentClass()
+    }
+
+    const { defaultDropdownBtn, defaultDropdownInstance,
+      defaultOptionEl } = this.getDefaultDropdownData()
+
+    if (defaultDropdownBtn) {
+      this.currentNode = defaultDropdownBtn
+      this.optionEl = defaultOptionEl
+      this.moveToCurrentNode()
+      this.addCurrentClass()
+      defaultDropdownInstance.setText(this.optionEl.textContent)
+    }
+  }
+
+  setSliderColor(color) {
+    this.slider.style.backgroundColor = color
+  }
+
+  moveToCurrentNode() {
+    const node = this.currentNode
+    if (! node) {
+      return
+    }
+    if ('tabboxDropdown' in node.dataset) {
+      return this.moveSlider({
+        top: node.offsetTop,
+        left: node.offsetLeft,
+        width: node.offsetWidth,
+        color: this.optionEl.dataset.activeColor
+      })
+    }
+    this.moveSlider({
+      top: node.offsetTop,
+      left: node.offsetLeft,
+      width: node.offsetWidth,
+      color: node.dataset.activeColor
+    })
+  }
+
+  moveSlider({ top, left, width, color = '#858585' }) {
+    this.slider.style.transform = `translate(${left}px, ${top}px)`
+    this.slider.style.width = width + 'px'
+    this.slider.style.backgroundColor = color
+  }
+
+  removeCurrentClass() {
+    if (this.currentNode) {
+      this.currentNode.classList.remove('js-current')
+    }
+  }
+
+  addCurrentClass() {
+    if (this.currentNode) {
+      this.currentNode.classList.add('js-current')
+    }
+  }
+
+  setStatus(status) {
+    const btn = this.btns.find(btn => btn.dataset.tabboxItem === status)
+    if (btn) {
+      this.removeCurrentClass()
+      this.currentNode = btn
+      this.moveToCurrentNode()
+      this.addCurrentClass()
+      this.options.change({ id: status, type: 'btn' })
+      return
+    }
+
+    let dropdownMatched = false
+    this.eachDropdownOption(({ dropdownBtn, dropdownInstance, optionEl }) => {
+      if (status === optionEl.dataset.tabboxItem) {
+        this.setDropdown({ dropdownBtn, dropdownInstance, optionEl })
+        this.options.change({ id: status, type: 'dropdown' })
+        dropdownMatched = true
+        return false
+      }
+    })
+
+    if (! dropdownMatched) {
+      throw new Error(`Cannot find status: ${status}`)
+    }
+  }
+
+  setDropdown({ dropdownBtn, dropdownInstance, optionEl }) {
+    this.currentNode = dropdownBtn
+    this.optionEl = optionEl
+    this.moveToCurrentNode()
+
+    this.dropdownInstances.filter(d => d !== dropdownInstance)
+      .forEach(d => d.restoreText())
+    dropdownInstance.setText(this.optionEl.textContent)
+  }
+
+  addEvents() {
+    this.dropdownInstances = this.dropdownBtns.map(el => {
+      const dropdownInstance = new Dropdown(el, {
+        menuClick: event => {
+          const id = event.target.dataset.tabboxItem
+          this.options.click({ id, type: 'dropdown' })
+
+          if (this.optionEl === event.target) {
+            return
+          }
+          this.setDropdown({
+            dropdownBtn: el,
+            optionEl: event.target,
+            dropdownInstance
+          })
+          this.options.change({ id, type: 'dropdown' })
+        }
+      })
+      return dropdownInstance
+    })
+
+    this.btns.forEach(btn => {
+      this.addEvent(btn, 'click', () => {
+        const id = btn.dataset.tabboxItem
+        this.options.click({ id, type: 'btn' })
+        if (btn !== this.currentNode) {
+          this.dropdownInstances.forEach(d => d.restoreText())
+          this.removeCurrentClass()
+          this.currentNode = btn
+          this.optionEl = null
+          this.moveToCurrentNode()
+          this.addCurrentClass()
+          this.options.change({ id, type: 'btn' })
+        }
+      })
+    })
+  }
+
+  destroy() {
+    this.currentNode = null
+    this.dropdownInstances.forEach(d => d.destroy())
+    this.slider.parentNode.removeChild(this.slider)
+  }
+}

data/src/js/components/TimeInput.js

@@ -0,0 +1,71 @@
+import { format } from 'date-fns-tz'
+import { DEFAULT_TIMEZONE } from '../consts'
+import supportDom from '../helpers/supportDom'
+import isTouchDevice from '../helpers/isTouchDevice'
+
+@supportDom
+export default class TimeInput {
+
+  constructor(dom, date, options = {}) {
+    this.active = false
+    this.danger = false
+    this.dom = dom
+    this.date = date
+    this.options = options
+    this.tz = options.tz || DEFAULT_TIMEZONE
+    this.timePattern = options.timePattern || 'HH:mm'
+
+    this.init()
+  }
+
+  init() {
+    this.initInput()
+    this.addEvents()
+  }
+
+  initInput() {
+    const { dom } = this
+    if (this.date) {
+      dom.value = this.format(this.date)
+    }
+    if (! dom.hasAttribute('placeholder')) {
+      dom.setAttribute('placeholder', this.timePattern.toUpperCase())
+    }
+    if (isTouchDevice()) {
+      dom.setAttribute('readonly', 'readonly')
+    }
+  }
+
+  format(date) {
+    return format(date, this.timePattern, { timezone: this.tz })
+  }
+
+  setDate(date) {
+    this.date = date
+    this.dom.value = date ? this.format(date) : ''
+  }
+
+  setActive(active) {
+    this.active = active
+    const func = active ? 'add' : 'remove'
+    this.dom.classList[func]('active')
+  }
+
+  setDanger(danger) {
+    this.danger = danger
+    const func = danger ? 'add' : 'remove'
+    this.dom.classList[func]('danger')
+  }
+
+  clearStatus() {
+    this.setActive(false)
+    this.setDanger(false)
+  }
+
+  addEvents() {
+    const { dom } = this
+    this.addEvent(dom, 'focus', event => this.fire('focus', event))
+    this.addEvent(dom, 'keyup', event => this.fire('keyup', event))
+    this.addEvent(dom, 'blur', event => this.fire('blur', event))
+  }
+}

data/src/js/components/TimeMenu.js

@@ -0,0 +1,117 @@
+import getHours from 'date-fns/getHours'
+import getMinutes from 'date-fns/getMinutes'
+import getFloatedTargetPos from '../helpers/getFloatedTargetPos'
+import toPixel from '../helpers/toPixel'
+import range from 'lodash.range'
+import supportDom from '../helpers/supportDom'
+
+@supportDom
+export default class TimeMenu {
+
+  constructor() {
+    this.date = null
+    this.isVisible = false
+    this.init()
+  }
+
+  init() {
+    this.addMenu()
+    this.addEvents()
+  }
+
+  getMenuItems(step) {
+    const dayMins = 24 * 60
+    return range(0, dayMins, step)
+      .reduce((arr, mins) => {
+        const hour = parseInt(mins / 60, 10)
+        const min = mins % 60
+        arr.push({ hour, min })
+        return arr
+      }, [])
+      .map(({ hour, min }) => {
+        return `<div class="time-menu-item"
+          data-hour="${hour}"
+          data-minute="${min}">${hour}:${min.toString().padStart(2, '0')}</div>`
+      })
+      .join('')
+  }
+
+  addMenu() {
+    const dom = document.createElement('div')
+    dom.className = 'time-menu'
+    document.body.appendChild(dom)
+    this.dom = dom
+  }
+
+  addEvents() {
+    this.addEvent(this.dom, 'click', event => {
+      const { dataset } = event.target
+      if ('hour' in dataset) {
+        const res = {
+          hour: parseInt(dataset.hour, 10),
+          minute: parseInt(dataset.minute, 10)
+        }
+        this.fire('click', event, res)
+      }
+    })
+  }
+
+  pos(src) {
+    const { dom } = this
+    const { pos } = getFloatedTargetPos({
+      src,
+      target: dom,
+      place: 'bottom',
+      align: 'right',
+      offset: 4
+    })
+    dom.style.left = toPixel(pos.left)
+    dom.style.top = toPixel(pos.top)
+  }
+
+  setActiveNode(node, active) {
+    if (active) {
+      return node.classList.add('active')
+    }
+    node.classList.remove('active')
+  }
+
+  updateItems(date) {
+    const hour = getHours(date).toString()
+    const minute = getMinutes(date).toString()
+    Array.from(this.dom.childNodes)
+      .forEach(node => {
+        const { hour: datasetHour, minute: datasetMinute } = node.dataset
+        const hourEqualed = (datasetHour === hour)
+        const minuteEqualed = (datasetMinute === minute)
+
+        if (hourEqualed && (datasetMinute === '0')) {
+          this.dom.scrollTop = node.offsetTop
+        }
+        const active = (hourEqualed && minuteEqualed)
+        this.setActiveNode(node, active)
+      })
+  }
+
+  show({ src, date, step = 30 }) {
+    const { dom } = this
+    dom.innerHTML = this.getMenuItems(step)
+    dom.style.opacity = 0
+    dom.style.display = 'block'
+    this.pos(src)
+    this.updateItems(date)
+    dom.style.opacity = 1
+    this.isVisible = true
+  }
+
+  hide() {
+    this.dom.style.left = '-100%'
+    this.dom.style.bottom = '-100%'
+    this.dom.style.display = 'none'
+    this.isVisible = false
+  }
+
+  destroy() {
+    this.dom.remove()
+  }
+}