From bf1cf2ca5b2f15f24f81dca71238f4715f8614e2 Mon Sep 17 00:00:00 2001
From: Tom <thomas.hodson@ecmwf.int>
Date: Wed, 8 Nov 2023 11:46:24 +0000
Subject: [PATCH] Add fallbacks for the custom elements
---
_includes/default_head_tags.html | 2 +-
_projects/bike_lights.md | 8 ++++++--
_projects/helmet_lights.md | 22 +++++++++++++++++++++-
_sass/main.scss | 21 +++++++++++++++++++++
assets/js/index.js | 11 +++++++----
5 files changed, 56 insertions(+), 8 deletions(-)
diff --git a/_includes/default_head_tags.html b/_includes/default_head_tags.html
index d84d48f..d1d99ba 100644
--- a/_includes/default_head_tags.html
+++ b/_includes/default_head_tags.html
@@ -64,7 +64,7 @@ See: https://developers.google.com/search/docs/advanced/mobile/google-discover?h
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
<link rel="stylesheet" href="/assets/css/styles.css">
-<script src="/assets/js/index.js"></script>
+<script src="/assets/js/index.js" async></script>
{% if page.mathjax %}
<script>
diff --git a/_projects/bike_lights.md b/_projects/bike_lights.md
index 7a814ea..55f81a8 100644
--- a/_projects/bike_lights.md
+++ b/_projects/bike_lights.md
@@ -19,14 +19,18 @@ head: |
{
"imports": {
"three": "https://unpkg.com/three@0.156.1/build/three.module.js",
- "three/addons/": "https://unpkg.com/three@0.156.1/examples/jsm/"
+ "three/addons/": "https://unpkg.com/three@0.156.1/examples/jsm/",
+ "dat.gui": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js"
}
}
</script>
<script src="/assets/js/three/index.js" type="module"></script>
---
-<outline-model-viewer model = "/assets/projects/bike_lights/models/bigger.glb"></outline-model-viewer>
+<outline-model-viewer model = "/assets/projects/bike_lights/models/bigger.glb">
+ <img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
+ <p class="has-wc">Loading model...</p>
+</outline-model-viewer>
<img src = "/assets/projects/bike_lights/bike_light.jpg">
diff --git a/_projects/helmet_lights.md b/_projects/helmet_lights.md
index 6e4e3a6..43b8b96 100644
--- a/_projects/helmet_lights.md
+++ b/_projects/helmet_lights.md
@@ -10,4 +10,24 @@ img:
class: invertable
social_image: /assets/projects/helmet_lights/thumbnail.png
----
\ No newline at end of file
+models: /assets/projects/helmet_lights/models
+
+head: |
+ <script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script>
+
+ <script type="importmap">
+ {
+ "imports": {
+ "three": "https://unpkg.com/three@0.156.1/build/three.module.js",
+ "three/addons/": "https://unpkg.com/three@0.156.1/examples/jsm/",
+ "dat.gui": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js"
+ }
+ }
+ </script>
+ <script src="/assets/js/three/index.js" type="module"></script>
+---
+
+<outline-model-viewer model = "{{page.models}}/model.glb">
+ <img class="outline-model-poster no-wc" src = "{{page.img.src}}">
+ <p class="has-wc">Loading model...</p>
+</outline-model-viewer>
\ No newline at end of file
diff --git a/_sass/main.scss b/_sass/main.scss
index 17c8087..a8f8cb1 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -115,6 +115,27 @@ figure > img, figure > svg, figure > canvas {
border-radius: 10px;
}
+// For fallback images inside custom outline-model-viewer elements
+outline-model-viewer, .outline-model-poster {
+ width: 100%;
+ height: 300px;
+}
+
+outline-model-viewer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+// If the browser doesn't support web components, hide anything with has-wc class
+body.has-wc .no-wc {
+ display: none;
+}
+// If the browser does support web components, hide anything with no-wc class
+body:not(.has-wc) .has-wc {
+ display: none;
+}
+
@media
only screen and (max-width: $horizontal_breakpoint),
only screen and (max-height: $vertical_breakpoint)
diff --git a/assets/js/index.js b/assets/js/index.js
index cf35068..8ad0d30 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -1,5 +1,3 @@
-
-
function toggle_summary_by_class(element, topic) {
details = document.querySelectorAll(`details.${topic}`);
@@ -10,6 +8,11 @@ function toggle_summary_by_class(element, topic) {
element.textContent = "Expand all"
details.forEach(e => e.open = false);
}
-
-
+
+}
+
+// This signals to css that we have support for web components
+// Allows us to set elements to act as fallbacks when js/web components are disabled.
+if (window.customElements) {
+ document.querySelector('body').classList.add('has-wc');
}
\ No newline at end of file