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>.