-
-
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.
Merge pull request #2801 from AlchemyCMS/turbo-element-window-frame
Use Turbo Frame for Elements Window
- Loading branch information
Showing
10 changed files
with
164 additions
and
190 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
81 changes: 81 additions & 0 deletions
81
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,81 @@ | ||
| class ElementsWindow extends HTMLElement { | ||
| #visible = true | ||
|
|
||
| constructor() { | ||
| super() | ||
| this.#attachEvents() | ||
| } | ||
|
|
||
| connectedCallback() { | ||
| 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() { | ||
| this.#visible ? this.hide() : 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) } %> | ||
| </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.