alchemy_cms 7.1.7 → 7.2.0.rc1

data/app/helpers/alchemy/base_helper.rb

@@ -4,9 +4,11 @@ module Alchemy
   module BaseHelper
     # An alias for truncate.
     # Left here for downwards compatibilty.
+    # @deprecated
     def shorten(text, length)
       text.truncate(length: length)
     end
+    deprecate :shorten, deprecator: Alchemy::Deprecation
 
     # Logs a message in the Rails logger (warn level)
     # and optionally displays an error message to the user.
@@ -22,21 +24,12 @@ module Alchemy
     # Render a Remix icon
     #
     # @param icon_name [String] icon name
-    # @option options - style: nil [String] icon style. line or fill
+    # @option options - style: fill [String] icon style. line or fill. Pass false for no style.
     # @option options - size: nil [String] icon size
     #
     # @return [String]
     def render_icon(icon_name, options = {})
-      options = {style: "line", fixed_width: true}.merge(options)
-      style = options[:style] && "-#{ri_style(options[:style])}"
-      classes = [
-        "icon",
-        "ri-#{ri_icon(icon_name)}#{style}",
-        options[:size] ? "ri-#{options[:size]}" : nil,
-        options[:fixed_width] ? "ri-fw" : nil,
-        options[:class]
-      ].compact
-      content_tag("i", nil, class: classes)
+      render Alchemy::Admin::Icon.new(icon_name, options)
     end
 
     # Returns a div with an icon and the passed content
@@ -50,34 +43,21 @@ module Alchemy
     #   <% end %>
     #
     def render_message(type = :info, msg = nil, &blk)
-      icon_class = message_icon_class(type)
-      if blk
-        content_tag :div, render_icon(icon_class) + capture(&blk), class: "#{type} message"
-      else
-        content_tag :div, render_icon(icon_class) + msg, class: "#{type} message"
-      end
-    end
-
-    # Renders the flash partial (+alchemy/admin/partials/flash+)
-    #
-    # @param [String] notice The notice you want to display
-    # @param [Symbol] style The style of this flash. Valid values are +:notice+ (default), +:warn+ and +:error+
-    #
-    def render_flash_notice(notice, style = :notice)
-      render("alchemy/admin/partials/flash", flash_type: style, message: notice)
+      render Alchemy::Admin::Message.new(msg || capture(&blk), type: type)
     end
 
     # Checks if the given argument is a String or a Page object.
     # If a String is given, it tries to find the page via page_layout
     # Logs a warning if no page is given.
+    # @deprecated
     def page_or_find(page)
-      unless Language.current
+      unless Current.language
         warning("No default language set up")
         return nil
       end
 
       if page.is_a?(String)
-        page = Language.current.pages.find_by(page_layout: page)
+        page = Current.language.pages.find_by(page_layout: page)
       end
       if page.blank?
         warning("No Page found for #{page.inspect}")
@@ -86,68 +66,6 @@ module Alchemy
         page
       end
     end
-
-    # Returns the icon name for given message type
-    #
-    # @param message_type [String] The message type. One of +warning+, +info+, +notice+, +error+
-    # @return [String] The icon name
-    def message_icon_class(message_type)
-      case message_type.to_s
-      when "warning", "warn", "alert" then "exclamation"
-      when "notice" then "check"
-      when "error" then "bug"
-      when "hint" then "info"
-      else
-        message_type
-      end
-    end
-
-    private
-
-    # Returns the Remix icon name for given icon name
-    #
-    # @param icon_name [String] The icon name.
-    # @return [String] The Remix icon class
-    def ri_icon(icon_name)
-      case icon_name.to_s
-      when "minus", "remove", "delete"
-        "delete-bin-2"
-      when "plus"
-        "add"
-      when "copy"
-        "file-copy"
-      when "download"
-        "download-2"
-      when "upload"
-        "upload-2"
-      when "exclamation"
-        "alert"
-      when "info-circle", "info"
-        "information"
-      when "times"
-        "close"
-      when "tag"
-        "price-tag-3"
-      when "cog"
-        "settings-3"
-      else
-        icon_name
-      end
-    end
-
-    # Returns the Remix icon style for given style
-    #
-    # @param style [String] The style name
-    # @return [String] The RemixIcon style
-    def ri_style(style)
-      case style.to_s
-      when "solid", "fill"
-        "fill"
-      when "line", "regular"
-        "line"
-      else
-        style
-      end
-    end
+    deprecate :page_or_find, deprecator: Alchemy::Deprecation
   end
 end

