eruda-orientation.js

class Orientation extends eruda.Tool {
  constructor() {
    super()
    this.name = 'orientation'
    this.displayName = 'デバイスの回転'
  }

  init($el) {
    super.init($el)
    this._style = eruda.util.evalCss(
      [
        '.eruda-dev-tools .eruda-tools .eruda-orientation {',
        '  padding: 10px;',
        '  font-family: Arial, sans-serif;',
        '}',
        '.eruda-cube {',
        '  width: 100px;',
        '  height: 100px;',
        '  margin: 10px auto;',
        '  background: #eee;',
        '  border: 1px solid #ccc;',
        '  transform-style: preserve-3d;',
        '  transition: transform 0.3s ease;',
        '}',
        '.eruda-coordinates, .eruda-acceleration, .eruda-acceleration-including-gravity, .eruda-rotation-rate, .eruda-interval {',
        '  margin-top: 5px;',
        '  font-size: 12px;',
        '  color: #333;',
        '}',
        '.eruda-not-supported {',
        '  color: red;',
        '  text-align: center;',
        '  padding: 20px;',
        '}',
      ].join('')
    )

    const isSupported =
      window.DeviceOrientationEvent && window.DeviceMotionEvent

    if (!isSupported) {
      $el.html(
        '<div class="eruda-not-supported">Not supported for this browser!</div>'
      )
    } else {
      $el.html(
        [
          '<div class="eruda-cube"></div>',
          '<div class="eruda-coordinates">Alpha: <span class="alpha">0</span>, Beta: <span class="beta">0</span>, Gamma: <span class="gamma">0</span></div>',
          '<div class="eruda-acceleration">Acceleration: <span class="x">0</span>, <span class="y">0</span>, <span class="z">0</span></div>',
          '<div class="eruda-acceleration-including-gravity">Acceleration Including Gravity: <span class="xg">0</span>, <span class="yg">0</span>, <span class="zg">0</span></div>',
          '<div class="eruda-rotation-rate">Rotation Rate: <span class="alpha-rate">0</span>, <span class="beta-rate">0</span>, <span class="gamma-rate">0</span></div>',
          '<div class="eruda-interval">Interval: <span class="interval">0</span></div>',
        ].join('')
      )
      this._$cube = $el.find('.eruda-cube')
      this._$coordinates = {
        alpha: $el.find('.alpha'),
        beta: $el.find('.beta'),
        gamma: $el.find('.gamma'),
      }
      this._$acceleration = {
        x: $el.find('.eruda-acceleration .x'),
        y: $el.find('.eruda-acceleration .y'),
        z: $el.find('.eruda-acceleration .z'),
      }
      this._$accGravity = {
        xg: $el.find('.eruda-acceleration-including-gravity .xg'),
        yg: $el.find('.eruda-acceleration-including-gravity .yg'),
        zg: $el.find('.eruda-acceleration-including-gravity .zg'),
      }
      this._$rotationRate = {
        alpha: $el.find('.alpha-rate'),
        beta: $el.find('.beta-rate'),
        gamma: $el.find('.gamma-rate'),
      }
      this._$interval = $el.find('.interval')

      this._bindEvent()
    }
  }

  _bindEvent() {
    this._onDeviceorientation = (event) => {
      if (!this._isShow) return
      const { alpha, beta, gamma } = event
      this._$coordinates.alpha.text(alpha.toFixed(2))
      this._$coordinates.beta.text(beta.toFixed(2))
      this._$coordinates.gamma.text(gamma.toFixed(2))

      // 回転キューブの回転
      this._$cube.css(
        'transform',
        `rotateZ(${alpha}deg) rotateX(${beta}deg) rotateY(${gamma}deg)`
      )
    }

    this._onDevicemotion = (event) => {
      if (!this._isShow) return
      const acc = event.acceleration
      const accG = event.accelerationIncludingGravity
      const rotRate = event.rotationRate
      const interval = event.interval

      if (acc) {
        this._$acceleration.x.text(acc.x ? acc.x.toFixed(2) : '0')
        this._$acceleration.y.text(acc.y ? acc.y.toFixed(2) : '0')
        this._$acceleration.z.text(acc.z ? acc.z.toFixed(2) : '0')
      }

      if (accG) {
        this._$accGravity.xg.text(accG.x ? accG.x.toFixed(2) : '0')
        this._$accGravity.yg.text(accG.y ? accG.y.toFixed(2) : '0')
        this._$accGravity.zg.text(accG.z ? accG.z.toFixed(2) : '0')
      }

      if (rotRate) {
        this._$rotationRate.alpha.text(rotRate.alpha ? rotRate.alpha.toFixed(2) : '0')
        this._$rotationRate.beta.text(rotRate.beta ? rotRate.beta.toFixed(2) : '0')
        this._$rotationRate.gamma.text(rotRate.gamma ? rotRate.gamma.toFixed(2) : '0')
      }

      this._$interval.text(interval ? interval.toFixed(2) : '0')
    }

    window.addEventListener('deviceorientation', this._onDeviceorientation)
    window.addEventListener('devicemotion', this._onDevicemotion)
  }

  show() {
    super.show()
    this._isShow = true
  }

  hide() {
    super.hide()
    this._isShow = false
  }

  destroy() {
    super.destroy()
    eruda.util.evalCss.remove(this._style)
    window.removeEventListener('deviceorientation', this._onDeviceorientation)
    window.removeEventListener('devicemotion', this._onDevicemotion)
  }
}

module.exports = Orientation