Add user prefer

rayc2045 · Apr 20, 2024 · 97d427e · 97d427e
1 parent 56ecbc4
commit 97d427e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -35,7 +35,7 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js" defer></script>
   </head>
   <body
-    x-data="{ BRAND_NAME, ...utils, localStore, router, shop }"
+    x-data="{ BRAND_NAME, prefer, localStore, ...utils, router, shop }"
     class="min-h-svh flex flex-col"
     @dragstart.prevent
   >

diff --git a/src/app.js b/src/app.js
@@ -1,8 +1,25 @@
 'use strict';
+const { log } = console;
 
 const BRAND_NAME = 'Hyper';
 
-const { log } = console;
+const prefer = {
+  motion: !window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+};
+
+const STORAGE_KEY = `${BRAND_NAME.replaceAll(' ', '-')}-hyper-app`;
+const localStore = {
+  fetch() {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY));
+  },
+  save(id) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(id));
+  },
+  remove() {
+    localStorage.removeItem(STORAGE_KEY);
+  },
+};
+
 const utils = {
   log,
   async svg(name) {
@@ -37,6 +54,7 @@ const utils = {
     return entries;
   },
   async scrollToTop() {
+    if (!prefer.motion) return scrollTo({ top: 0 });
     scrollTo({ top: 0, behavior: 'smooth' });
     if (document.body.offsetHeight > window.innerHeight && window.scrollY > 0)
       await this.delay(0.6);
@@ -60,19 +78,6 @@ const utils = {
   },
 };
 
-const STORAGE_KEY = `${BRAND_NAME.replaceAll(' ', '-')}-hyper-app`;
-const localStore = {
-  fetch() {
-    return JSON.parse(localStorage.getItem(STORAGE_KEY));
-  },
-  save(id) {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(id));
-  },
-  remove() {
-    localStorage.removeItem(STORAGE_KEY);
-  },
-};
-
 const router = {
   routes: [
     { path: '/', component: '/home.html' },