beyond-rails 0.0.139

data/src/js/components/Toast.js

@@ -0,0 +1,47 @@
+import supportDom from '../helpers/supportDom'
+import ToastItem from './ToastItem'
+
+@supportDom
+export default class Toast {
+
+  constructor() {
+    this.init()
+  }
+
+  init() {
+    const toast = document.createElement('div')
+    toast.classList.add('toast')
+    document.body.appendChild(toast)
+    this.toast = toast
+    this.items = []
+  }
+
+  send(arg) {
+
+    let options = arg
+
+    if (typeof arg === 'string') {
+      options = { message: arg }
+    }
+
+    const toastItem = new ToastItem(options)
+    this.toast.appendChild(toastItem.dom)
+    this.items.push(toastItem)
+
+    toastItem._showTimer = setTimeout(() => toastItem.show(), 50)
+    toastItem._timer = setTimeout(() => {
+      this.items = this.items.filter(item => item !== toastItem)
+      toastItem.destroy()
+    }, options.duration || 3000)
+
+    return () => {
+      this.items = this.items.filter(item => item !== toastItem)
+      toastItem.destroy()
+    }
+  }
+
+  destroy() {
+    this.items.forEach(item => item.destroy())
+    this.toast.remove()
+  }
+}

data/src/js/components/ToastItem.js

@@ -0,0 +1,62 @@
+import supportDom from '../helpers/supportDom'
+
+@supportDom
+export default class ToastItem {
+
+  constructor(options = {}) {
+    this.options = options
+    this.init()
+  }
+
+  init() {
+
+    const { message, btnText, btnCb } = this.options
+
+    const dom = document.createElement('div')
+    dom.innerHTML = `
+      <div class="toast-item">
+        <div class="toast-message">${message}</div>
+      </div>
+    `
+    dom.className = 'toast-item-box'
+
+    this.dom = dom
+
+    if (btnText) {
+      this.dom.classList.add('has-btn')
+      this.createBtn(btnText)
+    }
+    if (btnText && btnCb) {
+      this.createBtnCb()
+    }
+  }
+
+  show() {
+    this.dom.classList.add('visible')
+  }
+
+  createBtn() {
+    const btn = document.createElement('button')
+    btn.className = 'toast-btn'
+    btn.innerText = this.options.btnText
+    this.dom.querySelector('.toast-item').appendChild(btn)
+    this.btn = btn
+  }
+
+  createBtnCb() {
+    this.addEvent(this.btn, 'click', () => {
+      this.options.btnCb({
+        clear: () => {
+          this.destroy()
+        }
+      })
+    })
+  }
+
+  destroy() {
+    const { dom } = this
+    clearTimeout(dom._showTimer)
+    clearTimeout(dom._timer)
+    dom.remove()
+  }
+}

data/src/js/components/Tooltip.js

@@ -0,0 +1,94 @@
+import getFloatedTargetPos from '../helpers/getFloatedTargetPos'
+import toPixel from '../helpers/toPixel'
+import supportDom from '../helpers/supportDom'
+
+const TOOLTIP_PLACEMENTS = ['top', 'bottom', 'left', 'right']
+
+@supportDom
+export default class Tooltip {
+
+  constructor(dom) {
+    this.dom = dom
+    this.tooltip = document.querySelector('[data-global-tooltip]')
+    this.init()
+  }
+
+  init() {
+    this.appendTooltip()
+    this.addEvents()
+  }
+
+  appendTooltip() {
+    if (this.tooltip) {
+      return
+    }
+    const tooltip = document.createElement('div')
+    tooltip.setAttribute('data-global-tooltip', '')
+    tooltip.classList.add('tooltip')
+    document.body.appendChild(tooltip)
+    this.tooltip = tooltip
+  }
+
+  static remove() {
+    const div = document.querySelector('[data-global-tooltip]')
+    if (div) {
+      div.remove()
+    }
+  }
+
+  getPlace() {
+    const str = this.dom.dataset.place
+    return TOOLTIP_PLACEMENTS.includes(str) ? str : 'bottom'
+  }
+
+  getOffset() {
+    const num = parseInt(this.dom.dataset.offset, 10)
+    return Number.isInteger(num) ? num : 10
+  }
+
+  setTooltipMsg() {
+    const { msg } = this.dom.dataset
+    if (this.tooltip.innerHTML !== msg) {
+      this.tooltip.innerHTML = msg
+    }
+  }
+
+  hide() {
+    const { tooltip } = this
+    if (tooltip) {
+      tooltip.style.opacity = 0
+      tooltip.style.display = 'none'
+    }
+  }
+
+  addEvents() {
+    const { dom, tooltip } = this
+    if ('onmouseover' in dom) {
+      this.addEvent(dom, 'mouseover', () => {
+        this.setTooltipMsg()
+
+        tooltip.style.opacity = 0
+        tooltip.style.display = 'block'
+
+        const { pos } = getFloatedTargetPos({
+          src: dom,
+          target: tooltip,
+          place: this.getPlace(),
+          offset: this.getOffset()
+        })
+        tooltip.style.left = toPixel(pos.left)
+        tooltip.style.top = toPixel(pos.top)
+        tooltip.style.opacity = 1
+      })
+    }
+    if ('onmouseleave' in dom) {
+      const handleMouseLeave = () => this.hide()
+      this.addEvent(dom, 'click', handleMouseLeave)
+      this.addEvent(dom, 'mouseleave', handleMouseLeave)
+    }
+  }
+
+  destroy() {
+    this.hide()
+  }
+}

