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.

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 {

app/javascript/alchemy_admin/components/spinner.js

@@ -2,12 +2,16 @@ import { AlchemyHTMLElement, html } 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}">
+      <div
+        class="spinner spinner--${this.size}"
+        style="--spinner-color: ${this.color}"
+      >
         <svg width="100%" viewBox="0 0 28 28">
           <path
             class="hex1"

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()
-    })
-  }
 }

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
   }
 
@@ -22,7 +22,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