javacript for display fields

Author: libargutxi

src/cs_dynamicpages/browser/configure.zcml

@@ -5,6 +5,8 @@
     i18n_domain="cs_dynamicpages"
     >
 
+
+
   <!-- Set overrides folder for Just-a-Bunch-Of-Templates product -->
   <include
       package="z3c.jbot"
@@ -18,7 +20,7 @@
   <!-- Publish static files -->
   <plone:static
       directory="static"
-      name="cs_dynamicpages"
+      name="cs_dynamicpages.edit"
       type="plone"
       />
 

src/cs_dynamicpages/browser/static/edit_dynamicpagerow.js

@@ -0,0 +1,93 @@
+/**
+ * JavaScript for DynamicPageRow edit form
+ * Loads configuration from control panel and applies it to the form
+ */
+
+(function ($) {
+  "use strict";
+
+  function initialize() {
+    // Only run on DynamicPageRow edit form
+    if (
+      !$("body.template-edit").length ||
+      !$("body.portaltype-dynamicpagerow").length
+    ) {
+      return;
+    }
+
+    // Get configuration from control panel
+    let base_url = $("body").data("portal-url");
+    $.ajax({
+      url: `${base_url}/@registry/cs_dynamicpages.dynamica_pages_control_panel.row_type_fields`,
+      type: "GET",
+      dataType: "json",
+      headers: {
+        Accept: "application/json",
+      },
+    })
+      .done(function (data) {
+        if (data.length > 0) {
+          processRowTypeFields(data);
+        }
+      })
+      .fail(function (error) {
+        console.error("Error loading row type fields:", error);
+      });
+  }
+
+  // Store row type configurations globally
+  let rowTypeConfigs = {};
+
+  function processRowTypeFields(rowTypeFields) {
+    // Store all row type configurations
+    rowTypeFields.forEach(function (rowTypeConfig) {
+      rowTypeConfigs[rowTypeConfig.row_type] = {
+        fields: rowTypeConfig.each_row_type_fields || [],
+      };
+    });
+
+    // Initial setup
+    updateFieldVisibility();
+  }
+
+  function updateFieldVisibility() {
+    const rowTypeSelect = $('select[name$=".row_type:list"]');
+    if (!rowTypeSelect.length) return;
+
+    function toggleFields() {
+      const selectedRowType = rowTypeSelect.val();
+      if (!selectedRowType) return;
+
+      const config = rowTypeConfigs[selectedRowType];
+
+      // Always show the row type select
+      rowTypeSelect.closest(".field").show();
+
+      if (!config || !config.fields || config.fields.length === 0) {
+        // If no configuration for this row type, show all fields
+        $(".field").show();
+      } else {
+        // Otherwise, show only the configured fields
+        // First hide all fields except the row type select
+        $(".field").not(rowTypeSelect.closest(".field")).hide();
+
+        // Show the fields for the selected row type
+        config.fields.forEach(function (fieldName) {
+          $(`[data-fieldname$="form.widgets.${fieldName}"]`)
+            .closest(".field")
+            .show();
+        });
+      }
+    }
+
+    // Initial setup
+    toggleFields();
+
+    // Update on change
+    rowTypeSelect
+      .off("change.rowTypeChange")
+      .on("change.rowTypeChange", toggleFields);
+  }
+
+  $(document).ready(initialize);
+})(jQuery);

src/cs_dynamicpages/profiles/default/registry.xml

@@ -1,4 +1,18 @@
 <?xml version="1.0" encoding="utf-8"?>
 <registry>
     <records interface="cs_dynamicpages.controlpanels.dynamica_pages_control_panel.controlpanel.IDynamicaPagesControlPanel" />
+
+    <!-- Resource bundle for DynamicPageRow edit page -->
+
+     <records interface="Products.CMFPlone.interfaces.IBundleRegistry"
+           prefix="plone.bundles/cs_dynamicpages.dynamicpagerow_edit"
+  >
+        <value key="enabled">True</value>
+        <value key="jscompilation">++plone++cs_dynamicpages.edit/edit_dynamicpagerow.js</value>
+        <value key="csscompilation"></value>
+        <value key="depends">plone</value>
+        <value key="load_async">True</value>
+        <value key="load_defer">False</value>
+        <value key="expression" />
+  </records>
 </registry>