alchemy_cms 7.2.9 → 7.3.0

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

@@ -19,7 +19,7 @@ export class ElementEditor extends HTMLElement {
     // Triggered by child elements
     this.addEventListener("alchemy:element-update-title", this)
     // We use of @rails/ujs for Rails remote forms
-    this.addEventListener("ajax:success", this)
+    this.addEventListener("ajax:complete", this)
     // Dirty observer
     this.addEventListener("change", this)
 
@@ -57,11 +57,11 @@ export class ElementEditor extends HTMLElement {
           this.onClickElement()
         }
         break
-      case "ajax:success":
+      case "ajax:complete":
         if (event.target === this.body) {
-          const responseJSON = event.detail[0]
+          const xhr = event.detail[0]
           event.stopPropagation()
-          this.onSaveElement(responseJSON)
+          this.onSaveElement(xhr)
         }
         break
       case "alchemy:element-update-title":
@@ -115,30 +115,28 @@ export class ElementEditor extends HTMLElement {
   /**
    * Sets the element to saved state
    * Updates title
+   * JS event bubbling will also update the parents element quote.
    * Shows error messages if ingredient validations fail
-   * @argument {JSON} data
+   * @argument {XMLHttpRequest} xhr
    */
-  onSaveElement(data) {
-    // JS event bubbling will also update the parents element quote.
-    this.setClean()
+  onSaveElement(xhr) {
+    const data = JSON.parse(xhr.responseText)
     // Reset errors that might be visible from last save attempt
-    this.errorsDisplay.innerHTML = ""
-    this.elementErrors.classList.add("hidden")
-    this.body
-      .querySelectorAll(".ingredient-editor")
-      .forEach((el) => el.classList.remove("validation_failed"))
+    this.setClean()
     // If validation failed
-    if (data.errors) {
+    if (xhr.status === 422) {
       const warning = data.warning
       // Create error messages
-      data.errors.forEach((message) => {
-        this.errorsDisplay.append(createHtmlElement(`<li>${message}</li>`))
-      })
       // Mark ingredients as failed
-      data.ingredientsWithErrors.forEach((id) => {
-        this.querySelector(`[data-ingredient-id="${id}"]`)?.classList.add(
-          "validation_failed"
+      data.ingredientsWithErrors.forEach((ingredient) => {
+        const ingredientEditor = this.querySelector(
+          `[data-ingredient-id="${ingredient.id}"]`
         )
+        const errorDisplay = createHtmlElement(
+          `<small class="error">${ingredient.errorMessage}</small>`
+        )
+        ingredientEditor?.appendChild(errorDisplay)
+        ingredientEditor?.classList.add("validation_failed")
       })
       // Show message
       growl(warning, "warn")
@@ -208,9 +206,12 @@ export class ElementEditor extends HTMLElement {
   setClean() {
     this.dirty = false
     window.onbeforeunload = null
+    this.elementErrors.classList.add("hidden")
+
     if (this.hasEditors) {
-      this.body.querySelectorAll(".dirty").forEach((el) => {
-        el.classList.remove("dirty")
+      this.body.querySelectorAll(".ingredient-editor").forEach((el) => {
+        el.classList.remove("dirty", "validation_failed")
+        el.querySelectorAll("small.error").forEach((e) => e.remove())
       })
     }
   }
@@ -482,15 +483,6 @@ export class ElementEditor extends HTMLElement {
     return this.toggleButton?.querySelector("alchemy-icon")
   }
 
-  /**
-   * The error messages container
-   *
-   * @returns {HTMLElement}
-   */
-  get errorsDisplay() {
-    return this.body.querySelector(".error-messages")
-  }
-
   /**
    * The validation messages list container
    *

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

@@ -66,12 +66,11 @@ class PreviewWindow extends HTMLIFrameElement {
 
     key("alt+r", () => this.refresh())
 
-    // Need to listen with jQuery here because select2 does not emit native events.
-    $(this.sizeSelect).on("change", (evt) => {
+    this.sizeSelect.addEventListener("change", (evt) => {
       const select = evt.target
       const width = select.value
 
-      if (width === "auto") {
+      if (width === "") {
         this.style.width = null
       } else {
         this.resize(width)

data/app/javascript/alchemy_admin/picture_selector.js

@@ -1,34 +1,62 @@
 import { on } from "alchemy_admin/utils/events"
 
+function toggleCheckboxes(state) {
+  document
+    .querySelectorAll(".picture_tool.select input[type='checkbox']")
+    .forEach((checkbox) => {
+      checkbox.checked = state
+      checkbox.closest(".picture_thumbnail").classList.toggle("active", state)
+    })
+}
+
+function checkedInputs() {
+  return document.querySelectorAll("#picture_archive input:checked")
+}
+
+function editMultiplePicturesUrl(href) {
+  const searchParameters = new URLSearchParams()
+  checkedInputs().forEach((entry) =>
+    searchParameters.append(entry.name, entry.value)
+  )
+  const url = href + "?" + searchParameters.toString()
+
+  return url
+}
+
 /**
  * Multiple picture select handler for the picture archive.
  */
 export default function PictureSelector() {
+  const selectAllButton = document.querySelector("#select_all_pictures")
   const selectedItemTools = document.querySelector(".selected_item_tools")
-  const checkedInputs = () =>
-    document.querySelectorAll("#picture_archive input:checked")
+
+  on("click", ".toolbar_buttons", "a#select_all_pictures", (event) => {
+    event.preventDefault()
+
+    selectAllButton.classList.toggle("active")
+
+    const state = selectAllButton.classList.contains("active")
+
+    toggleCheckboxes(state)
+
+    selectedItemTools.classList.toggle("hidden", !state)
+  })
 
   // make the item toolbar visible and show the checkbox also if it is not hovered anymore
   on("change", ".picture_tool.select", "input", (event) => {
-    selectedItemTools.style.display =
-      checkedInputs().length > 0 ? "block" : "none"
+    selectedItemTools.classList.toggle("hidden", checkedInputs().length === 0)
 
     const parentElementClassList = event.target.parentElement.classList
     const checked = event.target.checked
 
     parentElementClassList.toggle("visible", checked)
-    parentElementClassList.toggle("hidden", !checked)
   })
 
   // open the edit view in a dialog modal
   on("click", ".selected_item_tools", "a#edit_multiple_pictures", (event) => {
     event.preventDefault()
 
-    const searchParameters = new URLSearchParams()
-    checkedInputs().forEach((entry) =>
-      searchParameters.append(entry.name, entry.value)
-    )
-    const url = event.target.href + "?" + searchParameters.toString()
+    const url = editMultiplePicturesUrl(event.target.href)
 
     Alchemy.openDialog(url, {
       title: event.target.title,

data/app/models/alchemy/attachment.rb

@@ -102,14 +102,6 @@ module Alchemy
 
     # Instance methods
 
-    def to_jq_upload
-      {
-        "name" => read_attribute(:file_name),
-        "size" => read_attribute(:file_size),
-        "error" => errors[:file].join
-      }
-    end
-
     def url(options = {})
       if file
         self.class.url_class.new(self).call(options)

data/app/models/alchemy/element/dom_id.rb

@@ -11,6 +11,7 @@ module Alchemy
   #
   #  Alchemy::Element.dom_id_class = MyDomIdClass
   #
+  # @deprecated Use a headline ingredient with anchor setting instead.
   class Element < BaseRecord
     class DomId
       def initialize(element)

data/app/models/alchemy/element/element_ingredients.rb

@@ -95,79 +95,6 @@ module Alchemy
         value_for(role).present?
       end
 
-      # Ingredient validation error messages
-      #
-      # == Error messages are translated via I18n
-      #
-      # Inside your translation file add translations like:
-      #
-      #   alchemy:
-      #     ingredient_validations:
-      #       name_of_the_element:
-      #         role_of_the_ingredient:
-      #           validation_error_type: Error Message
-      #
-      # NOTE: +validation_error_type+ has to be one of:
-      #
-      #   * blank
-      #   * taken
-      #   * invalid
-      #
-      # === Example:
-      #
-      #   de:
-      #     alchemy:
-      #       ingredient_validations:
-      #         contactform:
-      #           email:
-      #             invalid: 'Die Email hat nicht das richtige Format'
-      #
-      #
-      # == Error message translation fallbacks
-      #
-      # In order to not translate every single ingredient for every element
-      # you can provide default error messages per ingredient role:
-      #
-      # === Example
-      #
-      #   en:
-      #     alchemy:
-      #       ingredient_validations:
-      #         fields:
-      #           email:
-      #             invalid: E-Mail has wrong format
-      #             blank: E-Mail can't be blank
-      #
-      # And even further you can provide general field agnostic error messages:
-      #
-      # === Example
-      #
-      #   en:
-      #     alchemy:
-      #       ingredient_validations:
-      #         errors:
-      #           invalid: %{field} has wrong format
-      #           blank: %{field} can't be blank
-      #
-      def ingredient_error_messages
-        messages = []
-        ingredients_with_errors.map { |i| [i.role, i.errors.details] }.each do |role, error_details|
-          error_details[:value].each do |error_detail|
-            error = error_detail[:error]
-            messages << Alchemy.t(
-              "#{name}.#{role}.#{error}",
-              scope: "ingredient_validations",
-              default: [
-                :"fields.#{role}.#{error}",
-                :"errors.#{error}"
-              ],
-              field: Alchemy::Ingredient.translated_label_for(role, name)
-            )
-          end
-        end
-        messages
-      end
-
       private
 
       # Builds ingredients for this element as described in the +elements.yml+

data/app/models/alchemy/element/presenters.rb

@@ -79,8 +79,11 @@ module Alchemy
       end
 
       # Returns a dom id used for elements html id tag.
-      #
+      # @deprecated
       def dom_id
+        if caller.none? { |l| l =~ Regexp.new("alchemy/elements_block_helper.rb:117:in `element_view_for'") }
+          Alchemy::Deprecation.warn("dom_id is deprecated and will be removed from Alchemy 8.0. Please pass an id to the element_view_for helper instead.")
+        end
         self.class.dom_id_class.new(self).call
       end
 

data/app/models/alchemy/element.rb

@@ -136,15 +136,21 @@ module Alchemy
 
       # The class responsible for the +dom_id+ of elements.
       # Defaults to +Alchemy::Element::DomId+.
+      # @deprecated
       def dom_id_class
+        if caller.none? { |l| l =~ Regexp.new("alchemy/element/presenters.rb:87:in `dom_id'") }
+          Alchemy::Deprecation.warn("dom_id_class is deprecated and will be removed from Alchemy 8.0. Please pass an id to the element_view_for helper instead.")
+        end
         @_dom_id_class || DomId
       end
 
       # Register a custom +DomId+ class responsible for the +dom_id+ of elements.
       # Defaults to +Alchemy::Element::DomId+.
+      # @deprecated
       def dom_id_class=(klass)
         @_dom_id_class = klass
       end
+      deprecate :dom_id_class=, deprecator: Alchemy::Deprecation
 
       # This methods does a copy of source and all its ingredients.
       #

data/app/models/alchemy/elements_repository.rb

@@ -115,8 +115,8 @@ module Alchemy
       self.class.new(select { |e| e.parent_element_id == parent.id })
     end
 
-    def each(&blk)
-      elements.each(&blk)
+    def each(&)
+      elements.each(&)
     end
 
     private

data/app/models/alchemy/ingredient_validator.rb

@@ -86,6 +86,16 @@ module Alchemy
       end
     end
 
+    def validate_length(opts = {})
+      value_length = ingredient.value.to_s.length
+      if value_length < opts[:minimum]
+        ingredient.errors.add(:value, :too_short, count: opts[:minimum])
+      end
+      if value_length > opts[:maximum]
+        ingredient.errors.add(:value, :too_long, count: opts[:maximum])
+      end
+    end
+
     def duplicates
       ingredient.class
         .joins(:element).merge(Alchemy::Element.published)

data/app/models/alchemy/page/page_scopes.rb

@@ -124,7 +124,7 @@ module Alchemy
         end
 
         def ransackable_scopes(_auth_object)
-          [:published, :from_current_site, :searchables, :layoutpages]
+          [:published, :contentpages, :from_current_site, :searchables, :layoutpages]
         end
       end
     end

data/app/models/alchemy/picture.rb

@@ -224,16 +224,6 @@ module Alchemy
       save!
     end
 
-    # Returns a Hash suitable for jquery fileupload json.
-    #
-    def to_jq_upload
-      {
-        name: image_file_name,
-        size: image_file_size,
-        error: errors[:image_file].join
-      }
-    end
-
     # Returns the picture description for a given language.
     def description_for(language)
       descriptions.find_by(language: language)&.text

data/app/models/concerns/alchemy/picture_thumbnails.rb

@@ -102,10 +102,11 @@ module Alchemy
 
     # Show image cropping link for ingredient
     def allow_image_cropping?
-      settings[:crop] && picture&.can_be_cropped_to?(
-        settings[:size],
-        settings[:upsample]
-      ) && !!picture.image_file
+      settings[:crop] && picture &&
+        picture.can_be_cropped_to?(
+          settings[:size],
+          settings[:upsample]
+        ) && !!picture.image_file
     end
 
     private

data/app/views/alchemy/admin/attachments/_files_list.html.erb

@@ -7,22 +7,80 @@
     <% end %>
   <% end %>
 <% else %>
-  <table id="all_files" class="list">
-    <thead>
-      <tr>
-        <th class="icon"></th>
-        <th class="name"><%= sort_link(@query, :name) %></th>
-        <th class="file_name"><%= sort_link(@query, :file_name) %></th>
-        <th class="file_type"><%= Alchemy::Attachment.human_attribute_name('file_mime_type') %></th>
-        <th class="file_size"><%= sort_link(@query, :file_size) %></th>
-        <th class="date"><%= sort_link(@query, :created_at, default_order: 'desc') %></th>
-        <th class="tools"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <%= render partial: 'alchemy/admin/attachments/attachment', collection: @attachments %>
-    </tbody>
-  </table>
+  <%= render Alchemy::Admin::Resource::Table.new(@attachments, query: @query) do |table| %>
+    <% table.icon_column { |attachment| attachment.icon_css_class } %>
+    <% table.column :name, sortable: true do |attachment| %>
+      <% if can?(:show, attachment) %>
+        <%= link_to_dialog(
+              attachment.name,
+              alchemy.admin_attachment_path(attachment),
+              {
+                title: attachment.name,
+                size: attachment_preview_size(attachment)
+              },
+              {
+                title: Alchemy.t('Attachment Preview')
+              }
+            ) %>
+      <% else %>
+        <%= attachment.name %>
+      <% end %>
+    <% end %>
+    <% table.column :file_name, sortable: true %>
+    <% table.column :file_mime_type do |attachment| %>
+      <%= mime_to_human(attachment.file_mime_type) %>
+    <% end %>
+    <% table.column :file_size, sortable: true do |attachment| %>
+      <%= number_to_human_size(attachment.file_size) %>
+    <% end %>
+    <% table.column :created_at, sortable: true %>
+
+    <% table.with_action(:show, Alchemy.t('Attachment Preview')) do |attachment| %>
+      <%= link_to_dialog(
+            render_icon(:information),
+            alchemy.admin_attachment_path(attachment),
+            {
+              title: attachment.name,
+              size: attachment_preview_size(attachment)
+            },
+            class: "icon_button"
+          ) %>
+    <% end %>
+    <% table.with_action(:download) do |attachment| %>
+      <sl-tooltip content="<%= Alchemy.t("download_file", filename: attachment.file_name) %>">
+        <%= link_to render_icon(:download),
+          alchemy.download_admin_attachment_path(attachment),
+          target: "_blank",
+          class: "icon_button" %>
+      </sl-tooltip>
+    <% end %>
+    <% table.with_action(:edit, Alchemy.t(:replace_file)) do |attachment| %>
+      <%= render 'alchemy/admin/attachments/replace_button',
+        redirect_url: alchemy.admin_attachments_path,
+        object: attachment,
+        file_attribute: 'file' %>
+    <% end %>
+    <% table.with_action(:destroy, Alchemy.t(:delete_file)) do |attachment| %>
+      <%= link_to_confirm_dialog render_icon(:minus),
+        Alchemy.t(:confirm_to_delete_file),
+        alchemy.admin_attachment_path(
+          id: attachment,
+          q: search_filter_params[:q],
+          page: params[:page],
+          per_page: params[:per_page]
+        ),
+        class: "icon_button" %>
+    <% end %>
+    <% table.with_action(:edit, Alchemy.t(:rename_file)) do |attachment| %>
+      <%= link_to_dialog render_icon(:edit),
+        alchemy.edit_admin_attachment_path(attachment, q: search_filter_params[:q], page: params[:page]),
+        {
+          title: Alchemy.t(:rename_file),
+          size: '500x250'
+        },
+        class: "icon_button" %>
+    <% end %>
+  <% end %>
 
   <%= paginate @attachments, theme: 'alchemy' %>
 <% end %>

data/app/views/alchemy/admin/clipboard/index.html.erb

@@ -1,34 +1,39 @@
-<%- if @clipboard_items.blank? -%>
-<%= render_message do %>
-  <%= Alchemy.t('No items in your clipboard') %>
-<% end %>
-<%- else -%>
-<div id="clipboard_items">
-  <ul>
-    <%- @clipboard_items.each do |item| -%>
-    <% item_class = item.class.name.demodulize.underscore.pluralize %>
-    <li id="clipboard_item_<%= item.id -%>" class="<%= item_class -%>">
-      <% if item_class == 'pages' %>
-        <%= render_icon(:file) %>
-        <%= truncate(item.name, length: 50) %>
-      <% else %>
-        <%= render_icon(:draggable, style: false) %>
-        <%= truncate(item.display_name_with_preview_text(50), length: 50) %>
+<% if @clipboard_items.blank? %>
+  <%= render_message do %>
+    <%= Alchemy.t('No items in your clipboard') %>
+  <% end %>
+<% else %>
+  <%= render_message do %>
+    <%= Alchemy.t('Add items from clipboard via "Add Element" button') %>
+  <% end %>
+
+  <div id="clipboard_items">
+    <ul>
+      <% @clipboard_items.each do |item| %>
+        <% item_class = item.class.name.demodulize.underscore.pluralize %>
+        <li id="clipboard_item_<%= item.id %>" class="<%= item_class %>">
+          <% if item_class == 'pages' %>
+            <%= render_icon(:file) %>
+            <%= truncate(item.name, length: 50) %>
+          <% else %>
+            <%= render_icon(:draggable, style: false) %>
+            <%= truncate(item.display_name_with_preview_text(50), length: 50) %>
+          <% end %>
+          <sl-tooltip content="<%= Alchemy.t('Remove item from clipboard') %>">
+            <%= link_to render_icon(:close, size: '1x'),
+              alchemy.remove_admin_clipboard_path(remarkable_type: item_class, remarkable_id: item.id),
+              remote: true, method: 'delete',
+              class: "icon_button small"
+            %>
+          </sl-tooltip>
+        </li>
       <% end %>
-      <span class="float_right">
-        <%= link_to render_icon(:close, size: '1x'),
-          alchemy.remove_admin_clipboard_path(remarkable_type: item_class, remarkable_id: item.id),
-          remote: true, method: 'delete',
-          title: Alchemy.t('Remove item from clipboard') %>
-      </span>
-    </li>
-    <%- end -%>
-  </ul>
-  <p>
-    <%= link_to_confirm_dialog Alchemy.t('clear clipboard'),
-      Alchemy.t('Do you really want to clear the clipboard?'),
-      alchemy.clear_admin_clipboard_path(remarkable_type: params[:remarkable_type]),
-      class: 'button' %>
-  </p>
-</div>
-<%- end -%>
+    </ul>
+    <p>
+      <%= link_to_confirm_dialog Alchemy.t('clear clipboard'),
+        Alchemy.t('Do you really want to clear the clipboard?'),
+        alchemy.clear_admin_clipboard_path(remarkable_type: params[:remarkable_type]),
+        class: 'button' %>
+    </p>
+  </div>
+<% end %>

data/app/views/alchemy/admin/dashboard/_dashboard.html.erb

@@ -0,0 +1,3 @@
+<%= render "top" %>
+<%= render "left_column" %>
+<%= render "right_column" %>

data/app/views/alchemy/admin/dashboard/_left_column.html.erb

@@ -0,0 +1,4 @@
+<div class="column left">
+  <%= render 'alchemy/admin/dashboard/widgets/locked_pages' %>
+  <%= render 'alchemy/admin/dashboard/widgets/recent_pages' %>
+</div>

data/app/views/alchemy/admin/dashboard/_right_column.html.erb

@@ -0,0 +1,9 @@
+<div class="column right">
+  <% if @online_users.try(:any?) %>
+    <%= render 'alchemy/admin/dashboard/widgets/users' %>
+  <% end %>
+
+  <% if multi_site? %>
+    <%= render 'alchemy/admin/dashboard/widgets/sites' %>
+  <% end %>
+</div>

data/app/views/alchemy/admin/dashboard/_top.html.erb

@@ -0,0 +1,12 @@
+<h1>
+  <% if @first_time -%>
+  <%= Alchemy.t(:welcome_note, name: current_alchemy_user.try(:name)) %>
+  <% else -%>
+  <%= Alchemy.t(:welcome_back_note, name: current_alchemy_user.try(:name)) %>
+  <% end -%>
+</h1>
+<% if @last_sign_at %>
+<p>
+  <small><%= Alchemy.t('Your last login was on', time: l(@last_sign_at, format: :'alchemy.default')) %></small>
+</p>
+<% end %>

data/app/views/alchemy/admin/dashboard/index.html.erb

@@ -16,29 +16,5 @@
 <% end %>
 
 <div id="dashboard">
-  <h1>
-    <% if @first_time -%>
-    <%= Alchemy.t(:welcome_note, name: current_alchemy_user.try(:name)) %>
-    <% else -%>
-    <%= Alchemy.t(:welcome_back_note, name: current_alchemy_user.try(:name)) %>
-    <% end -%>
-  </h1>
-  <% if @last_sign_at %>
-  <p>
-    <small><%= Alchemy.t('Your last login was on', time: l(@last_sign_at, format: :'alchemy.default')) %></small>
-  </p>
-  <% end %>
-  <div class="column left">
-    <%= render 'locked_pages' %>
-    <%= render 'recent_pages' %>
-  </div>
-  <div class="column right">
-    <% if @online_users.try(:any?) %>
-      <%= render 'users' %>
-    <% end %>
-
-    <% if multi_site? %>
-      <%= render 'sites' %>
-    <% end %>
-  </div>
+  <%= render "dashboard" %>
 </div>

data/app/views/alchemy/admin/elements/_element.html.erb

@@ -29,9 +29,8 @@
       html: {id: "element_#{element.id}_form".html_safe, class: 'element-body'} do |f| %>
 
       <div id="element_<%= element.id %>_errors" class="element_errors hidden">
-        <h2><%= Alchemy.t("Validation failed") %></h2>
+        <alchemy-icon name="alert"></alchemy-icon>
         <p><%= Alchemy.t(:ingredient_validations_headline) %></p>
-        <ul class="error-messages"></ul>
       </div>
 
       <!-- Ingredients -->

data/app/views/alchemy/admin/elements/_form.html.erb

@@ -10,7 +10,7 @@
       collection: elements_for_select(@elements),
       prompt: Alchemy.t(:select_element),
       selected: (@elements.first if @elements.count == 1),
-      input_html: {is: 'alchemy-select', autofocus: true, disabled: @elements.count == 1} %>
+      input_html: {is: 'alchemy-select', autofocus: true} %>
     <% if @elements.count == 1 %>
       <%= form.hidden_field :name, value: @elements.first[:name] %>
     <% end %>