Skip to content

Commit 4d18f00

Browse files
libargutxilibargutxi
committed
edit mode
1 parent 03ab0f6 commit 4d18f00

File tree

4 files changed

+87
-20
lines changed

4 files changed

+87
-20
lines changed

‎src/cs_dynamicpages/browser/static/dynamicpageview.css‎

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,37 @@
1-
body.template-dynamic-view.userrole-manager,
2-
body.portaltype-dynamicpagerow.template-view {
3-
.dynamic-row {
4-
background-color: #f5f5f5;
5-
padding: 1rem;
6-
margin: 1rem 0;
7-
border-radius: 5px;
8-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
9-
transition: all 0.3s ease;
10-
&:hover {
11-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
12-
background-color: #e5e5e5;
13-
}
14-
&.state-private {
15-
.content {
16-
opacity: 0.3;
1+
body.template-dynamic-view.userrole-manager {
2+
&:not(.preview-mode) {
3+
.dynamic-row {
4+
background-color: #f5f5f5;
5+
padding: 1rem;
6+
margin: 1rem 0;
7+
border-radius: 5px;
8+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
9+
transition: all 0.3s ease;
10+
&:hover {
11+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
12+
background-color: #e5e5e5;
13+
}
14+
&.state-private {
15+
.content {
16+
opacity: 0.3;
17+
}
1718
}
1819
}
1920
}
21+
.edit-options {
22+
display: flex;
23+
opacity: 1;
24+
transform: translateY(0);
25+
transition: opacity 0.3s ease, transform 0.2s ease, visibility 0.3s;
26+
}
27+
28+
&.preview-mode .edit-options {
29+
position: absolute;
30+
opacity: 0;
31+
visibility: hidden;
32+
pointer-events: none;
33+
transform: translateY(-10px);
34+
height: 0;
35+
overflow: hidden;
36+
}
2037
}

‎src/cs_dynamicpages/browser/static/editmode-toggle.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* Handles the edit mode toggle functionality for dynamic pages.
3+
* Toggles between edit and preview modes and saves the preference in localStorage.
4+
*/
5+
6+
document.addEventListener("DOMContentLoaded", function () {
7+
// Only run if both required classes are present on the body
8+
if (
9+
!document.body.classList.contains("template-dynamic-view") ||
10+
!document.body.classList.contains("userrole-manager")
11+
) {
12+
return;
13+
}
14+
15+
const toggle = document.getElementById("editModeToggle");
16+
if (toggle) {
17+
// Initialize from localStorage if available
18+
const savedMode = localStorage.getItem("editMode");
19+
if (savedMode === "preview") {
20+
toggle.checked = false;
21+
document.body.classList.add("preview-mode");
22+
}
23+
24+
toggle.addEventListener("change", function () {
25+
if (this.checked) {
26+
document.body.classList.remove("preview-mode");
27+
localStorage.setItem("editMode", "edit");
28+
} else {
29+
document.body.classList.add("preview-mode");
30+
localStorage.setItem("editMode", "preview");
31+
}
32+
});
33+
}
34+
});

‎src/cs_dynamicpages/profiles/default/registry/dynamic_bundle.xml‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,15 @@
3636
<value key="load_defer">False</value>
3737
<value key="expression" />
3838
</records>
39+
40+
<records interface="Products.CMFPlone.interfaces.IBundleRegistry"
41+
prefix="plone.bundles/cs_dynamicpages.editmode_toggle"
42+
>
43+
<value key="enabled">True</value>
44+
<value key="jscompilation">++plone++cs_dynamicpages.edit/editmode-toggle.js</value>
45+
<value key="depends">plone</value>
46+
<value key="load_async">True</value>
47+
<value key="load_defer">False</value>
48+
<value key="expression" />
49+
</records>
3950
</registry>

‎src/cs_dynamicpages/views/dynamic_view.pt‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,20 @@
66
<body>
77
<metal:main fill-slot="main">
88
<main id="content">
9+
<div class="d-flex justify-content-end mb-3" tal:condition="view/can_edit">
10+
<div class="form-check form-switch">
11+
<input class="form-check-input" type="checkbox" role="switch" id="editModeToggle" checked>
12+
<label class="form-check-label" for="editModeToggle">Edit Mode</label>
13+
</div>
14+
</div>
915
<tal:features define="
1016
rows view/rows;
1117
">
1218
<tal:featured repeat="brain rows">
1319
<section tal:define="row brain/getObject;" class="dynamic-row ${row/row_template} state-${row/review_state}"
1420
data-elementid="${row/id}" data-elementurl="${row/absolute_url}"
1521
data-parenturl="${row/aq_parent/absolute_url}" data-delete-target="true" data-move-target="true">
16-
<div class="edit-buttons d-flex gap-2" tal:condition="row/can_edit">
22+
<div class="edit-options edit-buttons d-flex gap-2" tal:condition="row/can_edit">
1723
<small
1824
class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2 position-relative">
1925
Template: ${row/row_template}
@@ -54,7 +60,7 @@
5460

5561
</div>
5662
<tal:condition tal:condition="row/can_edit">
57-
<div class="features-list d-flex gap-2 align-items-start mb-3"
63+
<div class="edit-options features-list d-flex gap-2 align-items-start mb-3"
5864
tal:define="features_list row/featured_list" tal:condition="features_list">
5965
<tal:featured repeat="featured_brain features_list">
6066
<div tal:define="featured_obj featured_brain/getObject;">
@@ -113,7 +119,7 @@
113119
</tal:featured>
114120
</tal:features>
115121
<tal:condition tal:condition="view/can_edit">
116-
<div class="dynamic-row d-flex justify-content-center align-items-center"
122+
<div class="edit-options dynamic-row d-flex justify-content-center align-items-center"
117123
tal:condition="view/dynamic_page_folder_element_url">
118124
<a class="btn btn-primary btn-lg" href="${view/dynamic_page_folder_element_url}/++add++DynamicPageRow">Add
119125
new row</a>
@@ -140,7 +146,6 @@
140146
</div>
141147
</main>
142148
</metal:main>
143-
144149
</body>
145150

146151
</html>

0 commit comments

Comments
 (0)