ab: ARボタンのTipsを表示

index.html

@@ -121,6 +121,7 @@ <h4>タイトル</h4>
       <button onclick="viewer.openTipsPanel('drag')">
         openTipsPanel('drag')
       </button>
+      <button onclick="viewer.openTipsPanel('ar')">openTipsPanel('ar')</button>
       <button onclick="viewer.closeTipsPanel()">closeTipsPanel</button>
       <button onclick="viewer.openHelpPanel('top')">
         openHelpPanel('top')

src/figni-viewer.js

@@ -56,6 +56,7 @@ const HELP = {
 }
 const TIPS = {
   DRAG: 'drag',
+  AR: 'ar',
 }
 
 export default class FigniViewerElement extends HTMLElement {
@@ -90,7 +91,9 @@ export default class FigniViewerElement extends HTMLElement {
   #tipsHideCallback = null
   #toggleStates = {}
 
-  #ABTEST = {}
+  #ABTEST = {
+    IS_OPEN_AR_TIPS: true,
+  }
 
   get itemId() {
     return this.getAttribute('item-id')
@@ -201,13 +204,13 @@ export default class FigniViewerElement extends HTMLElement {
     })
 
     // AB TEST
-    // if (Math.random() > 0.5) {
-    //   this.#ABTEST['ABテスト名'] = true
-    //   this.base.registerABTestResult('abtest-name', true)
-    // } else {
-    //   this.#ABTEST['ABテスト名'] = false
-    //   this.base.registerABTestResult('abtest-name', false)
-    // }
+    if (Math.random() > 0.5) {
+      this.#ABTEST.IS_OPEN_AR_TIPS = true
+      this.base.registerABTestResult('is-open-ar-tips', true)
+    } else {
+      this.#ABTEST.IS_OPEN_AR_TIPS = false
+      this.base.registerABTestResult('is-open-ar-tips', false)
+    }
 
     // Figni Help Panel
     this.#showHelpPanel()
@@ -670,20 +673,34 @@ export default class FigniViewerElement extends HTMLElement {
   openTipsPanel(tips, delay = 6000) {
     this.closeTipsPanel()
     this.closeHelpPanel()
-    this.#helpButton.innerHTML = `${SVG_HELP_ICON}`
-    this.#tipsPanel.classList.remove('figni-viewer-tips-panel-hidden')
     let text = null
     let animation = null
     let help = HELP.TOP
+    let style = ''
+    let minimizeHelpButton = true
     switch (tips) {
       case TIPS.DRAG: {
         text = 'ドラッグするとコンテンツを回転できます'
         animation = CONTENT_OPERATION_ANIMATION
         help = HELP.CONTENT
+        style = 'top: 0.75em; right: 0.75em; transform-origin: top right;'
+        minimizeHelpButton = true
+        break
+      }
+      case TIPS.AR: {
+        text = '目の前に実物大の商品を表示できます'
+        animation = HOW_TO_AR_ANIMATION
+        help = HELP.AR
+        style = 'bottom: 3.75em; left: 0.75em; transform-origin: bottom left;'
+        minimizeHelpButton = false
         break
       }
     }
     if (text && animation) {
+      if (minimizeHelpButton) {
+        this.#helpButton.innerHTML = `${SVG_HELP_ICON}`
+      }
+      this.#tipsPanel.style = style
       this.#tipsPanel.querySelector('.figni-viewer-tips-panel-text').innerHTML =
         text
       const animationElement = this.#tipsPanel.querySelector(
@@ -705,9 +722,16 @@ export default class FigniViewerElement extends HTMLElement {
           once: true,
         }
       )
+      this.#tipsPanel.classList.remove('figni-viewer-tips-panel-hidden')
     }
   }
 
+  // TODO: TIPSごとに関数分ける
+  // TODO: ARではARボタンのテキストをなくしてボタンを丸くする
+  openDragTipsPanel() {
+    this.#helpButton.innerHTML = `${SVG_HELP_ICON}`
+  }
+
   closeTipsPanel() {
     if (this.#tipsHideCallback) clearTimeout(this.#tipsHideCallback)
     this.#helpButton.innerHTML = `${SVG_HELP_ICON}<span>使い方</span>`
@@ -847,8 +871,6 @@ export default class FigniViewerElement extends HTMLElement {
     })
   }
 
-  count = 1
-
   #modifyHotspot(hotspot) {
     hotspot.classList.add('figni-viewer-hotspot')
     hotspot.classList.add('figni-viewer-hotspot-highlight')
@@ -1308,7 +1330,9 @@ export default class FigniViewerElement extends HTMLElement {
       })
       this.addEventListener('load', () => {
         this.#hideLoadingPanel()
-        this.openTipsPanel(TIPS.DRAG)
+        if (this.#ABTEST.IS_OPEN_AR_TIPS) {
+          this.openTipsPanel(TIPS.AR)
+        }
       })
     } else {
       this.#loadingPanel.style.display = ''

src/style.scss

@@ -263,7 +263,7 @@ figni-viewer {
   height: 2.5em;
   left: 0.5em;
   bottom: 0.5em;
-  background-color: white;
+  background-color: var(--figni-viewer-primary);
   border: none;
   border-radius: 2em;
   padding: 0 1.25em;
@@ -275,18 +275,18 @@ figni-viewer {
   svg {
     width: 0.875em;
     height: 0.875em;
-    margin-right: 0.3em;
     path {
-      fill: var(--figni-viewer-primary);
+      fill: white;
     }
   }
   span {
     display: block;
-    color: var(--figni-viewer-primary);
+    color: white;
     font-size: 12px;
     font-family: var(--figni-viewer-font);
     font-weight: bold;
     margin-bottom: 0.1em;
+    margin-left: 0.3em;
   }
 }
 
@@ -624,7 +624,7 @@ figni-viewer {
   padding: 0 0.5em;
   right: 0.5em;
   top: 0.5em;
-  background-color: var(--figni-viewer-primary);
+  background-color: #ffffff;
   border: none;
   border-radius: 1.25em;
   font-weight: bold;
@@ -646,7 +646,7 @@ figni-viewer {
 
 .figni-viewer-help-button span {
   display: block;
-  color: #ffffff;
+  color: var(--figni-viewer-primary);
   font-size: 0.75em;
   font-family: var(--figni-viewer-font);
   font-weight: bold;
@@ -657,15 +657,12 @@ figni-viewer {
 
 .figni-viewer-tips-panel {
   position: absolute;
-  top: 0.75em;
-  right: 0.75em;
   display: flex;
   flex-direction: row;
   border-radius: 0.5em;
   background-color: #ffffff;
-  transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) all;
   z-index: 9997;
-  transform-origin: top right;
+  transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) transform;
   transform: scale(1);
   cursor: pointer;
 }