data/src/js/consts/createdComponents.js

@@ -0,0 +1 @@
+export default []

data/src/js/consts/index.js

@@ -0,0 +1,5 @@
+import locale from 'date-fns/locale/zh-TW'
+
+export const DEFAULT_TIMEZONE = 'Asia/Taipei'
+
+export const DEFAULT_LOCALE = locale

data/src/js/helpers/bind.js

@@ -0,0 +1,53 @@
+import Alert from '../components/Alert'
+import Checkbox from '../components/Checkbox'
+import Dropdown from '../components/Dropdown'
+import Menu from '../components/Menu'
+import Navbar from '../components/Navbar'
+import Radio from '../components/Radio'
+import Sidebar from '../components/Sidebar'
+import Tabbox from '../components/Tabbox'
+import Tooltip from '../components/Tooltip'
+
+const $ = selector => Array.from(document.querySelectorAll(selector))
+
+const defaultOptions = {
+  selectors: {
+    alert: '[data-alert]',
+    checkbox: 'input[type="checkbox"]',
+    dropdown: '[data-dropdown]',
+    menu: '[data-menu-toggle]',
+    navbar: '[data-navbar]',
+    radio: 'input[type="radio"]',
+    sidebar: '[data-sidebar-opener]',
+    tabbox: '[data-tabbox]',
+    tooltip: '[data-tooltip]'
+  }
+}
+
+export default function bind(opts = {}) {
+
+  const options = Object.assign({}, defaultOptions, opts)
+  const { selectors } = options
+
+  const alerts = $(selectors.alert).map(dom => new Alert(dom))
+  const checkboxes = $(selectors.checkbox).map(dom => new Checkbox(dom))
+  const dropdowns = $(selectors.dropdown).map(dom => new Dropdown(dom))
+  const menus = $(selectors.menu).map(dom => new Menu(dom))
+  const navbars = $(selectors.navbar).map(dom => new Navbar(dom))
+  const radios = $(selectors.radio).map(dom => new Radio(dom))
+  const sidebars = $(selectors.sidebar).map(dom => new Sidebar(dom))
+  const tabboxes = $(selectors.tabbox).map(dom => new Tabbox(dom))
+  const tooltips = $(selectors.tooltip).map(dom => new Tooltip(dom))
+
+  return function unbind() {
+    alerts.forEach(alert => alert.destroy())
+    checkboxes.forEach(checkbox => checkbox.destroy())
+    dropdowns.forEach(dropdown => dropdown.destroy())
+    menus.forEach(menu => menu.destroy())
+    navbars.forEach(navbar => navbar.destroy())
+    radios.forEach(radio => radio.destroy())
+    sidebars.forEach(sidebar => sidebar.destroy())
+    tabboxes.forEach(tabbox => tabbox.destroy())
+    tooltips.forEach(tooltip => tooltip.destroy())
+  }
+}

data/src/js/helpers/dateEq.js

@@ -0,0 +1,5 @@
+import compareAsc from 'date-fns/compareAsc'
+
+export default function dateEq(date1, date2) {
+  return compareAsc(date1, date2) === 0
+}

data/src/js/helpers/dateGt.js

@@ -0,0 +1,5 @@
+import compareAsc from 'date-fns/compareAsc'
+
+export default function dateLt(date1, date2) {
+  return compareAsc(date1, date2) === 1
+}

data/src/js/helpers/dateLt.js

