Update component settings

Gemfile.lock

@@ -4,8 +4,6 @@ PATH
     decidim-iframe (0.28.0)
       decidim-admin (= 0.28.0)
       decidim-core (= 0.28.0)
-      deface (>= 1.5)
-      sassc (~> 2.3)
 
 GEM
   remote: https://rubygems.org/
@@ -315,12 +313,6 @@ GEM
     declarative-builder (0.1.0)
       declarative-option (< 0.2.0)
     declarative-option (0.1.0)
-    deface (1.9.0)
-      actionview (>= 5.2)
-      nokogiri (>= 1.6)
-      polyglot
-      railties (>= 5.2)
-      rainbow (>= 2.1.0)
     devise (4.9.3)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
@@ -538,7 +530,6 @@ GEM
     pg_search (2.3.6)
       activerecord (>= 5.2)
       activesupport (>= 5.2)
-    polyglot (0.3.5)
     premailer (1.23.0)
       addressable
       css_parser (>= 1.12.0)
@@ -692,8 +683,6 @@ GEM
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    sassc (2.4.0)
-      ffi (~> 1.9)
     selenium-webdriver (4.19.0)
       base64 (~> 0.2)
       rexml (~> 3.2, >= 3.2.5)

app/controllers/decidim/iframe/iframe_controller.rb

@@ -3,7 +3,7 @@
 module Decidim
   module Iframe
     class IframeController < Iframe::BlankComponentController
-      helper_method :iframe, :remove_margins?, :viewport_width?, :resize_iframe
+      helper_method :iframe, :remove_margins?, :viewport_width?
       before_action :add_additional_csp_directives, only: :show
 
       def show; end
@@ -17,27 +17,44 @@ def iframe
       end
 
       def element
-        case resize_iframe
-        when "responsive"
-          "<iframe id=\"iFrame\" src=\"#{attributes.src}\" width=\"#{attributes.width}\"
+        case content_height
+        when "16:9"
+          "<iframe id=\"iFrame\" class=\"aspect-ratio-16-9\" src=\"#{attributes.src}\" width=\"#{content_width}\"
           frameborder=\"#{attributes.frameborder}\"></iframe>"
-        when "manual"
-          "<iframe id=\"iFrame\" src=\"#{attributes.src}\" width=\"#{attributes.width}\"
-          height=\"#{attributes.height}\"frameborder=\"#{attributes.frameborder}\"></iframe>"
+        when "4:3"
+          "<iframe id=\"iFrame\" class=\"aspect-ratio-4-3\" src=\"#{attributes.src}\" width=\"#{content_width}\"
+          frameborder=\"#{attributes.frameborder}\"></iframe>"
+        when "auto"
+          "<iframe id=\"iFrame\" src=\"#{attributes.src}\" width=\"#{content_width}\"
+          frameborder=\"#{attributes.frameborder}\"></iframe>"
+        when "manual_pixel"
+          "<iframe id=\"iFrame\" src=\"#{attributes.src}\" width=\"#{content_width}\"
+          height=\"#{attributes.height_value}px\"frameborder=\"#{attributes.frameborder}\"></iframe>"
         end
       end
 
       def attributes
         @attributes ||= current_component.settings
       end
 
-      def resize_iframe
-        attributes.resize_iframe
+      def content_height
+        attributes.content_height
+      end
+
+      def content_width
+        case attributes.content_width
+        when "full_width"
+          "100%"
+        when "manual_pixel"
+          "#{attributes.width_value}px"
+        when "manual_percentage"
+          "#{attributes.width_value}%"
+        end
       end
 
       def sanitize(html)
         sanitizer = Rails::Html::SafeListSanitizer.new
-        partially_sanitized_html = sanitizer.sanitize(html, tags: %w(iframe), attributes: %w(src id width height frameborder))
+        partially_sanitized_html = sanitizer.sanitize(html, tags: %w(iframe), attributes: %w(src id width height frameborder class))
         document = Nokogiri::HTML::DocumentFragment.parse(partially_sanitized_html)
         document.css("iframe").each do |iframe|
           iframe["srcdoc"] = Loofah.fragment(iframe["srcdoc"]).scrub!(:prune).to_s if iframe["srcdoc"]

app/packs/entrypoints/decidim_iframe.scss

@@ -0,0 +1 @@
+@import "stylesheets/decidim/iframe/iframe";

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

