├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── TASKS.md
├── dist
    ├── variaboard.css
    ├── variaboard.js
    ├── variaboard.min.css
    └── variaboard.min.js
├── docs
    ├── css
    │   ├── sourcemaps
    │   │   └── variaboard.min.css.map
    │   └── variaboard.min.css
    ├── index.html
    ├── js
    │   ├── sourcemaps
    │   │   └── variaboard.min.js.map
    │   └── variaboard.min.js
    └── jsdoc
    │   ├── Button.html
    │   ├── Calc.html
    │   ├── Control.html
    │   ├── Ease.html
    │   ├── Range.html
    │   ├── VariaBoard.html
    │   ├── button.js.html
    │   ├── controls_control.js.html
    │   ├── controls_range.js.html
    │   ├── fonts
    │       ├── OpenSans-Bold-webfont.eot
    │       ├── OpenSans-Bold-webfont.svg
    │       ├── OpenSans-Bold-webfont.woff
    │       ├── OpenSans-BoldItalic-webfont.eot
    │       ├── OpenSans-BoldItalic-webfont.svg
    │       ├── OpenSans-BoldItalic-webfont.woff
    │       ├── OpenSans-Italic-webfont.eot
    │       ├── OpenSans-Italic-webfont.svg
    │       ├── OpenSans-Italic-webfont.woff
    │       ├── OpenSans-Light-webfont.eot
    │       ├── OpenSans-Light-webfont.svg
    │       ├── OpenSans-Light-webfont.woff
    │       ├── OpenSans-LightItalic-webfont.eot
    │       ├── OpenSans-LightItalic-webfont.svg
    │       ├── OpenSans-LightItalic-webfont.woff
    │       ├── OpenSans-Regular-webfont.eot
    │       ├── OpenSans-Regular-webfont.svg
    │       ├── OpenSans-Regular-webfont.woff
    │       ├── OpenSans-Semibold-webfont.eot
    │       ├── OpenSans-Semibold-webfont.svg
    │       ├── OpenSans-Semibold-webfont.ttf
    │       ├── OpenSans-Semibold-webfont.woff
    │       ├── OpenSans-SemiboldItalic-webfont.eot
    │       ├── OpenSans-SemiboldItalic-webfont.svg
    │       ├── OpenSans-SemiboldItalic-webfont.ttf
    │       └── OpenSans-SemiboldItalic-webfont.woff
    │   ├── index.html
    │   ├── index.js.html
    │   ├── scripts
    │       ├── linenumber.js
    │       └── prettify
    │       │   ├── Apache-License-2.0.txt
    │       │   ├── lang-css.js
    │       │   └── prettify.js
    │   ├── styles
    │       ├── jsdoc-default.css
    │       ├── prettify-jsdoc.css
    │       └── prettify-tomorrow.css
    │   ├── util_calc.js.html
    │   └── util_ease.js.html
