-
-
Notifications
You must be signed in to change notification settings - Fork 315
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
For now we need to disable the submit buttons inside, because we still use Rails UJS and the remote forms feature that uses js.erb responses from the controller. Those need to be refactored into Turbo Streams, but this is too much for now.
- Loading branch information
Showing
10 changed files
with
167 additions
and
189 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
108 changes: 0 additions & 108 deletions
108
app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
86 changes: 86 additions & 0 deletions
86
app/javascript/alchemy_admin/components/elements_window.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| class ElementsWindow extends HTMLElement { | ||
| #visible = true | ||
|
|
||
| constructor() { | ||
| super() | ||
| this.#attachEvents() | ||
| } | ||
|
|
||
| connectedCallback() { | ||
| document.body.classList.add("elements-window-visible") | ||
| this.toggleButton?.addEventListener("click", (evt) => { | ||
| evt.preventDefault() | ||
| this.toggle() | ||
| }) | ||
| if (window.location.hash) { | ||
| document | ||
| .querySelector(window.location.hash) | ||
| ?.trigger("FocusElementEditor.Alchemy") | ||
| } | ||
| Alchemy.SortableElements() | ||
| } | ||
|
|
||
| collapseAllElements() { | ||
| this.querySelectorAll( | ||
| "alchemy-element-editor:not([compact]):not([fixed])" | ||
| ).forEach((editor) => editor.collapse()) | ||
| } | ||
|
|
||
| toggle() { | ||
| if (this.#visible) { | ||
| this.hide() | ||
| } else { | ||
| this.show() | ||
| } | ||
| } | ||
|
|
||
| show() { | ||
| document.body.classList.add("elements-window-visible") | ||
| this.#visible = true | ||
| this.toggleButton.closest("sl-tooltip").content = Alchemy.t("Hide elements") | ||
| this.toggleButton | ||
| .querySelector("alchemy-icon") | ||
| .setAttribute("name", "menu-unfold") | ||
| } | ||
|
|
||
| hide() { | ||
| document.body.classList.remove("elements-window-visible") | ||
| this.#visible = false | ||
| this.toggleButton.closest("sl-tooltip").content = Alchemy.t("Show elements") | ||
| this.toggleButton | ||
| .querySelector("alchemy-icon") | ||
| .setAttribute("name", "menu-fold") | ||
| } | ||
|
|
||
| get collapseButton() { | ||
| return this.querySelector("#collapse-all-elements-button") | ||
| } | ||
|
|
||
| get toggleButton() { | ||
| return document.querySelector("#element_window_button") | ||
| } | ||
|
|
||
| #attachEvents() { | ||
| this.collapseButton?.addEventListener("click", () => { | ||
| this.collapseAllElements() | ||
| }) | ||
| window.addEventListener("message", (event) => { | ||
| const data = event.data | ||
| if (data?.message == "Alchemy.focusElementEditor") { | ||
| const element = document.getElementById(`element_${data.element_id}`) | ||
| this.show() | ||
| element?.focusElement() | ||
| } | ||
| }) | ||
| document.body.addEventListener("click", (evt) => { | ||
| if (!evt.target.closest("alchemy-element-editor")) { | ||
| this.querySelectorAll("alchemy-element-editor").forEach((editor) => { | ||
| editor.classList.remove("selected") | ||
| }) | ||
| Alchemy.PreviewWindow.postMessage({ message: "Alchemy.blurElements" }) | ||
| } | ||
| }) | ||
| } | ||
| } | ||
|
|
||
| customElements.define("alchemy-elements-window", ElementsWindow) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,72 @@ | ||
| <% if @fixed_elements.any? %> | ||
| <sl-tab-group id="fixed-elements"> | ||
| <sl-tab slot="nav" panel="main-content-elements"> | ||
| <%= Alchemy.t(:main_content) %> | ||
| </sl-tab> | ||
| <% @fixed_elements.each do |element| %> | ||
| <sl-tab slot="nav" panel="fixed-element-<%= element.id %>"> | ||
| <%= element.display_name %> | ||
| </sl-tab> | ||
| <%= turbo_frame_tag "alchemy_elements_window" do %> | ||
| <alchemy-elements-window> | ||
| <div class="elements-window-toolbar"> | ||
| <%= toolbar_button( | ||
| url: alchemy.new_admin_element_path(page_version_id: @page_version.id), | ||
| icon: :add, | ||
| hotkey: "alt+n", | ||
| label: Alchemy.t("New Element"), | ||
| dialog_options: { | ||
| title: Alchemy.t("New Element"), | ||
| size: "320x125" | ||
| }, | ||
| if_permitted_to: [:create, Alchemy::Element] | ||
| ) %> | ||
| <%= toolbar_button( | ||
| url: alchemy.admin_clipboard_path(remarkable_type: "elements"), | ||
| label: Alchemy.t("Show clipboard"), | ||
| icon: :clipboard, | ||
| icon_style: clipboard_empty?("elements") ? "line" : "fill", | ||
| dialog_options: { | ||
| title: Alchemy.t("Clipboard"), | ||
| size: "400x305" | ||
| }, | ||
| link_options: { | ||
| id: "clipboard_button" | ||
| }, | ||
| if_permitted_to: [:show, :alchemy_clipboard] | ||
| ) %> | ||
| <sl-tooltip content="<%= Alchemy.t("Collapse all elements") %>" placement="top-end" class="right"> | ||
| <button id="collapse-all-elements-button" class="icon_button"> | ||
| <alchemy-icon name="contract-up-down"></alchemy-icon> | ||
| </button> | ||
| </sl-tooltip> | ||
| </div> | ||
| <% if @fixed_elements.any? %> | ||
| <sl-tab-group id="fixed-elements"> | ||
| <sl-tab slot="nav" panel="main-content-elements"> | ||
| <%= Alchemy.t(:main_content) %> | ||
| </sl-tab> | ||
| <% @fixed_elements.each do |element| %> | ||
| <sl-tab slot="nav" panel="fixed-element-<%= element.id %>"> | ||
| <%= element.display_name %> | ||
| </sl-tab> | ||
| <% end %> | ||
| <sl-tab-panel | ||
| name="main-content-elements" | ||
| class="sortable-elements scrollable-elements" | ||
| data-droppable-elements="<%= @page.element_definition_names.join(' ') %>" | ||
| data-element-name="main-content-elements" | ||
| id="main-content-elements" | ||
| style="--padding: 0" | ||
| > | ||
| <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %> | ||
| </sl-tab-panel> | ||
| <% @fixed_elements.each do |element| %> | ||
| <sl-tab-panel name="fixed-element-<%= element.id %>" style="--padding: 0" class="scrollable-elements"> | ||
| <%= render Alchemy::ElementEditor.new(element) %> | ||
| </sl-tab-panel> | ||
| <% end %> | ||
| </sl-tab-group> | ||
| <% else %> | ||
| <div | ||
| id="main-content-elements" | ||
| class="sortable-elements scrollable-elements" | ||
| data-droppable-elements="<%= @page.element_definition_names.join(' ') %>" | ||
| data-element-name="main-content-elements" | ||
| > | ||
| <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %> | ||
|
Check notice Code scanning / Brakeman Render path contains parameter value. Note
Render path contains parameter value.
|
||
| </div> | ||
| <% end %> | ||
| <sl-tab-panel | ||
| name="main-content-elements" | ||
| class="sortable-elements scrollable-elements" | ||
| data-droppable-elements="<%= @page.element_definition_names.join(' ') %>" | ||
| data-element-name="main-content-elements" | ||
| id="main-content-elements" | ||
| style="--padding: 0" | ||
| > | ||
| <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %> | ||
| </sl-tab-panel> | ||
| <% @fixed_elements.each do |element| %> | ||
| <sl-tab-panel name="fixed-element-<%= element.id %>" style="--padding: 0" class="scrollable-elements"> | ||
| <%= render Alchemy::ElementEditor.new(element) %> | ||
| </sl-tab-panel> | ||
| <% end %> | ||
| </sl-tab-group> | ||
| <% else %> | ||
| <div | ||
| id="main-content-elements" | ||
| class="sortable-elements scrollable-elements" | ||
| data-droppable-elements="<%= @page.element_definition_names.join(' ') %>" | ||
| data-element-name="main-content-elements" | ||
| > | ||
| <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %> | ||
| </div> | ||
| </alchemy-elements-window> | ||
| <% end %> | ||
Oops, something went wrong.