@@ -0,0 +1,35 @@
+$(() => {
+  const $contentHeightLabel = $("label[for='component_settings_content_height']")
+  const $contentHeightSelect = $("#component_settings_content_height")
+  const $heightContainer = $(".height_value_container")
+  const $heightInput = $("#component_settings_height_value")
+  const $heightHelp = $(".content_height_container .help-text")
+
+  const toggleHeightValueContainerVisibility = function() {
+    if ($contentHeightSelect.val() === "manual_pixel") {
+      $heightContainer.show();
+    } else {
+      $heightInput.val("");
+      $heightContainer.hide();
+    }
+  };
+
+  const toggleHeightHelpVisibility = function() {
+    if ($contentHeightSelect.val() === "auto") {
+      $heightHelp.show();
+    } else {
+      $heightHelp.hide();
+    }
+  };
+
+  $heightContainer.detach().appendTo($contentHeightLabel)
+
+  toggleHeightValueContainerVisibility()
+  toggleHeightHelpVisibility()
+
+
+  $contentHeightSelect.on("change", () => {
+    toggleHeightValueContainerVisibility()
+    toggleHeightHelpVisibility()
+  })
+})

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

@@ -0,0 +1,24 @@
+$(() => {
+  const $contentWidthLabel = $("label[for='component_settings_content_width']")
+  const $contentWidthSelect = $("#component_settings_content_width")
+  const $widthContainer = $(".width_value_container")
+  const $widthInput = $("#component_settings_width_value")
+
+  const toggleWidthValueContainerVisibility = function() {
+    if ($contentWidthSelect.val() === "manual_pixel" || $contentWidthSelect.val() === "manual_percentage") {
+      $widthContainer.show();
+    } else {
+      $widthInput.val("");
+      $widthContainer.hide();
+    }
+  };
+
+  $widthContainer.detach().appendTo($contentWidthLabel)
+
+  toggleWidthValueContainerVisibility()
+
+
+  $contentWidthSelect.on("change", () => {
+    toggleWidthValueContainerVisibility()
+  })
+})

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

@@ -1,6 +1,7 @@
 import "src/decidim/admin/scope_picker_enabler.component"
 import "src/decidim/admin/proposal_infinite_edit"
-import "src/decidim/admin/iframe_resize_toggler"
+import "src/decidim/admin/content_height_toggler"
+import "src/decidim/admin/content_width_toggler"
 
 // Overwrite core form.js file to import iframe_resize_toggler
 

app/packs/stylesheets/decidim/iframe/iframe.scss

@@ -0,0 +1,10 @@
+.participatory-space__container {
+  .iframe {
+    margin: 0 auto;
+
+    iframe {
+      display: block;
+      margin: auto;
+    }
+  }
+}

app/views/decidim/shared/_component_announcement.html.erb

@@ -0,0 +1 @@
+<%= cell("decidim/announcement", current_component.settings.announcement) %>

config/assets.rb

@@ -5,5 +5,5 @@
 Decidim::Webpacker.register_path("#{base_path}/app/packs", prepend: true)
 
 Decidim::Webpacker.register_entrypoints(
-  decidim_iframe: "#{base_path}/app/packs/entrypoints/decidim_iframe.js"
+  decidim_iframe: "#{base_path}/app/packs/entrypoints/decidim_iframe.scss"
 )

config/locales/en.yml

@@ -10,9 +10,24 @@ en:
         settings:
           global:
             announcement: Announcement
+            content_height: Content height
+            content_height_help: In order to use the automatic height calculation,
+              your iframe provider has to support the iframe-resizer JavaScript library.
+              Please confirm from your iframe provider that they support this library
+              before using the automatic height option. Read more about how to support
+              this library from the iframe-resizer documentation.
+            content_height_options:
+              '16:9': '16:9'
+              '4:3': '4:3'
+              auto: Automatic height
+              manual_pixel: Manual height in pixels
+            content_width: Content width
+            content_width_options:
+              full_width: Full width
+              manual_percentage: Manual width as a percentage
+              manual_pixel: Manual width in pixels
             frameborder: Content frameborder
-            height: Content height
-            height_help: Height of the Iframe element in pixels, e.g. "250px".
+            height_value: Height value
             resize_iframe: Resize Iframe
             resize_iframe_options:
               manual: Resize manually
@@ -21,5 +36,4 @@ en:
             src_help: Insert the path for the source content that will be displayed
               in the Iframe.
             viewport_width: Limit maximum width to the application viewport
-            width: Content width
-            width_help: Ensure to use 100% as width to fill the screen.
+            width_value: Width value

config/locales/fi.yml

@@ -10,15 +10,28 @@ fi:
         settings:
           global:
             announcement: Ilmoitus
