alchemy_cms 7.0.0.pre.a → 7.0.0.pre.c

data/app/helpers/alchemy/pages_helper.rb

@@ -24,7 +24,7 @@ module Alchemy
         linkname: "name",
         show_title: true,
         spacer: "",
-        reverse: false,
+        reverse: false
       }.merge(options)
       languages = Language.on_current_site.published.with_root_page.order("name #{options[:reverse] ? "DESC" : "ASC"}")
       return nil if languages.count < 2
@@ -33,7 +33,7 @@ module Alchemy
         partial: "alchemy/language_links/language",
         collection: languages,
         spacer_template: "alchemy/language_links/spacer",
-        locals: { languages: languages, options: options },
+        locals: {languages: languages, options: options}
       )
     end
 
@@ -79,7 +79,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::Language.current
       )
       if root_node.nil?
         warning("Menu with type #{menu_type} not found!")
@@ -110,12 +110,12 @@ module Alchemy
         page: @page,
         restricted_only: false,
         reverse: false,
-        link_active_page: false,
+        link_active_page: false
       }.merge(options)
 
-      pages = options[:page].
-        self_and_ancestors.contentpages.
-        published
+      pages = options[:page]
+        .self_and_ancestors.contentpages
+        .published
 
       if options.delete(:restricted_only)
         pages = pages.restricted
@@ -146,13 +146,13 @@ module Alchemy
       options = {
         prefix: "",
         suffix: "",
-        separator: "",
+        separator: ""
       }.update(options)
       title_parts = [options[:prefix]]
-      if response.status == 200
-        title_parts << @page.title
+      title_parts << if response.status == 200
+        @page.title
       else
-        title_parts << response.status
+        response.status
       end
       title_parts << options[:suffix]
       title_parts.reject(&:blank?).join(options[:separator]).html_safe

data/app/helpers/alchemy/url_helper.rb

@@ -20,7 +20,7 @@ module Alchemy
     def show_page_path_params(page, optional_params = {})
       raise ArgumentError, "Page is nil" if page.nil?
 
-      url_params = { urlname: page.urlname }.update(optional_params)
+      url_params = {urlname: page.urlname}.update(optional_params)
       prefix_locale?(page.language_code) ? url_params.update(locale: page.language_code) : url_params
     end
 

data/{package/src → app/javascript/alchemy_admin}/datepicker.js

