0000: 27 75 73 65 20 73 74 72 69 63 74 27 3b 0a 0a 6c 'use strict';..l
0010: 65 74 20 6d 61 74 68 20 3d 20 72 65 71 75 69 72 et math = requir
0020: 65 28 27 2e 2e 2f 75 74 69 6c 2f 6d 61 74 68 27 e('../util/math'
0030: 29 3b 0a 6c 65 74 20 73 76 67 20 3d 20 72 65 71 );.let svg = req
0040: 75 69 72 65 28 27 2e 2e 2f 75 74 69 6c 2f 73 76 uire('../util/sv
0050: 67 27 29 3b 0a 6c 65 74 20 49 6e 74 65 72 66 61 g');.let Interfa
0060: 63 65 20 3d 20 72 65 71 75 69 72 65 28 27 2e 2e ce = require('..
0070: 2f 63 6f 72 65 2f 69 6e 74 65 72 66 61 63 65 27 /core/interface'
0080: 29 3b 0a 0a 2f 2a 2a 0a 20 2a 20 4d 75 6c 74 69 );../**. * Multi
0090: 73 6c 69 64 65 72 0a 20 2a 0a 20 2a 20 40 64 65 slider. *. * @de
00a0: 73 63 72 69 70 74 69 6f 6e 20 4d 75 6c 74 69 73 scription Multis
00b0: 6c 69 64 65 72 0a 20 2a 0a 20 2a 20 40 64 65 6d lider. *. * @dem
00c0: 6f 20 3c 73 70 61 6e 20 6e 65 78 75 73 2d 75 69 o <span nexus-ui
00d0: 3d 22 6d 75 6c 74 69 73 6c 69 64 65 72 22 3e 3c ="multislider"><
00e0: 2f 73 70 61 6e 3e 0a 20 2a 0a 20 2a 20 40 65 78 /span>. *. * @ex
00f0: 61 6d 70 6c 65 0a 20 2a 20 76 61 72 20 6d 75 6c ample. * var mul
0100: 74 69 73 6c 69 64 65 72 20 3d 20 6e 65 77 20 4e tislider = new N
0110: 65 78 75 73 2e 4d 75 6c 74 69 73 6c 69 64 65 72 exus.Multislider
0120: 28 27 23 74 61 72 67 65 74 27 29 0a 20 2a 0a 20 ('#target'). *.
0130: 2a 20 40 65 78 61 6d 70 6c 65 0a 20 2a 20 76 61 * @example. * va
0140: 72 20 6d 75 6c 74 69 73 6c 69 64 65 72 20 3d 20 r multislider =
0150: 6e 65 77 20 4e 65 78 75 73 2e 4d 75 6c 74 69 73 new Nexus.Multis
0160: 6c 69 64 65 72 28 27 23 74 61 72 67 65 74 27 2c lider('#target',
0170: 7b 0a 20 2a 20 20 27 73 69 7a 65 27 3a 20 5b 32 {. * 'size': [2
0180: 30 30 2c 31 30 30 5d 2c 0a 20 2a 20 20 27 6e 75 00,100],. * 'nu
0190: 6d 62 65 72 4f 66 53 6c 69 64 65 72 73 27 3a 20 mberOfSliders':
01a0: 35 2c 0a 20 2a 20 20 27 6d 69 6e 27 3a 20 30 2c 5,. * 'min': 0,
01b0: 0a 20 2a 20 20 27 6d 61 78 27 3a 20 31 2c 0a 20 . * 'max': 1,.
01c0: 2a 20 20 27 73 74 65 70 27 3a 20 30 2c 0a 20 2a * 'step': 0,. *
01d0: 20 20 27 63 61 6e 64 79 63 61 6e 65 27 3a 20 33 'candycane': 3
01e0: 2c 0a 20 2a 20 20 27 76 61 6c 75 65 73 27 3a 20 ,. * 'values':
01f0: 5b 30 2e 39 2c 30 2e 38 2c 30 2e 37 2c 30 2e 36 [0.9,0.8,0.7,0.6
0200: 2c 30 2e 35 2c 30 2e 34 2c 30 2e 33 2c 30 2e 32 ,0.5,0.4,0.3,0.2
0210: 2c 30 2e 31 5d 2c 0a 20 2a 20 20 27 73 6d 6f 6f ,0.1],. * 'smoo
0220: 74 68 69 6e 67 27 3a 20 30 2c 0a 20 2a 20 20 27 thing': 0,. * '
0230: 6d 6f 64 65 27 3a 20 27 62 61 72 27 20 20 2f 2f mode': 'bar' //
0240: 20 27 62 61 72 27 20 6f 72 20 27 6c 69 6e 65 27 'bar' or 'line'
0250: 0a 20 2a 7d 29 0a 20 2a 0a 20 2a 20 40 6f 75 74 . *}). *. * @out
0260: 70 75 74 0a 20 2a 20 63 68 61 6e 67 65 0a 20 2a put. * change. *
0270: 20 46 69 72 65 73 20 61 6e 79 20 74 69 6d 65 20 Fires any time
0280: 74 68 65 20 69 6e 74 65 72 66 61 63 65 27 73 20 the interface's
0290: 76 61 6c 75 65 20 63 68 61 6e 67 65 73 2e 20 3c value changes. <
02a0: 62 72 3e 0a 20 2a 20 54 68 65 20 65 76 65 6e 74 br>. * The event
02b0: 20 64 61 74 61 20 69 73 20 61 6e 20 6f 62 6a 65 data is an obje
02c0: 63 74 20 63 6f 6e 74 61 69 6e 69 6e 67 20 3c 69 ct containing <i
02d0: 3e 69 6e 64 65 78 3c 2f 69 3e 20 61 6e 64 20 3c >index</i> and <
02e0: 69 3e 76 61 6c 75 65 3c 2f 69 3e 20 70 72 6f 70 i>value</i> prop
02f0: 65 72 74 69 65 73 0a 20 2a 0a 20 2a 20 40 6f 75 erties. *. * @ou
0300: 74 70 75 74 65 78 61 6d 70 6c 65 0a 20 2a 20 6d tputexample. * m
0310: 75 6c 74 69 73 6c 69 64 65 72 2e 6f 6e 28 27 63 ultislider.on('c
0320: 68 61 6e 67 65 27 2c 66 75 6e 63 74 69 6f 6e 28 hange',function(
0330: 76 29 20 7b 0a 20 2a 20 20 20 63 6f 6e 73 6f 6c v) {. * consol
0340: 65 2e 6c 6f 67 28 76 29 3b 0a 20 2a 20 7d 29 0a e.log(v);. * }).
0350: 20 2a 0a 20 2a 2f 0a 0a 65 78 70 6f 72 74 20 64 *. */..export d
0360: 65 66 61 75 6c 74 20 63 6c 61 73 73 20 4d 75 6c efault class Mul
0370: 74 69 73 6c 69 64 65 72 20 65 78 74 65 6e 64 73 tislider extends
0380: 20 49 6e 74 65 72 66 61 63 65 20 7b 0a 20 20 63 Interface {. c
0390: 6f 6e 73 74 72 75 63 74 6f 72 28 29 20 7b 0a 20 onstructor() {.
03a0: 20 20 20 6c 65 74 20 6f 70 74 69 6f 6e 73 20 3d let options =
03b0: 20 5b 27 76 61 6c 75 65 27 5d 3b 0a 0a 20 20 20 ['value'];..
03c0: 20 6c 65 74 20 64 65 66 61 75 6c 74 73 20 3d 20 let defaults =
03d0: 7b 0a 20 20 20 20 20 20 73 69 7a 65 3a 20 5b 32 {. size: [2
03e0: 30 30 2c 20 31 30 30 5d 2c 0a 20 20 20 20 20 20 00, 100],.
03f0: 6e 75 6d 62 65 72 4f 66 53 6c 69 64 65 72 73 3a numberOfSliders:
0400: 20 35 2c 0a 20 20 20 20 20 20 6d 69 6e 3a 20 30 5,. min: 0
0410: 2c 0a 20 20 20 20 20 20 6d 61 78 3a 20 31 2c 0a ,. max: 1,.
0420: 20 20 20 20 20 20 73 74 65 70 3a 20 30 2c 0a 20 step: 0,.
0430: 20 20 20 20 20 63 61 6e 64 79 63 61 6e 65 3a 20 candycane:
0440: 33 2c 0a 20 20 20 20 20 20 76 61 6c 75 65 73 3a 3,. values:
0450: 20 5b 30 2e 39 2c 20 30 2e 38 2c 20 30 2e 37 2c [0.9, 0.8, 0.7,
0460: 20 30 2e 36 2c 20 30 2e 35 2c 20 30 2e 34 2c 20 0.6, 0.5, 0.4,
0470: 30 2e 33 2c 20 30 2e 32 2c 20 30 2e 31 5d 2c 0a 0.3, 0.2, 0.1],.
0480: 20 20 20 20 20 20 73 6d 6f 6f 74 68 69 6e 67 3a smoothing:
0490: 20 30 2c 0a 20 20 20 20 20 20 6d 6f 64 65 3a 20 0,. mode:
04a0: 27 62 61 72 27 20 2f 2f 20 27 62 61 72 27 2c 20 'bar' // 'bar',
04b0: 27 6c 69 6e 65 27 0a 20 20 20 20 7d 3b 0a 0a 20 'line'. };..
04c0: 20 20 20 73 75 70 65 72 28 61 72 67 75 6d 65 6e super(argumen
04d0: 74 73 2c 20 6f 70 74 69 6f 6e 73 2c 20 64 65 66 ts, options, def
04e0: 61 75 6c 74 73 29 3b 0a 0a 20 20 20 20 74 68 69 aults);.. thi
04f0: 73 2e 5f 6e 75 6d 62 65 72 4f 66 53 6c 69 64 65 s._numberOfSlide
0500: 72 73 20 3d 20 74 68 69 73 2e 73 65 74 74 69 6e rs = this.settin
0510: 67 73 2e 6e 75 6d 62 65 72 4f 66 53 6c 69 64 65 gs.numberOfSlide
0520: 72 73 3b 0a 20 20 20 20 74 68 69 73 2e 5f 6d 69 rs;. this._mi
0530: 6e 20 3d 20 74 68 69 73 2e 73 65 74 74 69 6e 67 n = this.setting
0540: 73 2e 6d 69 6e 3b 0a 20 20 20 20 74 68 69 73 2e s.min;. this.
0550: 5f 6d 61 78 20 3d 20 74 68 69 73 2e 73 65 74 74 _max = this.sett
0560: 69 6e 67 73 2e 6d 61 78 3b 0a 20 20 20 20 74 68 ings.max;. th
0570: 69 73 2e 5f 73 74 65 70 20 3d 20 74 68 69 73 2e is._step = this.
0580: 73 65 74 74 69 6e 67 73 2e 73 74 65 70 3b 0a 0a settings.step;..
0590: 20 20 20 20 74 68 69 73 2e 5f 6d 6f 64 65 20 3d this._mode =
05a0: 20 74 68 69 73 2e 73 65 74 74 69 6e 67 73 2e 6d this.settings.m
05b0: 6f 64 65 3b 0a 0a 20 20 20 20 2f 2a 2a 0a 20 20 ode;.. /**.
05c0: 20 20 54 68 65 20 63 75 72 72 65 6e 74 20 76 61 The current va
05d0: 6c 75 65 73 20 6f 66 20 74 68 65 20 73 6c 69 64 lues of the slid
05e0: 65 72 2e 20 4e 4f 54 45 3a 20 55 73 65 20 74 68 er. NOTE: Use th
05f0: 69 73 20 6f 6e 6c 79 20 74 6f 20 67 65 74 20 74 is only to get t
0600: 68 65 20 63 75 72 72 65 6e 74 20 76 61 6c 75 65 he current value
0610: 73 2e 20 53 65 74 74 69 6e 67 20 74 68 69 73 20 s. Setting this
0620: 61 72 72 61 79 20 77 69 6c 6c 20 6e 6f 74 20 75 array will not u
0630: 70 64 61 74 65 20 74 68 65 20 6d 75 6c 74 69 73 pdate the multis
0640: 6c 69 64 65 72 2e 20 54 6f 20 73 65 74 20 74 68 lider. To set th
0650: 65 20 6d 75 6c 74 69 73 6c 69 64 65 72 27 73 20 e multislider's
0660: 76 61 6c 75 65 73 2c 20 75 73 65 20 73 65 74 53 values, use setS
0670: 6c 69 64 65 72 28 29 20 6f 72 20 73 65 74 41 6c lider() or setAl
0680: 6c 53 6c 69 64 65 72 73 28 29 0a 20 20 20 20 40 lSliders(). @
0690: 74 79 70 65 20 7b 41 72 72 61 79 7d 0a 20 20 20 type {Array}.
06a0: 20 2a 2f 0a 20 20 20 20 63 6f 6e 73 74 20 76 73 */. const vs
06b0: 20 3d 20 74 68 69 73 2e 73 65 74 74 69 6e 67 73 = this.settings
06c0: 2e 76 61 6c 75 65 73 3b 0a 20 20 20 20 74 68 69 .values;. thi
06d0: 73 2e 76 61 6c 75 65 73 20 3d 20 76 73 2e 6c 65 s.values = vs.le
06e0: 6e 67 74 68 20 3e 20 74 68 69 73 2e 5f 6e 75 6d ngth > this._num
06f0: 62 65 72 4f 66 53 6c 69 64 65 72 73 20 3f 20 76 berOfSliders ? v
0700: 73 2e 73 6c 69 63 65 28 30 2c 20 74 68 69 73 2e s.slice(0, this.
0710: 5f 6e 75 6d 62 65 72 4f 66 53 6c 69 64 65 72 73 _numberOfSliders
0720: 29 20 3a 20 76 73 2e 63 6f 6e 63 61 74 28 41 72 ) : vs.concat(Ar
0730: 72 61 79 28 74 68 69 73 2e 5f 6e 75 6d 62 65 72 ray(this._number
0740: 4f 66 53 6c 69 64 65 72 73 20 2d 20 76 73 2e 6c OfSliders - vs.l
0750: 65 6e 67 74 68 29 2e 66 69 6c 6c 28 30 29 29 3b ength).fill(0));
0760: 0a 0a 20 20 20 20 74 68 69 73 2e 63 61 6e 64 79 .. this.candy
0770: 63 61 6e 65 20 3d 20 74 68 69 73 2e 73 65 74 74 cane = this.sett
0780: 69 6e 67 73 2e 63 61 6e 64 79 63 61 6e 65 3b 0a ings.candycane;.
0790: 0a 20 20 20 20 74 68 69 73 2e 73 6c 69 64 65 72 . this.slider
07a0: 57 69 64 74 68 20 3d 20 74 68 69 73 2e 77 69 64 Width = this.wid
07b0: 74 68 20 2f 20 74 68 69 73 2e 76 61 6c 75 65 73 th / this.values
07c0: 2e 6c 65 6e 67 74 68 3b 0a 0a 20 20 20 20 2f 2a .length;.. /*
07d0: 2a 0a 20 20 20 20 41 70 70 6c 69 65 73 20 61 20 *. Applies a
07e0: 73 69 6d 70 6c 65 20 6c 6f 77 2d 70 61 73 73 20 simple low-pass
07f0: 66 69 6c 74 65 72 20 74 6f 20 74 68 65 20 6d 75 filter to the mu
0800: 6c 74 69 73 6c 69 64 65 72 20 61 73 20 69 74 20 ltislider as it
0810: 69 73 20 69 6e 74 65 72 61 63 74 65 64 20 77 69 is interacted wi
0820: 74 68 2e 20 41 20 73 6d 6f 6f 74 68 69 6e 67 20 th. A smoothing
0830: 6f 66 20 30 20 77 69 6c 6c 20 62 65 20 6e 6f 20 of 0 will be no
0840: 73 6d 6f 6f 74 68 69 6e 67 2e 20 41 20 73 6d 6f smoothing. A smo
0850: 6f 74 68 69 6e 67 20 6f 66 20 31 20 77 69 6c 6c othing of 1 will
0860: 20 73 6d 6f 6f 74 68 20 31 20 73 6c 69 64 65 72 smooth 1 slider
0870: 20 6f 6e 20 65 61 63 68 20 73 69 64 65 20 6f 66 on each side of
0880: 20 74 68 65 20 69 6e 74 65 72 61 63 74 69 6f 6e the interaction
0890: 2e 20 41 20 73 6d 6f 6f 74 68 69 6e 67 20 6f 66 . A smoothing of
08a0: 20 32 20 77 69 6c 6c 20 73 6d 6f 6f 74 68 20 32 2 will smooth 2
08b0: 20 73 6c 69 64 65 72 73 20 6f 6e 20 65 61 63 68 sliders on each
08c0: 20 73 69 64 65 2c 20 61 6e 64 20 73 6f 20 6f 6e side, and so on
08d0: 2e 0a 20 20 20 20 40 74 79 70 65 20 7b 4e 75 6d .. @type {Num
08e0: 62 65 72 7d 0a 20 20 20 20 2a 2f 0a 20 20 20 20 ber}. */.
08f0: 74 68 69 73 2e 73 6d 6f 6f 74 68 69 6e 67 20 3d this.smoothing =
0900: 20 74 68 69 73 2e 73 65 74 74 69 6e 67 73 2e 73 this.settings.s
0910: 6d 6f 6f 74 68 69 6e 67 3b 0a 0a 20 20 20 20 74 moothing;.. t
0920: 68 69 73 2e 69 6e 69 74 28 29 3b 0a 20 20 20 20 his.init();.
0930: 74 68 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a 20 this.render();.
0940: 20 7d 0a 0a 20 20 62 75 69 6c 64 49 6e 74 65 72 }.. buildInter
0950: 66 61 63 65 28 29 20 7b 0a 20 20 20 20 69 66 20 face() {. if
0960: 28 74 68 69 73 2e 5f 6d 6f 64 65 20 3d 3d 20 27 (this._mode == '
0970: 6c 69 6e 65 27 29 20 7b 0a 20 20 20 20 20 20 74 line') {. t
0980: 68 69 73 2e 6c 69 6e 65 20 3d 20 73 76 67 2e 63 his.line = svg.c
0990: 72 65 61 74 65 28 27 70 6f 6c 79 6c 69 6e 65 27 reate('polyline'
09a0: 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 6c 69 );. this.li
09b0: 6e 65 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 ne.setAttribute(
09c0: 27 73 74 72 6f 6b 65 2d 77 69 64 74 68 27 2c 20 'stroke-width',
09d0: 32 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 6c 2);. this.l
09e0: 69 6e 65 2e 73 65 74 41 74 74 72 69 62 75 74 65 ine.setAttribute
09f0: 28 27 66 69 6c 6c 27 2c 20 27 6e 6f 6e 65 27 29 ('fill', 'none')
0a00: 3b 0a 0a 20 20 20 20 20 20 74 68 69 73 2e 65 6c ;.. this.el
0a10: 65 6d 65 6e 74 2e 61 70 70 65 6e 64 43 68 69 6c ement.appendChil
0a20: 64 28 74 68 69 73 2e 6c 69 6e 65 29 3b 0a 0a 20 d(this.line);..
0a30: 20 20 20 20 20 74 68 69 73 2e 66 69 6c 6c 20 3d this.fill =
0a40: 20 73 76 67 2e 63 72 65 61 74 65 28 27 70 6f 6c svg.create('pol
0a50: 79 6c 69 6e 65 27 29 3b 0a 20 20 20 20 20 20 74 yline');. t
0a60: 68 69 73 2e 66 69 6c 6c 2e 73 65 74 41 74 74 72 his.fill.setAttr
0a70: 69 62 75 74 65 28 27 66 69 6c 6c 2d 6f 70 61 63 ibute('fill-opac
0a80: 69 74 79 27 2c 20 27 30 2e 32 27 29 3b 0a 0a 20 ity', '0.2');..
0a90: 20 20 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e this.elemen
0aa0: 74 2e 61 70 70 65 6e 64 43 68 69 6c 64 28 74 68 t.appendChild(th
0ab0: 69 73 2e 66 69 6c 6c 29 3b 0a 0a 20 20 20 20 20 is.fill);..
0ac0: 20 74 68 69 73 2e 6e 6f 64 65 73 20 3d 20 5b 5d this.nodes = []
0ad0: 3b 0a 0a 20 20 20 20 20 20 74 68 69 73 2e 76 61 ;.. this.va
0ae0: 6c 75 65 73 2e 66 6f 72 45 61 63 68 28 0a 20 20 lues.forEach(.
0af0: 20 20 20 20 20 20 66 75 6e 63 74 69 6f 6e 28 76 function(v
0b00: 61 6c 75 65 2c 20 69 6e 64 65 78 29 20 7b 0a 20 alue, index) {.
0b10: 20 20 20 20 20 20 20 20 20 6c 65 74 20 6e 6f 64 let nod
0b20: 65 20 3d 20 73 76 67 2e 63 72 65 61 74 65 28 27 e = svg.create('
0b30: 63 69 72 63 6c 65 27 29 3b 0a 0a 20 20 20 20 20 circle');..
0b40: 20 20 20 20 20 6e 6f 64 65 2e 73 65 74 41 74 74 node.setAtt
0b50: 72 69 62 75 74 65 28 27 63 78 27 2c 20 74 68 69 ribute('cx', thi
0b60: 73 2e 67 65 74 58 28 69 6e 64 65 78 29 29 3b 0a s.getX(index));.
0b70: 20 20 20 20 20 20 20 20 20 20 6e 6f 64 65 2e 73 node.s
0b80: 65 74 41 74 74 72 69 62 75 74 65 28 27 63 79 27 etAttribute('cy'
0b90: 2c 20 74 68 69 73 2e 67 65 74 59 28 76 61 6c 75 , this.getY(valu
0ba0: 65 29 29 3b 0a 0a 20 20 20 20 20 20 20 20 20 20 e));..
0bb0: 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 61 70 70 this.element.app
0bc0: 65 6e 64 43 68 69 6c 64 28 6e 6f 64 65 29 3b 0a endChild(node);.
0bd0: 20 20 20 20 20 20 20 20 20 20 74 68 69 73 2e 6e this.n
0be0: 6f 64 65 73 2e 70 75 73 68 28 6e 6f 64 65 29 3b odes.push(node);
0bf0: 0a 20 20 20 20 20 20 20 20 7d 2e 62 69 6e 64 28 . }.bind(
0c00: 74 68 69 73 29 0a 20 20 20 20 20 20 29 3b 0a 20 this). );.
0c10: 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20 20 20 20 } else {.
0c20: 20 20 74 68 69 73 2e 62 61 72 73 20 3d 20 5b 5d this.bars = []
0c30: 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 63 61 70 ;. this.cap
0c40: 73 20 3d 20 5b 5d 3b 0a 0a 20 20 20 20 20 20 74 s = [];.. t
0c50: 68 69 73 2e 76 61 6c 75 65 73 2e 66 6f 72 45 61 his.values.forEa
0c60: 63 68 28 0a 20 20 20 20 20 20 20 20 66 75 6e 63 ch(. func
0c70: 74 69 6f 6e 28 76 61 6c 75 65 2c 20 69 6e 64 65 tion(value, inde
0c80: 78 29 20 7b 0a 20 20 20 20 20 20 20 20 20 20 6c x) {. l
0c90: 65 74 20 62 61 72 20 3d 20 73 76 67 2e 63 72 65 et bar = svg.cre
0ca0: 61 74 65 28 27 72 65 63 74 27 29 3b 0a 0a 20 20 ate('rect');..
0cb0: 20 20 20 20 20 20 20 20 6c 65 74 20 78 20 3d 20 let x =
0cc0: 74 68 69 73 2e 67 65 74 42 61 72 58 28 69 6e 64 this.getBarX(ind
0cd0: 65 78 29 3b 0a 20 20 20 20 20 20 20 20 20 20 6c ex);. l
0ce0: 65 74 20 79 20 3d 20 74 68 69 73 2e 67 65 74 59 et y = this.getY
0cf0: 28 76 61 6c 75 65 29 3b 0a 0a 20 20 20 20 20 20 (value);..
0d00: 20 20 20 20 62 61 72 2e 73 65 74 41 74 74 72 69 bar.setAttri
0d10: 62 75 74 65 28 27 78 27 2c 20 78 20 2d 20 30 2e bute('x', x - 0.
0d20: 31 29 3b 0a 20 20 20 20 20 20 20 20 20 20 62 61 1);. ba
0d30: 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 r.setAttribute('
0d40: 79 27 2c 20 79 29 3b 0a 20 20 20 20 20 20 20 20 y', y);.
0d50: 20 20 62 61 72 2e 73 65 74 41 74 74 72 69 62 75 bar.setAttribu
0d60: 74 65 28 27 77 69 64 74 68 27 2c 20 74 68 69 73 te('width', this
0d70: 2e 73 6c 69 64 65 72 57 69 64 74 68 20 2b 20 30 .sliderWidth + 0
0d80: 2e 32 29 3b 0a 20 20 20 20 20 20 20 20 20 20 62 .2);. b
0d90: 61 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 ar.setAttribute(
0da0: 27 68 65 69 67 68 74 27 2c 20 74 68 69 73 2e 68 'height', this.h
0db0: 65 69 67 68 74 29 3b 0a 20 20 20 20 20 20 20 20 eight);.
0dc0: 20 20 62 61 72 2e 73 65 74 41 74 74 72 69 62 75 bar.setAttribu
0dd0: 74 65 28 0a 20 20 20 20 20 20 20 20 20 20 20 20 te(.
0de0: 27 6f 70 61 63 69 74 79 27 2c 0a 20 20 20 20 20 'opacity',.
0df0: 20 20 20 20 20 20 20 31 20 2d 20 28 28 69 6e 64 1 - ((ind
0e00: 65 78 20 25 20 74 68 69 73 2e 63 61 6e 64 79 63 ex % this.candyc
0e10: 61 6e 65 29 20 2b 20 31 29 20 2f 20 28 74 68 69 ane) + 1) / (thi
0e20: 73 2e 63 61 6e 64 79 63 61 6e 65 20 2b 20 31 29 s.candycane + 1)
0e30: 0a 20 20 20 20 20 20 20 20 20 20 29 3b 0a 0a 20 . );..
0e40: 20 20 20 20 20 20 20 20 20 74 68 69 73 2e 65 6c this.el
0e50: 65 6d 65 6e 74 2e 61 70 70 65 6e 64 43 68 69 6c ement.appendChil
0e60: 64 28 62 61 72 29 3b 0a 20 20 20 20 20 20 20 20 d(bar);.
0e70: 20 20 74 68 69 73 2e 62 61 72 73 2e 70 75 73 68 this.bars.push
0e80: 28 62 61 72 29 3b 0a 0a 20 20 20 20 20 20 20 20 (bar);..
0e90: 20 20 6c 65 74 20 63 61 70 20 3d 20 73 76 67 2e let cap = svg.
0ea0: 63 72 65 61 74 65 28 27 72 65 63 74 27 29 3b 0a create('rect');.
0eb0: 0a 20 20 20 20 20 20 20 20 20 20 63 61 70 2e 73 . cap.s
0ec0: 65 74 41 74 74 72 69 62 75 74 65 28 27 78 27 2c etAttribute('x',
0ed0: 20 78 20 2d 20 30 2e 31 29 3b 0a 20 20 20 20 20 x - 0.1);.
0ee0: 20 20 20 20 20 63 61 70 2e 73 65 74 41 74 74 72 cap.setAttr
0ef0: 69 62 75 74 65 28 27 79 27 2c 20 79 29 3b 0a 20 ibute('y', y);.
0f00: 20 20 20 20 20 20 20 20 20 63 61 70 2e 73 65 74 cap.set
0f10: 41 74 74 72 69 62 75 74 65 28 27 77 69 64 74 68 Attribute('width
0f20: 27 2c 20 74 68 69 73 2e 73 6c 69 64 65 72 57 69 ', this.sliderWi
0f30: 64 74 68 20 2b 20 30 2e 32 29 3b 0a 20 20 20 20 dth + 0.2);.
0f40: 20 20 20 20 20 20 63 61 70 2e 73 65 74 41 74 74 cap.setAtt
0f50: 72 69 62 75 74 65 28 27 68 65 69 67 68 74 27 2c ribute('height',
0f60: 20 35 29 3b 0a 0a 20 20 20 20 20 20 20 20 20 20 5);..
0f70: 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 61 70 70 this.element.app
0f80: 65 6e 64 43 68 69 6c 64 28 63 61 70 29 3b 0a 20 endChild(cap);.
0f90: 20 20 20 20 20 20 20 20 20 74 68 69 73 2e 63 61 this.ca
0fa0: 70 73 2e 70 75 73 68 28 63 61 70 29 3b 0a 20 20 ps.push(cap);.
0fb0: 20 20 20 20 20 20 7d 2e 62 69 6e 64 28 74 68 69 }.bind(thi
0fc0: 73 29 0a 20 20 20 20 20 20 29 3b 0a 20 20 20 20 s). );.
0fd0: 7d 0a 20 20 7d 0a 0a 20 20 67 65 74 42 61 72 58 }. }.. getBarX
0fe0: 28 69 6e 64 65 78 29 20 7b 0a 20 20 20 20 72 65 (index) {. re
0ff0: 74 75 72 6e 20 74 68 69 73 2e 67 65 74 58 28 69 turn this.getX(i
1000: 6e 64 65 78 29 20 2d 20 74 68 69 73 2e 73 6c 69 ndex) - this.sli
1010: 64 65 72 57 69 64 74 68 20 2f 20 32 3b 0a 20 20 derWidth / 2;.
1020: 7d 0a 0a 20 20 67 65 74 58 28 69 6e 64 65 78 29 }.. getX(index)
1030: 20 7b 0a 20 20 20 20 2f 2f 72 65 74 75 72 6e 20 {. //return
1040: 4d 61 74 68 2e 66 6c 6f 6f 72 28 20 69 6e 64 65 Math.floor( inde
1050: 78 20 2a 20 74 68 69 73 2e 73 6c 69 64 65 72 57 x * this.sliderW
1060: 69 64 74 68 20 2b 20 74 68 69 73 2e 73 6c 69 64 idth + this.slid
1070: 65 72 57 69 64 74 68 2f 32 20 29 3b 0a 20 20 20 erWidth/2 );.
1080: 20 72 65 74 75 72 6e 20 69 6e 64 65 78 20 2a 20 return index *
1090: 74 68 69 73 2e 73 6c 69 64 65 72 57 69 64 74 68 this.sliderWidth
10a0: 20 2b 20 74 68 69 73 2e 73 6c 69 64 65 72 57 69 + this.sliderWi
10b0: 64 74 68 20 2f 20 32 3b 0a 20 20 7d 0a 0a 20 20 dth / 2;. }..
10c0: 67 65 74 59 28 76 61 6c 75 65 29 20 7b 0a 20 20 getY(value) {.
10d0: 20 20 72 65 74 75 72 6e 20 6d 61 74 68 2e 73 63 return math.sc
10e0: 61 6c 65 28 76 61 6c 75 65 2c 20 74 68 69 73 2e ale(value, this.
10f0: 5f 6d 69 6e 2c 20 74 68 69 73 2e 5f 6d 61 78 2c _min, this._max,
1100: 20 74 68 69 73 2e 68 65 69 67 68 74 2c 20 30 29 this.height, 0)
1110: 3b 20 2f 2f 28 31 20 2d 20 76 61 6c 75 65 29 20 ; //(1 - value)
1120: 2a 20 74 68 69 73 2e 68 65 69 67 68 74 3b 0a 20 * this.height;.
1130: 20 7d 0a 0a 20 20 67 65 74 56 61 6c 75 65 46 72 }.. getValueFr
1140: 6f 6d 59 28 79 29 20 7b 0a 20 20 20 20 6c 65 74 omY(y) {. let
1150: 20 73 63 61 6c 65 41 64 6a 75 73 74 65 64 20 3d scaleAdjusted =
1160: 20 6d 61 74 68 2e 73 63 61 6c 65 28 79 2c 20 74 math.scale(y, t
1170: 68 69 73 2e 68 65 69 67 68 74 2c 20 30 2c 20 74 his.height, 0, t
1180: 68 69 73 2e 5f 6d 69 6e 2c 20 74 68 69 73 2e 5f his._min, this._
1190: 6d 61 78 29 3b 0a 20 20 20 20 72 65 74 75 72 6e max);. return
11a0: 20 74 68 69 73 2e 61 64 6a 75 73 74 56 61 6c 75 this.adjustValu
11b0: 65 54 6f 53 74 65 70 28 73 63 61 6c 65 41 64 6a eToStep(scaleAdj
11c0: 75 73 74 65 64 29 3b 0a 20 20 7d 0a 0a 20 20 67 usted);. }.. g
11d0: 65 74 49 6e 64 65 78 46 72 6f 6d 58 28 78 29 20 etIndexFromX(x)
11e0: 7b 0a 20 20 20 20 72 65 74 75 72 6e 20 6d 61 74 {. return mat
11f0: 68 2e 63 6c 69 70 28 0a 20 20 20 20 20 20 4d 61 h.clip(. Ma
1200: 74 68 2e 66 6c 6f 6f 72 28 28 78 20 2f 20 74 68 th.floor((x / th
1210: 69 73 2e 77 69 64 74 68 29 20 2a 20 74 68 69 73 is.width) * this
1220: 2e 76 61 6c 75 65 73 2e 6c 65 6e 67 74 68 29 2c .values.length),
1230: 0a 20 20 20 20 20 20 30 2c 0a 20 20 20 20 20 20 . 0,.
1240: 74 68 69 73 2e 76 61 6c 75 65 73 2e 6c 65 6e 67 this.values.leng
1250: 74 68 20 2d 20 31 0a 20 20 20 20 29 3b 0a 20 20 th - 1. );.
1260: 7d 0a 0a 20 20 61 64 6a 75 73 74 56 61 6c 75 65 }.. adjustValue
1270: 54 6f 53 74 65 70 28 76 61 6c 75 65 29 20 7b 0a ToStep(value) {.
1280: 20 20 20 20 69 66 20 28 21 74 68 69 73 2e 5f 73 if (!this._s
1290: 74 65 70 29 20 7b 0a 20 20 20 20 20 20 72 65 74 tep) {. ret
12a0: 75 72 6e 20 76 61 6c 75 65 3b 0a 20 20 20 20 7d urn value;. }
12b0: 0a 20 20 20 20 6c 65 74 20 6f 66 66 73 65 74 20 . let offset
12c0: 3d 20 76 61 6c 75 65 20 25 20 74 68 69 73 2e 5f = value % this._
12d0: 73 74 65 70 3b 0a 20 20 20 20 76 61 6c 75 65 20 step;. value
12e0: 3d 20 76 61 6c 75 65 20 2d 20 28 76 61 6c 75 65 = value - (value
12f0: 20 25 20 74 68 69 73 2e 5f 73 74 65 70 29 3b 0a % this._step);.
1300: 20 20 20 20 69 66 20 28 6f 66 66 73 65 74 20 3e if (offset >
1310: 20 74 68 69 73 2e 5f 73 74 65 70 20 2f 20 32 29 this._step / 2)
1320: 20 7b 0a 20 20 20 20 20 20 76 61 6c 75 65 20 2b {. value +
1330: 3d 20 74 68 69 73 2e 5f 73 74 65 70 3b 0a 20 20 = this._step;.
1340: 20 20 7d 0a 20 20 20 20 72 65 74 75 72 6e 20 76 }. return v
1350: 61 6c 75 65 3b 0a 20 20 7d 0a 0a 20 20 61 64 6a alue;. }.. adj
1360: 75 73 74 41 6c 6c 56 61 6c 75 65 73 28 29 20 7b ustAllValues() {
1370: 0a 20 20 20 20 74 68 69 73 2e 76 61 6c 75 65 73 . this.values
1380: 2e 66 6f 72 45 61 63 68 28 0a 20 20 20 20 20 20 .forEach(.
1390: 66 75 6e 63 74 69 6f 6e 28 76 61 6c 75 65 2c 20 function(value,
13a0: 69 6e 64 65 78 29 20 7b 0a 20 20 20 20 20 20 20 index) {.
13b0: 20 76 61 6c 75 65 20 3d 20 74 68 69 73 2e 61 64 value = this.ad
13c0: 6a 75 73 74 56 61 6c 75 65 54 6f 53 74 65 70 28 justValueToStep(
13d0: 76 61 6c 75 65 29 3b 0a 20 20 20 20 20 20 20 20 value);.
13e0: 74 68 69 73 2e 76 61 6c 75 65 73 5b 69 6e 64 65 this.values[inde
13f0: 78 5d 20 3d 20 6d 61 74 68 2e 63 6c 69 70 28 76 x] = math.clip(v
1400: 61 6c 75 65 2c 20 74 68 69 73 2e 5f 6d 69 6e 2c alue, this._min,
1410: 20 74 68 69 73 2e 5f 6d 61 78 29 3b 0a 20 20 20 this._max);.
1420: 20 20 20 7d 2e 62 69 6e 64 28 74 68 69 73 29 0a }.bind(this).
1430: 20 20 20 20 29 3b 0a 20 20 7d 0a 0a 20 20 67 65 );. }.. ge
1440: 74 4e 6f 72 6d 61 6c 69 7a 65 64 56 61 6c 75 65 tNormalizedValue
1450: 73 28 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 6e s() {. this.n
1460: 6f 72 6d 61 6c 69 7a 65 64 56 61 6c 75 65 73 20 ormalizedValues
1470: 3d 20 5b 5d 3b 0a 20 20 20 20 74 68 69 73 2e 76 = [];. this.v
1480: 61 6c 75 65 73 2e 66 6f 72 45 61 63 68 28 0a 20 alues.forEach(.
1490: 20 20 20 20 20 66 75 6e 63 74 69 6f 6e 28 76 61 function(va
14a0: 6c 75 65 29 20 7b 0a 20 20 20 20 20 20 20 20 74 lue) {. t
14b0: 68 69 73 2e 6e 6f 72 6d 61 6c 69 7a 65 64 56 61 his.normalizedVa
14c0: 6c 75 65 73 2e 70 75 73 68 28 0a 20 20 20 20 20 lues.push(.
14d0: 20 20 20 20 20 6d 61 74 68 2e 73 63 61 6c 65 28 math.scale(
14e0: 76 61 6c 75 65 2c 20 74 68 69 73 2e 5f 6d 69 6e value, this._min
14f0: 2c 20 74 68 69 73 2e 5f 6d 61 78 2c 20 30 2c 20 , this._max, 0,
1500: 31 29 0a 20 20 20 20 20 20 20 20 29 3b 0a 20 20 1). );.
1510: 20 20 20 20 7d 2e 62 69 6e 64 28 74 68 69 73 29 }.bind(this)
1520: 0a 20 20 20 20 29 3b 0a 20 20 7d 0a 0a 20 20 63 . );. }.. c
1530: 6f 6c 6f 72 49 6e 74 65 72 66 61 63 65 28 29 20 olorInterface()
1540: 7b 0a 20 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 {. this.eleme
1550: 6e 74 2e 73 74 79 6c 65 2e 62 61 63 6b 67 72 6f nt.style.backgro
1560: 75 6e 64 43 6f 6c 6f 72 20 3d 20 74 68 69 73 2e undColor = this.
1570: 63 6f 6c 6f 72 73 2e 66 69 6c 6c 3b 0a 0a 20 20 colors.fill;..
1580: 20 20 69 66 20 28 74 68 69 73 2e 5f 6d 6f 64 65 if (this._mode
1590: 20 3d 3d 20 27 6c 69 6e 65 27 29 20 7b 0a 20 20 == 'line') {.
15a0: 20 20 20 20 74 68 69 73 2e 6c 69 6e 65 2e 73 65 this.line.se
15b0: 74 41 74 74 72 69 62 75 74 65 28 27 73 74 72 6f tAttribute('stro
15c0: 6b 65 27 2c 20 74 68 69 73 2e 63 6f 6c 6f 72 73 ke', this.colors
15d0: 2e 61 63 63 65 6e 74 29 3b 0a 20 20 20 20 20 20 .accent);.
15e0: 74 68 69 73 2e 66 69 6c 6c 2e 73 65 74 41 74 74 this.fill.setAtt
15f0: 72 69 62 75 74 65 28 27 66 69 6c 6c 27 2c 20 74 ribute('fill', t
1600: 68 69 73 2e 63 6f 6c 6f 72 73 2e 61 63 63 65 6e his.colors.accen
1610: 74 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 6e t);. this.n
1620: 6f 64 65 73 2e 66 6f 72 45 61 63 68 28 6e 6f 64 odes.forEach(nod
1630: 65 20 3d 3e 20 7b 0a 20 20 20 20 20 20 20 20 6e e => {. n
1640: 6f 64 65 2e 73 65 74 41 74 74 72 69 62 75 74 65 ode.setAttribute
1650: 28 27 66 69 6c 6c 27 2c 20 74 68 69 73 2e 63 6f ('fill', this.co
1660: 6c 6f 72 73 2e 61 63 63 65 6e 74 29 3b 0a 20 20 lors.accent);.
1670: 20 20 20 20 7d 29 3b 0a 20 20 20 20 7d 20 65 6c });. } el
1680: 73 65 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e se {. this.
1690: 62 61 72 73 2e 66 6f 72 45 61 63 68 28 62 61 72 bars.forEach(bar
16a0: 20 3d 3e 20 7b 0a 20 20 20 20 20 20 20 20 62 61 => {. ba
16b0: 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 r.setAttribute('
16c0: 66 69 6c 6c 27 2c 20 74 68 69 73 2e 63 6f 6c 6f fill', this.colo
16d0: 72 73 2e 61 63 63 65 6e 74 29 3b 0a 20 20 20 20 rs.accent);.
16e0: 20 20 7d 29 3b 0a 20 20 20 20 20 20 74 68 69 73 });. this
16f0: 2e 63 61 70 73 2e 66 6f 72 45 61 63 68 28 63 61 .caps.forEach(ca
1700: 70 20 3d 3e 20 7b 0a 20 20 20 20 20 20 20 20 63 p => {. c
1710: 61 70 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 ap.setAttribute(
1720: 27 66 69 6c 6c 27 2c 20 74 68 69 73 2e 63 6f 6c 'fill', this.col
1730: 6f 72 73 2e 61 63 63 65 6e 74 29 3b 0a 20 20 20 ors.accent);.
1740: 20 20 20 7d 29 3b 0a 20 20 20 20 7d 0a 20 20 7d });. }. }
1750: 0a 0a 20 20 73 69 7a 65 49 6e 74 65 72 66 61 63 .. sizeInterfac
1760: 65 28 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 73 e() {. this.s
1770: 6c 69 64 65 72 57 69 64 74 68 20 3d 20 74 68 69 liderWidth = thi
1780: 73 2e 77 69 64 74 68 20 2f 20 74 68 69 73 2e 76 s.width / this.v
1790: 61 6c 75 65 73 2e 6c 65 6e 67 74 68 3b 0a 0a 20 alues.length;..
17a0: 20 20 20 69 66 20 28 74 68 69 73 2e 5f 6d 6f 64 if (this._mod
17b0: 65 20 3d 3d 20 27 6c 69 6e 65 27 29 20 7b 0a 20 e == 'line') {.
17c0: 20 20 20 20 20 74 68 69 73 2e 6e 6f 64 65 73 2e this.nodes.
17d0: 66 6f 72 45 61 63 68 28 0a 20 20 20 20 20 20 20 forEach(.
17e0: 20 66 75 6e 63 74 69 6f 6e 28 6e 6f 64 65 29 20 function(node)
17f0: 7b 0a 20 20 20 20 20 20 20 20 20 20 6c 65 74 20 {. let
1800: 72 20 3d 20 7e 7e 28 4d 61 74 68 2e 6d 69 6e 28 r = ~~(Math.min(
1810: 74 68 69 73 2e 77 69 64 74 68 2c 20 74 68 69 73 this.width, this
1820: 2e 68 65 69 67 68 74 29 20 2f 20 35 30 29 20 2b .height) / 50) +
1830: 20 32 3b 0a 20 20 20 20 20 20 20 20 20 20 72 20 2;. r
1840: 3d 20 4d 61 74 68 2e 6d 69 6e 28 74 68 69 73 2e = Math.min(this.
1850: 73 6c 69 64 65 72 57 69 64 74 68 2c 20 72 29 3b sliderWidth, r);
1860: 0a 20 20 20 20 20 20 20 20 20 20 6e 6f 64 65 2e . node.
1870: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 72 27 setAttribute('r'
1880: 2c 20 72 29 3b 0a 20 20 20 20 20 20 20 20 7d 2e , r);. }.
1890: 62 69 6e 64 28 74 68 69 73 29 0a 20 20 20 20 20 bind(this).
18a0: 20 29 3b 0a 20 20 20 20 7d 0a 0a 20 20 20 20 74 );. }.. t
18b0: 68 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a 20 20 his.render();.
18c0: 7d 0a 0a 20 20 72 65 6e 64 65 72 28 29 20 7b 0a }.. render() {.
18d0: 20 20 20 20 69 66 20 28 74 68 69 73 2e 5f 6d 6f if (this._mo
18e0: 64 65 20 3d 3d 20 27 6c 69 6e 65 27 29 20 7b 0a de == 'line') {.
18f0: 20 20 20 20 20 20 6c 65 74 20 64 61 74 61 20 3d let data =
1900: 20 27 30 20 27 20 2b 20 74 68 69 73 2e 67 65 74 '0 ' + this.get
1910: 59 28 74 68 69 73 2e 76 61 6c 75 65 73 5b 30 5d Y(this.values[0]
1920: 29 20 2b 20 27 2c 20 27 3b 0a 0a 20 20 20 20 20 ) + ', ';..
1930: 20 74 68 69 73 2e 76 61 6c 75 65 73 2e 66 6f 72 this.values.for
1940: 45 61 63 68 28 28 76 61 6c 75 65 2c 20 69 6e 64 Each((value, ind
1950: 65 78 29 20 3d 3e 20 7b 0a 20 20 20 20 20 20 20 ex) => {.
1960: 20 6c 65 74 20 78 20 3d 20 74 68 69 73 2e 67 65 let x = this.ge
1970: 74 58 28 69 6e 64 65 78 29 3b 0a 20 20 20 20 20 tX(index);.
1980: 20 20 20 6c 65 74 20 79 20 3d 20 74 68 69 73 2e let y = this.
1990: 67 65 74 59 28 76 61 6c 75 65 29 3b 0a 20 20 20 getY(value);.
19a0: 20 20 20 20 20 64 61 74 61 20 2b 3d 20 78 20 2b data += x +
19b0: 20 27 20 27 20 2b 20 79 20 2b 20 27 2c 20 27 3b ' ' + y + ', ';
19c0: 0a 20 20 20 20 20 20 20 20 74 68 69 73 2e 6e 6f . this.no
19d0: 64 65 73 5b 69 6e 64 65 78 5d 2e 73 65 74 41 74 des[index].setAt
19e0: 74 72 69 62 75 74 65 28 27 63 78 27 2c 20 74 68 tribute('cx', th
19f0: 69 73 2e 67 65 74 58 28 69 6e 64 65 78 29 29 3b is.getX(index));
1a00: 0a 20 20 20 20 20 20 20 20 74 68 69 73 2e 6e 6f . this.no
1a10: 64 65 73 5b 69 6e 64 65 78 5d 2e 73 65 74 41 74 des[index].setAt
1a20: 74 72 69 62 75 74 65 28 27 63 79 27 2c 20 74 68 tribute('cy', th
1a30: 69 73 2e 67 65 74 59 28 76 61 6c 75 65 29 29 3b is.getY(value));
1a40: 0a 20 20 20 20 20 20 7d 29 3b 0a 0a 20 20 20 20 . });..
1a50: 20 20 64 61 74 61 20 2b 3d 20 74 68 69 73 2e 77 data += this.w
1a60: 69 64 74 68 20 2b 20 27 20 27 20 2b 20 74 68 69 idth + ' ' + thi
1a70: 73 2e 67 65 74 59 28 74 68 69 73 2e 76 61 6c 75 s.getY(this.valu
1a80: 65 73 5b 74 68 69 73 2e 76 61 6c 75 65 73 2e 6c es[this.values.l
1a90: 65 6e 67 74 68 20 2d 20 31 5d 29 3b 0a 0a 20 20 ength - 1]);..
1aa0: 20 20 20 20 74 68 69 73 2e 6c 69 6e 65 2e 73 65 this.line.se
1ab0: 74 41 74 74 72 69 62 75 74 65 28 27 70 6f 69 6e tAttribute('poin
1ac0: 74 73 27 2c 20 64 61 74 61 29 3b 0a 0a 20 20 20 ts', data);..
1ad0: 20 20 20 2f 2f 20 66 69 6c 6c 20 64 61 74 61 0a // fill data.
1ae0: 20 20 20 20 20 20 2f 2f 20 61 64 64 20 62 6f 74 // add bot
1af0: 74 6f 6d 20 63 6f 72 6e 65 72 73 0a 0a 20 20 20 tom corners..
1b00: 20 20 20 64 61 74 61 20 2b 3d 20 27 2c 20 27 20 data += ', '
1b10: 2b 20 74 68 69 73 2e 77 69 64 74 68 20 2b 20 27 + this.width + '
1b20: 20 27 20 2b 20 74 68 69 73 2e 68 65 69 67 68 74 ' + this.height
1b30: 20 2b 20 27 2c 20 27 3b 0a 20 20 20 20 20 20 64 + ', ';. d
1b40: 61 74 61 20 2b 3d 20 27 30 20 27 20 2b 20 74 68 ata += '0 ' + th
1b50: 69 73 2e 68 65 69 67 68 74 3b 0a 0a 20 20 20 20 is.height;..
1b60: 20 20 74 68 69 73 2e 66 69 6c 6c 2e 73 65 74 41 this.fill.setA
1b70: 74 74 72 69 62 75 74 65 28 27 70 6f 69 6e 74 73 ttribute('points
1b80: 27 2c 20 64 61 74 61 29 3b 0a 20 20 20 20 7d 20 ', data);. }
1b90: 65 6c 73 65 20 7b 0a 20 20 20 20 20 20 74 68 69 else {. thi
1ba0: 73 2e 76 61 6c 75 65 73 2e 66 6f 72 45 61 63 68 s.values.forEach
1bb0: 28 28 76 61 6c 75 65 2c 20 69 6e 64 65 78 29 20 ((value, index)
1bc0: 3d 3e 20 7b 0a 20 20 20 20 20 20 20 20 74 68 69 => {. thi
1bd0: 73 2e 62 61 72 73 5b 69 6e 64 65 78 5d 2e 73 65 s.bars[index].se
1be0: 74 41 74 74 72 69 62 75 74 65 28 27 79 27 2c 20 tAttribute('y',
1bf0: 74 68 69 73 2e 67 65 74 59 28 76 61 6c 75 65 29 this.getY(value)
1c00: 29 3b 0a 20 20 20 20 20 20 20 20 74 68 69 73 2e );. this.
1c10: 63 61 70 73 5b 69 6e 64 65 78 5d 2e 73 65 74 41 caps[index].setA
1c20: 74 74 72 69 62 75 74 65 28 27 79 27 2c 20 74 68 ttribute('y', th
1c30: 69 73 2e 67 65 74 59 28 76 61 6c 75 65 29 29 3b is.getY(value));
1c40: 0a 20 20 20 20 20 20 7d 29 3b 0a 20 20 20 20 7d . });. }
1c50: 0a 20 20 7d 0a 0a 20 20 63 6c 69 63 6b 28 29 20 . }.. click()
1c60: 7b 0a 20 20 20 20 74 68 69 73 2e 68 61 73 4d 6f {. this.hasMo
1c70: 76 65 64 20 3d 20 66 61 6c 73 65 3b 0a 20 20 20 ved = false;.
1c80: 20 74 68 69 73 2e 70 72 65 76 69 6f 75 73 53 6c this.previousSl
1c90: 69 64 65 72 20 3d 20 66 61 6c 73 65 3b 0a 20 20 ider = false;.
1ca0: 20 20 74 68 69 73 2e 6d 6f 76 65 28 29 3b 0a 20 this.move();.
1cb0: 20 7d 0a 0a 20 20 6d 6f 76 65 28 29 20 7b 0a 20 }.. move() {.
1cc0: 20 20 20 69 66 20 28 74 68 69 73 2e 63 6c 69 63 if (this.clic
1cd0: 6b 65 64 29 20 7b 0a 20 20 20 20 20 20 74 68 69 ked) {. thi
1ce0: 73 2e 6d 6f 75 73 65 2e 78 20 3d 20 6d 61 74 68 s.mouse.x = math
1cf0: 2e 63 6c 69 70 28 74 68 69 73 2e 6d 6f 75 73 65 .clip(this.mouse
1d00: 2e 78 2c 20 30 2c 20 74 68 69 73 2e 77 69 64 74 .x, 0, this.widt
1d10: 68 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 6d h);. this.m
1d20: 6f 75 73 65 2e 79 20 3d 20 6d 61 74 68 2e 63 6c ouse.y = math.cl
1d30: 69 70 28 74 68 69 73 2e 6d 6f 75 73 65 2e 79 2c ip(this.mouse.y,
1d40: 20 30 2c 20 74 68 69 73 2e 68 65 69 67 68 74 29 0, this.height)
1d50: 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 68 61 73 ;. this.has
1d60: 4d 6f 76 65 64 20 3d 20 74 72 75 65 3b 0a 0a 20 Moved = true;..
1d70: 20 20 20 20 20 74 68 69 73 2e 73 65 6c 65 63 74 this.select
1d80: 65 64 53 6c 69 64 65 72 20 3d 20 74 68 69 73 2e edSlider = this.
1d90: 67 65 74 49 6e 64 65 78 46 72 6f 6d 58 28 74 68 getIndexFromX(th
1da0: 69 73 2e 6d 6f 75 73 65 2e 78 29 3b 0a 0a 20 20 is.mouse.x);..
1db0: 20 20 20 20 74 68 69 73 2e 76 61 6c 75 65 73 5b this.values[
1dc0: 74 68 69 73 2e 73 65 6c 65 63 74 65 64 53 6c 69 this.selectedSli
1dd0: 64 65 72 5d 20 3d 20 74 68 69 73 2e 67 65 74 56 der] = this.getV
1de0: 61 6c 75 65 46 72 6f 6d 59 28 74 68 69 73 2e 6d alueFromY(this.m
1df0: 6f 75 73 65 2e 79 29 3b 0a 0a 20 20 20 20 20 20 ouse.y);..
1e00: 2f 2a 20 68 61 6e 64 6c 65 20 69 6e 74 65 72 70 /* handle interp
1e10: 6f 6c 61 74 69 6f 6e 20 66 6f 72 20 69 6e 2d 62 olation for in-b
1e20: 65 74 77 65 65 6e 20 73 6c 69 64 65 72 73 20 2a etween sliders *
1e30: 2f 0a 0a 20 20 20 20 20 20 69 66 20 28 74 68 69 /.. if (thi
1e40: 73 2e 70 72 65 76 69 6f 75 73 53 6c 69 64 65 72 s.previousSlider
1e50: 20 21 3d 3d 20 66 61 6c 73 65 29 20 7b 0a 20 20 !== false) {.
1e60: 20 20 20 20 20 20 6c 65 74 20 64 69 73 74 61 6e let distan
1e70: 63 65 20 3d 20 4d 61 74 68 2e 61 62 73 28 74 68 ce = Math.abs(th
1e80: 69 73 2e 70 72 65 76 69 6f 75 73 53 6c 69 64 65 is.previousSlide
1e90: 72 20 2d 20 74 68 69 73 2e 73 65 6c 65 63 74 65 r - this.selecte
1ea0: 64 53 6c 69 64 65 72 29 3b 0a 20 20 20 20 20 20 dSlider);.
1eb0: 20 20 69 66 20 28 64 69 73 74 61 6e 63 65 20 3e if (distance >
1ec0: 20 31 29 20 7b 0a 20 20 20 20 20 20 20 20 20 20 1) {.
1ed0: 6c 65 74 20 6c 6f 77 20 3d 20 4d 61 74 68 2e 6d let low = Math.m
1ee0: 69 6e 28 74 68 69 73 2e 70 72 65 76 69 6f 75 73 in(this.previous
1ef0: 53 6c 69 64 65 72 2c 20 74 68 69 73 2e 73 65 6c Slider, this.sel
1f00: 65 63 74 65 64 53 6c 69 64 65 72 29 3b 0a 20 20 ectedSlider);.
1f10: 20 20 20 20 20 20 20 20 6c 65 74 20 68 69 67 68 let high
1f20: 20 3d 20 4d 61 74 68 2e 6d 61 78 28 74 68 69 73 = Math.max(this
1f30: 2e 70 72 65 76 69 6f 75 73 53 6c 69 64 65 72 2c .previousSlider,
1f40: 20 74 68 69 73 2e 73 65 6c 65 63 74 65 64 53 6c this.selectedSl
1f50: 69 64 65 72 29 3b 0a 20 20 20 20 20 20 20 20 20 ider);.
1f60: 20 6c 65 74 20 6c 6f 77 56 61 6c 75 65 20 3d 20 let lowValue =
1f70: 74 68 69 73 2e 76 61 6c 75 65 73 5b 6c 6f 77 5d this.values[low]
1f80: 3b 0a 20 20 20 20 20 20 20 20 20 20 6c 65 74 20 ;. let
1f90: 68 69 67 68 56 61 6c 75 65 20 3d 20 74 68 69 73 highValue = this
1fa0: 2e 76 61 6c 75 65 73 5b 68 69 67 68 5d 3b 0a 20 .values[high];.
1fb0: 20 20 20 20 20 20 20 20 20 66 6f 72 20 28 6c 65 for (le
1fc0: 74 20 69 20 3d 20 6c 6f 77 3b 20 69 20 3c 20 68 t i = low; i < h
1fd0: 69 67 68 3b 20 69 2b 2b 29 20 7b 0a 20 20 20 20 igh; i++) {.
1fe0: 20 20 20 20 20 20 20 20 74 68 69 73 2e 76 61 6c this.val
1ff0: 75 65 73 5b 69 5d 20 3d 20 6d 61 74 68 2e 69 6e ues[i] = math.in
2000: 74 65 72 70 28 0a 20 20 20 20 20 20 20 20 20 20 terp(.
2010: 20 20 20 20 28 69 20 2d 20 6c 6f 77 29 20 2f 20 (i - low) /
2020: 64 69 73 74 61 6e 63 65 2c 0a 20 20 20 20 20 20 distance,.
2030: 20 20 20 20 20 20 20 20 6c 6f 77 56 61 6c 75 65 lowValue
2040: 2c 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 ,.
2050: 68 69 67 68 56 61 6c 75 65 0a 20 20 20 20 20 20 highValue.
2060: 20 20 20 20 20 20 29 3b 0a 20 20 20 20 20 20 20 );.
2070: 20 20 20 20 20 74 68 69 73 2e 76 61 6c 75 65 73 this.values
2080: 5b 69 5d 20 3d 20 74 68 69 73 2e 61 64 6a 75 73 [i] = this.adjus
2090: 74 56 61 6c 75 65 54 6f 53 74 65 70 28 74 68 69 tValueToStep(thi
20a0: 73 2e 76 61 6c 75 65 73 5b 69 5d 29 3b 0a 20 20 s.values[i]);.
20b0: 20 20 20 20 20 20 20 20 7d 0a 20 20 20 20 20 20 }.
20c0: 20 20 7d 0a 20 20 20 20 20 20 7d 0a 0a 20 20 20 }. }..
20d0: 20 20 20 69 66 20 28 74 68 69 73 2e 73 6d 6f 6f if (this.smoo
20e0: 74 68 69 6e 67 20 3e 20 30 29 20 7b 0a 20 20 20 thing > 0) {.
20f0: 20 20 20 20 20 66 6f 72 20 28 76 61 72 20 69 20 for (var i
2100: 3d 20 31 3b 20 69 20 3c 3d 20 74 68 69 73 2e 73 = 1; i <= this.s
2110: 6d 6f 6f 74 68 69 6e 67 3b 20 69 2b 2b 29 20 7b moothing; i++) {
2120: 0a 20 20 20 20 20 20 20 20 20 20 6c 65 74 20 64 . let d
2130: 6f 77 6e 43 65 6e 74 65 72 20 3d 20 74 68 69 73 ownCenter = this
2140: 2e 73 65 6c 65 63 74 65 64 53 6c 69 64 65 72 20 .selectedSlider
2150: 2d 20 69 3b 0a 20 20 20 20 20 20 20 20 20 20 6c - i;. l
2160: 65 74 20 75 70 43 65 6e 74 65 72 20 3d 20 74 68 et upCenter = th
2170: 69 73 2e 73 65 6c 65 63 74 65 64 53 6c 69 64 65 is.selectedSlide
2180: 72 20 2b 20 69 3b 0a 0a 20 20 20 20 20 20 20 20 r + i;..
2190: 20 20 69 66 20 28 64 6f 77 6e 43 65 6e 74 65 72 if (downCenter
21a0: 20 3e 3d 20 31 29 20 7b 0a 20 20 20 20 20 20 20 >= 1) {.
21b0: 20 20 20 20 20 6c 65 74 20 64 6f 77 6e 4c 6f 77 let downLow
21c0: 65 72 4e 65 69 67 68 62 6f 72 20 3d 20 64 6f 77 erNeighbor = dow
21d0: 6e 43 65 6e 74 65 72 20 2d 20 31 20 3e 3d 20 30 nCenter - 1 >= 0
21e0: 20 3f 20 64 6f 77 6e 43 65 6e 74 65 72 20 2d 20 ? downCenter -
21f0: 31 20 3a 20 30 3b 0a 20 20 20 20 20 20 20 20 20 1 : 0;.
2200: 20 20 20 6c 65 74 20 64 6f 77 6e 55 70 70 65 72 let downUpper
2210: 4e 65 69 67 68 62 6f 72 20 3d 20 64 6f 77 6e 43 Neighbor = downC
2220: 65 6e 74 65 72 20 2b 20 31 3b 0a 20 20 20 20 20 enter + 1;.
2230: 20 20 20 20 20 20 20 74 68 69 73 2e 76 61 6c 75 this.valu
2240: 65 73 5b 64 6f 77 6e 43 65 6e 74 65 72 5d 20 3d es[downCenter] =
2250: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 28 . (
2260: 74 68 69 73 2e 76 61 6c 75 65 73 5b 64 6f 77 6e this.values[down
2270: 4c 6f 77 65 72 4e 65 69 67 68 62 6f 72 5d 20 2b LowerNeighbor] +
2280: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 .
2290: 20 74 68 69 73 2e 76 61 6c 75 65 73 5b 64 6f 77 this.values[dow
22a0: 6e 55 70 70 65 72 4e 65 69 67 68 62 6f 72 5d 29 nUpperNeighbor])
22b0: 20 2f 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 /.
22c0: 20 32 3b 0a 20 20 20 20 20 20 20 20 20 20 20 20 2;.
22d0: 74 68 69 73 2e 76 61 6c 75 65 73 5b 64 6f 77 6e this.values[down
22e0: 43 65 6e 74 65 72 5d 20 3d 20 74 68 69 73 2e 61 Center] = this.a
22f0: 64 6a 75 73 74 56 61 6c 75 65 54 6f 53 74 65 70 djustValueToStep
2300: 28 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 (.
2310: 74 68 69 73 2e 76 61 6c 75 65 73 5b 64 6f 77 6e this.values[down
2320: 43 65 6e 74 65 72 5d 0a 20 20 20 20 20 20 20 20 Center].
2330: 20 20 20 20 29 3b 0a 20 20 20 20 20 20 20 20 20 );.
2340: 20 7d 0a 0a 20 20 20 20 20 20 20 20 20 20 69 66 }.. if
2350: 20 28 75 70 43 65 6e 74 65 72 20 3c 20 74 68 69 (upCenter < thi
2360: 73 2e 76 61 6c 75 65 73 2e 6c 65 6e 67 74 68 20 s.values.length
2370: 2d 20 31 29 20 7b 0a 20 20 20 20 20 20 20 20 20 - 1) {.
2380: 20 20 20 6c 65 74 20 75 70 4c 6f 77 65 72 4e 65 let upLowerNe
2390: 69 67 68 62 6f 72 20 3d 20 75 70 43 65 6e 74 65 ighbor = upCente
23a0: 72 20 2d 20 31 3b 0a 20 20 20 20 20 20 20 20 20 r - 1;.
23b0: 20 20 20 6c 65 74 20 75 70 55 70 70 65 72 4e 65 let upUpperNe
23c0: 69 67 68 62 6f 72 20 3d 20 75 70 43 65 6e 74 65 ighbor = upCente
23d0: 72 20 2b 20 31 20 3c 20 74 68 69 73 2e 76 61 6c r + 1 < this.val
23e0: 75 65 73 2e 6c 65 6e 67 74 68 20 3f 20 75 70 43 ues.length ? upC
23f0: 65 6e 74 65 72 20 2b 20 31 20 3a 20 74 68 69 73 enter + 1 : this
2400: 2e 76 61 6c 75 65 73 2e 6c 65 6e 67 74 68 20 2d .values.length -
2410: 20 31 3b 0a 20 20 20 20 20 20 20 20 20 20 20 20 1;.
2420: 74 68 69 73 2e 76 61 6c 75 65 73 5b 75 70 43 65 this.values[upCe
2430: 6e 74 65 72 5d 20 3d 0a 20 20 20 20 20 20 20 20 nter] =.
2440: 20 20 20 20 20 20 28 74 68 69 73 2e 76 61 6c 75 (this.valu
2450: 65 73 5b 75 70 4c 6f 77 65 72 4e 65 69 67 68 62 es[upLowerNeighb
2460: 6f 72 5d 20 2b 20 74 68 69 73 2e 76 61 6c 75 65 or] + this.value
2470: 73 5b 75 70 55 70 70 65 72 4e 65 69 67 68 62 6f s[upUpperNeighbo
2480: 72 5d 29 20 2f 20 32 3b 0a 20 20 20 20 20 20 20 r]) / 2;.
2490: 20 20 20 20 20 74 68 69 73 2e 76 61 6c 75 65 73 this.values
24a0: 5b 75 70 43 65 6e 74 65 72 5d 20 3d 20 74 68 69 [upCenter] = thi
24b0: 73 2e 61 64 6a 75 73 74 56 61 6c 75 65 54 6f 53 s.adjustValueToS
24c0: 74 65 70 28 0a 20 20 20 20 20 20 20 20 20 20 20 tep(.
24d0: 20 20 20 74 68 69 73 2e 76 61 6c 75 65 73 5b 75 this.values[u
24e0: 70 43 65 6e 74 65 72 5d 0a 20 20 20 20 20 20 20 pCenter].
24f0: 20 20 20 20 20 29 3b 0a 20 20 20 20 20 20 20 20 );.
2500: 20 20 7d 0a 20 20 20 20 20 20 20 20 7d 0a 20 20 }. }.
2510: 20 20 20 20 7d 0a 0a 20 20 20 20 20 20 74 68 69 }.. thi
2520: 73 2e 70 72 65 76 69 6f 75 73 53 6c 69 64 65 72 s.previousSlider
2530: 20 3d 20 74 68 69 73 2e 73 65 6c 65 63 74 65 64 = this.selected
2540: 53 6c 69 64 65 72 3b 0a 0a 20 20 20 20 20 20 74 Slider;.. t
2550: 68 69 73 2e 65 6d 69 74 28 27 63 68 61 6e 67 65 his.emit('change
2560: 27 2c 20 74 68 69 73 2e 76 61 6c 75 65 73 29 3b ', this.values);
2570: 0a 20 20 20 20 20 20 74 68 69 73 2e 72 65 6e 64 . this.rend
2580: 65 72 28 29 3b 0a 20 20 20 20 7d 0a 20 20 7d 0a er();. }. }.
2590: 0a 20 20 2f 2f 20 77 6f 75 6c 64 20 62 65 20 61 . // would be a
25a0: 20 63 6f 6f 6c 20 41 50 49 20 63 61 6c 6c 20 74 cool API call t
25b0: 6f 20 68 61 76 65 20 66 6f 72 20 6c 61 74 65 72 o have for later
25c0: 2e 2e 2e 0a 20 20 73 63 61 6e 28 29 20 7b 7d 0a .... scan() {}.
25d0: 0a 20 20 75 70 64 61 74 65 28 69 6e 64 65 78 2c . update(index,
25e0: 20 76 61 6c 75 65 29 20 7b 0a 20 20 20 20 74 68 value) {. th
25f0: 69 73 2e 76 61 6c 75 65 73 5b 69 6e 64 65 78 5d is.values[index]
2600: 20 3d 20 74 68 69 73 2e 61 64 6a 75 73 74 56 61 = this.adjustVa
2610: 6c 75 65 54 6f 53 74 65 70 28 76 61 6c 75 65 29 lueToStep(value)
2620: 3b 0a 20 20 20 20 74 68 69 73 2e 65 6d 69 74 28 ;. this.emit(
2630: 27 63 68 61 6e 67 65 27 2c 20 7b 0a 20 20 20 20 'change', {.
2640: 20 20 69 6e 64 65 78 3a 20 69 6e 64 65 78 2c 0a index: index,.
2650: 20 20 20 20 20 20 76 61 6c 75 65 3a 20 76 61 6c value: val
2660: 75 65 0a 20 20 20 20 7d 29 3b 0a 20 20 7d 0a 0a ue. });. }..
2670: 20 20 2f 2a 2a 0a 20 20 47 65 74 20 74 68 65 20 /**. Get the
2680: 6e 75 6d 62 65 72 20 6f 66 20 73 6c 69 64 65 72 number of slider
2690: 73 0a 20 20 40 74 79 70 65 20 7b 4e 75 6d 62 65 s. @type {Numbe
26a0: 72 7d 0a 20 20 2a 2f 0a 20 20 67 65 74 20 6e 75 r}. */. get nu
26b0: 6d 62 65 72 4f 66 53 6c 69 64 65 72 73 28 29 20 mberOfSliders()
26c0: 7b 0a 20 20 20 20 72 65 74 75 72 6e 20 74 68 69 {. return thi
26d0: 73 2e 76 61 6c 75 65 73 2e 6c 65 6e 67 74 68 3b s.values.length;
26e0: 0a 20 20 7d 0a 0a 20 20 2f 2a 2a 0a 20 20 4c 6f . }.. /**. Lo
26f0: 77 65 72 20 6c 69 6d 69 74 20 6f 66 20 74 68 65 wer limit of the
2700: 20 6d 75 6c 74 69 73 6c 69 64 65 72 27 73 20 6f multislider's o
2710: 75 74 70 75 74 20 72 61 6e 67 65 0a 20 20 40 74 utput range. @t
2720: 79 70 65 20 7b 6e 75 6d 62 65 72 7d 0a 20 20 40 ype {number}. @
2730: 65 78 61 6d 70 6c 65 20 6d 75 6c 74 69 73 6c 69 example multisli
2740: 64 65 72 2e 6d 69 6e 20 3d 20 31 30 30 30 3b 0a der.min = 1000;.
2750: 20 20 2a 2f 0a 20 20 67 65 74 20 6d 69 6e 28 29 */. get min()
2760: 20 7b 0a 20 20 20 20 72 65 74 75 72 6e 20 74 68 {. return th
2770: 69 73 2e 5f 6d 69 6e 3b 0a 20 20 7d 0a 20 20 73 is._min;. }. s
2780: 65 74 20 6d 69 6e 28 76 29 20 7b 0a 20 20 20 20 et min(v) {.
2790: 74 68 69 73 2e 5f 6d 69 6e 20 3d 20 76 3b 0a 20 this._min = v;.
27a0: 20 20 20 74 68 69 73 2e 61 64 6a 75 73 74 41 6c this.adjustAl
27b0: 6c 56 61 6c 75 65 73 28 29 3b 0a 20 20 20 20 74 lValues();. t
27c0: 68 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a 20 20 his.render();.
27d0: 7d 0a 0a 20 20 2f 2a 2a 0a 20 20 55 70 70 65 72 }.. /**. Upper
27e0: 20 6c 69 6d 69 74 20 6f 66 20 74 68 65 20 6d 75 limit of the mu
27f0: 6c 74 69 73 6c 69 64 65 72 27 73 20 6f 75 74 70 ltislider's outp
2800: 75 74 20 72 61 6e 67 65 0a 20 20 40 74 79 70 65 ut range. @type
2810: 20 7b 6e 75 6d 62 65 72 7d 0a 20 20 40 65 78 61 {number}. @exa
2820: 6d 70 6c 65 20 6d 75 6c 74 69 73 6c 69 64 65 72 mple multislider
2830: 2e 6d 61 78 20 3d 20 31 30 30 30 3b 0a 20 20 2a .max = 1000;. *
2840: 2f 0a 20 20 67 65 74 20 6d 61 78 28 29 20 7b 0a /. get max() {.
2850: 20 20 20 20 72 65 74 75 72 6e 20 74 68 69 73 2e return this.
2860: 5f 6d 61 78 3b 0a 20 20 7d 0a 20 20 73 65 74 20 _max;. }. set
2870: 6d 61 78 28 76 29 20 7b 0a 20 20 20 20 74 68 69 max(v) {. thi
2880: 73 2e 5f 6d 61 78 20 3d 20 76 3b 0a 20 20 20 20 s._max = v;.
2890: 74 68 69 73 2e 61 64 6a 75 73 74 41 6c 6c 56 61 this.adjustAllVa
28a0: 6c 75 65 73 28 29 3b 0a 20 20 20 20 74 68 69 73 lues();. this
28b0: 2e 72 65 6e 64 65 72 28 29 3b 0a 20 20 7d 0a 0a .render();. }..
28c0: 20 20 2f 2a 2a 0a 20 20 54 68 65 20 69 6e 63 72 /**. The incr
28d0: 65 6d 65 6e 74 20 74 68 61 74 20 74 68 65 20 6d ement that the m
28e0: 75 6c 74 69 73 6c 69 64 65 72 27 73 20 76 61 6c ultislider's val
28f0: 75 65 20 63 68 61 6e 67 65 73 20 62 79 2e 0a 20 ue changes by..
2900: 20 40 74 79 70 65 20 7b 6e 75 6d 62 65 72 7d 0a @type {number}.
2910: 20 20 40 65 78 61 6d 70 6c 65 20 6d 75 6c 74 69 @example multi
2920: 73 6c 69 64 65 72 2e 73 74 65 70 20 3d 20 35 3b slider.step = 5;
2930: 0a 20 20 2a 2f 0a 20 20 67 65 74 20 73 74 65 70 . */. get step
2940: 28 29 20 7b 0a 20 20 20 20 72 65 74 75 72 6e 20 () {. return
2950: 74 68 69 73 2e 5f 73 74 65 70 3b 0a 20 20 7d 0a this._step;. }.
2960: 20 20 73 65 74 20 73 74 65 70 28 76 29 20 7b 0a set step(v) {.
2970: 20 20 20 20 74 68 69 73 2e 5f 73 74 65 70 20 3d this._step =
2980: 20 76 3b 0a 20 20 20 20 74 68 69 73 2e 61 64 6a v;. this.adj
2990: 75 73 74 41 6c 6c 56 61 6c 75 65 73 28 29 3b 0a ustAllValues();.
29a0: 20 20 20 20 74 68 69 73 2e 72 65 6e 64 65 72 28 this.render(
29b0: 29 3b 0a 20 20 7d 0a 0a 20 20 2f 2a 2a 0a 20 20 );. }.. /**.
29c0: 53 65 74 20 74 68 65 20 76 61 6c 75 65 20 6f 66 Set the value of
29d0: 20 61 6e 20 69 6e 64 69 76 69 64 75 61 6c 20 73 an individual s
29e0: 6c 69 64 65 72 0a 20 20 40 70 61 72 61 6d 20 69 lider. @param i
29f0: 6e 64 65 78 20 7b 6e 75 6d 62 65 72 7d 20 53 6c ndex {number} Sl
2a00: 69 64 65 72 20 69 6e 64 65 78 0a 20 20 40 70 61 ider index. @pa
2a10: 72 61 6d 20 76 61 6c 75 65 20 7b 6e 75 6d 62 65 ram value {numbe
2a20: 72 7d 20 4e 65 77 20 73 6c 69 64 65 72 20 76 61 r} New slider va
2a30: 6c 75 65 0a 20 20 40 65 78 61 6d 70 6c 65 0a 20 lue. @example.
2a40: 20 2f 2f 20 53 65 74 20 74 68 65 20 66 69 72 73 // Set the firs
2a50: 74 20 73 6c 69 64 65 72 20 74 6f 20 76 61 6c 75 t slider to valu
2a60: 65 20 30 2e 35 0a 20 20 6d 75 6c 74 69 73 6c 69 e 0.5. multisli
2a70: 64 65 72 2e 73 65 74 53 6c 69 64 65 72 28 30 2c der.setSlider(0,
2a80: 30 2e 35 29 0a 20 20 2a 2f 0a 20 20 73 65 74 53 0.5). */. setS
2a90: 6c 69 64 65 72 28 69 6e 64 65 78 2c 20 76 61 6c lider(index, val
2aa0: 75 65 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 76 ue) {. this.v
2ab0: 61 6c 75 65 73 5b 69 6e 64 65 78 5d 20 3d 20 74 alues[index] = t
2ac0: 68 69 73 2e 61 64 6a 75 73 74 56 61 6c 75 65 54 his.adjustValueT
2ad0: 6f 53 74 65 70 28 76 61 6c 75 65 29 3b 0a 20 20 oStep(value);.
2ae0: 20 20 74 68 69 73 2e 76 61 6c 75 65 73 5b 69 6e this.values[in
2af0: 64 65 78 5d 20 3d 20 6d 61 74 68 2e 63 6c 69 70 dex] = math.clip
2b00: 28 74 68 69 73 2e 76 61 6c 75 65 73 5b 69 6e 64 (this.values[ind
2b10: 65 78 5d 2c 20 74 68 69 73 2e 5f 6d 69 6e 2c 20 ex], this._min,
2b20: 74 68 69 73 2e 5f 6d 61 78 29 3b 0a 20 20 20 20 this._max);.
2b30: 74 68 69 73 2e 65 6d 69 74 28 27 63 68 61 6e 67 this.emit('chang
2b40: 65 27 2c 20 7b 0a 20 20 20 20 20 20 69 6e 64 65 e', {. inde
2b50: 78 3a 20 69 6e 64 65 78 2c 0a 20 20 20 20 20 20 x: index,.
2b60: 76 61 6c 75 65 3a 20 76 61 6c 75 65 0a 20 20 20 value: value.
2b70: 20 7d 29 3b 0a 20 20 7d 0a 0a 20 20 2f 2a 2a 0a });. }.. /**.
2b80: 20 20 53 65 74 20 74 68 65 20 76 61 6c 75 65 20 Set the value
2b90: 6f 66 20 61 6c 6c 20 73 6c 69 64 65 72 73 20 61 of all sliders a
2ba0: 74 20 6f 6e 63 65 2e 20 49 66 20 74 68 65 20 73 t once. If the s
2bb0: 69 7a 65 20 6f 66 20 74 68 65 20 69 6e 70 75 74 ize of the input
2bc0: 20 61 72 72 61 79 20 64 6f 65 73 20 6e 6f 74 20 array does not
2bd0: 6d 61 74 63 68 20 74 68 65 20 63 75 72 72 65 6e match the curren
2be0: 74 20 6e 75 6d 62 65 72 20 6f 66 20 73 6c 69 64 t number of slid
2bf0: 65 72 73 2c 20 74 68 65 20 76 61 6c 75 65 20 61 ers, the value a
2c00: 72 72 61 79 20 77 69 6c 6c 20 72 65 70 65 61 74 rray will repeat
2c10: 20 75 6e 74 69 6c 20 61 6c 6c 20 73 6c 69 64 65 until all slide
2c20: 72 73 20 68 61 76 65 20 62 65 65 6e 20 73 65 74 rs have been set
2c30: 2e 20 49 2e 65 2e 20 61 6e 20 69 6e 70 75 74 20 . I.e. an input
2c40: 61 72 72 61 79 20 6f 66 20 6c 65 6e 67 74 68 20 array of length
2c50: 31 20 77 69 6c 6c 20 73 65 74 20 61 6c 6c 20 73 1 will set all s
2c60: 6c 69 64 65 72 73 20 74 6f 20 74 68 61 74 20 76 liders to that v
2c70: 61 6c 75 65 2e 0a 20 20 40 70 61 72 61 6d 20 76 alue.. @param v
2c80: 61 6c 75 65 73 20 7b 41 72 72 61 79 7d 20 41 6c alues {Array} Al
2c90: 6c 20 73 6c 69 64 65 72 20 76 61 6c 75 65 73 0a l slider values.
2ca0: 20 20 40 65 78 61 6d 70 6c 65 0a 20 20 6d 75 6c @example. mul
2cb0: 74 69 73 6c 69 64 65 72 2e 73 65 74 41 6c 6c 53 tislider.setAllS
2cc0: 6c 69 64 65 72 73 28 5b 30 2e 32 2c 30 2e 33 2c liders([0.2,0.3,
2cd0: 30 2e 34 2c 30 2e 35 2c 30 2e 36 5d 29 0a 20 20 0.4,0.5,0.6]).
2ce0: 2a 2f 0a 20 20 73 65 74 41 6c 6c 53 6c 69 64 65 */. setAllSlide
2cf0: 72 73 28 76 61 6c 75 65 73 29 20 7b 0a 20 20 20 rs(values) {.
2d00: 20 6c 65 74 20 70 72 65 76 69 6f 75 73 4c 65 6e let previousLen
2d10: 67 74 68 20 3d 20 74 68 69 73 2e 76 61 6c 75 65 gth = this.value
2d20: 73 2e 6c 65 6e 67 74 68 3b 0a 20 20 20 20 6c 65 s.length;. le
2d30: 74 20 6e 65 77 4c 65 6e 67 74 68 20 3d 20 76 61 t newLength = va
2d40: 6c 75 65 73 2e 6c 65 6e 67 74 68 3b 0a 20 20 20 lues.length;.
2d50: 20 74 68 69 73 2e 76 61 6c 75 65 73 20 3d 20 76 this.values = v
2d60: 61 6c 75 65 73 3b 0a 20 20 20 20 74 68 69 73 2e alues;. this.
2d70: 61 64 6a 75 73 74 41 6c 6c 56 61 6c 75 65 73 28 adjustAllValues(
2d80: 29 3b 0a 20 20 20 20 69 66 20 28 70 72 65 76 69 );. if (previ
2d90: 6f 75 73 4c 65 6e 67 74 68 20 21 3d 20 6e 65 77 ousLength != new
2da0: 4c 65 6e 67 74 68 29 20 7b 0a 20 20 20 20 20 20 Length) {.
2db0: 74 68 69 73 2e 65 6d 70 74 79 28 29 3b 0a 20 20 this.empty();.
2dc0: 20 20 20 20 74 68 69 73 2e 62 75 69 6c 64 49 6e this.buildIn
2dd0: 74 65 72 66 61 63 65 28 29 3b 0a 20 20 20 20 20 terface();.
2de0: 20 74 68 69 73 2e 63 6f 6c 6f 72 49 6e 74 65 72 this.colorInter
2df0: 66 61 63 65 28 29 3b 0a 20 20 20 20 7d 0a 20 20 face();. }.
2e00: 20 20 74 68 69 73 2e 73 69 7a 65 49 6e 74 65 72 this.sizeInter
2e10: 66 61 63 65 28 29 3b 0a 20 20 7d 0a 7d 0a face();. }.}.