+            content_width: Sisällön leveys
+            content_width_options:
+              full_width: Täysi leveys
+              manual_pixel: Leveys pikseleissä
+              manual_percentage: Leveys prosenteissa
+            content_height: Sisällön korkeus
+            content_height_help: Käyttääksesi automaattista korkeuden säätelyä, tarvitsee iframe -tarjoajasi tukea
+              iframe-resizer Javascript -kirjastoa. Varmista iframe -tarjoajaltasi tämän kirjaston
+              tukeminen ennen automaattisen korkeuden säädön käyttöä. Katso iframe-resizer
+              dokumentaatio lukeaksesi lisää tämän kirjaston tukemisesta.
+            content_height_options:
+              "16:9": "16:9"
+              "4:3": "4:3"
+              auto: Automaattinen korkeus
+              manual_pixel: Korkeus pikseleissä
             frameborder: Sisällön kehys
-            height: Sisällön korkeus
-            height_help: 'Iframe -elementin korkeus.'
+            height_value: Korkeusarvo
             resize_iframe: Iframe -elementin koko
             resize_iframe_options:
               responsive: Automaattinen koko
               manual: Manuaalinen koko
             src: Sisällön lähde
             src_help: 'Syötä Iframe -elementin sisällön lähteen polku.'
             viewport_width: Rajaa maksimi-leveys sovelluksen ikkunaan
-            width: Sisällön leveys
-            width_help: 'Käytä 100% leveyttä täyttääksesi näytön.'
+            width_value: Leveysarvo

config/locales/sv.yml

@@ -10,9 +10,23 @@ sv:
         settings:
           global:
             announcement: Meddelande
+            content_width: Content width
+            content_width_options:
+              full_width: Full width
+              manual_pixel: Manual width in pixels
+              manual_percentage: Manual width as a percentage
+            content_height: Content height
+            content_height_help: In order to use the automatic height calculation, your iframe provider has to support
+              the iframe-resizer JavaScript library. Please confirm from your iframe provider that they support this
+              library before using the automatic height option. Read more about how to support this library from the
+              iframe-resizer documentation.
+            content_height_options:
+              "16:9": "16:9"
+              "4:3": "4:3"
+              auto: Automatic height
+              manual_pixel: Manual height in pixels
             frameborder: Content frameborder
-            height: Content height
-            height_help: Height of the Iframe element in pixels, e.g. "250px".
+            height_value: Height value
             resize_iframe: Resize Iframe
             resize_iframe_options:
               manual: Resize manually
@@ -21,5 +35,4 @@ sv:
             src_help: Insert the path for the source content that will be displayed
               in the Iframe.
             viewport_width: Limit maximum width to the application viewport
-            width: Content width
-            width_help: Ensure to use 100% as width to fill the screen.
+            width_value: Width value

decidim-iframe.gemspec

@@ -20,8 +20,6 @@ Gem::Specification.new do |s|
 
   s.add_dependency "decidim-admin", Decidim::Iframe.decidim_version
   s.add_dependency "decidim-core", Decidim::Iframe.decidim_version
-  s.add_dependency "deface", ">= 1.5"
-  s.add_dependency "sassc", "~> 2.3" # TODO: check if this can be removed
 
   s.metadata["rubygems_mfa_required"] = "true"
 end

lib/decidim/iframe/component.rb

@@ -10,17 +10,19 @@
   # These actions permissions can be configured in the admin panel
   # component.actions = %w()
 
-  RESIZE_OPTIONS = %w(responsive manual).freeze
+  HEIGHT_OPTIONS = %w(16:9 4:3 auto manual_pixel).freeze
+  WIDTH_OPTIONS = %w(full_width manual_pixel manual_percentage).freeze
 
   component.settings(:global) do |settings|
     # Add your global settings
     # Available types: :integer, :boolean
     settings.attribute :announcement, type: :text, translated: true, editor: true
     settings.attribute :src, type: :string, default: ""
-    settings.attribute :width, type: :string, default: "100%"
+    settings.attribute :content_width, type: :select, default: "full_width", choices: -> { WIDTH_OPTIONS }
+    settings.attribute :width_value, type: :integer
+    settings.attribute :content_height, type: :select, default: "16:9", choices: -> { HEIGHT_OPTIONS }
+    settings.attribute :height_value, type: :integer
     settings.attribute :frameborder, type: :boolean, default: false
-    settings.attribute :resize_iframe, type: :select, default: "responsive", choices: -> { RESIZE_OPTIONS }
-    settings.attribute :height, type: :integer, default: 0
     settings.attribute :viewport_width, type: :boolean, default: true
   end
 
@@ -43,10 +45,10 @@
       settings: {
         announcement: { en: Faker::Lorem.paragraphs(number: 2).join("\n") },
         src: "",
-        width: "100%",
+        content_width: "full_width",
+        content_height: "16:9",
         frameborder: false,
-        resize_iframe: "responsive",
-        height: ""
+        viewport_width: true
       }
     }
 

lib/decidim/iframe/engine.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 require "rails"
-require "deface"
 require "decidim/core"
 
 module Decidim