⌈⌋ branch:  Bitrhythm


Hex Artifact Content

Artifact 5c52fcb278b0f3a9426763e3602a210153de603a82ee31ed911dda942077f98e:

  • File public/components/dial.tag — part of check-in [12a9bb700d] at 2021-08-11 18:56:04 on branch trunk — Import from git Added a changelog (user: dev size: 1223)

0000: 0a 3c 64 69 61 6c 3e 0a 20 20 20 20 3c 76 62 6f  .<dial>.    <vbo
0010: 78 3e 0a 20 20 20 20 20 20 20 20 3c 64 69 76 20  x>.        <div 
0020: 63 6c 61 73 73 3d 22 6d 6c 2d 34 22 3e 0a 20 20  class="ml-4">.  
0030: 20 20 20 20 20 20 20 20 20 20 3c 68 73 74 61 63            <hstac
0040: 6b 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20 20  k>.             
0050: 20 20 20 3c 64 69 76 20 69 64 3d 7b 22 6b 6e 6f     <div id={"kno
0060: 62 22 20 2b 20 70 72 6f 70 73 2e 74 69 7d 3e 3c  b" + props.ti}><
0070: 2f 64 69 76 3e 0a 20 20 20 20 20 20 20 20 20 20  /div>.          
0080: 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73        <div class
0090: 3d 22 6d 74 2d 31 22 20 73 74 79 6c 65 3d 22 68  ="mt-1" style="h
00a0: 65 69 67 68 74 3a 20 32 32 70 78 22 20 69 64 3d  eight: 22px" id=
00b0: 7b 22 6b 6e 6f 62 2d 76 61 6c 75 65 22 20 2b 20  {"knob-value" + 
00c0: 70 72 6f 70 73 2e 74 69 7d 3e 3c 2f 64 69 76 3e  props.ti}></div>
00d0: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20  .               
00e0: 20 3c 73 70 61 6e 20 63 6c 61 73 73 3d 22 63 75   <span class="cu
00f0: 72 73 6f 72 2d 70 6f 69 6e 74 65 72 22 20 69 64  rsor-pointer" id
0100: 3d 7b 22 73 61 6d 70 6c 65 22 20 2b 20 74 68 69  ={"sample" + thi
0110: 73 2e 70 72 6f 70 73 2e 74 69 7d 20 6f 6e 63 6c  s.props.ti} oncl
0120: 69 63 6b 3d 7b 72 65 6d 6f 76 65 28 74 68 69 73  ick={remove(this
0130: 2e 70 72 6f 70 73 2e 74 69 20 2d 31 29 7d 3e 28  .props.ti -1)}>(
0140: 78 29 3c 2f 73 70 61 6e 3e 0a 20 20 20 20 20 20  x)</span>.      
0150: 20 20 20 20 20 20 3c 2f 68 73 74 61 63 6b 3e 0a        </hstack>.
0160: 20 20 20 20 20 20 20 20 3c 2f 64 69 76 3e 0a 20          </div>. 
0170: 20 20 20 3c 2f 76 62 6f 78 3e 0a 0a 20 20 20 20     </vbox>..    
0180: 3c 73 63 72 69 70 74 3e 0a 0a 74 68 69 73 2e 70  <script>..this.p
0190: 72 6f 70 73 20 3d 20 6f 70 74 73 3b 0a 0a 72 65  rops = opts;..re
01a0: 6d 6f 76 65 28 69 6e 64 65 78 29 20 7b 0a 20 20  move(index) {.  
01b0: 20 20 72 65 74 75 72 6e 20 28 29 20 3d 3e 20 7b    return () => {
01c0: 0a 20 20 20 20 20 20 20 20 74 68 69 73 2e 70 72  .        this.pr
01d0: 6f 70 73 2e 72 6d 64 69 61 6c 28 69 6e 64 65 78  ops.rmdial(index
01e0: 29 3b 0a 20 20 20 20 7d 0a 7d 0a 0a 74 68 69 73  );.    }.}..this
01f0: 2e 6f 6e 28 22 6d 6f 75 6e 74 22 2c 20 28 29 20  .on("mount", () 
0200: 3d 3e 20 7b 0a 20 20 20 20 69 66 20 28 6f 70 74  => {.    if (opt
0210: 73 2e 76 29 20 7b 0a 0a 20 20 20 20 20 20 20 20  s.v) {..        
0220: 4e 65 78 75 73 2e 63 6f 6c 6f 72 73 2e 61 63 63  Nexus.colors.acc
0230: 65 6e 74 20 3d 20 22 23 30 30 30 30 30 30 22 0a  ent = "#000000".
0240: 20 20 20 20 20 20 20 20 4e 65 78 75 73 2e 63 6f          Nexus.co
0250: 6c 6f 72 73 2e 66 69 6c 6c 20 3d 20 22 23 66 66  lors.fill = "#ff
0260: 66 66 66 66 22 0a 0a 20 20 20 20 20 20 20 20 76  ffff"..        v
0270: 61 72 20 63 65 6c 6c 20 3d 20 77 69 6e 64 6f 77  ar cell = window
0280: 2e 63 65 6c 6c 78 2e 63 65 6c 6c 78 28 30 2e 35  .cellx.cellx(0.5
0290: 29 3b 0a 20 20 20 20 20 20 20 20 76 61 72 20 64  );.        var d
02a0: 69 61 6c 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e  ial = new Nexus.
02b0: 44 69 61 6c 28 27 23 6b 6e 6f 62 27 20 2b 20 74  Dial('#knob' + t
02c0: 68 69 73 2e 70 72 6f 70 73 2e 74 69 2c 20 7b 0a  his.props.ti, {.
02d0: 20 20 20 20 20 20 20 20 20 20 20 20 27 73 69 7a              'siz
02e0: 65 27 3a 20 5b 34 35 2c 20 34 35 5d 2c 0a 20 20  e': [45, 45],.  
02f0: 20 20 20 20 20 20 20 20 20 20 27 76 61 6c 75 65            'value
0300: 27 3a 20 30 2e 35 0a 20 20 20 20 20 20 20 20 7d  ': 0.5.        }
0310: 29 3b 0a 20 20 20 20 20 20 20 20 63 65 6c 6c 2e  );.        cell.
0320: 6f 6e 43 68 61 6e 67 65 28 65 76 74 20 3d 3e 20  onChange(evt => 
0330: 7b 0a 20 20 20 20 20 20 20 20 20 20 20 20 69 66  {.            if
0340: 20 28 65 76 74 2e 64 61 74 61 2e 70 72 65 76 56   (evt.data.prevV
0350: 61 6c 75 65 20 21 3d 3d 20 65 76 74 2e 64 61 74  alue !== evt.dat
0360: 61 2e 76 61 6c 75 65 29 20 7b 0a 20 20 20 20 20  a.value) {.     
0370: 20 20 20 20 20 20 20 20 20 20 20 64 69 61 6c 2e             dial.
0380: 76 61 6c 75 65 20 3d 20 65 76 74 2e 64 61 74 61  value = evt.data
0390: 2e 76 61 6c 75 65 3b 0a 20 20 20 20 20 20 20 20  .value;.        
03a0: 20 20 20 20 7d 0a 20 20 20 20 20 20 20 20 7d 29      }.        })
03b0: 3b 0a 20 20 20 20 20 20 20 20 64 69 61 6c 2e 63  ;.        dial.c
03c0: 6f 6c 6f 72 69 7a 65 28 22 61 63 63 65 6e 74 22  olorize("accent"
03d0: 2c 22 23 30 30 30 22 29 0a 20 20 20 20 20 20 20  ,"#000").       
03e0: 20 64 69 61 6c 2e 6f 6e 28 27 63 68 61 6e 67 65   dial.on('change
03f0: 27 2c 20 28 76 61 6c 29 20 3d 3e 20 7b 0a 20 20  ', (val) => {.  
0400: 20 20 20 20 20 20 20 20 20 20 76 61 6c 20 3d 20            val = 
0410: 77 69 6e 64 6f 77 2e 72 6f 75 6e 64 54 6f 28 76  window.roundTo(v
0420: 61 6c 2c 20 34 29 3b 0a 20 20 20 20 20 20 20 20  al, 4);.        
0430: 20 20 20 20 24 28 27 23 6b 6e 6f 62 2d 76 61 6c      $('#knob-val
0440: 75 65 27 20 2b 20 74 68 69 73 2e 70 72 6f 70 73  ue' + this.props
0450: 2e 74 69 29 2e 68 74 6d 6c 28 76 61 6c 29 3b 0a  .ti).html(val);.
0460: 20 20 20 20 20 20 20 20 20 20 20 20 63 65 6c 6c              cell
0470: 28 76 61 6c 29 3b 0a 20 20 20 20 20 20 20 20 7d  (val);.        }
0480: 29 3b 0a 20 20 20 20 20 20 20 74 68 69 73 2e 70  );.       this.p
0490: 72 6f 70 73 2e 76 5b 22 63 65 6c 6c 22 5d 20 3d  rops.v["cell"] =
04a0: 20 63 65 6c 6c 3b 0a 20 20 20 20 7d 0a 7d 29 3b   cell;.    }.});
04b0: 0a 20 20 20 3c 2f 73 63 72 69 70 74 3e 0a 0a 3c  .   </script>..<
04c0: 2f 64 69 61 6c 3e 0a                             /dial>.