Skip to content

Commit 04afa30

Browse files
tvdeyentvdeyen
committed
Migrate sitemap to custom elements
Replace the Handlebars-based sitemap implementation with web components and use Turbo Streams to replace the children.
1 parent cda346d commit 04afa30

File tree

19 files changed

+1050
-396
lines changed

19 files changed

+1050
-396
lines changed

‎app/assets/builds/alchemy/admin.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/components/alchemy/admin/page_node.html.erb‎

Lines changed: 158 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,159 +1,167 @@
1-
<li id="page_<%= @page.id %>" class="sitemap-item <%= @page.page_layout %>" data-slug="<%= @page.slug %>" data-restricted="<%= @page.restricted %>" data-page-id="<%= @page.id %>" data-folded="<%= @page.folded?(current_alchemy_user&.id) %>">
2-
<div class="sitemap_page<% @page.locked? ? ' locked' : '' %>" name="<%= @page.name%>">
3-
<div class="sitemap_left_images">
4-
<span class="page_folder"></span>
5-
<% if @page.definition.blank? %>
6-
<%= page_layout_missing_warning %>
7-
<% else %>
8-
<% if can?(:edit_content, @page) %>
9-
<span class="page-icon<%= @page.root? ? '' : ' handle' %>">
10-
<% if @page.locked? %>
11-
<sl-tooltip content="<%= Alchemy.t("This page is locked", name: @page.locker_name) %>" class="like-hint-tooltip" placement="bottom-start">
12-
<alchemy-icon name="file-edit" size="xl"></alchemy-icon>
13-
</sl-tooltip>
14-
<% else %>
15-
<alchemy-icon name="file" size="xl"></alchemy-icon>
16-
<% end %>
17-
</span>
1+
<alchemy-page-node data-page-id="<%= @page.id %>" data-folded="<%= @page.folded?(current_alchemy_user&.id) %>">
2+
<li id="page_<%= @page.id %>" class="sitemap-item <%= @page.page_layout %>" data-slug="<%= @page.slug %>" data-restricted="<%= @page.restricted %>" data-page-id="<%= @page.id %>">
3+
<div class="sitemap_page<% @page.locked? ? ' locked' : '' %>" name="<%= @page.name%>">
4+
<div class="sitemap_left_images">
5+
<% if @page.children.any? || @page.folded?(current_alchemy_user&.id) %>
6+
<a class="page_folder icon_button">
7+
<alchemy-icon name="<%= @page.folded?(current_alchemy_user&.id) ? 'arrow-right-s' : 'arrow-down-s' %>"></alchemy-icon>
8+
</a>
189
<% else %>
19-
<sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
20-
<alchemy-icon name="file-forbid" size="xl"></alchemy-icon>
21-
</sl-tooltip>
10+
<span class="page_folder"></span>
2211
<% end %>
23-
<% end %>
24-
</div>
25-
<div class="sitemap_sitename">
26-
<% if can?(:edit_content, @page) %>
27-
<%= link_to(
28-
@page.name,
29-
alchemy.edit_admin_page_path(@page),
30-
title: Alchemy.t(:edit_page),
31-
class: "sitemap_pagename_link"
32-
) %>
33-
<% else %>
34-
<%= content_tag("span", @page.name, class: "sitemap_pagename_link") %>
35-
<% end %>
36-
</div>
37-
<div class="sitemap_url" title="<%= @page.url_path %>">
38-
<%= @page.url_path %>
39-
</div>
40-
<div class="page_infos">
41-
<% if @page.locked? %>
42-
<span class="page_status locked">
43-
<alchemy-icon name="edit" size="1x"></alchemy-icon>
44-
<%= @page.status_title(:locked) %>
45-
</span>
46-
<% end %>
47-
<% if @page.restricted? %>
48-
<span class="page_status">
49-
<alchemy-icon name="lock" size="1x"></alchemy-icon>
50-
<%= @page.status_title(:restricted) %>
51-
</span>
52-
<% end %>
53-
<% unless @page.public? %>
54-
<span class="page_status">
55-
<alchemy-icon name="cloud-off" size="1x"></alchemy-icon>
56-
<%= @page.status_title(:public) %>
57-
</span>
58-
<% end %>
59-
</div>
60-
<div class="sitemap_right_tools">
61-
<% if can?(:info, @page) %>
62-
<sl-tooltip content="<%= Alchemy.t(:page_infos) %>">
63-
<%= link_to_dialog(
64-
render_icon("information"),
65-
alchemy.info_admin_page_path(@page),
66-
{
67-
title: Alchemy.t(:page_infos),
68-
size: "520x290"
69-
},
70-
class: "icon_button"
12+
<% if @page.definition.blank? %>
13+
<%= page_layout_missing_warning %>
14+
<% else %>
15+
<% if can?(:edit_content, @page) %>
16+
<span class="page-icon<%= @page.root? ? '' : ' handle' %>">
17+
<% if @page.locked? %>
18+
<sl-tooltip content="<%= Alchemy.t("This page is locked", name: @page.locker_name) %>" class="like-hint-tooltip" placement="bottom-start">
19+
<alchemy-icon name="file-edit" size="xl"></alchemy-icon>
20+
</sl-tooltip>
21+
<% else %>
22+
<alchemy-icon name="file" size="xl"></alchemy-icon>
23+
<% end %>
24+
</span>
25+
<% else %>
26+
<sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
27+
<alchemy-icon name="file-forbid" size="xl"></alchemy-icon>
28+
</sl-tooltip>
29+
<% end %>
30+
<% end %>
31+
</div>
32+
<div class="sitemap_sitename">
33+
<% if can?(:edit_content, @page) %>
34+
<%= link_to(
35+
@page.name,
36+
alchemy.edit_admin_page_path(@page),
37+
title: Alchemy.t(:edit_page),
38+
class: "sitemap_pagename_link"
7139
) %>
72-
</sl-tooltip>
73-
<% else %>
74-
<div class="sitemap_tool disabled">
75-
<sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
76-
<%= render_icon(:information) %>
40+
<% else %>
41+
<%= content_tag("span", @page.name, class: "sitemap_pagename_link") %>
42+
<% end %>
43+
</div>
44+
<div class="sitemap_url" title="<%= @page.url_path %>">
45+
<%= @page.url_path %>
46+
</div>
47+
<div class="page_infos">
48+
<% if @page.locked? %>
49+
<span class="page_status locked">
50+
<alchemy-icon name="edit" size="1x"></alchemy-icon>
51+
<%= @page.status_title(:locked) %>
52+
</span>
53+
<% end %>
54+
<% if @page.restricted? %>
55+
<span class="page_status">
56+
<alchemy-icon name="lock" size="1x"></alchemy-icon>
57+
<%= @page.status_title(:restricted) %>
58+
</span>
59+
<% end %>
60+
<% unless @page.public? %>
61+
<span class="page_status">
62+
<alchemy-icon name="cloud-off" size="1x"></alchemy-icon>
63+
<%= @page.status_title(:public) %>
64+
</span>
65+
<% end %>
66+
</div>
67+
<div class="sitemap_right_tools">
68+
<% if can?(:info, @page) %>
69+
<sl-tooltip content="<%= Alchemy.t(:page_infos) %>">
70+
<%= link_to_dialog(
71+
render_icon("information"),
72+
alchemy.info_admin_page_path(@page),
73+
{
74+
title: Alchemy.t(:page_infos),
75+
size: "520x290"
76+
},
77+
class: "icon_button"
78+
) %>
7779
</sl-tooltip>
78-
</div>
79-
<% end %>
80-
<% if can?(:configure, @page) %>
81-
<sl-tooltip content="<%= Alchemy.t(:edit_page_properties) %>">
82-
<%= link_to_dialog(
83-
render_icon("settings-3"),
84-
alchemy.configure_admin_page_path(@page),
85-
{
86-
title: Alchemy.t(:edit_page_properties),
87-
size: "500x680"
88-
},
89-
class: "icon_button"
90-
) %>
91-
</sl-tooltip>
92-
<% else %>
93-
<div class="sitemap_tool disabled">
94-
<sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
95-
<%= render_icon("settings-3") %>
80+
<% else %>
81+
<div class="sitemap_tool disabled">
82+
<sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
83+
<%= render_icon(:information) %>
84+
</sl-tooltip>
85+
</div>
86+
<% end %>
87+
<% if can?(:configure, @page) %>
88+
<sl-tooltip content="<%= Alchemy.t(:edit_page_properties) %>">
89+
<%= link_to_dialog(
90+
render_icon("settings-3"),
91+
alchemy.configure_admin_page_path(@page),
92+
{
93+
title: Alchemy.t(:edit_page_properties),
94+
size: "500x680"
95+
},
96+
class: "icon_button"
97+
) %>
9698
</sl-tooltip>
97-
</div>
98-
<% end %>
99-
<% if can?(:copy, @page) %>
100-
<sl-tooltip content="<%= Alchemy.t(:copy_page) %>">
101-
<%= button_to(
102-
render_icon("file-copy"),
103-
alchemy.insert_admin_clipboard_path(
104-
remarkable_type: :pages,
105-
remarkable_id: @page,
106-
),
107-
"data-turbo-method": :post,
108-
class: "icon_button"
109-
) %>
110-
</sl-tooltip>
111-
<% else %>
112-
<div class="sitemap_tool disabled">
113-
<sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
114-
<%= render_icon("file-copy") %>
99+
<% else %>
100+
<div class="sitemap_tool disabled">
101+
<sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
102+
<%= render_icon("settings-3") %>
103+
</sl-tooltip>
104+
</div>
105+
<% end %>
106+
<% if can?(:copy, @page) %>
107+
<sl-tooltip content="<%= Alchemy.t(:copy_page) %>">
108+
<%= button_to(
109+
render_icon("file-copy"),
110+
alchemy.insert_admin_clipboard_path(
111+
remarkable_type: :pages,
112+
remarkable_id: @page,
113+
),
114+
"data-turbo-method": :post,
115+
class: "icon_button"
116+
) %>
115117
</sl-tooltip>
116-
</div>
117-
<% end %>
118-
<% if can?(:destroy, @page) %>
119-
<sl-tooltip content="<%= Alchemy.t(:delete_page) %>">
120-
<%= link_to_confirm_dialog(
121-
render_icon("delete-bin-2"),
122-
Alchemy.t(:confirm_to_delete_page),
123-
alchemy.admin_page_path(@page),
124-
class: "icon_button"
125-
) %>
126-
</sl-tooltip>
127-
<% else %>
128-
<div class="sitemap_tool disabled">
129-
<sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
130-
<%= render_icon("delete-bin-2") %>
118+
<% else %>
119+
<div class="sitemap_tool disabled">
120+
<sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
121+
<%= render_icon("file-copy") %>
122+
</sl-tooltip>
123+
</div>
124+
<% end %>
125+
<% if can?(:destroy, @page) %>
126+
<sl-tooltip content="<%= Alchemy.t(:delete_page) %>">
127+
<%= link_to_confirm_dialog(
128+
render_icon("delete-bin-2"),
129+
Alchemy.t(:confirm_to_delete_page),
130+
alchemy.admin_page_path(@page),
131+
class: "icon_button"
132+
) %>
131133
</sl-tooltip>
132-
</div>
133-
<% end %>
134-
<% if can?(:create, @page) %>
135-
<sl-tooltip content="<%= Alchemy.t(:create_page) %>">
136-
<%= link_to_dialog(
137-
render_icon(:add),
138-
alchemy.new_admin_page_path(parent_id: @page.id),
139-
{
140-
title: Alchemy.t(:create_page),
141-
size: "340x165",
142-
overflow: true
143-
},
144-
class: "icon_button"
145-
) %>
146-
</sl-tooltip>
147-
<% else %>
148-
<div class="sitemap_tool disabled">
149-
<sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
150-
<%= render_icon("file-add") %>
134+
<% else %>
135+
<div class="sitemap_tool disabled">
136+
<sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
137+
<%= render_icon("delete-bin-2") %>
138+
</sl-tooltip>
139+
</div>
140+
<% end %>
141+
<% if can?(:create, @page) %>
142+
<sl-tooltip content="<%= Alchemy.t(:create_page) %>">
143+
<%= link_to_dialog(
144+
render_icon(:add),
145+
alchemy.new_admin_page_path(parent_id: @page.id),
146+
{
147+
title: Alchemy.t(:create_page),
148+
size: "340x165",
149+
overflow: true
150+
},
151+
class: "icon_button"
152+
) %>
151153
</sl-tooltip>
152-
</div>
153-
<% end %>
154+
<% else %>
155+
<div class="sitemap_tool disabled">
156+
<sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
157+
<%= render_icon("file-add") %>
158+
</sl-tooltip>
159+
</div>
160+
<% end %>
161+
</div>
154162
</div>
155-
</div>
156-
<ul id="page_<%= @page.id %>_children" class="children" data-parent-id="<%= @page.id %>">
157-
<%= render Alchemy::Admin::PageNode.with_collection(@page.children) %>
158-
</ul>
159-
</li>
163+
<ul id="page_<%= @page.id %>_children" class="children<%= ' hidden' if @page.folded?(current_alchemy_user&.id) %>" data-parent-id="<%= @page.id %>">
164+
<%= render Alchemy::Admin::PageNode.with_collection(@page.children) %>
165+
</ul>
166+
</li>
167+
</alchemy-page-node>

‎app/controllers/alchemy/admin/pages_controller.rb‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,8 +167,18 @@ def link
167167

168168
def fold
169169
# @page is fetched via before filter
170-
@page.fold!(current_alchemy_user.id, !@page.folded?(current_alchemy_user.id))
171-
render json: serialized_page_tree
170+
was_folded = @page.folded?(current_alchemy_user.id)
171+
@page.fold!(current_alchemy_user.id, !was_folded)
172+
173+
respond_to do |format|
174+
format.turbo_stream do
175+
if was_folded
176+
@children = @page.preloaded_children
177+
else
178+
head :ok
179+
end
180+
end
181+
end
172182
end
173183

174184
# Leaves the page editing mode and unlocks the page for other users

‎app/javascript/alchemy_admin.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import { growl } from "alchemy_admin/growler"
1515
import Initializer from "alchemy_admin/initializer"
1616
import { LinkDialog } from "alchemy_admin/link_dialog"
1717
import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
18-
import Sitemap from "alchemy_admin/sitemap"
1918
import Spinner from "alchemy_admin/spinner"
2019
import PagePublicationFields from "alchemy_admin/page_publication_fields"
2120
import { reloadPreview } from "alchemy_admin/components/preview_window"
@@ -45,7 +44,6 @@ Object.assign(Alchemy, {
4544
growl,
4645
LinkDialog,
4746
pleaseWaitOverlay,
48-
Sitemap,
4947
Spinner,
5048
PagePublicationFields,
5149
reloadPreview

‎app/javascript/alchemy_admin/components/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,12 @@ import "alchemy_admin/components/link_buttons"
2323
import "alchemy_admin/components/node_select"
2424
import "alchemy_admin/components/uploader"
2525
import "alchemy_admin/components/overlay"
26+
import "alchemy_admin/components/page_node"
2627
import "alchemy_admin/components/page_select"
2728
import "alchemy_admin/components/picture_thumbnail"
2829
import "alchemy_admin/components/preview_window"
2930
import "alchemy_admin/components/select"
31+
import "alchemy_admin/components/sitemap"
3032
import "alchemy_admin/components/spinner"
3133
import "alchemy_admin/components/tags_autocomplete"
3234
import "alchemy_admin/components/tinymce"

0 commit comments

Comments
 (0)