alchemy_cms 7.4.10 → 8.0.0.b

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

@@ -73,6 +73,13 @@ module Alchemy
         end
       end
 
+      def alchemy_admin_js_translations(locale = ::I18n.locale)
+        render partial: "alchemy/admin/translations/#{locale}", formats: [:js]
+      rescue ActionView::MissingTemplate
+        # Fallback to default translations
+        render partial: "alchemy/admin/translations/en", formats: [:js]
+      end
+
       # Used for site selector in Alchemy cockpit.
       def sites_for_select
         Alchemy::Site.all.map do |site|
@@ -80,36 +87,6 @@ module Alchemy
         end
       end
 
-      # Returns a javascript driven live filter for lists.
-      #
-      # The items must have a html +name+ attribute that holds the filterable value.
-      #
-      # == Example
-      #
-      # Given a list of items:
-      #
-      #   <%= js_filter_field('#products .product') %>
-      #
-      #   <ul id="products">
-      #     <li class="product" name="kat litter">Kat Litter</li>
-      #     <li class="product" name="milk">Milk</li>
-      #   </ul>
-      #
-      # @param [String] items
-      #   A jquery compatible selector string that represents the items to filter
-      # @param [Hash] options
-      #   HTML options passed to the input field
-      #
-      # @option options [String] :class ('js_filter_field')
-      #   The css class of the <input> tag
-      # @option options [String or Hash] :data ({'alchemy-list-filter' => items})
-      #   A HTML data attribute that holds the jQuery selector that represents the list to be filtered
-      # @deprecated render Alchemy::Admin::ListFilter.new(items) instead
-      def js_filter_field(items, _options = {})
-        render Alchemy::Admin::ListFilter.new(items)
-      end
-      deprecate js_filter_field: "render Alchemy::Admin::ListFilter.new(items) instead", deprecator: Alchemy::Deprecation
-
       # Returns a link that opens a modal confirmation to delete window.
       #
       # === Example:
@@ -137,12 +114,10 @@ module Alchemy
       def link_to_confirm_dialog(link_string = "", message = "", url = "", html_options = {})
         link_to(link_string, url,
           html_options.merge(
-            "data-alchemy-confirm-delete" => {
-              title: Alchemy.t(:please_confirm),
-              message: message,
-              ok_label: Alchemy.t("Yes"),
-              cancel_label: Alchemy.t("No")
-            }.to_json
+            data: {
+              "turbo-method": :delete,
+              "turbo-confirm": message
+            }
           ))
       end
 
@@ -168,12 +143,10 @@ module Alchemy
       def button_with_confirm(value = "", url = "", options = {}, html_options = {})
         options = {
           message: Alchemy.t(:confirm_to_proceed),
-          ok_label: Alchemy.t("Yes"),
-          title: Alchemy.t(:please_confirm),
-          cancel_label: Alchemy.t("No")
+          title: Alchemy.t(:please_confirm)
         }.merge(options)
         form_tag url, {method: html_options.delete(:method), class: "button-with-confirm"} do
-          button_tag value, html_options.merge("data-alchemy-confirm" => options.to_json)
+          button_tag value, html_options.merge("data-turbo-confirm" => options[:message])
         end
       end
 
@@ -220,49 +193,6 @@ module Alchemy
         "Alchemy CMS - #{title}"
       end
 
-      # Renders a toolbar button for the Alchemy toolbar
-      #
-      # == Example
-      #
-      #   <%= toolbar_button(
-      #     icon: :plus,
-      #     label: 'Create',
-      #     url: new_resource_path,
-      #     title: 'Create Resource',
-      #     hotkey: 'alt+n',
-      #     dialog_options: {
-      #       title: 'Create Resource',
-      #       size: "430x400"
-      #     },
-      #     if_permitted_to: [:create, resource_model]
-      #   ) %>
-      #
-      # @option options [String] :icon
-      #   Icon class. See +app/assets/stylesheets/alchemy/icons.css.sccs+ for available icons, or make your own.
-      # @option options [String] :label
-      #   Text for button label.
-      # @option options [String] :url
-      #   Url for link.
-      # @option options [String] :title
-      #   Text for title tag.
-      # @option options [String] :hotkey
-      #   Keyboard shortcut for this button. I.E +alt-n+
-      # @option options [Boolean] :dialog (true)
-      #   Open the link in a modal dialog.
-      # @option options [Hash] :dialog_options
-      #   Overlay options. See link_to_dialog helper.
-      # @option options [Array] :if_permitted_to ([:action, :controller])
-      #   Check permission for button. Exactly how you defined the permission in your +authorization_rules.rb+. Defaults to controller and action from button url.
-      # @option options [Boolean] :skip_permission_check (false)
-      #   Skip the permission check. NOT RECOMMENDED!
-      # @option options [Boolean] :loading_indicator (true)
-      #   Shows the please wait dialog while loading. Only for buttons not opening an dialog.
-      # @deprecated render Alchemy::Admin::ToolbarButton.new instead
-      def toolbar_button(options = {})
-        render Alchemy::Admin::ToolbarButton.new(**options)
-      end
-      deprecate toolbar_button: "render Alchemy::Admin::ToolbarButton.new instead", deprecator: Alchemy::Deprecation
-
       # Renders a textfield ready to display a datepicker
       #
       # A Javascript observer converts this into a fancy Datepicker.
