Merge pull request #1318 from hlxsites/fix-spline-viewer

Fixed spline viewer issue

blocks/spline-viewer/spline-viewer.css

@@ -0,0 +1,23 @@
+.spline-viewer-wrapper :is(.block) {
+  display: block
+}
+
+.spline-viewer-wrapper :is(.\!h-\[200px\]) {
+  height: 200px !important
+}
+
+.spline-viewer-wrapper :is(.bg-danaherlightblue-50) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 251 253 / var(--tw-bg-opacity))
+}
+
+.spline-viewer-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
+@media (min-width: 768px) {
+  .spline-viewer-wrapper :is(.md\:\!h-\[600px\]) {
+    height: 600px !important
+  }
+}

blocks/spline-viewer/spline-viewer.js

@@ -1,3 +1,4 @@
+import { loadScript } from '../../scripts/lib-franklin.js';
 import { getFragmentFromFile } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
@@ -7,9 +8,17 @@ export default async function decorate(block) {
     block.innerHTML = '';
     const parser = new DOMParser();
     const fragmentHtml = parser.parseFromString(fragment, 'text/html');
-    [...fragmentHtml.body.children].forEach((item) => {
-      block.append(item);
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((e) => e.isIntersecting)) {
+        observer.disconnect();
+        setTimeout(() => {
+          loadScript(fragmentHtml?.head?.firstElementChild?.src, { type: 'module' });
+          block.append(fragmentHtml?.body?.firstElementChild);
+        }, 2000);
+      }
     });
+    observer.observe(block);
+    block.classList.add('!h-[200px]', 'md:!h-[600px]');
   } catch (e) {
     block.textContent = '';
     // eslint-disable-next-line no-console

build-css.js

@@ -106,6 +106,11 @@ const fileMappings = [
     output: './blocks/mini-teasers/mini-teasers.css',
     wrapper: 'mini-teasers-wrapper',
   },
+  {
+    content: './blocks/spline-viewer/spline-viewer.js',
+    output: './blocks/spline-viewer/spline-viewer.css',
+    wrapper: 'spline-viewer-wrapper',
+  },
   {
     content: ['./blocks/page-jump-menu/page-jump-menu.js', './blocks/page-tabs/page-tabs.js'],
     output: './blocks/page-jump-menu/page-jump-menu.css',

head.html

@@ -5,4 +5,4 @@
 <link rel="preconnect" href="https://danaherls.scene7.com">
 <link rel="dns-prefetch" href="https://danaherls.scene7.com">
 <link rel="stylesheet" href="/styles/styles.css"/>
-<script type="application/ld+json" data-name="website">{"@context":"https://schema.org","@type":"WebSite","url":" https://lifesciences.danaher.com/","name":"Danaher Life Sciences","alternateName":"DH Life Sciences","description":" Explore our automation solutions, analytical innovations, and digital solutions to accelerate drug development time by up to 50%. We empower the creation of biopharmaceuticals, gene/cell therapies & innovative treatments.","potentialAction":{"@type":"SearchAction","target":"https://lifesciences.danaher.com/us/en/search.html#q={search_term_string}","query-input":"required name=search_term_string"}}</script>
+<script type="application/ld+json" data-name="website">{"@context":"https://schema.org","@type":"WebSite","url":" https://lifesciences.danaher.com/","name":"Danaher Life Sciences","alternateName":"DH Life Sciences","description":" Explore our automation solutions, analytical innovations, and digital solutions to accelerate drug development time by up to 50%. We empower the creation of biopharmaceuticals, gene/cell therapies & innovative treatments.","potentialAction":{"@type":"SearchAction","target":"https://lifesciences.danaher.com/us/en/search.html#q={search_term_string}","query-input":"required name=search_term_string"}}</script>

styles/styles.css

@@ -727,20 +727,20 @@ body.appear {
   width: 100%;
 }
 
-main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container, .stats-container) {
+main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container, .stats-container, .spline-viewer-container) {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
 
 @media (min-width: 768px) {
-  main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container, .stats-container) {
+  main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container, .stats-container, .spline-viewer-container) {
     padding-top: 3rem;
     padding-bottom: 3rem;
   }
 
-  main .section > div:not(.carousel-wrapper, .page-jump-menu-wrapper, .page-tabs-wrapper) {
+  main .section > div:not(.carousel-wrapper, .page-jump-menu-wrapper, .page-tabs-wrapper, .spline-viewer-wrapper) {
     margin-left: auto;
     margin-right: auto;
     max-width: 80rem;

styles/tailwind.css

@@ -88,11 +88,11 @@
     @apply h-full w-full;
   }
 
-  main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container, .stats-container) {
+  main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container, .stats-container, .spline-viewer-container) {
     @apply px-6 py-8 md:py-12;
   }
 
-  main .section > div:not(.carousel-wrapper, .page-jump-menu-wrapper, .page-tabs-wrapper) {
+  main .section > div:not(.carousel-wrapper, .page-jump-menu-wrapper, .page-tabs-wrapper, .spline-viewer-wrapper) {
     @apply md:max-w-7xl md:mx-auto;
   }