control-panel - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

components/checkbox.js

 var EventEmitter = require('events').EventEmitter
 var inherits = require('inherits')
-var uuid = require('node-uuid')
 
@@ -26,2 +25,6 @@ module.exports = Checkbox
 
+  setTimeout(function () {
+    self.emit('initialized', input.checked)
+  })
+
   input.onchange = function (data) {
@@ -28,0 +31,0 @@ self.emit('input', data.target.checked)

components/color.js

@@ -10,4 +10,4 @@ var EventEmitter = require('events').EventEmitter
 
-function Color (root, opts, theme) {
-  if (!(this instanceof Color)) return new Color(root, opts, theme)
+function Color (root, opts, theme, uuid) {
+  if (!(this instanceof Color)) return new Color(root, opts, theme, uuid)
   opts = opts || {}
@@ -22,3 +22,3 @@ opts.format = opts.format || 'rgb'
   var icon = container.appendChild(document.createElement('span'))
-  icon.className = 'control-panel-color'
+  icon.className = 'control-panel-color-' + uuid
 
@@ -72,2 +72,6 @@ var value = require('./value')(container, '', theme, '46%')
 
+  setTimeout(function () {
+    self.emit('initialized', initial)
+  })
+
   picker.onChange(function (hex) {
@@ -74,0 +78,0 @@ value.innerHTML = format(hex)

components/range.js

@@ -12,2 +12,3 @@ var EventEmitter = require('events').EventEmitter
   var self = this
+  var scaleValue, scaleValueInverse, logmin, logmax, logsign
 
@@ -17,12 +18,81 @@ var container = require('./container')(root, opts.label)
 
+  if (!!opts.step && !!opts.steps) {
+    throw new Error('Cannot specify both step and steps. Got step = ' + opts.step + ', steps = ', opts.steps)
+  }
+
   var input = container.appendChild(document.createElement('input'))
   input.type = 'range'
   input.className = 'control-panel-range-' + uuid
-  opts.max = (isnumeric(opts.max)) ? opts.max : 100
-  opts.min = (isnumeric(opts.min)) ? opts.min : 0
-  opts.step = (isnumeric(opts.step)) ? opts.step : (opts.max - opts.min) / 100
+
+  // Create scale functions for converting to/from the desired scale:
+  if (opts.scale === 'log') {
+    scaleValue = function (x) {
+      return logsign * Math.exp(Math.log(logmin) + (Math.log(logmax) - Math.log(logmin)) * x / 100)
+    }
+    scaleValueInverse = function (y) {
+      return (Math.log(y * logsign) - Math.log(logmin)) * 100 / (Math.log(logmax) - Math.log(logmin))
+    }
+  } else {
+    scaleValue = scaleValueInverse = function (x) { return x }
+  }
+
+  // Get initial value:
+  if (opts.scale === 'log') {
+    // Get options or set defaults:
+    opts.max = (isnumeric(opts.max)) ? opts.max : 100
+    opts.min = (isnumeric(opts.min)) ? opts.min : 0.1
+
+    // Check if all signs are valid:
+    if (opts.min * opts.max <= 0) {
+      throw new Error('Log range min/max must have the same sign and not equal zero. Got min = ' + opts.min + ', max = ' + opts.max)
+    } else {
+      // Pull these into separate variables so that opts can define the *slider* mapping
+      logmin = opts.min
+      logmax = opts.max
+      logsign = opts.min > 0 ? 1 : -1
+
+      // Got the sign so force these positive:
+      logmin = Math.abs(logmin)
+      logmax = Math.abs(logmax)
+
+      // These are now simply 0-100 to which we map the log range:
+      opts.min = 0
+      opts.max = 100
+
+      // Step is invalid for a log range:
+      if (isnumeric(opts.step)) {
+        throw new Error('Log may only use steps (integer number of steps), not a step value. Got step =' + opts.step)
+      }
+      // Default step is simply 1 in linear slider space:
+      opts.step = 1
+    }
+
+    opts.initial = scaleValueInverse(isnumeric(opts.initial) ? opts.initial : scaleValue((opts.min + opts.max) * 0.5))
+
+    if (opts.initial * scaleValueInverse(opts.max) <= 0) {
+      throw new Error('Log range initial value must have the same sign as min/max and must not equal zero. Got initial value = ' + opts.initial)
+    }
+  } else {
+    // If linear, this is much simpler:
+    opts.max = (isnumeric(opts.max)) ? opts.max : 100
+    opts.min = (isnumeric(opts.min)) ? opts.min : 0
+    opts.step = (isnumeric(opts.step)) ? opts.step : (opts.max - opts.min) / 100
+
+    opts.initial = isnumeric(opts.initial) ? opts.initial : (opts.min + opts.max) * 0.5
+  }
+
+  // If we got a number of steps, use that instead:
+  if (isnumeric(opts.steps)) {
+    opts.step = isnumeric(opts.steps) ? (opts.max - opts.min) / opts.steps : opts.step
+  }
+
+  // Quantize the initial value to the requested step:
+  var initialStep = Math.round((opts.initial - opts.min) / opts.step)
+  opts.initial = opts.min + opts.step * initialStep
+
+  // Set value on the input itself:
   input.min = opts.min
   input.max = opts.max
   input.step = opts.step
-  if (opts.initial) input.value = opts.initial
+  input.value = opts.initial
 
@@ -33,8 +103,13 @@ css(input, {
 
-  var value = require('./value')(container, input.value, theme, '11%')
+  var value = require('./value')(container, scaleValue(opts.initial), theme, '11%')
 
+  setTimeout(function () {
+    self.emit('initialized', parseFloat(input.value))
+  })
+
   input.oninput = function (data) {
-    value.innerHTML = data.target.value
-    self.emit('input', data.target.value)
+    var scaledValue = scaleValue(parseFloat(data.target.value))
+    value.innerHTML = scaledValue
+    self.emit('input', scaledValue)
   }
 }

components/text.js

@@ -8,4 +8,4 @@ var EventEmitter = require('events').EventEmitter
 
-function Text (root, opts, theme) {
-  if (!(this instanceof Text)) return new Text(root, opts, theme)
+function Text (root, opts, theme, uuid) {
+  if (!(this instanceof Text)) return new Text(root, opts, theme, uuid)
   var self = this
@@ -18,3 +18,3 @@
   input.type = 'text'
-  input.className = 'control-panel-text'
+  input.className = 'control-panel-text-' + uuid
   if (opts.initial) input.value = opts.initial
@@ -33,5 +33,10 @@
     background: theme.background2,
-    color: theme.text2
+    color: theme.text2,
+    fontFamily: 'inherit'
   })
 
+  setTimeout(function () {
+    self.emit('initialized', input.value)
+  })
+
   input.oninput = function (data) {
@@ -38,0 +43,0 @@ self.emit('input', data.target.value)

components/value.js

 var css = require('dom-css')
 
-module.exports = function (root, text, theme, width) {
+module.exports = function (root, text, theme, width, left) {
   var background = root.appendChild(document.createElement('div'))
@@ -9,5 +9,4 @@ var value = background.appendChild(document.createElement('span'))
 
-  css(background, {
+  var bgcss = {
     position: 'absolute',
-    right: 0,
     backgroundColor: theme.background2,
@@ -17,11 +16,21 @@ paddingLeft: '1.5%',
     width: width,
-    display: 'inline-block'
-  })
+    display: 'inline-block',
+    overflow: 'hidden'
+  }
 
+  if (!left) {
+    bgcss.right = 0
+  }
+
+  css(background, bgcss)
+
   css(value, {
     color: theme.text2,
     display: 'inline-block',
-    verticalAlign: 'sub',
     userSelect: 'text',
-    cursor: 'text'
+    cursor: 'text',
+    overflow: 'hidden',
+    lineHeight: '20px',
+    wordBreak: 'break-all',
+    height: 20
   })
@@ -28,0 +37,0 @@

demo/index.js

 var control = require('../')
+var css = require('dom-css')
 
 document.body.style.background = 'rgb(150,150,150)'
 var div1 = document.body.appendChild(document.createElement('div'))
-div1.style.marginBottom = '10px'
+css(div1, {marginRight: '11px', display: 'inline-block'})
 var div2 = document.body.appendChild(document.createElement('div'))
+css(div2, {display: 'inline-block'})
 
 var inputs = [
   {type: 'range', label: 'range slider', min: 0, max: 100, initial: 20},
-  {type: 'range', label: 'range stepped', min: 0, max: 1, step: 0.2},
+  {type: 'range', label: 'stepped slider', min: 0, max: 1, step: 0.2, initial: 0.6},
+  {type: 'interval', label: 'interval', min: 0, max: 100, initial: [25, 50]},
   {type: 'text', label: 'text', initial: 'my setting'},
@@ -15,11 +18,12 @@ {type: 'checkbox', label: 'checkbox', initial: true},
   {type: 'color', label: 'color hex', format: 'hex', initial: '#30b2ba'},
-  {type: 'range', label: 'one more', min: 0, max: 10}
+  {type: 'button', label: 'gimme an alert', action: function () { window.alert('hello!') }},
+  {type: 'select', label: 'selection', options: ['option 1', 'option 2']}
 ]
 
-var panel1 = control(inputs,
+control(inputs,
   {theme: 'light', title: 'example panel 1', root: div1}
 )
 
-var panel2 = control(inputs,
+control(inputs,
   {theme: 'dark', title: 'example panel 2', root: div2}
-)
+)

example.js

@@ -5,3 +5,7 @@ var control = require('./')
   {type: 'range', label: 'range slider', min: 0, max: 100, initial: 20},
-  {type: 'range', label: 'range stepped', min: 0, max: 1, step: 0.2},
+  {type: 'range', label: 'range stepped', min: 0, max: 1, step: 0.2, initial: 0.6},
+  {type: 'range', scale: 'log', label: 'range slider (log)', min: 0.01, max: 100, initial: 1},
+  {type: 'range', scale: 'log', label: 'range stepped (log)', min: 0.01, max: 100, steps: 10, initial: 1},
+  {type: 'range', scale: 'log', label: 'range slider (-log)', min: -0.01, max: -100, initial: -1},
+  {type: 'range', scale: 'log', label: 'range stepped (-log)', min: -0.01, max: -100, steps: 10, initial: -1},
   {type: 'text', label: 'text', initial: 'my setting'},
@@ -11,5 +15,11 @@ {type: 'checkbox', label: 'checkbox', initial: true},
   {type: 'color', label: 'color hex', format: 'hex', initial: '#30b2ba'},
-  {type: 'range', label: 'one more', min: 0, max: 10}
+  {type: 'button', label: 'gimme an alert', action: function () { window.alert('hello!') }},
+  {type: 'interval', label: 'an interval', min: 0, max: 10, initial: [3, 4], steps: 20},
+  {type: 'interval', label: 'log interval', min: 0.1, max: 10, initial: [0.1, 1], scale: 'log', steps: 20},
+  {type: 'interval', label: 'neg log interval', min: -0.1, max: -10, initial: [-0.1, -1], scale: 'log', steps: 20},
+  {type: 'range', label: 'one more', min: 0, max: 10},
+  {type: 'select', label: 'key/value select', options: {state1: 'State One', state2: 'State Two'}, initial: 'state1'},
+  {type: 'select', label: 'array select', options: ['State One', 'State Two'], initial: 'State One'}
 ],
-  {theme: 'light', title: 'example panel', position: 'top-left'}
+  {theme: 'light', title: 'example panel', position: 'top-left', width: 400}
 )
@@ -16,0 +26,0 @@

index.js

@@ -27,3 +27,3 @@ var EventEmitter = require('events').EventEmitter
   box.className = 'control-panel'
-  box.id = 'control-panel' + id
+  box.id = 'control-panel-' + id
 
@@ -34,2 +34,5 @@ var basecss = fs.readFileSync(path.join(__dirname, 'components', 'styles', 'base.css'))
   var checkboxcss = fs.readFileSync(path.join(__dirname, 'components', 'styles', 'checkbox.css'))
+  var buttoncss = fs.readFileSync(path.join(__dirname, 'components', 'styles', 'button.css'))
+  var intervalcss = fs.readFileSync(path.join(__dirname, 'components', 'styles', 'interval.css'))
+  var selectcss = fs.readFileSync(path.join(__dirname, 'components', 'styles', 'select.css'))
 
@@ -44,6 +47,26 @@ rangecss = String(rangecss)
     .replace(new RegExp('{{ UUID }}', 'g'), id)
+  buttoncss = String(buttoncss)
+    .replace(new RegExp('{{ BUTTON_COLOR }}', 'g'), opts.theme.text2)
+    .replace(new RegExp('{{ BUTTON_BG }}', 'g'), opts.theme.background2)
+    .replace(new RegExp('{{ BUTTON_COLOR_HOVER }}', 'g'), opts.theme.text2)
+    .replace(new RegExp('{{ BUTTON_BG_HOVER }}', 'g'), opts.theme.background2hover)
+    .replace(new RegExp('{{ BUTTON_COLOR_ACTIVE }}', 'g'), opts.theme.background2)
+    .replace(new RegExp('{{ BUTTON_BG_ACTIVE }}', 'g'), opts.theme.text2)
+    .replace(new RegExp('{{ UUID }}', 'g'), id)
+  intervalcss = String(intervalcss)
+    .replace(new RegExp('{{ INTERVAL_COLOR }}', 'g'), opts.theme.foreground1)
+    .replace(new RegExp('{{ TRACK_COLOR }}', 'g'), opts.theme.background2)
+    .replace(new RegExp('{{ UUID }}', 'g'), id)
+  selectcss = String(selectcss)
+    .replace(new RegExp('{{ TEXT_COLOR }}', 'g'), opts.theme.text2)
+    .replace(new RegExp('{{ BG_COLOR }}', 'g'), opts.theme.background2)
+    .replace(new RegExp('{{ BG_COLOR_HOVER }}', 'g'), opts.theme.background2hover)
+    .replace(new RegExp('{{ UUID }}', 'g'), id)
+  insertcss(basecss)
   insertcss(rangecss)
   insertcss(colorcss)
-  insertcss(basecss)
   insertcss(checkboxcss)
+  insertcss(buttoncss)
+  insertcss(intervalcss)
+  insertcss(selectcss)
 
@@ -59,11 +82,11 @@ var elem = document.createElement('style')
     width: opts.width,
-    padding: '1%',
-    paddingBottom: '0.5%',
+    padding: '14px',
+    paddingBottom: '8px',
     opacity: 0.95
   })
 
-  if (opts.position === 'top-right' 
-    || opts.position === 'top-left' 
-    || opts.position === 'bottom-right'
-    || opts.position === 'bottom-left') css(box, {position: 'absolute'})
+  if (opts.position === 'top-right' ||
+    opts.position === 'top-left' ||
+    opts.position === 'bottom-right' ||
+    opts.position === 'bottom-left') css(box, {position: 'absolute'})
 
@@ -79,6 +102,9 @@ if (opts.position === 'top-right' || opts.position === 'bottom-right') css(box, {right: 8})
   var components = {
+    button: require('./components/button'),
     text: require('./components/text'),
     range: require('./components/range'),
     checkbox: require('./components/checkbox'),
-    color: require('./components/color')
+    color: require('./components/color'),
+    interval: require('./components/interval'),
+    select: require('./components/select')
   }
@@ -90,3 +116,5 @@
   items.forEach(function (item) {
-    state[item.label] = item.initial
+    if (item.type !== 'button') {
+      state[item.label] = item.initial
+    }
   })
@@ -96,2 +124,7 @@
     element = components[item.type](box, item, opts.theme, id)
+
+    element.on('initialized', function (data) {
+      state[item.label] = data
+    })
+
     element.on('input', function (data) {
@@ -98,0 +131,0 @@ state[item.label] = data

package.json

 {
   "name": "control-panel",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "embeddable panel of inputs for parameter setting",
@@ -8,5 +8,5 @@ "main": "index.js",
     "start": "watchify-server example.js | garnish",
-    "test": "browserify test.js | testron | tap-spec",
+    "test": "standard && browserify test.js | smokestack | tap-spec",
     "build": "browserify demo/index.js -o demo/bundle.js",
-    "deploy": "surge demo control-panel.surge.sh"
+    "deploy": "npm run build && surge demo control-panel.surge.sh"
   },
@@ -50,7 +50,8 @@ "repository": {
     "garnish": "^5.0.1",
+    "smokestack": "^3.4.1",
+    "standard": "^7.1.0",
     "tap-spec": "^4.1.1",
     "tape": "^4.5.1",
-    "testron": "^1.2.0",
     "watchify-server": "^1.0.2"
   }
 }

README.md

@@ -12,3 +12,3 @@ # control-panel
 
-[![dark](images/dark.png)](http://control-panel.surge.sh)[![light](images/light.png)](http://control-panel.surge.sh)
+[![themes](images/themes.png)](http://control-panel.surge.sh)
 
@@ -19,3 +19,3 @@ ----------------
 
-> `range` • `checkbox` • `text` • `color`
+> `range` • `checkbox` • `text` • `color` • `button` • `interval` • `select`
 
@@ -47,5 +47,8 @@ ----------------
   {type: 'range', label: 'my range', min: 0, max: 100, initial: 20},
+  {type: 'range', label: 'log range', min: 0.1, max: 100, initial: 20, scale: 'log'},
   {type: 'text', label: 'my text', initial: 'my cool setting'},
   {type: 'checkbox', label: 'my checkbox', initial: true},
-  {type: 'color', label: 'my color', format: 'rgb', initial: 'rgb(10,200,0)'}
+  {type: 'color', label: 'my color', format: 'rgb', initial: 'rgb(10,200,0)'},
+  {type: 'button', label: 'gimme an alert', action: function () {alert('hello!');}},
+  {type: 'select', label: 'select one', options: ['option 1', 'option 2'], initial: 'option 1'}
 ], 
@@ -66,7 +69,10 @@ {theme: 'light', position: 'top-right'}
 
-Each `type` must be one of `range` • `input` • `checkbox` • `color`. Each `label` must be unique. 
+Each `type` must be one of `range` • `input` • `checkbox` • `color` • `interval` • `select`. Each `label` must be unique. 
 
 Some types have additional properties:
-- Inputs of type `range` can specify a `min`, `max`, and `step`
+- Inputs of type `range` can specify a `min`, `max`, and `step` (or integer `steps`). Scale can be either `'linear'` (default) or `'log'`. If a log scale, the sign of `min`, `max`, and `initial` must be the same and only `steps` is permitted (since the step size is not constant on a log scale).
 - Inputs of type `color` can specify a `format` as either `rgb` • `hex` • `array`
+- Inputs of type `button` can specify an `action` callback. Button inputs are not reflected in the state and do not trigger an `'input'` event.
+- Inputs of type `interval` obey the same semantics as `range` inputs, except the input and ouput is a two-element array corresponding to the low/high bounds, e.g. `initial: [1, 7.5]`.
+- Inputs of type `select` can specify a list of options, either as an `Array` (in which case the value is the same as the option text) or as an object containing key/value pairs (in which case the key/value pair maps to value value/label pairs).
 
@@ -88,3 +94,3 @@ The following optional parameters can also be passed as `opts`
 
-[npm-image]: https://img.shields.io/badge/npm-v1.1.1-lightgray.svg?style=flat-square
+[npm-image]: https://img.shields.io/badge/npm-v1.2.0-lightgray.svg?style=flat-square
 [npm-url]: https://npmjs.org/package/control-panel
@@ -91,0 +97,0 @@ [standard-image]: https://img.shields.io/badge/code%20style-standard-lightgray.svg?style=flat-square

test.js

 var test = require('tape')
 var control = require('./index')
 
+function assertSelector (t, selector) {
+  var el = document.querySelector(selector)
+  t.notEqual(el, null, 'element ' + selector + ' is present')
+}
+function assertId (t, id) {
+  var el = document.getElementById(id)
+  t.notEqual(el, null, 'element #' + id + ' is present')
+}
+
 test('construction', function (t) {
   control([{type: 'range', label: 'range label', min: 0, max: 100, initial: 20}])
-  t.equal(typeof document.querySelector('#input-panel'), 'object')
+  assertId(t, 'control-panel-range-label')
+  assertSelector(t, '[class^=control-panel-range-]')
   t.end()
@@ -11,5 +21,5 @@ })
 test('range', function (t) {
-  control([{type: 'range', label: 'label', min: 0, max: 100, initial: 20}])
-  t.equal(typeof document.querySelector('.input-panel-range'), 'object')
-  t.equal(typeof document.querySelector('#input-panel-label'), 'object')
+  control([{type: 'range', label: 'range label', min: 0, max: 100, initial: 20}])
+  assertId(t, 'control-panel-range-label')
+  assertSelector(t, '[class^=control-panel-range-]')
   t.end()
@@ -19,5 +29,5 @@ })
 test('color', function (t) {
-  control([{type: 'color', label: 'label', min: 0, max: 100, initial: 20}])
-  t.equal(typeof document.querySelector('.input-panel-color'), 'object')
-  t.equal(typeof document.querySelector('#input-panel-label'), 'object')
+  control([{type: 'color', label: 'color label', min: 0, max: 100, initial: 20}])
+  assertId(t, 'control-panel-color-label')
+  assertSelector(t, '[class^=control-panel-color-]')
   t.end()
@@ -27,5 +37,5 @@ })
 test('text', function (t) {
-  control([{type: 'text', label: 'label', min: 0, max: 100, initial: 20}])
-  t.equal(typeof document.querySelector('.input-panel-text'), 'object')
-  t.equal(typeof document.querySelector('#input-panel-label'), 'object')
+  control([{type: 'text', label: 'text label', min: 0, max: 100, initial: 20}])
+  assertId(t, 'control-panel-text-label')
+  assertSelector(t, '[class^=control-panel-text]')
   t.end()
@@ -35,6 +45,31 @@ })
 test('checkbox', function (t) {
-  control([{type: 'checkbox', label: 'label', min: 0, max: 100, initial: 20}])
-  t.equal(typeof document.querySelector('.input-panel-checkbox'), 'object')
-  t.equal(typeof document.querySelector('#input-panel-label'), 'object')
+  control([{type: 'checkbox', label: 'checkbox label', initial: false}])
+  assertId(t, 'control-panel-checkbox-label')
+  assertSelector(t, '[class^=control-panel-checkbox-]')
   t.end()
+  window.close()
 })
+
+test('interval', function (t) {
+  control([{type: 'interval', label: 'interval label', min: 0, max: 100, initial: [20, 40]}])
+  assertId(t, 'control-panel-interval-label')
+  assertSelector(t, '[class^=control-panel-interval-]')
+  t.end()
+  window.close()
+})
+
+test('button', function (t) {
+  control([{type: 'button', label: 'button label', action: function () { }}])
+  assertId(t, 'control-panel-button-label')
+  assertSelector(t, '[class^=control-panel-button-]')
+  t.end()
+  window.close()
+})
+
+test('select', function (t) {
+  control([{type: 'select', label: 'select label', options: ['option 1', 'option 2']}])
+  assertId(t, 'control-panel-select-label')
+  assertSelector(t, '[class^=control-panel-select-]')
+  t.end()
+  window.close()
+})

themes.js

@@ -5,2 +5,3 @@ module.exports = {
     background2: 'rgb(204,204,204)',
+    background2hover: 'rgb(208,208,208)',
     foreground1: 'rgb(105,105,105)',
@@ -14,2 +15,3 @@ text1: 'rgb(36,36,36)',
     background2: 'rgb(54,54,54)',
+    background2hover: 'rgb(58,58,58)',
     foreground1: 'rgb(112,112,112)',
@@ -16,0 +18,0 @@ text1: 'rgb(235,235,235)',

No alert changes

Improved metrics

Total package byte prevSize

90472

increased by33.35%

Number of package files

30

increased by25%

Lines of code

1170

increased by72.06%

Number of lines in readme file

95

increased by6.74%

Worsened metrics

Dev dependency count

6

increased by20%

No dependency changes