@@ -346,7 +276,7 @@ module Alchemy
 
       # Returns the regular expression used for external url validation in link dialog.
       def link_url_regexp
-        Alchemy::Config.get(:format_matchers)["link_url"] || /^(mailto:|\/|[a-z]+:\/\/)/
+        Alchemy.config.format_matchers.link_url || /^(mailto:|\/|[a-z]+:\/\/)/
       end
 
       # Renders a hint with tooltip

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

@@ -10,7 +10,7 @@ module Alchemy
       # You can configure the screen sizes in your +config/alchemy/config.yml+.
       #
       def preview_sizes_for_select
-        Alchemy::Config.get(:page_preview_sizes).map do |size|
+        Alchemy.config.page_preview_sizes.map do |size|
           [Alchemy.t(size, scope: "preview_sizes"), size]
         end
       end

data/app/helpers/alchemy/base_helper.rb

@@ -2,14 +2,6 @@
 
 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.
     def warning(message, text = nil)
@@ -45,27 +37,5 @@ module Alchemy
     def render_message(type = :info, msg = nil, &)
       render Alchemy::Admin::Message.new(msg || capture(&), 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 Current.language
-        warning("No default language set up")
-        return nil
-      end
-
-      if page.is_a?(String)
-        page = Current.language.pages.find_by(page_layout: page)
-      end
-      if page.blank?
-        warning("No Page found for #{page.inspect}")
-        nil
-      else
-        page
-      end
-    end
-    deprecate :page_or_find, deprecator: Alchemy::Deprecation
   end
 end

data/app/helpers/alchemy/elements_block_helper.rb

@@ -100,22 +100,8 @@ module Alchemy
     #   A lambda used for formatting the element's tags (see Alchemy::ElementsHelper::element_tags_attributes). Set to +false+ to not include tags in the wrapper element.
     #
     def element_view_for(element, options = {})
-      if options[:id].nil?
-        Alchemy::Deprecation.warn <<~WARN
-          Relying on an implicit DOM id in `element_view_for` is deprecated. Please provide an explicit `id` if you actually want to render an `id` attribute on the #{element.name} element wrapper tag.
-        WARN
-      end
-
-      if options[:class].nil?
-        Alchemy::Deprecation.warn <<~WARN
-          Relying on an implicit CSS class in `element_view_for` is deprecated. Please provide an explicit `class` for the #{element.name} element wrapper tag.
-        WARN
-      end
-
       options = {
         tag: :div,
-        id: (!!options[:id]) ? options[:id] : element.dom_id,
-        class: element.name,
         tags_formatter: ->(tags) { tags.join(" ") }
       }.merge(options)
 

data/app/helpers/alchemy/pages_helper.rb

@@ -46,7 +46,7 @@ module Alchemy
     def render_page_layout
       render @page, page: @page
     rescue ActionView::MissingTemplate
-      warning("PageLayout: '#{@page.page_layout}' not found. Rendering standard page_layout.")
+      warning("[alchemy]: '#{@page.page_layout}' page layout not found. Rendering 'standard' page layout.")
       render "alchemy/page_layouts/standard", page: @page
     end
 

data/{lib → app/helpers}/alchemy/resources_helper.rb

@@ -2,6 +2,8 @@
 
 module Alchemy
   module ResourcesHelper
+    include Alchemy::Admin::ResourceName
+
     # = Alchemy::ResourceHelper
     #
     # Used to DRY up resource like structures in Alchemy's admin backend in combination with Alchemy::Resource
@@ -14,11 +16,11 @@ module Alchemy
     end
 
     def resource_instance_variable
-      instance_variable_get(:"@#{resource_handler.resource_name}")
+      instance_variable_get(:"@#{resource_name}")
     end
 
     def resources_instance_variable
-      instance_variable_get(:"@#{resource_handler.resources_name}")
+      instance_variable_get(:"@#{resources_name}")
     end
 
     def resource_url_proxy
@@ -46,14 +48,10 @@ module Alchemy
     end
 
     def edit_resource_path(resource = nil, options = {})
-      path_segments = resource_scope + [resource] || resource_handler.resource_array
+      path_segments = resource_scope + [resource] || resource_array
       edit_polymorphic_path path_segments, options
     end
 
-    def resource_name
-      resource_handler.resource_name
-    end
-
     def resource_model
       resource_handler.model
     end
@@ -127,44 +125,6 @@ module Alchemy
       resource_handler.resource_relations.collect { |_k, v| v[:name].to_sym }
     end
 
-    # Returns the attribute's column for sorting
-    #
-    # If the attribute contains a resource_relation, then the table and column for related model will be returned.
-    # @deprecated
-    def sortable_resource_header_column(attribute)
-      if (relation = attribute[:relation])
-        "#{relation[:model_association].name}_#{relation[:attr_method]}"
-      else
-        attribute[:name]
-      end
-    end
-    deprecate sortable_resource_header_column: "Please `render Alchemy::Admin::Resource::Table instead`", deprecator: Alchemy::Deprecation
-
-    # Renders the row for a resource record in the resources table.
-    #
-    # This helper has a nice fallback. If you create a partial for your record then this partial will be rendered.
-    #
-    # Otherwise the default +app/views/alchemy/admin/resources/_resource.html.erb+ partial gets rendered.
-    #
-    # == Example
-    #
-    # For a resource named +Comment+ you can create a partial named +_comment.html.erb+
-    #
-    #   # app/views/admin/comments/_comment.html.erb
-    #   <tr>
-    #     <td><%= comment.title %></td>
-    #     <td><%= comment.body %></td>
-    #   </tr>
-    #
-    # NOTE: Alchemy gives you a local variable named like your resource
-    # @deprecated
-    def render_resources(icon: nil)
-      render partial: resource_name, collection: resources_instance_variable, locals: {icon: icon}
-    rescue ActionView::MissingTemplate
-      render partial: "resource", collection: resources_instance_variable, locals: {icon: icon}
-    end
-    deprecate render_resources: "Please `render Alchemy::Admin::Resource::Table instead`", deprecator: Alchemy::Deprecation
-
     def resource_has_tags
       resource_model.respond_to?(:tag_counts) && resource_model.tag_counts.any?
     end

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

@@ -1,4 +1,5 @@
 import { reloadPreview } from "alchemy_admin/components/preview_window"
+import { removeTab } from "alchemy_admin/fixed_elements"
 import { closeCurrentDialog } from "alchemy_admin/dialog"
 import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
 
@@ -13,6 +14,7 @@ class Action extends HTMLElement {
       // we don't have to implicitly close the dialog
       closeCurrentDialog,
       reloadPreview,
+      removeFixedElement: removeTab,
       updateAnchorIcon: IngredientAnchorLink.updateIcon
     }
   }

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

