Init v1

docs/assets/javascript/home.js

@@ -0,0 +1,183 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const CIRCLES = {
+    a: {
+      x: 0,
+      y: -400,
+      unit: 400,
+      speed: 1800,
+    },
+    b: {
+      x: 0,
+      y: -540,
+      unit: 540,
+      speed: 3600,
+    },
+    c: {
+      x: 0,
+      y: -680,
+      unit: 680,
+      speed: 5400,
+    },
+  };
+
+  const DOTS = {
+    // A
+    axbom: {
+      startAngle: 1000,
+      circle: "a",
+    },
+    ale_codes: {
+      startAngle: 0,
+      circle: "a",
+    },
+    modular: {
+      startAngle: 600,
+      circle: "a",
+    },
+    opensource: {
+      startAngle: 1600,
+      circle: "a",
+    },
+    free: {
+      startAngle: -800,
+      circle: "a",
+    },
+    responsive: {
+      startAngle: -1300,
+      circle: "a",
+    },
+    // B
+    dartsass: {
+      startAngle: -1000,
+      circle: "b",
+    },
+    skeletons: {
+      startAngle: 0,
+      circle: "b",
+    },
+    dark: {
+      startAngle: 1000,
+      circle: "b",
+    },
+    flexbox: {
+      startAngle: 2400,
+      circle: "b",
+    },
+    cssvars: {
+      startAngle: 3200,
+      circle: "b",
+    },
+    themes: {
+      startAngle: 4500,
+      circle: "b",
+    },
+    // C
+    autocolor: {
+      startAngle: -1000,
+      circle: "c",
+    },
+    smartgrid: {
+      startAngle: 800,
+      circle: "c",
+    },
+    infinitysearch: {
+      startAngle: 2000,
+      circle: "c",
+    },
+    bruhandle: {
+      startAngle: 4000,
+      circle: "c",
+    },
+    jesseschoff: {
+      startAngle: 6000,
+      circle: "c",
+    },
+    MyTopSecretName: {
+      startAngle: 7500,
+      circle: "c",
+    },
+  };
+
+  const animate = (el, id) => {
+    let { startAngle, circle } = DOTS[id];
+    let { unit, speed, x, y } = CIRCLES[circle];
+    el.style.setProperty("--animation-delay", `var(--circle-delay-${circle})`);
+
+    const rad = startAngle * (Math.PI / speed);
+    const left = Math.cos(rad) * unit + x;
+    const top = unit * (1 - Math.sin(rad)) + y;
+    const transform = `translate3d(${left}px, ${top}px, 0)`;
+    el.style.transform = transform;
+    DOTS[id].startAngle = DOTS[id].startAngle - 1;
+  };
+
+  const $dots = document.querySelectorAll(".js-dot");
+
+  $dots.forEach(($dot) => {
+    const id = $dot.dataset.id;
+    setInterval(() => {
+      animate($dot, id);
+    }, 10);
+  });
+
+  // Grid
+
+  const $columns = Array.prototype.slice.call(
+    document.querySelectorAll("#grid > .column"),
+    0,
+  );
+  const $markup = document.querySelector("#markup code");
+  const $message = document.getElementById("message");
+  const $add = document.getElementById("add");
+  const $remove = document.getElementById("remove");
+  let showing = 5;
+
+  function showColumns() {
+    if (showing === 13) {
+      $message.style.display = "block";
+    } else {
+      $message.style.display = "none";
+    }
+
+    showing = Math.min(Math.max(parseInt(showing), 1), 12);
+
+    $columns.forEach(($el) => {
+      $el.style.display = "none";
+    });
+    $columns.slice(0, showing).forEach(($el) => {
+      $el.style.display = "block";
+    });
+
+    $markup.innerHTML =
+      '<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;columns&quot;</span><span class="nt">&gt;</span>';
+    $markup.insertAdjacentHTML("beforeend", "\n");
+
+    for (let i = 0; i < showing; i++) {
+      $markup.insertAdjacentHTML(
+        "beforeend",
+        '  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>',
+      );
+      $markup.insertAdjacentHTML("beforeend", i + 1);
+      $markup.insertAdjacentHTML(
+        "beforeend",
+        '<span class="nt">&lt;/div&gt;</span>',
+      );
+      $markup.insertAdjacentHTML("beforeend", "\n");
+    }
+
+    $markup.insertAdjacentHTML(
+      "beforeend",
+      '<span class="nt">&lt;/div&gt;</span>',
+    );
+  }
+
+  $add.addEventListener("click", () => {
+    showing++;
+    showColumns();
+  });
+
+  $remove.addEventListener("click", () => {
+    showing--;
+    showColumns();
+  });
+});