Artifact
425ce63b9291c3da73fb64f65af386d2af3bd6f8e4925175a2073477d442d926:
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 42 75 74 74 6f 6e 54 65 6d 70 6c .let ButtonTempl
0040: 61 74 65 20 3d 20 72 65 71 75 69 72 65 28 27 2e ate = require('.
0050: 2e 2f 63 6f 6d 70 6f 6e 65 6e 74 73 2f 62 75 74 ./components/but
0060: 74 6f 6e 74 65 6d 70 6c 61 74 65 27 29 3b 0a 0a tontemplate');..
0070: 2f 2a 2a 0a 2a 20 42 75 74 74 6f 6e 0a 2a 0a 2a /**.* Button.*.*
0080: 20 40 64 65 73 63 72 69 70 74 69 6f 6e 20 43 69 @description Ci
0090: 72 63 75 6c 61 72 20 62 75 74 74 6f 6e 20 77 69 rcular button wi
00a0: 74 68 20 6f 70 74 69 6f 6e 61 6c 20 61 66 74 65 th optional afte
00b0: 72 74 6f 75 63 68 2e 0a 2a 0a 2a 20 40 64 65 6d rtouch..*.* @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 62 75 74 74 6f 6e 22 3e 3c 2f 73 70 61 6e ="button"></span
00e0: 3e 0a 2a 0a 2a 20 40 65 78 61 6d 70 6c 65 0a 2a >.*.* @example.*
00f0: 20 76 61 72 20 62 75 74 74 6f 6e 20 3d 20 6e 65 var button = ne
0100: 77 20 4e 65 78 75 73 2e 42 75 74 74 6f 6e 28 27 w Nexus.Button('
0110: 23 74 61 72 67 65 74 27 29 0a 2a 0a 2a 20 40 65 #target').*.* @e
0120: 78 61 6d 70 6c 65 0a 2a 20 76 61 72 20 62 75 74 xample.* var but
0130: 74 6f 6e 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e ton = new Nexus.
0140: 42 75 74 74 6f 6e 28 27 23 74 61 72 67 65 74 27 Button('#target'
0150: 2c 7b 0a 2a 20 20 20 27 73 69 7a 65 27 3a 20 5b ,{.* 'size': [
0160: 38 30 2c 38 30 5d 2c 0a 2a 20 20 20 27 6d 6f 64 80,80],.* 'mod
0170: 65 27 3a 20 27 61 66 74 65 72 74 6f 75 63 68 27 e': 'aftertouch'
0180: 2c 0a 2a 20 20 20 27 73 74 61 74 65 27 3a 20 66 ,.* 'state': f
0190: 61 6c 73 65 0a 2a 20 7d 29 0a 2a 0a 2a 20 40 6f alse.* }).*.* @o
01a0: 75 74 70 75 74 0a 2a 20 63 68 61 6e 67 65 0a 2a utput.* change.*
01b0: 20 46 69 72 65 73 20 61 6e 79 20 74 69 6d 65 20 Fires any time
01c0: 74 68 65 20 69 6e 74 65 72 66 61 63 65 27 73 20 the interface's
01d0: 76 61 6c 75 65 20 63 68 61 6e 67 65 73 2e 20 3c value changes. <
01e0: 62 72 3e 0a 2a 20 49 6e 20 3c 62 3e 62 75 74 74 br>.* In <b>butt
01f0: 6f 6e 20 6d 6f 64 65 3c 2f 62 3e 2c 20 3c 62 3e on mode</b>, <b>
0200: 74 6f 67 67 6c 65 20 6d 6f 64 65 3c 2f 62 3e 2c toggle mode</b>,
0210: 20 61 6e 64 20 3c 62 3e 69 6d 70 75 6c 73 65 20 and <b>impulse
0220: 6d 6f 64 65 3c 2f 62 3e 2c 20 74 68 65 20 6f 75 mode</b>, the ou
0230: 74 70 75 74 20 64 61 74 61 20 69 73 20 61 20 62 tput data is a b
0240: 6f 6f 6c 65 61 6e 20 64 65 73 63 72 69 62 69 6e oolean describin
0250: 67 20 74 68 65 20 73 74 61 74 65 20 6f 66 20 74 g the state of t
0260: 68 65 20 62 75 74 74 6f 6e 2e 3c 62 72 3e 0a 2a he button.<br>.*
0270: 20 49 6e 20 3c 62 3e 61 66 74 65 72 74 6f 75 63 In <b>aftertouc
0280: 68 20 6d 6f 64 65 3c 2f 62 3e 2c 20 74 68 65 20 h mode</b>, the
0290: 6f 75 74 70 75 74 20 64 61 74 61 20 69 73 20 61 output data is a
02a0: 6e 20 6f 62 6a 65 63 74 20 63 6f 6e 74 61 69 6e n object contain
02b0: 69 6e 67 20 78 20 28 30 2d 31 29 20 61 6e 64 20 ing x (0-1) and
02c0: 79 20 28 30 2d 31 29 20 70 6f 73 69 74 69 6f 6e y (0-1) position
02d0: 73 20 6f 66 20 61 66 74 65 72 74 6f 75 63 68 2e s of aftertouch.
02e0: 0a 2a 0a 2a 20 40 6f 75 74 70 75 74 65 78 61 6d .*.* @outputexam
02f0: 70 6c 65 0a 2a 20 62 75 74 74 6f 6e 2e 6f 6e 28 ple.* button.on(
0300: 27 63 68 61 6e 67 65 27 2c 66 75 6e 63 74 69 6f 'change',functio
0310: 6e 28 76 29 20 7b 0a 2a 20 20 20 2f 2f 20 76 20 n(v) {.* // v
0320: 69 73 20 74 68 65 20 76 61 6c 75 65 20 6f 66 20 is the value of
0330: 74 68 65 20 62 75 74 74 6f 6e 0a 2a 20 20 20 63 the button.* c
0340: 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 76 29 3b 0a 2a onsole.log(v);.*
0350: 20 7d 29 0a 2a 0a 2a 2f 0a 0a 65 78 70 6f 72 74 }).*.*/..export
0360: 20 64 65 66 61 75 6c 74 20 63 6c 61 73 73 20 42 default class B
0370: 75 74 74 6f 6e 20 65 78 74 65 6e 64 73 20 42 75 utton extends Bu
0380: 74 74 6f 6e 54 65 6d 70 6c 61 74 65 20 7b 0a 0a ttonTemplate {..
0390: 20 20 63 6f 6e 73 74 72 75 63 74 6f 72 28 29 20 constructor()
03a0: 7b 0a 0a 20 20 20 20 6c 65 74 20 6f 70 74 69 6f {.. let optio
03b0: 6e 73 20 3d 20 5b 27 6d 6f 64 65 27 5d 3b 0a 0a ns = ['mode'];..
03c0: 0a 20 20 20 20 6c 65 74 20 64 65 66 61 75 6c 74 . let default
03d0: 73 20 3d 20 7b 0a 20 20 20 20 20 20 27 73 69 7a s = {. 'siz
03e0: 65 27 3a 20 5b 38 30 2c 38 30 5d 2c 0a 20 20 20 e': [80,80],.
03f0: 20 20 20 27 6d 6f 64 65 27 3a 20 27 61 66 74 65 'mode': 'afte
0400: 72 74 6f 75 63 68 27 2c 20 2f 2f 20 62 75 74 74 rtouch', // butt
0410: 6f 6e 2c 20 61 66 74 65 72 74 6f 75 63 68 2c 20 on, aftertouch,
0420: 69 6d 70 75 6c 73 65 2c 20 74 6f 67 67 6c 65 0a impulse, toggle.
0430: 20 20 20 20 20 20 27 73 74 61 74 65 27 3a 20 66 'state': f
0440: 61 6c 73 65 0a 20 20 20 20 7d 3b 0a 0a 20 20 20 alse. };..
0450: 20 73 75 70 65 72 28 61 72 67 75 6d 65 6e 74 73 super(arguments
0460: 2c 6f 70 74 69 6f 6e 73 2c 64 65 66 61 75 6c 74 ,options,default
0470: 73 29 3b 0a 0a 0a 20 20 20 20 2f 2a 2a 0a 20 20 s);... /**.
0480: 20 20 2a 20 49 6e 74 65 72 61 63 74 69 6f 6e 20 * Interaction
0490: 6d 6f 64 65 3a 20 73 75 70 70 6f 72 74 73 20 22 mode: supports "
04a0: 62 75 74 74 6f 6e 22 2c 20 22 61 66 74 65 72 74 button", "aftert
04b0: 6f 75 63 68 22 2c 20 22 69 6d 70 75 6c 73 65 22 ouch", "impulse"
04c0: 2c 20 6f 72 20 22 74 6f 67 67 6c 65 22 0a 20 20 , or "toggle".
04d0: 20 20 2a 20 40 74 79 70 65 20 7b 73 74 72 69 6e * @type {strin
04e0: 67 7d 0a 20 20 20 20 2a 20 40 65 78 61 6d 70 6c g}. * @exampl
04f0: 65 20 62 75 74 74 6f 6e 2e 6d 6f 64 65 20 3d 20 e button.mode =
0500: 27 74 6f 67 67 6c 65 27 3b 0a 20 20 20 20 2a 2f 'toggle';. */
0510: 0a 20 20 20 20 74 68 69 73 2e 6d 6f 64 65 20 3d . this.mode =
0520: 20 74 68 69 73 2e 73 65 74 74 69 6e 67 73 2e 6d this.settings.m
0530: 6f 64 65 3b 0a 0a 20 20 20 20 74 68 69 73 2e 69 ode;.. this.i
0540: 6e 69 74 28 29 3b 0a 20 20 20 20 74 68 69 73 2e nit();. this.
0550: 72 65 6e 64 65 72 28 29 3b 0a 0a 20 20 7d 0a 0a render();.. }..
0560: 20 20 62 75 69 6c 64 49 6e 74 65 72 66 61 63 65 buildInterface
0570: 28 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 70 61 () {. this.pa
0580: 64 20 3d 20 73 76 67 2e 63 72 65 61 74 65 28 27 d = svg.create('
0590: 63 69 72 63 6c 65 27 29 3b 0a 20 20 20 20 74 68 circle');. th
05a0: 69 73 2e 65 6c 65 6d 65 6e 74 2e 61 70 70 65 6e is.element.appen
05b0: 64 43 68 69 6c 64 28 74 68 69 73 2e 70 61 64 29 dChild(this.pad)
05c0: 3b 0a 0a 20 20 20 20 74 68 69 73 2e 69 6e 74 65 ;.. this.inte
05d0: 72 61 63 74 69 6f 6e 54 61 72 67 65 74 20 3d 20 ractionTarget =
05e0: 74 68 69 73 2e 70 61 64 3b 0a 0a 20 20 20 20 2f this.pad;.. /
05f0: 2f 20 6f 6e 6c 79 20 75 73 65 64 20 69 66 20 69 / only used if i
0600: 6e 20 27 61 66 74 65 72 74 6f 75 63 68 27 20 6d n 'aftertouch' m
0610: 6f 64 65 0a 20 20 20 20 74 68 69 73 2e 64 65 66 ode. this.def
0620: 73 20 3d 20 73 76 67 2e 63 72 65 61 74 65 28 27 s = svg.create('
0630: 64 65 66 73 27 29 3b 0a 20 20 20 20 74 68 69 73 defs');. this
0640: 2e 65 6c 65 6d 65 6e 74 2e 61 70 70 65 6e 64 43 .element.appendC
0650: 68 69 6c 64 28 74 68 69 73 2e 64 65 66 73 29 3b hild(this.defs);
0660: 0a 0a 20 20 20 20 74 68 69 73 2e 67 72 61 64 69 .. this.gradi
0670: 65 6e 74 20 3d 20 73 76 67 2e 72 61 64 69 61 6c ent = svg.radial
0680: 47 72 61 64 69 65 6e 74 28 74 68 69 73 2e 64 65 Gradient(this.de
0690: 66 73 2c 32 29 3b 0a 0a 20 20 20 20 74 68 69 73 fs,2);.. this
06a0: 2e 67 72 61 64 69 65 6e 74 2e 73 74 6f 70 73 5b .gradient.stops[
06b0: 30 5d 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 0].setAttribute(
06c0: 27 6f 66 66 73 65 74 27 2c 20 27 33 30 25 27 29 'offset', '30%')
06d0: 3b 0a 0a 20 20 20 20 74 68 69 73 2e 67 72 61 64 ;.. this.grad
06e0: 69 65 6e 74 2e 73 74 6f 70 73 5b 31 5d 2e 73 65 ient.stops[1].se
06f0: 74 41 74 74 72 69 62 75 74 65 28 27 6f 66 66 73 tAttribute('offs
0700: 65 74 27 2c 20 27 31 30 30 25 27 29 3b 0a 0a 20 et', '100%');..
0710: 20 7d 0a 0a 20 20 73 69 7a 65 49 6e 74 65 72 66 }.. sizeInterf
0720: 61 63 65 28 29 20 7b 0a 0a 20 20 20 20 74 68 69 ace() {.. thi
0730: 73 2e 70 61 64 2e 73 65 74 41 74 74 72 69 62 75 s.pad.setAttribu
0740: 74 65 28 27 63 78 27 2c 74 68 69 73 2e 77 69 64 te('cx',this.wid
0750: 74 68 2f 32 29 3b 0a 20 20 20 20 74 68 69 73 2e th/2);. this.
0760: 70 61 64 2e 73 65 74 41 74 74 72 69 62 75 74 65 pad.setAttribute
0770: 28 27 63 79 27 2c 74 68 69 73 2e 68 65 69 67 68 ('cy',this.heigh
0780: 74 2f 32 29 3b 0a 20 20 20 20 74 68 69 73 2e 70 t/2);. this.p
0790: 61 64 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 ad.setAttribute(
07a0: 27 72 27 2c 20 4d 61 74 68 2e 6d 69 6e 28 74 68 'r', Math.min(th
07b0: 69 73 2e 77 69 64 74 68 2c 74 68 69 73 2e 68 65 is.width,this.he
07c0: 69 67 68 74 29 20 2f 20 32 20 2d 20 74 68 69 73 ight) / 2 - this
07d0: 2e 77 69 64 74 68 2f 34 30 29 3b 0a 20 20 20 20 .width/40);.
07e0: 74 68 69 73 2e 70 61 64 2e 73 65 74 41 74 74 72 this.pad.setAttr
07f0: 69 62 75 74 65 28 27 73 74 72 6f 6b 65 2d 77 69 ibute('stroke-wi
0800: 64 74 68 27 2c 20 74 68 69 73 2e 77 69 64 74 68 dth', this.width
0810: 2f 32 30 29 3b 0a 20 20 7d 0a 0a 20 20 63 6f 6c /20);. }.. col
0820: 6f 72 49 6e 74 65 72 66 61 63 65 28 29 20 7b 0a orInterface() {.
0830: 0a 20 20 20 20 74 68 69 73 2e 67 72 61 64 69 65 . this.gradie
0840: 6e 74 2e 73 74 6f 70 73 5b 30 5d 2e 73 65 74 41 nt.stops[0].setA
0850: 74 74 72 69 62 75 74 65 28 27 73 74 6f 70 2d 63 ttribute('stop-c
0860: 6f 6c 6f 72 27 2c 20 74 68 69 73 2e 63 6f 6c 6f olor', this.colo
0870: 72 73 2e 61 63 63 65 6e 74 29 3b 0a 20 20 20 20 rs.accent);.
0880: 74 68 69 73 2e 67 72 61 64 69 65 6e 74 2e 73 74 this.gradient.st
0890: 6f 70 73 5b 31 5d 2e 73 65 74 41 74 74 72 69 62 ops[1].setAttrib
08a0: 75 74 65 28 27 73 74 6f 70 2d 63 6f 6c 6f 72 27 ute('stop-color'
08b0: 2c 20 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 66 69 , this.colors.fi
08c0: 6c 6c 29 3b 0a 20 20 20 20 74 68 69 73 2e 72 65 ll);. this.re
08d0: 6e 64 65 72 28 29 3b 0a 20 20 7d 0a 0a 20 20 2f nder();. }.. /
08e0: 2a 0a 20 20 2a 20 55 70 64 61 74 65 20 74 68 65 *. * Update the
08f0: 20 76 69 73 75 61 6c 20 69 6e 74 65 72 66 61 63 visual interfac
0900: 65 20 75 73 69 6e 67 20 69 74 73 20 63 75 72 72 e using its curr
0910: 65 6e 74 20 73 74 61 74 65 0a 20 20 2a 0a 20 20 ent state. *.
0920: 2a 20 40 65 78 61 6d 70 6c 65 0a 20 20 2a 20 62 * @example. * b
0930: 75 74 74 6f 6e 2e 72 65 6e 64 65 72 28 29 3b 0a utton.render();.
0940: 20 20 2a 2f 0a 20 20 72 65 6e 64 65 72 28 29 20 */. render()
0950: 7b 0a 20 20 20 20 69 66 20 28 21 74 68 69 73 2e {. if (!this.
0960: 73 74 61 74 65 29 20 7b 0a 20 20 20 20 20 20 74 state) {. t
0970: 68 69 73 2e 70 61 64 2e 73 65 74 41 74 74 72 69 his.pad.setAttri
0980: 62 75 74 65 28 27 66 69 6c 6c 27 2c 20 74 68 69 bute('fill', thi
0990: 73 2e 63 6f 6c 6f 72 73 2e 66 69 6c 6c 29 3b 0a s.colors.fill);.
09a0: 20 20 20 20 20 20 74 68 69 73 2e 70 61 64 2e 73 this.pad.s
09b0: 65 74 41 74 74 72 69 62 75 74 65 28 27 73 74 72 etAttribute('str
09c0: 6f 6b 65 27 2c 20 74 68 69 73 2e 63 6f 6c 6f 72 oke', this.color
09d0: 73 2e 6d 65 64 69 75 6d 4c 69 67 68 74 29 3b 0a s.mediumLight);.
09e0: 20 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20 20 20 } else {.
09f0: 20 20 20 69 66 20 28 74 68 69 73 2e 6d 6f 64 65 if (this.mode
0a00: 3d 3d 3d 27 61 66 74 65 72 74 6f 75 63 68 27 29 ==='aftertouch')
0a10: 20 7b 0a 20 20 20 20 20 20 20 20 74 68 69 73 2e {. this.
0a20: 70 61 64 2e 73 65 74 41 74 74 72 69 62 75 74 65 pad.setAttribute
0a30: 28 27 73 74 72 6f 6b 65 27 2c 20 27 75 72 6c 28 ('stroke', 'url(
0a40: 23 27 2b 74 68 69 73 2e 67 72 61 64 69 65 6e 74 #'+this.gradient
0a50: 2e 69 64 2b 27 29 27 29 3b 0a 20 20 20 20 20 20 .id+')');.
0a60: 20 20 74 68 69 73 2e 67 72 61 64 69 65 6e 74 2e this.gradient.
0a70: 65 6c 65 6d 65 6e 74 2e 73 65 74 41 74 74 72 69 element.setAttri
0a80: 62 75 74 65 28 27 63 78 27 2c 20 28 74 68 69 73 bute('cx', (this
0a90: 2e 70 6f 73 69 74 69 6f 6e 2e 78 2a 31 30 30 29 .position.x*100)
0aa0: 2b 27 25 27 29 3b 0a 20 20 20 20 20 20 20 20 74 +'%');. t
0ab0: 68 69 73 2e 67 72 61 64 69 65 6e 74 2e 65 6c 65 his.gradient.ele
0ac0: 6d 65 6e 74 2e 73 65 74 41 74 74 72 69 62 75 74 ment.setAttribut
0ad0: 65 28 27 63 79 27 2c 20 28 28 31 2d 74 68 69 73 e('cy', ((1-this
0ae0: 2e 70 6f 73 69 74 69 6f 6e 2e 79 29 2a 31 30 30 .position.y)*100
0af0: 29 2b 27 25 27 29 3b 0a 20 20 20 20 20 20 7d 20 )+'%');. }
0b00: 65 6c 73 65 20 7b 0a 20 20 20 20 20 20 20 20 74 else {. t
0b10: 68 69 73 2e 70 61 64 2e 73 65 74 41 74 74 72 69 his.pad.setAttri
0b20: 62 75 74 65 28 27 73 74 72 6f 6b 65 27 2c 20 74 bute('stroke', t
0b30: 68 69 73 2e 63 6f 6c 6f 72 73 2e 61 63 63 65 6e his.colors.accen
0b40: 74 29 3b 0a 20 20 20 20 20 20 7d 0a 20 20 20 20 t);. }.
0b50: 20 20 74 68 69 73 2e 70 61 64 2e 73 65 74 41 74 this.pad.setAt
0b60: 74 72 69 62 75 74 65 28 27 66 69 6c 6c 27 2c 20 tribute('fill',
0b70: 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 61 63 63 65 this.colors.acce
0b80: 6e 74 29 3b 0a 20 20 20 20 7d 0a 20 20 7d 0a 0a nt);. }. }..
0b90: 7d 0a }.