@@ -24,6 +24,7 @@ export default function Datepicker(scope = document) {
         altInput: true,
         altFormat: Alchemy.t(`formats.${type}`),
         altInputClass: "flatpickr-input",
+        dateFormat: "Z",
         enableTime: /time/.test(type),
         noCalendar: type === "time",
         time_24hr: Alchemy.t("formats.time_24hr"),

data/{package/src → app/javascript/alchemy_admin}/node_tree.js

@@ -1,6 +1,6 @@
 import Sortable from "sortablejs"
-import { patch } from "./utils/ajax"
-import { on } from "./utils/events"
+import { patch } from "alchemy_admin/utils/ajax"
+import { on } from "alchemy_admin/utils/events"
 
 function displayNodeFolders() {
   document.querySelectorAll("li.menu-item").forEach((el) => {

data/{package/src → app/javascript/alchemy_admin}/page_publication_fields.js

@@ -9,7 +9,7 @@ export default function () {
     )
     const public_field = dialog.querySelector("#page_public")
 
-    if(!public_field) return
+    if (!public_field) return
 
     public_field.addEventListener("click", function (evt) {
       const checkbox = evt.target

data/{package/src → app/javascript/alchemy_admin}/page_sorter.js

@@ -1,5 +1,5 @@
 import Sortable from "sortablejs"
-import { patch } from "./utils/ajax"
+import { patch } from "alchemy_admin/utils/ajax"
 
 function onFinishDragging(evt) {
   const pageId = evt.item.dataset.pageId

data/{package/src → app/javascript/alchemy_admin}/picture_editors.js

@@ -1,7 +1,7 @@
 import debounce from "lodash-es/debounce"
 import max from "lodash-es/max"
-import { get } from "./utils/ajax"
-import ImageLoader from "./image_loader"
+import { get } from "alchemy_admin/utils/ajax"
+import ImageLoader from "alchemy_admin/image_loader"
 
 const UPDATE_DELAY = 125
 const IMAGE_PLACEHOLDER = '<i class="icon far fa-image fa-fw"></i>'

data/{package/src → app/javascript/alchemy_admin}/sitemap.js

@@ -1,8 +1,8 @@
 // The admin sitemap Alchemy class
-import PageSorter from "./page_sorter"
-import { on } from "./utils/events"
-import { get, patch } from "./utils/ajax"
-import { createSortables, displayPageFolders } from "./page_sorter"
+import PageSorter from "alchemy_admin/page_sorter"
+import { on } from "alchemy_admin/utils/events"
+import { get, patch } from "alchemy_admin/utils/ajax"
+import { createSortables, displayPageFolders } from "alchemy_admin/page_sorter"
 
 export default class Sitemap {
   // Storing some objects.

data/app/javascript/alchemy_admin/tinymce.js

@@ -0,0 +1,142 @@
+// Alchemy Tinymce wrapper
+//
+
+let tinymceCustomConfigs = {}
+let tinymceIntersectionObserver = null
+
+// Returns default config for a tinymce editor.
+function getDefaultConfig(editorId) {
+  const config = Alchemy.TinymceDefaults
+  config.language = Alchemy.locale
+  config.selector = `#${editorId}`
+  config.init_instance_callback = initInstanceCallback
+  return config
+}
+
+// Returns configuration for given custom tinymce editor selector.
+//
+// It uses the +.getDefaultConfig+ and merges the custom parts.
+function getConfig(editorId) {
+  const editorConfig = tinymceCustomConfigs[editorId] || {}
+  return { ...getDefaultConfig(editorId), ...editorConfig }
+}
+
+// create intersection observer and register textareas to be initialized when
+// they are visible
+function initEditors(ids) {
+  initializeIntersectionObserver()
+
+  ids.forEach((id) => {
+    const editorId = `tinymce_${id}`
+    const textarea = document.getElementById(editorId)
+
+    if (textarea) {
+      tinymceIntersectionObserver.observe(textarea)
+    } else {
+      console.warn(`Could not initialize TinyMCE for textarea#${editorId}!`)
+    }
+  })
+}
+
+// initialize IntersectionObserver
+// the observer will initialize Tinymce if the textarea becomes visible
+function initializeIntersectionObserver() {
+  if (tinymceIntersectionObserver !== null) {
+    tinymceIntersectionObserver.disconnect()
+  }
+
+  const observerCallback = (entries, observer) => {
+    entries.forEach((entry) => {
+      if (entry.intersectionRatio > 0) {
+        initTinymceEditor(entry.target)
+        // disable observer after the Tinymce was initialized
+        observer.unobserve(entry.target)
+      }
+    })
+  }
+  const options = {
+    root: Alchemy.ElementEditors.element_area.get(0),
+    rootMargin: "0px",
+    threshold: [0.05]
+  }
+
+  tinymceIntersectionObserver = new IntersectionObserver(
+    observerCallback,
+    options
+  )
+}
+
+// Initializes one specific TinyMCE editor
+function initTinymceEditor(textarea) {
+  const editorId = textarea.id
+  const config = getConfig(editorId)
+
+  // remove editor instance, if already initialized
+  removeEditor(editorId)
+
+  if (config) {
+    const spinner = new Alchemy.Spinner("small")
+    textarea.closest(".tinymce_container").prepend(spinner.spin().el.get(0))
+    tinymce.init(config)
+  } else {
+    console.warn("No tinymce configuration found for", id)
+  }
+}
+
+// Gets called after an editor instance gets initialized
+function initInstanceCallback(editor) {
+  const element = document.getElementById(editor.id).closest(".element-editor")
+  element.getElementsByClassName("spinner").item(0).remove()
+  editor.on("dirty", function () {
+    Alchemy.setElementDirty(element)
+  })
+  editor.on("click", function (event) {
+    event.target = element
+    Alchemy.ElementEditors.onClickElement(event)
+  })
+}
+
+function removeEditor(editorId) {
+  const editorElement = document.getElementById(editorId)
+  if (tinymceIntersectionObserver && editorElement) {
+    tinymceIntersectionObserver.unobserve(editorElement)
+  }
+
+  const editor = tinymce.get(editorId)
+  if (editor) {
+    editor.remove()
+  }
+}
+
+export default {
+  // Initializes all TinyMCE editors with given ids
+  //
+  // @param ids [Array]
+  //   - Editor ids that should be initialized.
+  init(ids) {
+    initEditors(ids)
+  },
+
+  // Initializes TinyMCE editor with given options
+  initWith(options) {
+    tinymce.init({ ...Alchemy.TinymceDefaults, ...options })
+  },
+
+  // Removes the TinyMCE editor from given dom ids.
+  remove(ids) {
+    ids.forEach((id) => removeEditor(`tinymce_${id}`))
+  },
+
+  // Remove all tinymce instances for given selector
+  removeFrom(selector) {
+    // the selector is a jQuery selector - it has to be refactor if we taking care of the calling methods
+    $(selector).each(function (element) {
+      removeEditor(element.id)
+    })
+  },
+
+  // set tinymce configuration for a given selector key
+  setCustomConfig(key, configuration) {
+    tinymceCustomConfigs[key] = configuration
+  }
+}

data/app/javascript/alchemy_admin.js

@@ -0,0 +1,34 @@
+import "@hotwired/turbo-rails"
+
+import translate from "alchemy_admin/i18n"
+import translationData from "alchemy_admin/translations"
+import fileEditors from "alchemy_admin/file_editors"
+import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
+import pictureEditors from "alchemy_admin/picture_editors"
+import ImageLoader from "alchemy_admin/image_loader"
+import ImageCropper from "alchemy_admin/image_cropper"
+import Datepicker from "alchemy_admin/datepicker"
+import Sitemap from "alchemy_admin/sitemap"
+import Tinymce from "alchemy_admin/tinymce"
+import PagePublicationFields from "alchemy_admin/page_publication_fields"
+
+// Global Alchemy object
+if (typeof window.Alchemy === "undefined") {
+  window.Alchemy = {}
+}
+
+// Enhance the global Alchemy object with imported features
+Object.assign(Alchemy, {
+  // Global utility method for translating a given string
+  t: translate,
+  translations: Object.assign(Alchemy.translations || {}, translationData),
+  fileEditors,
+  pictureEditors,
+  ImageLoader: ImageLoader.init,
+  ImageCropper,
+  IngredientAnchorLink,
+  Datepicker,
+  Sitemap,
+  Tinymce,
+  PagePublicationFields
+})

data/app/mailers/alchemy/messages_mailer.rb

@@ -8,7 +8,7 @@ module Alchemy
         from: mail_from,
         to: mail_to,
         reply_to: message.try(:email),
-        subject: subject,
+        subject: subject
       )
     end
   end

data/app/models/alchemy/attachment.rb

@@ -40,7 +40,7 @@ module Alchemy
 
     scope :by_file_type, ->(file_type) { where(file_mime_type: file_type) }
     scope :recent, -> { where("#{table_name}.created_at > ?", Time.current - 24.hours).order(:created_at) }
-    scope :without_tag, -> { left_outer_joins(:taggings).where(gutentag_taggings: { id: nil }) }
+    scope :without_tag, -> { left_outer_joins(:taggings).where(gutentag_taggings: {id: nil}) }
 
     # We need to define this method here to have it available in the validations below.
     class << self
@@ -62,12 +62,12 @@ module Alchemy
         [
           {
             name: :by_file_type,
-            values: distinct.pluck(:file_mime_type).map { |type| [Alchemy.t(type, scope: "mime_types"), type] }.sort_by(&:first),
+            values: distinct.pluck(:file_mime_type).map { |type| [Alchemy.t(type, scope: "mime_types"), type] }.sort_by(&:first)
           },
           {
             name: :misc,
-            values: %w(recent last_upload without_tag),
-          },
+            values: %w[recent last_upload without_tag]
+          }
         ]
       end
 
@@ -79,7 +79,7 @@ module Alchemy
       end
 
       def searchable_alchemy_resource_attributes
-        %w(name file_name)
+        %w[name file_name]
       end
 
       def allowed_filetypes
@@ -106,7 +106,7 @@ module Alchemy
       {
         "name" => read_attribute(:file_name),
         "size" => read_attribute(:file_size),
-        "error" => errors[:file].join,
+        "error" => errors[:file].join
       }
     end
 

data/app/models/alchemy/base_record.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 module Alchemy
   def self.table_name_prefix
     "alchemy_"

data/app/models/alchemy/eager_loading.rb

@@ -20,18 +20,18 @@ module Alchemy
         [
           :tags,
           {
-            language: :site,
+            :language => :site,
             version => {
               elements: [
                 :page,
                 :touchable_pages,
                 :tags,
                 {
-                  ingredients: :related_object,
-                },
-              ],
-            },
-          },
+                  ingredients: :related_object
+                }
+              ]
+            }
+          }
         ]
       end
     end

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

@@ -41,7 +41,7 @@ module Alchemy
       # The definition of this element.
       #
       def definition
-        if definition = self.class.definition_by_name(name)
+        if (definition = self.class.definition_by_name(name))
           definition
         else
           log_warning "Could not find element definition for #{name}. " \

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

@@ -159,9 +159,9 @@ module Alchemy
               scope: "ingredient_validations",
               default: [
                 "fields.#{role}.#{error}".to_sym,
-                "errors.#{error}".to_sym,
+                "errors.#{error}".to_sym
               ],
-              field: Alchemy::Ingredient.translated_label_for(role, name),
+              field: Alchemy::Ingredient.translated_label_for(role, name)
             )
           end
         end
@@ -175,7 +175,7 @@ module Alchemy
         ingredient_definitions.each do |attributes|
           ingredients.build(
             role: attributes[:role],
-            type: Alchemy::Ingredient.normalize_type(attributes[:type]),
+            type: Alchemy::Ingredient.normalize_type(attributes[:type])
           )
         end
       end

data/app/models/alchemy/element.rb

@@ -41,7 +41,7 @@ module Alchemy
       "taggable",
       "compact",
       "message",
-      "deprecated",
+      "deprecated"
     ].freeze
 
     # All Elements that share the same page version and parent element and are fixed or not are considered a list.
