alchemy_cms 7.0.8 → 7.1.0.pre.b1

data/app/controllers/alchemy/admin/elements_controller.rb

@@ -3,7 +3,7 @@
 module Alchemy
   module Admin
     class ElementsController < Alchemy::Admin::BaseController
-      before_action :load_element, only: [:update, :destroy, :fold, :publish]
+      before_action :load_element, only: [:update, :destroy, :collapse, :expand, :publish]
       authorize_resource class: Alchemy::Element
 
       def index
@@ -53,13 +53,25 @@ module Alchemy
       # Updates the element and all ingredients in the element.
       #
       def update
-        @page = @element.page
-
         if @element.update(element_params)
-          @element_validated = true
+          render json: {
+            notice: Alchemy.t(:element_saved),
+            previewText: Rails::Html::SafeListSanitizer.new.sanitize(@element.preview_text),
+            ingredientAnchors: @element.ingredients.select { |i| i.settings[:anchor] }.map do |ingredient|
+              {
+                ingredientId: ingredient.id,
+                active: ingredient.dom_id.present?
+              }
+            end
+          }
         else
-          element_update_error
-          @error_messages = @element.ingredient_error_messages
+          @warning = Alchemy.t("Validation failed")
+          render json: {
+            warning: @warning,
+            errorMessage: Alchemy.t(:ingredient_validations_headline),
+            ingredientsWithErrors: @element.ingredients_with_errors.map(&:id),
+            errors: @element.ingredient_error_messages
+          }
         end
       end
 
@@ -70,37 +82,59 @@ module Alchemy
       end
 
       def publish
-        @element.update(public: !@element.public?)
+        @element.public = !@element.public?
+        @element.save(validate: false)
+        render json: {
+          public: @element.public?,
+          label: @element.public? ? Alchemy.t(:hide_element) : Alchemy.t(:show_element)
+        }
       end
 
       def order
-        @parent_element = Element.find_by(id: params[:parent_element_id])
-        Element.transaction do
-          params.fetch(:element_ids, []).each.with_index(1) do |element_id, position|
-            # We need to set the parent_element_id, because we might have dragged the
-            # element over from another nestable element
-            Element.find_by(id: element_id).update_columns(
-              parent_element_id: params[:parent_element_id],
-              position: position
-            )
-          end
-          # Need to manually touch the parent because Rails does not do it
-          # with the update_columns above
-          @parent_element&.touch
+        @element = Element.find(params[:element_id])
+        @element.update(
+          parent_element_id: params[:parent_element_id],
+          position: params[:position]
+        )
+        if params[:parent_element_id].present?
+          @parent_element = Element.find_by(id: params[:parent_element_id])
         end
+
+        render json: {
+          message: Alchemy.t(:successfully_saved_element_position),
+          preview_text: @element.preview_text
+        }
       end
 
-      # Toggle folds the element and persists the state in the db
+      # Collapses the element, all nested elements and persists the state in the db
       #
-      def fold
-        @page = @element.page
+      def collapse
         # We do not want to trigger the touch callback or any validations
-        @element.update_columns(folded: !@element.folded)
-        # Fold all nested elements if folded
-        if @element.folded?
-          ids = collapse_nested_elements_ids(@element)
-          Alchemy::Element.where(id: ids).update_all(folded: true)
-        end
+        @element.update_columns(folded: true)
+        # Collapse all nested elements
+        nested_elements_ids = collapse_nested_elements_ids(@element)
+        Alchemy::Element.where(id: nested_elements_ids).update_all(folded: true)
+
+        render json: {
+          nestedElementIds: nested_elements_ids,
+          title: Alchemy.t(@element.folded? ? :show_element_content : :hide_element_content)
+        }
+      end
+
+      # Expands the element, all parents and persists the state in the db
+      #
+      def expand
+        # We do not want to trigger the touch callback or any validations
+        @element.update_columns(folded: false)
+        # We want to expand the upper most parent first in order to prevent
+        # re-painting issues in the browser
+        parent_element_ids = @element.parent_element_ids.reverse
+        Alchemy::Element.where(id: parent_element_ids).update_all(folded: false)
+
+        render json: {
+          parentElementIds: parent_element_ids,
+          title: Alchemy.t(@element.folded? ? :show_element_content : :hide_element_content)
+        }
       end
 
       private
