From 7a416dbb19fb689f15c4158b005eb81776919756 Mon Sep 17 00:00:00 2001
From: Tomasz Dziezyk <tomasz.dziezyk@ds.pl>
Date: Fri, 8 Dec 2023 13:07:56 +0100
Subject: [PATCH] #270 Add v2-iframe

---
 blocks/v2-iframe/v2-iframe.css | 14 ++++++++++++++
 blocks/v2-iframe/v2-iframe.js  | 17 +++++++++++++++++
 scripts/scripts.js             | 15 +++++++++++----
 styles/styles.css              | 18 ++++++++++++++++++
 4 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 blocks/v2-iframe/v2-iframe.css
 create mode 100644 blocks/v2-iframe/v2-iframe.js

diff --git a/blocks/v2-iframe/v2-iframe.css b/blocks/v2-iframe/v2-iframe.css
new file mode 100644
index 00000000..c697211d
--- /dev/null
+++ b/blocks/v2-iframe/v2-iframe.css
@@ -0,0 +1,14 @@
+.v2-iframe iframe {
+  width: 100%;
+}
+
+.v2-iframe.v2-iframe--full-viewport {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+}
+
+.v2-iframe--full-viewport iframe {
+  width: 100%;
+  height: 100%;
+}
diff --git a/blocks/v2-iframe/v2-iframe.js b/blocks/v2-iframe/v2-iframe.js
new file mode 100644
index 00000000..b935dbe2
--- /dev/null
+++ b/blocks/v2-iframe/v2-iframe.js
@@ -0,0 +1,17 @@
+import { variantsClassesToBEM } from '../../scripts/common.js';
+
+export default async function decorate(block) {
+  const iframe = document.createElement('iframe');
+  const link = block.querySelector('a')?.getAttribute('href') || block.textContent.trim();
+  const fixedHeightClass = [...block.classList].find((el) => /[0-9]+px/.test(el));
+
+  variantsClassesToBEM(block.classList, ['full-viewport'], 'v2-iframe');
+
+  if (fixedHeightClass) {
+    iframe.height = fixedHeightClass;
+  }
+
+  iframe.src = link;
+  iframe.setAttribute('frameborder', 0);
+  block.replaceChildren(iframe);
+}
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 2383881c..bfa3c492 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -665,8 +665,15 @@ export function getImageForBreakpoint(imagesList, onChange = () => { }) {
   onDesktopChange(desktopMQ);
 }
 
+const moveClassToHtmlEl = (className, elementSelector = 'main') => {
+  if (document.querySelector(elementSelector).classList.contains(className)) {
+    document.querySelector('html').classList.add(className);
+    document.querySelector(elementSelector).classList.remove(className);
+  }
+};
+
 /* REDESING CLASS CHECK */
-if (document.querySelector('main').classList.contains('redesign-v2')) {
-  document.querySelector('html').classList.add('redesign-v2');
-  document.querySelector('main').classList.remove('redesign-v2');
-}
+moveClassToHtmlEl('redesign-v2');
+
+/* ETERNAL APP CLASS CHECK */
+moveClassToHtmlEl('external-app');
diff --git a/styles/styles.css b/styles/styles.css
index 6dd38609..89bd835e 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1730,3 +1730,21 @@ main.blue-contract .section.section-with-title p {
 }
 
 /* generic tooltip styles  ends here */
+
+/* externa app styles start */
+
+.external-app header,
+.external-app footer {
+  display: none;
+}
+
+.external-app .v2-iframe-wrapper {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.external-app .section.v2-iframe-container {
+  padding: 0;
+}
+
+/* externa app styles end */