#{Alchemy.t(:ingredient_validations_headline)}
".html_safe - end end end end diff --git a/app/decorators/alchemy/element_editor.rb b/app/decorators/alchemy/element_editor.rb index b9a967fae7..4668c76136 100644 --- a/app/decorators/alchemy/element_editor.rb +++ b/app/decorators/alchemy/element_editor.rb @@ -65,8 +65,6 @@ def css_classes # Tells us, if we should show the element footer and form inputs. def editable? - return false if folded? - ingredient_definitions.any? || taggable? end diff --git a/app/javascript/alchemy_admin.js b/app/javascript/alchemy_admin.js index e2f450b744..25acac0db9 100644 --- a/app/javascript/alchemy_admin.js +++ b/app/javascript/alchemy_admin.js @@ -5,9 +5,7 @@ import Rails from "@rails/ujs" import GUI from "alchemy_admin/gui" import { translate } from "alchemy_admin/i18n" import Dirty from "alchemy_admin/dirty" -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 Initializer from "alchemy_admin/initializer" @@ -25,6 +23,8 @@ 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/node_select" import "alchemy_admin/components/overlay" import "alchemy_admin/components/page_select" @@ -46,8 +46,6 @@ Object.assign(Alchemy, { ...Dirty, GUI, t: translate, // Global utility method for translating a given string - fileEditors, - pictureEditors, ImageLoader: ImageLoader.init, ImageCropper, Initializer, diff --git a/app/javascript/alchemy_admin/components/button.js b/app/javascript/alchemy_admin/components/button.js index 8a2c1db3a7..3196f12769 100644 --- a/app/javascript/alchemy_admin/components/button.js +++ b/app/javascript/alchemy_admin/components/button.js @@ -3,7 +3,19 @@ import Spinner from "../spinner" class Button extends HTMLButtonElement { connectedCallback() { if (this.form) { - this.form.addEventListener("submit", (event) => { + 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) { @@ -12,15 +24,10 @@ class Button extends HTMLButtonElement { } else { this.disable() } - }) - - if (this.form.dataset.remote == "true") { - this.form.addEventListener("ajax:complete", () => { - this.enable() - }) - } - } else { - console.warn("No form for button found!", this) + break + case "ajax:complete": + this.enable() + break } } diff --git a/app/javascript/alchemy_admin/components/datepicker.js b/app/javascript/alchemy_admin/components/datepicker.js index df20bf6e80..63e0234abe 100644 --- a/app/javascript/alchemy_admin/components/datepicker.js +++ b/app/javascript/alchemy_admin/components/datepicker.js @@ -24,7 +24,7 @@ class Datepicker extends AlchemyHTMLElement { noCalendar: this.inputType === "time", time_24hr: translate("formats.time_24hr"), onValueUpdate(_selectedDates, _dateStr, instance) { - Alchemy.setElementDirty(instance.element.closest(".element-editor")) + instance.element.closest("alchemy-element-editor").setDirty() } } diff --git a/app/javascript/alchemy_admin/components/element_editor.js b/app/javascript/alchemy_admin/components/element_editor.js new file mode 100644 index 0000000000..aa128047ed --- /dev/null +++ b/app/javascript/alchemy_admin/components/element_editor.js @@ -0,0 +1,543 @@ +import TagsAutocomplete from "alchemy_admin/tags_autocomplete" +import ImageLoader from "alchemy_admin/image_loader" +import fileEditors from "alchemy_admin/file_editors" +import pictureEditors from "alchemy_admin/picture_editors" +import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link" +import { post } from "alchemy_admin/utils/ajax" +import { createHtmlElement } from "../utils/dom_helpers" + +export class ElementEditor extends HTMLElement { + constructor() { + super() + + // Add event listeners + this.addEventListener("click", this) + // Triggered by child elements + this.addEventListener("alchemy:element-update-title", this) + this.addEventListener("alchemy:element-dirty", this) + this.addEventListener("alchemy:element-clean", this) + // We use of @rails/ujs for Rails remote forms + this.addEventListener("ajax:success", this) + // Dirty observer + this.addEventListener("change", this) + + this.header?.addEventListener("dblclick", () => { + this.toggle() + }) + this.toggleButton?.addEventListener("click", (evt) => { + const elementEditor = evt.target.closest("alchemy-element-editor") + if (elementEditor === this) { + this.toggle() + } + }) + } + + connectedCallback() { + // The placeholder while be being dragged is empty. + if (this.classList.contains("ui-sortable-placeholder")) { + return + } + + // Init GUI elements + ImageLoader.init(this) + fileEditors( + `#${this.id} .ingredient-editor.file, #${this.id} .ingredient-editor.audio, #${this.id} .ingredient-editor.video` + ) + pictureEditors(`#${this.id} .ingredient-editor.picture`) + TagsAutocomplete(this) + } + + handleEvent(event) { + switch (event.type) { + case "click": + const elementEditor = event.target.closest("alchemy-element-editor") + if (elementEditor === this) { + this.onClickElement() + } + break + case "ajax:success": + if (event.target === this.body) { + const responseJSON = event.detail[0] + event.stopPropagation() + this.onSaveElement(responseJSON) + } + break + case "alchemy:element-update-title": + if (event.target == this.firstChild) { + this.setTitle(event.detail.title) + } + break + case "alchemy:element-dirty": + if (event.target !== this) { + this.setDirty() + } + break + case "alchemy:element-clean": + if (event.target !== this) { + this.setClean() + } + break + case "change": + event.stopPropagation() + event.target.classList.add("dirty") + this.setDirty() + break + } + } + + /** + * Scrolls to and highlights element + * Expands if collapsed + * Also chooses the right fixed elements tab, if necessary. + * Can be triggered through custom event 'FocusElementEditor.Alchemy' + * Used by the elements on click events in the preview frame. + */ + async focusElement() { + // Select tab if necessary + if (document.querySelector("#fixed-elements")) { + await this.selectTabForElement() + } + // Expand if necessary + await this.expand() + this.selectElement(true) + } + + focusElementPreview() { + Alchemy.PreviewWindow.postMessage({ + message: "Alchemy.focusElement", + element_id: this.elementId + }) + } + + onClickElement() { + this.selectElement() + this.focusElementPreview() + } + + /** + * Sets the element to saved state + * Updates title + * Shows error messages if ingredient validations fail + * @argument {JSON} data + */ + onSaveElement(data) { + // JS event bubbling will also update the parents element quote. + this.setClean() + // Reset errors that might be visible from last save attempt + this.errorsDisplay.innerHTML = "" + this.body + .querySelectorAll(".ingredient-editor") + .forEach((el) => el.classList.remove("validation_failed")) + // If validation failed + if (data.errors) { + const warning = data.warning + // Create error messages + data.errors.forEach((message) => { + this.errorsDisplay.append(createHtmlElement(`