spina 2.19.0 → 2.20.0

data/app/assets/javascripts/spina/controllers/reveal_controller.js

@@ -1 +1,424 @@
-//= require ../libraries/stimulus-reveal@1.4.2.js
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Stimulus controller to toggle element visibility
+ * @extends Controller
+ */
+export default class RevealController extends Controller {
+  static values = {
+    open: Boolean,
+    transitioning: Boolean,
+    targetSelector: String,
+    toggleKeys: String,
+    showKeys: String,
+    hideKeys: String,
+    away: Boolean,
+    debug: Boolean,
+  };
+
+  connect() {
+    this._initCloseKeypressListener();
+    this._initToggleKeypressListener();
+    this._initShowKeypressListener();
+    this._awayHandler = this._awayHandler.bind(this);
+  }
+
+  disconnect() {
+    this._teardown();
+  }
+
+  /**
+   * Shows elements connected to the controller.
+   * @param {Event} event - an event with a currentTarget DOMElement
+   */
+  show(event) {
+    if (this.openValue || this.transitioningValue) return;
+
+    this._init(event, true);
+  }
+
+  /**
+   * Hides elements connected to the controller.
+   * @param {Event} event - an event with a currentTarget DOMElement
+   */
+  hide(event) {
+    if (!this.openValue || this.transitioningValue) return;
+
+    this._init(event, false);
+  }
+
+  /**
+   * Toggles elements connected to the controller.
+   * @param {Event} event - an event with a currentTarget DOMElement
+   */
+  toggle(event) {
+    if (this.transitioningValue) return;
+
+    this._init(event, !this.openValue);
+  }
+
+  /**
+   * Stops event propagation of elements connected to the controller.
+   * @param {Event} event - an event with a currentTarget DOMElement
+   */
+  stop(event) {
+    event.stopPropagation();
+  }
+
+  // Private methods
+
+  /**
+   * @private
+   * @param {Event} event
+   * @param {Event} shouldOpen
+   */
+  async _init(event, shouldOpen) {
+    if (event && event.currentTarget && event.currentTarget.dataset) {
+      if ("revealPreventDefault" in event.currentTarget.dataset) {
+        event.preventDefault();
+      }
+      if ("revealStopPropagation" in event.currentTarget.dataset) {
+        event.stopPropagation();
+      }
+    }
+    // start stuff
+    const startSelector = `${this.selector}[data-${shouldOpen ? "enter" : "leave"
+      }-start]`;
+    const startPromises = this._didInitWithPromise(startSelector, shouldOpen);
+    await Promise.all(startPromises);
+
+    const defaultSelector = `${this.selector}:not([data-${shouldOpen ? "enter" : "leave"
+      }-start]):not([data-${shouldOpen ? "enter" : "leave"}-end])`;
+    const defaultPromises = this._didInitWithPromise(
+      defaultSelector,
+      shouldOpen
+    );
+    await Promise.all(defaultPromises);
+
+    // end stuff
+    const endSelector = `${this.selector}[data-${shouldOpen ? "enter" : "leave"
+      }-end]`;
+    const endPromises = this._didInitWithPromise(endSelector, shouldOpen);
+    await Promise.all(endPromises);
+  }
+
+  /**
+   * @private
+   */
+  _teardown() {
+    if (this.hasAwayValue) {
+      document.removeEventListener("click", this._awayHandler);
+    }
+  }
+
+  _didInitWithPromise(selector, shouldOpen) {
+    this._debug("selecting", selector, this._fetchElements(selector));
+    return this._fetchElements(selector).map((element) => {
+      return this._doInitTransition(element, shouldOpen);
+    });
+  }
+
+  /**
+   * @private
+   */
+  _initCloseKeypressListener() {
+    if (this.hasHideKeysValue) {
+      document.addEventListener("keydown", (event) => {
+        if (!this.openValue) return;
+        if (!this.hideKeysValue.split(",").includes(event.key.toLowerCase())) {
+          return;
+        }
+
+        event.stopPropagation();
+        this.toggle(event);
+      });
+    }
+  }
+
+  /**
+   * @private
+   */
+  _initToggleKeypressListener() {
+    if (this.hasToggleKeysValue) {
+      document.addEventListener("keydown", (event) => {
+        if (
+          !this.toggleKeysValue.split(",").includes(event.key.toLowerCase())
+        ) {
+          return;
+        }
+
+        event.stopPropagation();
+
+        this.toggle(event);
+      });
+    }
+  }
+
+  /**
+   * @private
+   */
+  _initShowKeypressListener() {
+    if (this.hasShowKeysValue) {
+      document.addEventListener("keydown", (event) => {
+        if (this.openValue) return;
+        if (!this.showKeysValue.split(",").includes(event.key.toLowerCase())) {
+          return;
+        }
+
+        event.stopPropagation();
+
+        this.toggle(event);
+      });
+    }
+  }
+
+  /**
+   * @private
+   */
+  _awayHandler(event) {
+    if (!this.element.contains(event.target)) {
+      document.removeEventListener("click", this._awayHandler);
+      this.hide(event);
+    }
+    return true;
+  }
+
+  /**
+   * @private
+   * @param {DOMElement} target
+   * @param {boolean} openState
+   */
+  _doInitTransition(target, openState) {
+    this._debug("init transition", `${openState ? "open" : "closed"}`, target);
+    this._debug(
+      "dispatching event",
+      `reveal:${openState ? "show" : "hide"}`,
+      target
+    );
+    target.dispatchEvent(
+      new Event(`reveal:${openState ? "show" : "hide"}`, {
+        bubbles: true,
+        cancelable: false,
+      })
+    );
+
+    return new Promise((resolve, reject) => {
+      if (
+        "transition" in target.dataset &&
+        this.element.offsetParent !== null
+      ) {
+        requestAnimationFrame(() => {
+          this._transitionSetup(target, openState);
+          const _didEndTransition = this._didEndTransition.bind(this);
+
+          target.addEventListener(
+            "transitionend",
+            function _didEndTransitionHandler() {
+              _didEndTransition(target, openState);
+              target.removeEventListener(
+                "transitionend",
+                _didEndTransitionHandler
+              );
+              resolve();
+            }
+          );
+
+          requestAnimationFrame(() => {
+            this._doStartTransition(target, openState);
+          });
+        });
+      } else {
+        if (openState) {
+          this._debug(
+            "force hidden - init",
+            `${openState ? "open" : "closed"}`,
+            target
+          );
+          target.hidden = !target.hidden;
+        }
+        this._doCompleteTransition(target, openState);
+        resolve();
+      }
+    });
+  }
+
+  /**
+   * @private
+   * @param {DOMElement} target
+   */
+  _doStartTransition(target, openState) {
+    this._debug("start transition", `${openState ? "open" : "closed"}`, target);
+    this.transitioningValue = true;
+    if (target.dataset.useTransitionClasses === "true") {
+      const transitionClasses = this._transitionClasses(
+        target,
+        this.transitionType
+      );
+      target.classList.add(...transitionClasses.end.split(" "));
+      target.classList.remove(...transitionClasses.start.split(" "));
+    } else {
+      const transitions = this._transitionDefaults(openState);
+      target.style.transformOrigin = transitions.origin;
+      target.style.transitionProperty = "opacity transform";
+      target.style.transitionDuration = `${transitions.duration / 1000}s`;
+      target.style.transitionTimingFunction = "cubic-bezier(0.4, 0.0, 0.2, 1)";
+
+      target.style.opacity = transitions.to.opacity;
+      target.style.transform = `scale(${transitions.to.scale / 100})`;
+    }
+  }
+
+  /**
+   * @private
+   * @param {DOMElement} target
+   * @param {boolean} openState
+   */
+  _didEndTransition(target, openState) {
+    this._debug("end transition", `${openState ? "open" : "closed"}`, target);
+    if (target.dataset.useTransitionClasses === "true") {
+      const transitionClasses = this._transitionClasses(
+        target,
+        this.transitionType
+      );
+      target.classList.remove(...transitionClasses.before.split(" "));
+    } else {
+      target.style.opacity = target.dataset.opacityCache;
+      target.style.transform = target.dataset.transformCache;
+      target.style.transformOrigin = target.dataset.transformOriginCache;
+    }
+    this._doCompleteTransition(target, openState);
+  }
+
+  /**
+   * @private
+   * @param {DOMElement} target
+   * @param {boolean} openState
+   */
+  _doCompleteTransition(target, openState) {
+    this._debug(
+      "complete transition",
+      `${openState ? "open" : "closed"}`,
+      target
+    );
+    this.transitioningValue = false;
+
+    if (!openState) {
+      this._debug(
+        "force hidden - complete",
+        `${openState ? "open" : "closed"}`,
+        target
+      );
+      target.hidden = !target.hidden;
+    }
+    this.openValue = openState;
+
+    this._debug(
+      "dispatching event",
+      `reveal:${openState ? "shown" : "hidden"}`,
+      target
+    );
+    target.dispatchEvent(
+      new Event(`reveal:${openState ? "shown" : "hidden"}`, {
+        bubbles: true,
+        cancelable: false,
+      })
+    );
+
+    if (this.hasAwayValue && openState) {
+      document.addEventListener("click", this._awayHandler);
+    }
+
+    this._debug("dispatching event", "reveal:complete", target);
+    target.dispatchEvent(
+      new Event("reveal:complete", { bubbles: true, cancelable: false })
+    );
+  }
+
+  /**
+   * @private
+   * @param {DOMElement} target
+   * @param {boolean} openState
+   */
+  _transitionSetup(target, openState) {
+    this.transitionType = openState ? "transitionEnter" : "transitionLeave";
+
+    if (this.transitionType in target.dataset) {
+      target.dataset.useTransitionClasses = true;
+      const transitionClasses = this._transitionClasses(
+        target,
+        this.transitionType
+      );
+      target.classList.add(...transitionClasses.before.split(" "));
+      target.classList.add(...transitionClasses.start.split(" "));
+    } else {
+      target.dataset.useTransitionClasses = false;
+      const transitions = this._transitionDefaults(openState);
+      target.dataset.opacityCache = target.style.opacity;
+      target.dataset.transformCache = target.style.transform;
+      target.dataset.transformOriginCache = target.style.transformOrigin;
+
+      target.style.opacity = transitions.from.opacity;
+      target.style.transform = `scale(${transitions.from.scale / 100})`;
+    }
+    if (openState) {
+      this._debug("opening with transition", target);
+      target.hidden = !target.hidden;
+    }
+  }
+
+  /**
+   * @private
+   * @param {boolean} openState
+   */
+  _transitionDefaults(openState) {
+    return {
+      duration: openState ? 200 : 150,
+      origin: "center",
+      from: {
+        opacity: openState ? 0 : 1,
+        scale: openState ? 95 : 100,
+      },
+      to: {
+        opacity: openState ? 1 : 0,
+        scale: openState ? 100 : 95,
+      },
+    };
+  }
+
+  /**
+   * @private
+   * @param {DOMElement} target
+   * @param {string} transitionType
+   */
+  _transitionClasses(target, transitionType) {
+    return {
+      before: target.dataset[transitionType],
+      start: target.dataset[`${transitionType}Start`],
+      end: target.dataset[`${transitionType}End`],
+    };
+  }
+
+  /**
+   * @private
+   * @param {String} selector
+   */
+  _fetchElements(selector) {
+    return [this.element, ...this.element.querySelectorAll(selector)].filter(
+      (el) => el.matches(selector)
+    );
+  }
+
+  /**
+   * @private
+   * @param {Array} args
+   */
+  _debug(...args) {
+    if (this.debugValue) console.log(...args);
+  }
+
+  get selector() {
+    return this.hasTargetSelectorValue
+      ? this.targetSelectorValue
+      : "[data-reveal]";
+  }
+}

