Merge pull request #126 from cynack/feat/add_some_customEvent

feat: イベントを追加
cynack · May 27, 2022 · b1cb3f9 · b1cb3f9
2 parents 0cffeb1 + 54f3539
commit b1cb3f9
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 47 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - WebXR の起動をサポート
 - QR コード表示パネルにアニメーションを追加
 - 有効なアニメーションの一覧を取得できるプロパティ(`availableAnimations`)を追加
+- `load`, `progress`, `finished` イベントを追加
 
 ### Changed
 

diff --git a/src/figni-viewer.js b/src/figni-viewer.js
@@ -80,7 +80,6 @@ export default class FigniViewerElement extends HTMLElement {
   // private field
   #completedInitialModelLoad = false
   #visibleAllHotspots = true
-  #events = {}
 
   #ABTEST = {
     AR_BUTTON_TEST: '実物大で見る',
@@ -147,6 +146,20 @@ export default class FigniViewerElement extends HTMLElement {
     // Figni Viewer Base
     if (!this.#figniViewerBase) {
       this.#figniViewerBase = document.createElement('figni-viewer-base')
+      // イベントの登録
+      this.#figniViewerBase.addEventListener('load', () => {
+        this.dispatchEvent(new CustomEvent('load'))
+      })
+      this.#figniViewerBase.addEventListener('progress', (e) => {
+        this.dispatchEvent(
+          new CustomEvent('progress', {
+            detail: { progress: e.detail.totalProgress },
+          })
+        )
+      })
+      this.#figniViewerBase.addEventListener('finished', () => {
+        this.dispatchEvent(new CustomEvent('finished'))
+      })
       this.appendChild(this.#figniViewerBase)
     }
 
@@ -316,7 +329,7 @@ export default class FigniViewerElement extends HTMLElement {
       }
     }
     if (!isLoop) {
-      this.#figniViewerBase.addEventListener('finished', onFinishFunc, {
+      this.addEventListener('animation-finished', onFinishFunc, {
         once: true,
       })
     } else {
@@ -783,12 +796,6 @@ export default class FigniViewerElement extends HTMLElement {
     })
   }
 
-  #subscribeEventLinstener(element, eventName, tag, callback) {
-    element.removeEventListener(eventName, this.#events[tag])
-    element.addEventListener(eventName, callback)
-    this.#events[tag] = callback
-  }
-
   #modifyHotspot(hotspot) {
     hotspot.classList.add('figni-viewer-hotspot')
     hotspot.classList.add('figni-viewer-hotspot-highlight')
@@ -821,7 +828,7 @@ export default class FigniViewerElement extends HTMLElement {
       hotspot.getAttribute('closeup') == ''
     const isVisible = hotspot.getAttribute('to-state') != null
 
-    this.#subscribeEventLinstener(hotspot, 'click', `${name}-data`, (e) => {
+    hotspot.addEventListener('click', (e) => {
       if (this.#clickableHotspot(hotspot)) {
         if (e.target === hotspot) {
           this.#figniViewerBase.incrementHotspotClickCount(name)
@@ -832,7 +839,7 @@ export default class FigniViewerElement extends HTMLElement {
     })
 
     if (isAnime) {
-      this.#subscribeEventLinstener(hotspot, 'click', `${name}-anime`, (e) => {
+      hotspot.addEventListener('click', (e) => {
         if (this.#clickableHotspot(hotspot)) {
           if (e.target === hotspot) {
             const clip = hotspot.getAttribute('clip') || null
@@ -853,54 +860,44 @@ export default class FigniViewerElement extends HTMLElement {
       })
     }
     if (isCloseup) {
-      this.#subscribeEventLinstener(
-        hotspot,
-        'click',
-        `${name}-closeup`,
-        (e) => {
-          if (this.#clickableHotspot(hotspot)) {
-            if (e.target === hotspot) {
-              const target =
-                hotspot.getAttribute('target') ||
-                hotspot.getAttribute('position') ||
-                SETTINGS.DEFAULT_HOTSPOT_POSITION
-              const orbit = hotspot.getAttribute('orbit') || this.orbit
-              if (
-                this.#figniViewerBase.cameraTarget === target &&
-                this.#figniViewerBase.cameraOrbit === orbit
-              ) {
-                this.resetCameraTargetAndOrbit()
-              } else {
-                this.setCameraTarget(target)
-                this.setCameraOrbit(orbit)
-              }
+      hotspot.addEventListener('click', (e) => {
+        if (this.#clickableHotspot(hotspot)) {
+          if (e.target === hotspot) {
+            const target =
+              hotspot.getAttribute('target') ||
+              hotspot.getAttribute('position') ||
+              SETTINGS.DEFAULT_HOTSPOT_POSITION
+            const orbit = hotspot.getAttribute('orbit') || this.orbit
+            if (
+              this.#figniViewerBase.cameraTarget === target &&
+              this.#figniViewerBase.cameraOrbit === orbit
+            ) {
+              this.resetCameraTargetAndOrbit()
+            } else {
+              this.setCameraTarget(target)
+              this.setCameraOrbit(orbit)
             }
           }
         }
-      )
+      })
     }
     if (!isAnime && isVisible) {
       const state = hotspot.getAttribute('to-state')
-      this.#subscribeEventLinstener(
-        hotspot,
-        'click',
-        `${name}-visible`,
-        (e) => {
-          if (this.#clickableHotspot(hotspot)) {
-            if (e.target === hotspot) {
-              this.updateState(state)
-            }
+      hotspot.addEventListener('click', (e) => {
+        if (this.#clickableHotspot(hotspot)) {
+          if (e.target === hotspot) {
+            this.updateState(state)
           }
         }
-      )
+      })
     }
 
     const panels = hotspot.querySelectorAll('[slot^="panel"]')
     this.#panels.push(...Array.from(panels))
     this.#panels.forEach((panel) => {
       this.#modifyPanel(panel)
     })
-    this.#subscribeEventLinstener(hotspot, 'click', `${name}-panel`, (e) => {
+    hotspot.addEventListener('click', (e) => {
       if (this.#clickableHotspot(hotspot)) {
         if (e.target == hotspot) {
           if (panels.length > 0) {
@@ -1041,7 +1038,7 @@ export default class FigniViewerElement extends HTMLElement {
         this.#ABTEST.AR_BUTTON_TEST
       }</span>`
       this.#arButton.classList.add('figni-viewer-ar-button')
-      this.#figniViewerBase.addEventListener('load', () => {
+      this.addEventListener('load', () => {
         if (this.#figniViewerBase.canActivateAR) {
           this.#arButton.setAttribute('slot', 'ar-button')
         } else {
@@ -1171,18 +1168,18 @@ export default class FigniViewerElement extends HTMLElement {
       loadingProgressBar.appendChild(loadingText)
       this.appendChild(this.#loadingPanel)
       const progress = (e) => {
-        const p = e.detail.totalProgress
+        const p = e.detail.progress
         loadingProgressBar.style.setProperty(
           '--figni-viewer-progress',
           `${Math.ceil(p * 100)}%`
         )
         if (p === 1) {
           this.#hideLoadingPanel()
           this.openTipsPanel(TIPS.DRAG)
-          this.#figniViewerBase.removeEventListener('progress', progress)
+          this.removeEventListener('progress', progress)
         }
       }
-      this.#figniViewerBase.addEventListener('progress', progress)
+      this.addEventListener('progress', progress)
     } else {
       this.#loadingPanel.style.display = ''
     }