├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── contributors.md
├── index.css
├── index.js
├── package.json
├── preview.png
├── qa.md
├── src
├── button.js
├── checkbox.js
├── color.js
├── custom.js
├── interval.js
├── range.js
├── select.js
├── switch.js
├── text.js
├── textarea.js
└── value.js
├── test.js
└── theme
├── control.js
├── dat.js
├── dragon.js
├── flat.js
├── json.js
├── lucy.js
├── merka.js
├── none.js
├── pages.js
└── typer.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 |
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 |
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 |
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 |
20 | # node-waf configuration
21 | .lock-wscript
22 |
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 |
26 | # Dependency directory
27 | node_modules
28 |
29 | # Optional npm cache directory
30 | .npm
31 |
32 | # Optional REPL history
33 | .node_repl_history
34 |
35 | bundle.js
36 | demo
37 |
38 | images
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | test.js
2 | *.jpg
3 | *.gif
4 | demo
5 | *.png
6 | *.md
7 | images
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Jeremy Freeman
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # settings-panel [](http://github.com/badges/stability-badges)
2 |
3 | Simple settings panel for your app, demo or tests.
4 |
5 | [](http://dy.github.io/settings-panel/)
6 |
7 | In the preview there is a _typer_ theme, for other themes or customizations see [demo](http://dy.github.io/settings-panel/).
8 |
9 | ## Usage
10 |
11 | [](https://npmjs.org/package/settings-panel/)
12 |
13 | ```javascript
14 | var createPanel = require('settings-panel')
15 |
16 | var panel = createPanel([
17 | {type: 'range', label: 'my range', min: 0, max: 100, value: 20},
18 | {type: 'range', label: 'log range', min: 0.1, max: 100, value: 20, scale: 'log'},
19 | {type: 'text', label: 'my text', value: 'my cool setting', help: 'why this is cool'},
20 | {type: 'checkbox', label: 'my checkbox', value: true},
21 | {type: 'color', label: 'my color', format: 'rgb', value: 'rgb(10,200,0)', change: value => console.log(value)},
22 | {type: 'button', label: 'gimme an alert', change: () => alert('hello!')},
23 | {type: 'select', label: 'select one', options: ['option 1', 'option 2'], value: 'option 1'}
24 | ],
25 | {
26 | title: 'Settings',
27 | style: 'position: absolute; right: 0; z-index: 1'
28 | }
29 | );
30 | ```
31 |
32 | [**Run this in requirebin**](http://requirebin.com/?gist=21fc39f7f206ca50a4d5cd7298f8b9f8)
33 |
34 | ## API
35 |
36 | `const Panel = require('settings-panel')`
37 | **`let panel = new Panel(fields, options?)`**
38 |
39 | The first argument is a list of fields or object with id/field pairs. Each field may have following properties:
40 |
41 | * `type` one of `range` • `interval` • `checkbox` • `color` • `select` • `switch` • `raw` • `textarea` • `text` or any `**`panel.on(event, callback)`**
106 |
107 | Attach callback to `change`, `input` or `init` event.
108 |
109 | The callback will recieve `name`, `data` and `state` arguments:
110 |
111 | ```javascript
112 | panel.on('change', (name, value, state) => {
113 | // name === 'my checkbox'
114 | // value === false
115 | // state === {'my checkbox': false, 'my range': 75, ...}
116 | });
117 | ```
118 |
119 | **`panel.get(name?)`**
121 |
122 | Get the value of a field defined by `name`. Or get full list of values, if `name` is undefined.
123 |
124 | **`panel.set(name, value|options)`**
126 |
127 | Update specific field, with value or field options. You can also pass an object or array to update multiple fields:
128 |
129 | ```js
130 | panel.set({ 'my range': { min: -100, value: 200}, 'my color': '#fff' });
131 | ```
132 |
133 | **`panel.update(options?)`**
135 |
136 | Rerender panel with new options. Options may include values for the theme, like `palette`, `fontSize`, `fontFamily`, `labelWidth`, `padding` etc, see specific theme file for possible options.
137 |
138 | ",
34 | "contributors": [
35 | "freeman-lab",
36 | "rreusser"
37 | ],
38 | "license": "MIT",
39 | "bugs": {
40 | "url": "https://github.com/dfcreative/settings-panel/issues"
41 | },
42 | "browserify": {
43 | "transform": [
44 | "brfs"
45 | ]
46 | },
47 | "homepage": "https://github.com/dfcreative/settings-panel#readme",
48 | "dependencies": {
49 | "add-px-to-style": "^1.0.0",
50 | "autosize": "^3.0.15",
51 | "brfs": "^1.4.3",
52 | "color-interpolate": "^1.0.1",
53 | "dom-css": "^2.0.0",
54 | "get-uid": "^1.0.1",
55 | "google-fonts": "^1.0.0",
56 | "inherits": "^2.0.1",
57 | "input-number": "^1.0.5",
58 | "insert-styles": "^1.2.1",
59 | "is-mobile": "^0.2.2",
60 | "is-numeric": "0.0.5",
61 | "is-plain-obj": "^1.1.0",
62 | "just-extend": "^1.1.18",
63 | "mumath": "^2.3.0",
64 | "param-case": "^1.1.2",
65 | "scope-css": "^1.0.0",
66 | "simple-color-picker": "0.0.9",
67 | "tinycolor2": "^1.3.0"
68 | },
69 | "devDependencies": {
70 | "bubleify": "^0.5.0",
71 | "colormap": "^2.2.0",
72 | "dom-css": "^2.0.1",
73 | "filter-obj": "^1.1.0",
74 | "nice-color-palettes": "^1.0.1",
75 | "sortablejs": "^1.4.2",
76 | "tst": "^1.3.1"
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dy/settings-panel/d973e5d88ec6f9e5c88268564425c38075eacc3a/preview.png
--------------------------------------------------------------------------------
/qa.md:
--------------------------------------------------------------------------------
1 | # Q: should we separate active color?
2 | + Makes sense for flat
3 | + Makes sense for typer
4 | + Unseful for control
5 | * Bearable for dragon
6 | * Possible to autodetect active color from palette, if undefined.
7 | + Expands palette to full range
8 | + Enables need in component enabler
9 | * funny thing is that many schemes have active color in between edges, it is contrast to all of edge values.
10 | * Also edge values seem good working for labels/title as it increase readability due to contrast, but active color highlights, it does not make things contrast.
11 | * Also too often we don’t need brightness relationship between label/title/bg, because as far bg can be transparent, we can manage to do bw scale via opacity.
12 | ✔~ Therefore initial idea of picking active color from the middle may be good. As far as we avoid `active` option and put things back to single palette.
13 |
14 | # Q: what are good theme principles?
15 | * It should look good in bw and inverse bw
16 | → don’t do bg gray, gray is property of palette, not the step. bg should allow for accents, but be on the edge, like .8, .9 etc.
17 | ? how do we do lighting? b/w or edge palette colors?
18 | * It should be able to reach maximum contrast in bw mode
19 | →
20 | * Bg, active color should be easily changeable
21 | → therefore bg and active are the opposites
22 | * It should respond to interactions: hover, focus, active etc., by highlighting active element.
23 | * It should be able to change scale gracefully, i. e. keeping select size, thumbnails, etc consistent.
24 |
25 | # Q: what is the minimal and easiest way to cover all the use-cases?
26 | * 1. Redefine properties on per-component basis, like label-position, field-style, item-style etc.
27 | * 2. type=group or type=row
28 | + grouping fields into a row
29 | + customizing background
30 | * 3. type=custom
31 | + cover titles h1..h6
32 | + cover br's
33 | * 4. type=panel, for nested panels
34 | - possible to fold into type=custom
35 | + type=custom does not make a big sense, it is rather rare exception, like canvas etc
36 | + grouping tasks
37 | + theme recustomization
38 | + label-position, field-style is solved on per-theme basis
39 | + allows for enabling inner panel
40 | * 5. per-component theme update - let components decide their look based on theme
41 | - firbids user component customization
42 |
43 | # Q: should title be a separate element, or not?
44 | * + it allows for inserting multiple titles
45 | - multiple titles wants be styles in custom way, ideally h2/h3
46 | * - is is discrepancy with control-panel
47 | * + it makes title in code visually easier to find
48 | * - title is not really a field
49 | * - subgroups are better done in subpanels
50 |
51 | # Q: what is the optimal way to organize themes?
52 | * use themes/*.js with functions, returning dynamic css based off variables
53 | * use palette instead of picked colors to allow for dynamic switching without theme change.
--------------------------------------------------------------------------------
/src/button.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const EventEmitter = require('events').EventEmitter
4 | const inherits = require('inherits')
5 |
6 | module.exports = Button
7 | inherits(Button, EventEmitter)
8 |
9 | function Button (opts) {
10 | if (!(this instanceof Button)) return new Button(opts)
11 |
12 | var input = opts.container.querySelector('.settings-panel-button');
13 | if (!input) {
14 | this.element = input = opts.container.appendChild(document.createElement('button'))
15 | input.className = 'settings-panel-button';
16 | input.addEventListener('click', (e) => {
17 | e.preventDefault();
18 | this.emit('input');
19 | this.emit('action');
20 | })
21 | }
22 |
23 | this.update(opts);
24 | }
25 |
26 | Button.prototype.update = function (opts) {
27 | this.element.innerHTML = opts.value || opts.label;
28 | return this;
29 | };
30 |
31 | Button.prototype.label = false;
--------------------------------------------------------------------------------
/src/checkbox.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const EventEmitter = require('events').EventEmitter
4 | const inherits = require('inherits')
5 | const format = require('param-case')
6 | const extend = require('just-extend');
7 |
8 | module.exports = Checkbox
9 | inherits(Checkbox, EventEmitter)
10 |
11 | function Checkbox (opts) {
12 | if (!(this instanceof Checkbox)) return new Checkbox(opts)
13 |
14 | var that = this;
15 |
16 | if (!this.group) {
17 | this.group = document.createElement('fieldset');
18 | this.group.className = 'settings-panel-checkbox-group';
19 | opts.container.appendChild(this.group);
20 | }
21 |
22 | //detect multiple options from array value
23 | if (!opts.options && Array.isArray(opts.value)) {
24 | opts.options = opts.value;
25 | }
26 |
27 | //single checkbox
28 | if (!opts.options) {
29 | let input = this.group.querySelector('.settings-panel-checkbox');
30 | let label = this.group.querySelector('.settings-panel-checkbox-label');
31 | if (!input) {
32 | this.element = input = this.group.appendChild(document.createElement('input'));
33 | input.className = 'settings-panel-checkbox';
34 | this.labelEl = label = this.group.appendChild(document.createElement('label'));
35 | this.labelEl.innerHTML = ' ';
36 | label.className = 'settings-panel-checkbox-label';
37 | input.onchange = function (data) {
38 | that.emit('input', data.target.checked)
39 | }
40 | setTimeout(function () {
41 | that.emit('init', input.checked)
42 | })
43 | }
44 | }
45 | //multiple checkboxes
46 | else {
47 | var html = '';
48 |
49 | if (Array.isArray(opts.options)) {
50 | for (let i = 0; i < opts.options.length; i++) {
51 | let option = opts.options[i]
52 | html += createOption(option, option);
53 | }
54 | } else {
55 | for (let key in opts.options) {
56 | html += createOption(opts.options[key], key);
57 | }
58 | }
59 |
60 | this.group.innerHTML = html;
61 |
62 | this.group.addEventListener('change', () => {
63 | this.emit('input', getState());
64 | });
65 | setTimeout(() => {
66 | this.emit('init', getState());
67 | });
68 | }
69 |
70 | function getState () {
71 | let v = [];
72 | [].slice.call(that.group.querySelectorAll('.settings-panel-checkbox')).forEach(el => {
73 | if (el.checked) v.push(el.getAttribute('data-value'));
74 | });
75 | return v;
76 | }
77 |
78 | function createOption (label, value) {
79 | let htmlFor = `settings-panel-${format(opts.panel.id)}-${format(opts.id)}-input-${format(value)}`;
80 |
81 | let html = `${label} `;
82 | return html;
83 | }
84 |
85 | this.update(opts);
86 | }
87 |
88 | Checkbox.prototype.update = function (opts) {
89 | extend(this, opts);
90 |
91 | if (!this.options) {
92 | this.labelEl.htmlFor = this.id
93 | this.element.id = this.id
94 | this.element.type = 'checkbox';
95 | this.element.checked = !!this.value;
96 | }
97 | else {
98 | if (!Array.isArray(this.value)) this.value = [this.value];
99 | let els = [].slice.call(this.group.querySelectorAll('.settings-panel-checkbox'));
100 | els.forEach(el => {
101 | if (this.value.indexOf(el.getAttribute('data-value')) >= 0) {
102 | el.checked = true;
103 | }
104 | else {
105 | el.checked = false;
106 | }
107 | });
108 | }
109 |
110 | this.group.disabled = !!this.disabled;
111 |
112 | return this;
113 | }
114 |
--------------------------------------------------------------------------------
/src/color.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const EventEmitter = require('events').EventEmitter
4 | const ColorPicker = require('simple-color-picker')
5 | const inherits = require('inherits')
6 | const css = require('dom-css')
7 | const tinycolor = require('tinycolor2')
8 | const formatParam = require('param-case')
9 | const num = require('input-number')
10 |
11 | module.exports = Color
12 | inherits(Color, EventEmitter)
13 |
14 | function Color (opts) {
15 | if (!(this instanceof Color)) return new Color(opts)
16 |
17 | this.update(opts);
18 | }
19 |
20 | Color.prototype.update = function (opts) {
21 | opts.container.innerHTML = '';
22 |
23 | opts = opts || {}
24 | opts.format = opts.format || 'rgb'
25 | opts.value = opts.value || '#123456';
26 | var icon = opts.container.appendChild(document.createElement('div'))
27 | //FIXME: this needed to make el vertical-aligned by baseline
28 | icon.innerHTML = ' ';
29 | icon.className = 'settings-panel-color'
30 |
31 | var valueInput = opts.container.appendChild(document.createElement('input'));
32 | valueInput.id = opts.id;
33 | valueInput.className = 'settings-panel-color-value';
34 | num(valueInput);
35 | valueInput.onchange = () => {
36 | picker.setColor(valueInput.value);
37 | };
38 | valueInput.oninput = () => {
39 | picker.setColor(valueInput.value);
40 | };
41 |
42 | if (opts.readonly) {
43 | valueInput.setAttribute('readonly', true);
44 | }
45 |
46 |
47 | var initial = opts.value
48 | switch (opts.format) {
49 | case 'rgb':
50 | initial = tinycolor(initial).toHexString()
51 | break
52 | case 'hex':
53 | initial = tinycolor(initial).toHexString()
54 | break
55 | case 'array':
56 | initial = tinycolor.fromRatio({r: initial[0], g: initial[1], b: initial[2]}).toHexString()
57 | break
58 | default:
59 | break
60 | }
61 |
62 | var picker = new ColorPicker({
63 | el: icon,
64 | color: initial,
65 | width: 160,
66 | height: 120
67 | });
68 |
69 | picker.$el.style.display = 'none';
70 |
71 | if (!opts.readonly) {
72 | icon.onmouseover = function () {
73 | picker.$el.style.display = ''
74 | }
75 | icon.onmouseout = (e) => {
76 | picker.$el.style.display = 'none'
77 | }
78 | }
79 |
80 | setTimeout(() => {
81 | this.emit('init', initial)
82 | });
83 |
84 | picker.onChange((hex) => {
85 | let v = format(hex);
86 | if (v !== valueInput.value) valueInput.value = v;
87 | css(icon, {backgroundColor: hex})
88 | this.emit('input', format(hex))
89 | })
90 |
91 | function format (hex) {
92 | switch (opts.format) {
93 | case 'rgb':
94 | return tinycolor(hex).toRgbString()
95 | case 'hex':
96 | return tinycolor(hex).toHexString()
97 | case 'array':
98 | var rgb = tinycolor(hex).toRgb()
99 | return [rgb.r / 255, rgb.g / 255, rgb.b / 255].map(function (x) {
100 | return x.toFixed(2)
101 | })
102 | default:
103 | return hex
104 | }
105 | };
106 |
107 | return this;
108 | }
109 |
--------------------------------------------------------------------------------
/src/custom.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module settings-panel/src/custom
3 | *
4 | * A custom html component
5 | */
6 |
7 | 'use strict';
8 |
9 | const EventEmitter = require('events').EventEmitter
10 | const inherits = require('inherits')
11 | const extend = require('just-extend')
12 |
13 | module.exports = Custom
14 | inherits(Custom, EventEmitter)
15 |
16 | function Custom (opts) {
17 | if (!(this instanceof Custom)) return new Custom(opts);
18 |
19 | //FIXME: these guys force unnecessary events, esp if element returns wrong value
20 | // opts.container.addEventListener('input', (e) => {
21 | // this.emit('input', e.target.value);
22 | // });
23 | // opts.container.addEventListener('change', (e) => {
24 | // this.emit('change', e.target.value);
25 | // });
26 |
27 | this.update(opts);
28 | }
29 |
30 | Custom.prototype.update = function (opts) {
31 | extend(this, opts);
32 | var el = this.content;
33 | if (this.content instanceof Function) {
34 | el = this.content(this);
35 | if (!el) return;
36 |
37 | if (typeof el === 'string') {
38 | this.container.innerHTML = el;
39 | }
40 | else if (!this.container.contains(el)) {
41 | this.container.appendChild(el);
42 | }
43 | }
44 | else if (typeof this.content === 'string') {
45 | this.container.innerHTML = el;
46 | }
47 | else if (this.content instanceof Element && (!this.container.contains(el))) {
48 | this.container.appendChild(el);
49 | }
50 | else {
51 | //empty content is allowable, in case if user wants to show only label for example
52 | // throw Error('`content` should be a function returning html element or string');
53 | }
54 | };
--------------------------------------------------------------------------------
/src/interval.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const isNumeric = require('is-numeric')
4 | const css = require('dom-css')
5 | const isMobile = require('is-mobile')()
6 | const format = require('param-case')
7 | const clamp = require('mumath/clamp')
8 | const EventEmitter = require('events').EventEmitter
9 | const inherits = require('inherits');
10 | const precision = require('mumath/precision');
11 |
12 | module.exports = Range
13 |
14 | inherits(Range, EventEmitter);
15 |
16 | function Range (opts) {
17 | if (!(this instanceof Range)) return new Range(opts);
18 |
19 | this.update(opts);
20 | }
21 |
22 | Range.prototype.update = function (opts) {
23 | var self = this
24 | var scaleValue, scaleValueInverse, logmin, logmax, logsign, input, handle, panel;
25 |
26 | if (!!opts.step && !!opts.steps) {
27 | throw new Error('Cannot specify both step and steps. Got step = ' + opts.step + ', steps = ', opts.steps)
28 | }
29 |
30 | opts.container.innerHTML = '';
31 |
32 | if (opts.step) {
33 | var prec = precision(opts.step) || 1;
34 | }
35 | else {
36 | var prec = precision( (opts.max - opts.min) / opts.steps ) || 1;
37 | }
38 |
39 | // Create scale functions for converting to/from the desired scale:
40 | if (opts.scale === 'log' || opts.log) {
41 | scaleValue = function (x) {
42 | return logsign * Math.exp(Math.log(logmin) + (Math.log(logmax) - Math.log(logmin)) * x / 100)
43 | }
44 | scaleValueInverse = function (y) {
45 | return (Math.log(y * logsign) - Math.log(logmin)) * 100 / (Math.log(logmax) - Math.log(logmin))
46 | }
47 | } else {
48 | scaleValue = scaleValueInverse = function (x) { return x }
49 | }
50 |
51 | if (!Array.isArray(opts.value)) {
52 | opts.value = []
53 | }
54 | if (opts.scale === 'log' || opts.log) {
55 | // Get options or set defaults:
56 | opts.max = (isNumeric(opts.max)) ? opts.max : 100
57 | opts.min = (isNumeric(opts.min)) ? opts.min : 0.1
58 |
59 | // Check if all signs are valid:
60 | if (opts.min * opts.max <= 0) {
61 | throw new Error('Log range min/max must have the same sign and not equal zero. Got min = ' + opts.min + ', max = ' + opts.max)
62 | } else {
63 | // Pull these into separate variables so that opts can define the *slider* mapping
64 | logmin = opts.min
65 | logmax = opts.max
66 | logsign = opts.min > 0 ? 1 : -1
67 |
68 | // Got the sign so force these positive:
69 | logmin = Math.abs(logmin)
70 | logmax = Math.abs(logmax)
71 |
72 | // These are now simply 0-100 to which we map the log range:
73 | opts.min = 0
74 | opts.max = 100
75 |
76 | // Step is invalid for a log range:
77 | if (isNumeric(opts.step)) {
78 | throw new Error('Log may only use steps (integer number of steps), not a step value. Got step =' + opts.step)
79 | }
80 | // Default step is simply 1 in linear slider space:
81 | opts.step = 1
82 | }
83 |
84 | opts.value = [
85 | scaleValueInverse(isNumeric(opts.value[0]) ? opts.value[0] : scaleValue(opts.min + (opts.max - opts.min) * 0.25)),
86 | scaleValueInverse(isNumeric(opts.value[1]) ? opts.value[1] : scaleValue(opts.min + (opts.max - opts.min) * 0.75))
87 | ]
88 |
89 | if (scaleValue(opts.value[0]) * scaleValue(opts.max) <= 0 || scaleValue(opts.value[1]) * scaleValue(opts.max) <= 0) {
90 | throw new Error('Log range initial value must have the same sign as min/max and must not equal zero. Got initial value = [' + scaleValue(opts.value[0]) + ', ' + scaleValue(opts.value[1]) + ']')
91 | }
92 | } else {
93 | // If linear, this is much simpler:
94 | opts.max = (isNumeric(opts.max)) ? opts.max : 100
95 | opts.min = (isNumeric(opts.min)) ? opts.min : 0
96 | opts.step = (isNumeric(opts.step)) ? opts.step : (opts.max - opts.min) / 100
97 |
98 | opts.value = [
99 | isNumeric(opts.value[0]) ? opts.value[0] : (opts.min + opts.max) * 0.25,
100 | isNumeric(opts.value[1]) ? opts.value[1] : (opts.min + opts.max) * 0.75
101 | ]
102 | }
103 |
104 | // If we got a number of steps, use that instead:
105 | if (isNumeric(opts.steps)) {
106 | opts.step = isNumeric(opts.steps) ? (opts.max - opts.min) / opts.steps : opts.step
107 | }
108 |
109 | // Quantize the initial value to the requested step:
110 | opts.value[0] = opts.min + opts.step * Math.round((opts.value[0] - opts.min) / opts.step)
111 | opts.value[1] = opts.min + opts.step * Math.round((opts.value[1] - opts.min) / opts.step)
112 |
113 |
114 | //create DOM
115 | var lValue = require('./value')({
116 | container: opts.container,
117 | value: scaleValue(opts.value[0]).toFixed(prec),
118 | type: 'text',
119 | left: true,
120 | disabled: opts.disabled,
121 | id: opts.id,
122 | className: 'settings-panel-interval-value settings-panel-interval-value--left',
123 | input: v => {
124 | //TODO
125 | }
126 | })
127 |
128 | panel = opts.container.parentNode;
129 |
130 | input = opts.container.appendChild(document.createElement('span'))
131 | input.id = 'settings-panel-interval'
132 | input.className = 'settings-panel-interval'
133 |
134 | handle = document.createElement('span')
135 | handle.className = 'settings-panel-interval-handle'
136 | handle.value = 50;
137 | handle.min = 0;
138 | handle.max = 50;
139 | input.appendChild(handle)
140 |
141 | var value = opts.value
142 |
143 | // Display the values:
144 | var rValue = require('./value')({
145 | container: opts.container,
146 | disabled: opts.disabled,
147 | value: scaleValue(opts.value[1]).toFixed(prec),
148 | type: 'text',
149 | className: 'settings-panel-interval-value settings-panel-interval-value--right',
150 | input: v => {
151 | //TODO
152 | }
153 | })
154 |
155 | function setHandleCSS () {
156 | let left = ((value[0] - opts.min) / (opts.max - opts.min) * 100);
157 | let right = (100 - (value[1] - opts.min) / (opts.max - opts.min) * 100);
158 | css(handle, {
159 | left: left + '%',
160 | width: (100 - left - right) + '%'
161 | });
162 | opts.container.style.setProperty('--low', left + '%');
163 | opts.container.style.setProperty('--high', 100 - right + '%');
164 | lValue.style.setProperty('--value', left + '%');
165 | rValue.style.setProperty('--value', 100 - right + '%');
166 | }
167 |
168 | // Initialize CSS:
169 | setHandleCSS()
170 | // An index to track what's being dragged:
171 | var activeIndex = -1
172 |
173 | function mouseX (ev) {
174 | // Get mouse/touch position in page coords relative to the container:
175 | return (ev.touches && ev.touches[0] || ev).pageX - input.getBoundingClientRect().left
176 | }
177 |
178 | function setActiveValue (fraction) {
179 | if (activeIndex === -1) {
180 | return
181 | }
182 |
183 | // Get the position in the range [0, 1]:
184 | var lofrac = (value[0] - opts.min) / (opts.max - opts.min)
185 | var hifrac = (value[1] - opts.min) / (opts.max - opts.min)
186 |
187 | // Clip against the other bound:
188 | if (activeIndex === 0) {
189 | fraction = Math.min(hifrac, fraction)
190 | } else {
191 | fraction = Math.max(lofrac, fraction)
192 | }
193 |
194 | // Compute and quantize the new value:
195 | var newValue = opts.min + Math.round((opts.max - opts.min) * fraction / opts.step) * opts.step
196 |
197 | // Update value, in linearized coords:
198 | value[activeIndex] = newValue
199 |
200 | // Update and send the event:
201 | setHandleCSS()
202 | input.oninput()
203 | }
204 |
205 | var mousemoveListener = function (ev) {
206 | if (ev.target === input || ev.target === handle) ev.preventDefault()
207 |
208 | var fraction = clamp(mouseX(ev) / input.offsetWidth, 0, 1)
209 |
210 | setActiveValue(fraction)
211 | }
212 |
213 | var mouseupListener = function (ev) {
214 | panel.classList.remove('settings-panel-interval-dragging')
215 |
216 | document.removeEventListener(isMobile ? 'touchmove' : 'mousemove', mousemoveListener)
217 | document.removeEventListener(isMobile ? 'touchend' : 'mouseup', mouseupListener)
218 |
219 | activeIndex = -1
220 | }
221 |
222 | input.addEventListener(isMobile ? 'touchstart' : 'mousedown', function (ev) {
223 | // Tweak control to make dragging experience a little nicer:
224 | panel.classList.add('settings-panel-interval-dragging')
225 |
226 | // Get mouse position fraction:
227 | var fraction = clamp(mouseX(ev) / input.offsetWidth, 0, 1)
228 |
229 | // Get the current fraction of position --> [0, 1]:
230 | var lofrac = (value[0] - opts.min) / (opts.max - opts.min)
231 | var hifrac = (value[1] - opts.min) / (opts.max - opts.min)
232 |
233 | // This is just for making decisions, so perturb it ever
234 | // so slightly just in case the bounds are numerically equal:
235 | lofrac -= Math.abs(opts.max - opts.min) * 1e-15
236 | hifrac += Math.abs(opts.max - opts.min) * 1e-15
237 |
238 | // Figure out which is closer:
239 | var lodiff = Math.abs(lofrac - fraction)
240 | var hidiff = Math.abs(hifrac - fraction)
241 |
242 | activeIndex = lodiff < hidiff ? 0 : 1
243 |
244 | // Attach this to *document* so that we can still drag if the mouse
245 | // passes outside the container:
246 | document.addEventListener(isMobile ? 'touchmove' : 'mousemove', mousemoveListener)
247 | document.addEventListener(isMobile ? 'touchend' : 'mouseup', mouseupListener)
248 | })
249 |
250 | setTimeout(() => {
251 | var scaledLValue = scaleValue(value[0])
252 | var scaledRValue = scaleValue(value[1])
253 | lValue.value = scaledLValue.toFixed(prec)
254 | rValue.value = scaledRValue.toFixed(prec)
255 | this.emit('init', [scaledLValue, scaledRValue])
256 | })
257 |
258 | input.oninput = () => {
259 | var scaledLValue = scaleValue(value[0])
260 | var scaledRValue = scaleValue(value[1])
261 | lValue.value = scaledLValue.toFixed(prec)
262 | rValue.value = scaledRValue.toFixed(prec)
263 | this.emit('input', [scaledLValue, scaledRValue])
264 | }
265 |
266 | return this;
267 | }
--------------------------------------------------------------------------------
/src/range.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const EventEmitter = require('events').EventEmitter
4 | const inherits = require('inherits')
5 | const isNumeric = require('is-numeric')
6 | const css = require('dom-css')
7 | const format = require('param-case')
8 | const precision = require('mumath/precision')
9 |
10 | module.exports = Range
11 | inherits(Range, EventEmitter)
12 |
13 | function Range (opts) {
14 | if (!(this instanceof Range)) return new Range(opts);
15 |
16 | this.update(opts);
17 | }
18 |
19 | Range.prototype.update = function (opts) {
20 | var scaleValue, scaleValueInverse, logmin, logmax, logsign
21 |
22 | if (!!opts.step && !!opts.steps) {
23 | throw new Error('Cannot specify both step and steps. Got step = ' + opts.step + ', steps = ', opts.steps)
24 | }
25 |
26 | opts.container.innerHTML = '';
27 |
28 | if (!opts.container) opts.container = document.body;
29 |
30 | var input = opts.container.querySelector('.settings-panel-range');
31 |
32 | if (!input) {
33 | input = opts.container.appendChild(document.createElement('input'))
34 | input.type = 'range'
35 | input.className = 'settings-panel-range'
36 | }
37 |
38 | if (opts.disabled) input.disabled = true;
39 |
40 | if (opts.log) opts.scale = 'log';
41 |
42 | // Create scale functions for converting to/from the desired scale:
43 | if (opts.scale === 'log') {
44 | scaleValue = function (x) {
45 | return logsign * Math.exp(Math.log(logmin) + (Math.log(logmax) - Math.log(logmin)) * x / 100)
46 | }
47 | scaleValueInverse = function (y) {
48 | return (Math.log(y * logsign) - Math.log(logmin)) * 100 / (Math.log(logmax) - Math.log(logmin))
49 | }
50 | } else {
51 | scaleValue = scaleValueInverse = function (x) { return x }
52 | }
53 |
54 | // Get initial value:
55 | if (opts.scale === 'log') {
56 | // Get options or set defaults:
57 | opts.max = (isNumeric(opts.max)) ? opts.max : 100
58 | opts.min = (isNumeric(opts.min)) ? opts.min : 0.1
59 |
60 | // Check if all signs are valid:
61 | if (opts.min * opts.max <= 0) {
62 | throw new Error('Log range min/max must have the same sign and not equal zero. Got min = ' + opts.min + ', max = ' + opts.max)
63 | } else {
64 | // Pull these into separate variables so that opts can define the *slider* mapping
65 | logmin = opts.min
66 | logmax = opts.max
67 | logsign = opts.min > 0 ? 1 : -1
68 |
69 | // Got the sign so force these positive:
70 | logmin = Math.abs(logmin)
71 | logmax = Math.abs(logmax)
72 |
73 | // These are now simply 0-100 to which we map the log range:
74 | opts.min = 0
75 | opts.max = 100
76 |
77 | // Step is invalid for a log range:
78 | if (isNumeric(opts.step)) {
79 | throw new Error('Log may only use steps (integer number of steps), not a step value. Got step =' + opts.step)
80 | }
81 | // Default step is simply 1 in linear slider space:
82 | opts.step = 1
83 | }
84 |
85 | opts.value = scaleValueInverse(isNumeric(opts.value) ? opts.value : scaleValue((opts.min + opts.max) * 0.5))
86 |
87 | if (opts.value * scaleValueInverse(opts.max) <= 0) {
88 | throw new Error('Log range initial value must have the same sign as min/max and must not equal zero. Got initial value = ' + opts.value)
89 | }
90 | } else {
91 | // If linear, this is much simpler:
92 | opts.max = (isNumeric(opts.max)) ? opts.max : 100
93 | opts.min = (isNumeric(opts.min)) ? opts.min : 0
94 | opts.step = (isNumeric(opts.step)) ? opts.step : (opts.max - opts.min) / 100
95 |
96 | opts.value = isNumeric(opts.value) ? opts.value : (opts.min + opts.max) * 0.5
97 | }
98 |
99 | // If we got a number of steps, use that instead:
100 | if (isNumeric(opts.steps)) {
101 | opts.step = isNumeric(opts.steps) ? (opts.max - opts.min) / opts.steps : opts.step
102 | }
103 |
104 | // Quantize the initial value to the requested step:
105 | var initialStep = Math.round((opts.value - opts.min) / opts.step)
106 | opts.value = opts.min + opts.step * initialStep
107 |
108 | //preser container data for display
109 | opts.container.setAttribute('data-min', opts.min);
110 | opts.container.setAttribute('data-max', opts.max);
111 |
112 | if (opts.scale === 'log') {
113 | //FIXME: not every log is of precision 3
114 | var prec = opts.precision != null ? opts.precision : 3;
115 | }
116 | else {
117 | if (opts.step) {
118 | var prec = opts.precision != null ? opts.precision : precision(opts.step);
119 | }
120 | else if (opts.steps) {
121 | var prec = opts.precision != null ? opts.precision : precision( (opts.max - opts.min) / opts.steps );
122 | }
123 | }
124 |
125 | var value = require('./value')({
126 | id: opts.id,
127 | container: opts.container,
128 | className: 'settings-panel-range-value',
129 | value: scaleValue(opts.value).toFixed(prec),
130 | type: opts.scale === 'log' ? 'text' : 'number',
131 | min: scaleValue(opts.min),
132 | max: scaleValue(opts.max),
133 | disabled: opts.disabled,
134 | //FIXME: step here might vary
135 | step: opts.step,
136 | input: (v) => {
137 | let scaledValue = scaleValueInverse(v)
138 | input.value = scaledValue;
139 | value.title = input.value;
140 | // value.value = v
141 | this.emit('input', v);
142 | input.setAttribute('value', scaledValue.toFixed(0))
143 | opts.container.style.setProperty('--value', scaledValue + '%');
144 | opts.container.style.setProperty('--coef', scaledValue/100);
145 | }
146 | });
147 |
148 | // Set value on the input itself:
149 | input.min = opts.min
150 | input.max = opts.max
151 | input.step = opts.step
152 | input.value = opts.value
153 | let v = 100 * (opts.value - opts.min) / (opts.max - opts.min);
154 | input.setAttribute('value', v.toFixed(0))
155 | opts.container.style.setProperty('--value', v + '%');
156 | opts.container.style.setProperty('--coef', v/100);
157 |
158 | setTimeout(() => {
159 | this.emit('init', parseFloat(value.value))
160 | });
161 |
162 | input.oninput = (data) => {
163 | var scaledValue = scaleValue(parseFloat(data.target.value));
164 | value.value = scaledValue.toFixed(prec);
165 | let v = 100 * (data.target.value - opts.min) / (opts.max - opts.min);
166 | input.setAttribute('value', v.toFixed(0));
167 | opts.container.style.setProperty('--value', v + '%');
168 | opts.container.style.setProperty('--coef', v/100);
169 | value.title = scaledValue;
170 | this.emit('input', scaledValue);
171 | }
172 |
173 | return this;
174 | }
175 |
--------------------------------------------------------------------------------
/src/select.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var EventEmitter = require('events').EventEmitter
4 | var inherits = require('inherits')
5 | var format = require('param-case')
6 |
7 | module.exports = Select
8 | inherits(Select, EventEmitter)
9 |
10 | function Select (opts) {
11 | if (!(this instanceof Select)) return new Select(opts);
12 |
13 | this.update(opts);
14 | }
15 |
16 | Select.prototype.update = function (opts) {
17 | var i, container, input, downTriangle, upTriangle, key, option, el, keys
18 |
19 | opts.container.innerHTML = '';
20 |
21 | input = document.createElement('select')
22 | input.id = opts.id
23 | input.className = 'settings-panel-select';
24 | input.title = opts.title || opts.label;
25 |
26 | if (opts.disabled) input.disabled = true;
27 |
28 | downTriangle = document.createElement('span')
29 | downTriangle.className = 'settings-panel-select-triangle settings-panel-select-triangle--down'
30 |
31 | upTriangle = document.createElement('span')
32 | upTriangle.className = 'settings-panel-select-triangle settings-panel-select-triangle--up'
33 |
34 | if (Array.isArray(opts.options)) {
35 | for (let i = 0; i < opts.options.length; i++) {
36 | option = opts.options[i]
37 | el = document.createElement('option')
38 | el.value = el.textContent = option
39 | if (opts.value === option) {
40 | el.selected = 'selected'
41 | }
42 | input.appendChild(el)
43 | }
44 | } else {
45 | keys = Object.keys(opts.options)
46 | for (let i = 0; i < keys.length; i++) {
47 | key = keys[i]
48 | el = document.createElement('option')
49 | el.value = key
50 | if (opts.value === key) {
51 | el.selected = 'selected'
52 | }
53 | el.textContent = opts.options[key]
54 | input.appendChild(el)
55 | }
56 | }
57 |
58 | opts.container.appendChild(input)
59 | opts.container.appendChild(downTriangle)
60 | opts.container.appendChild(upTriangle)
61 |
62 | setTimeout(() => {
63 | this.emit('init', opts.value)
64 | })
65 |
66 | input.onchange = (data) => {
67 | this.emit('input', data.target.value)
68 | }
69 |
70 | return this;
71 | }
72 |
--------------------------------------------------------------------------------
/src/switch.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const inherits = require('inherits');
4 | const Emitter = require('events').EventEmitter;
5 | const format = require('param-case');
6 | const extend = require('just-extend');
7 |
8 | module.exports = Switch;
9 |
10 | inherits(Switch, Emitter);
11 |
12 | function Switch (opts) {
13 | if (!(this instanceof Switch)) return new Switch(opts);
14 |
15 | this.switch = opts.container.querySelector('.settings-panel-switch');
16 |
17 | if (!this.switch) {
18 | this.switch = document.createElement('fieldset');
19 | this.switch.className = 'settings-panel-switch';
20 | opts.container.appendChild(this.switch);
21 |
22 | var html = '';
23 |
24 | if (Array.isArray(opts.options)) {
25 | for (let i = 0; i < opts.options.length; i++) {
26 | let option = opts.options[i]
27 | html += createOption(option, option);
28 | }
29 | } else {
30 | for (let key in opts.options) {
31 | html += createOption(opts.options[key], key);
32 | }
33 | }
34 |
35 | this.switch.innerHTML = html;
36 |
37 | this.switch.onchange = (e) => {
38 | this.emit('input', e.target.getAttribute('data-value'));
39 | }
40 |
41 | setTimeout(() => {
42 | this.emit('init', opts.value)
43 | })
44 | }
45 |
46 | this.switch.id = opts.id;
47 |
48 | this.update(opts);
49 |
50 | function createOption (label, value) {
51 | let htmlFor = `settings-panel-${format(opts.panel.id)}-${format(opts.id)}-input-${format(value)}`;
52 |
53 | let html = `${label} `;
54 | return html;
55 | }
56 | }
57 |
58 | Switch.prototype.update = function (opts) {
59 | return this;
60 | }
--------------------------------------------------------------------------------
/src/text.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const EventEmitter = require('events').EventEmitter
4 | const inherits = require('inherits')
5 | const css = require('dom-css')
6 | const num = require('input-number');
7 | const extend = require('just-extend');
8 |
9 | module.exports = Text
10 | inherits(Text, EventEmitter)
11 |
12 | function Text (opts) {
13 | if (!(this instanceof Text)) return new Text(opts)
14 |
15 | let element = opts.container.querySelector('.settings-panel-text');
16 |
17 | if (!element) {
18 | element = opts.container.appendChild(document.createElement('input'));
19 | element.className = 'settings-panel-text';
20 | num(element);
21 |
22 | if (opts.placeholder) element.placeholder = opts.placeholder;
23 |
24 | this.element = element;
25 |
26 | element.oninput = (data) => {
27 | this.emit('input', data.target.value)
28 | }
29 | setTimeout(() => {
30 | this.emit('init', element.value)
31 | });
32 | }
33 |
34 | this.update(opts);
35 | }
36 |
37 | Text.prototype.update = function (opts) {
38 | extend(this, opts);
39 | this.element.type = this.type
40 | this.element.id = this.id
41 | this.element.value = this.value || ''
42 | this.element.disabled = !!this.disabled;
43 | return this;
44 | }
45 |
--------------------------------------------------------------------------------
/src/textarea.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const EventEmitter = require('events').EventEmitter
4 | const inherits = require('inherits')
5 | const css = require('dom-css')
6 | const autosize = require('autosize');
7 | const extend = require('just-extend');
8 |
9 | module.exports = Textarea
10 | inherits(Textarea, EventEmitter)
11 |
12 | function Textarea (opts) {
13 | if (!(this instanceof Textarea)) return new Textarea(opts)
14 |
15 | //
16 | let input = opts.container.querySelector('.settings-panel-textarea');
17 | if (!input) {
18 | input = opts.container.appendChild(document.createElement('textarea'));
19 | input.className = 'settings-panel-textarea';
20 |
21 | this.element = input;
22 |
23 | setTimeout(() => {
24 | this.emit('init', input.value)
25 | autosize.update(input);
26 | })
27 |
28 | input.oninput = (data) => {
29 | this.emit('input', data.target.value)
30 | }
31 |
32 | autosize(input);
33 | }
34 |
35 | this.update(opts);
36 | }
37 |
38 | Textarea.prototype.update = function (opts) {
39 | extend(this, opts);
40 |
41 | this.element.rows = this.rows || 1;
42 | this.element.placeholder = this.placeholder || '';
43 | this.element.id = this.id
44 |
45 | this.element.value = this.value || '';
46 |
47 | this.element.disabled = !!this.disabled;
48 |
49 | autosize.update(this.element);
50 |
51 | return this;
52 | }
--------------------------------------------------------------------------------
/src/value.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const num = require('input-number');
4 |
5 | module.exports = function (opts) {
6 | opts = opts || {}
7 | var value = document.createElement('input');
8 |
9 | num(value, opts);
10 |
11 | if (opts.input) {
12 | value.addEventListener('input', function () {
13 | let v = value.value;
14 | if (opts.type === 'number') v = parseFloat(v);
15 | opts.input(v)
16 | })
17 | }
18 | if (opts.change) {
19 | value.addEventListener('change', function () {
20 | let v = value.value;
21 | if (opts.type === 'number') v = parseFloat(v);
22 | opts.change(v)
23 | })
24 | }
25 |
26 | if (opts.disabled) value.disabled = true;
27 |
28 | value.value = opts.value
29 |
30 | if (opts.id) value.id = opts.id;
31 | value.className = 'settings-panel-value';
32 | if (opts.className) value.className += ' ' + opts.className;
33 | opts.container.appendChild(value);
34 |
35 | //add tip holder after value
36 | let tip = opts.container.appendChild(document.createElement('div'));
37 | tip.className = 'settings-panel-value-tip';
38 |
39 | return value
40 | }
41 |
--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
1 | const createPanel = require('./')
2 | const insertCSS = require('insert-styles');
3 | const css = require('dom-css');
4 | const Picker = require('simple-color-picker');
5 | const Sortable = require('sortablejs');
6 | const color = require('tinycolor2');
7 | const colormap = require('colormap');
8 | const colorScales = require('colormap/colorScales');
9 | let palettes = require('nice-color-palettes/500');
10 |
11 | let colormaps = {};
12 |
13 | for (var name in colorScales) {
14 | if (name === 'alpha') continue;
15 | if (name === 'hsv') continue;
16 | if (name === 'rainbow') continue;
17 | if (name === 'rainbow-soft') continue;
18 | if (name === 'phase') continue;
19 |
20 | colormaps[name] = colormap({
21 | colormap: colorScales[name],
22 | nshades: 16,
23 | format: 'rgbaString'
24 | });
25 | }
26 |
27 | palettes = palettes
28 | //filter not readable palettes
29 | .filter((palette) => {
30 | return color.isReadable(palette[0], palette.slice(-1)[0], {
31 | level:"AA", size:"large"
32 | });
33 | });
34 |
35 | // prepare mobile
36 | var meta = document.createElement('meta')
37 | meta.setAttribute('name', 'viewport')
38 | meta.setAttribute('content', 'width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=0')
39 | document.head.appendChild(meta)
40 |
41 |
42 | insertCSS(`
43 | body {
44 | margin: 0;
45 | position: relative;
46 | min-height: 100vh;
47 | background: url('./images/land.jpg');
48 | background-position: center top;
49 | background-size: cover;
50 | background-attachment: fixed;
51 | }
52 | .settings-panel-preview {
53 | margin: 2em auto;
54 | }
55 | .sidebar {
56 | display: none;
57 | position: fixed;
58 | top: 0;
59 | right: 0;
60 | bottom: 0;
61 | font-size: 12px;
62 | width: 240px;
63 | box-shadow: -1px 0 3px rgba(0,0,0,.05);
64 | }
65 | @media (min-width: 640px) {
66 | .frame {
67 | min-height: 100vh;
68 | position: relative;
69 | width: calc(100% - 240px);
70 | }
71 | .sidebar {
72 | display: block;
73 | }
74 | }
75 | `);
76 |
77 |
78 | const themes = {
79 | none: require('./theme/none'),
80 | // lucy: require('./theme/lucy'),
81 | control: require('./theme/control'),
82 | dragon: require('./theme/dragon'),
83 | // merka: require('./theme/merka'),
84 | json: require('./theme/json'),
85 | flat: require('./theme/flat'),
86 | typer: require('./theme/typer')
87 | };
88 |
89 | var frame = document.createElement('div');
90 | frame.classList.add('frame');
91 | document.body.appendChild(frame);
92 |
93 |
94 | var panel = createPanel([
95 | {type: 'switch', label: 'Switch', options: ['One', 'Two', 'Three'], value: 'One'},
96 | {type: 'range', label: 'Range', min: 0, max: 100, value: 80, help: 'Default slider'},
97 | // {type: 'range', label: 'Range stepped', min: 0, max: 1, step: 0.2, value: 0.6},
98 | // {type: 'range', scale: 'log', label: 'Range log', min: 0.01, max: 100, value: 1},
99 | // {type: 'range', scale: 'log', label: 'Stepped log', min: 0.01, max: 100, steps: 10, value: 1},
100 | // {type: 'range', scale: 'log', label: 'Range -log', min: -0.01, max: -100, value: -1},
101 | // {type: 'range', scale: 'log', label: 'Stepped -log', min: -0.01, max: -100, steps: 10, value: -1},
102 | // {type: 'raw', content: '⚂ ';
178 | css(randomize, {
179 | height: '2em',
180 | width: '2em',
181 | float: 'left',
182 | clear: 'left',
183 | position: 'relative',
184 | marginTop: '.5em',
185 | lineHeight: '2em',
186 | textAlign: 'center'
187 | });
188 | randomize.title = 'Randomize palette';
189 | randomize.onclick = () => {
190 | palette = palettes[Math.floor(Math.random() * palettes.length)];
191 | this.emit('change', palette.slice());
192 | settings.set('palette', palette.slice());
193 | colormap.firstChild.value = 'custom';
194 | };
195 | list.appendChild(randomize);
196 | }
197 |
198 | //add reverse btn
199 | let reverse = list.querySelector('.palette-reverse');
200 | if (!reverse) {
201 | reverse = document.createElement('li');
202 | reverse.className = 'palette-reverse';
203 | reverse.innerHTML = '↻ ';
204 | css(reverse, {
205 | height: '2em',
206 | width: '2em',
207 | float: 'left',
208 | marginTop: '.5em',
209 | lineHeight: '2em',
210 | textAlign: 'center'
211 | });
212 | reverse.title = 'Reverse palette';
213 | reverse.onclick = () => {
214 | palette = palette.reverse();
215 | this.emit('change', palette.slice());
216 | settings.set('palette', palette.slice());
217 | colormap.firstChild.value = 'custom';
218 | };
219 | list.appendChild(reverse);
220 | }
221 |
222 | //add colormap select
223 | let colormap = list.querySelector('.palette-colormap');
224 | if (!colormap) {
225 | colormap = document.createElement('li');
226 | colormap.className = 'palette-colormap';
227 | colormap.innerHTML = `custom ${Object.keys(colormaps).map(key => `${key} `)}