flocking/hud.js at master · marcinm2h/flocking · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
export const createSlider = ({ min, max, step, defaultValue = min, label }) => {
  const $div = document.createElement("div");
  const $label = document.createElement("label");
  $label.innerText = `${label} [${defaultValue}]`;
  const $input = document.createElement("input");
  $input.type = "range";
  $input.min = min;
  $input.max = max;
  $input.step = step;
  $input.value = defaultValue;
  $div.appendChild($input);
  $div.appendChild($label);
  $input.addEventListener("input", (e) => {
    $label.innerText = `${label} [${e.target.value}]`;
  });

  document.body.appendChild($div);

  return {
    element: $div,
    value: () => Number($input.value),
  };
};

export const createCheckbox = ({ label, defaultValue = false }) => {
  const $div = document.createElement("div");
  const $label = document.createElement("label");
  $label.innerText = label;
  const $input = document.createElement("input");
  $input.type = "checkbox";
  $input.checked = defaultValue;
  $label.appendChild($input);
  $div.appendChild($label);

  document.body.appendChild($div);

  return {
    element: $div,
    value: () => $input.checked,
  };
};

export const createNumberInput = ({
  label,
  defaultValue = 0,
  min = 0,
  max = 1,
}) => {
  const $div = document.createElement("div");
  const $label = document.createElement("label");
  $label.innerText = label;
  const $input = document.createElement("input");
  $input.type = "number";
  $input.min = min;
  $input.max = max;
  $input.value = defaultValue;
  $label.appendChild($input);
  $div.appendChild($label);

  document.body.appendChild($div);

  return {
    element: $div,
    onInput: (fn) => {
      $input.addEventListener("input", fn);
    },
    value: () => Number($input.value),
  };
};