@@ -100,7 +100,7 @@ module Alchemy
     scope :excluded, ->(names) { where.not(name: names) }
     scope :fixed, -> { where(fixed: true) }
     scope :unfixed, -> { where(fixed: false) }
-    scope :from_current_site, -> { where(Language.table_name => { site_id: Site.current || Site.default }).joins(page: "language") }
+    scope :from_current_site, -> { where(Language.table_name => {site_id: Site.current || Site.default}).joins(page: "language") }
     scope :folded, -> { where(folded: true) }
     scope :expanded, -> { where(folded: false) }
     scope :not_nested, -> { where(parent_element_id: nil) }

data/app/models/alchemy/elements_repository.rb

@@ -102,7 +102,7 @@ module Alchemy
     # Elements off setted by
     # @return [Alchemy::ElementRepository]
     def offset(offset)
-      self.class.new elements[offset.to_i..-1]
+      self.class.new elements[offset.to_i..]
     end
 
     # Elements limitted by

data/app/models/alchemy/image_cropper_settings.rb

@@ -21,7 +21,7 @@ module Alchemy
         min_size: large_enough? ? min_size : false,
         ratio: ratio,
         default_box: default_box,
-        image_size: [image_width, image_height],
+        image_size: [image_width, image_height]
       }.freeze
     end
 
