feat: integrate with iframe resizer for embedding myep

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "@hotwired/stimulus": "^3.2.1",
         "@hotwired/stimulus-webpack-helpers": "^1.0.1",
+        "@iframe-resizer/parent": "^5.3.2",
         "@splidejs/splide": "^2.4.21",
         "axios": "^1.6.2",
         "cooltipz-css": "^1.6.8",
@@ -1797,6 +1798,27 @@
         "@hotwired/stimulus": ">= 3.0"
       }
     },
+    "node_modules/@iframe-resizer/core": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/@iframe-resizer/core/-/core-5.3.2.tgz",
+      "integrity": "sha512-is6VXW1m/9y7ZUwyjUuHu5101TPFa69Rv8jNY0HrT5svwb1ICPZKeaoVzDw0TTBBa5eE7XfEFcXCeiP6UR9W3w==",
+      "funding": {
+        "type": "individual",
+        "url": "https://iframe-resizer.com/pricing/"
+      }
+    },
+    "node_modules/@iframe-resizer/parent": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/@iframe-resizer/parent/-/parent-5.3.2.tgz",
+      "integrity": "sha512-xjrQpRtsC9p1pBUKewYI9cmHoxomhGGSvspLq7Xgh4uYiifORaHqrqOnAgWKsV6Gl83s16g3RE1v1hRM7ZNOMQ==",
+      "dependencies": {
+        "@iframe-resizer/core": "5.3.2"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://iframe-resizer.com/pricing/"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -10592,6 +10614,19 @@
       "integrity": "sha512-wa/zupVG0eWxRYJjC1IiPBdt3Lruv0RqGN+/DTMmUWUyMAEB27KXmVY6a8YpUVTM7QwVuaLNGW4EqDgrS2upXQ==",
       "requires": {}
     },
+    "@iframe-resizer/core": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/@iframe-resizer/core/-/core-5.3.2.tgz",
+      "integrity": "sha512-is6VXW1m/9y7ZUwyjUuHu5101TPFa69Rv8jNY0HrT5svwb1ICPZKeaoVzDw0TTBBa5eE7XfEFcXCeiP6UR9W3w=="
+    },
+    "@iframe-resizer/parent": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/@iframe-resizer/parent/-/parent-5.3.2.tgz",
+      "integrity": "sha512-xjrQpRtsC9p1pBUKewYI9cmHoxomhGGSvspLq7Xgh4uYiifORaHqrqOnAgWKsV6Gl83s16g3RE1v1hRM7ZNOMQ==",
+      "requires": {
+        "@iframe-resizer/core": "5.3.2"
+      }
+    },
     "@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@hotwired/stimulus": "^3.2.1",
     "@hotwired/stimulus-webpack-helpers": "^1.0.1",
+    "@iframe-resizer/parent": "^5.3.2",
     "@splidejs/splide": "^2.4.21",
     "axios": "^1.6.2",
     "cooltipz-css": "^1.6.8",

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/iframe_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus';
+import iframeResize from '@iframe-resizer/parent';
+
+export default class extends Controller {
+    static values = {
+        license: {
+            type: String,
+            default: 'GPLv3',
+        }
+    }
+
+    connect() {
+        iframeResize({
+            license: this.licenseValue,
+            waitForLoad: true
+        }, this.element)
+    }
+}

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_base.scss

@@ -8,4 +8,9 @@
     [data-rte-content] {
         @import "base/rte-content";
     }
+
+    iframe {
+        width: 100%;
+        height: 100vh;
+    }
 }