From 6dce642550f0889cbc2181722e11a0bee6a63d0f Mon Sep 17 00:00:00 2001
From: Tomasz Dziezyk <tomasz.dziezyk@ds.pl>
Date: Mon, 18 Dec 2023 15:51:37 +0100
Subject: [PATCH] #200 Add v2-iframe

---
 blocks/v2-iframe/v2-iframe.css | 24 ++++++++++++++++++++++++
 blocks/v2-iframe/v2-iframe.js  | 21 +++++++++++++++++++++
 scripts/scripts.js             | 17 +++++++++++++----
 styles/styles.css              | 18 ++++++++++++++++++
 4 files changed, 76 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 000000000..6ebdf5870
--- /dev/null
+++ b/blocks/v2-iframe/v2-iframe.css
@@ -0,0 +1,24 @@
+.iframe iframe {
+  width: 100%;
+}
+
+.v2-iframe iframe {
+  width: 100%;
+}
+
+.v2-iframe.v2-iframe--full-viewport {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+}
+
+@supports (height: 1svh) {
+  .v2-iframe.v2-iframe--full-viewport {
+    height: 100svh;
+  }
+}
+
+.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 000000000..3abed6fbc
--- /dev/null
+++ b/blocks/v2-iframe/v2-iframe.js
@@ -0,0 +1,21 @@
+import { createElement, variantsClassesToBEM } from '../../scripts/common.js';
+
+export default async function decorate(block) {
+  const link = block.querySelector('a')?.getAttribute('href') || block.textContent.trim();
+  const title = block.querySelector('h1, h2, h3, h4, h5, h6').textContent;
+  const iframe = createElement('iframe', { props: { src: link, frameborder: 0, title } });
+  const fixedHeightClass = [...block.classList].find((el) => /[0-9]+px/.test(el));
+  const maxWidthClass = [...block.classList].find((el) => /width-[0-9]+px/.test(el));
+
+  variantsClassesToBEM(block.classList, ['full-viewport'], 'v2-iframe');
+
+  if (fixedHeightClass) {
+    iframe.height = fixedHeightClass;
+  }
+  if (maxWidthClass) {
+    const maxWidht = maxWidthClass.split('width-')[1];
+    iframe.style.maxWidth = maxWidht;
+  }
+
+  block.replaceChildren(iframe);
+}
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 1c7865980..66573dc44 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -632,7 +632,16 @@ function buildTruckLineupBlock(main, classname) {
   }
 }
 
-/* REDESING CLASS CHECK */
-if (getMetadata('style') === 'redesign-v2') {
-  document.querySelector('html').classList.add('redesign-v2');
-}
+const globalClasses = getMetadata('style').split(',').map((el) => el.trim());
+
+const moveClassToHtmlEl = (className) => {
+  if (globalClasses.includes(className)) {
+    document.querySelector('html').classList.add(className);
+  }
+};
+
+/* REDESIGN CLASS CHECK */
+moveClassToHtmlEl('redesign-v2');
+
+/* EXTERNAL APP CLASS CHECK */
+moveClassToHtmlEl('external-app');
diff --git a/styles/styles.css b/styles/styles.css
index 3c1f1aed3..885453cab 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1285,3 +1285,21 @@ main .section.responsive-title h1 {
   width: 1px;
   white-space: nowrap;
 }
+
+/* external 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;
+}
+
+/* external app styles end */