From 34706bdf0a047b1945f327173ea10b9653782941 Mon Sep 17 00:00:00 2001
From: Joonas <joonas.aapro@mainiotech.fi>
Date: Thu, 18 Apr 2024 13:57:11 +0300
Subject: [PATCH] Fix aspect ratio / Other fixes

---
 .../decidim/iframe/iframe_controller.rb       | 20 +++++++++++++------
 .../stylesheets/decidim/iframe/iframe.scss    |  7 +++++++
 app/views/decidim/iframe/iframe/show.html.erb |  2 +-
 config/assets.rb                              |  2 ++
 config/locales/en.yml                         |  8 ++++----
 config/locales/fi.yml                         |  8 ++++----
 config/locales/sv.yml                         |  8 ++++----
 7 files changed, 36 insertions(+), 19 deletions(-)
 create mode 100644 app/packs/stylesheets/decidim/iframe/iframe.scss

diff --git a/app/controllers/decidim/iframe/iframe_controller.rb b/app/controllers/decidim/iframe/iframe_controller.rb
index 35a83b8..3ff9d42 100644
--- a/app/controllers/decidim/iframe/iframe_controller.rb
+++ b/app/controllers/decidim/iframe/iframe_controller.rb
@@ -16,17 +16,17 @@ def iframe
       def element
         case content_height
         when "16:9"
-          "<iframe id=\"iFrame\" class=\"aspect-ratio-16-9\" src=\"#{attributes.src}\" width=\"#{content_width}\"
-          frameborder=\"#{attributes.frameborder}\"></iframe>"
+          "<iframe id=\"iFrame\" class=\"aspect-ratio-16\" src=\"#{attributes.src}\" width=\"#{content_width}\"
+          frameborder=\"#{frameborder?}\"></iframe>"
         when "4:3"
-          "<iframe id=\"iFrame\" class=\"aspect-ratio-4-3\" src=\"#{attributes.src}\" width=\"#{content_width}\"
-          frameborder=\"#{attributes.frameborder}\"></iframe>"
+          "<iframe id=\"iFrame\" class=\"aspect-ratio-4\" src=\"#{attributes.src}\" width=\"#{content_width}\"
+          frameborder=\"#{frameborder?}\"></iframe>"
         when "auto"
           "<iframe id=\"iFrame\" src=\"#{attributes.src}\" width=\"#{content_width}\"
-          frameborder=\"#{attributes.frameborder}\"></iframe>"
+          frameborder=\"#{frameborder?}\"></iframe>"
         when "manual_pixel"
           "<iframe id=\"iFrame\" src=\"#{attributes.src}\" width=\"#{content_width}\"
-          height=\"#{attributes.height_value}px\"frameborder=\"#{attributes.frameborder}\"></iframe>"
+          height=\"#{attributes.height_value}px\"frameborder=\"#{frameborder?}\"></iframe>"
         end
       end
 
@@ -34,6 +34,14 @@ def attributes
         @attributes ||= current_component.settings
       end
 
+      def frameborder?
+        if attributes.frameborder
+          "1"
+        else
+          "0"
+        end
+      end
+
       def content_height
         attributes.content_height
       end
diff --git a/app/packs/stylesheets/decidim/iframe/iframe.scss b/app/packs/stylesheets/decidim/iframe/iframe.scss
new file mode 100644
index 0000000..951ff1d
--- /dev/null
+++ b/app/packs/stylesheets/decidim/iframe/iframe.scss
@@ -0,0 +1,7 @@
+.aspect-ratio-16 {
+  aspect-ratio: 16/9;
+}
+
+.aspect-ratio-4 {
+  aspect-ratio: 4 / 3;
+}
diff --git a/app/views/decidim/iframe/iframe/show.html.erb b/app/views/decidim/iframe/iframe/show.html.erb
index 9f1c6f4..67ef3bd 100644
--- a/app/views/decidim/iframe/iframe/show.html.erb
+++ b/app/views/decidim/iframe/iframe/show.html.erb
@@ -7,7 +7,7 @@
   <% end %>
 </style>
 
-<div class="iframe<%= " row" if viewport_width? %>">
+<div class="iframe<%= " row column" if viewport_width? %>">
   <%= iframe %>
 </div>
 
diff --git a/config/assets.rb b/config/assets.rb
index 92c2cf7..e9dabd3 100644
--- a/config/assets.rb
+++ b/config/assets.rb
@@ -7,3 +7,5 @@
 Decidim::Webpacker.register_entrypoints(
   decidim_iframe: "#{base_path}/app/packs/entrypoints/decidim_iframe.js"
 )
+
+Decidim::Webpacker.register_stylesheet_import("stylesheets/decidim/iframe/iframe")
diff --git a/config/locales/en.yml b/config/locales/en.yml
index c31fadb..3209870 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -14,8 +14,8 @@ en:
               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'
+              '16:9': '16:9 aspect ratio'
+              '4:3': '4:3 aspect ratio'
               auto: Automatic height
               manual_pixel: Manual height in pixels
             content_width: Content width
@@ -23,9 +23,9 @@ en:
               full_width: Full width
               manual_percentage: Manual width as a percentage
               manual_pixel: Manual width in pixels
-            frameborder: Content frameborder
+            frameborder: Add border around the iframe
             height_value: Height value
-            no_margins: No margins
+            no_margins: Remove margins around the iframe
             resize_iframe: Resize Iframe
             resize_iframe_options:
               manual: Resize manually
diff --git a/config/locales/fi.yml b/config/locales/fi.yml
index 6bc9d35..c8a133c 100644
--- a/config/locales/fi.yml
+++ b/config/locales/fi.yml
@@ -18,13 +18,13 @@ fi:
                                  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"
+              "16:9": "16:9 kuvasuhde"
+              "4:3": "4:3 kuvasuhde"
               auto: Automaattinen korkeus
               manual_pixel: Korkeus pikseleissä
-            frameborder: Sisällön kehys
+            frameborder: Lisää kehys iframe -elementille
             height_value: Korkeusarvo
-            no_margins: Ei reunoja
+            no_margins: Poista reunat iframe -elementiltä
             resize_iframe: Iframe -elementin koko
             resize_iframe_options:
               responsive: Automaattinen koko
diff --git a/config/locales/sv.yml b/config/locales/sv.yml
index 1b7b81b..8aed9e6 100644
--- a/config/locales/sv.yml
+++ b/config/locales/sv.yml
@@ -18,13 +18,13 @@ sv:
               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"
+              "16:9": "16:9 aspect ratio"
+              "4:3": "4:3 aspect ratio"
               auto: Automatic height
               manual_pixel: Manual height in pixels
-            frameborder: Content frameborder
+            frameborder: Add border around the iframe
             height_value: Height value
-            no_margins: No margins
+            no_margins: Remove margins around the iframe
             resize_iframe: Resize Iframe
             resize_iframe_options:
               manual: Resize manually