tom/personal_site
1
0
Fork 0
mirror of https://github.com/TomHodson/tomhodson.github.com.git synced 2025-06-26 10:01:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add fallbacks for the custom elements

Browse Source
This commit is contained in:
Tom 2023-11-08 11:46:24 +00:00
parent fd47384485
commit bf1cf2ca5b
5 changed files with 56 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/default_head_tags.html
View File

@ -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>

8
_projects/bike_lights.md
View File

@ -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">

20
_projects/helmet_lights.md
View File

@ -10,4 +10,24 @@ img:
class: invertable
social_image: /assets/projects/helmet_lights/thumbnail.png
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>

21
_sass/main.scss
View File

@ -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)

9
assets/js/index.js
View File

@ -1,5 +1,3 @@
function toggle_summary_by_class(element, topic) {
details = document.querySelectorAll(`details.${topic}`);
@ -11,5 +9,10 @@ function toggle_summary_by_class(element, topic) {
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');
}