Artifact
7939255c49516447237bb1764a0bd72c0306062ef9e87af4f9e69fcd40495eb8:
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 54 6f 67 67 6c 65 4d 6f 64 65 6c .let ToggleModel
0040: 20 3d 20 72 65 71 75 69 72 65 28 27 2e 2e 2f 6d = require('../m
0050: 6f 64 65 6c 73 2f 74 6f 67 67 6c 65 27 29 3b 0a odels/toggle');.
0060: 6c 65 74 20 49 6e 74 65 72 66 61 63 65 20 3d 20 let Interface =
0070: 72 65 71 75 69 72 65 28 27 2e 2e 2f 63 6f 72 65 require('../core
0080: 2f 69 6e 74 65 72 66 61 63 65 27 29 3b 0a 0a 2f /interface');../
0090: 2a 2a 0a 2a 20 54 6f 67 67 6c 65 0a 2a 0a 2a 20 **.* Toggle.*.*
00a0: 40 64 65 73 63 72 69 70 74 69 6f 6e 20 42 69 6e @description Bin
00b0: 61 72 79 20 73 77 69 74 63 68 0a 2a 0a 2a 20 40 ary switch.*.* @
00c0: 64 65 6d 6f 20 3c 73 70 61 6e 20 6e 65 78 75 73 demo <span nexus
00d0: 2d 75 69 3d 22 74 6f 67 67 6c 65 22 3e 3c 2f 73 -ui="toggle"></s
00e0: 70 61 6e 3e 0a 2a 0a 2a 20 40 65 78 61 6d 70 6c pan>.*.* @exampl
00f0: 65 0a 2a 20 76 61 72 20 74 6f 67 67 6c 65 20 3d e.* var toggle =
0100: 20 6e 65 77 20 4e 65 78 75 73 2e 54 6f 67 67 6c new Nexus.Toggl
0110: 65 28 27 23 74 61 72 67 65 74 27 29 0a 2a 0a 2a e('#target').*.*
0120: 20 40 65 78 61 6d 70 6c 65 0a 2a 20 76 61 72 20 @example.* var
0130: 74 6f 67 67 6c 65 20 3d 20 6e 65 77 20 4e 65 78 toggle = new Nex
0140: 75 73 2e 54 6f 67 67 6c 65 28 27 23 74 61 72 67 us.Toggle('#targ
0150: 65 74 27 2c 7b 0a 2a 20 20 20 20 20 27 73 69 7a et',{.* 'siz
0160: 65 27 3a 20 5b 34 30 2c 32 30 5d 2c 0a 2a 20 20 e': [40,20],.*
0170: 20 20 20 27 73 74 61 74 65 27 3a 20 66 61 6c 73 'state': fals
0180: 65 0a 2a 20 7d 29 0a 2a 0a 2a 20 40 6f 75 74 70 e.* }).*.* @outp
0190: 75 74 0a 2a 20 63 68 61 6e 67 65 0a 2a 20 46 69 ut.* change.* Fi
01a0: 72 65 73 20 61 6e 79 20 74 69 6d 65 20 74 68 65 res any time the
01b0: 20 69 6e 74 65 72 66 61 63 65 27 73 20 76 61 6c interface's val
01c0: 75 65 20 63 68 61 6e 67 65 73 2e 20 3c 62 72 3e ue changes. <br>
01d0: 0a 2a 20 50 61 72 61 6d 65 74 65 72 3a 20 54 68 .* Parameter: Th
01e0: 65 20 62 6f 6f 6c 65 61 6e 20 73 74 61 74 65 20 e boolean state
01f0: 6f 66 20 74 68 65 20 69 6e 74 65 72 66 61 63 65 of the interface
0200: 2e 0a 2a 0a 2a 20 40 6f 75 74 70 75 74 65 78 61 ..*.* @outputexa
0210: 6d 70 6c 65 0a 2a 20 74 6f 67 67 6c 65 2e 6f 6e mple.* toggle.on
0220: 28 27 63 68 61 6e 67 65 27 2c 66 75 6e 63 74 69 ('change',functi
0230: 6f 6e 28 76 29 20 7b 0a 2a 20 20 20 63 6f 6e 73 on(v) {.* cons
0240: 6f 6c 65 2e 6c 6f 67 28 76 29 3b 0a 2a 20 7d 29 ole.log(v);.* })
0250: 0a 2a 0a 2a 0a 2a 2f 0a 65 78 70 6f 72 74 20 64 .*.*.*/.export d
0260: 65 66 61 75 6c 74 20 63 6c 61 73 73 20 54 6f 67 efault class Tog
0270: 67 6c 65 20 65 78 74 65 6e 64 73 20 49 6e 74 65 gle extends Inte
0280: 72 66 61 63 65 20 7b 0a 0a 20 20 63 6f 6e 73 74 rface {.. const
0290: 72 75 63 74 6f 72 28 29 20 7b 0a 0a 20 20 20 20 ructor() {..
02a0: 6c 65 74 20 6f 70 74 69 6f 6e 73 20 3d 20 5b 27 let options = ['
02b0: 76 61 6c 75 65 27 5d 3b 0a 0a 20 20 20 20 6c 65 value'];.. le
02c0: 74 20 64 65 66 61 75 6c 74 73 20 3d 20 7b 0a 20 t defaults = {.
02d0: 20 20 20 20 20 27 73 69 7a 65 27 3a 20 5b 34 30 'size': [40
02e0: 2c 32 30 5d 2c 0a 20 20 20 20 20 20 27 74 61 72 ,20],. 'tar
02f0: 67 65 74 27 3a 20 66 61 6c 73 65 2c 0a 20 20 20 get': false,.
0300: 20 20 20 27 73 74 61 74 65 27 3a 20 66 61 6c 73 'state': fals
0310: 65 0a 20 20 20 20 7d 3b 0a 0a 20 20 20 20 73 75 e. };.. su
0320: 70 65 72 28 61 72 67 75 6d 65 6e 74 73 2c 6f 70 per(arguments,op
0330: 74 69 6f 6e 73 2c 64 65 66 61 75 6c 74 73 29 3b tions,defaults);
0340: 0a 0a 20 20 20 20 74 68 69 73 2e 5f 73 74 61 74 .. this._stat
0350: 65 20 3d 20 6e 65 77 20 54 6f 67 67 6c 65 4d 6f e = new ToggleMo
0360: 64 65 6c 28 74 68 69 73 2e 73 65 74 74 69 6e 67 del(this.setting
0370: 73 2e 73 74 61 74 65 29 3b 0a 0a 20 20 20 20 74 s.state);.. t
0380: 68 69 73 2e 69 6e 69 74 28 29 3b 0a 0a 20 20 7d his.init();.. }
0390: 0a 0a 20 20 62 75 69 6c 64 49 6e 74 65 72 66 61 .. buildInterfa
03a0: 63 65 28 29 20 7b 0a 0a 20 20 20 20 74 68 69 73 ce() {.. this
03b0: 2e 62 61 72 20 3d 20 73 76 67 2e 63 72 65 61 74 .bar = svg.creat
03c0: 65 28 27 72 65 63 74 27 29 3b 0a 20 20 20 20 74 e('rect');. t
03d0: 68 69 73 2e 6b 6e 6f 62 20 3d 20 73 76 67 2e 63 his.knob = svg.c
03e0: 72 65 61 74 65 28 27 63 69 72 63 6c 65 27 29 3b reate('circle');
03f0: 0a 20 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e . this.elemen
0400: 74 2e 61 70 70 65 6e 64 43 68 69 6c 64 28 74 68 t.appendChild(th
0410: 69 73 2e 62 61 72 29 3b 0a 20 20 20 20 74 68 69 is.bar);. thi
0420: 73 2e 65 6c 65 6d 65 6e 74 2e 61 70 70 65 6e 64 s.element.append
0430: 43 68 69 6c 64 28 74 68 69 73 2e 6b 6e 6f 62 29 Child(this.knob)
0440: 3b 0a 0a 20 20 7d 0a 0a 20 20 73 69 7a 65 49 6e ;.. }.. sizeIn
0450: 74 65 72 66 61 63 65 28 29 20 7b 0a 0a 20 20 20 terface() {..
0460: 20 69 66 20 28 74 68 69 73 2e 68 65 69 67 68 74 if (this.height
0470: 20 3c 20 74 68 69 73 2e 77 69 64 74 68 2f 32 29 < this.width/2)
0480: 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 6b 6e {. this.kn
0490: 6f 62 53 69 7a 65 20 3d 20 74 68 69 73 2e 68 65 obSize = this.he
04a0: 69 67 68 74 2f 32 3b 0a 20 20 20 20 7d 20 65 6c ight/2;. } el
04b0: 73 65 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e se {. this.
04c0: 6b 6e 6f 62 53 69 7a 65 20 3d 20 74 68 69 73 2e knobSize = this.
04d0: 77 69 64 74 68 2f 34 3b 0a 20 20 20 20 7d 0a 0a width/4;. }..
04e0: 20 20 20 20 74 68 69 73 2e 62 61 72 2e 73 65 74 this.bar.set
04f0: 41 74 74 72 69 62 75 74 65 28 27 78 27 2c 74 68 Attribute('x',th
0500: 69 73 2e 77 69 64 74 68 2f 32 20 2d 20 74 68 69 is.width/2 - thi
0510: 73 2e 6b 6e 6f 62 53 69 7a 65 2a 31 2e 35 29 3b s.knobSize*1.5);
0520: 0a 20 20 20 20 74 68 69 73 2e 62 61 72 2e 73 65 . this.bar.se
0530: 74 41 74 74 72 69 62 75 74 65 28 27 79 27 2c 74 tAttribute('y',t
0540: 68 69 73 2e 68 65 69 67 68 74 2f 32 20 2d 20 74 his.height/2 - t
0550: 68 69 73 2e 6b 6e 6f 62 53 69 7a 65 2f 32 29 3b his.knobSize/2);
0560: 0a 20 20 20 20 74 68 69 73 2e 62 61 72 2e 73 65 . this.bar.se
0570: 74 41 74 74 72 69 62 75 74 65 28 27 72 78 27 2c tAttribute('rx',
0580: 74 68 69 73 2e 6b 6e 6f 62 53 69 7a 65 2f 32 29 this.knobSize/2)
0590: 3b 0a 20 20 20 20 74 68 69 73 2e 62 61 72 2e 73 ;. this.bar.s
05a0: 65 74 41 74 74 72 69 62 75 74 65 28 27 72 79 27 etAttribute('ry'
05b0: 2c 74 68 69 73 2e 6b 6e 6f 62 53 69 7a 65 2f 32 ,this.knobSize/2
05c0: 29 3b 0a 20 20 20 20 74 68 69 73 2e 62 61 72 2e );. this.bar.
05d0: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 77 69 setAttribute('wi
05e0: 64 74 68 27 2c 74 68 69 73 2e 6b 6e 6f 62 53 69 dth',this.knobSi
05f0: 7a 65 2a 33 29 3b 0a 20 20 20 20 74 68 69 73 2e ze*3);. this.
0600: 62 61 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 bar.setAttribute
0610: 28 27 68 65 69 67 68 74 27 2c 74 68 69 73 2e 6b ('height',this.k
0620: 6e 6f 62 53 69 7a 65 29 3b 0a 0a 20 20 20 20 74 nobSize);.. t
0630: 68 69 73 2e 6b 6e 6f 62 2e 73 65 74 41 74 74 72 his.knob.setAttr
0640: 69 62 75 74 65 28 27 63 78 27 2c 74 68 69 73 2e ibute('cx',this.
0650: 77 69 64 74 68 2f 32 20 2d 20 74 68 69 73 2e 6b width/2 - this.k
0660: 6e 6f 62 53 69 7a 65 29 3b 0a 20 20 20 20 74 68 nobSize);. th
0670: 69 73 2e 6b 6e 6f 62 2e 73 65 74 41 74 74 72 69 is.knob.setAttri
0680: 62 75 74 65 28 27 63 79 27 2c 74 68 69 73 2e 68 bute('cy',this.h
0690: 65 69 67 68 74 2f 32 29 3b 0a 20 20 20 20 74 68 eight/2);. th
06a0: 69 73 2e 6b 6e 6f 62 2e 73 65 74 41 74 74 72 69 is.knob.setAttri
06b0: 62 75 74 65 28 27 72 27 2c 74 68 69 73 2e 6b 6e bute('r',this.kn
06c0: 6f 62 53 69 7a 65 29 3b 0a 0a 20 20 7d 0a 0a 20 obSize);.. }..
06d0: 20 63 6f 6c 6f 72 49 6e 74 65 72 66 61 63 65 28 colorInterface(
06e0: 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 6b 6e 6f ) {. this.kno
06f0: 62 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 b.setAttribute('
0700: 66 69 6c 6c 27 2c 20 74 68 69 73 2e 63 6f 6c 6f fill', this.colo
0710: 72 73 2e 61 63 63 65 6e 74 29 3b 0a 20 20 20 20 rs.accent);.
0720: 74 68 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a 20 this.render();.
0730: 20 7d 0a 0a 20 20 72 65 6e 64 65 72 28 29 20 7b }.. render() {
0740: 0a 20 20 20 20 69 66 20 28 21 74 68 69 73 2e 73 . if (!this.s
0750: 74 61 74 65 29 20 7b 0a 20 20 20 20 20 20 74 68 tate) {. th
0760: 69 73 2e 6b 6e 6f 62 2e 73 65 74 41 74 74 72 69 is.knob.setAttri
0770: 62 75 74 65 28 27 63 78 27 2c 74 68 69 73 2e 77 bute('cx',this.w
0780: 69 64 74 68 2f 32 20 2d 20 74 68 69 73 2e 6b 6e idth/2 - this.kn
0790: 6f 62 53 69 7a 65 29 3b 0a 20 20 20 20 20 20 74 obSize);. t
07a0: 68 69 73 2e 62 61 72 2e 73 65 74 41 74 74 72 69 his.bar.setAttri
07b0: 62 75 74 65 28 27 66 69 6c 6c 27 2c 20 74 68 69 bute('fill', thi
07c0: 73 2e 63 6f 6c 6f 72 73 2e 66 69 6c 6c 29 3b 0a s.colors.fill);.
07d0: 20 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20 20 20 } else {.
07e0: 20 20 20 74 68 69 73 2e 6b 6e 6f 62 2e 73 65 74 this.knob.set
07f0: 41 74 74 72 69 62 75 74 65 28 27 63 78 27 2c 74 Attribute('cx',t
0800: 68 69 73 2e 77 69 64 74 68 2f 32 20 2b 20 74 68 his.width/2 + th
0810: 69 73 2e 6b 6e 6f 62 53 69 7a 65 29 3b 0a 20 20 is.knobSize);.
0820: 20 20 20 20 74 68 69 73 2e 62 61 72 2e 73 65 74 this.bar.set
0830: 41 74 74 72 69 62 75 74 65 28 27 66 69 6c 6c 27 Attribute('fill'
0840: 2c 20 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 61 63 , this.colors.ac
0850: 63 65 6e 74 29 3b 0a 20 20 20 20 7d 0a 20 20 7d cent);. }. }
0860: 0a 0a 20 20 63 6c 69 63 6b 28 29 20 7b 0a 20 20 .. click() {.
0870: 20 20 74 68 69 73 2e 66 6c 69 70 28 29 3b 0a 20 this.flip();.
0880: 20 20 20 74 68 69 73 2e 72 65 6e 64 65 72 28 29 this.render()
0890: 3b 0a 20 20 20 20 74 68 69 73 2e 65 6d 69 74 28 ;. this.emit(
08a0: 27 63 68 61 6e 67 65 27 2c 74 68 69 73 2e 73 74 'change',this.st
08b0: 61 74 65 29 3b 0a 20 20 7d 0a 0a 20 20 2f 2a 2a ate);. }.. /**
08c0: 0a 20 20 57 68 65 74 68 65 72 20 74 68 65 20 74 . Whether the t
08d0: 6f 67 67 6c 65 20 69 73 20 63 75 72 72 65 6e 74 oggle is current
08e0: 6c 79 20 6f 6e 20 6f 72 20 6f 66 66 2e 20 53 65 ly on or off. Se
08f0: 74 74 69 6e 67 20 74 68 69 73 20 70 72 6f 70 65 tting this prope
0900: 72 74 79 20 77 69 6c 6c 20 75 70 64 61 74 65 20 rty will update
0910: 74 68 65 20 74 6f 67 67 6c 65 20 69 6e 74 65 72 the toggle inter
0920: 66 61 63 65 20 61 6e 64 20 74 72 69 67 67 65 72 face and trigger
0930: 20 74 68 65 20 6f 75 74 70 75 74 20 65 76 65 6e the output even
0940: 74 2e 0a 20 20 40 74 79 70 65 20 7b 62 6f 6f 6c t.. @type {bool
0950: 65 61 6e 7d 0a 20 20 40 65 78 61 6d 70 6c 65 20 ean}. @example
0960: 74 6f 67 67 6c 65 2e 73 74 61 74 65 20 3d 20 66 toggle.state = f
0970: 61 6c 73 65 3b 0a 20 20 2a 2f 0a 20 20 67 65 74 alse;. */. get
0980: 20 73 74 61 74 65 28 29 20 7b 0a 20 20 20 20 72 state() {. r
0990: 65 74 75 72 6e 20 74 68 69 73 2e 5f 73 74 61 74 eturn this._stat
09a0: 65 2e 73 74 61 74 65 3b 0a 20 20 7d 0a 20 20 73 e.state;. }. s
09b0: 65 74 20 73 74 61 74 65 28 76 61 6c 75 65 29 20 et state(value)
09c0: 7b 0a 20 20 20 20 74 68 69 73 2e 5f 73 74 61 74 {. this._stat
09d0: 65 2e 66 6c 69 70 28 76 61 6c 75 65 29 3b 0a 20 e.flip(value);.
09e0: 20 20 20 74 68 69 73 2e 65 6d 69 74 28 27 63 68 this.emit('ch
09f0: 61 6e 67 65 27 2c 74 68 69 73 2e 73 74 61 74 65 ange',this.state
0a00: 29 3b 0a 20 20 20 20 74 68 69 73 2e 72 65 6e 64 );. this.rend
0a10: 65 72 28 29 3b 0a 20 20 7d 0a 0a 0a 20 20 2f 2a er();. }... /*
0a20: 2a 0a 20 20 2a 20 53 77 69 74 63 68 20 74 68 65 *. * Switch the
0a30: 20 74 6f 67 67 6c 65 20 73 74 61 74 65 20 74 6f toggle state to
0a40: 20 69 74 73 20 6f 70 70 6f 73 69 74 65 20 73 74 its opposite st
0a50: 61 74 65 0a 20 20 2a 20 40 65 78 61 6d 70 6c 65 ate. * @example
0a60: 0a 20 20 2a 20 74 6f 67 67 6c 65 2e 66 6c 69 70 . * toggle.flip
0a70: 28 29 3b 0a 20 20 2a 2f 0a 20 20 66 6c 69 70 28 ();. */. flip(
0a80: 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 5f 73 74 ) {. this._st
0a90: 61 74 65 2e 66 6c 69 70 28 29 3b 0a 20 20 20 20 ate.flip();.
0aa0: 74 68 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a 20 this.render();.
0ab0: 20 7d 0a 0a 7d 0a }..}.