@@ -80,7 +80,7 @@ module Alchemy
         default_crop_from[0],
         default_crop_from[1],
         default_crop_from[0] + default_crop_size[0],
-        default_crop_from[1] + default_crop_size[1],
+        default_crop_from[1] + default_crop_size[1]
       ]
     end
   end

data/app/models/alchemy/ingredient.rb

@@ -19,7 +19,7 @@ module Alchemy
       if: -> { definition.key?(:default) && value.nil? }
 
     validates :type, presence: true
-    validates :role, presence: true, uniqueness: { scope: :element_id, case_sensitive: false }
+    validates :role, presence: true, uniqueness: {scope: :element_id, case_sensitive: false}
 
     validates_with Alchemy::IngredientValidator, on: :update, if: :has_validations?
 
@@ -75,7 +75,7 @@ module Alchemy
         Alchemy.t(
           role,
           scope: "ingredient_roles.#{element_name}",
-          default: Alchemy.t("ingredient_roles.#{role}", default: role.humanize),
+          default: Alchemy.t("ingredient_roles.#{role}", default: role.humanize)
         )
       end
 
@@ -100,16 +100,6 @@ module Alchemy
       definition[:settings] || {}
     end
 
-    # Fetches value from settings
-    #
-    # @param key [Symbol]               - The hash key you want to fetch the value from
-    # @param options [Hash]             - An optional Hash that can override the settings.
-    #                                     Normally passed as options hash into the ingredient
-    #                                     editor view.
-    def settings_value(key, options = {})
-      settings.merge(options || {})[key.to_sym]
-    end
-
     # Definition hash for this ingredient from +elements.yml+ file.
     #
     def definition