@@ -171,12 +205,6 @@ module Alchemy
       def create_element_params
         params.require(:element).permit(:name, :page_version_id, :parent_element_id)
       end
-
-      def element_update_error
-        @element_validated = false
-        @notice = Alchemy.t("Validation failed")
-        @error_message = "<h2>#{@notice}</h2><p>#{Alchemy.t(:ingredient_validations_headline)}</p>".html_safe
-      end
     end
   end
 end

data/app/controllers/alchemy/base_controller.rb

@@ -53,7 +53,9 @@ module Alchemy
           #{current_alchemy_user.inspect}
         WARN
       end
-      if current_alchemy_user
+      if request.format.json?
+        render json: {message: Alchemy.t("You are not authorized")}, status: :unauthorized
+      elsif current_alchemy_user
         handle_redirect_for_user
       else
         handle_redirect_for_guest
@@ -65,7 +67,7 @@ module Alchemy
       if can?(:index, :alchemy_admin_dashboard)
         redirect_or_render_notice
       else
-        redirect_to("/")
+        redirect_to Alchemy.unauthorized_path
       end
     end
 

data/app/controllers/concerns/alchemy/admin/uploader_responses.rb

@@ -33,7 +33,7 @@ module Alchemy
       def uploader_response(file:, message:)
         {
           files: [file.to_jq_upload],
-          growl_message: message
+          message: message
         }
       end
     end

data/app/controllers/concerns/alchemy/site_redirects.rb

@@ -12,7 +12,7 @@ module Alchemy
     private
 
     def enforce_primary_host_for_site
-      redirect_to url_for(host: current_alchemy_site.host), status: :moved_permanently
+      redirect_to url_for(host: current_alchemy_site.host), status: :moved_permanently, allow_other_host: true
     end
 
     def needs_redirect_to_primary_host?

data/app/decorators/alchemy/element_editor.rb

@@ -65,8 +65,6 @@ module Alchemy
 
     # Tells us, if we should show the element footer and form inputs.
     def editable?
-      return false if folded?
-
       ingredient_definitions.any? || taggable?
     end
 

data/app/helpers/alchemy/admin/attachments_helper.rb

@@ -4,17 +4,18 @@ module Alchemy
   module Admin
     module AttachmentsHelper
       include Alchemy::Admin::BaseHelper
+      include Alchemy::Filetypes
 
       def mime_to_human(mime)
         Alchemy.t(mime, scope: "mime_types", default: Alchemy.t(:document))
       end
 
       def attachment_preview_size(attachment)
-        case attachment.icon_css_class
-        when "image" then "600x475"
-        when "audio" then "600x190"
-        when "video" then "600x485"
-        when "pdf" then "600x500"
+        case attachment.file_mime_type
+        when *IMAGE_FILE_TYPES then "600x475"
+        when *AUDIO_FILE_TYPES then "600x190"
+        when *VIDEO_FILE_TYPES then "600x485"
+        when "application/pdf" then "600x600"
         else
           "600x145"
         end

data/app/helpers/alchemy/admin/base_helper.rb

@@ -55,7 +55,10 @@ module Alchemy
         default_options = {modal: true}
         options = default_options.merge(options)
         link_to content, url,
-          html_options.merge("data-alchemy-dialog" => options.to_json)
+          html_options.merge(
+            "data-dialog-options" => options.to_json,
+            :is => "alchemy-dialog-link"
+          )
       end
 
       # Used for translations selector in Alchemy cockpit user settings.
