Add color option to spinner

The option is only used in the image gallery, but is now possible to use every color inside the spinner.
AlchemyCMS · Aug 31, 2023 · 9aad4b3 · 9aad4b3
1 parent be07c55
commit 9aad4b3
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 55 deletions.
diff --git a/app/assets/stylesheets/alchemy/spinner.scss b/app/assets/stylesheets/alchemy/spinner.scss
@@ -5,31 +5,21 @@
   transform: translate(-50%, -50%);
   text-align: center;
   line-height: 1;
-
-  path {
-    fill: currentColor;
-    opacity: 1;
-    animation: spinner 1s infinite ease-in-out both;
-  }
-
-  &.spinner--tiny {
-    width: 8px;
-    height: 8px;
-  }
+  width: var(--spinner-size, 32px);
+  height: var(--spinner-size, 32px);
 
   &.spinner--small {
-    width: 16px;
-    height: 16px;
+    --spinner-size: 16px;
   }
 
-  &.spinner--medium {
-    width: 32px;
-    height: 32px;
+  &.spinner--large {
+    --spinner-size: 48px;
   }
 
-  &.spinner--large {
-    width: 48px;
-    height: 48px;
+  path {
+    fill: var(--spinner-color, currentColor);
+    opacity: 1;
+    animation: spinner 1s infinite ease-in-out both;
   }
 
   .hex2 {

diff --git a/app/javascript/alchemy_admin/components/spinner.js b/app/javascript/alchemy_admin/components/spinner.js
@@ -1,28 +1,29 @@
-import { AlchemyHTMLElement, html } from "./alchemy_html_element"
+import { AlchemyHTMLElement } from "./alchemy_html_element"
 
 class Spinner extends AlchemyHTMLElement {
   static properties = {
-    size: { default: "medium" }
+    size: { default: "medium" },
+    color: { default: "currentColor" }
   }
 
   render() {
-    return html`
-      <div class="spinner spinner--${this.size}">
-        <svg width="100%" viewBox="0 0 28 28">
-          <path
-            class="hex1"
-            d="M5.938,18.07l-5.878-5.9l2.154-8.058l8.024-2.161l5.87,5.9l-2.144,8.058L5.938,18.07z"
-          />
-          <path
-            class="hex2"
-            d="M19.686,20.785l-4.731-4.754l1.725-6.487l6.468-1.742l4.733,4.754l-1.734,6.487L19.686,20.785z"
-          />
-          <path
-            class="hex3"
-            d="M11.708,26.294l-3.47-3.485l1.276-4.758l4.74-1.276l3.468,3.485l-1.265,4.758L11.708,26.294z"
-          />
-        </svg>
-      </div>
+    this.className = `spinner spinner--${this.size}`
+
+    return `
+      <svg width="100%" viewBox="0 0 28 28" style="--spinner-color: ${this.color}">
+        <path
+          class="hex1"
+          d="M5.938,18.07l-5.878-5.9l2.154-8.058l8.024-2.161l5.87,5.9l-2.144,8.058L5.938,18.07z"
+        />
+        <path
+          class="hex2"
+          d="M19.686,20.785l-4.731-4.754l1.725-6.487l6.468-1.742l4.733,4.754l-1.734,6.487L19.686,20.785z"
+        />
+        <path
+          class="hex3"
+          d="M11.708,26.294l-3.47-3.485l1.276-4.758l4.74-1.276l3.468,3.485l-1.265,4.758L11.708,26.294z"
+        />
+      </svg>
     `
   }
 }

diff --git a/app/javascript/alchemy_admin/image_loader.js b/app/javascript/alchemy_admin/image_loader.js
@@ -1,23 +1,21 @@
 // Shows spinner while loading images and
 // fades the image after its been loaded
 
-const DEFAULT_SPINNER_OPTIONS = { fill: "#fff" }
-
 export default class ImageLoader {
-  static init(scope = document, spinnerOptions = DEFAULT_SPINNER_OPTIONS) {
+  static init(scope = document) {
     if (typeof scope === "string") {
       scope = document.querySelector(scope)
     }
     scope.querySelectorAll("img").forEach((image) => {
-      const loader = new ImageLoader(image, spinnerOptions)
+      const loader = new ImageLoader(image)
       loader.load()
     })
   }
 
-  constructor(image, spinnerOptions = DEFAULT_SPINNER_OPTIONS) {
+  constructor(image) {
     this.image = image
     this.parent = image.parentNode
-    this.spinner = new Alchemy.Spinner("small", spinnerOptions)
+    this.spinner = new Alchemy.Spinner("small", "white")
     this.bind()
   }
 
@@ -34,14 +32,14 @@ export default class ImageLoader {
   }
 
   onLoaded() {
-    this.removeSpinner()
+    this.spinner.stop()
     this.image.classList.remove("loading")
     this.unbind()
   }
 
   onError(evt) {
     const message = `Could not load "${this.image.src}"`
-    this.removeSpinner()
+    this.spinner.stop()
     this.parent.innerHTML = `<span class="icon error fas fa-exclamation-triangle" title="${message}" />`
     console.error(message, evt)
     this.unbind()
@@ -51,10 +49,4 @@ export default class ImageLoader {
     this.image.removeEventListener("load", this.onLoaded)
     this.image.removeEventListener("error", this.onError)
   }
-
-  removeSpinner() {
-    this.parent.querySelectorAll(".spinner").forEach((spinner) => {
-      spinner.remove()
-    })
-  }
 }
diff --git a/app/javascript/alchemy_admin/spinner.js b/app/javascript/alchemy_admin/spinner.js
@@ -1,9 +1,9 @@
 import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
 
 export default class Spinner {
-  constructor(size, styles) {
+  constructor(size, color = "currentColor") {
     this.size = size
-    this.styles = styles
+    this.color = color
     this.spinner = undefined
   }
 
@@ -21,7 +21,7 @@ export default class Spinner {
       parent = document.body
     }
     this.spinner = createHtmlElement(
-      `<alchemy-spinner size="${this.size}"></alchemy-spinner>`
+      `<alchemy-spinner size="${this.size}" color="${this.color}"></alchemy-spinner>`
     )
     parent.append(this.spinner)
     return this