Skip to content

Commit e58f096

Browse files
libargutxilibargutxi
committed
default controlpanel values and add new row functionality
1 parent 5267fd8 commit e58f096

2 files changed

Lines changed: 108 additions & 54 deletions

File tree

‎src/cs_dynamicpages/browser/static/edit_dynamicpagerow.js‎

Lines changed: 95 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -3,48 +3,60 @@
33
* Loads configuration from control panel and applies it to the form
44
*/
55

6-
(function() {
6+
(function () {
77
"use strict";
88

99
// Store row type configurations globally
1010
let rowTypeConfigs = {};
1111
let rowTypeSelect = null;
1212

13-
function initialize() {
14-
// Only run on DynamicPageRow edit form
15-
if (!document.body.classList.contains('template-edit') ||
16-
!document.body.classList.contains('portaltype-dynamicpagerow')) {
13+
function initialize(context = document) {
14+
// Check if we're in an edit form or an add form
15+
const isEditForm =
16+
context === document &&
17+
document.body.classList.contains("template-edit") &&
18+
document.body.classList.contains("portaltype-dynamicpagerow");
19+
20+
// Check if we're in an add form or a dynamically added form
21+
const isAddForm = (context === document ? document : context).querySelector(
22+
"form.view-name-add-DynamicPageRow"
23+
);
24+
25+
if (!isEditForm && !isAddForm) {
1726
return;
1827
}
1928

2029
// Get configuration from control panel
21-
const baseUrl = document.body.dataset.portalUrl || '';
22-
fetch(`${baseUrl}/@registry/cs_dynamicpages.dynamica_pages_control_panel.row_type_fields`, {
23-
method: 'GET',
24-
headers: {
25-
'Accept': 'application/json',
26-
},
27-
credentials: 'same-origin'
28-
})
29-
.then(response => {
30-
if (!response.ok) {
31-
throw new Error('Network response was not ok');
32-
}
33-
return response.json();
34-
})
35-
.then(data => {
36-
if (data && data.length > 0) {
37-
processRowTypeFields(data);
30+
const baseUrl = document.body.dataset.portalUrl || "";
31+
fetch(
32+
`${baseUrl}/@registry/cs_dynamicpages.dynamica_pages_control_panel.row_type_fields`,
33+
{
34+
method: "GET",
35+
headers: {
36+
Accept: "application/json",
37+
},
38+
credentials: "same-origin",
3839
}
39-
})
40-
.catch(error => {
41-
console.error('Error loading row type fields:', error);
42-
});
40+
)
41+
.then((response) => {
42+
if (!response.ok) {
43+
throw new Error("Network response was not ok");
44+
}
45+
return response.json();
46+
})
47+
.then((data) => {
48+
if (data && data.length > 0) {
49+
processRowTypeFields(data);
50+
}
51+
})
52+
.catch((error) => {
53+
console.error("Error loading row type fields:", error);
54+
});
4355
}
4456

4557
function processRowTypeFields(rowTypeFields) {
4658
// Store all row type configurations
47-
rowTypeFields.forEach(rowTypeConfig => {
59+
rowTypeFields.forEach((rowTypeConfig) => {
4860
rowTypeConfigs[rowTypeConfig.row_type] = {
4961
fields: rowTypeConfig.each_row_type_fields || [],
5062
};
@@ -64,9 +76,9 @@
6476
rowTypeSelect = newSelect;
6577

6678
// Add new event listener
67-
rowTypeSelect.addEventListener('change', toggleFields);
79+
rowTypeSelect.addEventListener("change", toggleFields);
6880

69-
// Initial setup
81+
// Initial setup - force update for the default value
7082
toggleFields();
7183
}
7284

@@ -75,42 +87,72 @@
7587
if (!selectedRowType) return;
7688

7789
const config = rowTypeConfigs[selectedRowType];
78-
const allFields = document.querySelectorAll('.field');
79-
const rowTypeField = rowTypeSelect.closest('.field');
90+
const allFields = document.querySelectorAll(".field");
91+
const rowTypeField = rowTypeSelect.closest(".field");
8092

8193
// Show all fields first
82-
allFields.forEach(field => {
83-
field.style.display = '';
94+
allFields.forEach((field) => {
95+
field.style.display = "";
8496
});
8597

86-
if (config && config.fields && config.fields.length > 0) {
87-
// Hide all fields except row type select
88-
allFields.forEach(field => {
89-
if (field !== rowTypeField) {
90-
field.style.display = 'none';
91-
}
92-
});
98+
// Always hide all fields except row type select by default
99+
allFields.forEach((field) => {
100+
if (field !== rowTypeField) {
101+
field.style.display = "none";
102+
}
103+
});
93104

94-
// Show only the configured fields
95-
config.fields.forEach(fieldName => {
96-
const fieldElement = document.querySelector(
97-
`[data-fieldname$="form.widgets.${fieldName}"]`
98-
);
99-
if (fieldElement) {
100-
const fieldContainer = fieldElement.closest('.field');
101-
if (fieldContainer) {
102-
fieldContainer.style.display = '';
105+
// If we have a config for this row type, show its fields
106+
if (config && config.fields && config.fields.length > 0) {
107+
config.fields.forEach((fieldName) => {
108+
// Try different field name patterns to match the actual field in the form
109+
const fieldSelectors = [
110+
`[data-fieldname$="form.widgets.${fieldName}"]`,
111+
`[data-fieldname$="form.widgets.I${fieldName}"]`,
112+
`[data-fieldname*="${fieldName}"]`,
113+
`#formfield-form-widgets-${fieldName}`,
114+
`#formfield-form-widgets-I${fieldName}`,
115+
];
116+
117+
for (const selector of fieldSelectors) {
118+
const fieldElement = document.querySelector(selector);
119+
if (fieldElement) {
120+
const fieldContainer = fieldElement.closest(".field");
121+
if (fieldContainer) {
122+
fieldContainer.style.display = "";
123+
break; // Found and showed the field, no need to check other selectors
124+
}
103125
}
104126
}
105127
});
128+
} else if (selectedRowType === "horizontal-row-type") {
129+
// If no config but we're on the default type, show all fields
130+
allFields.forEach((field) => {
131+
field.style.display = "";
132+
});
106133
}
107-
// If no config, all fields remain visible
108134
}
109135

110136
// Initialize when DOM is fully loaded
111-
if (document.readyState === 'loading') {
112-
document.addEventListener('DOMContentLoaded', initialize);
113-
} else {
137+
function start() {
114138
initialize();
139+
140+
// Handle dynamically loaded content (for add forms)
141+
document.body.addEventListener("DOMNodeInserted", function (e) {
142+
const form = e.target.closest ? e.target.closest("form") : null;
143+
if (
144+
form &&
145+
(form.classList.contains("view-name-add-DynamicPageRow") ||
146+
form.id === "form")
147+
) {
148+
initialize(form);
149+
}
150+
});
151+
}
152+
153+
if (document.readyState === "loading") {
154+
document.addEventListener("DOMContentLoaded", start);
155+
} else {
156+
start();
115157
}
116158
})();

‎src/cs_dynamicpages/controlpanels/dynamica_pages_control_panel/controlpanel.py‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,19 @@ class IDynamicaPagesControlPanel(Interface):
3636
{
3737
"row_type": "cs_dynamicpages-featured-view",
3838
"each_row_type_fields": ["IBasic.title", "IBasic.description", "IRelatedImage.image", "ILinkInfo.link_text", "ILinkInfo.link_url"],
39-
}
39+
},
40+
{
41+
"row_type": "cs_dynamicpages-horizontal-rule-view",
42+
"each_row_type_fields": ["IBasic.title"],
43+
},
44+
{
45+
"row_type": "cs_dynamicpages-slider-view",
46+
"each_row_type_fields": ["IBasic.title"],
47+
},
48+
{
49+
"row_type": "cs_dynamicpages-query-three-columns-view",
50+
"each_row_type_fields": ["ICollection.query", "ICollection.sort_on", "ICollection.sort_order", "ICollection.betweeen", "ICollection.limit"],
51+
},
4052
],
4153
)
4254

0 commit comments

Comments
 (0)