data/app/assets/javascripts/spina/controllers/sortable_controller.js

@@ -1,6 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
 import Sortable from "libraries/sortablejs"
-import formRequestSubmitPolyfill from "libraries/form-request-submit-polyfill"
 
 export default class extends Controller {
   static get targets() {
@@ -36,4 +35,4 @@ export default class extends Controller {
     return this.sortable.toArray()
   }
 
-}
+}

data/app/assets/javascripts/spina/libraries/canvas-confetti.js

@@ -1 +1 @@
-//= require ./canvas-confetti@1.3.2.js
+export { default } from "libraries/canvas-confetti@1.3.2"

data/app/assets/javascripts/spina/libraries/hotkeys.js

@@ -1 +1 @@
-//= require ./hotkeys@3.8.7.js
+export { default } from "libraries/hotkeys@3.8.7"

data/app/assets/javascripts/spina/libraries/sortablejs.js

@@ -1 +1 @@
-//= require ./sortablejs@1.13.0.js
+export { default } from "libraries/sortablejs@1.13.0"

data/app/assets/javascripts/spina/libraries/trix.js

@@ -1,4 +1,4 @@
-//= require ./trix@1.3.1.esm.js
+import "libraries/trix@1.3.1.esm"
 
 // Extra headings
 Trix.config.blockAttributes.heading2 = {

data/app/assets/stylesheets/spina/fonts-propshaft.css

@@ -0,0 +1,114 @@
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 400;
+  src: url('Metropolis-Regular.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-style: italic;
+  src: url('Metropolis-RegularItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 100;
+  src: url('Metropolis-Thin.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 100;
+  font-style: italic;
+  src: url('Metropolis-ThinItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 200;
+  src: url('Metropolis-ExtraLight.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 200;
+  src: url('Metropolis-ExtraLightItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 300;
+  src: url('Metropolis-Light.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 300;
+  font-style: italic;
+  src: url('Metropolis-LightItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 500;
+  src: url('Metropolis-Medium.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 500;
+  font-style: italic;
+  src: url('Metropolis-MediumItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 600;
+  src: url('Metropolis-SemiBold.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 600;
+  font-style: italic;
+  src: url('Metropolis-SemiBoldItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 700;
+  src: url('Metropolis-Bold.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 700;
+  font-style: italic;
+  src: url('Metropolis-BoldItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 800;
+  src: url('Metropolis-ExtraBold.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 800;
+  font-style: italic;
+  src: url('Metropolis-ExtraBoldItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 900;
+  src: url('Metropolis-Black.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 900;
+  font-style: italic;
+  src: url('Metropolis-BlackItalic.woff2') format("woff2");
+}

data/app/helpers/spina/admin/pages_helper.rb

@@ -1,10 +1,10 @@
 module Spina::Admin
   module PagesHelper
     def asset_available?(path)
-      if Rails.configuration.assets.compile
-        Rails.application.precompiled_assets.include?(path)
-      else
-        Rails.application.assets_manifest.assets[path].present?
+      if defined?(Propshaft)
+        check_propshaft_asset(path)
+      elsif defined?(Sprockets)
+        check_sprockets_asset(path)
       end
     end
 
@@ -24,5 +24,24 @@ module Spina::Admin
     def option_label(part, value)
       t(["options", part.name, value].compact.join("."))
     end
+
+    private
+
+      def check_propshaft_asset(path)
+        if Rails.configuration.assets.compile
+          Rails.application.assets.load_path.find(path).present? rescue false
+        else
+          Rails.application.assets.asset_for(path).present? rescue false
+        end
+      end
+
+      def check_sprockets_asset(path)
+        if Rails.configuration.assets.compile
+          Rails.application.precompiled_assets.include?(path)
+        else
+          Rails.application.assets_manifest.assets[path].present?
+        end
+      end
+
   end
 end

data/app/models/spina/embeds/youtube.rb

@@ -6,7 +6,7 @@ module Spina::Embeds
 
     heroicon "video-camera"
 
-    REGEX = /(?:youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
+    REGEX = /(?:youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|shorts\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
 
     validates :url, presence: true, format: {with: REGEX}
 

data/app/views/layouts/spina/admin/application.html.erb

@@ -10,8 +10,15 @@
     
     <title><%= Spina.config.backend_title %></title>
 
+    <!-- Fonts -->
+    <% if defined?(Propshaft) %>
+      <%= stylesheet_link_tag "spina/fonts-propshaft", data: {turbo_track: "reload"} %>
+    <% elsif defined?(Sprockets) %>
+      <%= stylesheet_link_tag "spina/fonts-sprockets", data: {turbo_track: "reload"} %>
+    <% end %>
+
     <!-- Stylesheets -->
-    <%= stylesheet_link_tag "spina/tailwind", "spina/fonts", "spina/animate", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "spina/tailwind", "spina/animate", "data-turbo-track": "reload" %>
     
     <!-- Spina's importmap -->
     <%= spina_importmap_tags %>
@@ -25,4 +32,4 @@
     <%= render "spina/admin/shared/version" %>
     <%= content_for?(:body) ? yield(:body) : yield %>
   </body>
-</html>
+</html>

data/config/locales/de.yml

@@ -241,6 +241,8 @@ de:
       wrong_username_or_password: E-Mail oder Passwort falsch
     options:
       choose_option: Option auswählen
+    page_links:
+      text_placeholder: "Optionaler Text für Link"
     pages:
       add_page_to: "Seite hinzufügen zu:"
       add_translation: Übersetzung für %{language} hinzufügen

data/db/migrate/18_change_default_spina_resources_slug.rb

@@ -0,0 +1,9 @@
+class ChangeDefaultSpinaResourcesSlug < ActiveRecord::Migration[7.0]
+  def up
+    change_column :spina_resources, :slug, :jsonb, default: {}
+  end
+
+  def down
+    change_column :spina_resources, :slug, :jsonb, default: nil
+  end
+end

data/lib/spina/engine.rb

@@ -11,7 +11,6 @@ require "attr_json"
 require "view_component"
 require "jsonapi/serializer"
 require "browser"
-require "sprockets/railtie"
 
 module Spina
   class Engine < ::Rails::Engine

data/lib/spina/railtie.rb

@@ -1,7 +1,10 @@
 module Spina
   class Railtie < Rails::Railtie
     initializer "spina.assets.precompile" do |app|
-      app.config.assets.precompile += %w[spina/manifest]
+      if defined?(Sprockets)
+        # Sprockets configuration
+        app.config.assets.precompile += %w[spina/manifest]
+      end
     end
 
     initializer "spina.theme_reloader" do |app|

data/lib/spina/version.rb

@@ -1,3 +1,3 @@
 module Spina
-  VERSION = "2.19.0"
+  VERSION = "2.20.0"
 end