Fixes #20: errors due to vibration in iOS/Safari

Also updates CSS to disable user selection of text in webkit browsers, which require a prefix for user-select.
kflorence · Mar 1, 2024 · def65f7 · def65f7
1 parent d50916f
commit def65f7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/components/interact.js b/src/components/interact.js
@@ -2,6 +2,8 @@ import paper, { Point } from 'paper'
 import { Cache } from './cache'
 import { EventListeners } from './eventListeners'
 
+const navigator = window.navigator
+
 export class Interact {
   #bounds
   #cache = new Cache(Object.values(Interact.CacheKeys))
@@ -162,6 +164,15 @@ export class Interact {
     return new Point(event.clientX, event.clientY)
   }
 
+  static vibrate (pattern = 25) {
+    if (Interact.canVibrate) {
+      navigator.vibrate(pattern)
+    }
+  }
+
+  // WebKit does not support vibration
+  static canVibrate = typeof navigator.vibrate === 'function'
+
   static CacheKeys = Object.freeze({
     Down: 'down',
     Move: 'move',
@@ -176,5 +187,4 @@ export class Interact {
 
   static maxZoom = 2
   static minZoom = 0.5
-  static vibratePattern = 25
 }
diff --git a/src/components/modifier.js b/src/components/modifier.js
@@ -7,7 +7,6 @@ import { Item } from './item'
 
 const modifiersImmutable = document.getElementById('modifiers-immutable')
 const modifiersMutable = document.getElementById('modifiers-mutable')
-const navigator = window.navigator
 
 let uniqueId = 0
 
@@ -148,7 +147,7 @@ export class Modifier extends Stateful {
   onSelected () {
     Modifier.deselect()
 
-    navigator.vibrate(Interact.vibratePattern)
+    Interact.vibrate()
 
     this.update({ selected: true })
 
@@ -167,7 +166,7 @@ export class Modifier extends Stateful {
   }
 
   onToggle () {
-    navigator.vibrate(Interact.vibratePattern)
+    Interact.vibrate()
   }
 
   remove () {

diff --git a/src/styles.css b/src/styles.css
@@ -144,6 +144,8 @@ body > header {
   position: relative;
   /* Prevent Chrome from trying to open search on tap in mobile. */
   user-select: none;
+  /* For iOS/Safari. */
+  -webkit-user-select: none;
   z-index: 1;
 }
 
@@ -298,6 +300,8 @@ main {
     'GRAD' 0,
     'opsz' 24;
   user-select: none;
+  /* For iOS/Safari. */
+  -webkit-user-select: none;
   vertical-align: middle;
 }
 
@@ -308,6 +312,8 @@ main {
     'GRAD' 0,
     'opsz' 24;
   user-select: none;
+  /* For iOS/Safari. */
+  -webkit-user-select: none;
 }
 
 .menu {
@@ -351,6 +357,8 @@ main {
 
 .modifiers {
   user-select: none;
+  /* For iOS/Safari. */
+  -webkit-user-select: none;
 }
 
 .puzzle-error .flex-left,