spina 2.18.0 → 2.19.0

data/app/assets/javascripts/spina/libraries/stimulus-reveal@1.4.2.js

@@ -0,0 +1,424 @@
+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/controllers/spina/admin/resource_select_options_controller.rb

@@ -0,0 +1,20 @@
+module Spina
+  module Admin
+    class ResourceSelectOptionsController < AdminController
+
+      def show
+        @resource = Resource.find(params[:id])
+      end
+
+      def index
+      end
+
+      def search
+        @resources ||= Resource.all
+        @resources = @resources.where("name ILIKE :query OR label ILIKE :query", query: "%#{params[:search]}%").order(created_at: :desc).distinct.page(params[:page]).per(20)
+        render :index
+      end
+
+    end
+  end
+end

data/app/models/spina/navigation_item.rb

@@ -6,7 +6,11 @@ module Spina
     # NavigationItems can be of two different kinds:
     # - A link to a page
     # - A link to a URL
-    enum kind: {page: "page", url: "url"}, _suffix: true
+    if Rails.version >= '7.2'
+      enum :kind, {page: "page", url: "url"}, suffix: true
+    else
+      enum kind: {page: "page", url: "url"}, _suffix: true
+    end
 
     has_ancestry
 

data/app/models/spina/parts/image_variant.rb

@@ -1,6 +1,8 @@
 module Spina
   module Parts
     class ImageVariant
+      ImageVariation = Struct.new(:key)
+
       attr_reader :blob
 
       def initialize(image, options)
@@ -9,9 +11,7 @@ module Spina
       end
 
       def variation
-        OpenStruct.new({
-          key: ActiveStorage::Variation.encode(@options)
-        })
+        ImageVariation.new(ActiveStorage::Variation.encode(@options))
       end
     end
   end

data/app/models/spina/parts/page_link.rb

@@ -2,11 +2,12 @@ module Spina
   module Parts
     class PageLink < Base
       attr_json :page_id, :integer, default: nil
-      
+      attr_json :text, :string, default: nil
+
       attr_accessor :options
 
       def content
-        Page.live.find_by(id: page_id)
+        ::Spina::Page.live.find_by(id: page_id)
       end
     end
   end

data/app/models/spina/parts/resource_link.rb

@@ -0,0 +1,13 @@
+module Spina
+  module Parts
+    class ResourceLink < Base
+      attr_json :resource_id, :integer, default: nil
+
+      attr_accessor :options
+
+      def content
+        ::Spina::Resource.find_by(id: resource_id)
+      end
+    end
+  end
+end

data/app/views/spina/admin/page_select_options/index.html.erb

@@ -1,12 +1,11 @@
 <%= turbo_frame_tag "page_select_options_#{params[:object_id]}" do %>
   <% if params[:search].blank? %>
-    <button type="button" data-action="page-select#clear reveal#hide" class="block hover:bg-gray-100 w-full text-left px-5 py-2 font-medium leading-5 text-gray-700 hover:text-gray-900 text-sm border-t border-gray-150">
+    <button type="button" data-action="select#clear reveal#hide" class="block hover:bg-gray-100 w-full text-left px-5 py-2 font-medium leading-5 text-gray-700 hover:text-gray-900 text-sm border-t border-gray-150">
       –
     </button>
   <% end %>
-  
   <% @pages.each do |page| %>
-    <button type="button" data-action="page-select#select reveal#hide" data-title="<%= page.title %>" data-id="<%= page.id %>" class="block hover:bg-gray-100 w-full text-left px-5 py-2 font-medium leading-5 text-gray-700 hover:text-gray-900 text-sm border-t border-gray-150">
+    <button type="button" data-action="select#select reveal#hide" data-title="<%= page.title %>" data-id="<%= page.id %>" class="block hover:bg-gray-100 w-full text-left px-5 py-2 font-medium leading-5 text-gray-700 hover:text-gray-900 text-sm border-t border-gray-150">
       <%= page.title %>
       <% if page.draft? %>
         <span class="font-normal text-gray-400">
@@ -18,4 +17,4 @@
       </div>
     </button>
   <% end %>
-<% end %>
+<% end %>

data/app/views/spina/admin/page_select_options/show.html.erb

@@ -1,3 +1,3 @@
 <%= turbo_frame_tag :page_title do %>
   <%= @page.title %>
-<% end %>
+<% end %>

data/app/views/spina/admin/parts/page_links/_form.html.erb

@@ -1,19 +1,23 @@
 <div class="mt-6">
   <label class="block text-sm leading-5 font-medium text-gray-700"><%= f.object.title %></label>
   <div class="text-gray-400 text-sm"><%= f.object.hint %></div>
