remove event listener

qazsato · Dec 3, 2024 · fd504c6 · fd504c6
1 parent 5fd1ec0
commit fd504c6
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 18 deletions.
diff --git a/docs/index-C_J3oI8y.js → docs/index-D-A78yw_.js b/docs/index-C_J3oI8y.js → docs/index-D-A78yw_.js
diff --git a/docs/index.html b/docs/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/maplibre-gl-compass/compass.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>maplibre-gl-compass</title>
-    <script type="module" crossorigin src="/maplibre-gl-compass/index-C_J3oI8y.js"></script>
+    <script type="module" crossorigin src="/maplibre-gl-compass/index-D-A78yw_.js"></script>
     <link rel="stylesheet" crossorigin href="/maplibre-gl-compass/index-oS4W3OgK.css">
   </head>
   <body>

diff --git a/src/components/DebugView.ts b/src/components/DebugView.ts
@@ -26,9 +26,9 @@ export class DebugView {
     const betaSpan = this.element.querySelector('.beta')
     const gammaSpan = this.element.querySelector('.gamma')
     if (eventName) eventName.textContent = event?.type || ''
-    if (headingSpan) headingSpan.textContent = `${heading}`
-    if (alphaSpan) alphaSpan.textContent = `${event?.alpha}`
-    if (betaSpan) betaSpan.textContent = `${event?.beta}`
-    if (gammaSpan) gammaSpan.textContent = `${event?.gamma}`
+    if (headingSpan) headingSpan.textContent = `${heading || ''}`
+    if (alphaSpan) alphaSpan.textContent = `${event?.alpha || ''}`
+    if (betaSpan) betaSpan.textContent = `${event?.beta || ''}`
+    if (gammaSpan) gammaSpan.textContent = `${event?.gamma || ''}`
   }
 }
diff --git a/src/maplibre-gl-compass.ts b/src/maplibre-gl-compass.ts
@@ -24,7 +24,7 @@ const defaultOptions: CompassControlOptions = {
   visible: true,
 }
 
-const eventTypes = ['deviceorientation', 'turnon', 'turnoff']
+const eventTypes = ['compass', 'turnon', 'turnoff']
 
 export class CompassControl implements IControl {
   private map: Map | undefined
@@ -85,8 +85,8 @@ export class CompassControl implements IControl {
 
   turnOn() {
     this.compassButton.turnOn()
-    this.enableDeviceOrientation()
-    this.enableDeviceOrientationAbsolute()
+    this.listenDeviceOrientation()
+    this.listenDeviceOrientationAbsolute()
 
     setTimeout(() => {
       if (this.active && this.currentHeading === undefined) {
@@ -107,6 +107,11 @@ export class CompassControl implements IControl {
       this.onDeviceOrientation,
       true,
     )
+    window.removeEventListener(
+      'deviceorientationabsolute',
+      this.onDeviceOrientation,
+      true,
+    )
     if (this.options.debug) {
       this.clearDebugView()
     }
@@ -124,15 +129,7 @@ export class CompassControl implements IControl {
     }
   }
 
-  private enableDeviceOrientationAbsolute() {
-    window.addEventListener(
-      'deviceorientationabsolute',
-      this.onDeviceOrientation,
-      true,
-    )
-  }
-
-  private enableDeviceOrientation() {
+  private listenDeviceOrientation() {
     // For iOS 13 and later
     // refs: https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent#browser_compatibility
     if ('requestPermission' in window.DeviceOrientationEvent) {
@@ -157,6 +154,14 @@ export class CompassControl implements IControl {
     window.addEventListener('deviceorientation', this.onDeviceOrientation, true)
   }
 
+  private listenDeviceOrientationAbsolute() {
+    window.addEventListener(
+      'deviceorientationabsolute',
+      this.onDeviceOrientation,
+      true,
+    )
+  }
+
   private onDeviceOrientation = (event: DeviceOrientationEvent) => {
     if (!this.map) return
     this.currentEvent = event as WebkitDeviceOrientationEvent