Add model-viewer block for the Web Components docs page

blocks/model-viewer/assets/smithsonian-neil-armstrong/README.md

@@ -0,0 +1,2 @@
+The assets in this folder come from the
+model-viewer demo page at https://modelviewer.dev/

blocks/model-viewer/model-viewer.css

@@ -0,0 +1,3 @@
+.model-viewer model-viewer {
+  height: 20em;
+}

blocks/model-viewer/model-viewer.js

@@ -0,0 +1,36 @@
+import '../../web-components/lazy-loader.js';
+
+// Replace the block's content with model-viewer custom element
+// inside a lazy-loader so that it's loaded delayed
+export default function decorate($block) {
+  const assetPrefix = '/blocks/model-viewer/assets';
+
+  // First row of the block defines the model, second one the alt text
+  const model = $block.querySelector(':scope > div > div ')?.textContent?.trim();
+  const alt = $block.querySelector(':scope > div:nth-child(2) > div')?.textContent?.trim();
+
+  // Need a template element for lazy-loader to work
+  const loader = document.createElement('lazy-loader');
+  loader.innerHTML = `
+    <p class="remove">
+      <em>If all goes well, this should be replaced by an interactive 3D model of Neil Armstrong's Spacesuit...</em>
+    </p>
+    <template>
+      <script
+        src='/web-components/google-model-viewer.min.js'
+        type='module'
+      ></script>
+      <model-viewer
+        alt="${alt}"
+        ar='true'
+        src='${assetPrefix}/${model}/3d-model.glb'
+        environment-image='${assetPrefix}/${model}/environment-image.hdr'
+        poster='${assetPrefix}/${model}/poster.webp'
+        shadow-intensity=1
+        camera-controls='true'
+        touch-action='pan-y'
+      ></model-viewer>
+    </template>
+  `;
+  $block.replaceChildren(loader);
+}

scripts/delayed.js

@@ -73,3 +73,5 @@ document.addEventListener('mousemove', (e) => {
     }
   });
 });
+
+document.dispatchEvent(new CustomEvent('hlx:delayed'));

tests/blocks/model-viewer/model-viewer.mock.html

@@ -0,0 +1,13 @@
+<div class="section content model-viewer-container">
+  <div class="model-viewer-wrapper">
+    <div class="model-viewer block">
+      <div>
+        <div>the-model-name</div>
+      </div>
+      <div>
+        <div>The model's description</div>
+      </div>
+    </div>
+  </div>
+</div>
+</div>

tests/blocks/model-viewer/model-viewer.test.js

@@ -0,0 +1,42 @@
+/* eslint-disable no-unused-expressions */
+/* global describe it */
+
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import decorate from '../../../blocks/model-viewer/model-viewer.js';
+
+const mock = await readFile({ path: './model-viewer.mock.html' });
+document.body.innerHTML = mock;
+
+describe('Model viewer block', async () => {
+  it('has a model-viewer element', async () => {
+    const block = document.querySelector('.block');
+    decorate(block);
+    const loader = document.querySelector('lazy-loader');
+    expect(loader).to.exist;
+    const template = loader.querySelector('template');
+    const cloned = template.content.cloneNode(true);
+    document.body.append(cloned);
+
+    const mv = document.body.querySelector('model-viewer');
+    expect(mv).to.exist;
+    const expected = {
+      src: '/blocks/model-viewer/assets/the-model-name/3d-model.glb',
+      alt: 'The model\'s description',
+      ar: 'true',
+      'environment-image': '/blocks/model-viewer/assets/the-model-name/environment-image.hdr',
+      poster: '/blocks/model-viewer/assets/the-model-name/poster.webp',
+      'shadow-intensity': '1',
+      'camera-controls': 'true',
+      'touch-action': 'pan-y',
+    };
+    Object.keys(expected).forEach((k) => {
+      expect(mv.getAttribute(k)).to.equal(expected[k], `Expected attribute value '${k}' to match`);
+    });
+
+    const script = document.body.querySelector('script');
+    expect(script).to.exist;
+    expect(script.getAttribute('src')).to.equal('/web-components/google-model-viewer.min.js');
+    expect(script.getAttribute('type')).to.equal('module');
+  });
+});

tests/web-components/lazy-loader.mock.html

@@ -0,0 +1,7 @@
+<script type="module" src="../../web-components/lazy-loader.js"></script>
+<lazy-loader>
+  <template>
+    <script src="42" type="test-type"></script>
+    <some-custom-element id="12"></some-custom-element>
+  </template>
+</lazy-loader>

tests/web-components/lazy-loader.test.js

@@ -0,0 +1,38 @@
+/* eslint-disable no-unused-expressions */
+/* global describe it */
+
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import '../../web-components/lazy-loader.js';
+
+document.body.innerHTML = await readFile({ path: './lazy-loader.mock.html' });
+
+describe('Lazy-loader Web Component test', async () => {
+  const sceSelector = 'some-custom-element';
+  const scriptSelector = "script[src='42']";
+
+  it('Registers a lazy-loader component', async () => {
+    const loader = customElements.get('lazy-loader');
+    expect(loader).to.exist;
+  });
+
+  it('Does not activate elements before hlx:delayed ', async () => {
+    expect(document.querySelector(sceSelector)).to.be.null;
+    expect(document.querySelector(scriptSelector)).to.be.null;
+  });
+
+  it('Activates elements once hlx:delayed is received', async () => {
+    document.dispatchEvent(new CustomEvent('hlx:delayed'));
+    const sce = document.body.querySelector(sceSelector);
+    expect(sce).to.exist;
+    expect(sce.getAttribute('id')).to.equal('12');
+  });
+
+  it('Moves scripts under document.head with async loading', async () => {
+    document.dispatchEvent(new CustomEvent('hlx:delayed'));
+    const script = document.head.querySelector(scriptSelector);
+    expect(script).to.exist;
+    expect(script.getAttribute('type')).to.equal('test-type');
+    expect(script.getAttribute('async')).to.equal('true');
+  });
+});

web-components/lazy-loader.js

@@ -0,0 +1,35 @@
+// Web Component that activates any <template>
+// elements that it contains only once the
+// 'hlx:delayed' event is received.
+class LazyLoader extends HTMLElement {
+  static register() {
+    customElements.define('lazy-loader', LazyLoader);
+  }
+
+  constructor() {
+    super();
+    document.addEventListener('hlx:delayed', this.activateTemplates.bind(this));
+  }
+
+  activateTemplates() {
+    this.querySelectorAll('template').forEach((t) => {
+      this.append(t.content.cloneNode(true));
+      this.querySelectorAll('script').forEach((s) => {
+        // move any script tags found in the template
+        // to document.head to activate them
+        const script = document.createElement('script');
+        script.setAttribute('src', s.getAttribute('src'));
+        script.setAttribute('type', s.getAttribute('type'));
+        script.setAttribute('async', 'true');
+        document.head.appendChild(script);
+        s.parentNode.removeChild(s);
+      });
+      // Remove any "please wait" elements
+      this.querySelectorAll('.remove').forEach((r) => {
+        r.parentNode.removeChild(r);
+      });
+    });
+  }
+}
+
+LazyLoader.register();