Add a new setting to admin panel for iframe resize

app/controllers/decidim/iframe/iframe_controller.rb

@@ -3,23 +3,38 @@
 module Decidim
   module Iframe
     class IframeController < Iframe::BlankComponentController
-      ALLOWED_ATTRIBUTES = %w(src width height frameborder title allow allowpaymentrequest name referrerpolicy sandbox srcdoc allowfullscreen).freeze
-      helper_method :iframe, :remove_margins?, :viewport_width?
+      ALLOWED_ATTRIBUTES = %w(src id width height frameborder title allow allowpaymentrequest name referrerpolicy sandbox srcdoc allowfullscreen).freeze
+      helper_method :iframe, :remove_margins?, :viewport_width?, :resize_iframe
 
       def show; end
 
       private
 
       def iframe
         @iframe ||= sanitize(
-          "<iframe src=\"#{attributes.src}\" width=\"#{attributes.width}\" height=\"#{attributes.height}\" frameborder=\"#{attributes.frameborder}\"></iframe>"
+          element
         ).html_safe
       end
 
+      def element
+        case resize_iframe
+        when "responsive"
+          "<iframe id=\"iFrame\" src=\"#{attributes.src}\" width=\"#{attributes.width}\"
+          frameborder=\"#{attributes.frameborder}\"></iframe>"
+        when "manual"
+          "<iframe id=\"iFrame\" src=\"#{attributes.src}\" width=\"#{attributes.width}\"
+          height=\"#{attributes.height}\"frameborder=\"#{attributes.frameborder}\"></iframe>"
+        end
+      end
+
       def attributes
         current_component.settings
       end
 
+      def resize_iframe
+        attributes.resize_iframe
+      end
+
       def sanitize(html)
         sanitizer = Rails::Html::SafeListSanitizer.new
         sanitizer.sanitize(html, tags: %w(iframe), attributes: ALLOWED_ATTRIBUTES)

app/packs/entrypoints/decidim_iframe.js

@@ -0,0 +1 @@
+import "src/decidim/iframe.js"

app/packs/src/decidim/admin/form.js

@@ -0,0 +1,46 @@
+import "src/decidim/admin/scope_picker_enabler.component"
+import "src/decidim/admin/proposal_infinite_edit"
+import "src/decidim/admin/iframe_resize_toggler"
+
+import BudgetRuleTogglerComponent from "src/decidim/admin/budget_rule_toggler.component"
+
+// Checks if the form contains fields with special CSS classes added in
+// Decidim::Admin::SettingsHelper and acts accordingly.
+$(() => {
+  const budgetRuleToggler = new BudgetRuleTogglerComponent({
+    ruleCheckboxes: $("input[id^='component_settings_vote_rule_']")
+  });
+
+  budgetRuleToggler.run();
+
+  // Prevents readonly containers from being modified.
+  const $readonlyContainer = $(".readonly_container input");
+
+  $readonlyContainer.click((event) => {
+    event.preventDefault();
+    return false;
+  });
+
+  // Target fields:
+  // - amendments_wizard_help_text
+  // - amendments_visibility
+  // - amendment_creation_enabled
+  // - amendment_reaction_enabled
+  // - amendment_promotion_enabled
+
+  // (1) Hides target fields if amendments_enabled component setting is NOT checked.
+  // (2) Toggles visibilty of target fields when amendments_enabled component setting is clicked.
+  const $amendmentsEnabled = $("input#component_settings_amendments_enabled");
+
+  if ($amendmentsEnabled.length > 0) {
+    const $amendmentStepSettings = $(".amendments_wizard_help_text_container, .amendments_visibility_container, .amendment_creation_enabled_container, .amendment_reaction_enabled_container, .amendment_promotion_enabled_container");
+
+    if ($amendmentsEnabled.is(":not(:checked)")) {
+      $amendmentStepSettings.hide();
+    }
+
+    $amendmentsEnabled.click(() => {
+      $amendmentStepSettings.toggle();
+    });
+  }
+});

app/packs/src/decidim/admin/iframe_resize_toggler.js

@@ -0,0 +1,24 @@
+$(() => {
+  const $resizeIframeLabel = $("label[for='component_settings_resize_iframe']")
+  const $iFrameSelect = $("#component_settings_resize_iframe")
+  const $heightContainer = $(".height_container")
+  const $heightInput = $("#component_settings_height")
+
+  const toggleHeightContainerVisibility = function() {
+    if ($iFrameSelect.val() === "responsive") {
+      $heightInput.val("");
+      $heightContainer.hide();
+    } else if ($iFrameSelect.val() === "manual") {
+      $heightContainer.show();
+    }
+  };
+
+  $heightContainer.detach().appendTo($resizeIframeLabel)
+
+  toggleHeightContainerVisibility()
+
+
+  $iFrameSelect.on("change", () => {
+    toggleHeightContainerVisibility()
+  })
+})