feat: toggle

rocky/assets/css/components/toggle-button.scss

@@ -0,0 +1,70 @@
+button,
+a,
+input[type="button"],
+input[type="submit"],
+input[type="reset"] {
+  $breakpoint: 24rem !default;
+
+  &.toggle-button {
+    /* Alignment */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: flex-start;
+    gap: 0;
+    margin: 0;
+    box-sizing: border-box;
+
+    /* Styling */
+    border-radius: var(--border-radius-l);
+    padding: var(--spacing-grid-150);
+    width: 2.75rem;
+    height: 2.75rem;
+    border: 1px solid var(--colors-purrple-300);
+
+    /* Text and icon styling */
+    background-color: var(--colors-white);
+    color: var(--colors-purrple-500);
+    text-decoration: none;
+    font-size: 0;
+
+    &::before {
+      color: var(--colors-purrple-500);
+      padding: 0;
+    }
+
+    /* Behaviour */
+    cursor: pointer;
+    overflow-wrap: break-word;
+
+    /* States */
+    &[aria-current="page"] {
+      background-color: var(--colors-purrple-200);
+      border-color: var(--colors-purrple-200);
+
+      &::before {
+        color: var(--colors-purrple-700);
+      }
+    }
+
+    &:hover,
+    &:active {
+      border-color: var(--colors-purrple-500);
+    }
+
+    &:focus {
+      outline: 2px solid var(--colors-purrple-500);
+      outline-offset: 0.125rem;
+      z-index: 2;
+      position: relative;
+    }
+  }
+}
+
+a {
+  &.toggle-button {
+    &:visited {
+      color: var(--colors-purrple-500);
+    }
+  }
+}

rocky/assets/css/components/toggle.scss

@@ -1,70 +1,64 @@
-button,
-a,
-input[type="button"],
-input[type="submit"],
-input[type="reset"] {
-  $breakpoint: 24rem !default;
+/* Toggle */
 
-  &.toggle-button {
-    /* Alignment */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    align-self: flex-start;
-    gap: 0;
-    margin: 0;
-    box-sizing: border-box;
-
-    /* Styling */
-    border-radius: var(--border-radius-l);
-    padding: var(--spacing-grid-150);
-    width: 2.75rem;
-    height: 2.75rem;
-    border: 1px solid var(--colors-purrple-300);
+.toggle-switch {
+  display: flex;
+  flex-direction: row;
+  padding: var(--spacing-grid-050);
+  box-sizing: border-box;
+  width: auto;
+  border-radius: var(--border-radius-s);
+  margin-top: 0;
+  line-height: 1.5rem;
+  border: 1px solid var(--colors-purrple-300);
+  gap: var(--spacing-grid-100);
+  max-width: 100%;
+  overflow: auto;
 
-    /* Text and icon styling */
-    background-color: var(--colors-white);
-    color: var(--colors-purrple-500);
-    text-decoration: none;
-    font-size: 0;
+  li {
+    padding: var(--spacing-grid-050) var(--spacing-grid-100);
+    border-radius: var(--border-radius-s);
+    background-color: transparent;
+    cursor: pointer;
+    list-style: none;
+    box-sizing: border-box;
+    position: relative;
+    white-space: nowrap;
 
-    &::before {
-      color: var(--colors-purrple-500);
-      padding: 0;
+    a {
+      color: var(--colors-grey-900);
+      text-decoration: none;
     }
 
-    /* Behaviour */
-    cursor: pointer;
-    overflow-wrap: break-word;
-
-    /* States */
-    &[aria-current="page"] {
+    &[aria-current="true"] {
       background-color: var(--colors-purrple-200);
-      border-color: var(--colors-purrple-200);
 
-      &::before {
-        color: var(--colors-purrple-700);
+      a {
+        font-weight: bold;
+      }
+
+      &:hover {
+        background-color: var(--colors-purrple-300);
       }
     }
 
-    &:hover,
-    &:active {
-      border-color: var(--colors-purrple-500);
+    &:hover {
+      background-color: var(--colors-purrple-50);
     }
 
-    &:focus {
-      outline: 2px solid var(--colors-purrple-500);
-      outline-offset: 0.125rem;
-      z-index: 2;
-      position: relative;
+    &::after {
+      content: "";
+      border-right: 1px solid var(--colors-purrple-300);
+      margin-left: var(--spacing-grid-100);
+      display: block;
+      position: absolute;
+      height: 60%;
+      top: 20%;
+      right: calc((1px + var(--spacing-grid-050)) * -1);
+      width: 1px;
     }
-  }
-}
 
-a {
-  &.toggle-button {
-    &:visited {
-      color: var(--colors-purrple-500);
+    &:last-child::after {
+      content: none;
     }
   }
 }

rocky/assets/css/main.scss

@@ -69,6 +69,7 @@
 @import "components/state-tags";
 @import "components/table";
 @import "components/toggle";
+@import "components/toggle-button";
 @import "components/toolbar";
 @import "components/tree-tables";
 @import "components/user-icon";

rocky/assets/js/toggleSwitch.js

@@ -0,0 +1,59 @@
+import { onDomReady } from "../js/imports/utils.js";
+
+onDomReady(initToggleSwitches);
+
+function initToggleSwitches() {
+  // Switches get stitches ;-)
+  // Grab all toggle switches
+  let toggle_switches = document.querySelectorAll(".toggle-switch");
+
+  for (let i = 0; i < toggle_switches.length; i++) {
+    initButtonsAndContentBlocks(toggle_switches[i]);
+  }
+}
+
+function initButtonsAndContentBlocks(toggle_switch) {
+  // Get all the toggle switch options
+  let options = toggle_switch.querySelectorAll(".toggle-switch-button");
+
+  for (let i = 0; i < options.length; i++) {
+    let option = options[i];
+
+    // Hide all elements linked to toggle switch options.
+    document
+      .getElementById(option.getAttribute("data-target-id"))
+      .classList.add("hidden");
+
+    // Add click listener to switch options.
+    option.addEventListener("click", (event) => {
+      toggle(event.target, options);
+    });
+
+    // Show option that on init has "aria-current".
+    if (option.parentElement.hasAttribute("aria-current", "true")) {
+      document
+      .getElementById(option.getAttribute("data-target-id"))
+      .classList.remove("hidden");
+    }
+  }
+}
+
+function toggle(target, options) {
+  let target_li = target.closest("li");
+
+  // Check if target isn't already the active one.
+  if (!target_li.hasAttribute("aria-current", "true")) {
+    for (let i = 0; i < options.length; i++) {
+      // Toggle all options to "non active" state.
+      options[i].closest("li").removeAttribute("aria-current", "false");
+      document
+        .getElementById(options[i].getAttribute("data-target-id"))
+        .classList.add("hidden");
+    }
+    // Toggle selected option (target) to active state.
+    target_li.setAttribute("aria-current", "true");
+    document
+      .getElementById(target.getAttribute("data-target-id"))
+      .classList.remove("hidden");
+  }
+}