refactorize touch and pointer events

ZuliusRoolf · Oct 28, 2024 · 6382146 · 6382146
1 parent f75502e
commit 6382146
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/website/index.html b/website/index.html
@@ -14,7 +14,7 @@
   <div class="main">
     <!-- Biography -->
     <div class="main__column" id="biography">
-      <div class="biography biography--show" id="biography__template">
+      <div class="biography" id="biography__template">
         <div class="biography__picture">
           <img src="content/photos/portrait_template.png" alt="Portrait Photo" height="256">
         </div>

diff --git a/website/scripts/handle_projects.js b/website/scripts/handle_projects.js
@@ -32,23 +32,22 @@ export function projectsAddEventListeners(document) {
     }, true);
 
     let isTouch = false;
-    portfolioContainer.addEventListener('touchstart', function (event) {
-        isTouch = true;
-        var button = event.target.closest('.project__button');
-        if (button) {
-            showTouchSelectedProject(button);
-        }
-    }, { passive: true });
-
     portfolioContainer.addEventListener('pointerdown', function (event) {
         var button = event.target.closest('.project__button');
-        if (button && window.innerWidth < 768) {
+        if (!button) {
             return;
         }
-        if (button && !isTouch) {
-            showSelectedProject(button);
+        if (event.pointerType === 'touch') {
+            isTouch = true;
+            showTouchSelectedProject(button);
+            return;
         }
         isTouch = false;
+        if (window.innerWidth < 768) {
+            showTouchSelectedProject(button);
+            return;
+        }
+            showSelectedProject(button);
     }, true);
 
     // Function to get the template content of a button

diff --git a/website/styles.css b/website/styles.css
@@ -168,6 +168,9 @@ body {
 #if__biography__about {
     display: none;
 }
+.biography {
+    padding: 15px;
+}
 
 .biography__picture {
     opacity: 1;