data/app/helpers/alchemy/elements_helper.rb

@@ -72,13 +72,13 @@ module Alchemy
     #
     def render_elements(options = {}, &blk)
       options = {
-        from_page: @page,
+        from_page: Current.page,
         render_format: "html"
       }.update(options)
 
       finder = options[:finder] || Alchemy::ElementsFinder.new(options)
 
-      page_version = if @preview_mode
+      page_version = if Current.preview_page?
         options[:from_page]&.draft_version
       else
         options[:from_page]&.public_version
@@ -173,7 +173,7 @@ module Alchemy
 
     # Returns a hash containing the HTML tag attributes required for preview mode.
     def element_preview_code_attributes(element)
-      return {} unless element.present? && @preview_mode && element.page == @page
+      return {} unless element.present? && Current.preview_page?(element.page)
 
       {"data-alchemy-element" => element.id}
     end

data/app/helpers/alchemy/pages_helper.rb

@@ -64,9 +64,8 @@ module Alchemy
     #
     def render_site_layout(&block)
       render current_alchemy_site, &block
-    rescue ActionView::MissingTemplate
-      warning("Site layout for #{current_alchemy_site.try(:name)} not found. Please run `rails g alchemy:site_layouts`")
-      ""
+    rescue ActionView::MissingTemplate => error
+      error_or_warning(error, "Site layout for #{current_alchemy_site.try(:name)} not found. Please run `rails g alchemy:site_layouts`")
     end
 
     # Renders a menu partial
@@ -79,7 +78,7 @@ module Alchemy
     def render_menu(menu_type, options = {})
       root_node = Alchemy::Node.roots.find_by(
         menu_type: menu_type,
-        language: Alchemy::Language.current
+        language: Alchemy::Current.language
       )
       if root_node.nil?
         warning("Menu with type #{menu_type} not found!")
@@ -87,11 +86,8 @@ module Alchemy
       end
 
       render("alchemy/menus/#{menu_type}/wrapper", menu: root_node, options: options)
-    rescue ActionView::MissingTemplate => e
-      warning <<~WARN
-        Menu partial not found for #{menu_type}.
-        #{e}
-      WARN
+    rescue ActionView::MissingTemplate => error
+      error_or_warning(error, "Menu partial for #{menu_type} not found. Please run `rails g alchemy:menus`")
     end
 
     # Returns page links in a breadcrumb beginning from root to current page.
@@ -169,5 +165,16 @@ module Alchemy
     def meta_robots
       "#{@page.robot_index? ? "" : "no"}index, #{@page.robot_follow? ? "" : "no"}follow"
     end
+
+    private
+
+    def error_or_warning(error, message)
+      if Rails.application.config.consider_all_requests_local?
+        raise error, message
+      else
+        Rails.logger.error message
+        ""
+      end
+    end
   end
 end

data/app/javascript/alchemy_admin/components/action.js

@@ -0,0 +1,41 @@
+import { reloadPreview } from "alchemy_admin/components/preview_window"
+import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
+
+class Action extends HTMLElement {
+  constructor() {
+    super()
+
+    // map action names with Javascript functions
+    this.actions = {
+      // add a intermediate closeCurrentDialog - action
+      // this will be gone, if all dialogs are working with a promise and
+      // we don't have to implicitly close the dialog
+      closeCurrentDialog: Alchemy.closeCurrentDialog,
+      reloadPreview,
+      updateAnchorIcon: IngredientAnchorLink.updateIcon
+    }
+  }
+
+  connectedCallback() {
+    const func = this.actions[this.name]
+
+    if (func) {
+      func(...this.params)
+    } else {
+      console.error(`Unknown Alchemy action: ${this.name}`)
+    }
+  }
+
+  get name() {
+    return this.getAttribute("name")
+  }
+
+  get params() {
+    if (this.hasAttribute("params")) {
+      return JSON.parse(this.getAttribute("params"))
+    }
+    return []
+  }
+}
+
+customElements.define("alchemy-action", Action)

data/app/javascript/alchemy_admin/components/attachment_select.js

@@ -0,0 +1,24 @@
+import { RemoteSelect } from "alchemy_admin/components/remote_select"
+
+class AttachmentSelect extends RemoteSelect {
+  _renderResult(item) {
+    return this._renderListEntry(item)
+  }
+
+  /**
+   * html template for each list entry
+   * @param {object} page
+   * @returns {string}
+   * @private
+   */
+  _renderListEntry(attachment) {
+    return `
+      <div class="attachment-select--attachment">
+        <alchemy-icon name="${attachment.icon_css_class}"></alchemy-icon>
+        <span class="attachment-select--attachment-name">${attachment.name}</span>
+      </div>
+    `
+  }
+}
+
+customElements.define("alchemy-attachment-select", AttachmentSelect)

