Skip to content

Commit

Permalink
Use Turbo Frame for elements_window
Browse files Browse the repository at this point in the history
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
tvdeyen committed Mar 22, 2024
1 parent d8769e2 commit e5f6f9c
Show file tree
Hide file tree
Showing 10 changed files with 167 additions and 189 deletions.
1 change: 0 additions & 1 deletion app/assets/javascripts/alchemy/admin.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
//= require alchemy/templates
//= require alchemy/alchemy.dialog
//= require alchemy/alchemy.confirm_dialog
//= require alchemy/alchemy.elements_window
//= require alchemy/alchemy.fixed_elements
//= require alchemy/alchemy.image_overlay
//= require alchemy/alchemy.link_dialog
Expand Down
108 changes: 0 additions & 108 deletions app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee

This file was deleted.

3 changes: 2 additions & 1 deletion app/assets/stylesheets/alchemy/elements.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
#alchemy_elements_window {
alchemy-elements-window {
position: absolute;
right: 0;
top: $top-menu-height;
z-index: 20;
display: block;
width: calc(100vw - #{$collapsed-main-menu-width});
height: calc(100vh - #{$top-menu-height});
border-left: $default-border;
Expand Down
1 change: 1 addition & 0 deletions app/javascript/alchemy_admin.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import "alchemy_admin/components/clipboard_button"
import "alchemy_admin/components/datepicker"
import "alchemy_admin/components/dialog_link"
import "alchemy_admin/components/element_editor"
import "alchemy_admin/components/elements_window"
import "alchemy_admin/components/message"
import "alchemy_admin/components/growl"
import "alchemy_admin/components/icon"
Expand Down
86 changes: 86 additions & 0 deletions app/javascript/alchemy_admin/components/elements_window.js
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)
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<%= f.hidden_field :name %>
<%= f.hidden_field :page_version_id, value: element.page_version_id %>
<%= f.hidden_field :parent_element_id, value: element.id %>
<button class="add-nestable-element-button" is="alchemy-button">
<button class="add-nestable-element-button" is="alchemy-button" data-turbo="false">
<%= Alchemy.t(:add_nested_element, name: Alchemy.t(nestable_element.to_sym, scope: 'element_names')) %>
</button>
<% end %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/alchemy/admin/elements/_footer.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
</p>
<% end %>

<button type="submit" form="element_<%= element.id %>_form" is="alchemy-button">
<button type="submit" form="element_<%= element.id %>_form" is="alchemy-button" data-turbo="false">
<%= Alchemy.t(:save) %>
</button>
</div>
3 changes: 2 additions & 1 deletion app/views/alchemy/admin/elements/_toolbar.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@
render_icon('delete-bin-2'),
Alchemy.t(:confirm_to_delete_element),
alchemy.admin_element_path(element),
class: "icon_button"
class: "icon_button",
data: {turbo: false}
) -%>
</sl-tooltip>
<sl-tooltip content="<%= element.public? ? Alchemy.t(:hide_element) : Alchemy.t(:show_element) %>" placement="top-end">
Expand Down
104 changes: 70 additions & 34 deletions app/views/alchemy/admin/elements/index.html.erb
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 %>
Loading

0 comments on commit e5f6f9c

Please sign in to comment.