Truck configurator #200

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

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

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

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