alchemy_cms 7.0.16 → 7.1.0.pre.b1

data/app/javascript/alchemy_admin/gui.js

@@ -0,0 +1,14 @@
+import TagsAutocomplete from "alchemy_admin/tags_autocomplete"
+
+function init(scope) {
+  if (!scope) {
+    Alchemy.watchForDialogs()
+  }
+  Alchemy.Hotkeys(scope)
+  Alchemy.ListFilter(scope)
+  TagsAutocomplete(scope)
+}
+
+export default {
+  init
+}

data/app/javascript/alchemy_admin/i18n.js

@@ -1,11 +1,8 @@
-const KEY_SEPARATOR = /\./
+import { en } from "alchemy_admin/locales/en"
 
-function currentLocale() {
-  if (Alchemy.locale == null) {
-    throw "Alchemy.locale is not set! Please set Alchemy.locale to a locale string in order to translate something."
-  }
-  return Alchemy.locale
-}
+Alchemy.translations = Object.assign(Alchemy.translations || {}, { en })
+
+const KEY_SEPARATOR = /\./
 
 function getTranslations() {
   const locale = currentLocale()
@@ -36,7 +33,14 @@ function getTranslation(key) {
   return translations[key] || key
 }
 
-export default function translate(key, replacement) {
+export function currentLocale() {
+  if (document.documentElement.lang) {
+    return document.documentElement.lang
+  }
+  return "en"
+}
+
+export function translate(key, replacement = undefined) {
   let translation = getTranslation(key)
 
   if (replacement) {

data/app/javascript/alchemy_admin/image_cropper.js

@@ -90,12 +90,15 @@ export default class ImageCropper {
   }
 
   bind() {
-    this.dialog.dialog_body.find('button[type="submit"]').click(() => {
-      Alchemy.setElementDirty(`[data-element-id='${this.elementId}']`)
+    this.dialog.dialog_body.find('button[type="submit"]').on("click", () => {
+      const elementEditor = document.querySelector(
+        `[data-element-id='${this.elementId}']`
+      )
+      elementEditor.setDirty()
       this.dialog.close()
       return false
     })
-    this.dialog.dialog_body.find('button[type="reset"]').click(() => {
+    this.dialog.dialog_body.find('button[type="reset"]').on("click", () => {
       this.reset()
       return false
     })

data/app/javascript/alchemy_admin/image_loader.js

@@ -1,23 +1,21 @@
 // Shows spinner while loading images and
 // fades the image after its been loaded
 
-const DEFAULT_SPINNER_OPTIONS = { fill: "#fff" }
-
 export default class ImageLoader {
-  static init(scope = document, spinnerOptions = DEFAULT_SPINNER_OPTIONS) {
+  static init(scope = document) {
     if (typeof scope === "string") {
       scope = document.querySelector(scope)
     }
     scope.querySelectorAll("img").forEach((image) => {
-      const loader = new ImageLoader(image, spinnerOptions)
+      const loader = new ImageLoader(image)
       loader.load()
     })
   }
 
-  constructor(image, spinnerOptions = DEFAULT_SPINNER_OPTIONS) {
+  constructor(image) {
     this.image = image
     this.parent = image.parentNode
-    this.spinner = new Alchemy.Spinner("small", spinnerOptions)
+    this.spinner = new Alchemy.Spinner("small")
     this.bind()
   }
 
@@ -34,15 +32,15 @@ export default class ImageLoader {
   }
 
   onLoaded() {
-    this.removeSpinner()
+    this.spinner.stop()
     this.image.classList.remove("loading")
     this.unbind()
   }
 
   onError(evt) {
     const message = `Could not load "${this.image.src}"`
-    this.removeSpinner()
-    this.parent.innerHTML = `<span class="icon error fas fa-exclamation-triangle" title="${message}" />`
+    this.spinner.stop()
+    this.parent.innerHTML = `<span class="icon error ri-alert-line" title="${message}" />`
     console.error(message, evt)
     this.unbind()
   }
@@ -51,10 +49,4 @@ export default class ImageLoader {
     this.image.removeEventListener("load", this.onLoaded)
     this.image.removeEventListener("error", this.onError)
   }
-
-  removeSpinner() {
-    this.parent.querySelectorAll(".spinner").forEach((spinner) => {
-      spinner.remove()
-    })
-  }
 }

data/app/javascript/alchemy_admin/ingredient_anchor_link.js

@@ -7,11 +7,8 @@ export default class IngredientAnchorLink {
       const icon = ingredientEditor.querySelector(
         ".edit-ingredient-anchor-link > a > .icon"
       )
-      if (icon) {
-        active
-          ? icon.classList.replace("far", "fas")
-          : icon.classList.replace("fas", "far")
-      }
+      icon?.classList.toggle("ri-bookmark-fill", active)
+      icon?.classList.toggle("ri-bookmark-line", !active)
     }
   }
 }

data/app/javascript/alchemy_admin/initializer.js

@@ -0,0 +1,65 @@
+/**
+ * add change listener to select to redirect the user after selecting another locale or site
+ * @param {string} selectId
+ * @param {string} parameterName
+ * @param {boolean} forcedReload
+ */
+function selectHandler(selectId, parameterName, forcedReload = false) {
+  $(`select#${selectId}`).on("change", function (e) {
+    let url = window.location.pathname
+    let delimiter = url.match(/\?/) ? "&" : "?"
+    const location = `${url}${delimiter}${parameterName}=${$(this).val()}`
+
+    if (forcedReload) {
+      window.location.href = location
+    } else {
+      Turbo.visit(location, {})
+    }
+  })
+}
+
+function Initialize() {
+  // We obviously have javascript enabled.
+  $("html").removeClass("no-js")
+
+  // Initialize the GUI.
+  Alchemy.GUI.init()
+
+  // Fade all growl notifications.
+  if ($("#flash_notices").length > 0) {
+    Alchemy.Growler.fade()
+  }
+
+  // Add observer for please wait overlay.
+  $(".please_wait")
+    .not("*[data-alchemy-confirm]")
+    .on("click", Alchemy.pleaseWaitOverlay)
+
+  // Hack for enabling tab focus for <a>'s styled as button.
+  $("a.button").attr({ tabindex: 0 })
+
+  // Locale select handler
+  selectHandler("change_locale", "admin_locale", true)
+
+  // Site select handler
+  selectHandler("change_site", "site_id")
+
+  // Submit forms of selects with `data-autosubmit="true"`
+  $('select[data-auto-submit="true"]').on("change", function () {
+    $(this.form).submit()
+  })
+
+  // Attaches the image loader on all images
+  Alchemy.ImageLoader("#main_content")
+
+  // Override the filter of keymaster.js so we can blur the fields on esc key.
+  key.filter = function (event) {
+    let tagName = (event.target || event.srcElement).tagName
+    return (
+      key.isPressed("esc") ||
+      !(tagName === "INPUT" || tagName === "SELECT" || tagName === "TEXTAREA")
+    )
+  }
+}
+
+export default Initialize

data/app/javascript/alchemy_admin/locales/en.js

@@ -0,0 +1,31 @@
+export const en = {
+  allowed_chars: "of %{count} chars",
+  cancel: "Cancel",
+  cancelled: "Cancelled",
+  click_to_edit: "click to edit",
+  complete: "Complete",
+  element_dirty_notice:
+    "This element has unsaved changes. Do you really want to fold it?",
+  help: "Help",
+  ok: "Ok",
+  page_dirty_notice:
+    "You have unsaved changes on this page. They will be lost if you continue.",
+  page_found: "Page found",
+  pages_found: "Pages found",
+  url_validation_failed: "The url has no valid format.",
+  warning: "Warning!",
+  "File is too large": "File is too large",
+  "File is too small": "File is too small",
+  "File type not allowed": "File type not allowed",
+  "Maximum number of files exceeded": "Maximum number of files exceeded",
+  "Uploaded bytes exceed file size": "Uploaded bytes exceed file size",
+  "Abort upload": "Abort upload",
+  "Cancel all uploads": "Cancel all uploads",
+  Close: "Close",
+  formats: {
+    datetime: "Y-m-d H:i",
+    date: "Y-m-d",
+    time: "H:i",
+    time_24hr: false
+  }
+}

data/app/javascript/alchemy_admin/picture_editors.js

@@ -4,7 +4,7 @@ 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>'
+const IMAGE_PLACEHOLDER = '<i class="icon ri-image-line ri-fw"></i>'
 const THUMBNAIL_SIZE = "160x120"
 
 class PictureEditor {
@@ -93,7 +93,7 @@ class PictureEditor {
     this.pictureIdField.value = ""
     this.image = null
     this.cropLink.classList.add("disabled")
-    Alchemy.setElementDirty(this.container.closest(".element-editor"))
+    this.container.closest(".element-editor").setDirty()
   }
 
   updateCropLink() {

data/app/javascript/alchemy_admin/picture_selector.js

@@ -0,0 +1,38 @@
+import { on } from "alchemy_admin/utils/events"
+
+/**
+ * Multiple picture select handler for the picture archive.
+ */
+export default function PictureSelector() {
+  const selectedItemTools = document.querySelector(".selected_item_tools")
+  const checkedInputs = () =>
+    document.querySelectorAll("#picture_archive input:checked")
+
+  // 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"
+
+    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()
+
+    Alchemy.openDialog(url, {
+      title: event.target.title,
+      size: "400x295"
+    })
+  })
+}

data/app/javascript/alchemy_admin/please_wait_overlay.js

@@ -0,0 +1,8 @@
+/**
+ * To show the "Please wait" overlay.
+ * Pass false to hide it.
+ * @param {boolean} show
+ */
+export default function pleaseWaitOverlay(show = true) {
+  document.querySelector("alchemy-overlay").show = !!show
+}

data/app/javascript/alchemy_admin/sortable_elements.js

@@ -0,0 +1,78 @@
+import Sortable from "sortablejs"
+import { post } from "alchemy_admin/utils/ajax"
+
+const SORTABLE_OPTIONS = {
+  draggable: ".element-editor",
+  handle: ".element-handle",
+  ghostClass: "dragged",
+  animation: 150,
+  swapThreshold: 0.65,
+  easing: "cubic-bezier(1, 0, 0, 1)"
+}
+
+function onStart(event) {
+  const name = event.item.dataset.elementName
+  document
+    .querySelectorAll(`[data-droppable-elements~="${name}"]`)
+    .forEach((dropzone) => dropzone.classList.add("droppable-elements"))
+}
+
+function onSort(event) {
+  const item = event.item
+  const parentElement = event.to.parentElement.closest(".element-editor")
+  const params = {
+    element_id: item.dataset.elementId,
+    position: event.newIndex + 1
+  }
+
+  if (parentElement) {
+    params.parent_element_id = parentElement.dataset.elementId
+  }
+
+  post(Alchemy.routes.order_admin_elements_path, params).then((response) => {
+    const data = response.data
+    Alchemy.growl(data.message)
+    Alchemy.PreviewWindow.refresh()
+    item.updateTitle(data.preview_text)
+  })
+}
+
+function onEnd() {
+  const dropzones = document.querySelectorAll("[data-droppable-elements]")
+  dropzones.forEach((dropzone) =>
+    dropzone.classList.remove("droppable-elements")
+  )
+}
+
+function createSortable(element, options = {}) {
+  const group = {
+    name: element.dataset.elementName,
+    put(to, _from, item) {
+      return to.el.dataset.droppableElements
+        .split(" ")
+        .includes(item.dataset.elementName)
+    }
+  }
+  new Sortable(element, {
+    ...SORTABLE_OPTIONS,
+    ...options,
+    onStart,
+    onSort,
+    onEnd,
+    group
+  })
+}
+
+export default function SortableElements(selector) {
+  if (selector == null) selector = ".sortable-elements"
+
+  const sortable_areas = document.querySelectorAll(selector, {
+    direction: "vertical"
+  })
+
+  sortable_areas.forEach((element) => createSortable(element))
+
+  document.querySelectorAll(".nested-elements").forEach((nestedElement) => {
+    createSortable(nestedElement)
+  })
+}

data/app/javascript/alchemy_admin/spinner.js

@@ -0,0 +1,36 @@
+import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
+
+export default class Spinner {
+  constructor(size, color = "currentColor") {
+    this.size = size
+    this.color = color
+    this.spinner = undefined
+  }
+
+  /**
+   * @returns {HTMLElement|undefined}
+   */
+  get el() {
+    return this.spinner
+  }
+  /**
+   * @param {HTMLElement|undefined} parent
+   */
+  spin(parent) {
+    if (typeof parent === "undefined") {
+      parent = document.body
+    }
+    this.spinner = createHtmlElement(
+      `<alchemy-spinner size="${this.size}" color="${this.color}"></alchemy-spinner>`
+    )
+    parent.append(this.spinner)
+    return this
+  }
+
+  stop() {
+    if (this.spinner) {
+      this.spinner.remove()
+      this.spinner = undefined
+    }
+  }
+}

data/app/javascript/alchemy_admin/tags_autocomplete.js

@@ -0,0 +1,46 @@
+function createSearchChoice(term, data) {
+  if (
+    $(data).filter(function () {
+      return this.text.localeCompare(term) === 0
+    }).length === 0
+  ) {
+    return {
+      id: term,
+      text: term
+    }
+  }
+}
+
+function initSelection(element, callback) {
+  const data = []
+  $(element.val().split(",")).each(function () {
+    data.push({
+      id: this.trim(),
+      text: this
+    })
+  })
+  callback(data)
+}
+
+export default function TagsAutocomplete(scope) {
+  const field = $("[data-autocomplete]", scope)
+  const url = field.data("autocomplete")
+  field.select2({
+    tags: true,
+    tokenSeparators: [","],
+    minimumInputLength: 1,
+    openOnEnter: false,
+    createSearchChoice,
+    ajax: {
+      url,
+      dataType: "json",
+      data: (term) => {
+        return { term }
+      },
+      results: (data) => {
+        return { results: data }
+      }
+    },
+    initSelection
+  })
+}

data/app/javascript/alchemy_admin/utils/ajax.js

@@ -24,7 +24,7 @@ function buildPromise(xhr) {
   })
 }
 
-function getToken() {
+export function getToken() {
   const metaTag = document.querySelector('meta[name="csrf-token"]')
   return metaTag.attributes.content.textContent
 }
@@ -37,11 +37,11 @@ export function patch(url, data) {
   return ajax("PATCH", url, data)
 }
 
-export function post(url, data) {
-  return ajax("POST", url, data)
+export function post(url, data, accept = "application/json") {
+  return ajax("POST", url, data, accept)
 }
 
-export default function ajax(method, path, data) {
+export default function ajax(method, path, data, accept = "application/json") {
   const xhr = new XMLHttpRequest()
   const promise = buildPromise(xhr)
   const url = new URL(window.location.origin + path)
@@ -52,7 +52,8 @@ export default function ajax(method, path, data) {
 
   xhr.open(method, url.toString())
   xhr.setRequestHeader("Content-type", "application/json; charset=utf-8")
-  xhr.setRequestHeader("Accept", "application/json")
+  xhr.setRequestHeader("Accept", accept)
+  xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
   xhr.setRequestHeader("X-CSRF-Token", getToken())
 
   if (data && method.toLowerCase() !== "get") {

data/app/javascript/alchemy_admin/utils/dom_helpers.js

@@ -0,0 +1,20 @@
+/**
+ * create a HTML element
+ * @param {string} text
+ * @returns {HTMLElement}
+ */
+export function createHtmlElement(text) {
+  const element = document.createElement("template")
+  element.innerHTML = text
+  return element.content.children[0]
+}
+
+/**
+ * wrap element with wrappingElement
+ * @param {HTMLElement} element
+ * @param {HTMLElement} wrappingElement
+ */
+export function wrap(element, wrappingElement) {
+  element.replaceWith(wrappingElement)
+  wrappingElement.appendChild(element)
+}

data/app/javascript/alchemy_admin/utils/format.js

@@ -0,0 +1,11 @@
+export function formatFileSize(bytes) {
+  let exponent = bytes === 0 ? 0 : Math.floor(Math.log(bytes) / Math.log(1024))
+
+  // prevent format higher than GB
+  if (exponent > 3) {
+    exponent = 3
+  }
+
+  let value = (bytes / Math.pow(1024, exponent)).toFixed(2)
+  return value + " " + ["B", "kB", "MB", "GB"][exponent]
+}

data/app/javascript/alchemy_admin/utils/string_conversions.js

@@ -0,0 +1,10 @@
+/**
+ * convert dashes and underscore strings into camelCase strings
+ * @param {string} str
+ * @returns {string}
+ */
+export function toCamelCase(str) {
+  return str
+    .split(/-|_/)
+    .reduce((a, b) => a + b.charAt(0).toUpperCase() + b.slice(1))
+}

data/app/javascript/alchemy_admin.js

@@ -1,17 +1,69 @@
+import "@ungap/custom-elements"
 import "@hotwired/turbo-rails"
+import Rails from "@rails/ujs"
 
-import translate from "alchemy_admin/i18n"
-import translationData from "alchemy_admin/translations"
-import fileEditors from "alchemy_admin/file_editors"
+import GUI from "alchemy_admin/gui"
+import { translate } from "alchemy_admin/i18n"
+import Dirty from "alchemy_admin/dirty"
 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 Initializer from "alchemy_admin/initializer"
+import pictureSelector from "alchemy_admin/picture_selector"
+import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
 import Sitemap from "alchemy_admin/sitemap"
-import Tinymce from "alchemy_admin/tinymce"
+import SortableElements from "alchemy_admin/sortable_elements"
+import Spinner from "alchemy_admin/spinner"
 import PagePublicationFields from "alchemy_admin/page_publication_fields"
 
+// Setting jQueryUIs global animation duration to something more snappy
+$.fx.speeds._default = 400
+
+// Web Components
+import "alchemy_admin/components/button"
+import "alchemy_admin/components/char_counter"
+import "alchemy_admin/components/datepicker"
+import "alchemy_admin/components/dialog_link"
+import "alchemy_admin/components/element_editor"
+import "alchemy_admin/components/ingredient_group"
+import "alchemy_admin/components/link_buttons"
+import "alchemy_admin/components/node_select"
+import "alchemy_admin/components/uploader"
+import "alchemy_admin/components/overlay"
+import "alchemy_admin/components/page_select"
+import "alchemy_admin/components/select"
+import "alchemy_admin/components/spinner"
+import "alchemy_admin/components/tinymce"
+import "@shoelace/progress-bar"
+import "@shoelace/switch"
+import "@shoelace/tab"
+import "@shoelace/tab-group"
+import "@shoelace/tab-panel"
+import "@shoelace/tooltip"
+
+import { setDefaultAnimation } from "@shoelace/animation-registry"
+
+// Change the default animation for all dialogs
+setDefaultAnimation("tooltip.show", {
+  keyframes: [
+    { transform: "translateY(10px)", opacity: "0" },
+    { transform: "translateY(0)", opacity: "1" }
+  ],
+  options: {
+    duration: 100
+  }
+})
+
+setDefaultAnimation("tooltip.hide", {
+  keyframes: [
+    { transform: "translateY(0)", opacity: "1" },
+    { transform: "translateY(10px)", opacity: "0" }
+  ],
+  options: {
+    duration: 100
+  }
+})
+
 // Global Alchemy object
 if (typeof window.Alchemy === "undefined") {
   window.Alchemy = {}
@@ -19,16 +71,21 @@ if (typeof window.Alchemy === "undefined") {
 
 // 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,
+  ...Dirty,
+  GUI,
+  t: translate, // Global utility method for translating a given string
   ImageLoader: ImageLoader.init,
   ImageCropper,
+  Initializer,
   IngredientAnchorLink,
-  Datepicker,
+  pictureSelector,
+  pleaseWaitOverlay,
   Sitemap,
-  Tinymce,
+  SortableElements,
+  Spinner,
   PagePublicationFields
 })
+
+Rails.start()
+
+$(document).on("turbo:load", Initializer)

data/app/javascript/menubar.js

@@ -0,0 +1,10 @@
+class Menubar extends HTMLElement {
+  constructor() {
+    super()
+    const template = this.querySelector("template")
+    const attachedShadowRoot = this.attachShadow({ mode: "open" })
+    attachedShadowRoot.appendChild(template.content.cloneNode(true))
+  }
+}
+
+customElements.define("alchemy-menubar", Menubar)