0000: 27 75 73 65 20 73 74 72 69 63 74 27 3b 0a 0a 6c 'use strict';..l
0010: 65 74 20 73 76 67 20 3d 20 72 65 71 75 69 72 65 et svg = require
0020: 28 27 2e 2e 2f 75 74 69 6c 2f 73 76 67 27 29 3b ('../util/svg');
0030: 0a 6c 65 74 20 49 6e 74 65 72 66 61 63 65 20 3d .let Interface =
0040: 20 72 65 71 75 69 72 65 28 27 2e 2e 2f 63 6f 72 require('../cor
0050: 65 2f 69 6e 74 65 72 66 61 63 65 27 29 3b 0a 6c e/interface');.l
0060: 65 74 20 53 74 65 70 20 3d 20 72 65 71 75 69 72 et Step = requir
0070: 65 28 27 2e 2e 2f 6d 6f 64 65 6c 73 2f 73 74 65 e('../models/ste
0080: 70 27 29 3b 0a 69 6d 70 6f 72 74 20 2a 20 61 73 p');.import * as
0090: 20 49 6e 74 65 72 61 63 74 69 6f 6e 20 66 72 6f Interaction fro
00a0: 6d 20 27 2e 2e 2f 75 74 69 6c 2f 69 6e 74 65 72 m '../util/inter
00b0: 61 63 74 69 6f 6e 27 3b 0a 0a 65 78 70 6f 72 74 action';..export
00c0: 20 64 65 66 61 75 6c 74 20 63 6c 61 73 73 20 53 default class S
00d0: 6c 69 64 65 72 54 65 6d 70 6c 61 74 65 20 65 78 liderTemplate ex
00e0: 74 65 6e 64 73 20 49 6e 74 65 72 66 61 63 65 20 tends Interface
00f0: 7b 0a 0a 20 20 63 6f 6e 73 74 72 75 63 74 6f 72 {.. constructor
0100: 28 61 72 67 73 2c 6f 70 74 69 6f 6e 73 2c 64 65 (args,options,de
0110: 66 61 75 6c 74 73 29 20 7b 0a 0a 20 20 20 20 73 faults) {.. s
0120: 75 70 65 72 28 61 72 67 73 2c 6f 70 74 69 6f 6e uper(args,option
0130: 73 2c 64 65 66 61 75 6c 74 73 29 3b 0a 0a 20 20 s,defaults);..
0140: 20 20 74 68 69 73 2e 6f 72 69 65 6e 74 61 74 69 this.orientati
0150: 6f 6e 20 3d 20 74 68 69 73 2e 73 65 74 74 69 6e on = this.settin
0160: 67 73 2e 6f 72 69 65 6e 74 61 74 69 6f 6e 3b 0a gs.orientation;.
0170: 0a 20 20 2f 2f 20 20 74 68 69 73 2e 6d 6f 64 65 . // this.mode
0180: 20 3d 20 74 68 69 73 2e 73 65 74 74 69 6e 67 73 = this.settings
0190: 2e 6d 6f 64 65 3b 0a 0a 20 20 20 20 74 68 69 73 .mode;.. this
01a0: 2e 68 61 73 4b 6e 6f 62 20 3d 20 74 68 69 73 2e .hasKnob = this.
01b0: 73 65 74 74 69 6e 67 73 2e 68 61 73 4b 6e 6f 62 settings.hasKnob
01c0: 3b 0a 0a 20 20 20 20 2f 2f 20 74 68 69 73 2e 73 ;.. // this.s
01d0: 74 65 70 20 73 68 6f 75 6c 64 20 65 76 65 6e 74 tep should event
01e0: 75 61 6c 6c 79 20 62 65 20 67 65 74 2f 73 65 74 ually be get/set
01f0: 0a 20 20 20 20 2f 2f 20 75 70 64 61 74 69 6e 67 . // updating
0200: 20 69 74 20 77 69 6c 6c 20 75 70 64 61 74 65 20 it will update
0210: 74 68 65 20 5f 76 61 6c 75 65 20 73 74 65 70 20 the _value step
0220: 6d 6f 64 65 6c 0a 20 20 2f 2f 20 20 74 68 69 73 model. // this
0230: 2e 73 74 65 70 20 3d 20 74 68 69 73 2e 73 65 74 .step = this.set
0240: 74 69 6e 67 73 2e 73 74 65 70 3b 20 2f 2f 20 66 tings.step; // f
0250: 6c 6f 61 74 0a 0a 20 20 20 20 74 68 69 73 2e 5f loat.. this._
0260: 76 61 6c 75 65 20 3d 20 6e 65 77 20 53 74 65 70 value = new Step
0270: 28 74 68 69 73 2e 73 65 74 74 69 6e 67 73 2e 73 (this.settings.s
0280: 63 61 6c 65 5b 30 5d 2c 20 74 68 69 73 2e 73 65 cale[0], this.se
0290: 74 74 69 6e 67 73 2e 73 63 61 6c 65 5b 31 5d 2c ttings.scale[1],
02a0: 20 74 68 69 73 2e 73 65 74 74 69 6e 67 73 2e 73 this.settings.s
02b0: 74 65 70 2c 20 74 68 69 73 2e 73 65 74 74 69 6e tep, this.settin
02c0: 67 73 2e 76 61 6c 75 65 29 3b 0a 0a 20 20 20 20 gs.value);..
02d0: 74 68 69 73 2e 69 6e 69 74 28 29 3b 0a 0a 20 20 this.init();..
02e0: 20 20 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e 20 this.position
02f0: 3d 20 6e 65 77 20 49 6e 74 65 72 61 63 74 69 6f = new Interactio
0300: 6e 2e 48 61 6e 64 6c 65 28 74 68 69 73 2e 73 65 n.Handle(this.se
0310: 74 74 69 6e 67 73 2e 6d 6f 64 65 2c 74 68 69 73 ttings.mode,this
0320: 2e 6f 72 69 65 6e 74 61 74 69 6f 6e 2c 5b 30 2c .orientation,[0,
0330: 74 68 69 73 2e 77 69 64 74 68 5d 2c 5b 74 68 69 this.width],[thi
0340: 73 2e 68 65 69 67 68 74 2c 30 5d 29 3b 0a 20 20 s.height,0]);.
0350: 20 20 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e 2e this.position.
0360: 76 61 6c 75 65 20 3d 20 74 68 69 73 2e 5f 76 61 value = this._va
0370: 6c 75 65 2e 6e 6f 72 6d 61 6c 69 7a 65 64 3b 0a lue.normalized;.
0380: 0a 20 20 20 20 74 68 69 73 2e 76 61 6c 75 65 20 . this.value
0390: 3d 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e 76 61 = this._value.va
03a0: 6c 75 65 3b 0a 0a 20 20 20 20 74 68 69 73 2e 65 lue;.. this.e
03b0: 6d 69 74 28 27 63 68 61 6e 67 65 27 2c 74 68 69 mit('change',thi
03c0: 73 2e 76 61 6c 75 65 29 3b 0a 0a 20 20 7d 0a 0a s.value);.. }..
03d0: 20 20 62 75 69 6c 64 49 6e 74 65 72 66 61 63 65 buildInterface
03e0: 28 29 20 7b 0a 0a 20 20 20 20 74 68 69 73 2e 62 () {.. this.b
03f0: 61 72 20 3d 20 73 76 67 2e 63 72 65 61 74 65 28 ar = svg.create(
0400: 27 72 65 63 74 27 29 3b 0a 20 20 20 20 74 68 69 'rect');. thi
0410: 73 2e 66 69 6c 6c 62 61 72 20 3d 20 73 76 67 2e s.fillbar = svg.
0420: 63 72 65 61 74 65 28 27 72 65 63 74 27 29 3b 0a create('rect');.
0430: 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 20 3d 20 this.knob =
0440: 73 76 67 2e 63 72 65 61 74 65 28 27 63 69 72 63 svg.create('circ
0450: 6c 65 27 29 3b 0a 0a 20 20 20 20 74 68 69 73 2e le');.. this.
0460: 65 6c 65 6d 65 6e 74 2e 61 70 70 65 6e 64 43 68 element.appendCh
0470: 69 6c 64 28 74 68 69 73 2e 62 61 72 29 3b 0a 20 ild(this.bar);.
0480: 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e this.element.
0490: 61 70 70 65 6e 64 43 68 69 6c 64 28 74 68 69 73 appendChild(this
04a0: 2e 66 69 6c 6c 62 61 72 29 3b 0a 20 20 20 20 74 .fillbar);. t
04b0: 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 61 70 70 65 his.element.appe
04c0: 6e 64 43 68 69 6c 64 28 74 68 69 73 2e 6b 6e 6f ndChild(this.kno
04d0: 62 29 3b 0a 0a 20 20 20 20 74 68 69 73 2e 73 69 b);.. this.si
04e0: 7a 65 49 6e 74 65 72 66 61 63 65 28 29 3b 0a 0a zeInterface();..
04f0: 0a 0a 20 20 7d 0a 0a 20 20 73 69 7a 65 49 6e 74 .. }.. sizeInt
0500: 65 72 66 61 63 65 28 29 20 7b 0a 0a 0a 20 20 20 erface() {...
0510: 20 69 66 20 28 21 74 68 69 73 2e 73 65 74 74 69 if (!this.setti
0520: 6e 67 73 2e 6f 72 69 65 6e 74 61 74 69 6f 6e 29 ngs.orientation)
0530: 20 7b 0a 20 20 20 20 20 20 69 66 20 28 74 68 69 {. if (thi
0540: 73 2e 77 69 64 74 68 20 3c 20 74 68 69 73 2e 68 s.width < this.h
0550: 65 69 67 68 74 29 20 7b 0a 20 20 20 20 20 20 20 eight) {.
0560: 20 74 68 69 73 2e 6f 72 69 65 6e 74 61 74 69 6f this.orientatio
0570: 6e 20 3d 20 27 76 65 72 74 69 63 61 6c 27 3b 0a n = 'vertical';.
0580: 20 20 20 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20 } else {.
0590: 20 20 20 20 20 20 20 74 68 69 73 2e 6f 72 69 65 this.orie
05a0: 6e 74 61 74 69 6f 6e 20 3d 20 27 68 6f 72 69 7a ntation = 'horiz
05b0: 6f 6e 74 61 6c 27 3b 0a 20 20 20 20 20 20 7d 0a ontal';. }.
05c0: 20 20 20 20 7d 0a 0a 20 20 20 20 6c 65 74 20 78 }.. let x
05d0: 2c 20 79 2c 20 77 2c 20 68 2c 20 62 61 72 4f 66 , y, w, h, barOf
05e0: 66 73 65 74 2c 20 63 6f 72 6e 65 72 52 61 64 69 fset, cornerRadi
05f0: 75 73 3b 0a 20 20 20 20 74 68 69 73 2e 6b 6e 6f us;. this.kno
0600: 62 44 61 74 61 20 3d 20 7b 0a 20 20 20 20 20 20 bData = {.
0610: 6c 65 76 65 6c 3a 20 30 2c 0a 20 20 20 20 20 20 level: 0,.
0620: 72 3a 20 30 0a 20 20 20 20 7d 3b 0a 0a 20 20 20 r: 0. };..
0630: 20 69 66 20 28 74 68 69 73 2e 6f 72 69 65 6e 74 if (this.orient
0640: 61 74 69 6f 6e 20 3d 3d 3d 20 27 76 65 72 74 69 ation === 'verti
0650: 63 61 6c 27 29 20 7b 0a 20 20 20 20 20 20 74 68 cal') {. th
0660: 69 73 2e 74 68 69 63 6b 6e 65 73 73 20 3d 20 74 is.thickness = t
0670: 68 69 73 2e 77 69 64 74 68 20 2f 20 32 3b 0a 20 his.width / 2;.
0680: 20 20 20 09 78 20 3d 20 74 68 69 73 2e 77 69 64 .x = this.wid
0690: 74 68 2f 32 3b 0a 20 20 20 20 09 79 20 3d 20 30 th/2;. .y = 0
06a0: 3b 0a 20 20 20 20 09 77 20 3d 20 74 68 69 73 2e ;. .w = this.
06b0: 74 68 69 63 6b 6e 65 73 73 3b 0a 20 20 20 20 09 thickness;. .
06c0: 68 20 3d 20 74 68 69 73 2e 68 65 69 67 68 74 3b h = this.height;
06d0: 0a 20 20 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 . this.knob
06e0: 44 61 74 61 2e 72 20 3d 20 74 68 69 73 2e 74 68 Data.r = this.th
06f0: 69 63 6b 6e 65 73 73 20 2a 20 30 2e 38 3b 0a 20 ickness * 0.8;.
0700: 20 20 20 09 74 68 69 73 2e 6b 6e 6f 62 44 61 74 .this.knobDat
0710: 61 2e 6c 65 76 65 6c 20 3d 20 68 2d 74 68 69 73 a.level = h-this
0720: 2e 6e 6f 72 6d 61 6c 69 7a 65 64 2a 68 3b 0a 20 .normalized*h;.
0730: 20 20 20 20 20 62 61 72 4f 66 66 73 65 74 20 3d barOffset =
0740: 20 27 74 72 61 6e 73 6c 61 74 65 28 27 2b 74 68 'translate('+th
0750: 69 73 2e 74 68 69 63 6b 6e 65 73 73 2a 28 2d 31 is.thickness*(-1
0760: 29 2f 32 2b 27 2c 30 29 27 3b 0a 20 20 20 20 20 )/2+',0)';.
0770: 20 63 6f 72 6e 65 72 52 61 64 69 75 73 20 3d 20 cornerRadius =
0780: 77 2f 32 3b 0a 20 20 20 20 7d 20 65 6c 73 65 20 w/2;. } else
0790: 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 74 68 69 {. this.thi
07a0: 63 6b 6e 65 73 73 20 3d 20 74 68 69 73 2e 68 65 ckness = this.he
07b0: 69 67 68 74 20 2f 20 32 3b 0a 20 20 20 20 09 78 ight / 2;. .x
07c0: 20 3d 20 30 3b 0a 20 20 20 20 09 79 20 3d 20 74 = 0;. .y = t
07d0: 68 69 73 2e 68 65 69 67 68 74 2f 32 3b 0a 20 20 his.height/2;.
07e0: 20 20 09 77 20 3d 20 74 68 69 73 2e 77 69 64 74 .w = this.widt
07f0: 68 3b 0a 20 20 20 20 09 68 20 3d 20 74 68 69 73 h;. .h = this
0800: 2e 74 68 69 63 6b 6e 65 73 73 3b 0a 20 20 20 20 .thickness;.
0810: 20 20 74 68 69 73 2e 6b 6e 6f 62 44 61 74 61 2e this.knobData.
0820: 72 20 3d 20 74 68 69 73 2e 74 68 69 63 6b 6e 65 r = this.thickne
0830: 73 73 20 2a 20 30 2e 38 3b 0a 20 20 20 20 09 74 ss * 0.8;. .t
0840: 68 69 73 2e 6b 6e 6f 62 44 61 74 61 2e 6c 65 76 his.knobData.lev
0850: 65 6c 20 3d 20 74 68 69 73 2e 6e 6f 72 6d 61 6c el = this.normal
0860: 69 7a 65 64 2a 77 3b 0a 20 20 20 20 20 20 62 61 ized*w;. ba
0870: 72 4f 66 66 73 65 74 20 3d 20 27 74 72 61 6e 73 rOffset = 'trans
0880: 6c 61 74 65 28 30 2c 27 2b 74 68 69 73 2e 74 68 late(0,'+this.th
0890: 69 63 6b 6e 65 73 73 2a 28 2d 31 29 2f 32 2b 27 ickness*(-1)/2+'
08a0: 29 27 3b 0a 20 20 20 20 20 20 63 6f 72 6e 65 72 )';. corner
08b0: 52 61 64 69 75 73 20 3d 20 68 2f 32 3b 0a 20 20 Radius = h/2;.
08c0: 20 20 7d 0a 0a 20 20 20 20 74 68 69 73 2e 62 61 }.. this.ba
08d0: 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 r.setAttribute('
08e0: 78 27 2c 78 29 3b 0a 20 20 20 20 74 68 69 73 2e x',x);. this.
08f0: 62 61 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 bar.setAttribute
0900: 28 27 79 27 2c 79 29 3b 0a 20 20 20 20 74 68 69 ('y',y);. thi
0910: 73 2e 62 61 72 2e 73 65 74 41 74 74 72 69 62 75 s.bar.setAttribu
0920: 74 65 28 27 74 72 61 6e 73 66 6f 72 6d 27 2c 62 te('transform',b
0930: 61 72 4f 66 66 73 65 74 29 3b 0a 20 20 20 20 74 arOffset);. t
0940: 68 69 73 2e 62 61 72 2e 73 65 74 41 74 74 72 69 his.bar.setAttri
0950: 62 75 74 65 28 27 72 78 27 2c 63 6f 72 6e 65 72 bute('rx',corner
0960: 52 61 64 69 75 73 29 3b 20 2f 2f 20 63 6f 72 6e Radius); // corn
0970: 65 72 20 72 61 64 69 75 73 0a 20 20 20 20 74 68 er radius. th
0980: 69 73 2e 62 61 72 2e 73 65 74 41 74 74 72 69 62 is.bar.setAttrib
0990: 75 74 65 28 27 72 79 27 2c 63 6f 72 6e 65 72 52 ute('ry',cornerR
09a0: 61 64 69 75 73 29 3b 0a 20 20 20 20 74 68 69 73 adius);. this
09b0: 2e 62 61 72 2e 73 65 74 41 74 74 72 69 62 75 74 .bar.setAttribut
09c0: 65 28 27 77 69 64 74 68 27 2c 77 29 3b 0a 20 20 e('width',w);.
09d0: 20 20 74 68 69 73 2e 62 61 72 2e 73 65 74 41 74 this.bar.setAt
09e0: 74 72 69 62 75 74 65 28 27 68 65 69 67 68 74 27 tribute('height'
09f0: 2c 68 29 3b 0a 0a 20 20 20 20 69 66 20 28 74 68 ,h);.. if (th
0a00: 69 73 2e 6f 72 69 65 6e 74 61 74 69 6f 6e 20 3d is.orientation =
0a10: 3d 3d 20 27 76 65 72 74 69 63 61 6c 27 29 20 7b == 'vertical') {
0a20: 0a 20 20 20 20 20 20 74 68 69 73 2e 66 69 6c 6c . this.fill
0a30: 62 61 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 bar.setAttribute
0a40: 28 27 78 27 2c 78 29 3b 0a 20 20 20 20 20 20 74 ('x',x);. t
0a50: 68 69 73 2e 66 69 6c 6c 62 61 72 2e 73 65 74 41 his.fillbar.setA
0a60: 74 74 72 69 62 75 74 65 28 27 79 27 2c 74 68 69 ttribute('y',thi
0a70: 73 2e 6b 6e 6f 62 44 61 74 61 2e 6c 65 76 65 6c s.knobData.level
0a80: 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 66 69 );. this.fi
0a90: 6c 6c 62 61 72 2e 73 65 74 41 74 74 72 69 62 75 llbar.setAttribu
0aa0: 74 65 28 27 77 69 64 74 68 27 2c 77 29 3b 0a 20 te('width',w);.
0ab0: 20 20 20 20 20 74 68 69 73 2e 66 69 6c 6c 62 61 this.fillba
0ac0: 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 r.setAttribute('
0ad0: 68 65 69 67 68 74 27 2c 68 2d 74 68 69 73 2e 6b height',h-this.k
0ae0: 6e 6f 62 44 61 74 61 2e 6c 65 76 65 6c 29 3b 0a nobData.level);.
0af0: 20 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20 20 20 } else {.
0b00: 20 20 20 74 68 69 73 2e 66 69 6c 6c 62 61 72 2e this.fillbar.
0b10: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 78 27 setAttribute('x'
0b20: 2c 30 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e ,0);. this.
0b30: 66 69 6c 6c 62 61 72 2e 73 65 74 41 74 74 72 69 fillbar.setAttri
0b40: 62 75 74 65 28 27 79 27 2c 79 29 3b 0a 20 20 20 bute('y',y);.
0b50: 20 20 20 74 68 69 73 2e 66 69 6c 6c 62 61 72 2e this.fillbar.
0b60: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 77 69 setAttribute('wi
0b70: 64 74 68 27 2c 74 68 69 73 2e 6b 6e 6f 62 44 61 dth',this.knobDa
0b80: 74 61 2e 6c 65 76 65 6c 29 3b 0a 20 20 20 20 20 ta.level);.
0b90: 20 74 68 69 73 2e 66 69 6c 6c 62 61 72 2e 73 65 this.fillbar.se
0ba0: 74 41 74 74 72 69 62 75 74 65 28 27 68 65 69 67 tAttribute('heig
0bb0: 68 74 27 2c 68 29 3b 0a 20 20 20 20 7d 0a 20 20 ht',h);. }.
0bc0: 20 20 74 68 69 73 2e 66 69 6c 6c 62 61 72 2e 73 this.fillbar.s
0bd0: 65 74 41 74 74 72 69 62 75 74 65 28 27 74 72 61 etAttribute('tra
0be0: 6e 73 66 6f 72 6d 27 2c 62 61 72 4f 66 66 73 65 nsform',barOffse
0bf0: 74 29 3b 0a 20 20 20 20 74 68 69 73 2e 66 69 6c t);. this.fil
0c00: 6c 62 61 72 2e 73 65 74 41 74 74 72 69 62 75 74 lbar.setAttribut
0c10: 65 28 27 72 78 27 2c 63 6f 72 6e 65 72 52 61 64 e('rx',cornerRad
0c20: 69 75 73 29 3b 0a 20 20 20 20 74 68 69 73 2e 66 ius);. this.f
0c30: 69 6c 6c 62 61 72 2e 73 65 74 41 74 74 72 69 62 illbar.setAttrib
0c40: 75 74 65 28 27 72 79 27 2c 63 6f 72 6e 65 72 52 ute('ry',cornerR
0c50: 61 64 69 75 73 29 3b 0a 0a 20 20 20 20 69 66 20 adius);.. if
0c60: 28 74 68 69 73 2e 6f 72 69 65 6e 74 61 74 69 6f (this.orientatio
0c70: 6e 20 3d 3d 3d 20 27 76 65 72 74 69 63 61 6c 27 n === 'vertical'
0c80: 29 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 6b ) {. this.k
0c90: 6e 6f 62 2e 73 65 74 41 74 74 72 69 62 75 74 65 nob.setAttribute
0ca0: 28 27 63 78 27 2c 78 29 3b 0a 20 20 20 20 20 20 ('cx',x);.
0cb0: 74 68 69 73 2e 6b 6e 6f 62 2e 73 65 74 41 74 74 this.knob.setAtt
0cc0: 72 69 62 75 74 65 28 27 63 79 27 2c 74 68 69 73 ribute('cy',this
0cd0: 2e 6b 6e 6f 62 44 61 74 61 2e 6c 65 76 65 6c 29 .knobData.level)
0ce0: 3b 0a 20 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20 ;. } else {.
0cf0: 20 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 2e 73 this.knob.s
0d00: 65 74 41 74 74 72 69 62 75 74 65 28 27 63 78 27 etAttribute('cx'
0d10: 2c 74 68 69 73 2e 6b 6e 6f 62 44 61 74 61 2e 6c ,this.knobData.l
0d20: 65 76 65 6c 29 3b 0a 20 20 20 20 20 20 74 68 69 evel);. thi
0d30: 73 2e 6b 6e 6f 62 2e 73 65 74 41 74 74 72 69 62 s.knob.setAttrib
0d40: 75 74 65 28 27 63 79 27 2c 79 29 3b 0a 20 20 20 ute('cy',y);.
0d50: 20 7d 0a 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 }. this.knob
0d60: 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 72 .setAttribute('r
0d70: 27 2c 74 68 69 73 2e 6b 6e 6f 62 44 61 74 61 2e ',this.knobData.
0d80: 72 29 3b 0a 0a 0a 20 20 20 20 69 66 20 28 74 68 r);... if (th
0d90: 69 73 2e 70 6f 73 69 74 69 6f 6e 29 20 7b 0a 20 is.position) {.
0da0: 20 20 20 20 20 74 68 69 73 2e 70 6f 73 69 74 69 this.positi
0db0: 6f 6e 2e 72 65 73 69 7a 65 28 5b 30 2c 74 68 69 on.resize([0,thi
0dc0: 73 2e 77 69 64 74 68 5d 2c 5b 74 68 69 73 2e 68 s.width],[this.h
0dd0: 65 69 67 68 74 2c 30 5d 29 3b 0a 20 20 20 20 7d eight,0]);. }
0de0: 0a 0a 20 20 7d 0a 0a 20 20 63 6f 6c 6f 72 49 6e .. }.. colorIn
0df0: 74 65 72 66 61 63 65 28 29 20 7b 0a 0a 20 20 20 terface() {..
0e00: 20 74 68 69 73 2e 62 61 72 2e 73 65 74 41 74 74 this.bar.setAtt
0e10: 72 69 62 75 74 65 28 27 66 69 6c 6c 27 2c 20 74 ribute('fill', t
0e20: 68 69 73 2e 63 6f 6c 6f 72 73 2e 66 69 6c 6c 29 his.colors.fill)
0e30: 3b 0a 20 20 20 20 74 68 69 73 2e 66 69 6c 6c 62 ;. this.fillb
0e40: 61 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 ar.setAttribute(
0e50: 27 66 69 6c 6c 27 2c 20 74 68 69 73 2e 63 6f 6c 'fill', this.col
0e60: 6f 72 73 2e 61 63 63 65 6e 74 29 3b 0a 20 20 20 ors.accent);.
0e70: 20 74 68 69 73 2e 6b 6e 6f 62 2e 73 65 74 41 74 this.knob.setAt
0e80: 74 72 69 62 75 74 65 28 27 66 69 6c 6c 27 2c 20 tribute('fill',
0e90: 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 61 63 63 65 this.colors.acce
0ea0: 6e 74 29 3b 0a 20 20 20 20 69 66 20 28 21 74 68 nt);. if (!th
0eb0: 69 73 2e 68 61 73 4b 6e 6f 62 29 20 7b 0a 20 20 is.hasKnob) {.
0ec0: 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 2e 73 65 this.knob.se
0ed0: 74 41 74 74 72 69 62 75 74 65 28 27 66 69 6c 6c tAttribute('fill
0ee0: 27 2c 27 6e 6f 6e 65 27 29 3b 0a 20 20 20 20 7d ','none');. }
0ef0: 0a 0a 20 20 7d 0a 0a 20 20 72 65 6e 64 65 72 28 .. }.. render(
0f00: 29 20 7b 0a 20 20 20 20 69 66 20 28 21 74 68 69 ) {. if (!thi
0f10: 73 2e 63 6c 69 63 6b 65 64 29 20 7b 0a 20 20 20 s.clicked) {.
0f20: 20 20 20 74 68 69 73 2e 6b 6e 6f 62 44 61 74 61 this.knobData
0f30: 2e 72 20 3d 20 74 68 69 73 2e 74 68 69 63 6b 6e .r = this.thickn
0f40: 65 73 73 2a 30 2e 37 35 3b 0a 20 20 20 20 7d 0a ess*0.75;. }.
0f50: 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 2e 73 65 this.knob.se
0f60: 74 41 74 74 72 69 62 75 74 65 28 27 72 27 2c 74 tAttribute('r',t
0f70: 68 69 73 2e 6b 6e 6f 62 44 61 74 61 2e 72 29 3b his.knobData.r);
0f80: 0a 0a 20 20 20 20 69 66 20 28 74 68 69 73 2e 6f .. if (this.o
0f90: 72 69 65 6e 74 61 74 69 6f 6e 20 3d 3d 3d 20 27 rientation === '
0fa0: 76 65 72 74 69 63 61 6c 27 29 20 7b 0a 20 20 20 vertical') {.
0fb0: 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 44 61 74 this.knobDat
0fc0: 61 2e 6c 65 76 65 6c 20 3d 20 74 68 69 73 2e 5f a.level = this._
0fd0: 76 61 6c 75 65 2e 6e 6f 72 6d 61 6c 69 7a 65 64 value.normalized
0fe0: 2a 74 68 69 73 2e 68 65 69 67 68 74 3b 0a 20 20 *this.height;.
0ff0: 20 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 2e 73 this.knob.s
1000: 65 74 41 74 74 72 69 62 75 74 65 28 27 63 79 27 etAttribute('cy'
1010: 2c 74 68 69 73 2e 68 65 69 67 68 74 20 2d 20 74 ,this.height - t
1020: 68 69 73 2e 6b 6e 6f 62 44 61 74 61 2e 6c 65 76 his.knobData.lev
1030: 65 6c 29 3b 0a 20 20 20 20 20 20 20 74 68 69 73 el);. this
1040: 2e 66 69 6c 6c 62 61 72 2e 73 65 74 41 74 74 72 .fillbar.setAttr
1050: 69 62 75 74 65 28 27 79 27 2c 74 68 69 73 2e 68 ibute('y',this.h
1060: 65 69 67 68 74 20 2d 20 74 68 69 73 2e 6b 6e 6f eight - this.kno
1070: 62 44 61 74 61 2e 6c 65 76 65 6c 29 3b 0a 20 20 bData.level);.
1080: 20 20 20 20 20 74 68 69 73 2e 66 69 6c 6c 62 61 this.fillba
1090: 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 r.setAttribute('
10a0: 68 65 69 67 68 74 27 2c 74 68 69 73 2e 6b 6e 6f height',this.kno
10b0: 62 44 61 74 61 2e 6c 65 76 65 6c 29 3b 0a 20 20 bData.level);.
10c0: 20 20 7d 20 65 6c 73 65 20 7b 0a 20 20 20 20 20 } else {.
10d0: 20 20 74 68 69 73 2e 6b 6e 6f 62 44 61 74 61 2e this.knobData.
10e0: 6c 65 76 65 6c 20 3d 20 74 68 69 73 2e 5f 76 61 level = this._va
10f0: 6c 75 65 2e 6e 6f 72 6d 61 6c 69 7a 65 64 2a 74 lue.normalized*t
1100: 68 69 73 2e 77 69 64 74 68 3b 0a 20 20 20 20 20 his.width;.
1110: 20 20 74 68 69 73 2e 6b 6e 6f 62 2e 73 65 74 41 this.knob.setA
1120: 74 74 72 69 62 75 74 65 28 27 63 78 27 2c 74 68 ttribute('cx',th
1130: 69 73 2e 6b 6e 6f 62 44 61 74 61 2e 6c 65 76 65 is.knobData.leve
1140: 6c 29 3b 0a 20 20 20 20 20 20 20 74 68 69 73 2e l);. this.
1150: 66 69 6c 6c 62 61 72 2e 73 65 74 41 74 74 72 69 fillbar.setAttri
1160: 62 75 74 65 28 27 78 27 2c 30 29 3b 0a 20 20 20 bute('x',0);.
1170: 20 20 20 20 74 68 69 73 2e 66 69 6c 6c 62 61 72 this.fillbar
1180: 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 77 .setAttribute('w
1190: 69 64 74 68 27 2c 74 68 69 73 2e 6b 6e 6f 62 44 idth',this.knobD
11a0: 61 74 61 2e 6c 65 76 65 6c 29 3b 0a 20 20 20 20 ata.level);.
11b0: 7d 0a 20 20 7d 0a 0a 20 20 64 6f 77 6e 28 29 20 }. }.. down()
11c0: 7b 0a 20 20 20 20 74 68 69 73 2e 63 6c 69 63 6b {. this.click
11d0: 65 64 20 3d 20 74 72 75 65 3b 0a 20 20 20 20 74 ed = true;. t
11e0: 68 69 73 2e 6b 6e 6f 62 44 61 74 61 2e 72 20 3d his.knobData.r =
11f0: 20 74 68 69 73 2e 74 68 69 63 6b 6e 65 73 73 2a this.thickness*
1200: 30 2e 39 3b 0a 20 20 20 20 74 68 69 73 2e 70 6f 0.9;. this.po
1210: 73 69 74 69 6f 6e 2e 61 6e 63 68 6f 72 20 3d 20 sition.anchor =
1220: 74 68 69 73 2e 6d 6f 75 73 65 3b 0a 20 20 20 20 this.mouse;.
1230: 74 68 69 73 2e 73 6c 69 64 65 28 29 3b 0a 20 20 this.slide();.
1240: 7d 0a 0a 20 20 73 6c 69 64 65 28 29 20 7b 0a 20 }.. slide() {.
1250: 20 20 20 69 66 20 28 74 68 69 73 2e 63 6c 69 63 if (this.clic
1260: 6b 65 64 29 20 7b 0a 20 20 20 20 20 20 74 68 69 ked) {. thi
1270: 73 2e 70 6f 73 69 74 69 6f 6e 2e 75 70 64 61 74 s.position.updat
1280: 65 28 74 68 69 73 2e 6d 6f 75 73 65 29 3b 0a 20 e(this.mouse);.
1290: 20 20 20 20 20 74 68 69 73 2e 76 61 6c 75 65 20 this.value
12a0: 3d 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e 75 70 = this._value.up
12b0: 64 61 74 65 4e 6f 72 6d 61 6c 28 20 74 68 69 73 dateNormal( this
12c0: 2e 70 6f 73 69 74 69 6f 6e 2e 76 61 6c 75 65 20 .position.value
12d0: 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 65 6d );. this.em
12e0: 69 74 28 27 63 68 61 6e 67 65 27 2c 74 68 69 73 it('change',this
12f0: 2e 76 61 6c 75 65 29 3b 0a 20 20 20 20 7d 0a 20 .value);. }.
1300: 20 7d 0a 0a 20 20 75 70 28 29 20 7b 0a 20 20 20 }.. up() {.
1310: 20 74 68 69 73 2e 63 6c 69 63 6b 65 64 20 3d 20 this.clicked =
1320: 66 61 6c 73 65 3b 0a 20 20 20 20 74 68 69 73 2e false;. this.
1330: 72 65 6e 64 65 72 28 29 3b 0a 20 20 7d 0a 0a 20 render();. }..
1340: 20 67 65 74 20 6e 6f 72 6d 61 6c 69 7a 65 64 28 get normalized(
1350: 29 20 7b 0a 20 20 20 20 72 65 74 75 72 6e 20 74 ) {. return t
1360: 68 69 73 2e 5f 76 61 6c 75 65 2e 6e 6f 72 6d 61 his._value.norma
1370: 6c 69 7a 65 64 3b 0a 20 20 7d 0a 0a 20 20 2f 2a lized;. }.. /*
1380: 2a 0a 20 20 54 68 65 20 73 6c 69 64 65 72 27 73 *. The slider's
1390: 20 63 75 72 72 65 6e 74 20 76 61 6c 75 65 2e 20 current value.
13a0: 49 66 20 73 65 74 20 6d 61 6e 75 61 6c 6c 79 2c If set manually,
13b0: 20 77 69 6c 6c 20 75 70 64 61 74 65 20 74 68 65 will update the
13c0: 20 69 6e 74 65 72 66 61 63 65 20 61 6e 64 20 74 interface and t
13d0: 72 69 67 67 65 72 20 74 68 65 20 6f 75 74 70 75 rigger the outpu
13e0: 74 20 65 76 65 6e 74 2e 0a 20 20 40 74 79 70 65 t event.. @type
13f0: 20 7b 6e 75 6d 62 65 72 7d 0a 20 20 40 65 78 61 {number}. @exa
1400: 6d 70 6c 65 20 73 6c 69 64 65 72 2e 76 61 6c 75 mple slider.valu
1410: 65 20 3d 20 31 30 3b 0a 20 20 2a 2f 0a 20 20 67 e = 10;. */. g
1420: 65 74 20 76 61 6c 75 65 28 29 20 7b 0a 20 20 20 et value() {.
1430: 20 72 65 74 75 72 6e 20 74 68 69 73 2e 5f 76 61 return this._va
1440: 6c 75 65 2e 76 61 6c 75 65 3b 0a 20 20 7d 0a 20 lue.value;. }.
1450: 20 73 65 74 20 76 61 6c 75 65 28 76 29 20 7b 0a set value(v) {.
1460: 20 20 20 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e this._value.
1470: 75 70 64 61 74 65 28 76 29 3b 0a 20 20 20 20 74 update(v);. t
1480: 68 69 73 2e 70 6f 73 69 74 69 6f 6e 2e 76 61 6c his.position.val
1490: 75 65 20 3d 20 74 68 69 73 2e 5f 76 61 6c 75 65 ue = this._value
14a0: 2e 6e 6f 72 6d 61 6c 69 7a 65 64 3b 0a 20 20 20 .normalized;.
14b0: 20 74 68 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a this.render();.
14c0: 20 20 7d 0a 0a 20 20 2f 2a 2a 0a 20 20 4c 6f 77 }.. /**. Low
14d0: 65 72 20 6c 69 6d 69 74 20 6f 66 20 74 68 65 20 er limit of the
14e0: 73 6c 69 64 65 72 73 27 73 20 6f 75 74 70 75 74 sliders's output
14f0: 20 72 61 6e 67 65 0a 20 20 40 74 79 70 65 20 7b range. @type {
1500: 6e 75 6d 62 65 72 7d 0a 20 20 40 65 78 61 6d 70 number}. @examp
1510: 6c 65 20 73 6c 69 64 65 72 2e 6d 69 6e 20 3d 20 le slider.min =
1520: 31 30 30 30 3b 0a 20 20 2a 2f 0a 20 20 67 65 74 1000;. */. get
1530: 20 6d 69 6e 28 29 20 7b 0a 20 20 20 20 72 65 74 min() {. ret
1540: 75 72 6e 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e urn this._value.
1550: 6d 69 6e 3b 0a 20 20 7d 0a 20 20 73 65 74 20 6d min;. }. set m
1560: 69 6e 28 76 29 20 7b 0a 20 20 20 20 74 68 69 73 in(v) {. this
1570: 2e 5f 76 61 6c 75 65 2e 6d 69 6e 20 3d 20 76 3b ._value.min = v;
1580: 0a 20 20 7d 0a 0a 20 20 2f 2a 2a 0a 20 20 55 70 . }.. /**. Up
1590: 70 65 72 20 6c 69 6d 69 74 20 6f 66 20 74 68 65 per limit of the
15a0: 20 73 6c 69 64 65 72 27 73 20 6f 75 74 70 75 74 slider's output
15b0: 20 72 61 6e 67 65 0a 20 20 40 74 79 70 65 20 7b range. @type {
15c0: 6e 75 6d 62 65 72 7d 0a 20 20 40 65 78 61 6d 70 number}. @examp
15d0: 6c 65 20 73 6c 69 64 65 72 2e 6d 61 78 20 3d 20 le slider.max =
15e0: 31 30 30 30 3b 0a 20 20 2a 2f 0a 20 20 67 65 74 1000;. */. get
15f0: 20 6d 61 78 28 29 20 7b 0a 20 20 20 20 72 65 74 max() {. ret
1600: 75 72 6e 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e urn this._value.
1610: 6d 61 78 3b 0a 20 20 7d 0a 20 20 73 65 74 20 6d max;. }. set m
1620: 61 78 28 76 29 20 7b 0a 20 20 20 20 74 68 69 73 ax(v) {. this
1630: 2e 5f 76 61 6c 75 65 2e 6d 61 78 20 3d 20 76 3b ._value.max = v;
1640: 0a 20 20 7d 0a 0a 20 20 2f 2a 2a 0a 20 20 54 68 . }.. /**. Th
1650: 65 20 69 6e 63 72 65 6d 65 6e 74 20 74 68 61 74 e increment that
1660: 20 74 68 65 20 73 6c 69 64 65 72 27 73 20 76 61 the slider's va
1670: 6c 75 65 20 63 68 61 6e 67 65 73 20 62 79 2e 0a lue changes by..
1680: 20 20 40 74 79 70 65 20 7b 6e 75 6d 62 65 72 7d @type {number}
1690: 0a 20 20 40 65 78 61 6d 70 6c 65 20 73 6c 69 64 . @example slid
16a0: 65 72 2e 73 74 65 70 20 3d 20 35 3b 0a 20 20 2a er.step = 5;. *
16b0: 2f 0a 20 20 67 65 74 20 73 74 65 70 28 29 20 7b /. get step() {
16c0: 0a 20 20 20 20 72 65 74 75 72 6e 20 74 68 69 73 . return this
16d0: 2e 5f 76 61 6c 75 65 2e 73 74 65 70 3b 0a 20 20 ._value.step;.
16e0: 7d 0a 20 20 73 65 74 20 73 74 65 70 28 76 29 20 }. set step(v)
16f0: 7b 0a 20 20 20 20 74 68 69 73 2e 5f 76 61 6c 75 {. this._valu
1700: 65 2e 73 74 65 70 20 3d 20 76 3b 0a 20 20 7d 0a e.step = v;. }.
1710: 0a 20 20 2f 2a 2a 0a 20 20 41 62 73 6f 6c 75 74 . /**. Absolut
1720: 65 20 6d 6f 64 65 20 28 73 6c 69 64 65 72 27 73 e mode (slider's
1730: 20 76 61 6c 75 65 20 6a 75 6d 70 73 20 74 6f 20 value jumps to
1740: 6d 6f 75 73 65 20 63 6c 69 63 6b 20 70 6f 73 69 mouse click posi
1750: 74 69 6f 6e 29 20 6f 72 20 72 65 6c 61 74 69 76 tion) or relativ
1760: 65 20 6d 6f 64 65 20 28 6d 6f 75 73 65 20 64 72 e mode (mouse dr
1770: 61 67 20 63 68 61 6e 67 65 73 20 76 61 6c 75 65 ag changes value
1780: 20 72 65 6c 61 74 69 76 65 20 74 6f 20 69 74 73 relative to its
1790: 20 63 75 72 72 65 6e 74 20 70 6f 73 69 74 69 6f current positio
17a0: 6e 29 2e 20 44 65 66 61 75 6c 74 3a 20 22 72 65 n). Default: "re
17b0: 6c 61 74 69 76 65 22 2e 0a 20 20 40 74 79 70 65 lative".. @type
17c0: 20 7b 73 74 72 69 6e 67 7d 0a 20 20 40 65 78 61 {string}. @exa
17d0: 6d 70 6c 65 20 73 6c 69 64 65 72 2e 6d 6f 64 65 mple slider.mode
17e0: 20 3d 20 22 72 65 6c 61 74 69 76 65 22 3b 0a 20 = "relative";.
17f0: 20 2a 2f 0a 20 20 67 65 74 20 6d 6f 64 65 28 29 */. get mode()
1800: 20 7b 0a 20 20 20 20 72 65 74 75 72 6e 20 74 68 {. return th
1810: 69 73 2e 70 6f 73 69 74 69 6f 6e 2e 6d 6f 64 65 is.position.mode
1820: 3b 0a 20 20 7d 0a 20 20 73 65 74 20 6d 6f 64 65 ;. }. set mode
1830: 28 76 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 70 (v) {. this.p
1840: 6f 73 69 74 69 6f 6e 2e 6d 6f 64 65 20 3d 20 76 osition.mode = v
1850: 3b 0a 20 20 7d 0a 0a 0a 7d 0a ;. }...}.