├── gulpfile.js
├── jsdoc.json
├── package.json
└── src
    ├── css
        └── variaboard.css
    └── js
        ├── button.js
        ├── controls
            ├── boolean-control.js
            ├── control.js
            └── range-control.js
        ├── index.js
        └── util
            ├── calc.js
            └── ease.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | end_of_line = lf
 5 | charset = utf-8
 6 | insert_final_newline = true
 7 | indent_style = space
 8 | indent_size = 2
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "node": true,
 5 |     "es6": true
 6 |   },
 7 |   "extends": "eslint:recommended",
 8 |   "plugins": [ "html" ],
 9 |   "settings": {
10 |     "html/indent": "+2" // indentation is the <script> indentation plus two spaces.
11 |   },
12 |   "rules": {
13 |     "indent": [
14 |       "error",
15 |       2,
16 |       { "SwitchCase": 1 }
17 |     ],
18 |     "linebreak-style": [
19 |       "error",
20 |       "unix"
21 |     ],
22 |     "quotes": [
23 |       "error",
24 |       "single"
25 |     ],
26 |     "semi": [
27 |       "error",
28 |       "always"
29 |     ]
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /docs/jsdoc
3 | npm-debug.log
4 | .DS_Store
5 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - "node"
 4 | 
 5 | before_install:
 6 |   - npm install -g gulp-cli
 7 | 
 8 | script:
 9 |   - gulp build
10 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | A rough history of VariaBoard.
 4 | 
 5 | ## 2017-12-29 // v0.1.1
 6 | 
 7 | - Setup JSDoc documentation and process
 8 | - Update name to VariaBoard
 9 | - Verify proper publishing on NPM
10 | - Make general dev progress
11 | 
12 | ## 2017-12-23 // v0.1.0
13 | 
14 | - Move over code from initial CodePen demo
15 | - Start formalizing repo for development
16 | 
17 | ## 2017-10-12 // v0.0.0
18 | 
19 | - Get the itch to make my own control panel plugin, what have I done?
20 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 | 
3 | This project is still in its early stages, but feel free to to give it a go, open issues, open PRs, or suggest changes.
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Jack Rugile
 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 | # VariaBoard
 2 | 
 3 | [![Travis CI](https://img.shields.io/travis/jackrugile/variaboard.svg)](https://travis-ci.org/jackrugile/variaboard/)
 4 | ![Version](https://img.shields.io/github/package-json/v/jackrugile/variaboard.svg)
 5 | [![MIT License](https://img.shields.io/github/license/jackrugile/variaboard.svg)](https://opensource.org/licenses/MIT)
 6 | 
 7 | VariaBoard is a control interface to modify parameters in JavaScript.
 8 | 
 9 | **Note:** *This is still in initial development and will be undergoing major changes. Do not use in production.*
10 | 
11 | - **[GitHub Repository](https://github.com/jackrugile/variaboard)**
12 | - **[Demo](https://jackrugile.github.io/variaboard/)**
13 | - **[Documentation](https://jackrugile.github.io/variaboard/jsdoc/)**
14 | 
15 | ## Inspiration and Reference
16 | 
17 | - dat.GUI - [Demo](https://workshop.chromeexperiments.com/examples/gui/) - [Code](https://github.com/dataarts/dat.gui) - by [Google Data Arts Team @dataarts](https://github.com/dataarts)
18 | - QuickSettings - [Demo](http://bit101.github.io/quicksettings/) - [Code](https://github.com/bit101/quicksettings) - by [Keith Peters @bit101](https://github.com/bit101)
19 | - Bfxr - [Demo](https://www.bfxr.net/) - [Code](https://github.com/increpare/bfxr) - by [Stephen Lavelle @increpare](https://github.com/increpare)
20 | - ControlKit - [Demo](https://github.com/automat/controlkit.js/tree/master/examples) - [Code](https://github.com/automat/controlkit.js) - by [Henryk Wollik @automat](https://github.com/automat)
21 | - Control Panel - [Demo](http://control-panel.surge.sh/) - [Code](https://github.com/freeman-lab/control-panel) - by [Jeremy Freeman @freeman-lab](https://github.com/freeman-lab)
22 | - oui - [Demo](https://github.com/wearekuva/oui/tree/master/examples) - [Code](https://github.com/wearekuva/oui) - by [Kuva @wearekuva](https://github.com/wearekuva)
23 | 


--------------------------------------------------------------------------------
/TASKS.md:
--------------------------------------------------------------------------------
  1 | # Tasks
  2 | 
  3 | ## Controls
  4 | 
  5 | - [x] button
  6 | - [x] range
  7 | - [ ] minMax range
  8 | - [ ] number (no bounds)
  9 | - [x] boolean
 10 | - [ ] select dropdown
 11 | - [ ] multiselect
 12 | - [ ] pad control for two axes
 13 | - [ ] color picker
 14 |   - [ ] not sure how in depth to get there
 15 | 
 16 | ## Common
 17 | 
 18 | - [ ] save preset
 19 | - [ ] select preset
 20 | - [ ] export/import presets
 21 | - [ ] randomize single
 22 | - [ ] mutate single
 23 | - [ ] lock
 24 | - [ ] unlock
 25 | - [ ] config history
 26 | - [ ] collapsible panels
 27 | - [ ] tool tip descriptions
 28 | 
 29 | ## Completed Features
 30 | 
 31 | - [x] animate digits when randomizing
 32 | - [x] prevent text selection when dragging
 33 | - [x] allow for chaining calls
 34 | - [x] allow for multiple instances
 35 | - [x] keyboard mappings for up/down on each input, larger change when shift key is down
 36 | - [x] randomize all
 37 | - [x] mutate all
 38 | - [x] mousewheel up/down, larger change when shift key is down
 39 | - [x] global "changeCallback" for any control changed
 40 | - [x] selection colors
 41 | - [x] set decimal count to amount of step, so that it never jumps
 42 | - [x] able to type in numbers
 43 | - [x] eased value setting is now tracked independently from actual value. actual values will still get rounded to steps properly
 44 | - [x] flash randomize and mutate buttons when all are getting triggered
 45 | - [x] custom easing for randomize and mutate, combine map and ease
 46 | - [x] trigger global onchange only once when multiple controls are changed
 47 | - [x] programmatically set values
 48 | - [x] show suffix/unit
 49 | - [x] control descriptions
 50 | - [x] reset to default functionality
 51 | 
 52 | ## Misc
 53 | 
 54 | - [ ] post set function for mapping to different values?
 55 | - [ ] determine what should be added to base control, and what should be added to specific control types
 56 | - [ ] pinned, floating, or block panel options
 57 | - [ ] store history of changes, like bfxr?
 58 | - [ ] destroy/update method for controls
 59 | - [ ] exponential/function based values ranges?
 60 | - [ ] move styles to only js, or output style block, for simplicity of overrides
 61 | - [ ] pin locations
 62 | - [ ] preset themes
 63 | - [ ] output current settings, and output code to rebuild settings (definitions)
 64 | - [ ] methods to add new controls, or load from initial contructor
 65 | - [ ] list browser compatibility, get polyfills where needed
 66 | - [ ] look in to accessibility concerns
 67 | - [ ] label text and input text aren't perfectly aligned vertically
 68 | - [ ] click and drag up/down on input value to change value? (like dat gui)
 69 | - [ ] does travis need the gulp-cli install?
 70 | - [ ] be able to override global defaults
 71 | - [ ] add css prefixes to JS for transform translateX
 72 | - [ ] onChange, onChangeStart, on onChangeComplete for individua controls?
 73 | - [ ] setup subdomain
 74 | - [ ] destroy methods for whole thing and infividual inputs
 75 | - [ ] ability to add new field between others
 76 | - [ ] scrollbar styles and capability;
 77 | 
 78 | ## Maybes
 79 | 
 80 | - [ ] perhaps remove easing to reduce code size, move to a custom function people can plug in?
 81 | - [ ] can this work for touch devices?
 82 | - [ ] theme builder
 83 | - [ ] map to object, just like dat gui?
 84 | - [ ] color coding options
 85 | - [ ] set custom mutation ratio
 86 | 
 87 | ## Docs
 88 | 
 89 | - [ ] complete all JSDoc docs
 90 | - [ ] add getting started and more helpful basic docs
 91 | - [ ] provide common demos and examples
 92 | 
 93 | ## Design
 94 | 
 95 | - [ ] logo
 96 | - [ ] favicon
 97 | 
 98 | ## Non Plugin Code
 99 | 
100 | - [x] publish on npm
101 | - [x] changelog
102 | - [x] semver releases
103 | - [x] yarn
104 | - [x] UMD
105 | - [x] shields/badges
106 | - [x] travis
107 | - [x] editor config
108 | - [x] jsdoc for classes and methods
109 | - [x] 'use strict';
110 | - [x] eslint
111 | - [ ] road map
112 | - [ ] bower
113 | - [ ] cdnjs
114 | - [ ] unpkg
115 | - [ ] jsdelivr
116 | - [ ] tests
117 | 


--------------------------------------------------------------------------------
/dist/variaboard.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * VariaBoard Panel
  3 |  */
  4 | 
  5 | .variaboard-panel,
  6 | .variaboard-panel * {
  7 |   box-sizing: border-box;
  8 | }
  9 | 
 10 | .variaboard-panel {
 11 |   background: #000;
 12 |   border: 1px solid #000;
 13 |   color: #fff;
 14 |   font-family: source code pro, monospace;
 15 |   font-size: 14px;
 16 |   left: 0;
 17 |   max-height: 100%;
 18 |   max-width: 300px;
 19 |   overflow: auto;
 20 |   position: fixed;
 21 |   top: 0;
 22 |   transition: opacity 200ms;
 23 |   width: 100%;
 24 |   z-index: 99;
 25 |   -webkit-touch-callout: none;
 26 |   -webkit-user-select: none;
 27 |   -moz-user-select: none;
 28 |   -ms-user-select: none;
 29 |   user-select: none;
 30 | }
 31 | 
 32 | /**
 33 |  * Selections
 34 |  */
 35 | 
 36 | .variaboard-title::-moz-selection,
 37 | .variaboard-control-title::-moz-selection,
 38 | .variaboard-control-value::-moz-selection,
 39 | .variaboard-button::-moz-selection {
 40 |   background: #fff;
 41 |   color: #000;
 42 | }
 43 | 
 44 | .variaboard-title::selection,
 45 | .variaboard-control-title::selection,
 46 | .variaboard-control-value::selection,
 47 | .variaboard-button::selection {
 48 |   background: #fff;
 49 |   color: #000;
 50 | }
 51 | 
 52 | .variaboard-title::-moz-selection,
 53 | .variaboard-control-title::-moz-selection,
 54 | .variaboard-control-value::-moz-selection,
 55 | .variaboard-button::-moz-selection {
 56 |   background: #fff;
 57 |   color: #000;
 58 | }
 59 | 
 60 | /**
 61 |  * VariaBoard Title
 62 |  */
 63 | 
 64 | .variaboard-title {
 65 |   background: #111;
 66 |   color: #fff;
 67 |   cursor: pointer;
 68 |   height: 28px;
 69 |   font-size: 0.8em;
 70 |   font-weight: 700;
 71 |   line-height: 28px;
 72 |   margin: 0 0 1px;
 73 |   overflow: hidden;
 74 |   padding: 0 1.5em;
 75 |   text-overflow: ellipsis;
 76 |   white-space: nowrap;
 77 | }
 78 | 
 79 | .variaboard-panel-is-collapsed .variaboard-title {
 80 |   margin-bottom: 0;
 81 | }
 82 | 
 83 | /**
 84 |  * Controls
 85 |  */
 86 | 
 87 | .variaboard-controls {
 88 | }
 89 | 
 90 | .variaboard-panel-is-collapsed .variaboard-controls {
 91 |   display: none;
 92 | }
 93 | 
 94 | /**
 95 |  * Control
 96 |  */
 97 | 
 98 | .variaboard-control {
 99 |   border-left: 3px solid #444;
100 |   display: -webkit-box;
101 |   display: flex;
102 |   height: 28px;
103 |   margin-bottom: 1px;
104 |   transition: background 200ms, border-color 200ms;
105 | }
106 | 
107 | .variaboard-control:hover {
108 |   border-left-color: #666;
109 |   transition-duration: 0ms;
110 | }
111 | 
112 | .variaboard-control:last-child {
113 |   margin-bottom: 0;
114 | }
115 | 
116 | /**
117 |  * Control Title
118 |  */
119 | 
120 | .variaboard-control-title {
121 |   -webkit-box-align: center;
122 |           align-items: center;
123 |   background: #222;
124 |   border-left: 1px solid #000;
125 |   color: #bbb;
126 |   cursor: pointer;
127 |   display: -webkit-box;
128 |   display: flex;
129 |   -webkit-box-flex: 0;
130 |           flex: 0 0 110px;
131 |   font-size: 0.8em;
132 |   font-weight: 400;
133 |   -webkit-box-pack: end;
134 |           justify-content: flex-end;
135 |   line-height: 1;
136 |   margin: 0 1px 0 0;
137 |   overflow: hidden;
138 |   padding: 0.6em 0.75em;
139 |   text-align: right;
140 |   text-overflow: ellipsis;
141 |   transition: color 200ms;
142 |   white-space: nowrap;
143 | }
144 | 
145 | .variaboard-control:hover .variaboard-control-title {
146 |   color: #fff;
147 |   transition-duration: 0ms;
148 | }
149 | 
150 | /**
151 |  * Control Checkbox
152 |  */
153 | 
154 | .variaboard-control-checkbox-wrap {
155 |   -webkit-box-align: center;
156 |           align-items: center;
157 |   background: #111;
158 |   border: 1px solid #111;
159 |   cursor: pointer;
160 |   display: -webkit-box;
161 |   display: flex;
162 |   -webkit-box-flex: 0;
163 |           flex: 0 0 80px;
164 |   margin: 0 1px 0 0;
165 |   padding: 0 0.6em;
166 |   position: relative;
167 | }
168 | 
169 | .variaboard-control-checkbox {
170 |   cursor: pointer;
171 |   opacity: 0;
172 |   position: absolute
173 | }
174 | 
175 | .variaboard-control-checkbox-indicator {
176 |   -webkit-box-align: center;
177 |           align-items: center;
178 |   background: none;
179 |   border: 1px solid #333;
180 |   cursor: pointer;
181 |   display: -webkit-box;
182 |   display: flex;
183 |   height: 1.2em;
184 |   -webkit-box-pack: center;
185 |           justify-content: center;
186 |   transition: background 200ms;
187 |   width: 1.2em;
188 | }
189 | 
190 | .variaboard-control-checkbox-indicator:before {
191 |   color: #bbb;
192 |   content: '\2713';
193 |   font-size: 0.8em;
194 |   opacity: 0;
195 |   transition: color 200ms, opacity 200ms;
196 | }
197 | 
198 | .variaboard-control.variaboard-control-is-focused .variaboard-control-checkbox-indicator {
199 |   border-color: #fff;
200 | }
201 | 
202 | .variaboard-control-checkbox:checked ~ .variaboard-control-checkbox-indicator {
203 |   background: #222;
204 | }
205 | 
206 | .variaboard-control-checkbox:checked ~ .variaboard-control-checkbox-indicator:before {
207 |   opacity: 1;
208 | }
209 | 
210 | .variaboard-control:hover .variaboard-control-checkbox:checked ~ .variaboard-control-checkbox-indicator:before {
211 |   color: #fff;
212 | }
213 | 
214 | .variaboard-control.variaboard-control-is-focused .variaboard-control-checkbox:checked ~ .variaboard-control-checkbox-indicator:before {
215 |   color: #fff;
216 | }
217 | 
218 | .variaboard-control-title:active ~ .variaboard-control-checkbox-wrap .variaboard-control-checkbox-indicator,
219 | .variaboard-control-checkbox-wrap:active .variaboard-control-checkbox-indicator {
220 |   border-color: #fff;
221 | }
222 | 
223 | .variaboard-control-checkbox-stub {
224 |   background: #111;
225 |   -webkit-box-flex: 1;
226 |           flex: 1 1 auto;
227 | }
228 | 
229 | /**
230 |  * Control Value
231 |  */
232 | 
233 | .variaboard-control-value-wrap {
234 |   -webkit-box-flex: 0;
235 |           flex: 0 0 80px;
236 |   margin: 0 1px 0 0;
237 | }
238 | 
239 | .variaboard-control-value {
240 |   background: #111;
241 |   border: 1px solid #111;
242 |   border-radius: 0;
243 |   color: #bbb;
244 |   font-family: inherit;
245 |   font-size: 0.8em;
246 |   font-weight: 400;
247 |   height: 100%;
248 |   line-height: 1;
249 |   margin: 0;
250 |   padding: 0.6em 0.75em;
251 |   transition: color 200ms, border-color 200ms;
252 |   width: 100%;
253 |   -webkit-appearance: none;
254 | }
255 | 
256 | .variaboard-control:hover .variaboard-control-value {
257 |   color: #fff;
258 |   transition-duration: 0ms;
259 | }
260 | 
261 | .variaboard-control-value:focus {
262 |   border-color: #fff;
263 |   color: #fff;
264 |   outline: none;
265 |   transition-duration: 0ms;
266 | }
267 | 
268 | /**
269 |  * Button
270 |  */
271 | 
272 | .variaboard-button {
273 |   -webkit-box-align: center;
274 |           align-items: center;
275 |   background: linear-gradient(#333 50%, #222 50%);
276 |   border: none;
277 |   border-left: 1px solid #000;
278 |   border-radius: 0;
279 |   color: #bbb;
280 |   cursor: pointer;
281 |   display: -webkit-box;
282 |   display: flex;
283 |   font-family: inherit;
284 |   font-size: 0.8em;
285 |   font-weight: 700;
286 |   height: 100%;
287 |   line-height: 1;
288 |   margin: 0;
289 |   padding: 0 1.5em;
290 |   position: relative;
291 |   text-align: left;
292 |   text-decoration: none;
293 |   transition: color 200ms;
294 |   width: 100%;
295 |   -webkit-appearance: none;
296 | }
297 | 
298 | .variaboard-button:after {
299 |   background: #fff;
300 |   bottom: 0;
301 |   content: '';
302 |   left: 0;
303 |   opacity: 0;
304 |   position: absolute;
305 |   right: 0;
306 |   top: 0;
307 |   transition: opacity 200ms;
308 | }
309 | 
310 | .variaboard-button:hover {
311 |   color: #fff;
312 |   transition-duration: 0ms;
313 | }
314 | 
315 | .variaboard-button:active {
316 |   transition-duration: 0ms;
317 | }
318 | 
319 | .variaboard-button:active:after {
320 |   opacity: 0.3;
321 |   transition-duration: 0ms;
322 | }
323 | 
324 | .variaboard-button:focus {
325 |   box-shadow: inset 0 0 0 1px #fff;
326 |   outline: none;
327 | }
328 | 
329 | /**
330 |  * Control Range
331 |  */
332 | 
333 | .variaboard-control-range {
334 |   background: #111;
335 |   cursor: ew-resize;
336 |   cursor: -webkit-grab;
337 |   cursor: grab;
338 |   -webkit-box-flex: 1;
339 |           flex: 1 1 auto;
340 |   overflow: hidden;
341 |   position: relative;
342 | }
343 | 
344 | .variaboard-control.variaboard-control-is-dragging .variaboard-control-range {
345 |   cursor: ew-resize;
346 |   cursor: -webkit-grabbing;
347 |   cursor: grabbing;
348 | }
349 | 
350 | .variaboard-control-range-inner {
351 |   background: #222;
352 |   height: 101%;
353 |   left: 0;
354 |   position: absolute;
355 |   right: 1px;
356 |   top: 0;
357 |   -webkit-transform: translateX(-100%);
358 |           transform: translateX(-100%);
359 |   transition: background 200ms, -webkit-transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
360 |   transition: background 200ms, transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
361 |   transition: background 200ms, transform 300ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
362 | }
363 | 
364 | .variaboard-control-range-inner:after {
365 |   background: linear-gradient(#999, #444);
366 |   bottom: 0;
367 |   content: '';
368 |   left: 100%;
369 |   position: absolute;
370 |   top: 0;
371 |   transition: background 200ms;
372 |   width: 1px;
373 | }
374 | 
375 | .variaboard-control.variaboard-control-eased .variaboard-control-range-inner {
376 |   transition: background 200ms;
377 | }
378 | 
379 | .variaboard-control:hover .variaboard-control-range-inner {
380 |   background: #333;
381 |   transition-duration: 0ms;
382 | }
383 | 
384 | .variaboard-control.variaboard-control-is-dragging .variaboard-control-range-inner {
385 |   transition-duration: 0ms;
386 | }
387 | 


--------------------------------------------------------------------------------
/dist/variaboard.min.css:
--------------------------------------------------------------------------------
1 | .variaboard-panel,.variaboard-panel *{box-sizing:border-box}.variaboard-panel{background:#000;border:1px solid #000;color:#fff;font-family:source code pro,monospace;font-size:14px;left:0;max-height:100%;max-width:300px;overflow:auto;position:fixed;top:0;transition:opacity .2s;width:100%;z-index:1;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.variaboard-button::selection,.variaboard-control-title::selection,.variaboard-control-value::selection,.variaboard-title::selection{background:#fff;color:#000}.variaboard-button::-moz-selection,.variaboard-control-title::-moz-selection,.variaboard-control-value::-moz-selection,.variaboard-title::-moz-selection{background:#fff;color:#000}.variaboard-title{background:#111;color:#fff;cursor:pointer;height:28px;font-size:.8em;font-weight:700;line-height:28px;margin:0 0 1px;overflow:hidden;padding:0 1.5em;text-overflow:ellipsis;white-space:nowrap}.variaboard-panel-is-collapsed .variaboard-title{margin-bottom:0}.variaboard-panel-is-collapsed .variaboard-controls{display:none}.variaboard-control{border-left:3px solid #444;display:-webkit-box;display:flex;height:28px;margin-bottom:1px;transition:background .2s,border-color .2s}.variaboard-control:hover{border-left-color:#666;transition-duration:0ms}.variaboard-control:last-child{margin-bottom:0}.variaboard-control-title{-webkit-box-align:center;align-items:center;background:#222;border-left:1px solid #000;color:#bbb;cursor:pointer;display:-webkit-box;display:flex;-webkit-box-flex:0;flex:0 0 110px;font-size:.8em;font-weight:400;-webkit-box-pack:end;justify-content:flex-end;line-height:1;margin:0 1px 0 0;overflow:hidden;padding:.6em .75em;text-align:right;text-overflow:ellipsis;transition:color .2s;white-space:nowrap}.variaboard-control:hover .variaboard-control-title{color:#fff;transition-duration:0ms}.variaboard-control-checkbox-wrap{-webkit-box-align:center;align-items:center;background:#111;border:1px solid #111;cursor:pointer;display:-webkit-box;display:flex;-webkit-box-flex:0;flex:0 0 80px;margin:0 1px 0 0;padding:0 .6em;position:relative}.variaboard-control-checkbox{cursor:pointer;opacity:0;position:absolute}.variaboard-control-checkbox-indicator{-webkit-box-align:center;align-items:center;background:none;border:1px solid #333;cursor:pointer;display:-webkit-box;display:flex;height:1.2em;-webkit-box-pack:center;justify-content:center;transition:background .2s;width:1.2em}.variaboard-control-checkbox-indicator:before{color:#bbb;content:"\2713";font-size:.8em;opacity:0;transition:color .2s,opacity .2s}.variaboard-control.variaboard-control-is-focused .variaboard-control-checkbox-indicator{border-color:#fff}.variaboard-control-checkbox:checked~.variaboard-control-checkbox-indicator{background:#222}.variaboard-control-checkbox:checked~.variaboard-control-checkbox-indicator:before{opacity:1}.variaboard-control.variaboard-control-is-focused .variaboard-control-checkbox:checked~.variaboard-control-checkbox-indicator:before,.variaboard-control:hover .variaboard-control-checkbox:checked~.variaboard-control-checkbox-indicator:before{color:#fff}.variaboard-control-checkbox-wrap:active .variaboard-control-checkbox-indicator,.variaboard-control-title:active~.variaboard-control-checkbox-wrap .variaboard-control-checkbox-indicator{border-color:#fff}.variaboard-control-checkbox-stub{background:#111;-webkit-box-flex:1;flex:1 1 auto}.variaboard-control-value-wrap{-webkit-box-flex:0;flex:0 0 80px;margin:0 1px 0 0}.variaboard-control-value{background:#111;border:1px solid #111;border-radius:0;color:#bbb;font-family:inherit;font-size:.8em;font-weight:400;height:100%;line-height:1;margin:0;padding:.6em .75em;transition:color .2s,border-color .2s;width:100%;-webkit-appearance:none}.variaboard-control-value:focus,.variaboard-control:hover .variaboard-control-value{color:#fff;transition-duration:0ms}.variaboard-control-value:focus{border-color:#fff;outline:none}.variaboard-button{-webkit-box-align:center;align-items:center;background:linear-gradient(#333 50%,#222 0);border:none;border-left:1px solid #000;border-radius:0;color:#bbb;cursor:pointer;display:-webkit-box;display:flex;font-family:inherit;font-size:.8em;font-weight:700;height:100%;line-height:1;margin:0;padding:0 1.5em;position:relative;text-align:left;text-decoration:none;transition:color .2s;width:100%;-webkit-appearance:none}.variaboard-button:after{background:#fff;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s}.variaboard-button:hover{color:#fff;transition-duration:0ms}.variaboard-button:active{transition-duration:0ms}.variaboard-button:active:after{opacity:.3;transition-duration:0ms}.variaboard-button:focus{box-shadow:inset 0 0 0 1px #fff;outline:none}.variaboard-control-range{background:#111;cursor:ew-resize;cursor:-webkit-grab;cursor:grab;-webkit-box-flex:1;flex:1 1 auto;overflow:hidden;position:relative}.variaboard-control.variaboard-control-is-dragging .variaboard-control-range{cursor:ew-resize;cursor:-webkit-grabbing;cursor:grabbing}.variaboard-control-range-inner{background:#222;height:101%;left:0;position:absolute;right:1px;top:0;-webkit-transform:translateX(-100%);transform:translateX(-100%);transition:background .2s,-webkit-transform .3s cubic-bezier(.19,1,.22,1);transition:background .2s,transform .3s cubic-bezier(.19,1,.22,1);transition:background .2s,transform .3s cubic-bezier(.19,1,.22,1),-webkit-transform .3s cubic-bezier(.19,1,.22,1)}.variaboard-control-range-inner:after{background:linear-gradient(#999,#444);bottom:0;content:"";left:100%;position:absolute;top:0;transition:background .2s;width:1px}.variaboard-control.variaboard-control-eased .variaboard-control-range-inner{transition:background .2s}.variaboard-control:hover .variaboard-control-range-inner{background:#333;transition-duration:0ms}.variaboard-control.variaboard-control-is-dragging .variaboard-control-range-inner{transition-duration:0ms}


--------------------------------------------------------------------------------
/docs/css/sourcemaps/variaboard.min.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["variaboard.min.css"],"names":[],"mappings":"AAIA,sCAEE,qBAAuB,CACxB,AAED,kBACE,gBAAiB,AACjB,sBAAuB,AACvB,WAAY,AACZ,sCAAwC,AACxC,eAAgB,AAChB,OAAQ,AACR,gBAAiB,AACjB,gBAAiB,AACjB,cAAe,AACf,eAAgB,AAChB,MAAO,AACP,uBAA0B,AAC1B,WAAY,AACZ,UAAY,AACZ,2BAA4B,AAC5B,yBAA0B,AAE1B,sBAAuB,AACvB,qBAAsB,AACtB,gBAAkB,CACnB,AAMD,qIAIE,gBAAiB,AACjB,UAAY,CACb,AAED,yJAIE,gBAAiB,AACjB,UAAY,CACb,AAMD,kBACE,gBAAiB,AACjB,WAAY,AACZ,eAAgB,AAChB,YAAa,AACb,eAAiB,AACjB,gBAAiB,AACjB,iBAAkB,AAClB,eAAgB,AAChB,gBAAiB,AACjB,gBAAiB,AACjB,uBAAwB,AACxB,kBAAoB,CACrB,AAED,iDACE,eAAiB,CAClB,AASD,oDACE,YAAc,CACf,AAMD,oBACE,2BAA4B,AAC5B,oBAAc,AAAd,aAAc,AACd,YAAa,AACb,kBAAmB,AACnB,0CAAiD,CAClD,AAED,0BACE,uBAAwB,AACxB,uBAAyB,CAC1B,AAED,+BACE,eAAiB,CAClB,AAMD,0BACE,yBAAoB,AAApB,mBAAoB,AACpB,gBAAiB,AACjB,2BAA4B,AAC5B,WAAY,AACZ,eAAgB,AAChB,oBAAc,AAAd,aAAc,AACd,mBAAgB,AAAhB,eAAgB,AAChB,eAAiB,AACjB,gBAAiB,AACjB,qBAA0B,AAA1B,yBAA0B,AAC1B,cAAe,AACf,iBAAkB,AAClB,gBAAiB,AACjB,mBAAsB,AACtB,iBAAkB,AAClB,uBAAwB,AACxB,qBAAwB,AACxB,kBAAoB,CACrB,AAED,oDACE,WAAY,AACZ,uBAAyB,CAC1B,AAMD,kCACE,yBAAoB,AAApB,mBAAoB,AACpB,gBAAiB,AACjB,sBAAuB,AACvB,eAAgB,AAChB,oBAAc,AAAd,aAAc,AACd,mBAAe,AAAf,cAAe,AACf,iBAAkB,AAClB,eAAiB,AACjB,iBAAmB,CACpB,AAED,6BACE,eAAgB,AAChB,UAAW,AACX,iBAAkB,CACnB,AAED,uCACE,yBAAoB,AAApB,mBAAoB,AACpB,gBAAiB,AACjB,sBAAuB,AACvB,eAAgB,AAChB,oBAAc,AAAd,aAAc,AACd,aAAc,AACd,wBAAwB,AAAxB,uBAAwB,AACxB,0BAA6B,AAC7B,WAAa,CACd,AAED,8CACE,WAAY,AACZ,gBAAiB,AACjB,eAAiB,AACjB,UAAW,AACX,gCAAuC,CACxC,AAED,yFACE,iBAAmB,CACpB,AAED,4EACE,eAAiB,CAClB,AAED,mFACE,SAAW,CACZ,AAMD,kPACE,UAAY,CACb,AAED,0LAEE,iBAAmB,CACpB,AAED,kCACE,gBAAiB,AACjB,mBAAe,AAAf,aAAe,CAChB,AAMD,+BACE,mBAAe,AAAf,cAAe,AACf,gBAAkB,CACnB,AAED,0BACE,gBAAiB,AACjB,sBAAuB,AACvB,gBAAiB,AACjB,WAAY,AACZ,oBAAqB,AACrB,eAAiB,AACjB,gBAAiB,AACjB,YAAa,AACb,cAAe,AACf,SAAU,AACV,mBAAsB,AACtB,sCAA4C,AAC5C,WAAY,AACZ,uBAAyB,CAC1B,AAOD,oFAJE,WAAY,AACZ,uBAAyB,CAQ1B,AALD,gCACE,kBAAmB,AAEnB,YAAc,CAEf,AAMD,mBACE,yBAAoB,AAApB,mBAAoB,AACpB,4CAAgD,AAChD,YAAa,AACb,2BAA4B,AAC5B,gBAAiB,AACjB,WAAY,AACZ,eAAgB,AAChB,oBAAc,AAAd,aAAc,AACd,oBAAqB,AACrB,eAAiB,AACjB,gBAAiB,AACjB,YAAa,AACb,cAAe,AACf,SAAU,AACV,gBAAiB,AACjB,kBAAmB,AACnB,gBAAiB,AACjB,qBAAsB,AACtB,qBAAwB,AACxB,WAAY,AACZ,uBAAyB,CAC1B,AAED,yBACE,gBAAiB,AACjB,SAAU,AACV,WAAY,AACZ,OAAQ,AACR,UAAW,AACX,kBAAmB,AACnB,QAAS,AACT,MAAO,AACP,sBAA0B,CAC3B,AAED,yBACE,WAAY,AACZ,uBAAyB,CAC1B,AAED,0BACE,uBAAyB,CAC1B,AAED,gCACE,WAAa,AACb,uBAAyB,CAC1B,AAED,yBACE,gCAAiC,AACjC,YAAc,CACf,AAMD,0BACE,gBAAiB,AACjB,iBAAkB,AAClB,oBAAa,AAAb,YAAa,AACb,mBAAe,AAAf,cAAe,AACf,gBAAiB,AACjB,iBAAmB,CACpB,AAED,6EACE,iBAAkB,AAClB,wBAAiB,AAAjB,eAAiB,CAClB,AAED,gCACE,gBAAiB,AACjB,YAAa,AACb,OAAQ,AACR,kBAAmB,AACnB,UAAW,AACX,MAAO,AACP,oCAA6B,AAA7B,4BAA6B,AAC7B,0EAA6E,AAA7E,kEAA6E,AAA7E,iHAA6E,CAC9E,AAED,sCACE,sCAAwC,AACxC,SAAU,AACV,WAAY,AACZ,UAAW,AACX,kBAAmB,AACnB,MAAO,AACP,0BAA6B,AAC7B,SAAW,CACZ,AAED,6EACE,yBAA6B,CAC9B,AAED,0DACE,gBAAiB,AACjB,uBAAyB,CAC1B,AAED,mFACE,uBAAyB,CAC1B","file":"../variaboard.min.css","sourcesContent":["/**\n * VariaBoard Panel\n */\n\n.variaboard-panel,\n.variaboard-panel * {\n  box-sizing: border-box;\n}\n\n.variaboard-panel {\n  background: #000;\n  border: 1px solid #000;\n  color: #fff;\n  font-family: source code pro, monospace;\n  font-size: 14px;\n  left: 0;\n  max-height: 100%;\n  max-width: 300px;\n  overflow: auto;\n  position: fixed;\n  top: 0;\n  transition: opacity 200ms;\n  width: 100%;\n  z-index: 99;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -khtml-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n/**\n * Selections\n */\n\n.variaboard-title::selection,\n.variaboard-control-title::selection,\n.variaboard-control-value::selection,\n.variaboard-button::selection {\n  background: #fff;\n  color: #000;\n}\n\n.variaboard-title::-moz-selection,\n.variaboard-control-title::-moz-selection,\n.variaboard-control-value::-moz-selection,\n.variaboard-button::-moz-selection {\n  background: #fff;\n  color: #000;\n}\n\n/**\n * VariaBoard Title\n */\n\n.variaboard-title {\n  background: #111;\n  color: #fff;\n  cursor: pointer;\n  height: 28px;\n  font-size: 0.8em;\n  font-weight: 700;\n  line-height: 28px;\n  margin: 0 0 1px;\n  overflow: hidden;\n  padding: 0 1.5em;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.variaboard-panel-is-collapsed .variaboard-title {\n  margin-bottom: 0;\n}\n\n/**\n * Controls\n */\n\n.variaboard-controls {\n}\n\n.variaboard-panel-is-collapsed .variaboard-controls {\n  display: none;\n}\n\n/**\n * Control\n */\n\n.variaboard-control {\n  border-left: 3px solid #444;\n  display: flex;\n  height: 28px;\n  margin-bottom: 1px;\n  transition: background 200ms, border-color 200ms;\n}\n\n.variaboard-control:hover {\n  border-left-color: #666;\n  transition-duration: 0ms;\n}\n\n.variaboard-control:last-child {\n  margin-bottom: 0;\n}\n\n/**\n * Control Title\n */\n\n.variaboard-control-title {\n  align-items: center;\n  background: #222;\n  border-left: 1px solid #000;\n  color: #bbb;\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 110px;\n  font-size: 0.8em;\n  font-weight: 400;\n  justify-content: flex-end;\n  line-height: 1;\n  margin: 0 1px 0 0;\n  overflow: hidden;\n  padding: 0.6em 0.75em;\n  text-align: right;\n  text-overflow: ellipsis;\n  transition: color 200ms;\n  white-space: nowrap;\n}\n\n.variaboard-control:hover .variaboard-control-title {\n  color: #fff;\n  transition-duration: 0ms;\n}\n\n/**\n * Control Checkbox\n */\n\n.variaboard-control-checkbox-wrap {\n  align-items: center;\n  background: #111;\n  border: 1px solid #111;\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 80px;\n  margin: 0 1px 0 0;\n  padding: 0 0.6em;\n  position: relative;\n}\n\n.variaboard-control-checkbox {\n  cursor: pointer;\n  opacity: 0;\n  position: absolute\n}\n\n.variaboard-control-checkbox-indicator {\n  align-items: center;\n  background: none;\n  border: 1px solid #333;\n  cursor: pointer;\n  display: flex;\n  height: 1.2em;\n  justify-content: center;\n  transition: background 200ms;\n  width: 1.2em;\n}\n\n.variaboard-control-checkbox-indicator:before {\n  color: #bbb;\n  content: '\\2713';\n  font-size: 0.8em;\n  opacity: 0;\n  transition: color 200ms, opacity 200ms;\n}\n\n.variaboard-control.variaboard-control-is-focused .variaboard-control-checkbox-indicator {\n  border-color: #fff;\n}\n\n.variaboard-control-checkbox:checked ~ .variaboard-control-checkbox-indicator {\n  background: #222;\n}\n\n.variaboard-control-checkbox:checked ~ .variaboard-control-checkbox-indicator:before {\n  opacity: 1;\n}\n\n.variaboard-control:hover .variaboard-control-checkbox:checked ~ .variaboard-control-checkbox-indicator:before {\n  color: #fff;\n}\n\n.variaboard-control.variaboard-control-is-focused .variaboard-control-checkbox:checked ~ .variaboard-control-checkbox-indicator:before {\n  color: #fff;\n}\n\n.variaboard-control-title:active ~ .variaboard-control-checkbox-wrap .variaboard-control-checkbox-indicator,\n.variaboard-control-checkbox-wrap:active .variaboard-control-checkbox-indicator {\n  border-color: #fff;\n}\n\n.variaboard-control-checkbox-stub {\n  background: #111;\n  flex: 1 1 auto;\n}\n\n/**\n * Control Value\n */\n\n.variaboard-control-value-wrap {\n  flex: 0 0 80px;\n  margin: 0 1px 0 0;\n}\n\n.variaboard-control-value {\n  background: #111;\n  border: 1px solid #111;\n  border-radius: 0;\n  color: #bbb;\n  font-family: inherit;\n  font-size: 0.8em;\n  font-weight: 400;\n  height: 100%;\n  line-height: 1;\n  margin: 0;\n  padding: 0.6em 0.75em;\n  transition: color 200ms, border-color 200ms;\n  width: 100%;\n  -webkit-appearance: none;\n}\n\n.variaboard-control:hover .variaboard-control-value {\n  color: #fff;\n  transition-duration: 0ms;\n}\n\n.variaboard-control-value:focus {\n  border-color: #fff;\n  color: #fff;\n  outline: none;\n  transition-duration: 0ms;\n}\n\n/**\n * Button\n */\n\n.variaboard-button {\n  align-items: center;\n  background: linear-gradient(#333 50%, #222 50%);\n  border: none;\n  border-left: 1px solid #000;\n  border-radius: 0;\n  color: #bbb;\n  cursor: pointer;\n  display: flex;\n  font-family: inherit;\n  font-size: 0.8em;\n  font-weight: 700;\n  height: 100%;\n  line-height: 1;\n  margin: 0;\n  padding: 0 1.5em;\n  position: relative;\n  text-align: left;\n  text-decoration: none;\n  transition: color 200ms;\n  width: 100%;\n  -webkit-appearance: none;\n}\n\n.variaboard-button:after {\n  background: #fff;\n  bottom: 0;\n  content: '';\n  left: 0;\n  opacity: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: opacity 200ms;\n}\n\n.variaboard-button:hover {\n  color: #fff;\n  transition-duration: 0ms;\n}\n\n.variaboard-button:active {\n  transition-duration: 0ms;\n}\n\n.variaboard-button:active:after {\n  opacity: 0.3;\n  transition-duration: 0ms;\n}\n\n.variaboard-button:focus {\n  box-shadow: inset 0 0 0 1px #fff;\n  outline: none;\n}\n\n/**\n * Control Range\n */\n\n.variaboard-control-range {\n  background: #111;\n  cursor: ew-resize;\n  cursor: grab;\n  flex: 1 1 auto;\n  overflow: hidden;\n  position: relative;\n}\n\n.variaboard-control.variaboard-control-is-dragging .variaboard-control-range {\n  cursor: ew-resize;\n  cursor: grabbing;\n}\n\n.variaboard-control-range-inner {\n  background: #222;\n  height: 101%;\n  left: 0;\n  position: absolute;\n  right: 1px;\n  top: 0;\n  transform: translateX(-100%);\n  transition: background 200ms, transform 300ms cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.variaboard-control-range-inner:after {\n  background: linear-gradient(#999, #444);\n  bottom: 0;\n  content: '';\n  left: 100%;\n  position: absolute;\n  top: 0;\n  transition: background 200ms;\n  width: 1px;\n}\n\n.variaboard-control.variaboard-control-eased .variaboard-control-range-inner {\n  transition: background 200ms;\n}\n\n.variaboard-control:hover .variaboard-control-range-inner {\n  background: #333;\n  transition-duration: 0ms;\n}\n\n.variaboard-control.variaboard-control-is-dragging .variaboard-control-range-inner {\n  transition-duration: 0ms;\n}\n"]}


--------------------------------------------------------------------------------
/docs/css/variaboard.min.css:
--------------------------------------------------------------------------------
1 | .variaboard-panel,.variaboard-panel *{box-sizing:border-box}.variaboard-panel{background:#000;border:1px solid #000;color:#fff;font-family:source code pro,monospace;font-size:14px;left:0;max-height:100%;max-width:300px;overflow:auto;position:fixed;top:0;transition:opacity .2s;width:100%;z-index:1;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.variaboard-button::selection,.variaboard-control-title::selection,.variaboard-control-value::selection,.variaboard-title::selection{background:#fff;color:#000}.variaboard-button::-moz-selection,.variaboard-control-title::-moz-selection,.variaboard-control-value::-moz-selection,.variaboard-title::-moz-selection{background:#fff;color:#000}.variaboard-title{background:#111;color:#fff;cursor:pointer;height:28px;font-size:.8em;font-weight:700;line-height:28px;margin:0 0 1px;overflow:hidden;padding:0 1.5em;text-overflow:ellipsis;white-space:nowrap}.variaboard-panel-is-collapsed .variaboard-title{margin-bottom:0}.variaboard-panel-is-collapsed .variaboard-controls{display:none}.variaboard-control{border-left:3px solid #444;display:-webkit-box;display:flex;height:28px;margin-bottom:1px;transition:background .2s,border-color .2s}.variaboard-control:hover{border-left-color:#666;transition-duration:0ms}.variaboard-control:last-child{margin-bottom:0}.variaboard-control-title{-webkit-box-align:center;align-items:center;background:#222;border-left:1px solid #000;color:#bbb;cursor:pointer;display:-webkit-box;display:flex;-webkit-box-flex:0;flex:0 0 110px;font-size:.8em;font-weight:400;-webkit-box-pack:end;justify-content:flex-end;line-height:1;margin:0 1px 0 0;overflow:hidden;padding:.6em .75em;text-align:right;text-overflow:ellipsis;transition:color .2s;white-space:nowrap}.variaboard-control:hover .variaboard-control-title{color:#fff;transition-duration:0ms}.variaboard-control-checkbox-wrap{-webkit-box-align:center;align-items:center;background:#111;border:1px solid #111;cursor:pointer;display:-webkit-box;display:flex;-webkit-box-flex:0;flex:0 0 80px;margin:0 1px 0 0;padding:0 .6em;position:relative}.variaboard-control-checkbox{cursor:pointer;opacity:0;position:absolute}.variaboard-control-checkbox-indicator{-webkit-box-align:center;align-items:center;background:none;border:1px solid #333;cursor:pointer;display:-webkit-box;display:flex;height:1.2em;-webkit-box-pack:center;justify-content:center;transition:background .2s;width:1.2em}.variaboard-control-checkbox-indicator:before{color:#bbb;content:"\2713";font-size:.8em;opacity:0;transition:color .2s,opacity .2s}.variaboard-control.variaboard-control-is-focused .variaboard-control-checkbox-indicator{border-color:#fff}.variaboard-control-checkbox:checked~.variaboard-control-checkbox-indicator{background:#222}.variaboard-control-checkbox:checked~.variaboard-control-checkbox-indicator:before{opacity:1}.variaboard-control.variaboard-control-is-focused .variaboard-control-checkbox:checked~.variaboard-control-checkbox-indicator:before,.variaboard-control:hover .variaboard-control-checkbox:checked~.variaboard-control-checkbox-indicator:before{color:#fff}.variaboard-control-checkbox-wrap:active .variaboard-control-checkbox-indicator,.variaboard-control-title:active~.variaboard-control-checkbox-wrap .variaboard-control-checkbox-indicator{border-color:#fff}.variaboard-control-checkbox-stub{background:#111;-webkit-box-flex:1;flex:1 1 auto}.variaboard-control-value-wrap{-webkit-box-flex:0;flex:0 0 80px;margin:0 1px 0 0}.variaboard-control-value{background:#111;border:1px solid #111;border-radius:0;color:#bbb;font-family:inherit;font-size:.8em;font-weight:400;height:100%;line-height:1;margin:0;padding:.6em .75em;transition:color .2s,border-color .2s;width:100%;-webkit-appearance:none}.variaboard-control-value:focus,.variaboard-control:hover .variaboard-control-value{color:#fff;transition-duration:0ms}.variaboard-control-value:focus{border-color:#fff;outline:none}.variaboard-button{-webkit-box-align:center;align-items:center;background:linear-gradient(#333 50%,#222 0);border:none;border-left:1px solid #000;border-radius:0;color:#bbb;cursor:pointer;display:-webkit-box;display:flex;font-family:inherit;font-size:.8em;font-weight:700;height:100%;line-height:1;margin:0;padding:0 1.5em;position:relative;text-align:left;text-decoration:none;transition:color .2s;width:100%;-webkit-appearance:none}.variaboard-button:after{background:#fff;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s}.variaboard-button:hover{color:#fff;transition-duration:0ms}.variaboard-button:active{transition-duration:0ms}.variaboard-button:active:after{opacity:.3;transition-duration:0ms}.variaboard-button:focus{box-shadow:inset 0 0 0 1px #fff;outline:none}.variaboard-control-range{background:#111;cursor:ew-resize;cursor:-webkit-grab;cursor:grab;-webkit-box-flex:1;flex:1 1 auto;overflow:hidden;position:relative}.variaboard-control.variaboard-control-is-dragging .variaboard-control-range{cursor:ew-resize;cursor:-webkit-grabbing;cursor:grabbing}.variaboard-control-range-inner{background:#222;height:101%;left:0;position:absolute;right:1px;top:0;-webkit-transform:translateX(-100%);transform:translateX(-100%);transition:background .2s,-webkit-transform .3s cubic-bezier(.19,1,.22,1);transition:background .2s,transform .3s cubic-bezier(.19,1,.22,1);transition:background .2s,transform .3s cubic-bezier(.19,1,.22,1),-webkit-transform .3s cubic-bezier(.19,1,.22,1)}.variaboard-control-range-inner:after{background:linear-gradient(#999,#444);bottom:0;content:"";left:100%;position:absolute;top:0;transition:background .2s;width:1px}.variaboard-control.variaboard-control-eased .variaboard-control-range-inner{transition:background .2s}.variaboard-control:hover .variaboard-control-range-inner{background:#333;transition-duration:0ms}.variaboard-control.variaboard-control-is-dragging .variaboard-control-range-inner{transition-duration:0ms}
2 | /*# sourceMappingURL=sourcemaps/variaboard.min.css.map */
3 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  6 |     <title>VariaBoard Demo</title>
  7 |     <meta name="description" content="">
  8 |     <meta name="keywords" content="">
  9 |     <meta name="author" content="Jack Rugile">
 10 |     <link rel="shortcut icon" href="favicon.ico">
 11 |     <link rel="stylesheet" href="./css/variaboard.min.css">
 12 |     <style>
 13 |       /* demo specific code */
 14 | 
 15 |       body {
 16 |         background: radial-gradient(#333, #111);
 17 |         min-height: 100vh;
 18 |         overflow: hidden;
 19 |       }
 20 | 
 21 |       canvas {
 22 |         bottom: 0;
 23 |         left: 0;
 24 |         margin: auto;
 25 |         position: absolute;
 26 |         right: 0;
 27 |         top: 0;
 28 |       }
 29 | 
 30 |       .variaboard-panel.vb2 {
 31 |         left: auto;
 32 |         right: 0;
 33 |       }
 34 |     </style>
 35 |   </head>
 36 |   <body>
 37 |     <script src="./js/variaboard.min.js"></script>
 38 |     <script>
 39 |       let vb = new VariaBoard({
 40 |         container: document.body,
 41 |         title: 'VariaBoard 1',
 42 |         changeCallback: () => {
 43 |         }
 44 |       });
 45 | 
 46 |       vb.addBoolean({
 47 |         id: 'dark',
 48 |         title: 'Dark',
 49 |         description: 'Toggle a dark or light fill',
 50 |         default: true,
 51 |         randomizable: true,
 52 |         mutable: true,
 53 |         locked: false
 54 |       });
 55 | 
 56 |       vb.addBoolean({
 57 |         id: 'spinning',
 58 |         title: 'Spinning',
 59 |         default: true,
 60 |         randomizable: true,
 61 |         mutable: true,
 62 |         locked: false
 63 |       });
 64 | 
 65 |       vb.addRange({
 66 |         id: 'width',
 67 |         title: 'Width',
 68 |         suffix: 'px',
 69 |         min: 0,
 70 |         max: 400,
 71 |         step: 0.5,
 72 |         default: 40,
 73 |         randomizable: true,
 74 |         mutable: true,
 75 |         locked: false
 76 |       });
 77 | 
 78 |       vb.addRange({
 79 |         id: 'height',
 80 |         title: 'Height',
 81 |         suffix: 'px',
 82 |         min: 0,
 83 |         max: 300,
 84 |         step: 0.5,
 85 |         default: 40,
 86 |         randomizable: true,
 87 |         mutable: true,
 88 |         locked: false
 89 |       });
 90 | 
 91 |       vb.addRange({
 92 |         id: 'rotation',
 93 |         title: 'Rotation',
 94 |         suffix: 'deg',
 95 |         min: 0,
 96 |         max: 360,
 97 |         step: 1,
 98 |         default: 0,
 99 |         randomizable: true,
100 |         mutable: true,
101 |         locked: false
102 |       });
103 | 
104 |       vb.addRange({
105 |         id: 'radius',
106 |         title: 'Radius',
107 |         suffix: 'px',
108 |         min: 1,
109 |         max: 140,
110 |         step: 1,
111 |         default: 10,
112 |         randomizable: true,
113 |         mutable: true,
114 |         locked: false
115 |       });
116 | 
117 |       vb.addRange({
118 |         id: 'hue',
119 |         title: 'Hue',
120 |         suffix: 'deg',
121 |         min: 0,
122 |         max: 360,
123 |         step: 1,
124 |         default: 0,
125 |         randomizable: true,
126 |         mutable: true,
127 |         locked: false
128 |       });
129 | 
130 |       vb.addRange({
131 |         id: 'saturation',
132 |         title: 'Saturation',
133 |         suffix: '%',
134 |         min: 50,
135 |         max: 100,
136 |         step: 1,
137 |         default: 100,
138 |         randomizable: true,
139 |         mutable: true,
140 |         locked: false
141 |       });
142 | 
143 |       vb.addRange({
144 |         id: 'lightness',
145 |         title: 'Lightness',
146 |         suffix: '%',
147 |         min: 20,
148 |         max: 80,
149 |         step: 1,
150 |         default: 50,
151 |         randomizable: true,
152 |         mutable: true,
153 |         locked: false
154 |       });
155 | 
156 |       vb.addRange({
157 |         id: 'alpha',
158 |         title: 'Alpha',
159 |         min: 0.5,
160 |         max: 1,
161 |         step: 0.01,
162 |         default: 1,
163 |         randomizable: true,
164 |         mutable: true,
165 |         locked: false
166 |       });
167 | 
168 |       vb.addButton({
169 |         id: 'reset',
170 |         title: 'Reset',
171 |         description: 'Set all controls to their default values',
172 |         callback: (e, button, variaboard) => {
173 |           vb.reset();
174 |         }
175 |       });
176 | 
177 |       vb.addButton({
178 |         id: 'randomize',
179 |         title: 'Randomize',
180 |         description: 'Set all controls to a random value',
181 |         callback: (e, button, variaboard) => {
182 |           vb.randomize();
183 |         }
184 |       });
185 | 
186 |       vb.addButton({
187 |         id: 'mutate',
188 |         title: 'Mutate',
189 |         description: 'Change the value of all controls slightly',
190 |         callback: (e, button, variaboard) => {
191 |           vb.mutate();
192 |         }
193 |       });
194 | 
195 |       vb.addButton({
196 |         id: 'tester',
197 |         title: 'Tester',
198 |         callback: (e, button, variaboard) => {
199 |           button.dom.button.setAttribute('href', c.toDataURL('image/png'));
200 |           button.dom.button.setAttribute('download', 'wow.png');
201 |         }
202 |       });
203 | 
204 |       let c = document.createElement('canvas');
205 |       let ctx = c.getContext('2d');
206 |       let w = 400;
207 |       let h = 400;
208 |       let dpr = window.devicePixelRatio;
209 |       let rotation = 0;
210 |       c.width = w * dpr;
211 |       c.height = h * dpr;
212 |       c.style.width = `${w}px`;
213 |       c.style.height = `${h}px`;
214 |       ctx.scale(dpr, dpr);
215 |       document.body.appendChild(c);
216 | 
217 |       function loop() {
218 |         requestAnimationFrame(loop);
219 | 
220 |         ctx.globalCompositeOperation = 'source-over';
221 |         ctx.fillStyle = vb.get('dark') ? '#000' : '#fff';
222 |         ctx.fillRect(0, 0, w, h);
223 | 
224 |         ctx.globalCompositeOperation = vb.get('dark') ? 'lighter' : 'source-over';
225 | 
226 |         ctx.save();
227 | 
228 |           if(vb.get('spinning')) {
229 |             rotation += 0.01
230 |           }
231 | 
232 |           ctx.translate(w / 2, h / 2);
233 |           ctx.rotate(rotation % (Math.PI * 2));
234 |           ctx.translate(w / -2, h / -2);
235 | 
236 |           ctx.save();
237 |             ctx.translate(w * 0.25, h / 2);
238 |             ctx.rotate(vb.get('rotation') / 360 * Math.PI * 2);
239 |             ctx.fillStyle = `hsla(${vb.get('hue') - 90}, ${vb.get('saturation')}%, ${vb.get('lightness')}%, ${vb.get('alpha')})`;
240 |             ctx.fillRect(vb.get('width') / -2, vb.get('height') / -2, vb.get('width'), vb.get('height'));
241 |           ctx.restore();
242 | 
243 |           ctx.save();
244 |             ctx.translate(w / 2, h / 2);
245 |             ctx.rotate(vb.get('rotation') / 360 * Math.PI * 2);
246 |             ctx.fillStyle = `hsla(${vb.get('hue')}, ${vb.get('saturation')}%, ${vb.get('lightness')}%, ${vb.get('alpha')})`;
247 |             ctx.fillRect(vb.get('width') / -2, vb.get('height') / -2, vb.get('width'), vb.get('height'));
248 |           ctx.restore();
249 | 
250 |           ctx.save();
251 |             ctx.translate(w * 0.75, h / 2);
252 |             ctx.rotate(vb.get('rotation') / 360 * Math.PI * 2);
253 |             ctx.fillStyle = `hsla(${vb.get('hue') + 90}, ${vb.get('saturation')}%, ${vb.get('lightness')}%, ${vb.get('alpha')})`;
254 |             ctx.fillRect(vb.get('width') / -2, vb.get('height') / -2, vb.get('width'), vb.get('height'));
255 |           ctx.restore();
256 | 
257 |           ctx.beginPath();
258 |           ctx.fillStyle = `hsla(${vb.get('hue') + 90}, ${vb.get('saturation')}%, ${vb.get('lightness')}%, ${vb.get('alpha')})`;
259 |           ctx.arc(w * 0.25, h / 2, vb.get('radius'), 0, Math.PI * 2);
260 |           ctx.fill();
261 | 
262 |           ctx.beginPath();
263 |           ctx.fillStyle = `hsla(${vb.get('hue') + 180}, ${vb.get('saturation')}%, ${vb.get('lightness')}%, ${vb.get('alpha')})`;
264 |           ctx.arc(w / 2, h / 2, vb.get('radius'), 0, Math.PI * 2);
265 |           ctx.fill();
266 | 
267 |           ctx.beginPath();
268 |           ctx.fillStyle = `hsla(${vb.get('hue') - 90}, ${vb.get('saturation')}%, ${vb.get('lightness')}%, ${vb.get('alpha')})`;
269 |           ctx.arc(w * 0.75, h / 2, vb.get('radius'), 0, Math.PI * 2);
270 |           ctx.fill();
271 | 
272 |         ctx.restore();
273 |       }
274 | 
275 |       loop();
276 | 
277 |       let vb2 = new VariaBoard({
278 |         container: document.body,
279 |         class: 'vb2',
280 |         title: 'VariaBoard 2',
281 |         changeCallback: function() {
282 |           document.querySelector('canvas').style.transform = `scale(${this.get('scale')})`;
283 |         }
284 |       });
285 | 
286 |       vb2.addRange({
287 |         id: 'scale',
288 |         title: 'Scale',
289 |         min: 0.1,
290 |         max: 4,
291 |         step: 0.01,
292 |         default: 1,
293 |         randomizable: true,
294 |         mutable: true,
295 |         locked: false
296 |       });
297 |     </script>
298 |   </body>
299 | </html>
300 | 


--------------------------------------------------------------------------------
/docs/jsdoc/Button.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
  6 |     <title>Button - Documentation</title>
  7 | 
  8 |     <script src="scripts/prettify/prettify.js"></script>
  9 |     <script src="scripts/prettify/lang-css.js"></script>
 10 |     <!--[if lt IE 9]>
 11 |       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 12 |     <![endif]-->
 13 |     <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 14 |     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 15 |     <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 16 | </head>
 17 | <body>
 18 | 
 19 | <input type="checkbox" id="nav-trigger" class="nav-trigger" />
 20 | <label for="nav-trigger" class="navicon-button x">
 21 |   <div class="navicon"></div>
 22 | </label>
 23 | 
 24 | <label for="nav-trigger" class="overlay"></label>
 25 | 
 26 | <nav>
 27 |     <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Button.html">Button</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#onButtonClick">onButtonClick</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Calc.html">Calc</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.clamp">clamp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.rand">rand</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Control.html">Control</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Ease.html">Ease</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Range.html">Range</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="VariaBoard.html">VariaBoard</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addButton">addButton</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addRange">addRange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMousemove">onWindowMousemove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMouseup">onWindowMouseup</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#update">update</a></span></li>
 28 | </nav>
 29 | 
 30 | <div id="main">
 31 |     
 32 |     <h1 class="page-title">Button</h1>
 33 |     
 34 | 
 35 |     
 36 | 
 37 | 
 38 | 
 39 | 
 40 | <section>
 41 | 
 42 | <header>
 43 |     
 44 |         <h2>
 45 |         Button
 46 |         </h2>
 47 |         
 48 |             <div class="class-description"><p>Create a button</p></div>
 49 |         
 50 |     
 51 | </header>
 52 | 
 53 | <article>
 54 |     <div class="container-overview">
 55 |     
 56 |         
 57 | <div class="section-method">
 58 | 
 59 |     
 60 |     <h2>Constructor</h2>
 61 |     
 62 | 
 63 |     <h4 class="name" id="Button"><span class="type-signature"></span>new Button<span class="signature">()</span><span class="type-signature"></span></h4>
 64 | 
 65 |     
 66 | 
 67 | 
 68 | 
 69 | 
 70 | 
 71 | 
 72 | 
 73 | <dl class="details">
 74 | 
 75 |     
 76 | 
 77 |     
 78 | 
 79 |     
 80 | 
 81 |     
 82 | 
 83 |     
 84 | 
 85 |     
 86 | 
 87 |     
 88 | 
 89 |     
 90 | 
 91 |     
 92 | 
 93 |     
 94 | 
 95 |     
 96 | 
 97 |     
 98 | 
 99 |     
100 |     <dt class="tag-source">Source:</dt>
101 |     <dd class="tag-source"><ul class="dummy"><li>
102 |         <a href="button.js.html">button.js</a>, <a href="button.js.html#line5">line 5</a>
103 |     </li></ul></dd>
104 |     
105 | 
106 |     
107 | 
108 |     
109 | 
110 |     
111 | </dl>
112 | 
113 | 
114 | 
115 | 
116 | 
117 | 
118 | 
119 | 
120 | 
121 | 
122 | 
123 | 
124 | 
125 | 
126 | 
127 | 
128 | 
129 | 
130 | 
131 | 
132 | 
133 | 
134 | 
135 | </div>
136 |     
137 |     </div>
138 | 
139 |     
140 | 
141 |     
142 | 
143 |     
144 | 
145 |      
146 | 
147 |     
148 | 
149 |     
150 | 
151 |     
152 |         <h3 class="subsection-title">Methods</h3>
153 | 
154 |         
155 |             
156 | <div class="section-method">
157 | 
158 |     
159 | 
160 |     <h4 class="name" id="createDOM"><span class="type-signature"></span>createDOM<span class="signature">()</span><span class="type-signature"></span></h4>
161 | 
162 |     
163 | 
164 | 
165 | 
166 | <div class="description">
167 |     <p>Create necessary DOM elements</p>
168 | </div>
169 | 
170 | 
171 | 
172 | 
173 | 
174 | <dl class="details">
175 | 
176 |     
177 | 
178 |     
179 | 
180 |     
181 | 
182 |     
183 | 
184 |     
185 | 
186 |     
187 | 
188 |     
189 | 
190 |     
191 | 
192 |     
193 | 
194 |     
195 | 
196 |     
197 | 
198 |     
199 | 
200 |     
201 |     <dt class="tag-source">Source:</dt>
202 |     <dd class="tag-source"><ul class="dummy"><li>
203 |         <a href="button.js.html">button.js</a>, <a href="button.js.html#line21">line 21</a>
204 |     </li></ul></dd>
205 |     
206 | 
207 |     
208 | 
209 |     
210 | 
211 |     
212 | </dl>
213 | 
214 | 
215 | 
216 | 
217 | 
218 | 
219 | 
220 | 
221 | 
222 | 
223 | 
224 | 
225 | 
226 | 
227 | 
228 | 
229 | 
230 | 
231 | 
232 | 
233 | 
234 | 
235 | 
236 | </div>
237 |         
238 |             
239 | <div class="section-method">
240 | 
241 |     
242 | 
243 |     <h4 class="name" id="listen"><span class="type-signature"></span>listen<span class="signature">()</span><span class="type-signature"></span></h4>
244 | 
245 |     
246 | 
247 | 
248 | 
249 | <div class="description">
250 |     <p>Setup event listeners</p>
251 | </div>
252 | 
253 | 
254 | 
255 | 
256 | 
257 | <dl class="details">
258 | 
259 |     
260 | 
261 |     
262 | 
263 |     
264 | 
265 |     
266 | 
267 |     
268 | 
269 |     
270 | 
271 |     
272 | 
273 |     
274 | 
275 |     
276 | 
277 |     
278 | 
279 |     
280 | 
281 |     
282 | 
283 |     
284 |     <dt class="tag-source">Source:</dt>
285 |     <dd class="tag-source"><ul class="dummy"><li>
286 |         <a href="button.js.html">button.js</a>, <a href="button.js.html#line42">line 42</a>
287 |     </li></ul></dd>
288 |     
289 | 
290 |     
291 | 
292 |     
293 | 
294 |     
295 | </dl>
296 | 
297 | 
298 | 
299 | 
300 | 
301 | 
302 | 
303 | 
304 | 
305 | 
306 | 
307 | 
308 | 
309 | 
310 | 
311 | 
312 | 
313 | 
314 | 
315 | 
316 | 
317 | 
318 | 
319 | </div>
320 |         
321 |             
322 | <div class="section-method">
323 | 
324 |     
325 | 
326 |     <h4 class="name" id="onButtonClick"><span class="type-signature"></span>onButtonClick<span class="signature">(e)</span><span class="type-signature"></span></h4>
327 | 
328 |     
329 | 
330 | 
331 | 
332 | <div class="description">
333 |     <p>On button click event</p>
334 | </div>
335 | 
336 | 
337 | 
338 | 
339 | 
340 | <dl class="details">
341 | 
342 |     
343 | 
344 |     
345 | 
346 |     
347 | 
348 |     
349 | 
350 |     
351 | 
352 |     
353 | 
354 |     
355 | 
356 |     
357 | 
358 |     
359 | 
360 |     
361 | 
362 |     
363 | 
364 |     
365 | 
366 |     
367 |     <dt class="tag-source">Source:</dt>
368 |     <dd class="tag-source"><ul class="dummy"><li>
369 |         <a href="button.js.html">button.js</a>, <a href="button.js.html#line52">line 52</a>
370 |     </li></ul></dd>
371 |     
372 | 
373 |     
374 | 
375 |     
376 | 
377 |     
378 | </dl>
379 | 
380 | 
381 | 
382 | 
383 | 
384 | 
385 | 
386 | 
387 | 
388 |     <h5>Parameters:</h5>
389 |     
390 | 
391 | <table class="params">
392 |     <thead>
393 |     <tr>
394 |         
395 |         <th>Name</th>
396 |         
397 | 
398 |         <th>Type</th>
399 | 
400 |         
401 | 
402 |         
403 | 
404 |         <th class="last">Description</th>
405 |     </tr>
406 |     </thead>
407 | 
408 |     <tbody>
409 |     
410 | 
411 |         <tr>
412 |             
413 |                 <td class="name"><code>e</code></td>
414 |             
415 | 
416 |             <td class="type">
417 |             
418 |                 
419 | <span class="param-type"><code>object</code></span>
420 | 
421 | 
422 |             
423 |             </td>
424 | 
425 |             
426 | 
427 |             
428 | 
429 |             <td class="description last">
430 |                 <p>Event object</p>
431 |                 
432 |             </td>
433 |         </tr>
434 | 
435 |     
436 |     </tbody>
437 | </table>
438 | 
439 | 
440 | 
441 | 
442 | 
443 | 
444 | 
445 | 
446 | 
447 | 
448 | 
449 | 
450 | 
451 | 
452 | 
453 | 
454 | </div>
455 |         
456 |     
457 | 
458 |     
459 | 
460 |     
461 | </article>
462 | 
463 | </section>
464 | 
465 | 
466 | 
467 | 
468 | </div>
469 | 
470 | <br class="clear">
471 | 
472 | <footer>
473 |     Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Thu Dec 28 2017 20:24:40 GMT-0700 (MST) using the Minami theme.
474 | </footer>
475 | 
476 | <script>prettyPrint();</script>
477 | <script src="scripts/linenumber.js"></script>
478 | </body>
479 | </html>


--------------------------------------------------------------------------------
/docs/jsdoc/Calc.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
  6 |     <title>Calc - Documentation</title>
  7 | 
  8 |     <script src="scripts/prettify/prettify.js"></script>
  9 |     <script src="scripts/prettify/lang-css.js"></script>
 10 |     <!--[if lt IE 9]>
 11 |       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 12 |     <![endif]-->
 13 |     <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 14 |     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 15 |     <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 16 | </head>
 17 | <body>
 18 | 
 19 | <input type="checkbox" id="nav-trigger" class="nav-trigger" />
 20 | <label for="nav-trigger" class="navicon-button x">
 21 |   <div class="navicon"></div>
 22 | </label>
 23 | 
 24 | <label for="nav-trigger" class="overlay"></label>
 25 | 
 26 | <nav>
 27 |     <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Button.html">Button</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#onButtonClick">onButtonClick</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Calc.html">Calc</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.clamp">clamp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.rand">rand</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Control.html">Control</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Ease.html">Ease</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Range.html">Range</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="VariaBoard.html">VariaBoard</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addButton">addButton</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addRange">addRange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMousemove">onWindowMousemove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMouseup">onWindowMouseup</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#update">update</a></span></li>
 28 | </nav>
 29 | 
 30 | <div id="main">
 31 |     
 32 |     <h1 class="page-title">Calc</h1>
 33 |     
 34 | 
 35 |     
 36 | 
 37 | 
 38 | 
 39 | 
 40 | <section>
 41 | 
 42 | <header>
 43 |     
 44 |         <h2>
 45 |         Calc
 46 |         </h2>
 47 |         
 48 |             <div class="class-description"><p>Calculation functions and helpers</p></div>
 49 |         
 50 |     
 51 | </header>
 52 | 
 53 | <article>
 54 |     <div class="container-overview">
 55 |     
 56 |         
 57 | <div class="section-method">
 58 | 
 59 |     
 60 |     <h2>Constructor</h2>
 61 |     
 62 | 
 63 |     <h4 class="name" id="Calc"><span class="type-signature"></span>new Calc<span class="signature">()</span><span class="type-signature"></span></h4>
 64 | 
 65 |     
 66 | 
 67 | 
 68 | 
 69 | 
 70 | 
 71 | 
 72 | 
 73 | <dl class="details">
 74 | 
 75 |     
 76 | 
 77 |     
 78 | 
 79 |     
 80 | 
 81 |     
 82 | 
 83 |     
 84 | 
 85 |     
 86 | 
 87 |     
 88 | 
 89 |     
 90 | 
 91 |     
 92 | 
 93 |     
 94 | 
 95 |     
 96 | 
 97 |     
 98 | 
 99 |     
100 |     <dt class="tag-source">Source:</dt>
101 |     <dd class="tag-source"><ul class="dummy"><li>
102 |         <a href="util_calc.js.html">util/calc.js</a>, <a href="util_calc.js.html#line5">line 5</a>
103 |     </li></ul></dd>
104 |     
105 | 
106 |     
107 | 
108 |     
109 | 
110 |     
111 | </dl>
112 | 
113 | 
114 | 
115 | 
116 | 
117 | 
118 | 
119 | 
120 | 
121 | 
122 | 
123 | 
124 | 
125 | 
126 | 
127 | 
128 | 
129 | 
130 | 
131 | 
132 | 
133 | 
134 | 
135 | </div>
136 |     
137 |     </div>
138 | 
139 |     
140 | 
141 |     
142 | 
143 |     
144 | 
145 |      
146 | 
147 |     
148 | 
149 |     
150 | 
151 |     
152 |         <h3 class="subsection-title">Methods</h3>
153 | 
154 |         
155 |             
156 | <div class="section-method">
157 | 
158 |     
159 | 
160 |     <h4 class="name" id=".clamp"><span class="type-signature">(static) </span>clamp<span class="signature">(val, min, max)</span><span class="type-signature"> &rarr; {number}</span></h4>
161 | 
162 |     
163 | 
164 | 
165 | 
166 | <div class="description">
167 |     <p>Clamp a value to a range</p>
168 | </div>
169 | 
170 | 
171 | 
172 | 
173 | 
174 | <dl class="details">
175 | 
176 |     
177 | 
178 |     
179 | 
180 |     
181 | 
182 |     
183 | 
184 |     
185 | 
186 |     
187 | 
188 |     
189 | 
190 |     
191 | 
192 |     
193 | 
194 |     
195 | 
196 |     
197 | 
198 |     
199 | 
200 |     
201 |     <dt class="tag-source">Source:</dt>
202 |     <dd class="tag-source"><ul class="dummy"><li>
203 |         <a href="util_calc.js.html">util/calc.js</a>, <a href="util_calc.js.html#line52">line 52</a>
204 |     </li></ul></dd>
205 |     
206 | 
207 |     
208 | 
209 |     
210 | 
211 |     
212 | </dl>
213 | 
214 | 
215 | 
216 | 
217 | 
218 | 
219 | 
220 | 
221 | 
222 |     <h5>Parameters:</h5>
223 |     
224 | 
225 | <table class="params">
226 |     <thead>
227 |     <tr>
228 |         
229 |         <th>Name</th>
230 |         
231 | 
232 |         <th>Type</th>
233 | 
234 |         
235 | 
236 |         
237 | 
238 |         <th class="last">Description</th>
239 |     </tr>
240 |     </thead>
241 | 
242 |     <tbody>
243 |     
244 | 
245 |         <tr>
246 |             
247 |                 <td class="name"><code>val</code></td>
248 |             
249 | 
250 |             <td class="type">
251 |             
252 |                 
253 | <span class="param-type"><code>number</code></span>
254 | 
255 | 
256 |             
257 |             </td>
258 | 
259 |             
260 | 
261 |             
262 | 
263 |             <td class="description last">
264 |                 <p>Input value</p>
265 |                 
266 |             </td>
267 |         </tr>
268 | 
269 |     
270 | 
271 |         <tr>
272 |             
273 |                 <td class="name"><code>min</code></td>
274 |             
275 | 
276 |             <td class="type">
277 |             
278 |                 
279 | <span class="param-type"><code>number</code></span>
280 | 
281 | 
282 |             
283 |             </td>
284 | 
285 |             
286 | 
287 |             
288 | 
289 |             <td class="description last">
290 |                 <p>Minimum range value</p>
291 |                 
292 |             </td>
293 |         </tr>
294 | 
295 |     
296 | 
297 |         <tr>
298 |             
299 |                 <td class="name"><code>max</code></td>
300 |             
301 | 
302 |             <td class="type">
303 |             
304 |                 
305 | <span class="param-type"><code>number</code></span>
306 | 
307 | 
308 |             
309 |             </td>
310 | 
311 |             
312 | 
313 |             
314 | 
315 |             <td class="description last">
316 |                 <p>Maximum range value</p>
317 |                 
318 |             </td>
319 |         </tr>
320 | 
321 |     
322 |     </tbody>
323 | </table>
324 | 
325 | 
326 | 
327 | 
328 | 
329 | 
330 | 
331 | 
332 | 
333 | 
334 | 
335 | 
336 | 
337 | 
338 | <div class="section-returns">
339 | <h5>Returns:</h5>
340 | 
341 |         
342 | 
343 | <dl class="param-type">
344 |     <dt>
345 |         Type:
346 |     </dt>
347 |     <dd>
348 |         
349 | <span class="param-type"><code>number</code></span>
350 | 
351 | 
352 |     </dd>
353 | </dl>
354 | 
355 | 
356 | <div class="param-desc">
357 |     <p>Clamped value within range</p>
358 | </div>
359 | 
360 |     
361 | </div>
362 | 
363 | 
364 | 
365 | <div class="section-examples">
366 | <h5>Example</h5>
367 | 
368 |     <pre class="prettyprint"><code>Calc.clamp(3, 10, 150);
369 | // -> 10
370 | 
371 | Calc.clamp(400, 10, 150);
372 | // -> 150
373 | 
374 | Calc.clamp(75, 10, 100);
375 | // -> 75</code></pre>
376 | 
377 | </div>
378 | 
379 | </div>
380 |         
381 |             
382 | <div class="section-method">
383 | 
384 |     
385 | 
386 |     <h4 class="name" id=".rand"><span class="type-signature">(static) </span>rand<span class="signature">(min, max)</span><span class="type-signature"> &rarr; {number}</span></h4>
387 | 
388 |     
389 | 
390 | 
391 | 
392 | <div class="description">
393 |     <p>Get a random float within a range. If only one argument is passed, it is used as the max and the min becomes zero.</p>
394 | </div>
395 | 
396 | 
397 | 
398 | 
399 | 
400 | <dl class="details">
401 | 
402 |     
403 | 
404 |     
405 | 
406 |     
407 | 
408 |     
409 | 
410 |     
411 | 
412 |     
413 | 
414 |     
415 | 
416 |     
417 | 
418 |     
419 | 
420 |     
421 | 
422 |     
423 | 
424 |     
425 | 
426 |     
427 |     <dt class="tag-source">Source:</dt>
428 |     <dd class="tag-source"><ul class="dummy"><li>
429 |         <a href="util_calc.js.html">util/calc.js</a>, <a href="util_calc.js.html#line24">line 24</a>
430 |     </li></ul></dd>
431 |     
432 | 
433 |     
434 | 
435 |     
436 | 
437 |     
438 | </dl>
439 | 
440 | 
441 | 
442 | 
443 | 
444 | 
445 | 
446 | 
447 | 
448 |     <h5>Parameters:</h5>
449 |     
450 | 
451 | <table class="params">
452 |     <thead>
453 |     <tr>
454 |         
455 |         <th>Name</th>
456 |         
457 | 
458 |         <th>Type</th>
459 | 
460 |         
461 | 
462 |         
463 | 
464 |         <th class="last">Description</th>
465 |     </tr>
466 |     </thead>
467 | 
468 |     <tbody>
469 |     
470 | 
471 |         <tr>
472 |             
473 |                 <td class="name"><code>min</code></td>
474 |             
475 | 
476 |             <td class="type">
477 |             
478 |                 
479 | <span class="param-type"><code>number</code></span>
480 | 
481 | 
482 |             
483 |             </td>
484 | 
485 |             
486 | 
487 |             
488 | 
489 |             <td class="description last">
490 |                 <p>Minimum range value</p>
491 |                 
492 |             </td>
493 |         </tr>
494 | 
495 |     
496 | 
497 |         <tr>
498 |             
499 |                 <td class="name"><code>max</code></td>
500 |             
501 | 
502 |             <td class="type">
503 |             
504 |                 
505 | <span class="param-type"><code>number</code></span>
506 | 
507 | 
508 |             
509 |             </td>
510 | 
511 |             
512 | 
513 |             
514 | 
515 |             <td class="description last">
516 |                 <p>Maximum range value</p>
517 |                 
518 |             </td>
519 |         </tr>
520 | 
521 |     
522 |     </tbody>
523 | </table>
524 | 
525 | 
526 | 
527 | 
528 | 
529 | 
530 | 
531 | 
532 | 
533 | 
534 | 
535 | 
536 | 
537 | 
538 | <div class="section-returns">
539 | <h5>Returns:</h5>
540 | 
541 |         
542 | 
543 | <dl class="param-type">
544 |     <dt>
545 |         Type:
546 |     </dt>
547 |     <dd>
548 |         
549 | <span class="param-type"><code>number</code></span>
550 | 
551 | 
552 |     </dd>
553 | </dl>
554 | 
555 | 
556 | <div class="param-desc">
557 |     <p>Random float within the range</p>
558 | </div>
559 | 
560 |     
561 | </div>
562 | 
563 | 
564 | 
565 | <div class="section-examples">
566 | <h5>Example</h5>
567 | 
568 |     <pre class="prettyprint"><code>// two arguments
569 | Calc.rand(2, 18);
570 | // -> random float between 2 and 18
571 | 
572 | // single argument
573 | Calc.rand(42.5);
574 | // -> random float between 0 and 42.5</code></pre>
575 | 
576 | </div>
577 | 
578 | </div>
579 |         
580 |     
581 | 
582 |     
583 | 
584 |     
585 | </article>
586 | 
587 | </section>
588 | 
589 | 
590 | 
591 | 
592 | </div>
593 | 
594 | <br class="clear">
595 | 
596 | <footer>
597 |     Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Thu Dec 28 2017 20:24:40 GMT-0700 (MST) using the Minami theme.
598 | </footer>
599 | 
600 | <script>prettyPrint();</script>
601 | <script src="scripts/linenumber.js"></script>
602 | </body>
603 | </html>


--------------------------------------------------------------------------------
/docs/jsdoc/Control.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
  6 |     <title>Control - Documentation</title>
  7 | 
  8 |     <script src="scripts/prettify/prettify.js"></script>
  9 |     <script src="scripts/prettify/lang-css.js"></script>
 10 |     <!--[if lt IE 9]>
 11 |       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 12 |     <![endif]-->
 13 |     <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 14 |     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 15 |     <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 16 | </head>
 17 | <body>
 18 | 
 19 | <input type="checkbox" id="nav-trigger" class="nav-trigger" />
 20 | <label for="nav-trigger" class="navicon-button x">
 21 |   <div class="navicon"></div>
 22 | </label>
 23 | 
 24 | <label for="nav-trigger" class="overlay"></label>
 25 | 
 26 | <nav>
 27 |     <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Button.html">Button</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#onButtonClick">onButtonClick</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Calc.html">Calc</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.clamp">clamp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.rand">rand</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Control.html">Control</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Ease.html">Ease</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Range.html">Range</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="VariaBoard.html">VariaBoard</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addButton">addButton</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addRange">addRange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMousemove">onWindowMousemove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMouseup">onWindowMouseup</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#update">update</a></span></li>
 28 | </nav>
 29 | 
 30 | <div id="main">
 31 |     
 32 |     <h1 class="page-title">Control</h1>
 33 |     
 34 | 
 35 |     
 36 | 
 37 | 
 38 | 
 39 | 
 40 | <section>
 41 | 
 42 | <header>
 43 |     
 44 |         <h2>
 45 |         Control
 46 |         </h2>
 47 |         
 48 |             <div class="class-description"><p>Create a control</p></div>
 49 |         
 50 |     
 51 | </header>
 52 | 
 53 | <article>
 54 |     <div class="container-overview">
 55 |     
 56 |         
 57 | <div class="section-method">
 58 | 
 59 |     
 60 |     <h2>Constructor</h2>
 61 |     
 62 | 
 63 |     <h4 class="name" id="Control"><span class="type-signature"></span>new Control<span class="signature">()</span><span class="type-signature"></span></h4>
 64 | 
 65 |     
 66 | 
 67 | 
 68 | 
 69 | 
 70 | 
 71 | 
 72 | 
 73 | <dl class="details">
 74 | 
 75 |     
 76 | 
 77 |     
 78 | 
 79 |     
 80 | 
 81 |     
 82 | 
 83 |     
 84 | 
 85 |     
 86 | 
 87 |     
 88 | 
 89 |     
 90 | 
 91 |     
 92 | 
 93 |     
 94 | 
 95 |     
 96 | 
 97 |     
 98 | 
 99 |     
100 |     <dt class="tag-source">Source:</dt>
101 |     <dd class="tag-source"><ul class="dummy"><li>
102 |         <a href="controls_control.js.html">controls/control.js</a>, <a href="controls_control.js.html#line5">line 5</a>
103 |     </li></ul></dd>
104 |     
105 | 
106 |     
107 | 
108 |     
109 | 
110 |     
111 | </dl>
112 | 
113 | 
114 | 
115 | 
116 | 
117 | 
118 | 
119 | 
120 | 
121 | 
122 | 
123 | 
124 | 
125 | 
126 | 
127 | 
128 | 
129 | 
130 | 
131 | 
132 | 
133 | 
134 | 
135 | </div>
136 |     
137 |     </div>
138 | 
139 |     
140 | 
141 |     
142 | 
143 |     
144 | 
145 |      
146 | 
147 |     
148 | 
149 |     
150 | 
151 |     
152 | 
153 |     
154 | 
155 |     
156 | </article>
157 | 
158 | </section>
159 | 
160 | 
161 | 
162 | 
163 | </div>
164 | 
165 | <br class="clear">
166 | 
167 | <footer>
168 |     Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Thu Dec 28 2017 20:24:40 GMT-0700 (MST) using the Minami theme.
169 | </footer>
170 | 
171 | <script>prettyPrint();</script>
172 | <script src="scripts/linenumber.js"></script>
173 | </body>
174 | </html>


--------------------------------------------------------------------------------
/docs/jsdoc/Ease.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
  6 |     <title>Ease - Documentation</title>
  7 | 
  8 |     <script src="scripts/prettify/prettify.js"></script>
  9 |     <script src="scripts/prettify/lang-css.js"></script>
 10 |     <!--[if lt IE 9]>
 11 |       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 12 |     <![endif]-->
 13 |     <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 14 |     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 15 |     <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 16 | </head>
 17 | <body>
 18 | 
 19 | <input type="checkbox" id="nav-trigger" class="nav-trigger" />
 20 | <label for="nav-trigger" class="navicon-button x">
 21 |   <div class="navicon"></div>
 22 | </label>
 23 | 
 24 | <label for="nav-trigger" class="overlay"></label>
 25 | 
 26 | <nav>
 27 |     <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Button.html">Button</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#onButtonClick">onButtonClick</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Calc.html">Calc</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.clamp">clamp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.rand">rand</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Control.html">Control</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Ease.html">Ease</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Range.html">Range</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="VariaBoard.html">VariaBoard</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addButton">addButton</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addRange">addRange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMousemove">onWindowMousemove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMouseup">onWindowMouseup</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#update">update</a></span></li>
 28 | </nav>
 29 | 
 30 | <div id="main">
 31 |     
 32 |     <h1 class="page-title">Ease</h1>
 33 |     
 34 | 
 35 |     
 36 | 
 37 | 
 38 | 
 39 | 
 40 | <section>
 41 | 
 42 | <header>
 43 |     
 44 |         <h2>
 45 |         Ease
 46 |         </h2>
 47 |         
 48 |             <div class="class-description"><p>Easing equations</p></div>
 49 |         
 50 |     
 51 | </header>
 52 | 
 53 | <article>
 54 |     <div class="container-overview">
 55 |     
 56 |         
 57 | <div class="section-method">
 58 | 
 59 |     
 60 |     <h2>Constructor</h2>
 61 |     
 62 | 
 63 |     <h4 class="name" id="Ease"><span class="type-signature"></span>new Ease<span class="signature">()</span><span class="type-signature"></span></h4>
 64 | 
 65 |     
 66 | 
 67 | 
 68 | 
 69 | 
 70 | 
 71 | 
 72 | 
 73 | <dl class="details">
 74 | 
 75 |     
 76 | 
 77 |     
 78 | 
 79 |     
 80 | 
 81 |     
 82 | 
 83 |     
 84 | 
 85 |     
 86 | 
 87 |     
 88 | 
 89 |     
 90 | 
 91 |     
 92 | 
 93 |     
 94 | 
 95 |     
 96 | 
 97 |     
 98 | 
 99 |     
100 |     <dt class="tag-source">Source:</dt>
101 |     <dd class="tag-source"><ul class="dummy"><li>
102 |         <a href="util_ease.js.html">util/ease.js</a>, <a href="util_ease.js.html#line5">line 5</a>
103 |     </li></ul></dd>
104 |     
105 | 
106 |     
107 | 
108 |     
109 | 
110 |     
111 | </dl>
112 | 
113 | 
114 | 
115 | 
116 | 
117 | 
118 | 
119 | 
120 | 
121 | 
122 | 
123 | 
124 | 
125 | 
126 | 
127 | 
128 | 
129 | 
130 | 
131 | 
132 | 
133 | 
134 | 
135 | </div>
136 |     
137 |     </div>
138 | 
139 |     
140 | 
141 |     
142 | 
143 |     
144 | 
145 |      
146 | 
147 |     
148 | 
149 |     
150 | 
151 |     
152 | 
153 |     
154 | 
155 |     
156 | </article>
157 | 
158 | </section>
159 | 
160 | 
161 | 
162 | 
163 | </div>
164 | 
165 | <br class="clear">
166 | 
167 | <footer>
168 |     Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Thu Dec 28 2017 20:24:40 GMT-0700 (MST) using the Minami theme.
169 | </footer>
170 | 
171 | <script>prettyPrint();</script>
172 | <script src="scripts/linenumber.js"></script>
173 | </body>
174 | </html>


--------------------------------------------------------------------------------
/docs/jsdoc/Range.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
  6 |     <title>Range - Documentation</title>
  7 | 
  8 |     <script src="scripts/prettify/prettify.js"></script>
  9 |     <script src="scripts/prettify/lang-css.js"></script>
 10 |     <!--[if lt IE 9]>
 11 |       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 12 |     <![endif]-->
 13 |     <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 14 |     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 15 |     <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 16 | </head>
 17 | <body>
 18 | 
 19 | <input type="checkbox" id="nav-trigger" class="nav-trigger" />
 20 | <label for="nav-trigger" class="navicon-button x">
 21 |   <div class="navicon"></div>
 22 | </label>
 23 | 
 24 | <label for="nav-trigger" class="overlay"></label>
 25 | 
 26 | <nav>
 27 |     <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Button.html">Button</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#onButtonClick">onButtonClick</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Calc.html">Calc</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.clamp">clamp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.rand">rand</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Control.html">Control</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Ease.html">Ease</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Range.html">Range</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="VariaBoard.html">VariaBoard</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addButton">addButton</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addRange">addRange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMousemove">onWindowMousemove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMouseup">onWindowMouseup</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#update">update</a></span></li>
 28 | </nav>
 29 | 
 30 | <div id="main">
 31 |     
 32 |     <h1 class="page-title">Range</h1>
 33 |     
 34 | 
 35 |     
 36 | 
 37 | 
 38 | 
 39 | 
 40 | <section>
 41 | 
 42 | <header>
 43 |     
 44 |         <h2>
 45 |         Range
 46 |         </h2>
 47 |         
 48 |             <div class="class-description"><p>Create a range control</p></div>
 49 |         
 50 |     
 51 | </header>
 52 | 
 53 | <article>
 54 |     <div class="container-overview">
 55 |     
 56 |         
 57 | <div class="section-method">
 58 | 
 59 |     
 60 |     <h2>Constructor</h2>
 61 |     
 62 | 
 63 |     <h4 class="name" id="Range"><span class="type-signature"></span>new Range<span class="signature">(variaboard, config)</span><span class="type-signature"></span></h4>
 64 | 
 65 |     
 66 | 
 67 | 
 68 | 
 69 | 
 70 | 
 71 | 
 72 | 
 73 | <dl class="details">
 74 | 
 75 |     
 76 | 
 77 |     
 78 | 
 79 |     
 80 | 
 81 |     
 82 | 
 83 |     
 84 | 
 85 |     
 86 | 
 87 |     
 88 | 
 89 |     
 90 | 
 91 |     
 92 | 
 93 |     
 94 | 
 95 |     
 96 | 
 97 |     
 98 | 
 99 |     
100 |     <dt class="tag-source">Source:</dt>
101 |     <dd class="tag-source"><ul class="dummy"><li>
102 |         <a href="controls_range.js.html">controls/range.js</a>, <a href="controls_range.js.html#line25">line 25</a>
103 |     </li></ul></dd>
104 |     
105 | 
106 |     
107 | 
108 |     
109 | 
110 |     
111 | </dl>
112 | 
113 | 
114 | 
115 | 
116 | 
117 | 
118 | 
119 | 
120 | 
121 |     <h5>Parameters:</h5>
122 |     
123 | 
124 | <table class="params">
125 |     <thead>
126 |     <tr>
127 |         
128 |         <th>Name</th>
129 |         
130 | 
131 |         <th>Type</th>
132 | 
133 |         
134 | 
135 |         
136 | 
137 |         <th class="last">Description</th>
138 |     </tr>
139 |     </thead>
140 | 
141 |     <tbody>
142 |     
143 | 
144 |         <tr>
145 |             
146 |                 <td class="name"><code>variaboard</code></td>
147 |             
148 | 
149 |             <td class="type">
150 |             
151 |                 
152 | <span class="param-type"><code>object</code></span>
153 | 
154 | 
155 |             
156 |             </td>
157 | 
158 |             
159 | 
160 |             
161 | 
162 |             <td class="description last">
163 |                 <p>Reference to parent VariaBoard instance</p>
164 |                 
165 |             </td>
166 |         </tr>
167 | 
168 |     
169 | 
170 |         <tr>
171 |             
172 |                 <td class="name"><code>config</code></td>
173 |             
174 | 
175 |             <td class="type">
176 |             
177 |                 
178 | <span class="param-type"><code>object</code></span>
179 | 
180 | 
181 |             
182 |             </td>
183 | 
184 |             
185 | 
186 |             
187 | 
188 |             <td class="description last">
189 |                 <p>Configuration object</p>
190 |                 
191 |                     
192 | 
193 | <table class="params">
194 |     <thead>
195 |     <tr>
196 |         
197 |         <th>Name</th>
198 |         
199 | 
200 |         <th>Type</th>
201 | 
202 |         
203 | 
204 |         
205 | 
206 |         <th class="last">Description</th>
207 |     </tr>
208 |     </thead>
209 | 
210 |     <tbody>
211 |     
212 | 
213 |         <tr>
214 |             
215 |                 <td class="name"><code>id</code></td>
216 |             
217 | 
218 |             <td class="type">
219 |             
220 |                 
221 | <span class="param-type"><code>string</code></span>
222 | 
223 | 
224 |             
225 |             </td>
226 | 
227 |             
228 | 
229 |             
230 | 
231 |             <td class="description last">
232 |                 <p>Unique id/slug</p>
233 |                 
234 |             </td>
235 |         </tr>
236 | 
237 |     
238 | 
239 |         <tr>
240 |             
241 |                 <td class="name"><code>title</code></td>
242 |             
243 | 
244 |             <td class="type">
245 |             
246 |                 
247 | <span class="param-type"><code>string</code></span>
248 | 
249 | 
250 |             
251 |             </td>
252 | 
253 |             
254 | 
255 |             
256 | 
257 |             <td class="description last">
258 |                 <p>UI display title</p>
259 |                 
260 |             </td>
261 |         </tr>
262 | 
263 |     
264 | 
265 |         <tr>
266 |             
267 |                 <td class="name"><code>min</code></td>
268 |             
269 | 
270 |             <td class="type">
271 |             
272 |                 
273 | <span class="param-type"><code>number</code></span>
274 | 
275 | 
276 |             
277 |             </td>
278 | 
279 |             
280 | 
281 |             
282 | 
283 |             <td class="description last">
284 |                 <p>Minimum value</p>
285 |                 
286 |             </td>
287 |         </tr>
288 | 
289 |     
290 | 
291 |         <tr>
292 |             
293 |                 <td class="name"><code>max</code></td>
294 |             
295 | 
296 |             <td class="type">
297 |             
298 |                 
299 | <span class="param-type"><code>number</code></span>
300 | 
301 | 
302 |             
303 |             </td>
304 | 
305 |             
306 | 
307 |             
308 | 
309 |             <td class="description last">
310 |                 <p>Maximum value</p>
311 |                 
312 |             </td>
313 |         </tr>
314 | 
315 |     
316 | 
317 |         <tr>
318 |             
319 |                 <td class="name"><code>step</code></td>
320 |             
321 | 
322 |             <td class="type">
323 |             
324 |                 
325 | <span class="param-type"><code>number</code></span>
326 | 
327 | 
328 |             
329 |             </td>
330 | 
331 |             
332 | 
333 |             
334 | 
335 |             <td class="description last">
336 |                 <p>Step size</p>
337 |                 
338 |             </td>
339 |         </tr>
340 | 
341 |     
342 | 
343 |         <tr>
344 |             
345 |                 <td class="name"><code>default</code></td>
346 |             
347 | 
348 |             <td class="type">
349 |             
350 |                 
351 | <span class="param-type"><code>number</code></span>
352 | 
353 | 
354 |             
355 |             </td>
356 | 
357 |             
358 | 
359 |             
360 | 
361 |             <td class="description last">
362 |                 <p>Starting value</p>
363 |                 
364 |             </td>
365 |         </tr>
366 | 
367 |     
368 | 
369 |         <tr>
370 |             
371 |                 <td class="name"><code>randomizable</code></td>
372 |             
373 | 
374 |             <td class="type">
375 |             
376 |                 
377 | <span class="param-type"><code>boolean</code></span>
378 | 
379 | 
380 |             
381 |             </td>
382 | 
383 |             
384 | 
385 |             
386 | 
387 |             <td class="description last">
388 |                 <p>Can be randomized individually and by randomizing all</p>
389 |                 
390 |             </td>
391 |         </tr>
392 | 
393 |     
394 | 
395 |         <tr>
396 |             
397 |                 <td class="name"><code>mutable</code></td>
398 |             
399 | 
400 |             <td class="type">
401 |             
402 |                 
403 | <span class="param-type"><code>boolean</code></span>
404 | 
405 | 
406 |             
407 |             </td>
408 | 
409 |             
410 | 
411 |             
412 | 
413 |             <td class="description last">
414 |                 <p>Can be mutated individually and by mutating all</p>
415 |                 
416 |             </td>
417 |         </tr>
418 | 
419 |     
420 | 
421 |         <tr>
422 |             
423 |                 <td class="name"><code>locked</code></td>
424 |             
425 | 
426 |             <td class="type">
427 |             
428 |                 
429 | <span class="param-type"><code>boolean</code></span>
430 | 
431 | 
432 |             
433 |             </td>
434 | 
435 |             
436 | 
437 |             
438 | 
439 |             <td class="description last">
440 |                 <p>Temporarily toggle whether the control is affected by randomization and mutation</p>
441 |                 
442 |             </td>
443 |         </tr>
444 | 
445 |     
446 |     </tbody>
447 | </table>
448 | 
449 |                 
450 |             </td>
451 |         </tr>
452 | 
453 |     
454 |     </tbody>
455 | </table>
456 | 
457 | 
458 | 
459 | 
460 | <h5>Requires:</h5>
461 | <ul>
462 |     <li><a href="Control.html"><code>Control</code></a></li>
463 | 
464 |     <li><a href="Calc.html"><code>Calc</code></a></li>
465 | </ul>
466 | 
467 | 
468 | 
469 | 
470 | 
471 | 
472 | 
473 | 
474 | 
475 | 
476 | 
477 | 
478 | 
479 | </div>
480 |     
481 |     </div>
482 | 
483 |     
484 |         <h3 class="subsection-title">Extends</h3>
485 | 
486 |         
487 | 
488 | 
489 |     <ul>
490 |         <li><a href="Control.html">Control</a></li>
491 |     </ul>
492 | 
493 | 
494 |     
495 | 
496 |     
497 | 
498 |     
499 | 
500 |      
501 | 
502 |     
503 | 
504 |     
505 | 
506 |     
507 | 
508 |     
509 | 
510 |     
511 | </article>
512 | 
513 | </section>
514 | 
515 | 
516 | 
517 | 
518 | </div>
519 | 
520 | <br class="clear">
521 | 
522 | <footer>
523 |     Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Thu Dec 28 2017 20:24:40 GMT-0700 (MST) using the Minami theme.
524 | </footer>
525 | 
526 | <script>prettyPrint();</script>
527 | <script src="scripts/linenumber.js"></script>
528 | </body>
529 | </html>


--------------------------------------------------------------------------------
/docs/jsdoc/button.js.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
  6 |     <title>button.js - Documentation</title>
  7 | 
  8 |     <script src="scripts/prettify/prettify.js"></script>
  9 |     <script src="scripts/prettify/lang-css.js"></script>
 10 |     <!--[if lt IE 9]>
 11 |       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 12 |     <![endif]-->
 13 |     <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 14 |     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 15 |     <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 16 | </head>
 17 | <body>
 18 | 
 19 | <input type="checkbox" id="nav-trigger" class="nav-trigger" />
 20 | <label for="nav-trigger" class="navicon-button x">
 21 |   <div class="navicon"></div>
 22 | </label>
 23 | 
 24 | <label for="nav-trigger" class="overlay"></label>
 25 | 
 26 | <nav>
 27 |     <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Button.html">Button</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#onButtonClick">onButtonClick</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Calc.html">Calc</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.clamp">clamp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.rand">rand</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Control.html">Control</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Ease.html">Ease</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Range.html">Range</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="VariaBoard.html">VariaBoard</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addButton">addButton</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addRange">addRange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMousemove">onWindowMousemove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMouseup">onWindowMouseup</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#update">update</a></span></li>
 28 | </nav>
 29 | 
 30 | <div id="main">
 31 |     
 32 |     <h1 class="page-title">button.js</h1>
 33 |     
 34 | 
 35 |     
 36 | 
 37 | 
 38 | 
 39 |     
 40 |     <section>
 41 |         <article>
 42 |             <pre class="prettyprint source linenums"><code>/**
 43 |  * Create a button
 44 |  */
 45 | 
 46 | class Button {
 47 | 
 48 |   constructor(variaboard, config) {
 49 |     this.variaboard = variaboard;
 50 |     this.id = config.id;
 51 |     this.title = config.title;
 52 |     this.callback = config.callback !== undefined ? config.callback : () => {};
 53 | 
 54 |     this.createDOM();
 55 |     this.listen();
 56 |   }
 57 | 
 58 |   /**
 59 |    * Create necessary DOM elements
 60 |    */
 61 | 
 62 |   createDOM() {
 63 |     this.dom = {};
 64 | 
 65 |     // control
 66 |     this.dom.control = document.createElement('div');
 67 |     this.dom.control.classList.add(`${this.variaboard.namespace}-control`);
 68 | 
 69 |     // button
 70 |     this.dom.button = document.createElement('button');
 71 |     this.dom.button.classList.add(`${this.variaboard.namespace}-control-button`);
 72 |     this.dom.button.textContent = this.title;
 73 |     this.dom.control.appendChild(this.dom.button);
 74 | 
 75 |     // add to control to panel
 76 |     this.variaboard.dom.controls.appendChild(this.dom.control);
 77 |   }
 78 | 
 79 |   /**
 80 |    * Setup event listeners
 81 |    */
 82 | 
 83 |   listen() {
 84 |     this.dom.button.addEventListener('click', (e) => this.onButtonClick(e));
 85 |   }
 86 | 
 87 |   /**
 88 |    * On button click event
 89 |    *
 90 |    * @param {object} e - Event object
 91 |    */
 92 | 
 93 |   onButtonClick(e) {
 94 |     this.callback();
 95 |   }
 96 | 
 97 | }
 98 | 
 99 | module.exports = Button
100 | </code></pre>
101 |         </article>
102 |     </section>
103 | 
104 | 
105 | 
106 | 
107 | </div>
108 | 
109 | <br class="clear">
110 | 
111 | <footer>
112 |     Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Thu Dec 28 2017 20:24:40 GMT-0700 (MST) using the Minami theme.
113 | </footer>
114 | 
115 | <script>prettyPrint();</script>
116 | <script src="scripts/linenumber.js"></script>
117 | </body>
118 | </html>
119 | 


--------------------------------------------------------------------------------
/docs/jsdoc/controls_control.js.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
  6 |     <title>controls/control.js - Documentation</title>
  7 | 
  8 |     <script src="scripts/prettify/prettify.js"></script>
  9 |     <script src="scripts/prettify/lang-css.js"></script>
 10 |     <!--[if lt IE 9]>
 11 |       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 12 |     <![endif]-->
 13 |     <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 14 |     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 15 |     <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 16 | </head>
 17 | <body>
 18 | 
 19 | <input type="checkbox" id="nav-trigger" class="nav-trigger" />
 20 | <label for="nav-trigger" class="navicon-button x">
 21 |   <div class="navicon"></div>
 22 | </label>
 23 | 
 24 | <label for="nav-trigger" class="overlay"></label>
 25 | 
 26 | <nav>
 27 |     <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Button.html">Button</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#onButtonClick">onButtonClick</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Calc.html">Calc</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.clamp">clamp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.rand">rand</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Control.html">Control</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Ease.html">Ease</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Range.html">Range</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="VariaBoard.html">VariaBoard</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addButton">addButton</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addRange">addRange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMousemove">onWindowMousemove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMouseup">onWindowMouseup</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#update">update</a></span></li>
 28 | </nav>
 29 | 
 30 | <div id="main">
 31 |     
 32 |     <h1 class="page-title">controls/control.js</h1>
 33 |     
 34 | 
 35 |     
 36 | 
 37 | 
 38 | 
 39 |     
 40 |     <section>
 41 |         <article>
 42 |             <pre class="prettyprint source linenums"><code>/**
 43 |  * Create a control
 44 |  */
 45 | 
 46 | class Control {
 47 | 
 48 |   constructor(variaboard, config) {
 49 |     this.variaboard = variaboard;
 50 |     this.type = config.type;
 51 |     this.id = config.id;
 52 |     this.title = config.title;
 53 |     this.default = config.default;
 54 |     this.randomizable = config.randomizable !== undefined ? config.randomizable : true;
 55 |     this.mutable = config.mutable !== undefined ? config.mutable : true;
 56 |     this.locked = config.locked !== undefined ? config.locked : false;
 57 |     this.value = this.default;
 58 | 
 59 |     this.createDOM();
 60 |   }
 61 | 
 62 |   createDOM() {
 63 |     this.dom = {};
 64 | 
 65 |     // control
 66 |     this.dom.control = document.createElement('div');
 67 |     this.dom.control.classList.add(`${this.variaboard.namespace}-control`);
 68 | 
 69 |     // title
 70 |     this.dom.title = document.createElement('h3');
 71 |     this.dom.title.classList.add(`${this.variaboard.namespace}-control-title`);
 72 |     this.dom.title.textContent = this.title;
 73 |     this.dom.control.appendChild(this.dom.title);
 74 | 
 75 |     // value
 76 |     this.dom.value = document.createElement('input');
 77 |     this.dom.value.classList.add(`${this.variaboard.namespace}-control-value`);
 78 |     this.dom.control.appendChild(this.dom.value);
 79 | 
 80 |     // add control to panel
 81 |     this.variaboard.dom.controls.appendChild(this.dom.control);
 82 |   }
 83 | 
 84 |   lock() {
 85 |     this.locked = true;
 86 |   }
 87 | 
 88 |   unlock() {
 89 |     this.locked = false;
 90 |   }
 91 | 
 92 | }
 93 | 
 94 | module.exports = Control;
 95 | </code></pre>
 96 |         </article>
 97 |     </section>
 98 | 
 99 | 
100 | 
101 | 
102 | </div>
103 | 
104 | <br class="clear">
105 | 
106 | <footer>
107 |     Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Thu Dec 28 2017 20:24:40 GMT-0700 (MST) using the Minami theme.
108 | </footer>
109 | 
110 | <script>prettyPrint();</script>
111 | <script src="scripts/linenumber.js"></script>
112 | </body>
113 | </html>
114 | 


--------------------------------------------------------------------------------
/docs/jsdoc/controls_range.js.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
  6 |     <title>controls/range.js - Documentation</title>
  7 | 
  8 |     <script src="scripts/prettify/prettify.js"></script>
  9 |     <script src="scripts/prettify/lang-css.js"></script>
 10 |     <!--[if lt IE 9]>
 11 |       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 12 |     <![endif]-->
 13 |     <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 14 |     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 15 |     <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 16 | </head>
 17 | <body>
 18 | 
 19 | <input type="checkbox" id="nav-trigger" class="nav-trigger" />
 20 | <label for="nav-trigger" class="navicon-button x">
 21 |   <div class="navicon"></div>
 22 | </label>
 23 | 
 24 | <label for="nav-trigger" class="overlay"></label>
 25 | 
 26 | <nav>
 27 |     <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Button.html">Button</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#onButtonClick">onButtonClick</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Calc.html">Calc</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.clamp">clamp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.rand">rand</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Control.html">Control</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Ease.html">Ease</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Range.html">Range</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="VariaBoard.html">VariaBoard</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addButton">addButton</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addRange">addRange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMousemove">onWindowMousemove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMouseup">onWindowMouseup</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#update">update</a></span></li>
 28 | </nav>
 29 | 
 30 | <div id="main">
 31 |     
 32 |     <h1 class="page-title">controls/range.js</h1>
 33 |     
 34 | 
 35 |     
 36 | 
 37 | 
 38 | 
 39 |     
 40 |     <section>
 41 |         <article>
 42 |             <pre class="prettyprint source linenums"><code>const Control = require('./control');
 43 | const Calc = require('../util/calc');
 44 | 
 45 | /**
 46 |  * Create a range control
 47 |  *
 48 |  * @param {object} variaboard - Reference to parent VariaBoard instance
 49 |  * @param {object} config - Configuration object
 50 |  * @param {string} config.id - Unique id/slug
 51 |  * @param {string} config.title - UI display title
 52 |  * @param {number} config.min - Minimum value
 53 |  * @param {number} config.max - Maximum value
 54 |  * @param {number} config.step - Step size
 55 |  * @param {number} config.default - Starting value
 56 |  * @param {boolean} config.randomizable - Can be randomized individually and by randomizing all
 57 |  * @param {boolean} config.mutable - Can be mutated individually and by mutating all
 58 |  * @param {boolean} config.locked - Temporarily toggle whether the control is affected by randomization and mutation
 59 |  *
 60 |  * @extends Control
 61 |  *
 62 |  * @requires {@link Control}
 63 |  * @requires {@link Calc}
 64 |  */
 65 | 
 66 | class Range extends Control {
 67 | 
 68 |   constructor(variaboard, config) {
 69 |     super(variaboard, config);
 70 |     this.type = 'range';
 71 | 
 72 |     this.min = config.min;
 73 |     this.max = config.max;
 74 |     this.step = config.step !== undefined ? Math.abs(config.step) : 1;
 75 |     this.places = this.step.toString().indexOf('.') > -1 ? this.step.toString().split('.')[1].length : 0;
 76 |     this.valueTarget = this.value;
 77 | 
 78 |     this.mouseIsDown = false;
 79 |     this.settled = false;
 80 | 
 81 |     this.listen();
 82 | 
 83 |     this.set(this.value);
 84 |   }
 85 | 
 86 |   createDOM() {
 87 |     super.createDOM();
 88 | 
 89 |     // range
 90 |     this.dom.range = document.createElement('div');
 91 |     this.dom.range.classList.add(`${this.variaboard.namespace}-control-range`);
 92 | 
 93 |     // range inner
 94 |     this.dom.rangeInner = document.createElement('div');
 95 |     this.dom.rangeInner.classList.add(`${this.variaboard.namespace}-control-range-inner`);
 96 |     this.dom.range.appendChild(this.dom.rangeInner);
 97 |     
 98 |     this.dom.control.appendChild(this.dom.range);
 99 |   }
100 | 
101 |   listen() {
102 |     this.dom.value.addEventListener('change', (e) => this.onValueChange(e));
103 |     this.dom.range.addEventListener('mousedown', (e) => this.onValueMousedown(e));
104 |   }
105 | 
106 |   onValueChange(e) {
107 |     this.set(this.dom.value.value);
108 |     this.valueTarget = this.value;
109 |   }
110 | 
111 |   onValueMousedown(e) {
112 |     this.variaboard.mouse.down = true;
113 |     this.variaboard.mouse.anchor.x = e.clientX;
114 |     this.variaboard.mouse.anchor.y = e.clientY;
115 |     this.mouseIsDown = true;
116 |     this.setDragValue();
117 |   }
118 | 
119 |   onWindowMouseup(e) {
120 |     this.mouseIsDown = false;
121 |   }
122 | 
123 |   onWindowMousemove(e) {
124 |     if(this.mouseIsDown) {
125 |       this.setDragValue();
126 |     }
127 |   }
128 | 
129 |   randomize() {
130 |     this.settled = false;
131 |     this.valueTarget = Calc.rand(this.min, this.max);
132 |   }
133 | 
134 |   setDragValue() {
135 |     let left = this.dom.range.offsetLeft;
136 |     let width = this.dom.range.offsetWidth;
137 |     let val = Calc.map(this.variaboard.mouse.x, left, left + width, this.min, this.max);
138 |     this.set(val);
139 |     this.valueTarget = this.value;
140 |   }
141 | 
142 |   easeSet() {
143 |     if(Math.abs(this.value - this.valueTarget) > this.step / 2) {
144 |       this.value += (this.valueTarget - this.value) * 0.2;
145 |       this.set(this.value, true);
146 |     } else {
147 |       this.settled = true;
148 |       this.value = this.valueTarget;
149 |       this.set(this.value); 
150 |     }
151 |   }
152 | 
153 |   set(val, bypassRounding) {
154 |     // sanitize value
155 |     val = parseFloat(val);
156 |     val = isNaN(val) ? this.default : val;
157 |     val = Calc.clamp(val, this.min, this.max);
158 |     val = bypassRounding ? val : Calc.roundToNearestInterval(val, this.step);
159 |     this.value = val;
160 |     
161 |     // set input value
162 |     this.dom.value.value = this.value.toFixed(this.places);
163 |     
164 |     // set range value
165 |     this.dom.rangeInner.style.transform = `scaleX(${Calc.map(this.value, this.min, this.max, 0, 1)})`;
166 |     
167 |     // set the title attribute for the control
168 |     this.dom.control.setAttribute('title', `${this.title}: ${this.value.toFixed(this.places)}`);
169 |   }
170 | 
171 | }
172 | 
173 | module.exports = Range;
174 | </code></pre>
175 |         </article>
176 |     </section>
177 | 
178 | 
179 | 
180 | 
181 | </div>
182 | 
183 | <br class="clear">
184 | 
185 | <footer>
186 |     Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Thu Dec 28 2017 20:24:40 GMT-0700 (MST) using the Minami theme.
187 | </footer>
188 | 
189 | <script>prettyPrint();</script>
190 | <script src="scripts/linenumber.js"></script>
191 | </body>
192 | </html>
193 | 


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-Bold-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-Bold-webfont.eot


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-Bold-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-Bold-webfont.woff


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-BoldItalic-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-BoldItalic-webfont.eot


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-BoldItalic-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-BoldItalic-webfont.woff


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-Italic-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-Italic-webfont.eot


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-Italic-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-Italic-webfont.woff


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-Light-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-Light-webfont.eot


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-Light-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-Light-webfont.woff


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-LightItalic-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-LightItalic-webfont.eot


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-LightItalic-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-LightItalic-webfont.woff


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-Regular-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-Regular-webfont.eot


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-Regular-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-Regular-webfont.woff


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-Semibold-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-Semibold-webfont.eot


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-Semibold-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-Semibold-webfont.ttf


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-Semibold-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-Semibold-webfont.woff


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-SemiboldItalic-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-SemiboldItalic-webfont.eot


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-SemiboldItalic-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-SemiboldItalic-webfont.ttf


--------------------------------------------------------------------------------
/docs/jsdoc/fonts/OpenSans-SemiboldItalic-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackrugile/variaboard/6144a4f9d6983cf232a80af42c320a03a63082b8/docs/jsdoc/fonts/OpenSans-SemiboldItalic-webfont.woff


--------------------------------------------------------------------------------
/docs/jsdoc/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
 6 |     <title>Home - Documentation</title>
 7 | 
 8 |     <script src="scripts/prettify/prettify.js"></script>
 9 |     <script src="scripts/prettify/lang-css.js"></script>
10 |     <!--[if lt IE 9]>
11 |       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
12 |     <![endif]-->
13 |     <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
14 |     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
15 |     <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
16 | </head>
17 | <body>
18 | 
19 | <input type="checkbox" id="nav-trigger" class="nav-trigger" />
20 | <label for="nav-trigger" class="navicon-button x">
21 |   <div class="navicon"></div>
22 | </label>
23 | 
24 | <label for="nav-trigger" class="overlay"></label>
25 | 
26 | <nav>
27 |     <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Button.html">Button</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#onButtonClick">onButtonClick</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Calc.html">Calc</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.clamp">clamp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.rand">rand</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Control.html">Control</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Ease.html">Ease</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Range.html">Range</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="VariaBoard.html">VariaBoard</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addButton">addButton</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addRange">addRange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMousemove">onWindowMousemove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMouseup">onWindowMouseup</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#update">update</a></span></li>
28 | </nav>
29 | 
30 | <div id="main">
31 |     
32 | 
33 |     
34 | 
35 | 
36 | 
37 |     
38 | 
39 | 
40 | 
41 | 
42 | 
43 | 
44 | 
45 | 
46 | 
47 |     
48 | 
49 | 
50 |     <section class="readme">
51 |         <article><h1>VariaBoard</h1><p><a href="https://travis-ci.org/jackrugile/variaboard/"><img src="https://img.shields.io/travis/jackrugile/variaboard.svg" alt="Travis CI"></a>
52 | <img src="https://img.shields.io/github/package-json/v/jackrugile/variaboard.svg" alt="Version">
53 | <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/github/license/jackrugile/variaboard.svg" alt="MIT License"></a></p>
54 | <p>Control panel for tweaking parameters on front end projects.</p>
55 | <ul>
56 | <li><strong><a href="https://github.com/jackrugile/variaboard">GitHub Repository</a></strong></li>
57 | <li><strong><a href="https://jackrugile.github.io/variaboard/">Demo</a></strong></li>
58 | <li><strong><a href="https://jackrugile.github.io/variaboard/jsdoc/">Documentation</a></strong></li>
59 | </ul>
60 | <p><a href="https://jackrugile.github.io/variaboard/"><img src="https://user-images.githubusercontent.com/726153/34353443-6031dfb2-e9e5-11e7-845a-9f96de1f125c.png" alt="Screenshot"></a></p>
61 | <h2>Inspiration and Reference</h2><ul>
62 | <li>dat.GUI - <a href="https://workshop.chromeexperiments.com/examples/gui/">Demo</a> - <a href="https://github.com/dataarts/dat.gui">Code</a> - by <a href="https://github.com/dataarts">Google Data Arts Team @dataarts</a></li>
63 | <li>QuickSettings - <a href="http://bit101.github.io/quicksettings/">Demo</a> - <a href="https://github.com/bit101/quicksettings">Code</a> - by <a href="https://github.com/bit101">Keith Peters @bit101</a></li>
64 | <li>Bfxr - <a href="https://www.bfxr.net/">Demo</a> - <a href="https://github.com/increpare/bfxr">Code</a> - by <a href="https://github.com/increpare">Stephen Lavelle @increpare</a></li>
65 | <li>ControlKit - <a href="https://github.com/automat/controlkit.js/tree/master/examples">Demo</a> - <a href="https://github.com/automat/controlkit.js">Code</a> - by <a href="https://github.com/automat">Henryk Wollik @automat</a></li>
66 | <li>Control Panel - <a href="http://control-panel.surge.sh/">Demo</a> - <a href="https://github.com/freeman-lab/control-panel">Code</a> - by <a href="https://github.com/freeman-lab">Jeremy Freeman @freeman-lab</a></li>
67 | </ul></article>
68 |     </section>
69 | 
70 | 
71 | 
72 | 
73 | 
74 | 
75 | </div>
76 | 
77 | <br class="clear">
78 | 
79 | <footer>
80 |     Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Thu Dec 28 2017 20:24:40 GMT-0700 (MST) using the Minami theme.
81 | </footer>
82 | 
83 | <script>prettyPrint();</script>
84 | <script src="scripts/linenumber.js"></script>
85 | </body>
86 | </html>


--------------------------------------------------------------------------------
/docs/jsdoc/index.js.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
  6 |     <title>index.js - Documentation</title>
  7 | 
  8 |     <script src="scripts/prettify/prettify.js"></script>
  9 |     <script src="scripts/prettify/lang-css.js"></script>
 10 |     <!--[if lt IE 9]>
 11 |       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 12 |     <![endif]-->
 13 |     <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 14 |     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 15 |     <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 16 | </head>
 17 | <body>
 18 | 
 19 | <input type="checkbox" id="nav-trigger" class="nav-trigger" />
 20 | <label for="nav-trigger" class="navicon-button x">
 21 |   <div class="navicon"></div>
 22 | </label>
 23 | 
 24 | <label for="nav-trigger" class="overlay"></label>
 25 | 
 26 | <nav>
 27 |     <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Button.html">Button</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#onButtonClick">onButtonClick</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Calc.html">Calc</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.clamp">clamp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.rand">rand</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Control.html">Control</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Ease.html">Ease</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Range.html">Range</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="VariaBoard.html">VariaBoard</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addButton">addButton</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addRange">addRange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMousemove">onWindowMousemove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMouseup">onWindowMouseup</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#update">update</a></span></li>
 28 | </nav>
 29 | 
 30 | <div id="main">
 31 |     
 32 |     <h1 class="page-title">index.js</h1>
 33 |     
 34 | 
 35 |     
 36 | 
 37 | 
 38 | 
 39 |     
 40 |     <section>
 41 |         <article>
 42 |             <pre class="prettyprint source linenums"><code>const Button = require('./button');
 43 | const Range = require('./controls/range');
 44 | const Calc = require('./util/calc');
 45 | 
 46 | class VariaBoard {
 47 | 
 48 |   /**
 49 |    * Create a VariaBoard control panel
 50 |    *
 51 |    * @param {object} config - Configuration object
 52 |    * @param {object|string} [config.container=document.body] - DOM element or CSS selector
 53 |    * @param {string} [config.title="Control Panel"] - Title of the panel
 54 |    *
 55 |    * @requires {@link Button}
 56 |    * @requires {@link Range}
 57 |    * @requires {@link Calc}
 58 |    */
 59 | 
 60 |   constructor(config) {
 61 |     this.namespace = 'variaboard';
 62 |     this.controls = {};
 63 |     this.buttons = {};
 64 | 
 65 |     this.mouse = {
 66 |       down: false,
 67 |       x: 0,
 68 |       y: 0,
 69 |       anchor: {
 70 |         x: 0,
 71 |         y: 0
 72 |       }
 73 |     }
 74 | 
 75 |     this.needsUpdate = false;
 76 |     this.raf = null;
 77 | 
 78 |     this.container = config.container !== undefined ? config.container : document.body;
 79 |     this.title = config.title !== undefined ? config.title : 'VariaBoard';
 80 |     
 81 |     this.createDOM();
 82 |     this.listen();
 83 |   }
 84 | 
 85 |   /**
 86 |    * Create necessary DOM elements
 87 |    */
 88 | 
 89 |   createDOM() {
 90 |     this.dom = {};
 91 | 
 92 |     // container
 93 |     this.dom.container = this.container;
 94 | 
 95 |     // panel
 96 |     this.dom.panel = document.createElement('div');
 97 |     this.dom.panel.classList.add(`${this.namespace}-panel`);
 98 | 
 99 |     // title
100 |     this.dom.title = document.createElement('h1');
101 |     this.dom.title.classList.add(`${this.namespace}-title`);
102 |     this.dom.title.textContent = this.title;
103 |     this.dom.panel.appendChild(this.dom.title);
104 | 
105 |     // controls
106 |     this.dom.controls = document.createElement('div');
107 |     this.dom.controls.classList.add(`${this.namespace}-controls`);
108 |     this.dom.panel.appendChild(this.dom.controls);
109 | 
110 |     // add panel to container
111 |     this.dom.container.appendChild(this.dom.panel);
112 |   }
113 | 
114 |   /**
115 |    * Setup event listeners
116 |    */
117 | 
118 |   listen() {
119 |     window.addEventListener('mouseup', (e) => this.onWindowMouseup(e));
120 |     window.addEventListener('mousemove', (e) => this.onWindowMousemove(e));
121 |   }
122 | 
123 |   /**
124 |    * On window mouse up event
125 |    *
126 |    * @param {object} e - Event object
127 |    */
128 | 
129 |   onWindowMouseup(e) {
130 |     this.mouse.down = false;
131 |     for(let key in this.controls) {
132 |       let control = this.controls[key];
133 |       control.onWindowMouseup(e);
134 |     }
135 |   }
136 | 
137 |   /**
138 |    * On window mouse move event
139 |    *
140 |    * @param {object} e - Event object
141 |    */
142 | 
143 |   onWindowMousemove(e) {
144 |     this.mouse.x = e.clientX;
145 |     this.mouse.y = e.clientY;
146 |     for(let key in this.controls) {
147 |       let control = this.controls[key];
148 |       control.onWindowMousemove(e);
149 |     }
150 |   }
151 | 
152 |   /**
153 |    * Update based on requestAnimationFrame()
154 |    */
155 | 
156 |   update() {
157 |     this.needsUpdate = false;
158 |     for(let key in this.controls) {
159 |       if(this.controls[key].type === 'range') {
160 |         this.controls[key].easeSet();
161 |         if(!this.controls[key].settled) {
162 |           this.needsUpdate = true;
163 |         }
164 |       }
165 |     }
166 | 
167 |     if(this.needsUpdate) {
168 |       this.raf = requestAnimationFrame(() => this.update());
169 |     }
170 |   }
171 | 
172 |   /**
173 |    * Add a button
174 |    *
175 |    * @param {object} config - Configuration object
176 |    * @param {object} config.id - ID slug
177 |    * @param {object} config.title - Title text
178 |    * @param {object} [config.callback=() => {}] - Callback function for button press
179 |    */
180 | 
181 |   addButton(config) {
182 |     this.buttons[config.id] = new Button(this, config);
183 |   }
184 | 
185 |   /**
186 |    * Add a range control via {@linkcode Range}
187 |    *
188 |    * @param {object} config - Configuration object
189 |    * @param {string} config.id - Unique id/slug
190 |    * @param {string} config.title - UI display title
191 |    * @param {number} config.min - Minimum value
192 |    * @param {number} config.max - Maximum value
193 |    * @param {number} config.step - Step size
194 |    * @param {number} config.default - Starting value
195 |    * @param {boolean} config.randomizable - Can be randomized individually and by randomizing all
196 |    * @param {boolean} config.mutable - Can be mutated individually and by mutating all
197 |    * @param {boolean} config.locked - Temporarily toggle whether the control is affected by randomization and mutation
198 |    */
199 | 
200 |   addRange(config) {
201 |     let control = new Range(this, config);
202 |     this.controls[control.id] = control;
203 |   }
204 | 
205 |   get(id) {
206 |     return this.controls[id].value;
207 |   }
208 | 
209 |   randomize() {
210 |     for(let key in this.controls) {
211 |       this.controls[key].randomize();
212 |     }
213 |     cancelAnimationFrame(this.raf);
214 |     this.update();
215 |   }
216 | 
217 |   mutate() {
218 |     for(let key in this.controls) {
219 |       let control = this.controls[key];
220 |       let size = (control.max - control.min) / 15;
221 |       control.settled = false;
222 |       if(control.value &lt;= control.min) {
223 |         control.valueTarget = Calc.rand(control.step, control.min + size);
224 |       } else if(control.value >= control.max) {
225 |         control.valueTarget = Calc.rand(control.max - size, control.max - control.step);
226 |       } else {
227 |         control.valueTarget = control.value + Calc.rand(-size, size);
228 |       }
229 |       cancelAnimationFrame(this.raf);
230 |       this.update();
231 |     }
232 |   }
233 | 
234 | }
235 | 
236 | module.exports = VariaBoard;
237 | </code></pre>
238 |         </article>
239 |     </section>
240 | 
241 | 
242 | 
243 | 
244 | </div>
245 | 
246 | <br class="clear">
247 | 
248 | <footer>
249 |     Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Thu Dec 28 2017 20:24:40 GMT-0700 (MST) using the Minami theme.
250 | </footer>
251 | 
252 | <script>prettyPrint();</script>
253 | <script src="scripts/linenumber.js"></script>
254 | </body>
255 | </html>
256 | 


--------------------------------------------------------------------------------
/docs/jsdoc/scripts/linenumber.js:
--------------------------------------------------------------------------------
 1 | /*global document */
 2 | (function() {
 3 |     var source = document.getElementsByClassName('prettyprint source linenums');
 4 |     var i = 0;
 5 |     var lineNumber = 0;
 6 |     var lineId;
 7 |     var lines;
 8 |     var totalLines;
 9 |     var anchorHash;
10 | 
11 |     if (source && source[0]) {
12 |         anchorHash = document.location.hash.substring(1);
13 |         lines = source[0].getElementsByTagName('li');
14 |         totalLines = lines.length;
15 | 
16 |         for (; i < totalLines; i++) {
17 |             lineNumber++;
18 |             lineId = 'line' + lineNumber;
19 |             lines[i].id = lineId;
20 |             if (lineId === anchorHash) {
21 |                 lines[i].className += ' selected';
22 |             }
23 |         }
24 |     }
25 | })();
26 | 


--------------------------------------------------------------------------------
/docs/jsdoc/scripts/prettify/Apache-License-2.0.txt:
--------------------------------------------------------------------------------
  1 | 
  2 |                                  Apache License
  3 |                            Version 2.0, January 2004
  4 |                         http://www.apache.org/licenses/
  5 | 
  6 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  7 | 
  8 |    1. Definitions.
  9 | 
 10 |       "License" shall mean the terms and conditions for use, reproduction,
 11 |       and distribution as defined by Sections 1 through 9 of this document.
 12 | 
 13 |       "Licensor" shall mean the copyright owner or entity authorized by
 14 |       the copyright owner that is granting the License.
 15 | 
 16 |       "Legal Entity" shall mean the union of the acting entity and all
 17 |       other entities that control, are controlled by, or are under common
 18 |       control with that entity. For the purposes of this definition,
 19 |       "control" means (i) the power, direct or indirect, to cause the
 20 |       direction or management of such entity, whether by contract or
 21 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 22 |       outstanding shares, or (iii) beneficial ownership of such entity.
 23 | 
 24 |       "You" (or "Your") shall mean an individual or Legal Entity
 25 |       exercising permissions granted by this License.
 26 | 
 27 |       "Source" form shall mean the preferred form for making modifications,
 28 |       including but not limited to software source code, documentation
 29 |       source, and configuration files.
 30 | 
 31 |       "Object" form shall mean any form resulting from mechanical
 32 |       transformation or translation of a Source form, including but
 33 |       not limited to compiled object code, generated documentation,
 34 |       and conversions to other media types.
 35 | 
 36 |       "Work" shall mean the work of authorship, whether in Source or
 37 |       Object form, made available under the License, as indicated by a
 38 |       copyright notice that is included in or attached to the work
 39 |       (an example is provided in the Appendix below).
 40 | 
 41 |       "Derivative Works" shall mean any work, whether in Source or Object
 42 |       form, that is based on (or derived from) the Work and for which the
 43 |       editorial revisions, annotations, elaborations, or other modifications
 44 |       represent, as a whole, an original work of authorship. For the purposes
 45 |       of this License, Derivative Works shall not include works that remain
 46 |       separable from, or merely link (or bind by name) to the interfaces of,
 47 |       the Work and Derivative Works thereof.
 48 | 
 49 |       "Contribution" shall mean any work of authorship, including
 50 |       the original version of the Work and any modifications or additions
 51 |       to that Work or Derivative Works thereof, that is intentionally
 52 |       submitted to Licensor for inclusion in the Work by the copyright owner
 53 |       or by an individual or Legal Entity authorized to submit on behalf of
 54 |       the copyright owner. For the purposes of this definition, "submitted"
 55 |       means any form of electronic, verbal, or written communication sent
 56 |       to the Licensor or its representatives, including but not limited to
 57 |       communication on electronic mailing lists, source code control systems,
 58 |       and issue tracking systems that are managed by, or on behalf of, the
 59 |       Licensor for the purpose of discussing and improving the Work, but
 60 |       excluding communication that is conspicuously marked or otherwise
 61 |       designated in writing by the copyright owner as "Not a Contribution."
 62 | 
 63 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 64 |       on behalf of whom a Contribution has been received by Licensor and
 65 |       subsequently incorporated within the Work.
 66 | 
 67 |    2. Grant of Copyright License. Subject to the terms and conditions of
 68 |       this License, each Contributor hereby grants to You a perpetual,
 69 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 70 |       copyright license to reproduce, prepare Derivative Works of,
 71 |       publicly display, publicly perform, sublicense, and distribute the
 72 |       Work and such Derivative Works in Source or Object form.
 73 | 
 74 |    3. Grant of Patent License. Subject to the terms and conditions of
 75 |       this License, each Contributor hereby grants to You a perpetual,
 76 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 77 |       (except as stated in this section) patent license to make, have made,
 78 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 79 |       where such license applies only to those patent claims licensable
 80 |       by such Contributor that are necessarily infringed by their
 81 |       Contribution(s) alone or by combination of their Contribution(s)
 82 |       with the Work to which such Contribution(s) was submitted. If You
 83 |       institute patent litigation against any entity (including a
 84 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 85 |       or a Contribution incorporated within the Work constitutes direct
 86 |       or contributory patent infringement, then any patent licenses
 87 |       granted to You under this License for that Work shall terminate
 88 |       as of the date such litigation is filed.
 89 | 
 90 |    4. Redistribution. You may reproduce and distribute copies of the
 91 |       Work or Derivative Works thereof in any medium, with or without
 92 |       modifications, and in Source or Object form, provided that You
 93 |       meet the following conditions:
 94 | 
 95 |       (a) You must give any other recipients of the Work or
 96 |           Derivative Works a copy of this License; and
 97 | 
 98 |       (b) You must cause any modified files to carry prominent notices
 99 |           stating that You changed the files; and
100 | 
101 |       (c) You must retain, in the Source form of any Derivative Works
102 |           that You distribute, all copyright, patent, trademark, and
103 |           attribution notices from the Source form of the Work,
104 |           excluding those notices that do not pertain to any part of
105 |           the Derivative Works; and
106 | 
107 |       (d) If the Work includes a "NOTICE" text file as part of its
108 |           distribution, then any Derivative Works that You distribute must
109 |           include a readable copy of the attribution notices contained
110 |           within such NOTICE file, excluding those notices that do not
111 |           pertain to any part of the Derivative Works, in at least one
112 |           of the following places: within a NOTICE text file distributed
113 |           as part of the Derivative Works; within the Source form or
114 |           documentation, if provided along with the Derivative Works; or,
115 |           within a display generated by the Derivative Works, if and
116 |           wherever such third-party notices normally appear. The contents
117 |           of the NOTICE file are for informational purposes only and
118 |           do not modify the License. You may add Your own attribution
119 |           notices within Derivative Works that You distribute, alongside
120 |           or as an addendum to the NOTICE text from the Work, provided
121 |           that such additional attribution notices cannot be construed
122 |           as modifying the License.
123 | 
124 |       You may add Your own copyright statement to Your modifications and
125 |       may provide additional or different license terms and conditions
126 |       for use, reproduction, or distribution of Your modifications, or
127 |       for any such Derivative Works as a whole, provided Your use,
128 |       reproduction, and distribution of the Work otherwise complies with
129 |       the conditions stated in this License.
130 | 
131 |    5. Submission of Contributions. Unless You explicitly state otherwise,
132 |       any Contribution intentionally submitted for inclusion in the Work
133 |       by You to the Licensor shall be under the terms and conditions of
134 |       this License, without any additional terms or conditions.
135 |       Notwithstanding the above, nothing herein shall supersede or modify
136 |       the terms of any separate license agreement you may have executed
137 |       with Licensor regarding such Contributions.
138 | 
139 |    6. Trademarks. This License does not grant permission to use the trade
140 |       names, trademarks, service marks, or product names of the Licensor,
141 |       except as required for reasonable and customary use in describing the
142 |       origin of the Work and reproducing the content of the NOTICE file.
143 | 
144 |    7. Disclaimer of Warranty. Unless required by applicable law or
145 |       agreed to in writing, Licensor provides the Work (and each
146 |       Contributor provides its Contributions) on an "AS IS" BASIS,
147 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
148 |       implied, including, without limitation, any warranties or conditions
149 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
150 |       PARTICULAR PURPOSE. You are solely responsible for determining the
151 |       appropriateness of using or redistributing the Work and assume any
152 |       risks associated with Your exercise of permissions under this License.
153 | 
154 |    8. Limitation of Liability. In no event and under no legal theory,
155 |       whether in tort (including negligence), contract, or otherwise,
156 |       unless required by applicable law (such as deliberate and grossly
157 |       negligent acts) or agreed to in writing, shall any Contributor be
158 |       liable to You for damages, including any direct, indirect, special,
159 |       incidental, or consequential damages of any character arising as a
160 |       result of this License or out of the use or inability to use the
161 |       Work (including but not limited to damages for loss of goodwill,
162 |       work stoppage, computer failure or malfunction, or any and all
163 |       other commercial damages or losses), even if such Contributor
164 |       has been advised of the possibility of such damages.
165 | 
166 |    9. Accepting Warranty or Additional Liability. While redistributing
167 |       the Work or Derivative Works thereof, You may choose to offer,
168 |       and charge a fee for, acceptance of support, warranty, indemnity,
169 |       or other liability obligations and/or rights consistent with this
170 |       License. However, in accepting such obligations, You may act only
171 |       on Your own behalf and on Your sole responsibility, not on behalf
172 |       of any other Contributor, and only if You agree to indemnify,
173 |       defend, and hold each Contributor harmless for any liability
174 |       incurred by, or claims asserted against, such Contributor by reason
175 |       of your accepting any such warranty or additional liability.
176 | 
177 |    END OF TERMS AND CONDITIONS
178 | 
179 |    APPENDIX: How to apply the Apache License to your work.
180 | 
181 |       To apply the Apache License to your work, attach the following
182 |       boilerplate notice, with the fields enclosed by brackets "[]"
183 |       replaced with your own identifying information. (Don't include
184 |       the brackets!)  The text should be enclosed in the appropriate
185 |       comment syntax for the file format. We also recommend that a
186 |       file or class name and description of purpose be included on the
187 |       same "printed page" as the copyright notice for easier
188 |       identification within third-party archives.
189 | 
190 |    Copyright [yyyy] [name of copyright owner]
191 | 
192 |    Licensed under the Apache License, Version 2.0 (the "License");
193 |    you may not use this file except in compliance with the License.
194 |    You may obtain a copy of the License at
195 | 
196 |        http://www.apache.org/licenses/LICENSE-2.0
197 | 
198 |    Unless required by applicable law or agreed to in writing, software
199 |    distributed under the License is distributed on an "AS IS" BASIS,
200 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
201 |    See the License for the specific language governing permissions and
202 |    limitations under the License.
203 | 


--------------------------------------------------------------------------------
/docs/jsdoc/scripts/prettify/lang-css.js:
--------------------------------------------------------------------------------
1 | PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n"]],[["str",/^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]*)\)/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//],["com",
2 | /^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]);
3 | 


--------------------------------------------------------------------------------
/docs/jsdoc/scripts/prettify/prettify.js:
--------------------------------------------------------------------------------
 1 | var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
 2 | (function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
 3 | [],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
 4 | f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
 5 | (j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
 6 | {b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
 7 | t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
 8 | "string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
 9 | l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
10 | q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
11 | q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
12 | "");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
13 | a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
14 | for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
15 | m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
16 | a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
17 | j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
18 | "catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
19 | H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
20 | J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
21 | I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
22 | ["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
23 | /^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
24 | ["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
25 | hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
26 | !k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
27 | 250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
28 | PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();
29 | 


--------------------------------------------------------------------------------
/docs/jsdoc/styles/prettify-jsdoc.css:
--------------------------------------------------------------------------------
  1 | /* JSDoc prettify.js theme */
  2 | 
  3 | /* plain text */
  4 | .pln {
  5 |   color: #000000;
  6 |   font-weight: normal;
  7 |   font-style: normal;
  8 | }
  9 | 
 10 | /* string content */
 11 | .str {
 12 |   color: hsl(104, 100%, 24%);
 13 |   font-weight: normal;
 14 |   font-style: normal;
 15 | }
 16 | 
 17 | /* a keyword */
 18 | .kwd {
 19 |   color: #000000;
 20 |   font-weight: bold;
 21 |   font-style: normal;
 22 | }
 23 | 
 24 | /* a comment */
 25 | .com {
 26 |   font-weight: normal;
 27 |   font-style: italic;
 28 | }
 29 | 
 30 | /* a type name */
 31 | .typ {
 32 |   color: #000000;
 33 |   font-weight: normal;
 34 |   font-style: normal;
 35 | }
 36 | 
 37 | /* a literal value */
 38 | .lit {
 39 |   color: #006400;
 40 |   font-weight: normal;
 41 |   font-style: normal;
 42 | }
 43 | 
 44 | /* punctuation */
 45 | .pun {
 46 |   color: #000000;
 47 |   font-weight: bold;
 48 |   font-style: normal;
 49 | }
 50 | 
 51 | /* lisp open bracket */
 52 | .opn {
 53 |   color: #000000;
 54 |   font-weight: bold;
 55 |   font-style: normal;
 56 | }
 57 | 
 58 | /* lisp close bracket */
 59 | .clo {
 60 |   color: #000000;
 61 |   font-weight: bold;
 62 |   font-style: normal;
 63 | }
 64 | 
 65 | /* a markup tag name */
 66 | .tag {
 67 |   color: #006400;
 68 |   font-weight: normal;
 69 |   font-style: normal;
 70 | }
 71 | 
 72 | /* a markup attribute name */
 73 | .atn {
 74 |   color: #006400;
 75 |   font-weight: normal;
 76 |   font-style: normal;
 77 | }
 78 | 
 79 | /* a markup attribute value */
 80 | .atv {
 81 |   color: #006400;
 82 |   font-weight: normal;
 83 |   font-style: normal;
 84 | }
 85 | 
 86 | /* a declaration */
 87 | .dec {
 88 |   color: #000000;
 89 |   font-weight: bold;
 90 |   font-style: normal;
 91 | }
 92 | 
 93 | /* a variable name */
 94 | .var {
 95 |   color: #000000;
 96 |   font-weight: normal;
 97 |   font-style: normal;
 98 | }
 99 | 
100 | /* a function name */
101 | .fun {
102 |   color: #000000;
103 |   font-weight: bold;
104 |   font-style: normal;
105 | }
106 | 
107 | /* Specify class=linenums on a pre to get line numbering */
108 | ol.linenums {
109 |   margin-top: 0;
110 |   margin-bottom: 0;
111 | }
112 | 


--------------------------------------------------------------------------------
/docs/jsdoc/styles/prettify-tomorrow.css:
--------------------------------------------------------------------------------
  1 | /* Tomorrow Theme */
  2 | /* Original theme - https://github.com/chriskempson/tomorrow-theme */
  3 | /* Pretty printing styles. Used with prettify.js. */
  4 | /* SPAN elements with the classes below are added by prettyprint. */
  5 | /* plain text */
  6 | .pln {
  7 |   color: #4d4d4c; }
  8 | 
  9 | @media screen {
 10 |   /* string content */
 11 |   .str {
 12 |     color: hsl(104, 100%, 24%); }
 13 | 
 14 |   /* a keyword */
 15 |   .kwd {
 16 |     color: hsl(240, 100%, 50%); }
 17 | 
 18 |   /* a comment */
 19 |   .com {
 20 |     color: hsl(0, 0%, 60%); }
 21 | 
 22 |   /* a type name */
 23 |   .typ {
 24 |     color: hsl(240, 100%, 32%); }
 25 | 
 26 |   /* a literal value */
 27 |   .lit {
 28 |     color: hsl(240, 100%, 40%); }
 29 | 
 30 |   /* punctuation */
 31 |   .pun {
 32 |     color: #000000; }
 33 | 
 34 |   /* lisp open bracket */
 35 |   .opn {
 36 |     color: #000000; }
 37 | 
 38 |   /* lisp close bracket */
 39 |   .clo {
 40 |     color: #000000; }
 41 | 
 42 |   /* a markup tag name */
 43 |   .tag {
 44 |     color: #c82829; }
 45 | 
 46 |   /* a markup attribute name */
 47 |   .atn {
 48 |     color: #f5871f; }
 49 | 
 50 |   /* a markup attribute value */
 51 |   .atv {
 52 |     color: #3e999f; }
 53 | 
 54 |   /* a declaration */
 55 |   .dec {
 56 |     color: #f5871f; }
 57 | 
 58 |   /* a variable name */
 59 |   .var {
 60 |     color: #c82829; }
 61 | 
 62 |   /* a function name */
 63 |   .fun {
 64 |     color: #4271ae; } }
 65 | /* Use higher contrast and text-weight for printable form. */
 66 | @media print, projection {
 67 |   .str {
 68 |     color: #060; }
 69 | 
 70 |   .kwd {
 71 |     color: #006;
 72 |     font-weight: bold; }
 73 | 
 74 |   .com {
 75 |     color: #600;
 76 |     font-style: italic; }
 77 | 
 78 |   .typ {
 79 |     color: #404;
 80 |     font-weight: bold; }
 81 | 
 82 |   .lit {
 83 |     color: #044; }
 84 | 
 85 |   .pun, .opn, .clo {
 86 |     color: #440; }
 87 | 
 88 |   .tag {
 89 |     color: #006;
 90 |     font-weight: bold; }
 91 | 
 92 |   .atn {
 93 |     color: #404; }
 94 | 
 95 |   .atv {
 96 |     color: #060; } }
 97 | /* Style */
 98 | /*
 99 | pre.prettyprint {
100 |   background: white;
101 |   font-family: Consolas, Monaco, 'Andale Mono', monospace;
102 |   font-size: 12px;
103 |   line-height: 1.5;
104 |   border: 1px solid #ccc;
105 |   padding: 10px; }
106 | */
107 | 
108 | /* Specify class=linenums on a pre to get line numbering */
109 | ol.linenums {
110 |   margin-top: 0;
111 |   margin-bottom: 0; }
112 | 
113 | /* IE indents via margin-left */
114 | li.L0,
115 | li.L1,
116 | li.L2,
117 | li.L3,
118 | li.L4,
119 | li.L5,
120 | li.L6,
121 | li.L7,
122 | li.L8,
123 | li.L9 {
124 |   /* */ }
125 | 
126 | /* Alternate shading for lines */
127 | li.L1,
128 | li.L3,
129 | li.L5,
130 | li.L7,
131 | li.L9 {
132 |   /* */ }
133 | 


--------------------------------------------------------------------------------
/docs/jsdoc/util_calc.js.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
  6 |     <title>util/calc.js - Documentation</title>
  7 | 
  8 |     <script src="scripts/prettify/prettify.js"></script>
  9 |     <script src="scripts/prettify/lang-css.js"></script>
 10 |     <!--[if lt IE 9]>
 11 |       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 12 |     <![endif]-->
 13 |     <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 14 |     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 15 |     <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 16 | </head>
 17 | <body>
 18 | 
 19 | <input type="checkbox" id="nav-trigger" class="nav-trigger" />
 20 | <label for="nav-trigger" class="navicon-button x">
 21 |   <div class="navicon"></div>
 22 | </label>
 23 | 
 24 | <label for="nav-trigger" class="overlay"></label>
 25 | 
 26 | <nav>
 27 |     <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Button.html">Button</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#onButtonClick">onButtonClick</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Calc.html">Calc</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.clamp">clamp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.rand">rand</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Control.html">Control</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Ease.html">Ease</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Range.html">Range</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="VariaBoard.html">VariaBoard</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addButton">addButton</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addRange">addRange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMousemove">onWindowMousemove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMouseup">onWindowMouseup</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#update">update</a></span></li>
 28 | </nav>
 29 | 
 30 | <div id="main">
 31 |     
 32 |     <h1 class="page-title">util/calc.js</h1>
 33 |     
 34 | 
 35 |     
 36 | 
 37 | 
 38 | 
 39 |     
 40 |     <section>
 41 |         <article>
 42 |             <pre class="prettyprint source linenums"><code>/**
 43 |  * Calculation functions and helpers
 44 |  */
 45 | 
 46 | class Calc {
 47 | 
 48 |   /**
 49 |   * Get a random float within a range. If only one argument is passed, it is used as the max and the min becomes zero.
 50 |   *
 51 |   * @param {number} min - Minimum range value
 52 |   * @param {number} max - Maximum range value
 53 |   *
 54 |   * @example
 55 |   * // two arguments
 56 |   * Calc.rand(2, 18);
 57 |   * // -> random float between 2 and 18
 58 |   *
 59 |   * // single argument
 60 |   * Calc.rand(42.5);
 61 |   * // -> random float between 0 and 42.5
 62 |   *
 63 |   * @returns {number} Random float within the range
 64 |   */
 65 |   static rand(min, max) {
 66 |     if(max === undefined) {
 67 |       max = min;
 68 |       min = 0;
 69 |     }
 70 |     return Math.random() * (max - min) + min;
 71 |   }
 72 | 
 73 |   /**
 74 |   * Clamp a value to a range
 75 |   *
 76 |   * @param {number} val - Input value
 77 |   * @param {number} min - Minimum range value
 78 |   * @param {number} max - Maximum range value
 79 |   *
 80 |   * @example
 81 |   * Calc.clamp(3, 10, 150);
 82 |   * // -> 10
 83 |   *
 84 |   * Calc.clamp(400, 10, 150);
 85 |   * // -> 150
 86 |   *
 87 |   * Calc.clamp(75, 10, 100);
 88 |   * // -> 75
 89 |   *
 90 |   * @returns {number} Clamped value within range
 91 |   */
 92 | 
 93 |   static clamp(val, min, max) {
 94 |     return Math.max(Math.min(val, max), min);
 95 |   }
 96 | 
 97 |   static map(val, inMin, inMax, outMin, outMax) {
 98 |     return ((outMax - outMin) * ((val - inMin) / (inMax - inMin))) + outMin;
 99 |   }
100 | 
101 |   static roundToNearestInterval(value, interval) {
102 |     return Math.round(value / interval) * interval;
103 |   }
104 | 
105 | }
106 | 
107 | module.exports = Calc;
108 | </code></pre>
109 |         </article>
110 |     </section>
111 | 
112 | 
113 | 
114 | 
115 | </div>
116 | 
117 | <br class="clear">
118 | 
119 | <footer>
120 |     Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Thu Dec 28 2017 20:24:40 GMT-0700 (MST) using the Minami theme.
121 | </footer>
122 | 
123 | <script>prettyPrint();</script>
124 | <script src="scripts/linenumber.js"></script>
125 | </body>
126 | </html>
127 | 


--------------------------------------------------------------------------------
/docs/jsdoc/util_ease.js.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
 6 |     <title>util/ease.js - Documentation</title>
 7 | 
 8 |     <script src="scripts/prettify/prettify.js"></script>
 9 |     <script src="scripts/prettify/lang-css.js"></script>
10 |     <!--[if lt IE 9]>
11 |       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
12 |     <![endif]-->
13 |     <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
14 |     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
15 |     <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
16 | </head>
17 | <body>
18 | 
19 | <input type="checkbox" id="nav-trigger" class="nav-trigger" />
20 | <label for="nav-trigger" class="navicon-button x">
21 |   <div class="navicon"></div>
22 | </label>
23 | 
24 | <label for="nav-trigger" class="overlay"></label>
25 | 
26 | <nav>
27 |     <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Button.html">Button</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Button.html#onButtonClick">onButtonClick</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Calc.html">Calc</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.clamp">clamp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Calc.html#.rand">rand</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Control.html">Control</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Ease.html">Ease</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Range.html">Range</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="VariaBoard.html">VariaBoard</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addButton">addButton</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#addRange">addRange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#createDOM">createDOM</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#listen">listen</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMousemove">onWindowMousemove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#onWindowMouseup">onWindowMouseup</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="VariaBoard.html#update">update</a></span></li>
28 | </nav>
29 | 
30 | <div id="main">
31 |     
32 |     <h1 class="page-title">util/ease.js</h1>
33 |     
34 | 
35 |     
36 | 
37 | 
38 | 
39 |     
40 |     <section>
41 |         <article>
42 |             <pre class="prettyprint source linenums"><code>/**
43 |  * Easing equations
44 |  */
45 | 
46 | class Ease {
47 | 
48 | }
49 | 
50 | module.exports = Ease;
51 | </code></pre>
52 |         </article>
53 |     </section>
54 | 
55 | 
56 | 
57 | 
58 | </div>
59 | 
60 | <br class="clear">
61 | 
62 | <footer>
63 |     Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Thu Dec 28 2017 20:24:40 GMT-0700 (MST) using the Minami theme.
64 | </footer>
65 | 
66 | <script>prettyPrint();</script>
67 | <script src="scripts/linenumber.js"></script>
68 | </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
  1 | const autoprefixer = require('autoprefixer');
  2 | const babelify = require('babelify');
  3 | const browserify = require('browserify');
  4 | const buffer = require('vinyl-buffer');
  5 | const cssnano = require('cssnano');
  6 | const del = require('del');
  7 | const gulp = require('gulp');
  8 | const gutil = require('gulp-util');
  9 | const jsdoc = require('gulp-jsdoc3');
 10 | const postcss = require('gulp-postcss');
 11 | const rename = require('gulp-rename');
 12 | const sequence = require('run-sequence');
 13 | const source = require('vinyl-source-stream');
 14 | const sourcemaps = require('gulp-sourcemaps');
 15 | const uglify = require('gulp-uglify');
 16 | const webserver = require('gulp-webserver');
 17 | 
 18 | gulp.task('build', () => {
 19 |   return sequence(
 20 |     'build-css',
 21 |     'build-js'
 22 |   );
 23 | });
 24 | 
 25 | gulp.task('build-css', () => {
 26 |   return sequence(
 27 |     'clean-dist-css',
 28 |     'build-css-src',
 29 |     'build-css-min'
 30 |   );
 31 | });
 32 | 
 33 | gulp.task('clean-dist-css', () => {
 34 |   return del.sync([
 35 |     './dist/*.css',
 36 |     './dist/sourcemaps/*.css.map'
 37 |   ],{ force: true });
 38 | });
 39 | 
 40 | gulp.task('build-css-src', () => {
 41 |   let plugins = [
 42 |     autoprefixer({browsers: ['last 1 version']})
 43 |   ];
 44 |   return gulp.src('./src/css/*.css')
 45 |     .pipe(rename('variaboard.css'))
 46 |     .pipe(postcss(plugins))
 47 |     .pipe(gulp.dest('./dist'));
 48 | });
 49 | 
 50 | gulp.task('build-css-min', () => {
 51 |   let plugins = [
 52 |     autoprefixer({browsers: ['last 1 version']}),
 53 |     cssnano()
 54 |   ];
 55 |   return gulp.src('./src/css/*.css')
 56 |     .pipe(rename('variaboard.min.css'))
 57 |     .pipe(sourcemaps.init())
 58 |     .pipe(postcss(plugins))
 59 |     .pipe(gulp.dest('./dist'))
 60 |     .pipe(sourcemaps.write('./sourcemaps'))
 61 |     .pipe(gulp.dest('./docs/css'));
 62 | });
 63 | 
 64 | gulp.task('build-js', () => {
 65 |   return sequence(
 66 |     'clean-dist-js',
 67 |     'build-js-src',
 68 |     'build-js-min'
 69 |   );
 70 | });
 71 | 
 72 | gulp.task('clean-dist-js', () => {
 73 |   return del.sync([
 74 |     './dist/*.js',
 75 |     './dist/sourcemaps/*.js.map'
 76 |   ],{ force: true });
 77 | });
 78 | 
 79 | gulp.task('build-js-src', () => {
 80 |   browserify({
 81 |     entries: './src/js/index.js',
 82 |     debug: false,
 83 |     standalone: 'VariaBoard'
 84 |   })
 85 |   .transform('babelify', { presets: ['env'] })
 86 |   .bundle()
 87 |   .on('error', err => {
 88 |     gutil.log("Browserify Error", gutil.colors.red(err.message))
 89 |   })
 90 |   .pipe(source('variaboard.js'))
 91 |   .pipe(buffer())
 92 |   .pipe(gulp.dest('./dist'));
 93 | });
 94 | 
 95 | gulp.task('build-js-min', () => {
 96 |   browserify({
 97 |     entries: './src/js/index.js',
 98 |     debug: false,
 99 |     standalone: 'VariaBoard'
100 |   })
101 |   .transform('babelify', { presets: ['env'] })
102 |   .bundle()
103 |   .on('error', err => {
104 |     gutil.log("Browserify Error", gutil.colors.red(err.message))
105 |   })
106 |   .pipe(source('variaboard.min.js'))
107 |   .pipe(buffer())
108 |   .pipe(uglify())
109 |   .pipe(gulp.dest('./dist'))
110 |   .pipe(sourcemaps.init({ loadMaps: true }))
111 |   .pipe(sourcemaps.write('./sourcemaps'))
112 |   .pipe(gulp.dest('./docs/js'));
113 | });
114 | 
115 | gulp.task('docs', () => {
116 |   return sequence(
117 |     'clean-docs',
118 |     'build-docs'
119 |   );
120 | });
121 | 
122 | gulp.task('clean-docs', () => {
123 |   return del.sync([
124 |     './docs/jsdoc'
125 |   ], { force: true });
126 | });
127 | 
128 | gulp.task('build-docs', function (cb) {
129 |   let config = require('./jsdoc.json');
130 |   gulp.src(['./README.md', './src/js/**/*.js'], { read: false })
131 |     .pipe(jsdoc(config, cb));
132 | });
133 | 
134 | gulp.task('serve', () => {
135 |   gulp.src('./docs')
136 |     .pipe(webserver({
137 |       'host': '0.0.0.0',
138 |       'fallback': './index.html',
139 |       'livereload': true,
140 |       'open': true,
141 |       'port': '4000'
142 |     }));
143 | });
144 | 
145 | gulp.task('watch', ['build', 'serve'], () => {
146 |   gulp.watch('./src/css/**/*.css', ['build-css']);
147 |   gulp.watch('./src/js/**/*.js', ['build-js']);
148 | });
149 | 
150 | gulp.task('default', ['watch']);
151 | 


--------------------------------------------------------------------------------
/jsdoc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "tags": {
 3 |     "allowUnknownTags": true
 4 |   },
 5 |   "opts": {
 6 |     "destination": "./docs/jsdoc",
 7 |     "template": "node_modules/minami"
 8 |   },
 9 |   "plugins": [
10 |     "plugins/markdown"
11 |   ],
12 |   "templates": {
13 |     "cleverLinks": true,
14 |     "monospaceLinks": true,
15 |     "default": {
16 |       "outputSourceFiles": true
17 |     },
18 |     "outputSourceFiles": true,
19 |     "navType": "vertical",
20 |     "linenums": true,
21 |     "dateFormat": "MMMM Do YYYY, h:mm:ss a",
22 |     "systemName": "VariaBoard"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "variaboard",
 3 |   "author": "Jack Rugile <jack@jackrugile.com> (https://jackrugile.com)",
 4 |   "version": "0.1.1",
 5 |   "description": "VariaBoard is a control interface to modify parameters in JavaScript.",
 6 |   "keywords": [
 7 |     "controls",
 8 |     "control panel",
 9 |     "settings",
10 |     "parameters",
11 |     "parameterization",
12 |     "gui",
13 |     "variables",
14 |     "javascript"
15 |   ],
16 |   "main": "src/js/index.js",
17 |   "license": "MIT",
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "git+https://github.com/jackrugile/variaboard.git"
21 |   },
22 |   "bugs": {
23 |     "url": "https://github.com/jackrugile/variaboard/issues"
24 |   },
25 |   "homepage": "https://github.com/jackrugile/variaboard.git#readme",
26 |   "devDependencies": {
27 |     "autoprefixer": "^7.2.3",
28 |     "babel-core": "^6.26.0",
29 |     "babel-preset-env": "^1.6.1",
30 |     "babelify": "^8.0.0",
31 |     "browserify": "^14.5.0",
32 |     "cssnano": "^3.10.0",
33 |     "del": "^3.0.0",
34 |     "eslint": "^4.14.0",
35 |     "eslint-plugin-html": "^4.0.1",
36 |     "gulp": "^3.9.1",
37 |     "gulp-jsdoc3": "^1.0.1",
38 |     "gulp-postcss": "^7.0.0",
39 |     "gulp-rename": "^1.2.2",
40 |     "gulp-sourcemaps": "^2.6.2",
41 |     "gulp-uglify": "^3.0.0",
42 |     "gulp-util": "^3.0.8",
43 |     "gulp-webserver": "^0.9.1",
44 |     "minami": "^1.2.3",
45 |     "run-sequence": "^2.2.0",
46 |     "vinyl-buffer": "^1.0.1",
47 |     "vinyl-source-stream": "^1.1.0"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/css/variaboard.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * VariaBoard Panel
  3 |  */
  4 | 
  5 | .variaboard-panel,
  6 | .variaboard-panel * {
  7 |   box-sizing: border-box;
  8 | }
  9 | 
 10 | .variaboard-panel {
 11 |   background: #000;
 12 |   border: 1px solid #000;
 13 |   color: #fff;
 14 |   font-family: source code pro, monospace;
 15 |   font-size: 14px;
 16 |   left: 0;
 17 |   max-height: 100%;
 18 |   max-width: 300px;
 19 |   overflow: auto;
 20 |   position: fixed;
 21 |   top: 0;
 22 |   transition: opacity 200ms;
 23 |   width: 100%;
 24 |   z-index: 99;
 25 |   -webkit-touch-callout: none;
 26 |   -webkit-user-select: none;
 27 |   -khtml-user-select: none;
 28 |   -moz-user-select: none;
 29 |   -ms-user-select: none;
 30 |   user-select: none;
 31 | }
 32 | 
 33 | /**
 34 |  * Selections
 35 |  */
 36 | 
 37 | .variaboard-title::selection,
 38 | .variaboard-control-title::selection,
 39 | .variaboard-control-value::selection,
 40 | .variaboard-button::selection {
 41 |   background: #fff;
 42 |   color: #000;
 43 | }
 44 | 
 45 | .variaboard-title::-moz-selection,
 46 | .variaboard-control-title::-moz-selection,
 47 | .variaboard-control-value::-moz-selection,
 48 | .variaboard-button::-moz-selection {
 49 |   background: #fff;
 50 |   color: #000;
 51 | }
 52 | 
 53 | /**
 54 |  * VariaBoard Title
 55 |  */
 56 | 
 57 | .variaboard-title {
 58 |   background: #111;
 59 |   color: #fff;
 60 |   cursor: pointer;
 61 |   height: 28px;
 62 |   font-size: 0.8em;
 63 |   font-weight: 700;
 64 |   line-height: 28px;
 65 |   margin: 0 0 1px;
 66 |   overflow: hidden;
 67 |   padding: 0 1.5em;
 68 |   text-overflow: ellipsis;
 69 |   white-space: nowrap;
 70 | }
 71 | 
 72 | .variaboard-panel-is-collapsed .variaboard-title {
 73 |   margin-bottom: 0;
 74 | }
 75 | 
 76 | /**
 77 |  * Controls
 78 |  */
 79 | 
 80 | .variaboard-controls {
 81 | }
 82 | 
 83 | .variaboard-panel-is-collapsed .variaboard-controls {
 84 |   display: none;
 85 | }
 86 | 
 87 | /**
 88 |  * Control
 89 |  */
 90 | 
 91 | .variaboard-control {
 92 |   border-left: 3px solid #444;
 93 |   display: flex;
 94 |   height: 28px;
 95 |   margin-bottom: 1px;
 96 |   transition: background 200ms, border-color 200ms;
 97 | }
 98 | 
 99 | .variaboard-control:hover {
100 |   border-left-color: #666;
101 |   transition-duration: 0ms;
102 | }
103 | 
104 | .variaboard-control:last-child {
105 |   margin-bottom: 0;
106 | }
107 | 
108 | /**
109 |  * Control Title
110 |  */
111 | 
112 | .variaboard-control-title {
113 |   align-items: center;
114 |   background: #222;
115 |   border-left: 1px solid #000;
116 |   color: #bbb;
117 |   cursor: pointer;
118 |   display: flex;
119 |   flex: 0 0 110px;
120 |   font-size: 0.8em;
121 |   font-weight: 400;
122 |   justify-content: flex-end;
123 |   line-height: 1;
124 |   margin: 0 1px 0 0;
125 |   overflow: hidden;
126 |   padding: 0.6em 0.75em;
127 |   text-align: right;
128 |   text-overflow: ellipsis;
129 |   transition: color 200ms;
130 |   white-space: nowrap;
131 | }
132 | 
133 | .variaboard-control:hover .variaboard-control-title {
134 |   color: #fff;
135 |   transition-duration: 0ms;
136 | }
137 | 
138 | /**
139 |  * Control Checkbox
140 |  */
141 | 
142 | .variaboard-control-checkbox-wrap {
143 |   align-items: center;
144 |   background: #111;
145 |   border: 1px solid #111;
146 |   cursor: pointer;
147 |   display: flex;
148 |   flex: 0 0 80px;
149 |   margin: 0 1px 0 0;
150 |   padding: 0 0.6em;
151 |   position: relative;
152 | }
153 | 
154 | .variaboard-control-checkbox {
155 |   cursor: pointer;
156 |   opacity: 0;
157 |   position: absolute
158 | }
159 | 
160 | .variaboard-control-checkbox-indicator {
161 |   align-items: center;
162 |   background: none;
163 |   border: 1px solid #333;
164 |   cursor: pointer;
165 |   display: flex;
166 |   height: 1.2em;
167 |   justify-content: center;
168 |   transition: background 200ms;
169 |   width: 1.2em;
170 | }
171 | 
172 | .variaboard-control-checkbox-indicator:before {
173 |   color: #bbb;
174 |   content: '\2713';
175 |   font-size: 0.8em;
176 |   opacity: 0;
177 |   transition: color 200ms, opacity 200ms;
178 | }
179 | 
180 | .variaboard-control.variaboard-control-is-focused .variaboard-control-checkbox-indicator {
181 |   border-color: #fff;
182 | }
183 | 
184 | .variaboard-control-checkbox:checked ~ .variaboard-control-checkbox-indicator {
185 |   background: #222;
186 | }
187 | 
188 | .variaboard-control-checkbox:checked ~ .variaboard-control-checkbox-indicator:before {
189 |   opacity: 1;
190 | }
191 | 
192 | .variaboard-control:hover .variaboard-control-checkbox:checked ~ .variaboard-control-checkbox-indicator:before {
193 |   color: #fff;
194 | }
195 | 
196 | .variaboard-control.variaboard-control-is-focused .variaboard-control-checkbox:checked ~ .variaboard-control-checkbox-indicator:before {
197 |   color: #fff;
198 | }
199 | 
200 | .variaboard-control-title:active ~ .variaboard-control-checkbox-wrap .variaboard-control-checkbox-indicator,
201 | .variaboard-control-checkbox-wrap:active .variaboard-control-checkbox-indicator {
202 |   border-color: #fff;
203 | }
204 | 
205 | .variaboard-control-checkbox-stub {
206 |   background: #111;
207 |   flex: 1 1 auto;
208 | }
209 | 
210 | /**
211 |  * Control Value
212 |  */
213 | 
214 | .variaboard-control-value-wrap {
215 |   flex: 0 0 80px;
216 |   margin: 0 1px 0 0;
217 | }
218 | 
219 | .variaboard-control-value {
220 |   background: #111;
221 |   border: 1px solid #111;
222 |   border-radius: 0;
223 |   color: #bbb;
224 |   font-family: inherit;
225 |   font-size: 0.8em;
226 |   font-weight: 400;
227 |   height: 100%;
228 |   line-height: 1;
229 |   margin: 0;
230 |   padding: 0.6em 0.75em;
231 |   transition: color 200ms, border-color 200ms;
232 |   width: 100%;
233 |   -webkit-appearance: none;
234 | }
235 | 
236 | .variaboard-control:hover .variaboard-control-value {
237 |   color: #fff;
238 |   transition-duration: 0ms;
239 | }
240 | 
241 | .variaboard-control-value:focus {
242 |   border-color: #fff;
243 |   color: #fff;
244 |   outline: none;
245 |   transition-duration: 0ms;
246 | }
247 | 
248 | /**
249 |  * Button
250 |  */
251 | 
252 | .variaboard-button {
253 |   align-items: center;
254 |   background: linear-gradient(#333 50%, #222 50%);
255 |   border: none;
256 |   border-left: 1px solid #000;
257 |   border-radius: 0;
258 |   color: #bbb;
259 |   cursor: pointer;
260 |   display: flex;
261 |   font-family: inherit;
262 |   font-size: 0.8em;
263 |   font-weight: 700;
264 |   height: 100%;
265 |   line-height: 1;
266 |   margin: 0;
267 |   padding: 0 1.5em;
268 |   position: relative;
269 |   text-align: left;
270 |   text-decoration: none;
271 |   transition: color 200ms;
272 |   width: 100%;
273 |   -webkit-appearance: none;
274 | }
275 | 
276 | .variaboard-button:after {
277 |   background: #fff;
278 |   bottom: 0;
279 |   content: '';
280 |   left: 0;
281 |   opacity: 0;
282 |   position: absolute;
283 |   right: 0;
284 |   top: 0;
285 |   transition: opacity 200ms;
286 | }
287 | 
288 | .variaboard-button:hover {
289 |   color: #fff;
290 |   transition-duration: 0ms;
291 | }
292 | 
293 | .variaboard-button:active {
294 |   transition-duration: 0ms;
295 | }
296 | 
297 | .variaboard-button:active:after {
298 |   opacity: 0.3;
299 |   transition-duration: 0ms;
300 | }
301 | 
302 | .variaboard-button:focus {
303 |   box-shadow: inset 0 0 0 1px #fff;
304 |   outline: none;
305 | }
306 | 
307 | /**
308 |  * Control Range
309 |  */
310 | 
311 | .variaboard-control-range {
312 |   background: #111;
313 |   cursor: ew-resize;
314 |   cursor: grab;
315 |   flex: 1 1 auto;
316 |   overflow: hidden;
317 |   position: relative;
318 | }
319 | 
320 | .variaboard-control.variaboard-control-is-dragging .variaboard-control-range {
321 |   cursor: ew-resize;
322 |   cursor: grabbing;
323 | }
324 | 
325 | .variaboard-control-range-inner {
326 |   background: #222;
327 |   height: 101%;
328 |   left: 0;
329 |   position: absolute;
330 |   right: 1px;
331 |   top: 0;
332 |   transform: translateX(-100%);
333 |   transition: background 200ms, transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
334 | }
335 | 
336 | .variaboard-control-range-inner:after {
337 |   background: linear-gradient(#999, #444);
338 |   bottom: 0;
339 |   content: '';
340 |   left: 100%;
341 |   position: absolute;
342 |   top: 0;
343 |   transition: background 200ms;
344 |   width: 1px;
345 | }
346 | 
347 | .variaboard-control.variaboard-control-eased .variaboard-control-range-inner {
348 |   transition: background 200ms;
349 | }
350 | 
351 | .variaboard-control:hover .variaboard-control-range-inner {
352 |   background: #333;
353 |   transition-duration: 0ms;
354 | }
355 | 
356 | .variaboard-control.variaboard-control-is-dragging .variaboard-control-range-inner {
357 |   transition-duration: 0ms;
358 | }
359 | 


--------------------------------------------------------------------------------
/src/js/button.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | /**
 4 |  * Create a button
 5 |  */
 6 | 
 7 | class Button {
 8 | 
 9 |   constructor(variaboard, config) {
10 |     this.variaboard = variaboard;
11 |     this.id = config.id;
12 |     this.title = config.title;
13 |     this.description = config.description !== undefined ? config.description : null;
14 |     this.callback = config.callback !== undefined ? config.callback : () => {};
15 | 
16 |     this.createDOM();
17 |     this.listen();
18 |   }
19 | 
20 |   /**
21 |    * Create necessary DOM elements
22 |    */
23 | 
24 |   createDOM() {
25 |     this.dom = {};
26 | 
27 |     // control
28 |     this.dom.control = document.createElement('div');
29 |     this.dom.control.classList.add(`${this.variaboard.namespace}-control`);
30 | 
31 |     // button
32 |     this.dom.button = document.createElement('a');
33 |     this.dom.button.classList.add(`${this.variaboard.namespace}-button`);
34 |     this.dom.button.textContent = this.title;
35 |     if(this.description) {
36 |       this.dom.control.setAttribute('title', `${this.title}: ${this.description}`);
37 |     } else {
38 |       this.dom.control.setAttribute('title', `${this.title}`);
39 |     }
40 |     this.dom.control.appendChild(this.dom.button);
41 | 
42 |     // add to control to panel
43 |     this.variaboard.dom.controls.appendChild(this.dom.control);
44 |   }
45 | 
46 |   /**
47 |    * Setup event listeners
48 |    */
49 | 
50 |   listen() {
51 |     this.dom.button.addEventListener('click', (e) => this.onButtonClick(e));
52 |   }
53 | 
54 |   /**
55 |    * On button click event
56 |    *
57 |    * @param {object} e - Event object
58 |    */
59 | 
60 |   onButtonClick(e) {
61 |     this.callback(e, this, this.variaboard);
62 |   }
63 | 
64 | }
65 | 
66 | module.exports = Button;
67 | 


--------------------------------------------------------------------------------
/src/js/controls/boolean-control.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const Control = require('./control');
  4 | const Calc = require('../util/calc');
  5 | 
  6 | class BooleanControl extends Control {
  7 | 
  8 |   constructor(variaboard, config) {
  9 |     super();
 10 | 
 11 |     this.type = 'boolean';
 12 |     this.variaboard = variaboard;
 13 |     this.id = config.id;
 14 |     this.title = config.title;
 15 |     this.description = config.description !== undefined ? config.description : null;
 16 |     this.default = config.default;
 17 |     this.randomizable = config.randomizable !== undefined ? config.randomizable : true;
 18 |     this.mutable = config.mutable !== undefined ? config.mutable : true;
 19 |     this.locked = config.locked !== undefined ? config.locked : false;
 20 |     this.suffix = config.suffix !== undefined ? config.suffix : '';
 21 |     this.isFocused = false;
 22 |     this.createDOM();
 23 |     this.listen();
 24 |     this.set(this.default, true, false);
 25 | 
 26 |   }
 27 | 
 28 |   createDOM() {
 29 |     this.dom = {};
 30 | 
 31 |     // control
 32 |     this.dom.control = document.createElement('div');
 33 |     this.dom.control.classList.add(`${this.variaboard.namespace}-control`);
 34 | 
 35 |     // title
 36 |     this.dom.title = document.createElement('label');
 37 |     this.dom.title.classList.add(`${this.variaboard.namespace}-control-title`);
 38 |     this.dom.title.textContent = this.title;
 39 |     this.dom.title.setAttribute('for', `${this.variaboard.namespace}-${this.id}-${this.variaboard.id}`);
 40 |     this.dom.control.appendChild(this.dom.title);
 41 | 
 42 |     // checkbox wrap
 43 |     this.dom.checkboxWrap = document.createElement('div');
 44 |     this.dom.checkboxWrap.classList.add(`${this.variaboard.namespace}-control-checkbox-wrap`);
 45 |     this.dom.control.appendChild(this.dom.checkboxWrap);
 46 | 
 47 |     // checkbox
 48 |     this.dom.checkbox = document.createElement('input');
 49 |     this.dom.checkbox.classList.add(`${this.variaboard.namespace}-control-checkbox`);
 50 |     this.dom.checkbox.setAttribute('type', 'checkbox');
 51 |     this.dom.checkbox.setAttribute('id', `${this.variaboard.namespace}-${this.id}-${this.variaboard.id}`);
 52 |     this.dom.checkboxWrap.appendChild(this.dom.checkbox);
 53 | 
 54 |     // checkbox indicator
 55 |     this.dom.checkboxIndicator = document.createElement('div');
 56 |     this.dom.checkboxIndicator.classList.add(`${this.variaboard.namespace}-control-checkbox-indicator`);
 57 |     this.dom.checkboxWrap.appendChild(this.dom.checkboxIndicator);
 58 | 
 59 |     // checkbox indicator
 60 |     this.dom.checkboxStub = document.createElement('div');
 61 |     this.dom.checkboxStub.classList.add(`${this.variaboard.namespace}-control-checkbox-stub`);
 62 |     this.dom.control.appendChild(this.dom.checkboxStub);
 63 | 
 64 |     // add control to panel
 65 |     this.variaboard.dom.controls.appendChild(this.dom.control);
 66 |   }
 67 | 
 68 |   listen() {
 69 |     this.dom.checkbox.addEventListener('change', (e) => this.onCheckboxChange(e));
 70 |     this.dom.checkbox.addEventListener('focus', (e) => this.onValueFocus(e));
 71 |     this.dom.checkbox.addEventListener('blur', (e) => this.onValueBlur(e));
 72 |     this.dom.checkboxWrap.addEventListener('click', (e) => this.onCheckboxWrapClick(e));
 73 |   }
 74 | 
 75 |   onCheckboxChange() {
 76 |     this.set(this.dom.checkbox.checked);
 77 |   }
 78 | 
 79 |   onValueFocus() {
 80 |     this.isFocused = true;
 81 |     this.dom.control.classList.add(`${this.variaboard.namespace}-control-is-focused`);
 82 |   }
 83 | 
 84 |   onValueBlur() {
 85 |     this.isFocused = false;
 86 |     this.dom.control.classList.remove(`${this.variaboard.namespace}-control-is-focused`);
 87 |   }
 88 | 
 89 |   onCheckboxWrapClick() {
 90 |     this.dom.checkbox.focus();
 91 |     this.set(!this.dom.checkbox.checked);
 92 |   }
 93 | 
 94 |   randomize() {
 95 |     if(this.locked) {
 96 |       return;
 97 |     }
 98 | 
 99 |     let val = Math.random() > 0.5 ? true : false;
100 |     this.set(val);
101 | 
102 |     this.dom.control.classList.add(`${this.variaboard.namespace}-control-randomizing`);
103 |     void this.dom.control.offsetWidth;
104 |     this.dom.control.classList.remove(`${this.variaboard.namespace}-control-randomizing`);
105 |   }
106 | 
107 |   mutate() {
108 |     if(this.locked) {
109 |       return;
110 |     }
111 | 
112 |     let val = Math.random() > 0.5 ? true : false;
113 |     this.set(val);
114 | 
115 |     this.dom.control.classList.add(`${this.variaboard.namespace}-control-mutating`);
116 |     void this.dom.control.offsetWidth;
117 |     this.dom.control.classList.remove(`${this.variaboard.namespace}-control-mutating`);
118 |   }
119 | 
120 |   lock() {
121 |     this.locked = true;
122 |   }
123 | 
124 |   unlock() {
125 |     this.locked = false;
126 |   }
127 | 
128 |   set(val, force = false, triggerChange = true) {
129 |     // exit out if the value hasn't changed and it is not forced
130 |     if(val === this.value && !force) {
131 |       return;
132 |     }
133 | 
134 |     // set the new value
135 |     this.value = val;
136 | 
137 |     // set checkbox value
138 |     this.dom.checkbox.checked = this.value;
139 | 
140 |     // set the title attribute for the control
141 |     let title = `${this.title}: ${this.value}${this.suffix}`;
142 |     if(this.description) {
143 |       title = `${this.title}: ${this.value}${this.suffix}\n${this.description}`;
144 |     }
145 |     this.dom.control.setAttribute('title', title);
146 | 
147 |     // queue up change callback
148 |     if(triggerChange) {
149 |       window.cancelAnimationFrame(this.variaboard.changeRaf);
150 |       this.variaboard.changeRaf = window.requestAnimationFrame(this.variaboard.changeCallback.bind(this.variaboard));
151 |     }
152 |   }
153 | 
154 | }
155 | 
156 | module.exports = BooleanControl;
157 | 


--------------------------------------------------------------------------------
/src/js/controls/control.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | /**
 4 |  * Create a control
 5 |  */
 6 | 
 7 | class Control {
 8 | 
 9 |   constructor() {
10 |   }
11 | 
12 | }
13 | 
14 | module.exports = Control;
15 | 


--------------------------------------------------------------------------------
/src/js/controls/range-control.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const Control = require('./control');
  4 | const Calc = require('../util/calc');
  5 | const Ease = require('../util/ease');
  6 | 
  7 | /**
  8 |  * Create a range control
  9 |  *
 10 |  * @param {object} variaboard - Reference to parent VariaBoard instance
 11 |  * @param {object} config - Configuration object
 12 |  * @param {string} config.id - Unique id/slug
 13 |  * @param {string} config.title - UI display title
 14 |  * @param {number} config.min - Minimum value
 15 |  * @param {number} config.max - Maximum value
 16 |  * @param {number} config.step - Step size
 17 |  * @param {number} config.default - Starting value
 18 |  * @param {boolean} config.randomizable - Can be randomized individually and by randomizing all
 19 |  * @param {boolean} config.mutable - Can be mutated individually and by mutating all
 20 |  * @param {boolean} config.locked - Temporarily toggle whether the control is affected by randomization and mutation
 21 |  * @param {boolean} config.eased - When randomizing or mutating a value, animate the value with eased
 22 |  *
 23 |  * @extends Control
 24 |  *
 25 |  * @requires {@link Control}
 26 |  * @requires {@link Calc}
 27 |  */
 28 | 
 29 | class RangeControl extends Control {
 30 | 
 31 |   constructor(variaboard, config) {
 32 |     super();
 33 | 
 34 |     this.type = 'range';
 35 |     this.variaboard = variaboard;
 36 |     this.id = config.id;
 37 |     this.title = config.title;
 38 |     this.description = config.description !== undefined ? config.description : null;
 39 |     this.default = config.default;
 40 |     this.randomizable = config.randomizable !== undefined ? config.randomizable : true;
 41 |     this.mutable = config.mutable !== undefined ? config.mutable : true;
 42 |     this.locked = config.locked !== undefined ? config.locked : false;
 43 |     this.suffix = config.suffix !== undefined ? config.suffix : '';
 44 |     this.min = config.min;
 45 |     this.max = config.max;
 46 |     this.size = this.max - this.min;
 47 |     this.step = config.step !== undefined ? Math.abs(config.step) : 1;
 48 |     this.eased = config.eased !== undefined ? config.eased : true;
 49 |     this.easedDuration = config.easedDuration !== undefined ? config.easedDuration : 300;
 50 |     this.easedFunc = config.easedFunc !== undefined ? Ease[config.easedFunc] : Ease['outExpo'];
 51 |     this.places = this.step.toString().indexOf('.') > -1 ? this.step.toString().split('.')[1].length : 0;
 52 | 
 53 |     this.easedValueStart = this.default;
 54 |     this.easedValueTarget = this.default;
 55 |     this.easedTime = null;
 56 |     this.easedLastTime = null;
 57 |     this.easedElapsedTime = 0;
 58 | 
 59 |     this.isMouseDown = false;
 60 |     this.settled = false;
 61 |     this.isFocused = false;
 62 | 
 63 |     this.createDOM();
 64 | 
 65 |     this.onWindowResize();
 66 | 
 67 |     this.listen();
 68 |     this.set(this.default, true, false);
 69 |   }
 70 | 
 71 |   createDOM() {
 72 |     this.dom = {};
 73 | 
 74 |     // control
 75 |     this.dom.control = document.createElement('div');
 76 |     this.dom.control.classList.add(`${this.variaboard.namespace}-control`);
 77 |     if(this.eased) {
 78 |       this.dom.control.classList.add(`${this.variaboard.namespace}-control-eased`);
 79 |     }
 80 | 
 81 |     // title
 82 |     this.dom.title = document.createElement('label');
 83 |     this.dom.title.classList.add(`${this.variaboard.namespace}-control-title`);
 84 |     this.dom.title.textContent = this.title;
 85 |     this.dom.title.setAttribute('for', `${this.variaboard.namespace}-${this.id}-${this.variaboard.id}`);
 86 |     this.dom.control.appendChild(this.dom.title);
 87 | 
 88 |     // value wrap
 89 |     this.dom.valueWrap = document.createElement('div');
 90 |     this.dom.valueWrap.classList.add(`${this.variaboard.namespace}-control-value-wrap`);
 91 |     this.dom.control.appendChild(this.dom.valueWrap);
 92 | 
 93 |     // value
 94 |     this.dom.value = document.createElement('input');
 95 |     this.dom.value.classList.add(`${this.variaboard.namespace}-control-value`);
 96 |     this.dom.value.setAttribute('id', `${this.variaboard.namespace}-${this.id}-${this.variaboard.id}`);
 97 |     this.dom.valueWrap.appendChild(this.dom.value);
 98 | 
 99 |     // add control to panel
100 |     this.variaboard.dom.controls.appendChild(this.dom.control);
101 | 
102 |     // range
103 |     this.dom.range = document.createElement('div');
104 |     this.dom.range.classList.add(`${this.variaboard.namespace}-control-range`);
105 | 
106 |     // range inner
107 |     this.dom.rangeInner = document.createElement('div');
108 |     this.dom.rangeInner.classList.add(`${this.variaboard.namespace}-control-range-inner`);
109 |     this.dom.range.appendChild(this.dom.rangeInner);
110 | 
111 |     this.dom.control.appendChild(this.dom.range);
112 |   }
113 | 
114 |   listen() {
115 |     this.dom.value.addEventListener('change', (e) => this.onValueChange(e));
116 |     this.dom.value.addEventListener('focus', (e) => this.onValueFocus(e));
117 |     this.dom.value.addEventListener('blur', (e) => this.onValueBlur(e));
118 |     this.dom.value.addEventListener('keydown', (e) => this.onValueKeydown(e));
119 |     this.dom.value.addEventListener('wheel', (e) => this.onValueMousewheel(e));
120 | 
121 |     this.dom.range.addEventListener('mousedown', (e) => this.onRangeMousedown(e));
122 |   }
123 | 
124 |   onValueChange() {
125 |     this.set(this.dom.value.value);
126 |     this.easedValueTarget = this.value;
127 |   }
128 | 
129 |   onValueFocus() {
130 |     this.isFocused = true;
131 |   }
132 | 
133 |   onValueBlur() {
134 |     this.isFocused = false;
135 |   }
136 | 
137 |   onValueKeydown(e) {
138 |     let change = e.shiftKey ? this.step * 4 : this.step;
139 |     switch(e.which) {
140 |       case 38:
141 |         this.set(this.value + change);
142 |         break;
143 |       case 40:
144 |         this.set(this.value - change);
145 |         break;
146 |     }
147 |   }
148 | 
149 |   onValueMousewheel(e) {
150 |     if(this.isFocused) {
151 |       let change = e.shiftKey ? this.step * 4 : this.step;
152 |       if(e.wheelDelta < 0) {
153 |         this.set(this.value - change);
154 |       } else if(e.wheelDelta > 0) {
155 |         this.set(this.value + change);
156 |       }
157 |     }
158 |   }
159 | 
160 |   onRangeMousedown(e) {
161 |     this.variaboard.onDragStart();
162 |     this.variaboard.mouse.down = true;
163 |     this.variaboard.mouse.anchor.x = e.clientX;
164 |     this.variaboard.mouse.anchor.y = e.clientY;
165 |     this.isMouseDown = true;
166 |     this.dom.control.classList.add(`${this.variaboard.namespace}-control-is-dragging`);
167 |     this.setDragValue();
168 |   }
169 | 
170 |   onWindowMouseup() {
171 |     this.variaboard.onDragEnd();
172 |     this.isMouseDown = false;
173 |     this.dom.control.classList.remove(`${this.variaboard.namespace}-control-is-dragging`);
174 |   }
175 | 
176 |   onWindowMousemove() {
177 |     if(this.isMouseDown) {
178 |       this.setDragValue();
179 |     }
180 |   }
181 | 
182 |   onWindowResize() {
183 |     this.bcr = this.dom.range.getBoundingClientRect();
184 |   }
185 | 
186 |   randomize() {
187 |     if(this.locked) {
188 |       return;
189 |     }
190 | 
191 |     let val = Calc.roundToNearestInterval(Calc.rand(this.min, this.max), this.step);
192 |     if(this.eased) {
193 |       this.easeSet(val);
194 |     } else {
195 |       this.set(val);
196 |     }
197 | 
198 |     this.dom.control.classList.add(`${this.variaboard.namespace}-control-randomizing`);
199 |     void this.dom.control.offsetWidth;
200 |     this.dom.control.classList.remove(`${this.variaboard.namespace}-control-randomizing`);
201 |   }
202 | 
203 |   mutate() {
204 |     if(this.locked) {
205 |       return;
206 |     }
207 | 
208 |     let size = Math.max(this.size / 15, this.step);
209 |     let val = null;
210 |     if(this.value === this.min) {
211 |       val = this.value + Calc.rand(0, size);
212 |     } else if(this.value === this.max) {
213 |       val = this.value + Calc.rand(-size, 0);
214 |     } else {
215 |       val = this.value + Calc.rand(-size, size);
216 |     }
217 | 
218 |     if(this.eased) {
219 |       this.easeSet(val);
220 |     } else {
221 |       this.set(val);
222 |     }
223 | 
224 |     this.dom.control.classList.add(`${this.variaboard.namespace}-control-mutating`);
225 |     void this.dom.control.offsetWidth;
226 |     this.dom.control.classList.remove(`${this.variaboard.namespace}-control-mutating`);
227 |   }
228 | 
229 |   lock() {
230 |     this.locked = true;
231 |   }
232 | 
233 |   unlock() {
234 |     this.locked = false;
235 |   }
236 | 
237 |   setDragValue() {
238 |     this.set(Calc.map(this.variaboard.mouse.x, this.bcr.left, this.bcr.right, this.min, this.max));
239 |     this.easedValueTarget = this.value;
240 |   }
241 | 
242 |   easeSet(val) {
243 |     this.easedTime = null;
244 |     this.easedLastTime = null;
245 |     this.easedElapsedTime = 0;
246 |     this.easedValueStart = this.value;
247 |     this.easedValueTarget = val;
248 |     this.settled = false;
249 |     window.cancelAnimationFrame(this.variaboard.raf);
250 |     this.variaboard.update();
251 |   }
252 | 
253 |   easeUpdate() {
254 |     this.easedTime = Date.now();
255 |     if(this.easedLastTime !== null) {
256 |       this.easedElapsedTime += this.easedTime - this.easedLastTime;
257 |       this.easedElapsedTime = Calc.clamp(this.easedElapsedTime, 0, this.easedDuration);
258 |     }
259 |     this.easedLastTime = this.easedTime;
260 | 
261 |     if(this.easedElapsedTime < this.easedDuration) {
262 |       this.set(Calc.map(this.easedFunc(this.easedElapsedTime, 0, 1, this.easedDuration), 0, 1, this.easedValueStart, this.easedValueTarget));
263 |     } else {
264 |       this.easedTime = null;
265 |       this.easedLastTime = null;
266 |       this.easedElapsedTime = 0;
267 |       this.settled = true;
268 |       this.set(this.easedValueTarget);
269 |     }
270 |   }
271 | 
272 |   set(val, force = false, triggerChange = true) {
273 |     // sanitize value
274 |     val = parseFloat(val);
275 |     val = isNaN(val) ? this.default : val;
276 |     val = Calc.clamp(val, this.min, this.max);
277 |     val = Calc.roundToNearestInterval(val, this.step);
278 | 
279 |     // exit out if the value hasn't changed and it is not forced
280 |     if(val === this.value && !force) {
281 |       // replace what a user has typed, if they did
282 |       this.dom.value.value = this.value.toFixed(this.places);
283 |       return;
284 |     }
285 | 
286 |     // set the new value
287 |     this.value = val;
288 | 
289 |     // set input value
290 |     this.dom.value.value = this.value.toFixed(this.places);
291 | 
292 |     // set range value
293 |     this.dom.rangeInner.style.transform = `translateX(${Calc.map(this.value, this.min, this.max, -100, 0)}%)`;
294 | 
295 |     // set the title attribute for the control
296 |     let title = `${this.title}: ${this.value.toFixed(this.places)}${this.suffix}`;
297 |     if(this.description) {
298 |       title = `${this.title}: ${this.value.toFixed(this.places)}${this.suffix}\n${this.description}`;
299 |     }
300 |     this.dom.control.setAttribute('title', title);
301 | 
302 |     // queue up change callback
303 |     if(triggerChange) {
304 |       window.cancelAnimationFrame(this.variaboard.changeRaf);
305 |       this.variaboard.changeRaf = window.requestAnimationFrame(this.variaboard.changeCallback.bind(this.variaboard));
306 |     }
307 |   }
308 | 
309 | }
310 | 
311 | module.exports = RangeControl;
312 | 


--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const Button = require('./button');
  4 | const RangeControl = require('./controls/range-control');
  5 | const BooleanControl = require('./controls/boolean-control');
  6 | 
  7 | class VariaBoard {
  8 | 
  9 |   /**
 10 |    * Create a VariaBoard control panel
 11 |    *
 12 |    * @param {object} config - Configuration object
 13 |    * @param {object|string} [config.container=document.body] - DOM element or CSS selector
 14 |    * @param {string} [config.title] - Title of the panel
 15 |    *
 16 |    * @requires {@link Button}
 17 |    * @requires {@link Range}
 18 |    */
 19 | 
 20 |   constructor(config) {
 21 |     this.namespace = 'variaboard';
 22 |     this.id = Math.random().toString(36).substr(2, 8);
 23 |     this.controls = {};
 24 |     this.buttons = {};
 25 | 
 26 |     this.mouse = {
 27 |       down: false,
 28 |       x: 0,
 29 |       y: 0,
 30 |       anchor: {
 31 |         x: 0,
 32 |         y: 0
 33 |       }
 34 |     };
 35 | 
 36 |     this.needsUpdate = false;
 37 |     this.raf = null;
 38 |     this.isDragging = false;
 39 |     this.isCollapsed = false;
 40 | 
 41 |     this.changeRaf = null;
 42 | 
 43 |     this.container = config.container !== undefined ? config.container : document.body;
 44 |     this.class = config.class !== undefined ? config.class : null;
 45 |     this.title = config.title !== undefined ? config.title : null;
 46 |     this.changeCallback = config.changeCallback !== undefined ? config.changeCallback : () => {};
 47 | 
 48 |     this.createDOM();
 49 |     this.listen();
 50 |   }
 51 | 
 52 |   /**
 53 |    * Create necessary DOM elements
 54 |    */
 55 | 
 56 |   createDOM() {
 57 |     this.dom = {};
 58 | 
 59 |     // container
 60 |     this.dom.container = this.container;
 61 | 
 62 |     // panel
 63 |     this.dom.panel = document.createElement('div');
 64 |     this.dom.panel.classList.add(`${this.namespace}-panel`);
 65 |     if(this.class) {
 66 |       this.dom.panel.classList.add(this.class);
 67 |     }
 68 | 
 69 |     // title
 70 |     if(this.title) {
 71 |       this.dom.title = document.createElement('h1');
 72 |       this.dom.title.classList.add(`${this.namespace}-title`);
 73 |       this.dom.title.textContent = this.title;
 74 |       this.dom.title.setAttribute('title', `${this.title}: Click to toggle visibility`);
 75 |       this.dom.panel.appendChild(this.dom.title);
 76 |     }
 77 | 
 78 |     // controls
 79 |     this.dom.controls = document.createElement('div');
 80 |     this.dom.controls.classList.add(`${this.namespace}-controls`);
 81 |     this.dom.panel.appendChild(this.dom.controls);
 82 | 
 83 |     // add panel to container
 84 |     this.dom.container.appendChild(this.dom.panel);
 85 |   }
 86 | 
 87 |   /**
 88 |    * Setup event listeners
 89 |    */
 90 | 
 91 |   listen() {
 92 |     window.addEventListener('mouseup', (e) => this.onWindowMouseup(e));
 93 |     window.addEventListener('mousemove', (e) => this.onWindowMousemove(e));
 94 |     window.addEventListener('resize', () => this.onWindowResize());
 95 | 
 96 |     this.dom.title.addEventListener('click', () => this.onTitleClick());
 97 |   }
 98 | 
 99 |   /**
100 |    * On window mouse up event
101 |    *
102 |    * @param {object} e - Event object
103 |    */
104 | 
105 |   onWindowMouseup(e) {
106 |     this.mouse.down = false;
107 |     for(let key in this.controls) {
108 |       let control = this.controls[key];
109 |       if(control && control.type === 'range') {
110 |         control.onWindowMouseup(e);
111 |       }
112 |     }
113 |   }
114 | 
115 |   /**
116 |    * On window mouse move event
117 |    *
118 |    * @param {object} e - Event object
119 |    */
120 | 
121 |   onWindowMousemove(e) {
122 |     this.mouse.x = e.clientX;
123 |     this.mouse.y = e.clientY;
124 |     for(let key in this.controls) {
125 |       let control = this.controls[key];
126 |       if(control && control.type === 'range') {
127 |         control.onWindowMousemove(e);
128 |       }
129 |     }
130 |   }
131 | 
132 |   /**
133 |    * On window resize event
134 |    */
135 | 
136 |   onWindowResize() {
137 |     for(let key in this.controls) {
138 |       let control = this.controls[key];
139 |       if(control && control.type === 'range') {
140 |         control.onWindowResize();
141 |       }
142 |     }
143 |   }
144 | 
145 |   onTitleClick() {
146 |     if(this.isCollapsed) {
147 |       this.dom.panel.classList.remove(`${this.namespace}-panel-is-collapsed`);
148 |       this.isCollapsed = false;
149 |     } else {
150 |       this.dom.panel.classList.add(`${this.namespace}-panel-is-collapsed`);
151 |       this.isCollapsed = true;
152 |     }
153 |   }
154 | 
155 |   onDragStart() {
156 |     this.isDragging = true;
157 |     this.dom.panel.classList.add(`${this.namespace}-is-dragging`);
158 |   }
159 | 
160 |   onDragEnd() {
161 |     this.isDragging = false;
162 |     this.dom.panel.classList.remove(`${this.namespace}-is-dragging`);
163 |   }
164 | 
165 |   /**
166 |    * Update based on requestAnimationFrame()
167 |    */
168 | 
169 |   update() {
170 |     this.needsUpdate = false;
171 |     for(let key in this.controls) {
172 |       if(this.controls[key].type === 'range') {
173 |         if(!this.controls[key].settled) {
174 |           this.needsUpdate = true;
175 |           this.controls[key].easeUpdate();
176 |         }
177 |       }
178 |     }
179 | 
180 |     if(this.needsUpdate) {
181 |       this.raf = window.requestAnimationFrame(() => this.update());
182 |     }
183 |   }
184 | 
185 |   /**
186 |    * Add a button
187 |    *
188 |    * @param {object} config - Configuration object
189 |    * @param {object} config.id - ID slug
190 |    * @param {object} config.title - Title text
191 |    * @param {object} [config.callback=() => {}] - Callback function for button press
192 |    *
193 |    * @returns {object} Button object
194 |    */
195 | 
196 |   addButton(config) {
197 |     this.buttons[config.id] = new Button(this, config);
198 |     return this;
199 |   }
200 | 
201 |   /**
202 |    * Add a range control via {@linkcode Range}
203 |    *
204 |    * @param {object} config - Configuration object
205 |    * @param {string} config.id - Unique id/slug
206 |    * @param {string} config.title - UI display title
207 |    * @param {number} config.min - Minimum value
208 |    * @param {number} config.max - Maximum value
209 |    * @param {number} config.step - Step size
210 |    * @param {number} config.default - Starting value
211 |    * @param {boolean} config.randomizable - Can be randomized individually and by randomizing all
212 |    * @param {boolean} config.mutable - Can be mutated individually and by mutating all
213 |    * @param {boolean} config.locked - Temporarily toggle whether the control is affected by randomization and mutation
214 |    *
215 |    * @returns {object} Range object
216 |    */
217 | 
218 |   addRange(config) {
219 |     this.controls[config.id] = new RangeControl(this, config);
220 |     return this;
221 |   }
222 | 
223 |   addBoolean(config) {
224 |     this.controls[config.id] = new BooleanControl(this, config);
225 |     return this;
226 |   }
227 | 
228 |   get(id) {
229 |     let control = this.controls[id];
230 |     if(control) {
231 |       return control.value;
232 |     }
233 |   }
234 | 
235 |   set(id, val) {
236 |     let control = this.controls[id];
237 |     if(control) {
238 |       if(control.eased) {
239 |         control.easeSet(val);
240 |       } else {
241 |         control.set(val);
242 |       }
243 |     }
244 |   }
245 | 
246 |   reset() {
247 |     for(let key in this.controls) {
248 |       let control = this.controls[key];
249 |       if(control.eased) {
250 |         control.easeSet(control.default);
251 |       } else {
252 |         control.set(control.default);
253 |       }
254 |     }
255 |   }
256 | 
257 |   randomize() {
258 |     for(let key in this.controls) {
259 |       this.controls[key].randomize();
260 |     }
261 |   }
262 | 
263 |   mutate() {
264 |     for(let key in this.controls) {
265 |       this.controls[key].mutate();
266 |     }
267 |   }
268 | 
269 | }
270 | 
271 | module.exports = VariaBoard;
272 | 


--------------------------------------------------------------------------------
/src/js/util/calc.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | /**
 4 |  * Calculation functions and helpers
 5 |  */
 6 | 
 7 | class Calc {
 8 | 
 9 |   /**
10 |   * Get a random float within a range. If only one argument is passed, it is used as the max and the min becomes zero.
11 |   *
12 |   * @param {number} min - Minimum range value
13 |   * @param {number} max - Maximum range value
14 |   *
15 |   * @example
16 |   * // two arguments
17 |   * Calc.rand(2, 18);
18 |   * // -> random float between 2 and 18
19 |   *
20 |   * // single argument
21 |   * Calc.rand(42.5);
22 |   * // -> random float between 0 and 42.5
23 |   *
24 |   * @returns {number} Random float within the range
25 |   */
26 |   static rand(min, max) {
27 |     if(max === undefined) {
28 |       max = min;
29 |       min = 0;
30 |     }
31 |     return Math.random() * (max - min) + min;
32 |   }
33 | 
34 |   /**
35 |   * Clamp a value to a range
36 |   *
37 |   * @param {number} val - Input value
38 |   * @param {number} min - Minimum range value
39 |   * @param {number} max - Maximum range value
40 |   *
41 |   * @example
42 |   * Calc.clamp(3, 10, 150);
43 |   * // -> 10
44 |   *
45 |   * Calc.clamp(400, 10, 150);
46 |   * // -> 150
47 |   *
48 |   * Calc.clamp(75, 10, 100);
49 |   * // -> 75
50 |   *
51 |   * @returns {number} Clamped value within range
52 |   */
53 | 
54 |   static clamp(val, min, max) {
55 |     return Math.max(Math.min(val, max), min);
56 |   }
57 | 
58 |   static map(val, inMin, inMax, outMin, outMax) {
59 |     return ((outMax - outMin) * ((val - inMin) / (inMax - inMin))) + outMin;
60 |   }
61 | 
62 |   static roundToNearestInterval(value, interval) {
63 |     return Math.round(value / interval) * interval;
64 |   }
65 | 
66 | }
67 | 
68 | module.exports = Calc;
69 | 


--------------------------------------------------------------------------------