Add time picker to material design framework

Author: xnerhu

3-panel/src/imports/materialdesign/components/TextField/index.js

@@ -140,15 +140,16 @@ export default class TextField extends Component {
   /**
    * Toggles on input.
    * @param {Boolean}
+   * @param {Boolean} focus
    */
-  toggle (flag) {
+  toggle (flag, focus = true) {
     const root = this.getRoot()
     const input = this.getInput()
 
     root.classList.remove((flag) ? 'disabled' : 'enabled')
     root.classList.add((flag) ? 'enabled' : 'disabled')
 
-    if (flag) input.focus()
+    if (flag && focus) input.focus()
     this.toggled = flag
   }
 
@@ -178,8 +179,9 @@ export default class TextField extends Component {
   /**
    * Sets input value.
    * @param {String} value
+   * @param {Boolean} focus
    */
-  setValue (str) {
+  setValue (str, focus) {
     if (this.props.textarea === true) {
       this.elements.textarea.value = str
     } else {
@@ -189,7 +191,7 @@ export default class TextField extends Component {
     this.onInput()
 
     if (str.length >= 1 && !this.toggled) {
-      this.toggle(true)
+      this.toggle(true, focus)
     } else if (str.length < 1 && this.toggled) {
       this.toggle(false)
     }

3-panel/src/imports/materialdesign/components/TimePicker/components/HoursClock/index.js

@@ -0,0 +1,63 @@
+import Component from '../../../../../../helpers/Component'
+
+import Tick from '../Tick'
+
+export default class HoursClock extends Component {
+  beforeRender () {
+    this.ticks = []
+    this.selectedTick = null
+
+    this.isMouseDown = false
+  }
+
+  /**
+   * Gets root.
+   * @return {DOMElement} root
+   */
+  getRoot () {
+    return this.elements.root
+  }
+
+  /**
+   * Sets ticks around clock.
+   */
+  setTicks () {
+    const timePicker = this.props.getTimePicker()
+    const ticksContainer = this.elements.ticksContainer
+
+    const positions = timePicker.calculateTickPosition()
+
+    for (var i = 0; i < positions.length; i++) {
+      let number = i + 3
+      if (number > 12) number -= 12
+
+      const tick = (
+        <Tick left={positions[i].x} top={positions[i].y} number={number} getClock={() => { return this }} getTimePicker={() => { return this.props.getTimePicker() }} />
+      )
+
+      this.renderComponents(tick, ticksContainer)
+    }
+  }
+
+  /**
+   * Gets line rotate value.
+   * @param {Int} minutes
+   * @return {Int} rotate
+   */
+  getRotate (number) {
+    return number * 30 + 180
+  }
+
+  render () {
+    return (
+      <div className='hours-clock' ref='root'>
+        <div className='line' ref='line' />
+        <div className='ticks-container' ref='ticksContainer' />
+      </div>
+    )
+  }
+
+  afterRender () {
+    this.setTicks()
+  }
+}

3-panel/src/imports/materialdesign/components/TimePicker/components/MinutesClock/index.js

@@ -0,0 +1,71 @@
+import Component from '../../../../../../helpers/Component'
+
+import Tick from '../Tick'
+
+export default class MinutesClock extends Component {
+  beforeRender () {
+    this.ticks = []
+    this.selectedTick = null
+
+    this.isMouseDown = false
+  }
+
+  /**
+   * Gets root.
+   * @return {DOMElement} root
+   */
+  getRoot () {
+    return this.elements.root
+  }
+
+  /**
+   * Sets ticks around clock.
+   * Yes. I know it. There is only five minutes. I'll fix this later.
+   */
+  setTicks () {
+    const timePicker = this.props.getTimePicker()
+    const ticksContainer = this.elements.ticksContainer
+
+    const positions = timePicker.calculateTickPosition()
+
+    let minutes = 10
+
+    for (var i = 0; i < positions.length; i++) {
+      minutes += 5
+      if (minutes >= 60) minutes -= 60
+      const _minutes = (minutes < 10) ? ('0' + minutes) : minutes
+
+      const tick = (
+        <Tick left={positions[i].x} top={positions[i].y} number={_minutes} getClock={() => { return this }} getTimePicker={() => { return this.props.getTimePicker() }} />
+      )
+
+      this.renderComponents(tick, ticksContainer)
+    }
+
+    setTimeout(function () {
+      timePicker.updateHour()
+    }, 10)
+  }
+
+  /**
+   * Gets line rotate value.
+   * @param {Int} minutes
+   * @return {Int} rotate
+   */
+  getRotate (number) {
+    return number * 6 + 180
+  }
+
+  render () {
+    return (
+      <div className='minutes-clock' ref='root'>
+        <div className='line' ref='line' />
+        <div className='ticks-container' ref='ticksContainer' />
+      </div>
+    )
+  }
+
+  afterRender () {
+    this.setTicks()
+  }
+}

3-panel/src/imports/materialdesign/components/TimePicker/components/Tick/index.js

@@ -0,0 +1,70 @@
+import Component from '../../../../../../helpers/Component'
+
+export default class Tick extends Component {
+  beforeRender () {
+    this.toggled = false
+  }
+
+  /**
+   * Gets root.
+   * @return {DOMElement} root
+   */
+  getRoot () {
+    return this.elements.root
+  }
+
+  /**
+   * On mouse down.
+   * Enables ticks selecting.
+   * @param {Event}
+   */
+  onMouseDown = (e) => {
+    const timePicker = this.props.getTimePicker()
+
+    timePicker.enableSelecting()
+    if (!this.isSelected()) timePicker.selectTick(this)
+  }
+
+  /**
+   * On mouse enter.
+   * Selects touched tick.
+   * @param {Event}
+   */
+  onMouseEnter = (e) => {
+    const clock = this.props.getClock()
+    const timePicker = this.props.getTimePicker()
+
+    if (clock.isMouseDown && !this.isSelected()) timePicker.selectTick(this)
+  }
+
+  isSelected () {
+    return (this.props.getClock().selectedTick === this)
+  }
+
+  render () {
+    return (
+      <div className='tick' ref='root' onMouseDown={this.onMouseDown} onMouseEnter={this.onMouseEnter}>
+        <div className='number' ref='number' />
+      </div>
+    )
+  }
+
+  afterRender () {
+    const props = this.props
+    const root = this.getRoot()
+
+    const clock = props.getClock()
+
+    root.style.top = props.top + 'px'
+    root.style.left = props.left + 'px'
+
+    this.elements.number.innerHTML = props.number
+
+    clock.ticks.push(this)
+
+    if (props.number === 6 || props.number === 30) {
+      root.classList.add('selected')
+      clock.selectedTick = this
+    }
+  }
+}