change Slider to ES6 class

src/ui/Slider.js

@@ -4,19 +4,20 @@ var EventManager = require('../lib/eventManager')
 var yo = require('yo-yo')
 var ui = require('../helpers/ui')
 
-function Slider (_traceManager) {
+class Slider {
-  this.event = new EventManager()
+  constructor (_traceManager) {
-  this.traceManager = _traceManager
+    this.event = new EventManager()
-  this.max
+    this.traceManager = _traceManager
-  this.disabled = true
+    this.max
-  this.view
+    this.disabled = true
+    this.view
 
-  this.previousValue = null
+    this.previousValue = null
-}
+  }
 
-Slider.prototype.render = function () {
+  render () {
-  var self = this
+    var self = this
-  var view = yo`<div>
+    var view = yo`<div>
         <input
           id='slider'
           style=${ui.formatCss(style.rule)}
@@ -28,43 +29,52 @@ Slider.prototype.render = function () {
           oninput=${function () { self.onChange() }}
           disabled=${this.disabled} />
       </div>`
-  if (!this.view) {
+    if (!this.view) {
-    this.view = view
+      this.view = view
+    }
+    return view
   }
-  return view
-}
 
-Slider.prototype.init = function (length) {
+  init (length) {
-  var slider = document.getElementById('slider')
+    var slider = document.getElementById('slider')
-  slider.setAttribute('max', length - 1)
+    slider.setAttribute('max', length - 1)
-  this.max = length - 1
+    this.max = length - 1
-  this.updateDisabled(length === 0)
+    this.updateDisabled(length === 0)
-  this.disabled = length === 0
+    this.disabled = length === 0
-  this.setValue(0)
+    this.setValue(0)
-}
+  }
 
-Slider.prototype.onChange = function (event) {
+  onChange (event) {
-  var value = parseInt(document.getElementById('slider').value)
+    var value = parseInt(document.getElementById('slider').value)
-  if (value === this.previousValue) return
+    if (value === this.previousValue) return
-  this.previousValue = value
+    this.previousValue = value
-  this.event.trigger('moved', [value])
+    this.event.trigger('moved', [value])
-}
+  }
 
-Slider.prototype.setValue = function (value) {
+  setValue (value) {
-  var slider = document.getElementById('slider')
+    var slider = document.getElementById('slider')
-  var diff = value - slider.value
+    var diff = value - slider.value
-  if (diff > 0) {
+    if (diff > 0) {
-    slider.stepUp(diff)
+      slider.stepUp(diff)
-  } else {
+    } else {
-    slider.stepDown(Math.abs(diff))
+      slider.stepDown(Math.abs(diff))
+    }
+  }
+
+  updateDisabled (disabled) {
+    if (disabled) {
+      document.getElementById('slider').setAttribute('disabled', true)
+    } else {
+      document.getElementById('slider').removeAttribute('disabled')
+    }
+  }
+
+  show () {
+    this.view.style.display = 'block'
   }
-}
 
-Slider.prototype.updateDisabled = function (disabled) {
+  hide () {
-  if (disabled) {
+    this.view.style.display = 'none'
-    document.getElementById('slider').setAttribute('disabled', true)
-  } else {
-    document.getElementById('slider').removeAttribute('disabled')
   }
 }