⌈⌋ ⎇ branch:  Bitrhythm


Hex Artifact Content

Artifact 7c38d9f4901f71e3fd4bc77c5a6f0af427bfa280790f6f7227ac194e70873e12:


0000: 27 75 73 65 20 73 74 72 69 63 74 27 3b 0a 0a 6c  'use strict';..l
0010: 65 74 20 49 6e 74 65 72 66 61 63 65 20 3d 20 72  et Interface = r
0020: 65 71 75 69 72 65 28 27 2e 2e 2f 63 6f 72 65 2f  equire('../core/
0030: 69 6e 74 65 72 66 61 63 65 27 29 3b 0a 6c 65 74  interface');.let
0040: 20 53 74 65 70 20 3d 20 72 65 71 75 69 72 65 28   Step = require(
0050: 27 2e 2e 2f 6d 6f 64 65 6c 73 2f 73 74 65 70 27  '../models/step'
0060: 29 3b 0a 6c 65 74 20 6d 61 74 68 20 3d 20 72 65  );.let math = re
0070: 71 75 69 72 65 28 27 2e 2e 2f 75 74 69 6c 2f 6d  quire('../util/m
0080: 61 74 68 27 29 3b 0a 6c 65 74 20 75 74 69 6c 20  ath');.let util 
0090: 3d 20 72 65 71 75 69 72 65 28 27 2e 2e 2f 75 74  = require('../ut
00a0: 69 6c 2f 75 74 69 6c 27 29 3b 0a 0a 2f 2a 2a 0a  il/util');../**.
00b0: 2a 20 4e 75 6d 62 65 72 0a 2a 0a 2a 20 40 64 65  * Number.*.* @de
00c0: 73 63 72 69 70 74 69 6f 6e 20 4e 75 6d 62 65 72  scription Number
00d0: 20 69 6e 74 65 72 66 61 63 65 20 77 68 69 63 68   interface which
00e0: 20 69 73 20 63 6f 6e 74 72 6f 6c 6c 61 62 6c 65   is controllable
00f0: 20 62 79 20 64 72 61 67 67 69 6e 67 20 6f 72 20   by dragging or 
0100: 74 79 70 69 6e 67 2e 0a 2a 0a 2a 20 40 64 65 6d  typing..*.* @dem
0110: 6f 20 3c 73 70 61 6e 20 6e 65 78 75 73 2d 75 69  o <span nexus-ui
0120: 3d 22 6e 75 6d 62 65 72 22 3e 3c 2f 73 70 61 6e  ="number"></span
0130: 3e 0a 2a 0a 2a 20 40 65 78 61 6d 70 6c 65 0a 2a  >.*.* @example.*
0140: 20 76 61 72 20 6e 75 6d 62 65 72 20 3d 20 6e 65   var number = ne
0150: 77 20 4e 65 78 75 73 2e 4e 75 6d 62 65 72 28 27  w Nexus.Number('
0160: 23 74 61 72 67 65 74 27 29 0a 2a 0a 2a 20 40 65  #target').*.* @e
0170: 78 61 6d 70 6c 65 0a 2a 20 76 61 72 20 6e 75 6d  xample.* var num
0180: 62 65 72 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e  ber = new Nexus.
0190: 4e 75 6d 62 65 72 28 27 23 74 61 72 67 65 74 27  Number('#target'
01a0: 2c 7b 0a 2a 20 20 20 27 73 69 7a 65 27 3a 20 5b  ,{.*   'size': [
01b0: 36 30 2c 33 30 5d 2c 0a 2a 20 20 20 27 76 61 6c  60,30],.*   'val
01c0: 75 65 27 3a 20 30 2c 0a 2a 20 20 20 27 6d 69 6e  ue': 0,.*   'min
01d0: 27 3a 20 30 2c 0a 2a 20 20 20 27 6d 61 78 27 3a  ': 0,.*   'max':
01e0: 20 32 30 30 30 30 2c 0a 2a 20 20 20 27 73 74 65   20000,.*   'ste
01f0: 70 27 3a 20 31 0a 2a 20 7d 29 0a 2a 0a 2a 20 40  p': 1.* }).*.* @
0200: 6f 75 74 70 75 74 0a 2a 20 63 68 61 6e 67 65 0a  output.* change.
0210: 2a 20 46 69 72 65 73 20 61 6e 79 20 74 69 6d 65  * Fires any time
0220: 20 74 68 65 20 69 6e 74 65 72 66 61 63 65 27 73   the interface's
0230: 20 76 61 6c 75 65 20 63 68 61 6e 67 65 73 2e 20   value changes. 
0240: 3c 62 72 3e 0a 2a 20 54 68 65 20 65 76 65 6e 74  <br>.* The event
0250: 20 64 61 74 61 20 69 73 20 74 68 65 20 6e 75 6d   data is the num
0260: 62 65 72 20 76 61 6c 75 65 20 6f 66 20 74 68 65  ber value of the
0270: 20 69 6e 74 65 72 66 61 63 65 2e 0a 2a 0a 2a 20   interface..*.* 
0280: 40 6f 75 74 70 75 74 65 78 61 6d 70 6c 65 0a 2a  @outputexample.*
0290: 20 6e 75 6d 62 65 72 2e 6f 6e 28 27 63 68 61 6e   number.on('chan
02a0: 67 65 27 2c 66 75 6e 63 74 69 6f 6e 28 76 29 20  ge',function(v) 
02b0: 7b 0a 2a 20 20 20 63 6f 6e 73 6f 6c 65 2e 6c 6f  {.*   console.lo
02c0: 67 28 76 29 3b 0a 2a 20 7d 29 0a 2a 0a 2a 0a 2a  g(v);.* }).*.*.*
02d0: 2f 0a 0a 0a 65 78 70 6f 72 74 20 64 65 66 61 75  /...export defau
02e0: 6c 74 20 63 6c 61 73 73 20 4e 75 6d 62 65 72 20  lt class Number 
02f0: 65 78 74 65 6e 64 73 20 49 6e 74 65 72 66 61 63  extends Interfac
0300: 65 20 7b 0a 0a 20 20 63 6f 6e 73 74 72 75 63 74  e {..  construct
0310: 6f 72 28 29 20 7b 0a 0a 20 20 20 20 6c 65 74 20  or() {..    let 
0320: 6f 70 74 69 6f 6e 73 20 3d 20 5b 27 76 61 6c 75  options = ['valu
0330: 65 27 5d 3b 0a 0a 20 20 20 20 6c 65 74 20 64 65  e'];..    let de
0340: 66 61 75 6c 74 73 20 3d 20 7b 0a 20 20 20 20 20  faults = {.     
0350: 20 27 73 69 7a 65 27 3a 20 5b 36 30 2c 33 30 5d   'size': [60,30]
0360: 2c 0a 20 20 20 20 20 20 27 76 61 6c 75 65 27 3a  ,.      'value':
0370: 20 30 2c 0a 20 20 20 20 20 20 27 6d 69 6e 27 3a   0,.      'min':
0380: 20 30 2c 0a 20 20 20 20 20 20 27 6d 61 78 27 3a   0,.      'max':
0390: 20 32 30 30 30 30 2c 0a 20 20 20 20 20 20 27 73   20000,.      's
03a0: 74 65 70 27 3a 20 31 0a 20 20 20 20 7d 3b 0a 0a  tep': 1.    };..
03b0: 20 20 20 20 73 75 70 65 72 28 61 72 67 75 6d 65      super(argume
03c0: 6e 74 73 2c 6f 70 74 69 6f 6e 73 2c 64 65 66 61  nts,options,defa
03d0: 75 6c 74 73 29 3b 0a 0a 20 20 20 20 74 68 69 73  ults);..    this
03e0: 2e 5f 76 61 6c 75 65 20 3d 20 6e 65 77 20 53 74  ._value = new St
03f0: 65 70 28 74 68 69 73 2e 73 65 74 74 69 6e 67 73  ep(this.settings
0400: 2e 6d 69 6e 2c 74 68 69 73 2e 73 65 74 74 69 6e  .min,this.settin
0410: 67 73 2e 6d 61 78 2c 74 68 69 73 2e 73 65 74 74  gs.max,this.sett
0420: 69 6e 67 73 2e 73 74 65 70 2c 74 68 69 73 2e 73  ings.step,this.s
0430: 65 74 74 69 6e 67 73 2e 76 61 6c 75 65 29 3b 0a  ettings.value);.
0440: 0a 20 20 20 20 2f 2a 0a 20 20 20 20 44 65 66 61  .    /*.    Defa
0450: 75 6c 74 3a 20 32 2e 20 48 6f 77 20 6d 61 6e 79  ult: 2. How many
0460: 20 64 65 63 69 6d 61 6c 20 70 6c 61 63 65 73 20   decimal places 
0470: 74 6f 20 63 6c 69 70 20 74 68 65 20 6e 75 6d 62  to clip the numb
0480: 65 72 27 73 20 76 69 73 75 61 6c 20 72 65 6e 64  er's visual rend
0490: 65 72 69 6e 67 20 74 6f 2e 20 54 68 69 73 20 64  ering to. This d
04a0: 6f 65 73 20 6e 6f 74 20 61 66 66 65 63 74 20 6e  oes not affect n
04b0: 75 6d 62 65 72 27 73 20 61 63 74 75 61 6c 20 76  umber's actual v
04c0: 61 6c 75 65 20 6f 75 74 70 75 74 20 2d 2d 20 66  alue output -- f
04d0: 6f 72 20 74 68 61 74 2c 20 73 65 74 20 74 68 65  or that, set the
04e0: 20 73 74 65 70 20 70 72 6f 70 65 72 74 79 20 74   step property t
04f0: 6f 20 2e 30 31 2c 20 2e 31 2c 20 6f 72 20 31 2e  o .01, .1, or 1.
0500: 0a 20 20 20 20 40 74 79 70 65 20 7b 6e 75 6d 62  .    @type {numb
0510: 65 72 7d 0a 20 20 20 20 40 65 78 61 6d 70 6c 65  er}.    @example
0520: 20 6e 75 6d 62 65 72 2e 64 65 63 69 6d 61 6c 50   number.decimalP
0530: 6c 61 63 65 73 20 3d 20 32 3b 0a 20 20 20 20 2a  laces = 2;.    *
0540: 2f 0a 20 20 20 20 74 68 69 73 2e 64 65 63 69 6d  /.    this.decim
0550: 61 6c 50 6c 61 63 65 73 20 3d 20 32 3b 0a 20 20  alPlaces = 2;.  
0560: 20 20 74 68 69 73 2e 61 63 74 75 61 6c 20 3d 20    this.actual = 
0570: 30 3b 0a 0a 20 20 20 20 74 68 69 73 2e 6d 61 78  0;..    this.max
0580: 20 3d 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e 6d   = this._value.m
0590: 61 78 3b 0a 0a 20 20 20 20 74 68 69 73 2e 6d 69  ax;..    this.mi
05a0: 6e 20 3d 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e  n = this._value.
05b0: 6d 69 6e 3b 0a 0a 20 20 20 20 74 68 69 73 2e 73  min;..    this.s
05c0: 74 65 70 20 3d 20 74 68 69 73 2e 5f 76 61 6c 75  tep = this._valu
05d0: 65 2e 73 74 65 70 3b 0a 0a 20 20 20 20 74 68 69  e.step;..    thi
05e0: 73 2e 69 6e 69 74 28 29 3b 0a 20 20 20 20 74 68  s.init();.    th
05f0: 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a 0a 20 20  is.render();..  
0600: 7d 0a 0a 20 20 62 75 69 6c 64 46 72 61 6d 65 28  }..  buildFrame(
0610: 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 65 6c 65  ) {.    this.ele
0620: 6d 65 6e 74 20 3d 20 64 6f 63 75 6d 65 6e 74 2e  ment = document.
0630: 63 72 65 61 74 65 45 6c 65 6d 65 6e 74 28 27 69  createElement('i
0640: 6e 70 75 74 27 29 3b 0a 20 20 20 20 74 68 69 73  nput');.    this
0650: 2e 65 6c 65 6d 65 6e 74 2e 74 79 70 65 20 3d 20  .element.type = 
0660: 27 74 65 78 74 27 3b 0a 0a 20 20 20 20 74 68 69  'text';..    thi
0670: 73 2e 65 6c 65 6d 65 6e 74 2e 61 64 64 45 76 65  s.element.addEve
0680: 6e 74 4c 69 73 74 65 6e 65 72 28 27 62 6c 75 72  ntListener('blur
0690: 27 2c 20 66 75 6e 63 74 69 6f 6e 20 28 29 20 7b  ', function () {
06a0: 0a 20 20 20 20 20 20 74 68 69 73 2e 65 6c 65 6d  .      this.elem
06b0: 65 6e 74 2e 73 74 79 6c 65 2e 62 61 63 6b 67 72  ent.style.backgr
06c0: 6f 75 6e 64 43 6f 6c 6f 72 20 3d 20 74 68 69 73  oundColor = this
06d0: 2e 63 6f 6c 6f 72 73 2e 66 69 6c 6c 3b 0a 20 20  .colors.fill;.  
06e0: 20 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74      this.element
06f0: 2e 73 74 79 6c 65 2e 63 6f 6c 6f 72 20 3d 20 74  .style.color = t
0700: 68 69 73 2e 63 6f 6c 6f 72 73 2e 64 61 72 6b 3b  his.colors.dark;
0710: 0a 20 20 20 20 20 20 69 66 20 28 74 68 69 73 2e  .      if (this.
0720: 65 6c 65 6d 65 6e 74 2e 76 61 6c 75 65 20 21 3d  element.value !=
0730: 3d 20 74 68 69 73 2e 76 61 6c 75 65 29 20 7b 0a  = this.value) {.
0740: 20 20 20 20 20 20 20 20 74 68 69 73 2e 76 61 6c          this.val
0750: 75 65 20 3d 20 70 61 72 73 65 46 6c 6f 61 74 28  ue = parseFloat(
0760: 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 76 61 6c  this.element.val
0770: 75 65 29 3b 0a 20 20 20 20 20 20 20 20 74 68 69  ue);.        thi
0780: 73 2e 72 65 6e 64 65 72 28 29 3b 0a 20 20 20 20  s.render();.    
0790: 20 20 7d 0a 20 20 20 20 7d 2e 62 69 6e 64 28 74    }.    }.bind(t
07a0: 68 69 73 29 29 3b 0a 0a 20 20 20 20 75 74 69 6c  his));..    util
07b0: 2e 73 65 74 49 6e 70 75 74 46 69 6c 74 65 72 28  .setInputFilter(
07c0: 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2c 20 66 75  this.element, fu
07d0: 6e 63 74 69 6f 6e 28 76 61 6c 75 65 29 20 7b 0a  nction(value) {.
07e0: 20 20 20 20 20 20 72 65 74 75 72 6e 20 2f 5e 2d        return /^-
07f0: 3f 5c 64 2a 5c 2e 3f 5c 64 2a 24 2f 2e 74 65 73  ?\d*\.?\d*$/.tes
0800: 74 28 76 61 6c 75 65 29 3b 20 7d 29 3b 0a 0a 20  t(value); });.. 
0810: 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e     this.element.
0820: 61 64 64 45 76 65 6e 74 4c 69 73 74 65 6e 65 72  addEventListener
0830: 28 27 6b 65 79 64 6f 77 6e 27 2c 20 66 75 6e 63  ('keydown', func
0840: 74 69 6f 6e 20 28 65 29 20 7b 0a 20 20 20 20 20  tion (e) {.     
0850: 20 69 66 20 28 65 2e 77 68 69 63 68 3d 3d 3d 31   if (e.which===1
0860: 33 29 20 7b 0a 20 20 20 20 20 20 20 20 74 68 69  3) {.        thi
0870: 73 2e 65 6c 65 6d 65 6e 74 2e 62 6c 75 72 28 29  s.element.blur()
0880: 3b 0a 20 20 20 20 20 20 20 20 74 68 69 73 2e 76  ;.        this.v
0890: 61 6c 75 65 20 3d 20 74 68 69 73 2e 65 6c 65 6d  alue = this.elem
08a0: 65 6e 74 2e 76 61 6c 75 65 3b 0a 20 20 20 20 20  ent.value;.     
08b0: 20 20 20 74 68 69 73 2e 65 6d 69 74 28 27 63 68     this.emit('ch
08c0: 61 6e 67 65 27 2c 74 68 69 73 2e 76 61 6c 75 65  ange',this.value
08d0: 29 3b 0a 20 20 20 20 20 20 20 20 74 68 69 73 2e  );.        this.
08e0: 72 65 6e 64 65 72 28 29 3b 0a 20 20 20 20 20 20  render();.      
08f0: 7d 0a 20 20 20 20 7d 2e 62 69 6e 64 28 74 68 69  }.    }.bind(thi
0900: 73 29 2c 20 74 72 75 65 29 3b 0a 0a 20 20 20 20  s), true);..    
0910: 74 68 69 73 2e 70 61 72 65 6e 74 2e 61 70 70 65  this.parent.appe
0920: 6e 64 43 68 69 6c 64 28 74 68 69 73 2e 65 6c 65  ndChild(this.ele
0930: 6d 65 6e 74 29 3b 0a 0a 20 20 7d 0a 0a 20 20 73  ment);..  }..  s
0940: 69 7a 65 49 6e 74 65 72 66 61 63 65 28 29 20 7b  izeInterface() {
0950: 0a 0a 20 20 20 20 74 68 69 73 2e 5f 6d 69 6e 44  ..    this._minD
0960: 69 6d 65 6e 73 69 6f 6e 20 3d 20 4d 61 74 68 2e  imension = Math.
0970: 6d 69 6e 28 74 68 69 73 2e 77 69 64 74 68 2c 74  min(this.width,t
0980: 68 69 73 2e 68 65 69 67 68 74 29 3b 0a 0a 20 20  his.height);..  
0990: 20 20 6c 65 74 20 73 74 79 6c 65 73 20 3d 20 27    let styles = '
09a0: 77 69 64 74 68 3a 20 27 20 2b 20 74 68 69 73 2e  width: ' + this.
09b0: 77 69 64 74 68 20 2b 20 27 70 78 3b 27 3b 0a 20  width + 'px;';. 
09c0: 20 20 20 73 74 79 6c 65 73 20 2b 3d 20 27 68 65     styles += 'he
09d0: 69 67 68 74 3a 20 27 20 2b 20 74 68 69 73 2e 68  ight: ' + this.h
09e0: 65 69 67 68 74 20 2b 20 27 70 78 3b 27 3b 0a 20  eight + 'px;';. 
09f0: 20 20 20 73 74 79 6c 65 73 20 2b 3d 20 27 62 61     styles += 'ba
0a00: 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20  ckground-color: 
0a10: 23 65 37 65 37 65 37 3b 27 3b 0a 20 20 20 20 73  #e7e7e7;';.    s
0a20: 74 79 6c 65 73 20 2b 3d 20 27 63 6f 6c 6f 72 3a  tyles += 'color:
0a30: 20 23 33 33 33 3b 27 3b 0a 20 20 20 20 73 74 79   #333;';.    sty
0a40: 6c 65 73 20 2b 3d 20 27 66 6f 6e 74 2d 66 61 6d  les += 'font-fam
0a50: 69 6c 79 3a 20 61 72 69 61 6c 3b 27 3b 0a 20 20  ily: arial;';.  
0a60: 20 20 73 74 79 6c 65 73 20 2b 3d 20 27 66 6f 6e    styles += 'fon
0a70: 74 2d 77 65 69 67 68 74 3a 20 35 30 30 3b 27 3b  t-weight: 500;';
0a80: 0a 20 20 20 20 73 74 79 6c 65 73 20 2b 3d 20 27  .    styles += '
0a90: 66 6f 6e 74 2d 73 69 7a 65 3a 27 20 2b 20 74 68  font-size:' + th
0aa0: 69 73 2e 5f 6d 69 6e 44 69 6d 65 6e 73 69 6f 6e  is._minDimension
0ab0: 2f 32 20 2b 20 27 70 78 3b 27 3b 0a 20 20 2f 2f  /2 + 'px;';.  //
0ac0: 20 20 73 74 79 6c 65 73 20 2b 3d 20 27 68 69 67    styles += 'hig
0ad0: 68 6c 69 67 68 74 3a 20 23 64 31 38 3b 27 3b 0a  hlight: #d18;';.
0ae0: 20 20 20 20 73 74 79 6c 65 73 20 2b 3d 20 27 62      styles += 'b
0af0: 6f 72 64 65 72 3a 20 6e 6f 6e 65 3b 27 3b 0a 20  order: none;';. 
0b00: 20 20 20 73 74 79 6c 65 73 20 2b 3d 20 27 6f 75     styles += 'ou
0b10: 74 6c 69 6e 65 3a 20 6e 6f 6e 65 3b 27 3b 0a 20  tline: none;';. 
0b20: 20 20 20 73 74 79 6c 65 73 20 2b 3d 20 27 70 61     styles += 'pa
0b30: 64 64 69 6e 67 3a 20 27 2b 74 68 69 73 2e 5f 6d  dding: '+this._m
0b40: 69 6e 44 69 6d 65 6e 73 69 6f 6e 2f 34 2b 27 70  inDimension/4+'p
0b50: 78 20 27 2b 74 68 69 73 2e 5f 6d 69 6e 44 69 6d  x '+this._minDim
0b60: 65 6e 73 69 6f 6e 2f 34 2b 27 70 78 3b 27 3b 0a  ension/4+'px;';.
0b70: 20 20 20 20 73 74 79 6c 65 73 20 2b 3d 20 27 62      styles += 'b
0b80: 6f 78 2d 73 69 7a 69 6e 67 3a 20 62 6f 72 64 65  ox-sizing: borde
0b90: 72 2d 62 6f 78 3b 27 3b 0a 20 20 20 20 73 74 79  r-box;';.    sty
0ba0: 6c 65 73 20 2b 3d 20 27 75 73 65 72 53 65 6c 65  les += 'userSele
0bb0: 63 74 3a 20 74 65 78 74 3b 27 3b 0a 20 20 20 20  ct: text;';.    
0bc0: 73 74 79 6c 65 73 20 2b 3d 20 27 6d 6f 7a 55 73  styles += 'mozUs
0bd0: 65 72 53 65 6c 65 63 74 3a 20 74 65 78 74 3b 27  erSelect: text;'
0be0: 3b 0a 20 20 20 20 73 74 79 6c 65 73 20 2b 3d 20  ;.    styles += 
0bf0: 27 77 65 62 6b 69 74 55 73 65 72 53 65 6c 65 63  'webkitUserSelec
0c00: 74 3a 20 74 65 78 74 3b 27 3b 0a 20 20 20 20 74  t: text;';.    t
0c10: 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 73 74 79 6c  his.element.styl
0c20: 65 2e 63 73 73 54 65 78 74 20 2b 3d 20 73 74 79  e.cssText += sty
0c30: 6c 65 73 3b 0a 0a 20 20 20 20 2f 2f 20 74 6f 20  les;..    // to 
0c40: 61 64 64 20 65 76 65 6e 74 75 61 6c 6c 79 0a 20  add eventually. 
0c50: 20 20 20 2f 2f 20 76 61 72 20 63 73 73 20 3d 20     // var css = 
0c60: 27 23 27 2b 74 68 69 73 2e 65 6c 65 6d 65 6e 74  '#'+this.element
0c70: 49 44 2b 27 3a 3a 73 65 6c 65 63 74 69 6f 6e 7b  ID+'::selection{
0c80: 20 62 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f   background-colo
0c90: 72 3a 20 74 72 61 6e 73 70 61 72 65 6e 74 20 7d  r: transparent }
0ca0: 27 3b 0a 0a 20 20 20 20 74 68 69 73 2e 65 6c 65  ';..    this.ele
0cb0: 6d 65 6e 74 2e 76 61 6c 75 65 20 3d 20 74 68 69  ment.value = thi
0cc0: 73 2e 76 61 6c 75 65 3b 0a 0a 20 20 7d 0a 0a 20  s.value;..  }.. 
0cd0: 20 63 6f 6c 6f 72 49 6e 74 65 72 66 61 63 65 28   colorInterface(
0ce0: 29 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 65  ) {.      this.e
0cf0: 6c 65 6d 65 6e 74 2e 73 74 79 6c 65 2e 62 61 63  lement.style.bac
0d00: 6b 67 72 6f 75 6e 64 43 6f 6c 6f 72 20 3d 20 74  kgroundColor = t
0d10: 68 69 73 2e 63 6f 6c 6f 72 73 2e 66 69 6c 6c 3b  his.colors.fill;
0d20: 0a 20 20 20 20 20 20 74 68 69 73 2e 65 6c 65 6d  .      this.elem
0d30: 65 6e 74 2e 73 74 79 6c 65 2e 63 6f 6c 6f 72 20  ent.style.color 
0d40: 3d 20 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 64 61  = this.colors.da
0d50: 72 6b 3b 0a 20 20 7d 0a 0a 20 20 72 65 6e 64 65  rk;.  }..  rende
0d60: 72 28 29 20 7b 0a 0a 20 20 20 20 74 68 69 73 2e  r() {..    this.
0d70: 65 6c 65 6d 65 6e 74 2e 76 61 6c 75 65 20 3d 20  element.value = 
0d80: 6d 61 74 68 2e 70 72 75 6e 65 28 74 68 69 73 2e  math.prune(this.
0d90: 76 61 6c 75 65 2c 74 68 69 73 2e 64 65 63 69 6d  value,this.decim
0da0: 61 6c 50 6c 61 63 65 73 29 3b 0a 0a 20 20 7d 0a  alPlaces);..  }.
0db0: 0a 20 20 63 6c 69 63 6b 28 29 20 7b 0a 20 20 20  .  click() {.   
0dc0: 20 74 68 69 73 2e 68 61 73 4d 6f 76 65 64 20 3d   this.hasMoved =
0dd0: 20 66 61 6c 73 65 3b 0a 20 20 20 20 74 68 69 73   false;.    this
0de0: 2e 65 6c 65 6d 65 6e 74 2e 72 65 61 64 4f 6e 6c  .element.readOnl
0df0: 79 20 3d 20 74 72 75 65 3b 0a 09 20 20 74 68 69  y = true;..  thi
0e00: 73 2e 61 63 74 75 61 6c 20 3d 20 74 68 69 73 2e  s.actual = this.
0e10: 76 61 6c 75 65 3b 0a 20 20 20 20 74 68 69 73 2e  value;.    this.
0e20: 69 6e 69 74 69 61 6c 20 3d 20 7b 20 79 3a 20 74  initial = { y: t
0e30: 68 69 73 2e 6d 6f 75 73 65 2e 79 20 7d 3b 0a 20  his.mouse.y };. 
0e40: 20 20 20 74 68 69 73 2e 63 68 61 6e 67 65 46 61     this.changeFa
0e50: 63 74 6f 72 20 3d 20 6d 61 74 68 2e 69 6e 76 65  ctor = math.inve
0e60: 72 74 28 20 74 68 69 73 2e 6d 6f 75 73 65 2e 78  rt( this.mouse.x
0e70: 20 2f 20 74 68 69 73 2e 77 69 64 74 68 20 29 3b   / this.width );
0e80: 0a 20 20 7d 0a 0a 20 20 6d 6f 76 65 28 29 20 7b  .  }..  move() {
0e90: 0a 20 20 20 20 74 68 69 73 2e 68 61 73 4d 6f 76  .    this.hasMov
0ea0: 65 64 20 3d 20 74 72 75 65 3b 0a 20 20 20 20 69  ed = true;.    i
0eb0: 66 20 28 74 68 69 73 2e 63 6c 69 63 6b 65 64 29  f (this.clicked)
0ec0: 20 7b 0a 0a 20 20 20 20 20 20 6c 65 74 20 6e 65   {..      let ne
0ed0: 77 76 61 6c 75 65 20 3d 20 74 68 69 73 2e 61 63  wvalue = this.ac
0ee0: 74 75 61 6c 20 2d 20 28 74 68 69 73 2e 6d 6f 75  tual - (this.mou
0ef0: 73 65 2e 79 20 2d 20 74 68 69 73 2e 69 6e 69 74  se.y - this.init
0f00: 69 61 6c 2e 79 29 20 2a 20 28 20 6d 61 74 68 2e  ial.y) * ( math.
0f10: 63 6c 69 70 28 20 74 68 69 73 2e 6d 61 78 2d 74  clip( this.max-t
0f20: 68 69 73 2e 6d 69 6e 2c 20 30 2c 20 31 30 30 30  his.min, 0, 1000
0f30: 20 29 20 2f 20 32 30 30 20 29 20 2a 20 4d 61 74   ) / 200 ) * Mat
0f40: 68 2e 70 6f 77 28 74 68 69 73 2e 63 68 61 6e 67  h.pow(this.chang
0f50: 65 46 61 63 74 6f 72 2c 32 29 3b 0a 20 20 20 20  eFactor,2);.    
0f60: 20 20 74 68 69 73 2e 76 61 6c 75 65 20 3d 20 6e    this.value = n
0f70: 65 77 76 61 6c 75 65 3b 0a 0a 20 20 09 09 74 68  ewvalue;..  ..th
0f80: 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a 20 20 20  is.render();.   
0f90: 20 20 20 69 66 20 28 74 68 69 73 2e 5f 76 61 6c     if (this._val
0fa0: 75 65 2e 63 68 61 6e 67 65 64 29 20 7b 0a 20 20  ue.changed) {.  
0fb0: 20 20 20 20 20 20 74 68 69 73 2e 65 6d 69 74 28        this.emit(
0fc0: 27 63 68 61 6e 67 65 27 2c 74 68 69 73 2e 76 61  'change',this.va
0fd0: 6c 75 65 29 3b 0a 20 20 20 20 20 20 7d 0a 0a 20  lue);.      }.. 
0fe0: 20 09 7d 0a 20 20 7d 0a 0a 20 20 72 65 6c 65 61   .}.  }..  relea
0ff0: 73 65 28 29 20 7b 0a 20 20 20 20 69 66 20 28 21  se() {.    if (!
1000: 74 68 69 73 2e 68 61 73 4d 6f 76 65 64 29 20 7b  this.hasMoved) {
1010: 0a 20 20 20 20 20 20 74 68 69 73 2e 65 6c 65 6d  .      this.elem
1020: 65 6e 74 2e 72 65 61 64 4f 6e 6c 79 20 3d 20 66  ent.readOnly = f
1030: 61 6c 73 65 3b 0a 20 20 09 09 74 68 69 73 2e 65  alse;.  ..this.e
1040: 6c 65 6d 65 6e 74 2e 66 6f 63 75 73 28 29 3b 0a  lement.focus();.
1050: 20 20 09 09 74 68 69 73 2e 65 6c 65 6d 65 6e 74    ..this.element
1060: 2e 73 65 74 53 65 6c 65 63 74 69 6f 6e 52 61 6e  .setSelectionRan
1070: 67 65 28 30 2c 20 74 68 69 73 2e 65 6c 65 6d 65  ge(0, this.eleme
1080: 6e 74 2e 76 61 6c 75 65 2e 6c 65 6e 67 74 68 29  nt.value.length)
1090: 3b 0a 20 20 09 09 74 68 69 73 2e 65 6c 65 6d 65  ;.  ..this.eleme
10a0: 6e 74 2e 73 74 79 6c 65 2e 62 61 63 6b 67 72 6f  nt.style.backgro
10b0: 75 6e 64 43 6f 6c 6f 72 20 3d 20 74 68 69 73 2e  undColor = this.
10c0: 63 6f 6c 6f 72 73 2e 61 63 63 65 6e 74 3b 0a 20  colors.accent;. 
10d0: 20 09 09 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e   ..this.element.
10e0: 73 74 79 6c 65 2e 63 6f 6c 6f 72 20 3d 20 74 68  style.color = th
10f0: 69 73 2e 63 6f 6c 6f 72 73 2e 6c 69 67 68 74 3b  is.colors.light;
1100: 0a 20 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20 20  .    } else {.  
1110: 20 20 20 20 64 6f 63 75 6d 65 6e 74 2e 62 6f 64      document.bod
1120: 79 2e 66 6f 63 75 73 28 29 3b 0a 20 20 20 20 7d  y.focus();.    }
1130: 0a 20 20 7d 0a 0a 20 20 2f 2a 2a 0a 20 20 43 6f  .  }..  /**.  Co
1140: 6e 6e 65 63 74 20 74 68 69 73 20 6e 75 6d 62 65  nnect this numbe
1150: 72 20 69 6e 74 65 72 66 61 63 65 20 74 6f 20 61  r interface to a
1160: 20 64 69 61 6c 20 6f 72 20 73 6c 69 64 65 72 0a   dial or slider.
1170: 20 20 40 70 61 72 61 6d 20 7b 49 6e 74 65 72 66    @param {Interf
1180: 61 63 65 7d 20 65 6c 65 6d 65 6e 74 20 45 6c 65  ace} element Ele
1190: 6d 65 6e 74 20 74 6f 20 63 6f 6e 6e 65 63 74 20  ment to connect 
11a0: 74 6f 2e 0a 20 20 40 65 78 61 6d 70 6c 65 20 6e  to..  @example n
11b0: 75 6d 62 65 72 2e 6c 69 6e 6b 28 73 6c 69 64 65  umber.link(slide
11c0: 72 29 0a 20 20 2a 2f 0a 20 20 6c 69 6e 6b 28 64  r).  */.  link(d
11d0: 65 73 74 69 6e 61 74 69 6f 6e 29 20 7b 0a 20 20  estination) {.  
11e0: 20 20 74 68 69 73 2e 6d 69 6e 20 3d 20 64 65 73    this.min = des
11f0: 74 69 6e 61 74 69 6f 6e 2e 6d 69 6e 3b 0a 20 20  tination.min;.  
1200: 20 20 74 68 69 73 2e 6d 61 78 20 3d 20 64 65 73    this.max = des
1210: 74 69 6e 61 74 69 6f 6e 2e 6d 61 78 3b 0a 20 20  tination.max;.  
1220: 20 20 74 68 69 73 2e 73 74 65 70 20 3d 20 64 65    this.step = de
1230: 73 74 69 6e 61 74 69 6f 6e 2e 73 74 65 70 3b 0a  stination.step;.
1240: 20 20 20 20 64 65 73 74 69 6e 61 74 69 6f 6e 2e      destination.
1250: 6f 6e 28 27 63 68 61 6e 67 65 27 2c 28 76 29 20  on('change',(v) 
1260: 3d 3e 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e  => {.      this.
1270: 70 61 73 73 69 76 65 55 70 64 61 74 65 28 76 29  passiveUpdate(v)
1280: 3b 0a 20 20 20 20 7d 29 3b 0a 20 20 20 20 74 68  ;.    });.    th
1290: 69 73 2e 6f 6e 28 27 63 68 61 6e 67 65 27 2c 28  is.on('change',(
12a0: 76 29 20 3d 3e 20 7b 0a 20 20 20 20 20 20 64 65  v) => {.      de
12b0: 73 74 69 6e 61 74 69 6f 6e 2e 76 61 6c 75 65 20  stination.value 
12c0: 3d 20 76 3b 0a 20 20 20 20 7d 29 3b 0a 20 20 20  = v;.    });.   
12d0: 20 74 68 69 73 2e 76 61 6c 75 65 20 3d 20 64 65   this.value = de
12e0: 73 74 69 6e 61 74 69 6f 6e 2e 76 61 6c 75 65 3b  stination.value;
12f0: 0a 20 20 2f 2a 20 20 72 65 74 75 72 6e 20 7b 0a  .  /*  return {.
1300: 20 20 20 20 20 20 6c 69 73 74 65 6e 65 72 31 3a        listener1:
1310: 20 6c 69 73 74 65 6e 65 72 31 2c 0a 20 20 20 20   listener1,.    
1320: 20 20 6c 69 73 74 65 6e 65 72 32 3a 20 6c 69 73    listener2: lis
1330: 74 65 6e 65 72 32 2c 0a 20 20 20 20 20 20 64 65  tener2,.      de
1340: 73 74 72 6f 79 3a 20 28 29 20 3d 3e 20 7b 0a 20  stroy: () => {. 
1350: 20 20 20 20 20 20 20 6c 69 73 74 65 6e 65 72 31         listener1
1360: 2e 72 65 6d 6f 76 65 28 29 20 28 6f 72 20 73 69  .remove() (or si
1370: 6d 69 6c 61 72 29 0a 20 20 20 20 20 20 20 20 6c  milar).        l
1380: 69 73 74 65 6e 65 72 32 2e 72 65 6d 6f 76 65 28  istener2.remove(
1390: 29 20 28 6f 72 20 73 69 6d 69 6c 61 72 29 0a 20  ) (or similar). 
13a0: 20 20 20 20 20 7d 0a 20 20 20 20 7d 20 2a 2f 0a       }.    } */.
13b0: 20 20 7d 0a 0a 20 20 70 61 73 73 69 76 65 55 70    }..  passiveUp
13c0: 64 61 74 65 28 76 29 20 7b 0a 20 20 20 20 74 68  date(v) {.    th
13d0: 69 73 2e 5f 76 61 6c 75 65 2e 75 70 64 61 74 65  is._value.update
13e0: 28 76 29 3b 0a 20 20 20 20 74 68 69 73 2e 72 65  (v);.    this.re
13f0: 6e 64 65 72 28 29 3b 0a 20 20 7d 0a 0a 20 20 2f  nder();.  }..  /
1400: 2a 2a 0a 20 20 54 68 65 20 69 6e 74 65 72 66 61  **.  The interfa
1410: 63 65 27 73 20 63 75 72 72 65 6e 74 20 76 61 6c  ce's current val
1420: 75 65 2e 20 49 66 20 73 65 74 20 6d 61 6e 75 61  ue. If set manua
1430: 6c 6c 79 2c 20 77 69 6c 6c 20 75 70 64 61 74 65  lly, will update
1440: 20 74 68 65 20 69 6e 74 65 72 66 61 63 65 20 61   the interface a
1450: 6e 64 20 74 72 69 67 67 65 72 20 74 68 65 20 6f  nd trigger the o
1460: 75 74 70 75 74 20 65 76 65 6e 74 2e 0a 20 20 40  utput event..  @
1470: 74 79 70 65 20 7b 6e 75 6d 62 65 72 7d 0a 20 20  type {number}.  
1480: 40 65 78 61 6d 70 6c 65 20 6e 75 6d 62 65 72 2e  @example number.
1490: 76 61 6c 75 65 20 3d 20 31 30 3b 0a 20 20 2a 2f  value = 10;.  */
14a0: 0a 20 20 67 65 74 20 76 61 6c 75 65 28 29 20 7b  .  get value() {
14b0: 0a 20 20 20 20 72 65 74 75 72 6e 20 74 68 69 73  .    return this
14c0: 2e 5f 76 61 6c 75 65 2e 76 61 6c 75 65 3b 0a 20  ._value.value;. 
14d0: 20 7d 0a 20 20 73 65 74 20 76 61 6c 75 65 28 76   }.  set value(v
14e0: 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 5f 76 61  ) {.    this._va
14f0: 6c 75 65 2e 75 70 64 61 74 65 28 76 29 3b 0a 20  lue.update(v);. 
1500: 20 20 20 74 68 69 73 2e 65 6d 69 74 28 27 63 68     this.emit('ch
1510: 61 6e 67 65 27 2c 74 68 69 73 2e 76 61 6c 75 65  ange',this.value
1520: 29 3b 0a 20 20 20 20 74 68 69 73 2e 72 65 6e 64  );.    this.rend
1530: 65 72 28 29 3b 0a 20 20 7d 0a 0a 20 20 2f 2a 2a  er();.  }..  /**
1540: 0a 20 20 4c 6f 77 65 72 20 6c 69 6d 69 74 20 6f  .  Lower limit o
1550: 66 20 74 68 65 20 6e 75 6d 62 65 72 27 73 20 6f  f the number's o
1560: 75 74 70 75 74 20 72 61 6e 67 65 0a 20 20 40 74  utput range.  @t
1570: 79 70 65 20 7b 6e 75 6d 62 65 72 7d 0a 20 20 40  ype {number}.  @
1580: 65 78 61 6d 70 6c 65 20 6e 75 6d 62 65 72 2e 6d  example number.m
1590: 69 6e 20 3d 20 31 30 30 30 3b 0a 20 20 2a 2f 0a  in = 1000;.  */.
15a0: 20 20 67 65 74 20 6d 69 6e 28 29 20 7b 0a 20 20    get min() {.  
15b0: 20 20 72 65 74 75 72 6e 20 74 68 69 73 2e 5f 76    return this._v
15c0: 61 6c 75 65 2e 6d 69 6e 3b 0a 20 20 7d 0a 20 20  alue.min;.  }.  
15d0: 73 65 74 20 6d 69 6e 28 76 29 20 7b 0a 20 20 20  set min(v) {.   
15e0: 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e 6d 69 6e   this._value.min
15f0: 20 3d 20 76 3b 0a 20 20 7d 0a 0a 20 20 2f 2a 2a   = v;.  }..  /**
1600: 0a 20 20 55 70 70 65 72 20 6c 69 6d 69 74 20 6f  .  Upper limit o
1610: 66 20 74 68 65 20 6e 75 6d 62 65 72 27 73 20 6f  f the number's o
1620: 75 74 70 75 74 20 72 61 6e 67 65 0a 20 20 40 74  utput range.  @t
1630: 79 70 65 20 7b 6e 75 6d 62 65 72 7d 0a 20 20 40  ype {number}.  @
1640: 65 78 61 6d 70 6c 65 20 6e 75 6d 62 65 72 2e 6d  example number.m
1650: 61 78 20 3d 20 31 30 30 30 3b 0a 20 20 2a 2f 0a  ax = 1000;.  */.
1660: 20 20 67 65 74 20 6d 61 78 28 29 20 7b 0a 20 20    get max() {.  
1670: 20 20 72 65 74 75 72 6e 20 74 68 69 73 2e 5f 76    return this._v
1680: 61 6c 75 65 2e 6d 61 78 3b 0a 20 20 7d 0a 20 20  alue.max;.  }.  
1690: 73 65 74 20 6d 61 78 28 76 29 20 7b 0a 20 20 20  set max(v) {.   
16a0: 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e 6d 61 78   this._value.max
16b0: 20 3d 20 76 3b 0a 20 20 7d 0a 0a 20 20 2f 2a 2a   = v;.  }..  /**
16c0: 0a 20 20 54 68 65 20 69 6e 63 72 65 6d 65 6e 74  .  The increment
16d0: 20 74 68 61 74 20 74 68 65 20 6e 75 6d 62 65 72   that the number
16e0: 27 73 20 76 61 6c 75 65 20 63 68 61 6e 67 65 73  's value changes
16f0: 20 62 79 2e 0a 20 20 40 74 79 70 65 20 7b 6e 75   by..  @type {nu
1700: 6d 62 65 72 7d 0a 20 20 40 65 78 61 6d 70 6c 65  mber}.  @example
1710: 20 6e 75 6d 62 65 72 2e 73 74 65 70 20 3d 20 35   number.step = 5
1720: 3b 0a 20 20 2a 2f 0a 20 20 67 65 74 20 73 74 65  ;.  */.  get ste
1730: 70 28 29 20 7b 0a 20 20 20 20 72 65 74 75 72 6e  p() {.    return
1740: 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e 73 74 65   this._value.ste
1750: 70 3b 0a 20 20 7d 0a 20 20 73 65 74 20 73 74 65  p;.  }.  set ste
1760: 70 28 76 29 20 7b 0a 20 20 20 20 74 68 69 73 2e  p(v) {.    this.
1770: 5f 76 61 6c 75 65 2e 73 74 65 70 20 3d 20 76 3b  _value.step = v;
1780: 0a 20 20 7d 0a 0a 7d 0a                          .  }..}.