From 3db04cbedb82c1b8560d23c9d2c7aa5bcd142175 Mon Sep 17 00:00:00 2001
From: "James (DPC)" <james.ellis@dpc.nsw.gov.au>
Date: Wed, 22 Dec 2021 13:53:58 +1100
Subject: [PATCH] Fix: fire iframe resizer on window.load for all iframes
 matching the selector. Modify field description text to make the options more
 understandable and when they may clash with each other. Hide iframeResize()
 log behind a configuration variable

---
 _config/config.yml                            |  1 +
 src/Models/Elements/ElementIframe.php         | 62 ++++++++++++++++---
 .../Elemental/Models/Iframe/ElementIframe.ss  |  4 +-
 3 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/_config/config.yml b/_config/config.yml
index 9f9ad90..ba5b072 100644
--- a/_config/config.yml
+++ b/_config/config.yml
@@ -3,5 +3,6 @@ Name: nswdpc-elemental-iframe
 ---
 NSWDPC\Elemental\Models\Iframe\ElementIframe:
   load_polyfill: true
+  resizer_log: false
   default_allow_attributes:
       - 'fullscreen'
diff --git a/src/Models/Elements/ElementIframe.php b/src/Models/Elements/ElementIframe.php
index 4b6d49e..66c410a 100644
--- a/src/Models/Elements/ElementIframe.php
+++ b/src/Models/Elements/ElementIframe.php
@@ -67,6 +67,11 @@ class ElementIframe extends BaseElement implements PermissionProvider {
 
     private static $load_polyfill = true;
 
+    /**
+     * @var bool
+     */
+    private static $resizer_log = false;
+
     public function getType()
     {
         return _t(__CLASS__ . '.BlockType', 'Iframe');
@@ -99,10 +104,10 @@ public function forTemplate($holder = true)
                     'crossorigin' => 'anonymous'
                 ]
             );
+            // Custom script, with uniquenessId to set only once in the case of > 1 iframe elements in the page
             Requirements::customScript(
-<<<JS
-    iFrameResize({ log: true }, '.dynamic-item')
-JS
+                $this->DynamicCustomScript(),
+                'iframe-resizer-trigger'
             );
 
         }
@@ -119,6 +124,28 @@ public function forTemplate($holder = true)
         return parent::forTemplate($holder);
     }
 
+    /**
+     * Return the script used to handle dynamic height changes
+     * this fires iFrameResize on window.load
+     * @return string
+     */
+    public function DynamicCustomScript() : string {
+            $log = $this->config()->get('resizer_log') ? 'true' : 'false';
+            $script = <<<JAVASCRIPT
+window.addEventListener('load', function() {
+    try { iFrameResize( { log: {$log} }, '.iframe-resizer iframe' ); } catch (e) { console.warn(e); }
+});
+JAVASCRIPT;
+        return $script;
+    }
+
+    /**
+     * Return id attribute for iframe element
+     */
+    public function IframeID() : string {
+        return $this->getAnchor() . "-frame";
+    }
+
     /**
      * Return default 'allow' attribute values
      * @return string (escaped)
@@ -229,25 +256,30 @@ public function getCMSFields() {
                 ),
                 CheckboxField::create(
                     'IsLazy',
-                    _t(__CLASS__. '.LAZY_LOAD', 'Lazy load (only load the URL when contents are in view)')
+                    _t(__CLASS__. '.LAZY_LOAD', 'Lazy load')
+                )->setDescription(
+                    _t(
+                        __CLASS__ . '.LAZYLOAD_DESCRIPTION',
+                        'When checked, load the iframe URL when contents are in view'
+                    )
                 ),
                 CheckboxField::create(
                     'IsDynamic',
                     _t(__CLASS__. '.DYNAMIC', 'Automatically set height to iframe content')
                 )->setDescription(
                     _t(
-                        __CLASS__ . '.RESPONSIVE_DESCRIPTION',
-                        'Requires <a href="https://github.com/davidjbradshaw/iframe-resizer" target="_blank">Iframe-Resizer</a> installed on remote page.'
-                        )
+                        __CLASS__ . '.DYNAMIC_DESCRIPTION',
+                        'Requires <code>https://github.com/davidjbradshaw/iframe-resizer</code> to be installed on the remote page. This option is not compatible with responsive iframes.'
+                    )
                 ),
                 CheckboxField::create(
                     'IsFullWidth',
                     _t(__CLASS__. '.FULL_WIDTH', 'Enforce full width')
                 )->setDescription(
                     _t(
-                        __CLASS__ . '.RESPONSIVE_DESCRIPTION',
-                        'When set, this option will override the width to 100% of the container and maintain aspect ratio'
-                        )
+                        __CLASS__ . '.FULL_WIDTH_DESCRIPTION',
+                        'When checked, this option will override the width to 100% of the container and maintain aspect ratio'
+                    )
                 ),
                 DropdownField::create(
                     'IsResponsive',
@@ -263,10 +295,20 @@ public function getCMSFields() {
                 TextField::create(
                     'Width',
                     _t(__CLASS__. '.WIDTH', 'Width')
+                )->setDescription(
+                    _t(
+                        __CLASS__ . '.WIDTH_DESCRIPTION',
+                        'A width value, for example <code>100%</code> or <code>800</code>. Do not specify \'px\'.'
+                    )
                 ),
                 TextField::create(
                     'Height',
                     _t(__CLASS__. '.HEIGHT', 'Height')
+                )->setDescription(
+                    _t(
+                        __CLASS__ . '.HEIGHT_DESCRIPTION',
+                        'A height value, for example <code>200</code> or <code>800</code>. Do not specify \'px\'.'
+                    )
                 ),
                 TextareaField::create(
                     'AlternateContent',
diff --git a/templates/NSWDPC/Elemental/Models/Iframe/ElementIframe.ss b/templates/NSWDPC/Elemental/Models/Iframe/ElementIframe.ss
index 55d9279..a6b4cc3 100644
--- a/templates/NSWDPC/Elemental/Models/Iframe/ElementIframe.ss
+++ b/templates/NSWDPC/Elemental/Models/Iframe/ElementIframe.ss
@@ -1,10 +1,10 @@
 <div class="content-element__content<% if $StyleVariant %> {$StyleVariant}<% end_if %>">
     <% include ElementIframeTitle %>
-<div class="outer<% if $IsResponsive %> responsive-iframe is-{$IsResponsive.XML}<% end_if %>">
+<div class="outer<% if $IsDynamic %> iframe-resizer<% end_if %><% if $IsResponsive %> responsive-iframe is-{$IsResponsive.XML}<% end_if %>">
         <% if $IsLazy %><noscript class="loading-lazy"><% end_if %>
             <iframe
                 <% if $AlternateContent %>title="{$AlternateContent.XML}"<% end_if %>
-                <% if $IsResponsive %>class="responsive-item"<% end_if %>
+                class="<% if $IsResponsive %> responsive-item<% end_if %>"
                 width="{$IframeWidth.XML}"
                 height="{$IframeHeight.XML}"
                 id="{$Anchor.XML}-frame"