@@ -165,8 +155,20 @@ module Alchemy
       !!definition[:as_element_title]
     end
 
+    # The view component of the ingredient with mapped options.
+    #
+    # @param options [Hash] - Passed to the view component as keyword arguments
+    # @param html_options [Hash] - Passed to the view component
+    def as_view_component(options: {}, html_options: {})
+      view_component_class.new(self, **options, html_options: html_options)
+    end
+
     private
 
+    def view_component_class
+      @_view_component_class ||= "#{self.class.name}View".constantize
+    end
+
     def hint_translation_attribute
       role
     end

data/app/models/alchemy/ingredient_validator.rb

@@ -89,7 +89,7 @@ module Alchemy
     def duplicates
       ingredient.class
         .joins(:element).merge(Alchemy::Element.published)
-        .where(Alchemy::Element.table_name => { name: ingredient.element.name })
+        .where(Alchemy::Element.table_name => {name: ingredient.element.name})
         .where(value: ingredient.value)
         .where.not(id: ingredient.id)
     end

data/app/models/alchemy/ingredients/datetime.rb

@@ -15,7 +15,7 @@ module Alchemy
       def preview_text(_maxlength = nil)
         return "" unless value
 
-        ::I18n.l(value, format: :'alchemy.ingredient_date')
+        ::I18n.l(value, format: :"alchemy.ingredient_date")
       end
     end
   end

data/app/models/alchemy/ingredients/file.rb

@@ -13,11 +13,11 @@ module Alchemy
         :title
 
       allow_settings %i[
-          css_classes
-          except
-          link_text
-          only
-        ]
+        css_classes
+        except
+        link_text
+        only
+      ]
 
       related_object_alias :attachment, class_name: "Alchemy::Attachment"
 

data/app/models/alchemy/ingredients/headline.rb

@@ -13,10 +13,10 @@ module Alchemy
         :size
 
       allow_settings %i[
-          anchor
-          levels
-          sizes
-        ]
+        anchor
+        levels
+        sizes
+      ]
 
       before_create :set_level_and_size
 

data/app/models/alchemy/ingredients/picture.rb

@@ -28,15 +28,15 @@ module Alchemy
       related_object_alias :picture, class_name: "Alchemy::Picture"
 
       allow_settings %i[
-          crop
-          css_classes
-          fixed_ratio
-          linkable
-          size
-          sizes
-          srcset
-          upsample
-        ]
+        crop
+        css_classes
+        fixed_ratio
+        linkable
+        size
+        sizes
+        srcset
+        upsample
+      ]
 
       # The first 30 characters of the pictures name
       #
@@ -47,6 +47,24 @@ module Alchemy
       def preview_text(max_length = 30)
         picture&.name.to_s[0..max_length - 1]
       end
+
+      # The picture view component with mapped options.
+      #
+      # @param options [Hash] - Passed to the view component
+      # @param html_options [Hash] - Passed to the view component
+      #
+      # @return Alchemy::Ingredients::PictureView
+      def as_view_component(options: {}, html_options: {})
+        PictureView.new(
+          self,
+          show_caption: options.delete(:show_caption),
+          disable_link: options.delete(:disable_link),
+          srcset: options.delete(:srcset),
+          sizes: options.delete(:sizes),
+          picture_options: options,
+          html_options: html_options
+        )
+      end
     end
   end
 end