@@ -0,0 +1,5 @@
+import compareAsc from 'date-fns/compareAsc'
+
+export default function dateLt(date1, date2) {
+  return compareAsc(date1, date2) === -1
+}

data/src/js/helpers/docReady.js

@@ -0,0 +1,10 @@
+export default function docReady() {
+  return new Promise(resolve => {
+    const { readyState } = document
+    if (['complete', 'interactive'].includes(readyState)) {
+      setTimeout(resolve, 1)
+      return
+    }
+    document.addEventListener('DOMContentLoaded', resolve)
+  })
+}

data/src/js/helpers/getFloatedTargetPos.js

@@ -0,0 +1,250 @@
+import getDomPos from '@superlanding/getdompos'
+import getScrollTop from '@superlanding/getscrolltop'
+import getScrollLeft from '@superlanding/getscrollleft'
+
+// Calculate floated target position for tooltip and dropdown
+export default function getFloatedTargetPos(options) {
+
+  const { src, target, place, align, offset = 0, offsetLeft, offsetTop } = options
+
+  const { x: x1, y: y1 } = getDomPos(src)
+
+  const w1 = src.offsetWidth
+  const h1 = src.offsetHeight
+
+  const w2 = target.offsetWidth
+  const h2 = target.offsetHeight
+
+  let pos = getPos({ x1, y1, w1, h1, w2, h2, place, align, offset })
+  let posWithOffsets = addExtraOffsets({ pos, offsetLeft, offsetTop })
+
+  // auto detect the best placement and alignment
+  const detectedPlace = detectPlace({ pos: posWithOffsets, place, w2, h2 })
+  const detectedAlign = detectAlign({ pos: posWithOffsets, place, align, w2, h2 })
+
+  const placeDifferent = (place !== detectedPlace)
+  const alignDifferent = (align !== detectedAlign)
+
+  if (placeDifferent || alignDifferent) {
+    pos = getPos({
+      x1, y1, w1, h1, w2, h2,
+      place: detectedPlace, align: detectedAlign, offset
+    })
+
+    let adjustedOffsetLeft = offsetLeft
+    let adjustedOffsetTop = offsetTop
+
+    if (placeDifferent && ['left', 'right'].includes(detectedPlace)) {
+      adjustedOffsetLeft = -adjustedOffsetLeft
+    }
+    if (placeDifferent && ['top', 'bottom'].includes(detectedPlace)) {
+      adjustedOffsetTop = -adjustedOffsetTop
+    }
+
+    posWithOffsets = addExtraOffsets({
+      pos,
+      offsetLeft: adjustedOffsetLeft,
+      offsetTop: adjustedOffsetTop
+    })
+  }
+
+  const posWithSafeBoundary = adjustToBoundary({
+    pos: posWithOffsets,
+    w1, h1, w2, h2,
+    place, align
+  })
+  return {
+    pos: posWithSafeBoundary,
+    place: detectedPlace,
+    align: detectedAlign
+  }
+}
+
+function getTouchedData({ pos, w2, h2 }) {
+  const { left, top } = pos
+  const scrollTop = getScrollTop()
+  const scrollBottom = scrollTop + window.innerHeight
+  const scrollLeft = getScrollLeft()
+  const scrollRight = scrollLeft + window.innerWidth
+  const touchedTop = (top < scrollTop)
+  const touchedBottom = ((top + h2) > scrollBottom)
+  const touchedLeft = (left < scrollLeft)
+  const touchedRight = ((left + w2) > scrollRight)
+  return { touchedTop, touchedBottom, touchedLeft, touchedRight }
+}
+
+function detectPlace({ pos, place, w2, h2 }) {
+
+  const { touchedTop, touchedBottom,
+    touchedLeft, touchedRight } = getTouchedData({ pos, w2, h2 })
+
+  if ((place === 'top') && touchedTop) {
+    return 'bottom'
+  }
+  if ((place === 'bottom') && touchedBottom) {
+    return 'top'
+  }
+  if ((place === 'left') && touchedLeft) {
+    return 'right'
+  }
+  if ((place === 'right') && touchedRight) {
+    return 'left'
+  }
+  return place
+}
+
+function detectAlign({ pos, place, align, w2, h2 }) {
+  const isVertical = ['top', 'bottom'].includes(place)
+  const isHorizontal = ['left', 'right'].includes(place)
+  const { touchedTop, touchedBottom,
+    touchedLeft, touchedRight } = getTouchedData({ pos, w2, h2 })
+
+  if (isVertical && touchedLeft) {
+    return 'left'
+  }
+  if (isVertical && touchedRight) {
+    return 'right'
+  }
+  if (isHorizontal && touchedTop) {
+    return 'top'
+  }
+  if (isHorizontal && touchedBottom) {
+    return 'bottom'
+  }
+  return align
+}
+
+function getPos(options) {
+
+  const { place, align = 'center' } = options
+
+  switch (`${place}_${align}`) {
+    case 'top_left':
+      return getTopLeftPos(options)
+    case 'top_right':
+      return getTopRightPos(options)
+    case 'top_center':
+      return getTopCenterPos(options)
+    case 'bottom_left':
+      return getBottomLeftPos(options)
+    case 'bottom_right':
+      return getBottomRightPos(options)
+    case 'bottom_center':
+      return getBottomCenterPos(options)
+    case 'left_top':
+      return getLeftTopPos(options)
+    case 'left_bottom':
+      return getLeftBottomPos(options)
+    case 'left_center':
+      return getLeftCenterPos(options)
+    case 'right_top':
+      return getRightTopPos(options)
+    case 'right_bottom':
+      return getRightBottomPos(options)
+    case 'right_center':
+      return getRightCenterPos(options)
+    default:
+      throw new Error(`Unsupported placement and alignment: ${place} ${align}`)
+  }
+}
+
+function getTopLeftPos({ x1, y1, h2, offset }) {
+  const top = y1 - offset - h2
+  const left = x1
+  return { left, top }
+}
+
+function getTopRightPos({ x1, y1, w1, w2, h2, offset }) {
+  const top = y1 - offset - h2
+  const left = x1 - (w2 - w1)
+  return { left, top }
+}
+
+function getTopCenterPos({ x1, y1, w1, w2, h2, offset }) {
+  const top = y1 - offset - h2
+  const left = x1 + (w1 / 2) - (w2 / 2)
+  return { left, top }
+}
+
+function getBottomLeftPos({ x1, y1, h1, offset }) {
+  const top = y1 + h1 + offset
+  const left = x1
+  return { left, top }
+}
+
+function getBottomRightPos({ x1, y1, w1, h1, w2, offset }) {
+  const top = y1 + h1 + offset
+  const left = x1 - (w2 - w1)
+  return { left, top }
+}
+
+function getBottomCenterPos({ x1, y1, w1, h1, w2, offset }) {
+  const top = y1 + h1 + offset
+  const left = x1 + (w1 / 2) - (w2 / 2)
+  return { left, top }
+}
+
+function getLeftTopPos({ x1, y1, w2, offset }) {
+  const left = x1 - offset - w2
+  const top = y1
+  return { left, top }
+}
+
+function getLeftBottomPos({ x1, y1, h1, w2, h2, offset }) {
+  const left = x1 - offset - w2
+  const top = y1 - (h2 - h1)
+  return { left, top }
+}
+
+function getLeftCenterPos({ x1, y1, h1, w2, h2, offset }) {
+  const left = x1 - offset - w2
+  const top = y1 + (h1 / 2) - (h2 / 2)
+  return { left, top }
+}
+
+function getRightTopPos({ x1, y1, w1, offset }) {
+  const left = x1 + w1 + offset
+  const top = y1
+  return { left, top }
+}
+
+function getRightBottomPos({ x1, y1, w1, h1, h2, offset }) {
+  const left = x1 + w1 + offset
+  const top = y1 - (h2 - h1)
+  return { left, top }
+}
+
+function getRightCenterPos({ x1, y1, w1, h1, h2, offset }) {
+  const left = x1 + w1 + offset
+  const top = y1 + (h1 / 2) - (h2 / 2)
+  return { left, top }
+}
+
+function adjustToBoundary({ pos, w1, w2, h1, h2 }) {
+
+  const { touchedTop, touchedBottom,
+    touchedLeft, touchedRight } = getTouchedData({ pos, w2, h2 })
+
+  let left = pos.left
+  let top = pos.top
+  if (touchedLeft) {
+    left = 0
+  }
+  if (touchedRight) {
+    left = window.innerWidth - w2 + w1;
+  }
+  if (touchedTop) {
+    top = 0
+  }
+  if (touchedBottom) {
+    top = window.innerHeight - h2 + h1
+  }
+  return { top, left }
+}
+
+function addExtraOffsets({ pos, offsetLeft = 0, offsetTop = 0 }) {
+  return {
+    left: pos.left + offsetLeft,
+    top: pos.top + offsetTop
+  }
+}