data/app/javascript/alchemy_admin/components/button.js

@@ -8,6 +8,8 @@ class Button extends HTMLButtonElement {
       if (this.form.dataset.remote == "true") {
         this.form.addEventListener("ajax:complete", this)
       }
+
+      this.form.addEventListener("turbo:submit-end", this)
     } else {
       console.warn("No form for button found!", this)
     }
@@ -26,6 +28,7 @@ class Button extends HTMLButtonElement {
         }
         break
       case "ajax:complete":
+      case "turbo:submit-end":
         this.enable()
         break
     }

data/app/javascript/alchemy_admin/components/clipboard_button.js

@@ -1,11 +1,12 @@
 import "clipboard"
+import { growl } from "alchemy_admin/growler"
 
 class ClipboardButton extends HTMLElement {
   constructor() {
     super()
 
     this.innerHTML = `
-      <i class="icon ri-clipboard-line ri-fw"></i>
+      <alchemy-icon name="clipboard"></alchemy-icon>
     `
 
     this.clipboard = new ClipboardJS(this, {
@@ -15,7 +16,7 @@ class ClipboardButton extends HTMLElement {
     })
 
     this.clipboard.on("success", () => {
-      Alchemy.growl(this.getAttribute("success-text"))
+      growl(this.getAttribute("success-text"))
     })
   }
 

data/app/javascript/alchemy_admin/components/dialog_link.js

@@ -10,13 +10,16 @@ export const DEFAULTS = {
 }
 
 export class DialogLink extends HTMLAnchorElement {
-  connectedCallback() {
-    this.addEventListener("click", (evt) => {
-      if (!this.disabled) {
-        this.openDialog()
-      }
-      evt.preventDefault()
-    })
+  constructor() {
+    super()
+    this.addEventListener("click", this)
+  }
+
+  handleEvent(evt) {
+    if (!this.disabled) {
+      this.openDialog()
+    }
+    evt.preventDefault()
   }
 
   openDialog() {

data/app/javascript/alchemy_admin/components/dom_id_select.js

@@ -0,0 +1,69 @@
+import { get } from "alchemy_admin/utils/ajax"
+import { translate } from "alchemy_admin/i18n"
+
+class DomIdSelect extends HTMLElement {
+  dataItem(hash) {
+    return {
+      id: `#${hash}`,
+      text: `#${hash}`
+    }
+  }
+
+  get selectElement() {
+    return this.querySelector('select[is="alchemy-select"]')
+  }
+}
+
+class DomIdApiSelect extends DomIdSelect {
+  #pageId = undefined
+
+  connectedCallback() {
+    this.page = this.getAttribute("page")
+  }
+
+  async #fetchDomIds() {
+    const result = await get(Alchemy.routes.api_ingredients_path, {
+      page_id: this.#pageId
+    })
+    const options = result.data.ingredients
+      .filter((ingredient) => ingredient.data?.dom_id)
+      .map((ingredient) => this.dataItem(ingredient.data.dom_id))
+    const prompt =
+      options.length > 0 ? translate("None") : translate("No anchors found")
+
+    this.selectElement.setOptions(options, prompt)
+    this.selectElement.enable()
+  }
+
+  #reset() {
+    // wait a tick to initialize the alchemy-select
+    requestAnimationFrame(() => {
+      this.selectElement.disable()
+      this.selectElement.setOptions([], translate("Select a page first"))
+    })
+  }
+
+  set page(pageId) {
+    this.#pageId = pageId
+    pageId ? this.#fetchDomIds() : this.#reset()
+  }
+}
+
+class DomIdPreviewSelect extends DomIdSelect {
+  connectedCallback() {
+    // wait a tick to let the browser initialize the inner select component
+    requestAnimationFrame(() => {
+      const frame = document.getElementById("alchemy_preview_window")
+      const elements = frame.contentDocument?.querySelectorAll("[id]") || []
+      if (elements.length > 0) {
+        const options = Array.from(elements).map((element) => {
+          return this.dataItem(element.id)
+        })
+        this.selectElement.setOptions(options, translate("None"))
+      }
+    })
+  }
+}
+
+customElements.define("alchemy-dom-id-api-select", DomIdApiSelect)
+customElements.define("alchemy-dom-id-preview-select", DomIdPreviewSelect)

data/app/javascript/alchemy_admin/components/element_editor/delete_element_button.js

@@ -0,0 +1,42 @@
+import { removeTab } from "alchemy_admin/fixed_elements"
+import { growl } from "alchemy_admin/growler"
+import { reloadPreview } from "alchemy_admin/components/preview_window"
+import { confirmToDeleteDialog } from "alchemy_admin/confirm_dialog"
+
+export class DeleteElementButton extends HTMLElement {
+  constructor() {
+    super()
+    this.addEventListener("click", this)
+  }
+
+  handleEvent() {
+    confirmToDeleteDialog(this.url, { message: this.message }).then(
+      (response) => {
+        this.#removeElement(response)
+      }
+    )
+  }
+
+  #removeElement(response) {
+    const elementEditor = this.closest("alchemy-element-editor")
+    elementEditor.addEventListener("transitionend", () => {
+      if (elementEditor.fixed) {
+        removeTab(elementEditor.elementId)
+      }
+      elementEditor.remove()
+    })
+    elementEditor.classList.add("dismiss")
+    growl(response.message)
+    reloadPreview()
+  }
+
+  get url() {
+    return this.getAttribute("href")
+  }
+
+  get message() {
+    return this.getAttribute("message")
+  }
+}
+
+customElements.define("alchemy-delete-element-button", DeleteElementButton)

data/app/javascript/alchemy_admin/components/element_editor/publish_element_button.js

@@ -1,4 +1,6 @@
 import { patch } from "alchemy_admin/utils/ajax"
+import { reloadPreview } from "alchemy_admin/components/preview_window"
+import { growl } from "alchemy_admin/growler"
 
 export class PublishElementButton extends HTMLElement {
   constructor() {
@@ -14,9 +16,9 @@ export class PublishElementButton extends HTMLElement {
         .then((response) => {
           this.elementEditor.published = response.data.public
           this.tooltip.setAttribute("content", response.data.label)
-          Alchemy.reloadPreview()
+          reloadPreview()
         })
-        .catch((error) => Alchemy.growl(error.message, "error"))
+        .catch((error) => growl(error.message, "error"))
     }
   }
 

data/app/javascript/alchemy_admin/components/element_editor.js

@@ -1,12 +1,14 @@
-import TagsAutocomplete from "alchemy_admin/tags_autocomplete"
 import ImageLoader from "alchemy_admin/image_loader"
 import fileEditors from "alchemy_admin/file_editors"
 import pictureEditors from "alchemy_admin/picture_editors"
+import SortableElements from "alchemy_admin/sortable_elements"
 import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
 import { post } from "alchemy_admin/utils/ajax"
 import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
+import { growl } from "alchemy_admin/growler"
 
 import "alchemy_admin/components/element_editor/publish_element_button"
+import "alchemy_admin/components/element_editor/delete_element_button"
 
 export class ElementEditor extends HTMLElement {
   constructor() {
@@ -44,7 +46,7 @@ export class ElementEditor extends HTMLElement {
       `#${this.id} .ingredient-editor.file, #${this.id} .ingredient-editor.audio, #${this.id} .ingredient-editor.video`
     )
     pictureEditors(`#${this.id} .ingredient-editor.picture`)
-    TagsAutocomplete(this)
+    SortableElements(`#${this.id} .nested-elements`)
   }
 
   handleEvent(event) {
@@ -99,7 +101,7 @@ export class ElementEditor extends HTMLElement {
   }
 
   focusElementPreview() {
-    Alchemy.PreviewWindow.postMessage({
+    this.previewWindow?.postMessage({
       message: "Alchemy.focusElement",
       element_id: this.elementId
     })
@@ -139,11 +141,13 @@ export class ElementEditor extends HTMLElement {
         )
       })
       // Show message
-      Alchemy.growl(warning, "warn")
+      growl(warning, "warn")
       this.elementErrors.classList.remove("hidden")
     } else {
-      Alchemy.growl(data.notice)
-      Alchemy.PreviewWindow.refresh(() => this.focusElementPreview())
+      growl(data.notice)
+      this.previewWindow?.refresh().then(() => {
+        this.focusElementPreview()
+      })
       this.updateTitle(data.previewText)
       data.ingredientAnchors.forEach((anchor) => {
         IngredientAnchorLink.updateIcon(anchor.ingredientId, anchor.active)
@@ -273,7 +277,7 @@ export class ElementEditor extends HTMLElement {
         }
       })
       .catch((error) => {
-        Alchemy.growl(error.message, "error")
+        growl(error.message, "error")
         console.error(error)
       })
       .finally(() => {
@@ -320,7 +324,7 @@ export class ElementEditor extends HTMLElement {
             resolve()
           })
           .catch((error) => {
-            Alchemy.growl(error.message, "error")
+            growl(error.message, "error")
             console.error(error)
             reject(error)
           })
@@ -353,9 +357,9 @@ export class ElementEditor extends HTMLElement {
    */
   set published(isPublished) {
     if (isPublished) {
-      this.classList.remove("hidden")
+      this.classList.remove("element-hidden")
     } else {
-      this.classList.add("hidden")
+      this.classList.add("element-hidden")
     }
   }
 
@@ -387,8 +391,8 @@ export class ElementEditor extends HTMLElement {
   set collapsed(value) {
     this.classList.toggle("folded", value)
     this.classList.toggle("expanded", !value)
-    this.toggleIcon?.classList?.toggle("ri-arrow-down-s-line", !value)
-    this.toggleIcon?.classList?.toggle("ri-arrow-left-s-line", value)
+    this.toggleIcon &&
+      (this.toggleIcon.name = value ? "arrow-left-s" : "arrow-down-s")
   }
 
   /**
@@ -475,7 +479,7 @@ export class ElementEditor extends HTMLElement {
    * @returns {HTMLElement|undefined}
    */
   get toggleIcon() {
-    return this.toggleButton?.querySelector(".icon")
+    return this.toggleButton?.querySelector("alchemy-icon")
   }
 
   /**
@@ -549,6 +553,10 @@ export class ElementEditor extends HTMLElement {
   get parentElementEditor() {
     return this.parentElement?.closest("alchemy-element-editor")
   }
+
+  get previewWindow() {
+    return document.getElementById("alchemy_preview_window")
+  }
 }
 
 customElements.define("alchemy-element-editor", ElementEditor)

data/app/javascript/alchemy_admin/components/elements_window.js

@@ -0,0 +1,87 @@
+import SortableElements from "alchemy_admin/sortable_elements"
+
+class ElementsWindow extends HTMLElement {
+  #visible = true
+
+  constructor() {
+    super()
+    this.#attachEvents()
+  }
+
+  connectedCallback() {
+    this.toggleButton?.addEventListener("click", (evt) => {
+      evt.preventDefault()
+      this.toggle()
+    })
+    if (window.location.hash) {
+      document
+        .querySelector(window.location.hash)
+        ?.trigger("FocusElementEditor.Alchemy")
+    }
+    SortableElements()
+  }
+
+  collapseAllElements() {
+    this.querySelectorAll(
+      "alchemy-element-editor:not([compact]):not([fixed])"
+    ).forEach((editor) => editor.collapse())
+  }
+
+  toggle() {
+    this.#visible ? this.hide() : this.show()
+  }
+
+  show() {
+    document.body.classList.add("elements-window-visible")
+    this.#visible = true
+    this.toggleButton.closest("sl-tooltip").content = Alchemy.t("Hide elements")
+    this.toggleButton
+      .querySelector("alchemy-icon")
+      .setAttribute("name", "menu-unfold")
+  }
+
+  hide() {
+    document.body.classList.remove("elements-window-visible")
+    this.#visible = false
+    this.toggleButton.closest("sl-tooltip").content = Alchemy.t("Show elements")
+    this.toggleButton
+      .querySelector("alchemy-icon")
+      .setAttribute("name", "menu-fold")
+  }
+
+  get collapseButton() {
+    return this.querySelector("#collapse-all-elements-button")
+  }
+
+  get toggleButton() {
+    return document.querySelector("#element_window_button")
+  }
+
+  get previewWindow() {
+    return document.getElementById("alchemy_preview_window")
+  }
+
+  #attachEvents() {
+    this.collapseButton?.addEventListener("click", () => {
+      this.collapseAllElements()
+    })
+    window.addEventListener("message", (event) => {
+      const data = event.data
+      if (data?.message == "Alchemy.focusElementEditor") {
+        const element = document.getElementById(`element_${data.element_id}`)
+        this.show()
+        element?.focusElement()
+      }
+    })
+    document.body.addEventListener("click", (evt) => {
+      if (!evt.target.closest("alchemy-element-editor")) {
+        this.querySelectorAll("alchemy-element-editor").forEach((editor) => {
+          editor.classList.remove("selected")
+        })
+        this.previewWindow?.postMessage({ message: "Alchemy.blurElements" })
+      }
+    })
+  }
+}
+
+customElements.define("alchemy-elements-window", ElementsWindow)