use homemade feature

Author: emnbdx

public/class-hello-asso-public.php

@@ -98,7 +98,6 @@ public function enqueue_scripts()
 		 * class.
 		 */
 
-		wp_enqueue_script('iframe-resizer', plugin_dir_url(__FILE__) . 'js/iframe-resizer.jquery.js', array('jquery'), $this->version, false);
 		wp_enqueue_script($this->plugin_name, plugin_dir_url(__FILE__) . 'js/hello-asso-public.js', array('jquery'), $this->version, false);
 	}
 
@@ -113,22 +112,23 @@ function ha_shortcode($atts)
 			$allowed_styles = array(
 				'style' => array(
 					'width' => array(),
-					'height' => array(),
-					'border' => array(),
-				),
+					'height' => array()
+				)
 			);
 
 			$pattern = '/^\d+px$/';
 
+			$height = "750px";
+			$width = "100%";
 			if ($type == "widget-bouton") {
 				$height = preg_match($pattern, $atts['height'] ?? 0) ? $atts['height'] : "70px";
-				$styleIframe = 'style="width:200px; height:' . $height . '; border:none;"';
+				$width = '200px';
 			} else if ($type == "widget") {
 				$height = preg_match($pattern, $atts['height'] ?? 0) ? $atts['height'] : "750px";
-				$styleIframe = 'style="width:100%; height:' . $height . '; border:none;"';
+				$width = '100%';
 			} else if ($type == "widget-vignette") {
 				$height = preg_match($pattern, $atts['height'] ?? 0) ? $atts['height'] : "450px";
-				$styleIframe = 'style="width:350px; height:' . $height . '; border:none;"';
+				$width = '350px';
 			} else {
 				$type = "";
 			}
@@ -139,7 +139,15 @@ function ha_shortcode($atts)
 
 			ob_start();
 ?>
-			<iframe src="<?= esc_url($url); ?><?= esc_html($type); ?>" id="idIframe" <?= wp_kses($styleIframe, $allowed_styles); ?> border="0"></iframe>
+			<iframe
+				id="idIframe"
+				src="<?= esc_url($url); ?><?= esc_html($type); ?>"
+				<?= wp_kses('height=' . $height . '"', $allowed_styles); ?>
+				<?= wp_kses('width=' . $width . '"', $allowed_styles); ?>
+				frameborder="0"
+				loading="lazy"
+				allowtransparency="true"
+				onload="resizeIframeMessage()"></iframe>
 <?php
 			return ob_get_clean();
 		}

public/js/hello-asso-public.js

@@ -1,10 +1,43 @@
-'use strict';
-
 (function ($) {
-    setTimeout(function () {
-        $('#idIframe').iframeResize({
-            license: 'GPLv3'
+    'use strict';
+
+    /**
+     * All of the code for your public-facing JavaScript source
+     * should reside in this file.
+     *
+     * Note: It has been assumed you will write jQuery code here, so the
+     * $ function reference has been prepared for usage within the scope
+     * of this function.
+     *
+     * This enables you to define handlers, for when the DOM is ready:
+     *
+     * $(function() {
+     *
+     * });
+     *
+     * When the window is loaded:
+     *
+     * $( window ).load(function() {
+     *
+     * });
+     *
+     * ...and/or other possibilities.
+     *
+     * Ideally, it is not considered best practise to attach more than a
+     * single DOM-ready or window-load handler for a particular page.
+     * Although scripts in the WordPress core, Plugins and Themes may be
+     * practising this, we should strive to set a better example in our own work.
+     */
+
+    window.resizeIframeMessage = function () {
+        window.addEventListener('message', e => {
+            const dataHeight = e.data.height;
+            const idIframeElement = document.getElementById('idIframe')
+
+            if (dataHeight > parseFloat(idIframeElement.height || 0)) {
+                idIframeElement.height = dataHeight + 'px'
+            }
         });
-    }, 500);
+    }
 
 })(jQuery);