#270 Add v2-iframe

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%;
+}

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);
+}

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');

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 */