Hide fidget toy arrow and text when model preview is hidden

Author: joebinns

about.html

@@ -12,12 +12,12 @@
 <div class="model-preview">
     <canvas class="webgl">
     </canvas>
-    <img id="fidget-toy" src="../images/about/arrow_purple.svg" style="position: absolute; left: 190px; top: 300px;">
+    <img id="fidget-toy-arrow" src="../images/about/arrow_purple.svg" style="position: absolute; left: 190px; top: 300px;">
+        <h1 id="fidget-toy-text" class="fidget-toy">
+            fidget<br>
+            &nbsp;toy
+        </h1>
     </img>
-    <h1 class="fidget-toy">
-        &nbsp;fidget<br>
-        toy
-    </h1>
 </div>
 <div class="padding logo-wrapper">
     <logo>

images/about/arrow.svg

@@ -4,7 +4,9 @@ import { PortfolioItem } from '../src/PortfolioItem.js';
 // Model previewer
 import { ModelPreviewer } from '../src/ModelPreviewer.js';
 
-
+let fidgettoytext = document.getElementById("fidget-toy-text");
+let fidgettoyarrow = document.getElementById("fidget-toy-arrow");
+let preview = document.querySelector('.model-preview');
 let portfolioItems = [];
 
 portfolioItems.push(
@@ -24,5 +26,26 @@ Promise.all(promises).then(() => {
 // Dark mode
 const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 if (userPrefersDark) {
-    document.getElementById("fidget-toy").src="/images/about/arrow.svg";
+    fidgettoyarrow.src="/images/about/arrow.svg";
+}
+
+Update();
+
+function Update() {
+    requestAnimationFrame(() => Update()); // Only update when tab open
+
+    const isHidden = preview.style.width == `0px`;
+    fidgettoytext.hidden = isHidden;
+    fidgettoyarrow.hidden = isHidden;
+}
+
+/*
+window.addEventListener('resize', onWindowResize);
+onWindowResize();
+
+function onWindowResize() {
+    if (!shouldDisplayPreview()) {
+        fidgettoy.hidden = false;
+    }
 }
+*/

src/About.js

@@ -58,7 +58,7 @@ class ObjectPicker {
     }
 }
 
-function shouldDisplayPreview() {
+export function shouldDisplayPreview() {
     return ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) > 800 &&
         ((window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - 241 - 65) >= 386);
 }

src/ModelPreviewer.js

@@ -915,11 +915,12 @@ overlay {
 .fidget-toy
 {
     position: absolute;
-    left: 275px;
-    top: 298px;
-    font-size: 20px;
+    left: 265px;
+    top: 288px;
+    font-size: 24px;
     color: #f8cda8;
     transform: rotate(-10deg);
+    font-family: 'Gloria Hallelujah';
 }
 
 /* Dark Mode */