-
-  <div data-controller="page-select reveal" data-placeholder="<%=t "spina.pages.select_page" %>" class="relative mt-1" data-reveal-away-value>
-    <%= f.hidden_field :page_id, data: {page_select_target: "input"} %>
-    
-    <button type="button" class="btn btn-default px-3 inline-flex items-center text-sm font-medium" data-action="reveal#toggle page-select#autofocus">
-      <%= heroicon("link", style: :mini, class: "w-4 h-4 mr-1 text-gray-600") %>
-      <div data-page-select-target="label">
-        <% if f.object.page_id.present? %>
-          <%= turbo_frame_tag :page_title, src: spina.admin_page_select_option_path(f.object.page_id) %>
-        <% end %>
+  <div data-controller="select reveal data-binding" data-placeholder="<%=t "spina.pages.select_page" %>" class="relative mt-1" data-reveal-away-value>
+    <%= f.hidden_field :page_id, data: { select_target: "input", action: 'change->data-binding#update', binding_target: 'label', binding_condition: "$source.value == ''", binding_attribute: 'hidden' } %>
+    <div class="flex">
+      <div class="rounded-md border text-gray-700 bg-white shadow-sm border-gray-300">
+        <button type="button" class="w-full py-1.5 px-3 inline-flex items-center text-sm font-medium" data-action="reveal#toggle select#autofocus">
+          <%= heroicon("link", style: :mini, class: "w-4 h-4 mr-1 text-gray-600") %>
+          <div data-select-target="label">
+            <% if f.object.page_id.present? %>
+              <%= turbo_frame_tag :page_title, src: spina.admin_page_select_option_path(f.object.page_id) %>
+            <% end %>
+          </div>
+        </button>
+        <fieldset class="border-t border-gray-300 border-dashed" data-binding-ref="label">
+          <%= f.text_field :text, placeholder: t("spina.page_links.text_placeholder"), class: "w-full min-w-64 py-1.5 border-0 rounded-b-md text-sm text-gray-700 focus:border-spina-light focus:ring focus:ring-spina-light" %>
+        </fieldset>
       </div>
-    </button>
-     
+    </div>
     <div class="relative mt-1">
       <div data-reveal data-transition hidden class="absolute shadow-lg border border-gray-200 origin-top-right rounded-md z-10 top-0">
         <div class="rounded-md bg-white shadow-xs">
@@ -21,10 +25,9 @@
             <%= ff.hidden_field :object_id, value: f.object.object_id %>
             <%= ff.hidden_field :resource, value: f.object.options&.dig(:resource) %>
             <div class="p-2">
-              <%= ff.search_field :search, placeholder: t("spina.search"), class: "form-input sticky top-0 text-sm w-80", data: {action: "input->form#submit focus->form#submit", page_select_target: "search"} %>
+              <%= ff.search_field :search, placeholder: t("spina.search"), class: "form-input sticky top-0 text-sm w-80", data: {action: "input->form#submit focus->form#submit", select_target: "search"} %>
             </div>
           <% end %>
-          
           <div class="overflow-scroll max-h-80">
             <%= turbo_frame_tag "page_select_options_#{f.object.object_id}" do %>
             <% end %>

data/app/views/spina/admin/parts/resource_links/_form.html.erb

@@ -0,0 +1,32 @@
+<div class="mt-6">
+  <label class="block text-sm leading-5 font-medium text-gray-700"><%= f.object.title %></label>
+  <div class="text-gray-400 text-sm"><%= f.object.hint %></div>
+  <div data-controller="select reveal" data-placeholder="<%=t "spina.resources.select_resource" %>" class="relative mt-1" data-reveal-away-value>
+    <%= f.hidden_field :resource_id, data: {select_target: "input"} %>
+    <button type="button" class="btn btn-default px-3 inline-flex items-center text-sm font-medium" data-action="reveal#toggle select#autofocus">
+      <%= heroicon("link", style: :mini, class: "w-4 h-4 mr-1 text-gray-600") %>
+      <div data-select-target="label">
+        <% if f.object.resource_id.present? %>
+          <%= turbo_frame_tag :resource_title, src: spina.admin_resource_select_option_path(f.object.resource_id) %>
+        <% end %>
+      </div>
+    </button>
+    <div class="relative mt-1">
+      <div data-reveal data-transition hidden class="absolute shadow-lg border border-gray-200 origin-top-right rounded-md z-10 top-0">
+        <div class="rounded-md bg-white shadow-xs">
+          <%= form_with url: spina.search_admin_resource_select_options_path, data: {turbo_frame: "resource_select_options_#{f.object.object_id}", controller: "form", debounce_time: 100} do |ff| %>
+            <%= ff.hidden_field :object_id, value: f.object.object_id %>
+            <%= ff.hidden_field :resource, value: f.object.options&.dig(:resource) %>
+            <div class="p-2">
+              <%= ff.search_field :search, placeholder: t("spina.search"), class: "form-input sticky top-0 text-sm w-80", data: {action: "input->form#submit focus->form#submit", select_target: "search"} %>
+            </div>
+          <% end %>
+          <div class="overflow-scroll max-h-80">
+            <%= turbo_frame_tag "resource_select_options_#{f.object.object_id}" do %>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/spina/admin/resource_select_options/index.html.erb

@@ -0,0 +1,13 @@
+<%= turbo_frame_tag "resource_select_options_#{params[:object_id]}" do %>
+  <% if params[:search].blank? %>
+    <button type="button" data-action="select#clear reveal#hide" class="block hover:bg-gray-100 w-full text-left px-5 py-2 font-medium leading-5 text-gray-700 hover:text-gray-900 text-sm border-t border-gray-150">
+      –
+    </button>
+  <% end %>
+
+  <% @resources.each do |resource| %>
+    <button type="button" data-action="select#select reveal#hide" data-title="<%= resource.label %>" data-id="<%= resource.id %>" class="block hover:bg-gray-100 w-full text-left px-5 py-2 font-medium leading-5 text-gray-700 hover:text-gray-900 text-sm border-t border-gray-150">
+      <%= resource.label %>
+    </button>
+  <% end %>
+<% end %>

data/app/views/spina/admin/resource_select_options/show.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :resource_title do %>
+  <%= @resource.label %>
+<% end %>