From de5831e468cc5e53f7b1c2a604562e8cbd5b27d2 Mon Sep 17 00:00:00 2001 From: Joonas Date: Tue, 9 Apr 2024 16:53:52 +0300 Subject: [PATCH] Update component settings --- Gemfile.lock | 11 ------ .../decidim/iframe/iframe_controller.rb | 37 ++++++++++++++----- app/packs/entrypoints/decidim_iframe.js | 1 - app/packs/entrypoints/decidim_iframe.scss | 1 + .../decidim/admin/content_height_toggler.js | 35 ++++++++++++++++++ .../decidim/admin/content_width_toggler.js | 24 ++++++++++++ app/packs/src/decidim/admin/form.js | 3 +- .../decidim/admin/iframe_resize_toggler.js | 25 ------------- app/packs/src/decidim/iframe.js | 7 ---- .../stylesheets/decidim/iframe/iframe.scss | 10 +++++ .../shared/_component_announcement.html.erb | 1 + config/assets.rb | 2 +- config/locales/en.yml | 22 +++++++++-- config/locales/fi.yml | 21 +++++++++-- config/locales/sv.yml | 21 +++++++++-- decidim-iframe.gemspec | 2 - lib/decidim/iframe/component.rb | 16 ++++---- lib/decidim/iframe/engine.rb | 1 - 18 files changed, 162 insertions(+), 78 deletions(-) delete mode 100644 app/packs/entrypoints/decidim_iframe.js create mode 100644 app/packs/entrypoints/decidim_iframe.scss create mode 100644 app/packs/src/decidim/admin/content_height_toggler.js create mode 100644 app/packs/src/decidim/admin/content_width_toggler.js delete mode 100644 app/packs/src/decidim/admin/iframe_resize_toggler.js delete mode 100644 app/packs/src/decidim/iframe.js create mode 100644 app/packs/stylesheets/decidim/iframe/iframe.scss create mode 100644 app/views/decidim/shared/_component_announcement.html.erb diff --git a/Gemfile.lock b/Gemfile.lock index 36c0abf..2352bcc 100644 --- a/Gemfile.lock +++ b/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) diff --git a/app/controllers/decidim/iframe/iframe_controller.rb b/app/controllers/decidim/iframe/iframe_controller.rb index 290c658..82d0a8a 100644 --- a/app/controllers/decidim/iframe/iframe_controller.rb +++ b/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,13 +17,19 @@ def iframe end def element - case resize_iframe - when "responsive" - "" - when "manual" - "" + when "4:3" + "" + when "auto" + "" + when "manual_pixel" + "" end end @@ -31,13 +37,24 @@ 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"] diff --git a/app/packs/entrypoints/decidim_iframe.js b/app/packs/entrypoints/decidim_iframe.js deleted file mode 100644 index e848db3..0000000 --- a/app/packs/entrypoints/decidim_iframe.js +++ /dev/null @@ -1 +0,0 @@ -import "src/decidim/iframe.js" diff --git a/app/packs/entrypoints/decidim_iframe.scss b/app/packs/entrypoints/decidim_iframe.scss new file mode 100644 index 0000000..f5038f7 --- /dev/null +++ b/app/packs/entrypoints/decidim_iframe.scss @@ -0,0 +1 @@ +@import "stylesheets/decidim/iframe/iframe"; diff --git a/app/packs/src/decidim/admin/content_height_toggler.js b/app/packs/src/decidim/admin/content_height_toggler.js new file mode 100644 index 0000000..b882f6d --- /dev/null +++ b/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() + }) +}) diff --git a/app/packs/src/decidim/admin/content_width_toggler.js b/app/packs/src/decidim/admin/content_width_toggler.js new file mode 100644 index 0000000..d112f6b --- /dev/null +++ b/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() + }) +}) diff --git a/app/packs/src/decidim/admin/form.js b/app/packs/src/decidim/admin/form.js index 2a705f3..1272dff 100644 --- a/app/packs/src/decidim/admin/form.js +++ b/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 diff --git a/app/packs/src/decidim/admin/iframe_resize_toggler.js b/app/packs/src/decidim/admin/iframe_resize_toggler.js deleted file mode 100644 index f909594..0000000 --- a/app/packs/src/decidim/admin/iframe_resize_toggler.js +++ /dev/null @@ -1,25 +0,0 @@ -$(() => { - const $resizeIframeLabel = $("label[for='component_settings_resize_iframe']") - const $iFrameSelect = $("#component_settings_resize_iframe") - const $heightContainer = $(".height_container") - $heightContainer.addClass("mt-2") - 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() - }) -}) diff --git a/app/packs/src/decidim/iframe.js b/app/packs/src/decidim/iframe.js deleted file mode 100644 index cd0049d..0000000 --- a/app/packs/src/decidim/iframe.js +++ /dev/null @@ -1,7 +0,0 @@ -import "src/decidim/iframe-resizer/iframeResizer.min.js" - -document.addEventListener("DOMContentLoaded", function() { - window.iFrameResize({ - log: true - }, "#iFrame"); -}); diff --git a/app/packs/stylesheets/decidim/iframe/iframe.scss b/app/packs/stylesheets/decidim/iframe/iframe.scss new file mode 100644 index 0000000..c274b72 --- /dev/null +++ b/app/packs/stylesheets/decidim/iframe/iframe.scss @@ -0,0 +1,10 @@ +.participatory-space__container { + .iframe { + margin: 0 auto; + + iframe { + display: block; + margin: auto; + } + } +} diff --git a/app/views/decidim/shared/_component_announcement.html.erb b/app/views/decidim/shared/_component_announcement.html.erb new file mode 100644 index 0000000..f8e13d0 --- /dev/null +++ b/app/views/decidim/shared/_component_announcement.html.erb @@ -0,0 +1 @@ +<%= cell("decidim/announcement", current_component.settings.announcement) %> diff --git a/config/assets.rb b/config/assets.rb index 92c2cf7..b261523 100644 --- a/config/assets.rb +++ b/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" ) diff --git a/config/locales/en.yml b/config/locales/en.yml index 4cc6d75..44faab6 100644 --- a/config/locales/en.yml +++ b/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 diff --git a/config/locales/fi.yml b/config/locales/fi.yml index 57f4c6d..e5ffdd2 100644 --- a/config/locales/fi.yml +++ b/config/locales/fi.yml @@ -10,9 +10,23 @@ 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 @@ -20,5 +34,4 @@ fi: 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 diff --git a/config/locales/sv.yml b/config/locales/sv.yml index 18b0d5f..5643950 100644 --- a/config/locales/sv.yml +++ b/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 diff --git a/decidim-iframe.gemspec b/decidim-iframe.gemspec index 4c2936a..c327a4f 100644 --- a/decidim-iframe.gemspec +++ b/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 diff --git a/lib/decidim/iframe/component.rb b/lib/decidim/iframe/component.rb index 5e1ad52..5ab21d4 100644 --- a/lib/decidim/iframe/component.rb +++ b/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 } } diff --git a/lib/decidim/iframe/engine.rb b/lib/decidim/iframe/engine.rb index 2a9490e..375aa1d 100644 --- a/lib/decidim/iframe/engine.rb +++ b/lib/decidim/iframe/engine.rb @@ -1,7 +1,6 @@ # frozen_string_literal: true require "rails" -require "deface" require "decidim/core" module Decidim