@@ -189,7 +192,7 @@ module Alchemy
         options = {
           title: Alchemy.t("Delete"),
           message: Alchemy.t("Are you sure?"),
-          icon: :minus
+          icon: "delete-bin-2"
         }.merge(options)
         button_with_confirm(
           render_icon(options[:icon]),
@@ -322,18 +325,20 @@ module Alchemy
         date = Time.zone.parse(date) if date.is_a?(String)
         value = date&.iso8601
 
-        text_field object.class.name.demodulize.underscore.to_sym,
-          method.to_sym, {:type => "text", :class => type, "data-datepicker-type" => type, :value => value}.merge(html_options)
+        input_field = text_field object.class.name.demodulize.underscore.to_sym,
+          method.to_sym, {type: "text", class: type, value: value}.merge(html_options)
+
+        content_tag("alchemy-datepicker", input_field, "input-type" => type)
       end
 
       # Render a hint icon with tooltip for given object.
       # The model class needs to include the hints module
-      def render_hint_for(element)
+      def render_hint_for(element, icon_options = {})
         return unless element.has_hint?
 
-        content_tag :span, class: "hint-with-icon" do
-          render_icon("question-circle") +
-            content_tag(:span, element.hint.html_safe, class: "hint-bubble")
+        content_tag "sl-tooltip", class: "like-hint-tooltip", placement: "bottom-start" do
+          render_icon("question", icon_options) +
+            content_tag(:span, element.hint.html_safe, slot: "content")
         end
       end
 
@@ -372,12 +377,12 @@ module Alchemy
       #   <%= hint_with_tooltip('Page layout is missing', icon: 'info') %>
       #
       # @param text [String] - The text displayed in the tooltip
-      # @param icon: 'exclamation-triangle' [String] - Icon name
+      # @param icon: 'alert' [String] - Icon name
       #
       # @return [String]
-      def hint_with_tooltip(text, icon: "exclamation-triangle")
-        content_tag :span, class: "hint-with-icon" do
-          render_icon(icon) + content_tag(:span, text, class: "hint-bubble")
+      def hint_with_tooltip(text, icon: "alert")
+        content_tag :"sl-tooltip", class: "like-hint-tooltip", content: text, placement: "bottom" do
+          render_icon(icon)
         end
       end
 

data/app/helpers/alchemy/admin/ingredients_helper.rb

@@ -34,7 +34,10 @@ module Alchemy
       # Renders the label and hint for a ingredient.
       def ingredient_label(ingredient, column = :value, html_options = {})
         label_tag ingredient.form_field_id(column), html_options do
-          [render_ingredient_role(ingredient), render_hint_for(ingredient)].compact.join(" ").html_safe
+          [
+            render_ingredient_role(ingredient),
+            render_hint_for(ingredient, size: "lg", fixed_width: false)
+          ].compact.join(" ").html_safe
         end
       end
     end

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

@@ -36,21 +36,15 @@ module Alchemy
 
       def page_status_checkbox(page, attribute)
         label = page.class.human_attribute_name(attribute)
-
-        if page.attribute_fixed?(attribute)
-          checkbox = check_box(:page, attribute, disabled: true)
-          hint = content_tag(:span, class: "hint-bubble") do
-            Alchemy.t(:attribute_fixed, attribute: attribute)
-          end
-          content = content_tag(:span, class: "with-hint") do
-            "#{checkbox}\n#{label}\n#{hint}".html_safe
+        checkbox = if page.attribute_fixed?(attribute)
+          content_tag("sl-tooltip", class: "like-hint-tooltip", content: Alchemy.t(:attribute_fixed, attribute: attribute), placement: "bottom-start") do
+            check_box_tag("page[#{attribute}]", "1", page.send(attribute), disabled: true)
           end
         else
-          checkbox = check_box(:page, attribute)
-          content = "#{checkbox}\n#{label}".html_safe
+          check_box(:page, attribute)
         end
 
-        content_tag(:label, class: "checkbox") { content }
+        content_tag(:label, class: "checkbox") { "#{checkbox}\n#{label}".html_safe }
       end
     end
   end

data/app/helpers/alchemy/base_helper.rb

@@ -19,21 +19,21 @@ module Alchemy
       end
     end
 
-    # Render a Fontawesome icon
+    # Render a Remix icon
     #
-    # @param icon_class [String] Fontawesome icon name
-    # @param size: nil [String] Fontawesome icon size
-    # @param transform: nil [String] Fontawesome transform style
+    # @param icon_name [String] icon name
+    # @option options - style: nil [String] icon style. line or fill
+    # @option options - size: nil [String] icon size
     #
     # @return [String]
-    def render_icon(icon_class, options = {})
-      options = {style: "solid"}.merge(options)
+    def render_icon(icon_name, options = {})
+      options = {style: "line", fixed_width: true}.merge(options)
+      style = options[:style] && "-#{options[:style]}"
       classes = [
-        "icon fa-fw",
-        "fa-#{icon_class}",
-        "fa#{options[:style].first}",
-        options[:size] ? "fa-#{options[:size]}" : nil,
-        options[:transform] ? "fa-#{options[:transform]}" : nil,
+        "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)
@@ -87,18 +87,52 @@ module Alchemy
       end
     end
 
-    # Returns the FontAwesome icon name for given message type
+    # Returns the icon name for given message type
     #
     # @param message_type [String] The message type. One of +warning+, +info+, +notice+, +error+
-    # @return [String] The FontAwesome icon name
+    # @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
   end
 end

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

@@ -0,0 +1,129 @@
+import { toCamelCase } from "alchemy_admin/utils/string_conversions"
+
+export class AlchemyHTMLElement extends HTMLElement {
+  static properties = {}
+
+  /**
+   * create the list of observed attributes
+   * this function is a requirement for the `attributeChangedCallback` - method
+   * @returns {string[]}
+   * @link https://developer.mozilla.org/en-US/docs/Web/API/Web_Components#reference
+   */
+  static get observedAttributes() {
+    return Object.keys(this.properties)
+  }
+
+  constructor(options = {}) {
+    super()
+
+    this.options = options
+    this.changeComponent = true
+    this.initialContent = this.innerHTML // store the inner content of the component
+  }
+
+  /**
+   * run when the component will be initialized by the Browser
+   * this is a default function
+   * @link https://developer.mozilla.org/en-US/docs/Web/API/Web_Components#reference
+   */
+  connectedCallback() {
+    // parse the properties object and register property with the default values
+    Object.keys(this.constructor.properties).forEach((name) => {
+      // if the options was given via the constructor, they should be prefer (e.g. new <WebComponentName>({title: "Foo"}))
+      this[name] =
+        this.options[name] ?? this.constructor.properties[name].default
+    })
+
+    // then process the attributes
+    this.getAttributeNames().forEach((name) => this._updateFromAttribute(name))
+
+    // render the component
+    this._updateComponent()
+    this.connected()
+  }
+
+  /**
+   * disconnected callback if the component is removed from the DOM
+   * this is currently only a Proxy to the disconnected - callback to use the same callback structure
+   * as for the connected - callback
+   * @link https://developer.mozilla.org/en-US/docs/Web/API/Web_Components#reference
+   */
+  disconnectedCallback() {
+    this.disconnected()
+  }
+
+  /**
+   * triggered by the browser, if one of the observed attributes is changing
+   * @link https://developer.mozilla.org/en-US/docs/Web/API/Web_Components#reference
+   */
+  attributeChangedCallback(name) {
+    this._updateFromAttribute(name)
+    this._updateComponent()
+  }
+
+  /**
+   * a connected method to make it easier to overwrite the connection callback
+   */
+  connected() {}
+
+  /**
+   * a disconnected method to make it easier to overwrite the disconnection callback
+   */
+  disconnected() {}
+
+  /**
+   * empty method container to allow the child component to put the rendered string into this method
+   * @returns {String}
+   */
+  render() {
+    return this.initialContent
+  }
+
+  /**
+   * after render callback
+   * the function will be triggered after the DOM was updated
+   */
+  afterRender() {}
+
+  /**
+   * Dispatches a custom event with given name
+   * @param {string} name The name of the custom event
+   * @param {object} detail Optional event details
+   */
+  dispatchCustomEvent(name, detail = {}) {
+    const event = new CustomEvent(`Alchemy.${name}`, { bubbles: true, detail })
+    this.dispatchEvent(event)
+  }
+
+  /**
+   * (re)render the component content inside the component container
+   * @private
+   */
+  _updateComponent() {
+    if (this.changeComponent) {
+      this.innerHTML = this.render()
+      this.changeComponent = false
+      this.afterRender()
+    }
+  }
+
+  /**
+   * update the value from the given attribute
+   *
+   * @param {string} name
+   * @private
+   */
+  _updateFromAttribute(name) {
+    const attributeValue = this.getAttribute(name)
+    const propertyName = toCamelCase(name)
+    const isBooleanValue =
+      attributeValue.length === 0 || attributeValue === "true"
+
+    const value = isBooleanValue ? true : attributeValue
+
+    if (this[propertyName] !== value) {
+      this[propertyName] = value
+      this.changeComponent = true
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+import Spinner from "../spinner"
+
+class Button extends HTMLButtonElement {
+  connectedCallback() {
+    if (this.form) {
+      this.form.addEventListener("submit", this)
+
+      if (this.form.dataset.remote == "true") {
+        this.form.addEventListener("ajax:complete", this)
+      }
+    } else {
+      console.warn("No form for button found!", this)
+    }
+  }
+
+  handleEvent(event) {
+    switch (event.type) {
+      case "submit":
+        const isDisabled = this.getAttribute("disabled") === "disabled"
+
+        if (isDisabled) {
+          event.preventDefault()
+          event.stopPropagation()
+        } else {
+          this.disable()
+        }
+        break
+      case "ajax:complete":
+        this.enable()
+        break
+    }
+  }
+
+  disable() {
+    const spinner = new Spinner("small")
+    const rect = this.getBoundingClientRect()
+
+    this.dataset.initialButtonText = this.innerHTML
+    this.setAttribute("disabled", "disabled")
+    this.setAttribute("tabindex", "-1")
+    this.classList.add("disabled")
+    this.style.width = `${rect.width}px`
+    this.style.height = `${rect.height}px`
+    this.innerHTML = " "
+
+    spinner.spin(this)
+  }
+
+  enable() {
+    this.classList.remove("disabled")
+    this.removeAttribute("disabled")
+    this.removeAttribute("tabindex")
+    this.style.width = null
+    this.style.height = null
+    this.innerHTML = this.dataset.initialButtonText
+  }
+}
+
+customElements.define("alchemy-button", Button, { extends: "button" })

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

@@ -0,0 +1,40 @@
+/**
+ * Show the character counter below input fields and textareas
+ */
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
+import { translate } from "alchemy_admin/i18n"
+
+class CharCounter extends AlchemyHTMLElement {
+  static properties = {
+    maxChars: { default: 60 }
+  }
+  connected() {
+    this.translation = translate("allowed_chars", this.maxChars)
+    this.formField = this.getFormField()
+
+    if (this.formField) {
+      this.createDisplayElement()
+      this.countCharacters()
+      this.formField.addEventListener("keyup", () => this.countCharacters()) // add arrow function to get a implicit this - binding
+    }
+  }
+
+  getFormField() {
+    const formFields = this.querySelectorAll("input, textarea")
+    return formFields.length > 0 ? formFields[0] : undefined
+  }
+
+  createDisplayElement() {
+    this.display = document.createElement("small")
+    this.display.className = "alchemy-char-counter"
+    this.formField.after(this.display)
+  }
+
+  countCharacters() {
+    const charLength = this.formField.value.length
+    this.display.textContent = `${charLength} ${this.translation}`
+    this.display.classList.toggle("too-long", charLength > this.maxChars)
+  }
+}
+
+customElements.define("alchemy-char-counter", CharCounter)

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

@@ -0,0 +1,39 @@
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
+import { translate, currentLocale } from "alchemy_admin/i18n"
+import flatpickr from "flatpickr"
+
+class Datepicker extends AlchemyHTMLElement {
+  static properties = {
+    inputType: { default: "date" }
+  }
+
+  constructor() {
+    super()
+    this.flatpickr = undefined
+  }
+
+  afterRender() {
+    const options = {
+      // alchemy_i18n supports `zh_CN` etc., but flatpickr only has two-letter codes (`zh`)
+      locale: currentLocale().slice(0, 2),
+      altInput: true,
+      altFormat: translate(`formats.${this.inputType}`),
+      altInputClass: "flatpickr-input",
+      dateFormat: "Z",
+      enableTime: /time/.test(this.inputType),
+      noCalendar: this.inputType === "time",
+      time_24hr: translate("formats.time_24hr"),
+      onValueUpdate(_selectedDates, _dateStr, instance) {
+        instance.element.closest("alchemy-element-editor")?.setDirty()
+      }
+    }
+
+    this.flatpickr = flatpickr(this.getElementsByTagName("input")[0], options)
+  }
+
+  disconnected() {
+    this.flatpickr.destroy()
+  }
+}
+
+customElements.define("alchemy-datepicker", Datepicker)