⌈⌋ ⎇ branch:  Bitrhythm


Hex Artifact Content

Artifact 78487e066682285518dbb9b2dae9c62843e3e256435cbfe79229b9478c4619f8:


0000: 2f 2a 0a 4d 61 69 6e 20 63 6f 6e 63 65 70 74 3a  /*.Main concept:
0010: 0a 73 79 6e 74 68 20 3d 20 6e 65 77 20 4e 65 78  .synth = new Nex
0020: 75 73 2e 52 61 63 6b 28 27 65 6c 65 6d 65 6e 74  us.Rack('element
0030: 49 44 27 29 3b 0a 0a 54 72 61 6e 73 66 6f 72 6d  ID');..Transform
0040: 20 61 6c 6c 20 65 6c 65 6d 65 6e 74 73 20 69 6e   all elements in
0050: 73 69 64 65 20 74 68 65 20 64 69 76 0a 73 79 6e  side the div.syn
0060: 74 68 2e 65 6c 65 6d 65 6e 74 49 44 20 77 69 6c  th.elementID wil
0070: 6c 20 68 6f 6c 64 20 74 68 65 20 66 69 72 73 74  l hold the first
0080: 20 73 6c 69 64 65 72 20 69 6e 74 65 72 66 61 63   slider interfac
0090: 65 0a 0a 32 29 20 49 6e 20 66 75 74 75 72 65 2c  e..2) In future,
00a0: 20 70 6f 74 65 6e 74 69 61 6c 6c 79 20 77 72 69   potentially wri
00b0: 74 69 6e 67 20 61 20 72 61 63 6b 20 74 68 61 74  ting a rack that
00c0: 20 69 73 20 72 65 2d 75 73 61 62 6c 65 3f 0a 43   is re-usable?.C
00d0: 6f 75 6c 64 20 61 6c 73 6f 20 74 61 6b 65 20 4a  ould also take J
00e0: 53 4f 4e 0a 0a 6e 65 77 20 4e 65 78 75 73 2e 52  SON..new Nexus.R
00f0: 61 63 6b 28 27 23 74 61 72 67 65 74 27 2c 7b 0a  ack('#target',{.
0100: 20 20 70 72 65 3a 20 28 29 20 3d 3e 20 7b 0a 20    pre: () => {. 
0110: 20 20 20 63 72 65 61 74 65 20 73 6f 6d 65 20 64     create some d
0120: 69 76 73 20 68 65 72 65 2c 20 6f 72 20 73 6f 6d  ivs here, or som
0130: 65 20 61 75 64 69 6f 20 63 6f 64 65 0a 20 20 7d  e audio code.  }
0140: 2c 0a 20 20 69 6e 74 65 72 66 61 63 65 3a 20 7b  ,.  interface: {
0150: 0a 20 20 20 20 73 6c 69 64 65 72 31 3a 20 4e 65  .    slider1: Ne
0160: 78 75 73 2e 61 64 64 2e 73 6c 69 64 65 72 28 7b  xus.add.slider({
0170: 0a 20 20 20 20 20 20 74 6f 70 3a 31 30 2c 0a 20  .      top:10,. 
0180: 20 20 20 20 20 6c 65 66 74 3a 31 30 2c 0a 20 20       left:10,.  
0190: 20 20 20 20 77 69 64 74 68 3a 35 30 2c 0a 20 20      width:50,.  
01a0: 20 20 20 20 68 65 69 67 68 74 3a 31 30 30 2c 0a      height:100,.
01b0: 20 20 20 20 20 20 6d 69 6e 3a 20 30 2c 0a 20 20        min: 0,.  
01c0: 20 20 20 20 6d 61 78 3a 20 31 30 30 2c 0a 20 20      max: 100,.  
01d0: 20 20 20 20 73 74 65 70 3a 20 31 0a 20 20 20 20      step: 1.    
01e0: 7d 29 2c 0a 20 20 20 20 77 61 76 65 31 3a 20 4e  }),.    wave1: N
01f0: 65 78 75 73 2e 61 64 64 2e 77 61 76 65 66 6f 72  exus.add.wavefor
0200: 6d 28 7b 0a 20 20 20 20 20 20 66 69 6c 65 3a 20  m({.      file: 
0210: 27 2e 2f 70 61 74 68 2f 74 6f 2f 66 69 6c 65 2e  './path/to/file.
0220: 6d 70 33 27 2c 0a 20 20 20 20 20 20 77 69 64 74  mp3',.      widt
0230: 68 3a 35 30 30 2c 0a 20 20 20 20 20 20 68 65 69  h:500,.      hei
0240: 67 68 74 3a 31 30 30 2c 0a 20 20 20 20 20 20 6d  ght:100,.      m
0250: 6f 64 65 3a 20 27 72 61 6e 67 65 27 0a 20 20 20  ode: 'range'.   
0260: 20 7d 29 0a 20 20 7d 2c 0a 20 20 69 6e 69 74 3a   }).  },.  init:
0270: 20 28 29 20 3d 3e 20 7b 0a 20 20 20 20 2f 2f 20   () => {.    // 
0280: 73 6f 6d 65 20 61 75 64 69 6f 20 69 6e 69 74 20  some audio init 
0290: 63 6f 64 65 20 67 6f 65 73 20 68 65 72 65 2e 2e  code goes here..
02a0: 2e 0a 20 20 7d 0a 7d 29 3b 0a 0a 2a 2f 0a 0a 69  ..  }.});..*/..i
02b0: 6d 70 6f 72 74 20 2a 20 61 73 20 74 72 61 6e 73  mport * as trans
02c0: 66 6f 72 6d 20 66 72 6f 6d 20 27 2e 2e 2f 75 74  form from '../ut
02d0: 69 6c 2f 74 72 61 6e 73 66 6f 72 6d 27 3b 0a 69  il/transform';.i
02e0: 6d 70 6f 72 74 20 64 6f 6d 20 66 72 6f 6d 20 27  mport dom from '
02f0: 2e 2e 2f 75 74 69 6c 2f 64 6f 6d 27 3b 0a 0a 69  ../util/dom';..i
0300: 6d 70 6f 72 74 20 7b 20 63 6f 6c 6f 72 73 20 7d  mport { colors }
0310: 20 66 72 6f 6d 20 27 2e 2e 2f 6d 61 69 6e 27 3b   from '../main';
0320: 0a 0a 65 78 70 6f 72 74 20 64 65 66 61 75 6c 74  ..export default
0330: 20 63 6c 61 73 73 20 52 61 63 6b 20 7b 0a 0a 20   class Rack {.. 
0340: 20 63 6f 6e 73 74 72 75 63 74 6f 72 28 74 61 72   constructor(tar
0350: 67 65 74 2c 20 73 65 74 74 69 6e 67 73 29 20 7b  get, settings) {
0360: 0a 0a 20 20 20 20 74 68 69 73 2e 6d 65 74 61 20  ..    this.meta 
0370: 3d 20 7b 7d 3b 0a 20 20 20 20 74 68 69 73 2e 6d  = {};.    this.m
0380: 65 74 61 2e 74 61 72 67 65 74 20 3d 20 74 61 72  eta.target = tar
0390: 67 65 74 3b 0a 20 20 20 20 74 68 69 73 2e 6d 65  get;.    this.me
03a0: 74 61 2e 70 61 72 65 6e 74 20 3d 20 64 6f 6d 2e  ta.parent = dom.
03b0: 70 61 72 73 65 45 6c 65 6d 65 6e 74 28 74 61 72  parseElement(tar
03c0: 67 65 74 29 3b 20 2f 2f 20 73 68 6f 75 6c 64 20  get); // should 
03d0: 62 65 20 61 20 67 65 6e 65 72 69 63 20 66 75 6e  be a generic fun
03e0: 63 74 69 6f 6e 20 66 6f 72 20 70 61 72 73 69 6e  ction for parsin
03f0: 67 20 61 20 27 74 61 72 67 65 74 27 20 61 72 67  g a 'target' arg
0400: 75 6d 65 6e 74 20 74 68 61 74 20 63 68 65 63 6b  ument that check
0410: 73 20 66 6f 72 20 73 74 72 69 6e 67 2f 44 4f 4d  s for string/DOM
0420: 2f 6a 51 55 45 52 59 0a 20 20 20 20 74 68 69 73  /jQUERY.    this
0430: 2e 6d 65 74 61 2e 63 6f 6c 6f 72 73 20 3d 20 7b  .meta.colors = {
0440: 7d 3b 0a 0a 20 20 20 20 69 66 20 28 73 65 74 74  };..    if (sett
0450: 69 6e 67 73 29 20 7b 0a 20 20 20 20 20 20 74 68  ings) {.      th
0460: 69 73 2e 6d 65 74 61 2e 61 74 74 72 69 62 75 74  is.meta.attribut
0470: 65 20 3d 20 73 65 74 74 69 6e 67 73 2e 61 74 74  e = settings.att
0480: 72 69 62 75 74 65 20 7c 7c 20 27 6e 65 78 75 73  ribute || 'nexus
0490: 2d 75 69 27 3b 0a 20 20 20 20 20 20 74 68 69 73  -ui';.      this
04a0: 2e 6d 65 74 61 2e 74 69 74 6c 65 20 3d 20 73 65  .meta.title = se
04b0: 74 74 69 6e 67 73 2e 6e 61 6d 65 20 7c 7c 20 66  ttings.name || f
04c0: 61 6c 73 65 3b 0a 20 20 20 20 20 20 74 68 69 73  alse;.      this
04d0: 2e 6d 65 74 61 2e 6f 70 65 6e 20 3d 20 73 65 74  .meta.open = set
04e0: 74 69 6e 67 73 2e 6f 70 65 6e 20 7c 7c 20 66 61  tings.open || fa
04f0: 6c 73 65 3b 0a 20 20 20 20 7d 20 65 6c 73 65 20  lse;.    } else 
0500: 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 6d 65 74  {.      this.met
0510: 61 2e 61 74 74 72 69 62 75 74 65 20 3d 20 27 6e  a.attribute = 'n
0520: 65 78 75 73 2d 75 69 27 3b 0a 20 20 20 20 20 20  exus-ui';.      
0530: 74 68 69 73 2e 6d 65 74 61 2e 74 69 74 6c 65 20  this.meta.title 
0540: 3d 20 66 61 6c 73 65 3b 0a 20 20 20 20 20 20 74  = false;.      t
0550: 68 69 73 2e 6d 65 74 61 2e 6f 70 65 6e 20 3d 20  his.meta.open = 
0560: 66 61 6c 73 65 3b 0a 20 20 20 20 7d 0a 0a 20 20  false;.    }..  
0570: 20 20 6c 65 74 20 64 65 66 61 75 6c 74 43 6f 6c    let defaultCol
0580: 6f 72 73 20 3d 20 63 6f 6c 6f 72 73 28 29 3b 20  ors = colors(); 
0590: 2f 2f 20 6a 73 68 69 6e 74 20 69 67 6e 6f 72 65  // jshint ignore
05a0: 3a 6c 69 6e 65 0a 20 20 20 20 74 68 69 73 2e 6d  :line.    this.m
05b0: 65 74 61 2e 63 6f 6c 6f 72 73 2e 61 63 63 65 6e  eta.colors.accen
05c0: 74 20 3d 20 64 65 66 61 75 6c 74 43 6f 6c 6f 72  t = defaultColor
05d0: 73 2e 61 63 63 65 6e 74 3b 0a 20 20 20 20 74 68  s.accent;.    th
05e0: 69 73 2e 6d 65 74 61 2e 63 6f 6c 6f 72 73 2e 66  is.meta.colors.f
05f0: 69 6c 6c 20 3d 20 64 65 66 61 75 6c 74 43 6f 6c  ill = defaultCol
0600: 6f 72 73 2e 66 69 6c 6c 3b 0a 20 20 20 20 74 68  ors.fill;.    th
0610: 69 73 2e 6d 65 74 61 2e 63 6f 6c 6f 72 73 2e 6c  is.meta.colors.l
0620: 69 67 68 74 20 3d 20 64 65 66 61 75 6c 74 43 6f  ight = defaultCo
0630: 6c 6f 72 73 2e 6c 69 67 68 74 3b 0a 20 20 20 20  lors.light;.    
0640: 74 68 69 73 2e 6d 65 74 61 2e 63 6f 6c 6f 72 73  this.meta.colors
0650: 2e 64 61 72 6b 20 3d 20 64 65 66 61 75 6c 74 43  .dark = defaultC
0660: 6f 6c 6f 72 73 2e 64 61 72 6b 3b 0a 20 20 20 20  olors.dark;.    
0670: 74 68 69 73 2e 6d 65 74 61 2e 63 6f 6c 6f 72 73  this.meta.colors
0680: 2e 6d 65 64 69 75 6d 4c 69 67 68 74 20 3d 20 64  .mediumLight = d
0690: 65 66 61 75 6c 74 43 6f 6c 6f 72 73 2e 6d 65 64  efaultColors.med
06a0: 69 75 6d 4c 69 67 68 74 3b 0a 20 20 20 20 74 68  iumLight;.    th
06b0: 69 73 2e 6d 65 74 61 2e 63 6f 6c 6f 72 73 2e 6d  is.meta.colors.m
06c0: 65 64 69 75 6d 44 61 72 6b 20 3d 20 64 65 66 61  ediumDark = defa
06d0: 75 6c 74 43 6f 6c 6f 72 73 2e 6d 65 64 69 75 6d  ultColors.medium
06e0: 44 61 72 6b 3b 0a 20 20 20 20 74 68 69 73 2e 62  Dark;.    this.b
06f0: 75 69 6c 64 49 6e 74 65 72 66 61 63 65 28 29 3b  uildInterface();
0700: 0a 20 20 20 20 74 68 69 73 2e 63 6f 6c 6f 72 49  .    this.colorI
0710: 6e 74 65 72 66 61 63 65 28 29 3b 0a 20 20 7d 0a  nterface();.  }.
0720: 0a 20 20 62 75 69 6c 64 49 6e 74 65 72 66 61 63  .  buildInterfac
0730: 65 28 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 6d  e() {.    this.m
0740: 65 74 61 2e 70 61 72 65 6e 74 2e 73 74 79 6c 65  eta.parent.style
0750: 2e 62 6f 78 53 69 7a 69 6e 67 20 3d 20 27 62 6f  .boxSizing = 'bo
0760: 72 64 65 72 2d 62 6f 78 27 3b 0a 20 20 20 20 74  rder-box';.    t
0770: 68 69 73 2e 6d 65 74 61 2e 70 61 72 65 6e 74 2e  his.meta.parent.
0780: 73 74 79 6c 65 2e 75 73 65 72 53 65 6c 65 63 74  style.userSelect
0790: 20 3d 20 27 6e 6f 6e 65 27 3b 0a 20 20 20 20 74   = 'none';.    t
07a0: 68 69 73 2e 6d 65 74 61 2e 70 61 72 65 6e 74 2e  his.meta.parent.
07b0: 73 74 79 6c 65 2e 6d 6f 7a 55 73 65 72 53 65 6c  style.mozUserSel
07c0: 65 63 74 20 3d 20 27 6e 6f 6e 65 27 3b 0a 20 20  ect = 'none';.  
07d0: 20 20 74 68 69 73 2e 6d 65 74 61 2e 70 61 72 65    this.meta.pare
07e0: 6e 74 2e 73 74 79 6c 65 2e 77 65 62 6b 69 74 55  nt.style.webkitU
07f0: 73 65 72 53 65 6c 65 63 74 20 3d 20 27 6e 6f 6e  serSelect = 'non
0800: 65 27 3b 0a 0a 20 20 20 20 74 68 69 73 2e 6d 65  e';..    this.me
0810: 74 61 2e 63 6f 6e 74 65 6e 74 73 20 3d 20 64 6f  ta.contents = do
0820: 63 75 6d 65 6e 74 2e 63 72 65 61 74 65 45 6c 65  cument.createEle
0830: 6d 65 6e 74 28 27 64 69 76 27 29 3b 0a 0a 20 20  ment('div');..  
0840: 20 20 77 68 69 6c 65 20 28 74 68 69 73 2e 6d 65    while (this.me
0850: 74 61 2e 70 61 72 65 6e 74 2e 63 68 69 6c 64 4e  ta.parent.childN
0860: 6f 64 65 73 2e 6c 65 6e 67 74 68 20 3e 20 30 29  odes.length > 0)
0870: 20 7b 0a 20 20 20 20 20 20 20 20 74 68 69 73 2e   {.        this.
0880: 6d 65 74 61 2e 63 6f 6e 74 65 6e 74 73 2e 61 70  meta.contents.ap
0890: 70 65 6e 64 43 68 69 6c 64 28 74 68 69 73 2e 6d  pendChild(this.m
08a0: 65 74 61 2e 70 61 72 65 6e 74 2e 63 68 69 6c 64  eta.parent.child
08b0: 4e 6f 64 65 73 5b 30 5d 29 3b 0a 20 20 20 20 7d  Nodes[0]);.    }
08c0: 0a 0a 20 20 20 20 74 68 69 73 2e 6d 65 74 61 2e  ..    this.meta.
08d0: 63 6f 6e 74 65 6e 74 73 2e 73 74 79 6c 65 2e 70  contents.style.p
08e0: 61 64 64 69 6e 67 20 3d 20 27 30 70 78 27 3b 0a  adding = '0px';.
08f0: 20 20 20 20 74 68 69 73 2e 6d 65 74 61 2e 63 6f      this.meta.co
0900: 6e 74 65 6e 74 73 2e 73 74 79 6c 65 2e 62 6f 78  ntents.style.box
0910: 53 69 7a 69 6e 67 20 3d 20 27 62 6f 72 64 65 72  Sizing = 'border
0920: 2d 62 6f 78 27 3b 0a 0a 20 20 20 20 69 66 20 28  -box';..    if (
0930: 74 68 69 73 2e 6d 65 74 61 2e 74 69 74 6c 65 29  this.meta.title)
0940: 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 6d 65   {.      this.me
0950: 74 61 2e 74 69 74 6c 65 42 61 72 20 3d 20 64 6f  ta.titleBar = do
0960: 63 75 6d 65 6e 74 2e 63 72 65 61 74 65 45 6c 65  cument.createEle
0970: 6d 65 6e 74 28 27 64 69 76 27 29 3b 0a 20 20 20  ment('div');.   
0980: 20 20 20 74 68 69 73 2e 6d 65 74 61 2e 74 69 74     this.meta.tit
0990: 6c 65 42 61 72 2e 69 6e 6e 65 72 48 54 4d 4c 20  leBar.innerHTML 
09a0: 3d 20 74 68 69 73 2e 6d 65 74 61 2e 74 69 74 6c  = this.meta.titl
09b0: 65 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 6d 65  e;.      this.me
09c0: 74 61 2e 74 69 74 6c 65 42 61 72 2e 73 74 79 6c  ta.titleBar.styl
09d0: 65 2e 66 6f 6e 74 46 61 6d 69 6c 79 20 3d 20 27  e.fontFamily = '
09e0: 61 72 69 61 6c 27 3b 0a 20 20 20 20 20 20 74 68  arial';.      th
09f0: 69 73 2e 6d 65 74 61 2e 74 69 74 6c 65 42 61 72  is.meta.titleBar
0a00: 2e 73 74 79 6c 65 2e 70 6f 73 69 74 69 6f 6e 20  .style.position 
0a10: 3d 20 27 72 65 6c 61 74 69 76 65 27 3b 0a 20 20  = 'relative';.  
0a20: 20 20 20 20 74 68 69 73 2e 6d 65 74 61 2e 74 69      this.meta.ti
0a30: 74 6c 65 42 61 72 2e 73 74 79 6c 65 2e 63 6f 6c  tleBar.style.col
0a40: 6f 72 20 3d 20 27 23 38 38 38 27 3b 0a 20 20 20  or = '#888';.   
0a50: 20 20 20 74 68 69 73 2e 6d 65 74 61 2e 74 69 74     this.meta.tit
0a60: 6c 65 42 61 72 2e 73 74 79 6c 65 2e 70 61 64 64  leBar.style.padd
0a70: 69 6e 67 20 3d 20 27 37 70 78 27 3b 0a 20 20 20  ing = '7px';.   
0a80: 20 20 20 74 68 69 73 2e 6d 65 74 61 2e 74 69 74     this.meta.tit
0a90: 6c 65 42 61 72 2e 73 74 79 6c 65 2e 66 6f 6e 74  leBar.style.font
0aa0: 53 69 7a 65 20 3d 20 27 31 32 70 78 27 3b 0a 0a  Size = '12px';..
0ab0: 20 20 20 20 20 20 74 68 69 73 2e 6d 65 74 61 2e        this.meta.
0ac0: 62 75 74 74 6f 6e 20 3d 20 64 6f 63 75 6d 65 6e  button = documen
0ad0: 74 2e 63 72 65 61 74 65 45 6c 65 6d 65 6e 74 28  t.createElement(
0ae0: 27 64 69 76 27 29 3b 0a 20 20 20 20 20 20 74 68  'div');.      th
0af0: 69 73 2e 6d 65 74 61 2e 62 75 74 74 6f 6e 2e 73  is.meta.button.s
0b00: 74 79 6c 65 2e 70 6f 73 69 74 69 6f 6e 20 3d 20  tyle.position = 
0b10: 27 61 62 73 6f 6c 75 74 65 27 3b 0a 20 20 20 20  'absolute';.    
0b20: 20 20 74 68 69 73 2e 6d 65 74 61 2e 62 75 74 74    this.meta.butt
0b30: 6f 6e 2e 73 74 79 6c 65 2e 74 6f 70 20 3d 20 27  on.style.top = '
0b40: 35 70 78 27 20 3b 0a 20 20 20 20 20 20 74 68 69  5px' ;.      thi
0b50: 73 2e 6d 65 74 61 2e 62 75 74 74 6f 6e 2e 73 74  s.meta.button.st
0b60: 79 6c 65 2e 72 69 67 68 74 20 3d 20 27 35 70 78  yle.right = '5px
0b70: 27 20 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 6d  ' ;.      this.m
0b80: 65 74 61 2e 62 75 74 74 6f 6e 2e 69 6e 6e 65 72  eta.button.inner
0b90: 48 54 4d 4c 20 3d 20 27 2d 27 3b 0a 20 20 20 20  HTML = '-';.    
0ba0: 20 20 74 68 69 73 2e 6d 65 74 61 2e 62 75 74 74    this.meta.butt
0bb0: 6f 6e 2e 73 74 79 6c 65 2e 70 61 64 64 69 6e 67  on.style.padding
0bc0: 20 3d 20 27 30 70 78 20 35 70 78 20 32 70 78 27   = '0px 5px 2px'
0bd0: 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 6d 65 74  ;.      this.met
0be0: 61 2e 62 75 74 74 6f 6e 2e 73 74 79 6c 65 2e 6c  a.button.style.l
0bf0: 69 6e 65 48 65 69 67 68 74 20 3d 20 27 31 32 70  ineHeight = '12p
0c00: 78 27 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 6d  x';.      this.m
0c10: 65 74 61 2e 62 75 74 74 6f 6e 2e 73 74 79 6c 65  eta.button.style
0c20: 2e 66 6f 6e 74 53 69 7a 65 20 3d 20 27 31 35 70  .fontSize = '15p
0c30: 78 27 3b 0a 0a 20 20 20 20 20 20 74 68 69 73 2e  x';..      this.
0c40: 6d 65 74 61 2e 62 75 74 74 6f 6e 2e 73 74 79 6c  meta.button.styl
0c50: 65 2e 63 75 72 73 6f 72 20 3d 20 27 70 6f 69 6e  e.cursor = 'poin
0c60: 74 65 72 27 3b 0a 0a 20 20 20 20 20 20 74 68 69  ter';..      thi
0c70: 73 2e 6d 65 74 61 2e 62 75 74 74 6f 6e 2e 61 64  s.meta.button.ad
0c80: 64 45 76 65 6e 74 4c 69 73 74 65 6e 65 72 28 27  dEventListener('
0c90: 6d 6f 75 73 65 6f 76 65 72 27 2c 20 28 29 20 3d  mouseover', () =
0ca0: 3e 20 7b 0a 20 20 20 20 20 20 20 20 74 68 69 73  > {.        this
0cb0: 2e 6d 65 74 61 2e 62 75 74 74 6f 6e 2e 73 74 79  .meta.button.sty
0cc0: 6c 65 2e 62 61 63 6b 67 72 6f 75 6e 64 43 6f 6c  le.backgroundCol
0cd0: 6f 72 20 3d 20 74 68 69 73 2e 6d 65 74 61 2e 63  or = this.meta.c
0ce0: 6f 6c 6f 72 73 2e 6d 65 64 69 75 6d 44 61 72 6b  olors.mediumDark
0cf0: 3b 0a 20 20 20 20 20 20 7d 29 3b 0a 20 20 20 20  ;.      });.    
0d00: 20 20 74 68 69 73 2e 6d 65 74 61 2e 62 75 74 74    this.meta.butt
0d10: 6f 6e 2e 61 64 64 45 76 65 6e 74 4c 69 73 74 65  on.addEventListe
0d20: 6e 65 72 28 27 6d 6f 75 73 65 6c 65 61 76 65 27  ner('mouseleave'
0d30: 2c 20 28 29 20 3d 3e 20 7b 0a 20 20 20 20 20 20  , () => {.      
0d40: 20 20 74 68 69 73 2e 6d 65 74 61 2e 62 75 74 74    this.meta.butt
0d50: 6f 6e 2e 73 74 79 6c 65 2e 62 61 63 6b 67 72 6f  on.style.backgro
0d60: 75 6e 64 43 6f 6c 6f 72 20 3d 20 74 68 69 73 2e  undColor = this.
0d70: 6d 65 74 61 2e 63 6f 6c 6f 72 73 2e 6d 65 64 69  meta.colors.medi
0d80: 75 6d 4c 69 67 68 74 3b 0a 20 20 20 20 20 20 7d  umLight;.      }
0d90: 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 6d 65  );.      this.me
0da0: 74 61 2e 62 75 74 74 6f 6e 2e 61 64 64 45 76 65  ta.button.addEve
0db0: 6e 74 4c 69 73 74 65 6e 65 72 28 27 63 6c 69 63  ntListener('clic
0dc0: 6b 27 2c 20 28 29 20 3d 3e 20 7b 0a 20 20 20 20  k', () => {.    
0dd0: 20 20 20 20 69 66 20 28 74 68 69 73 2e 6d 65 74      if (this.met
0de0: 61 2e 6f 70 65 6e 29 20 7b 0a 20 20 20 20 20 20  a.open) {.      
0df0: 20 20 20 20 74 68 69 73 2e 68 69 64 65 28 29 3b      this.hide();
0e00: 0a 20 20 20 20 20 20 20 20 7d 20 65 6c 73 65 20  .        } else 
0e10: 7b 0a 20 20 20 20 20 20 20 20 20 20 74 68 69 73  {.          this
0e20: 2e 73 68 6f 77 28 29 3b 0a 20 20 20 20 20 20 20  .show();.       
0e30: 20 7d 0a 20 20 20 20 20 20 7d 29 3b 0a 0a 0a 20   }.      });... 
0e40: 20 20 20 20 20 74 68 69 73 2e 6d 65 74 61 2e 74       this.meta.t
0e50: 69 74 6c 65 42 61 72 2e 61 70 70 65 6e 64 43 68  itleBar.appendCh
0e60: 69 6c 64 28 74 68 69 73 2e 6d 65 74 61 2e 62 75  ild(this.meta.bu
0e70: 74 74 6f 6e 29 3b 0a 0a 20 20 20 20 20 20 74 68  tton);..      th
0e80: 69 73 2e 6d 65 74 61 2e 70 61 72 65 6e 74 2e 61  is.meta.parent.a
0e90: 70 70 65 6e 64 43 68 69 6c 64 28 74 68 69 73 2e  ppendChild(this.
0ea0: 6d 65 74 61 2e 74 69 74 6c 65 42 61 72 29 3b 0a  meta.titleBar);.
0eb0: 20 20 20 20 7d 0a 20 20 20 20 74 68 69 73 2e 6d      }.    this.m
0ec0: 65 74 61 2e 70 61 72 65 6e 74 2e 61 70 70 65 6e  eta.parent.appen
0ed0: 64 43 68 69 6c 64 28 74 68 69 73 2e 6d 65 74 61  dChild(this.meta
0ee0: 2e 63 6f 6e 74 65 6e 74 73 29 3b 0a 0a 20 20 2f  .contents);..  /
0ef0: 2f 20 20 76 61 72 20 77 69 64 74 68 20 3d 20 74  /  var width = t
0f00: 68 69 73 2e 6d 65 74 61 2e 70 61 72 65 6e 74 2e  his.meta.parent.
0f10: 73 74 79 6c 65 2e 77 69 64 74 68 20 3d 20 67 65  style.width = ge
0f20: 74 43 6f 6d 70 75 74 65 64 53 74 79 6c 65 28 74  tComputedStyle(t
0f30: 68 69 73 2e 6d 65 74 61 2e 70 61 72 65 6e 74 29  his.meta.parent)
0f40: 2e 67 65 74 50 72 6f 70 65 72 74 79 56 61 6c 75  .getPropertyValu
0f50: 65 28 27 77 69 64 74 68 27 29 3b 0a 2f 2f 20 20  e('width');.//  
0f60: 20 20 74 68 69 73 2e 6d 65 74 61 2e 70 61 72 65    this.meta.pare
0f70: 6e 74 2e 73 74 79 6c 65 2e 77 69 64 74 68 20 3d  nt.style.width =
0f80: 20 77 69 64 74 68 3b 0a 0a 20 20 20 20 6c 65 74   width;..    let
0f90: 20 75 69 20 3d 20 74 72 61 6e 73 66 6f 72 6d 2e   ui = transform.
0fa0: 73 65 63 74 69 6f 6e 28 74 68 69 73 2e 6d 65 74  section(this.met
0fb0: 61 2e 74 61 72 67 65 74 2c 20 74 68 69 73 2e 6d  a.target, this.m
0fc0: 65 74 61 2e 61 74 74 72 69 62 75 74 65 29 3b 0a  eta.attribute);.
0fd0: 20 20 20 20 66 6f 72 20 28 76 61 72 20 6b 65 79      for (var key
0fe0: 20 69 6e 20 75 69 29 20 7b 0a 20 20 20 20 20 20   in ui) {.      
0ff0: 74 68 69 73 5b 6b 65 79 5d 20 3d 20 75 69 5b 6b  this[key] = ui[k
1000: 65 79 5d 3b 0a 20 20 20 20 7d 0a 20 20 7d 0a 0a  ey];.    }.  }..
1010: 20 20 63 6f 6c 6f 72 49 6e 74 65 72 66 61 63 65    colorInterface
1020: 28 29 20 7b 0a 20 20 20 20 69 66 20 28 74 68 69  () {.    if (thi
1030: 73 2e 6d 65 74 61 2e 74 69 74 6c 65 29 20 7b 0a  s.meta.title) {.
1040: 20 20 20 20 20 20 74 68 69 73 2e 6d 65 74 61 2e        this.meta.
1050: 62 75 74 74 6f 6e 2e 73 74 79 6c 65 2e 62 61 63  button.style.bac
1060: 6b 67 72 6f 75 6e 64 43 6f 6c 6f 72 20 3d 20 74  kgroundColor = t
1070: 68 69 73 2e 6d 65 74 61 2e 63 6f 6c 6f 72 73 2e  his.meta.colors.
1080: 6d 65 64 69 75 6d 4c 69 67 68 74 3b 0a 20 20 20  mediumLight;.   
1090: 20 20 20 74 68 69 73 2e 6d 65 74 61 2e 62 75 74     this.meta.but
10a0: 74 6f 6e 2e 73 74 79 6c 65 2e 62 6f 72 64 65 72  ton.style.border
10b0: 20 3d 20 27 73 6f 6c 69 64 20 30 70 78 20 27 2b   = 'solid 0px '+
10c0: 74 68 69 73 2e 6d 65 74 61 2e 63 6f 6c 6f 72 73  this.meta.colors
10d0: 2e 66 69 6c 6c 3b 0a 20 20 20 20 20 20 74 68 69  .fill;.      thi
10e0: 73 2e 6d 65 74 61 2e 70 61 72 65 6e 74 2e 73 74  s.meta.parent.st
10f0: 79 6c 65 2e 62 6f 72 64 65 72 20 3d 20 27 73 6f  yle.border = 'so
1100: 6c 69 64 20 31 70 78 20 27 2b 74 68 69 73 2e 6d  lid 1px '+this.m
1110: 65 74 61 2e 63 6f 6c 6f 72 73 2e 6d 65 64 69 75  eta.colors.mediu
1120: 6d 4c 69 67 68 74 3b 0a 20 20 20 20 20 20 74 68  mLight;.      th
1130: 69 73 2e 6d 65 74 61 2e 70 61 72 65 6e 74 2e 73  is.meta.parent.s
1140: 74 79 6c 65 2e 62 61 63 6b 67 72 6f 75 6e 64 43  tyle.backgroundC
1150: 6f 6c 6f 72 20 3d 20 74 68 69 73 2e 6d 65 74 61  olor = this.meta
1160: 2e 63 6f 6c 6f 72 73 2e 6c 69 67 68 74 3b 0a 20  .colors.light;. 
1170: 20 20 20 20 20 74 68 69 73 2e 6d 65 74 61 2e 74       this.meta.t
1180: 69 74 6c 65 42 61 72 2e 73 74 79 6c 65 2e 62 61  itleBar.style.ba
1190: 63 6b 67 72 6f 75 6e 64 43 6f 6c 6f 72 20 3d 20  ckgroundColor = 
11a0: 74 68 69 73 2e 6d 65 74 61 2e 63 6f 6c 6f 72 73  this.meta.colors
11b0: 2e 66 69 6c 6c 3b 0a 20 20 20 20 7d 0a 20 20 7d  .fill;.    }.  }
11c0: 0a 0a 20 20 73 68 6f 77 28 29 20 7b 0a 20 20 20  ..  show() {.   
11d0: 20 74 68 69 73 2e 6d 65 74 61 2e 63 6f 6e 74 65   this.meta.conte
11e0: 6e 74 73 2e 73 74 79 6c 65 2e 64 69 73 70 6c 61  nts.style.displa
11f0: 79 20 3d 20 27 62 6c 6f 63 6b 27 3b 0a 20 20 20  y = 'block';.   
1200: 20 74 68 69 73 2e 6d 65 74 61 2e 6f 70 65 6e 20   this.meta.open 
1210: 3d 20 74 72 75 65 3b 0a 20 20 7d 0a 0a 20 20 68  = true;.  }..  h
1220: 69 64 65 28 29 20 7b 0a 20 20 20 20 74 68 69 73  ide() {.    this
1230: 2e 6d 65 74 61 2e 63 6f 6e 74 65 6e 74 73 2e 73  .meta.contents.s
1240: 74 79 6c 65 2e 64 69 73 70 6c 61 79 20 3d 20 27  tyle.display = '
1250: 6e 6f 6e 65 27 3b 0a 20 20 20 20 74 68 69 73 2e  none';.    this.
1260: 6d 65 74 61 2e 6f 70 65 6e 20 3d 20 66 61 6c 73  meta.open = fals
1270: 65 3b 0a 20 20 7d 0a 0a 20 20 63 6f 6c 6f 72 69  e;.  }..  colori
1280: 7a 65 28 74 79 70 65 2c 63 6f 6c 6f 72 29 20 7b  ze(type,color) {
1290: 0a 20 20 20 20 66 6f 72 20 28 76 61 72 20 6b 65  .    for (var ke
12a0: 79 20 69 6e 20 74 68 69 73 29 20 7b 0a 20 20 20  y in this) {.   
12b0: 20 20 20 69 66 20 28 74 68 69 73 5b 6b 65 79 5d     if (this[key]
12c0: 2e 63 6f 6c 6f 72 69 7a 65 29 20 7b 0a 20 20 20  .colorize) {.   
12d0: 20 20 20 20 20 74 68 69 73 5b 6b 65 79 5d 2e 63       this[key].c
12e0: 6f 6c 6f 72 69 7a 65 28 74 79 70 65 2c 63 6f 6c  olorize(type,col
12f0: 6f 72 29 3b 0a 20 20 20 20 20 20 7d 0a 20 20 20  or);.      }.   
1300: 20 7d 0a 20 20 20 20 74 68 69 73 2e 6d 65 74 61   }.    this.meta
1310: 2e 63 6f 6c 6f 72 73 5b 74 79 70 65 5d 20 3d 20  .colors[type] = 
1320: 63 6f 6c 6f 72 3b 0a 20 20 20 20 74 68 69 73 2e  color;.    this.
1330: 63 6f 6c 6f 72 49 6e 74 65 72 66 61 63 65 28 29  colorInterface()
1340: 3b 0a 20 20 7d 0a 0a 20 20 65 6d 70 74 79 28 29  ;.  }..  empty()
1350: 20 7b 0a 20 20 20 20 66 6f 72 20 28 76 61 72 20   {.    for (var 
1360: 6b 65 79 20 69 6e 20 74 68 69 73 29 20 7b 0a 20  key in this) {. 
1370: 20 20 20 20 20 69 66 20 28 74 68 69 73 5b 6b 65       if (this[ke
1380: 79 5d 2e 64 65 73 74 72 6f 79 29 20 7b 0a 20 20  y].destroy) {.  
1390: 20 20 20 20 20 20 74 68 69 73 5b 6b 65 79 5d 2e        this[key].
13a0: 64 65 73 74 72 6f 79 28 29 3b 0a 20 20 20 20 20  destroy();.     
13b0: 20 7d 0a 20 20 20 20 7d 0a 20 20 7d 0a 0a 7d 0a   }.    }.  }..}.