@@ -26,7 +26,7 @@ export class AlchemyHTMLElement extends HTMLElement {
    * this is a default function
    * @link https://developer.mozilla.org/en-US/docs/Web/API/Web_Components#reference
    */
-  connectedCallback() {
+  async 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"}))
@@ -39,7 +39,7 @@ export class AlchemyHTMLElement extends HTMLElement {
 
     // render the component
     this._updateComponent()
-    this.connected()
+    await this.connected()
   }
 
   /**
@@ -64,7 +64,7 @@ export class AlchemyHTMLElement extends HTMLElement {
   /**
    * a connected method to make it easier to overwrite the connection callback
    */
-  connected() {}
+  async connected() {}
 
   /**
    * a disconnected method to make it easier to overwrite the disconnection callback

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

@@ -0,0 +1,20 @@
+// Dispatch a submit event on change of input or select elements
+// contained in a form, so that Turbo can submit the form.
+class AutoSubmit extends HTMLElement {
+  connectedCallback() {
+    // Still using jQuery here, because select2 does not emit
+    // the event from the original select element.
+    $(this).on("change", function (event) {
+      // We need to dispatch a submit event, so that Turbo that listens
+      // to it submits the search form us.
+      const submitEvent = new Event("submit", {
+        bubbles: true,
+        cancelable: true
+      })
+      event.target.form.dispatchEvent(submitEvent)
+      return false
+    })
+  }
+}
+
+customElements.define("alchemy-auto-submit", AutoSubmit)

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

@@ -2,6 +2,8 @@ import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_elemen
 import { translate, currentLocale } from "alchemy_admin/i18n"
 import flatpickr from "flatpickr"
 
+const locale = currentLocale()
+
 class Datepicker extends AlchemyHTMLElement {
   static properties = {
     inputType: { default: "date" }
@@ -12,11 +14,14 @@ class Datepicker extends AlchemyHTMLElement {
     this.flatpickr = undefined
   }
 
-  afterRender() {
-    this.flatpickr = flatpickr(
-      this.getElementsByTagName("input")[0],
-      this.flatpickrOptions
-    )
+  // Load the locales for flatpickr before setting it up.
+  async connected() {
+    // English is the default locale for flatpickr, so we don't need to load it
+    if (locale !== "en") {
+      await import(`flatpickr/${locale}.js`)
+    }
+
+    this.flatpickr = flatpickr(this.inputField, this.flatpickrOptions)
   }
 
   disconnected() {
@@ -27,7 +32,7 @@ class Datepicker extends AlchemyHTMLElement {
     const enableTime = /time/.test(this.inputType)
     const options = {
       // alchemy_i18n supports `zh_CN` etc., but flatpickr only has two-letter codes (`zh`)
-      locale: currentLocale().slice(0, 2),
+      locale: locale.slice(0, 2),
       altInput: true,
       altFormat: translate(`formats.${this.inputType}`),
       altInputClass: "flatpickr-input",
@@ -35,7 +40,9 @@ class Datepicker extends AlchemyHTMLElement {
       noCalendar: this.inputType === "time",
       time_24hr: translate("formats.time_24hr"),
       onValueUpdate(_selectedDates, _dateStr, instance) {
-        instance.element.closest("alchemy-element-editor")?.setDirty()
+        instance.element
+          .closest("alchemy-element-editor")
+          ?.setDirty(this.inputField)
       }
     }
 
@@ -45,6 +52,10 @@ class Datepicker extends AlchemyHTMLElement {
 
     return options
   }
+
+  get inputField() {
+    return this.querySelector("input")
+  }
 }
 
 customElements.define("alchemy-datepicker", Datepicker)

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

@@ -1,7 +1,8 @@
+import ajax from "alchemy_admin/utils/ajax"
 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"
+import { openConfirmDialog } from "alchemy_admin/confirm_dialog"
 
 export class DeleteElementButton extends HTMLElement {
   constructor() {
@@ -9,12 +10,12 @@ export class DeleteElementButton extends HTMLElement {
     this.addEventListener("click", this)
   }
 
-  handleEvent() {
-    confirmToDeleteDialog(this.url, { message: this.message }).then(
-      (response) => {
-        this.#removeElement(response)
-      }
-    )
+  async handleEvent() {
+    const confirmed = await openConfirmDialog(this.message)
+    if (confirmed) {
+      const response = await ajax("DELETE", this.url)
+      this.#removeElement(response.data)
+    }
   }
 
   #removeElement(response) {

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

@@ -20,8 +20,10 @@ export class ElementEditor extends HTMLElement {
     this.addEventListener("alchemy:element-update-title", this)
     // We use of @rails/ujs for Rails remote forms
     this.addEventListener("ajax:complete", this)
-    // Dirty observer
-    this.addEventListener("change", this)
+
+    // Dirty observer still needs to be jQuery
+    // in order to support select2.
+    $(this).on("change", this.onChange)
 
     this.header?.addEventListener("dblclick", () => {
       this.toggle()
@@ -78,20 +80,22 @@ export class ElementEditor extends HTMLElement {
           this.setTitle(event.detail.title)
         }
         break
-      case "change":
-        // SortableJS fires a native change event :/
-        // and we do not want to set the element editor dirty
-        // when this happens
-        if (event.target.classList.contains("nested-elements")) {
-          return
-        }
-        event.stopPropagation()
-        event.target.classList.add("dirty")
-        this.setDirty()
-        break
     }
   }
 
+  onChange(event) {
+    const target = event.target
+    // SortableJS fires a native change event :/
+    // and we do not want to set the element editor dirty
+    // when this happens
+    if (target.classList.contains("nested-elements")) {
+      return
+    }
+    this.setDirty(target)
+    event.stopPropagation()
+    return false
+  }
+
   /**
    * Scrolls to and highlights element
    * Expands if collapsed
@@ -227,11 +231,17 @@ export class ElementEditor extends HTMLElement {
 
   /**
    * Sets the element into dirty (unsafed) state
+   * @param {HTMLElement} editor
    */
-  setDirty() {
+  setDirty(editor) {
     if (this.hasEditors) {
       this.dirty = true
-      window.onbeforeunload = () => Alchemy.t("page_dirty_notice")
+
+      if (!window.onbeforeunload) {
+        window.onbeforeunload = (event) => event.preventDefault()
+      }
+
+      editor?.closest(".ingredient-editor")?.classList.add("dirty")
     }
   }
 

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

@@ -0,0 +1,43 @@
+import { hightlightTerm } from "alchemy_admin/components/remote_select"
+
+const formatItem = (icon, text) => {
+  return `<div class="element-select-item">${icon} ${text}</div>`
+}
+
+class ElementSelect extends HTMLInputElement {
+  constructor() {
+    super()
+    this.classList.add("alchemy_selectbox")
+  }
+
+  connectedCallback() {
+    const el = this
+    const options = {
+      minimumResultsForSearch: 3,
+      dropdownAutoWidth: true,
+      data() {
+        return { results: JSON.parse(el.dataset.options) }
+      },
+      formatResult: (option, _el, search) => {
+        let text
+
+        if (option.id === "") return option.text
+        if (search.term !== "") {
+          text = hightlightTerm(option.text, search.term)
+        } else {
+          text = option.text
+        }
+
+        return formatItem(option.icon, text)
+      },
+      formatSelection: (option) => {
+        return formatItem(option.icon, option.text)
+      }
+    }
+    $(this).select2(options)
+  }
+}
+
+customElements.define("alchemy-element-select", ElementSelect, {
+  extends: "input"
+})

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

@@ -3,6 +3,7 @@
 
 import "alchemy_admin/components/action"
 import "alchemy_admin/components/attachment_select"
+import "alchemy_admin/components/auto_submit"
 import "alchemy_admin/components/button"
 import "alchemy_admin/components/char_counter"
 import "alchemy_admin/components/clipboard_button"
@@ -10,6 +11,7 @@ import "alchemy_admin/components/datepicker"
 import "alchemy_admin/components/dialog_link"
 import "alchemy_admin/components/dom_id_select"
 import "alchemy_admin/components/element_editor"
+import "alchemy_admin/components/element_select"
 import "alchemy_admin/components/elements_window"
 import "alchemy_admin/components/elements_window_handle"
 import "alchemy_admin/components/list_filter"
@@ -27,6 +29,7 @@ import "alchemy_admin/components/select"
 import "alchemy_admin/components/spinner"
 import "alchemy_admin/components/tags_autocomplete"
 import "alchemy_admin/components/tinymce"
+import "alchemy_admin/components/update_check"
 
 await Promise.race([
   // Load all global custom elements

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

@@ -27,7 +27,7 @@ class LinkButtons extends HTMLElement {
     this.linkTargetField.value = data.target
 
     this.unlinkButton.linked = true
-    this.elementEditor.setDirty()
+    this.setElementDirty()
   }
 
   removeLink() {
@@ -40,7 +40,11 @@ class LinkButtons extends HTMLElement {
     this.linkButton.classList.remove("linked")
     this.unlinkButton.linked = false
 
-    this.elementEditor.setDirty()
+    this.setElementDirty()
+  }
+
+  setElementDirty() {
+    this.elementEditor.setDirty(this)
   }
 
   get linkButton() {

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

@@ -1,4 +1,9 @@
 import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
+import { setupSelectLocale } from "alchemy_admin/i18n"
+
+export function hightlightTerm(name, term) {
+  return name.replace(new RegExp(term, "gi"), (match) => `<em>${match}</em>`)
+}
 
 export class RemoteSelect extends AlchemyHTMLElement {
   static properties = {
@@ -9,7 +14,9 @@ export class RemoteSelect extends AlchemyHTMLElement {
     url: { default: "" }
   }
 
-  connected() {
+  async connected() {
+    await setupSelectLocale()
+
     this.input.classList.add("alchemy_selectbox")
 
     $(this.input)
@@ -145,6 +152,6 @@ export class RemoteSelect extends AlchemyHTMLElement {
    * @private
    */
   _hightlightTerm(name, term) {
-    return name.replace(new RegExp(term, "gi"), (match) => `<em>${match}</em>`)
+    return hightlightTerm(name, term)
   }
 }

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

@@ -1,5 +1,9 @@
+import { setupSelectLocale } from "alchemy_admin/i18n"
+
 class TagsAutocomplete extends HTMLElement {
-  connectedCallback() {
+  async connectedCallback() {
+    await setupSelectLocale()
+
     this.classList.add("autocomplete_tag_list")
     $(this.input).select2(this.select2Config)
   }