beyond-rails 0.0.185 → 0.0.190

data/src/js/components/Menu.js

@@ -1,4 +1,4 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 
 @supportDom
 export default class Menu {

data/src/js/components/Modal.js

@@ -1,6 +1,8 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import { noop } from '../utils'
 
+let globalModalId = 0
+
 @supportDom
 export default class Modal {
 
@@ -15,19 +17,41 @@ export default class Modal {
   }
 
   init() {
-    this.modalId = this.dom.dataset.modalOpener
-    const selector = `[data-modal="${this.modalId}"]`
-    this.modal = document.querySelector(selector)
-    if (! this.modal) {
-      throw new Error(`${selector} is not defined.`)
-    }
+    this.bindEvents()
+  }
+
+  bindEvents() {
+    this.setModalDom()
     this.closeBtn = this.modal.querySelector('[data-close]')
     this.cancelBtn = this.modal.querySelector('[data-cancel]')
     this.confirmBtn = this.modal.querySelector('[data-confirm]')
     this.addEvents()
   }
 
-  show() {
+  setModalDom() {
+    const { modalOpener, modal } = this.dom.dataset
+
+    if (modalOpener) {
+      this.modalId = this.dom.dataset.modalOpener
+      const selector = `[data-modal="${this.modalId}"]`
+      this.modal = document.querySelector(selector)
+      return
+    }
+
+    if (modal) {
+      this.modalId = modal
+    }
+    else {
+      this.modalId = `modal-${++globalModalId}`
+      this.dom.dataset.modal = this.modalId
+    }
+    this.modal = this.dom
+  }
+
+  show(html) {
+    if (html) {
+      this.replace(html)
+    }
     this.isVisible = true
     this.modal.style.display = 'block'
     setTimeout(() => {
@@ -43,20 +67,47 @@ export default class Modal {
     }, 300)
   }
 
+  replace(html) {
+    this.destroy()
+    this.modalId = null
+
+    // replace with new dom
+    const div = document.createElement('div')
+    div.innerHTML = html.trim()
+    const dom = div.firstChild
+    this.dom.parentNode.replaceChild(dom, this.dom)
+
+    this.dom = dom
+    this.dom._modal = this
+    this.init()
+  }
+
+  visible() {
+    return this.isVisible
+  }
+
+  addEventIfDomExists(dom, event, cb) {
+    if (dom) {
+      this.addEvent(dom, event, cb)
+    }
+  }
+
   addEvents() {
-    this.addEvent(this.dom, 'click', () => this.show())
+    if (this.dom.dataset.modalOpener) {
+      this.addEventIfDomExists(this.dom, 'click', () => this.show())
+    }
 
-    this.addEvent(this.closeBtn, 'click', () => {
+    this.addEventIfDomExists(this.closeBtn, 'click', () => {
       this.hide()
       this.options.cancel('close')
     })
 
-    this.addEvent(this.cancelBtn, 'click', () => {
+    this.addEventIfDomExists(this.cancelBtn, 'click', () => {
       this.hide()
       this.options.cancel('cancel')
     })
 
-    this.addEvent(this.modal, 'click', event => {
+    this.addEventIfDomExists(this.modal, 'click', event => {
       // is backdrop
       if (event.target.dataset.modal === this.modalId) {
         this.hide()
@@ -64,7 +115,7 @@ export default class Modal {
       }
     })
 
-    this.addEvent(this.confirmBtn, 'click', () => {
+    this.addEventIfDomExists(this.confirmBtn, 'click', () => {
       if (typeof this.options.confirm === 'function') {
         this.options.confirm()
       }

data/src/js/components/Navbar.js

@@ -1,4 +1,4 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 
 @supportDom
 export default class Navbar {

data/src/js/components/Radio.js

@@ -1,4 +1,4 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 
 @supportDom
 export default class Radio {

data/src/js/components/SearchDropdown.js

@@ -1,5 +1,5 @@
 import getFloatedTargetPos from '../utils/getFloatedTargetPos'
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import getKey from '../utils/getKey'
 import { debounce, noop, toPixel, throttle } from '../utils'
 

data/src/js/components/Sidebar.js

@@ -1,4 +1,4 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 
 @supportDom
 export default class Sidebar {

data/src/js/components/Tabbox.js

@@ -1,4 +1,4 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import Dropdown from './Dropdown'
 import { noop } from '../utils'
 

data/src/js/components/TimeInput.js

@@ -1,5 +1,5 @@
 import { DEFAULT_TIMEZONE } from '../consts'
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import isTouchDevice from '../utils/isTouchDevice'
 import { format } from '../utils'
 

data/src/js/components/TimeMenu.js

@@ -1,5 +1,5 @@
 import getFloatedTargetPos from '../utils/getFloatedTargetPos'
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import { getHours, getMinutes, range, toPixel } from '../utils'
 
 @supportDom

data/src/js/components/Timepicker.js

@@ -1,7 +1,7 @@
 import TimeInput from './TimeInput'
 import TimeMenu from './TimeMenu'
 import { DEFAULT_TIMEZONE } from '../consts'
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import {
   dateToTimestamp,
   noop,

data/src/js/components/Toast.js

@@ -1,4 +1,4 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import ToastItem from './ToastItem'
 
 @supportDom

data/src/js/components/ToastItem.js

@@ -1,4 +1,4 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 
 @supportDom
 export default class ToastItem {

data/src/js/components/Tooltip.js

@@ -1,5 +1,5 @@
 import getFloatedTargetPos from '../utils/getFloatedTargetPos'
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import { toPixel } from '../utils'
 
 const TOOLTIP_PLACEMENTS = ['top', 'bottom', 'left', 'right']

data/src/js/decorators/chartCommon.js

@@ -0,0 +1,218 @@
+import isDef from '../utils/isDef'
+import isUndef from '../utils/isUndef'
+import { getDomPos, range, toPixel, isFunction } from '../utils'
+
+export default function chartCommon(target) {
+
+  return class extends target {
+
+    init() {
+      this.layers = []
+      if (isFunction(super.init)) {
+        super.init()
+      }
+    }
+
+    get firstLayer() {
+      return this.layers[0]
+    }
+
+    addLayer() {
+      const { dom } = this
+      const canvas = document.createElement('canvas')
+      canvas.style.position = 'absolute'
+      canvas.style.top = 0
+      canvas.style.left = 0
+      canvas.style.right = 0
+      canvas.style.bottom = 0
+      const ctx = canvas.getContext('2d')
+
+      this.setCanvasSize(canvas)
+      this.layers.push({ canvas, ctx })
+
+      dom.style.position = 'relative'
+      dom.appendChild(canvas)
+    }
+
+    bindMedia() {
+      if (this.media) {
+        return
+      }
+      this.media = window.matchMedia(`(resolution: ${this.dpr}dppx)`)
+      this._handleDprChange = this.handleDprChange.bind(this)
+      this.media.addListener(this._handleDprChange)
+    }
+
+    clear() {
+      const { ctx } = this
+      ctx.fillStyle = this.bgColor
+      ctx.fillRect(0, 0, this.width, this.height)
+    }
+
+    fillCircle(ctx, x, y, radius, style, alpha) {
+      ctx.save()
+      ctx.beginPath()
+      ctx.arc(x, y, radius, 0, 2 * Math.PI)
+      ctx.fillStyle = style
+      ctx.globalAlpha = alpha || 1
+      ctx.fill()
+      ctx.closePath()
+      ctx.restore()
+    }
+
+    getAutoStep(firstValue, lastValue, pointsLength) {
+      return (lastValue - firstValue) / (pointsLength - 1)
+    }
+
+    getHighestCanvas() {
+      const { layers, canvas } = this
+      if (layers.length === 0) {
+        return canvas
+      }
+      return layers[layers.length - 1].canvas
+    }
+
+    // real position in window including scrolling distance
+    getMousePos(canvasMousePos) {
+      const domPos = getDomPos(this.dom)
+      return {
+        x: domPos.x + canvasMousePos.x,
+        y: domPos.y + canvasMousePos.y
+      }
+    }
+
+    getMousePosInCanvas(event) {
+      const rect = this.canvas.getBoundingClientRect()
+      return {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top
+      }
+    }
+
+    getLengthTotalData(gap, gutter, values, measureLength, toLabel) {
+
+      const valueCount = values.length
+      const marked = {}
+
+      // mark the first and last
+      marked[0] = true
+      marked[valueCount - 1] = true
+
+      // Check whether a value can be marked next
+      // For example, gap is 2
+      //
+      // values: 1 2 3 4 5 6 7
+      // marked: v           v
+      //
+      // 4 will only be marked because it has enough gap on left and right side.
+      const hasGap = index => {
+        return range(index - gap, index).every(i => isUndef(marked[i])) &&
+          range(index + 1, index + gap + 1).every(i => isUndef(marked[i]))
+      }
+
+      return values.reduce((res, value, i) => {
+
+        if (i === 0) {
+          const label = toLabel(value)
+          const length = measureLength(label)
+          const lengthTotal = res.lengthTotal + length + gutter
+          const rows = res.rows.slice()
+          rows.push({ label, length, value })
+          return { lengthTotal, rows }
+        }
+        if (i === (valueCount - 1)) {
+          const label = toLabel(value)
+          const length = measureLength(label)
+          const lengthTotal = res.lengthTotal + length
+          const rows = res.rows.slice()
+          rows.push({ label, length, value })
+          return { lengthTotal, rows }
+        }
+        if (hasGap(i)) {
+          const label = toLabel(value)
+          marked[i] = true
+          const length = measureLength(label)
+          const lengthTotal = res.lengthTotal + length + gutter
+          const rows = res.rows.slice()
+          rows.push({ label, length, value })
+          return { lengthTotal, rows }
+        }
+        return res
+      }, {
+        lengthTotal: 0,
+        rows: []
+      })
+    }
+
+    getStepStartEnd(step, firstValue, lastValue) {
+
+      const stepStart = parseInt(firstValue / step, 10) * step
+      let stepEnd = parseInt(lastValue / step, 10) * step
+
+      if (stepEnd < lastValue) {
+        stepEnd += step
+      }
+      return [stepStart, stepEnd]
+    }
+
+    raf(fn) {
+      if (isDef(window.requestAnimationFrame)) {
+        return window.requestAnimationFrame(fn)
+      }
+      return fn()
+    }
+
+    removeAllLayers() {
+      const { dom } = this
+      this.layers.forEach(layer => {
+        const { canvas } = layer
+        if (dom.contains(canvas)) {
+          dom.removeChild(canvas)
+        }
+      })
+    }
+
+    setCanvas() {
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+
+      this.canvas = canvas
+      this.ctx = ctx
+      this.setCanvasFontSize(this.canvas, this.fontSize)
+      this.setCanvasSize(canvas)
+
+      this.dom.appendChild(canvas)
+    }
+
+    setCanvasFontSize(canvas, fontSize) {
+      const ctx = canvas.getContext('2d')
+      const args = ctx.font.split(' ')
+      ctx.font = fontSize + 'px ' + args[args.length - 1]
+    }
+
+    setCanvasSize(canvas) {
+      const { dpr, width, height } = this
+
+      // https://coderwall.com/p/vmkk6a/how-to-make-the-canvas-not-look-like-crap-on-retina
+      canvas.width = width * dpr
+      canvas.height = height * dpr
+      canvas.style.width = toPixel(width)
+      canvas.style.height = toPixel(height)
+      canvas.getContext('2d').scale(dpr, dpr)
+    }
+
+    setDomWidthIfNeeded() {
+      if (isUndef(this.options.width)) {
+        this.width = this.dom.offsetWidth
+      }
+    }
+
+    setDpr() {
+      this.dpr = window.devicePixelRatio || 1
+    }
+
+    unbindMedia() {
+      this.media.removeListener(this._handleDprChange)
+    }
+  }
+}

data/src/js/{utils → decorators}/supportDom.js

@@ -1,4 +1,4 @@
-import { isFunction } from './index'
+import { isFunction } from '../utils'
 import createdComponents from '../consts/createdComponents'
 
 export default function supportDom(target) {

data/src/js/index.js

@@ -6,19 +6,21 @@ import './polyfills/nodeRemove'
 import './polyfills/elementDataset'
 import Alert from './components/Alert'
 import Autocomplete from './components/Autocomplete'
+import BarChart from './components/BarChart'
 import Btn from './components/Btn'
 import Checkbox from './components/Checkbox'
 import DateTimeRanger from './components/DateTimeRanger'
 import Datepicker from './components/Datepicker'
 import Dropdown from './components/Dropdown'
+import LineChart from './components/LineChart'
 import Menu from './components/Menu'
 import Modal from './components/Modal'
 import Navbar from './components/Navbar'
 import Radio from './components/Radio'
 import SearchDropdown from './components/SearchDropdown'
 import Sidebar from './components/Sidebar'
-import Timepicker from './components/Timepicker'
 import Tabbox from './components/Tabbox'
+import Timepicker from './components/Timepicker'
 import Toast from './components/Toast'
 import Tooltip from './components/Tooltip'
 import bind from './utils/bind'
@@ -28,19 +30,21 @@ import unbindAll from './utils/unbindAll'
 export {
   Alert,
   Autocomplete,
+  BarChart,
   Btn,
   Checkbox,
   DateTimeRanger,
   Datepicker,
   Dropdown,
+  LineChart,
   Menu,
   Modal,
   Navbar,
   Radio,
   SearchDropdown,
   Sidebar,
-  Timepicker,
   Tabbox,
+  Timepicker,
   Toast,
   Tooltip,
   bind,