Update eruda-orientation.js

eruda-orientation.js

@@ -1,217 +1,148 @@
-;(function (root, factory) {
-  if (typeof define === 'function' && define.amd) {
-    define([], factory)
-  } else if (typeof module === 'object' && module.exports) {
-    module.exports = factory()
-  } else {
-    root.erudaOrientation = factory()
+class Orientation extends eruda.Tool {
+  constructor() {
+    super()
+    this.name = 'orientation'
+    this.displayName = 'デバイスの回転'
   }
-})(this, function () {
-  return function (eruda) {
-    var Tool = eruda.Tool
-    var util = eruda.util
-
-    var Orientation = Tool.extend({
-      name: 'orientation',
-      displayName: 'デバイスの回転',
-      init: function ($el) {
-        this.callSuper(Tool, 'init', arguments)
-        this._style = util.evalCss(
-          [
-            '.eruda-dev-tools .eruda-tools .eruda-orientation {padding: 10px; overflow-y: auto; -webkit-overflow-scrolling: touch;}',
-            '.eruda-not-supported {background: var(--console-error-background); color: var(--console-error-foreground); border: 1px solid var(--console-error-border);padding: 10px; text-align: center;}',
-            '.eruda-cube {width: 150px; height: 150px; color: var(--foreground); position: relative; margin: 50px auto; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}',
-            '.eruda-face {width: 150px; height: 150px; position: absolute; font-size: 80px; text-align: center; line-height: 150px; background-color: var(--accent); border: 1px solid var(--border); opacity: 0.6; }',
-            '.eruda-one {-webkit-transform: translateZ(75px); transform: translateZ(75px);} ',
-            '.eruda-two {-webkit-transform: rotateY(90deg) translateZ(75px); transform: rotateY(90deg) translateZ(75px);} ',
-            '.eruda-three {-webkit-transform: rotateY(180deg) translateZ(75px); transform: rotateY(180deg) translateZ(75px);} ',
-            '.eruda-four {-webkit-transform: rotateY(-90deg) translateZ(75px); transform: rotateY(-90deg) translateZ(75px);} ',
-            '.eruda-five {-webkit-transform: rotateX(90deg) translateZ(75px); transform: rotateX(90deg) translateZ(75px);} ',
-            '.eruda-six {-webkit-transform: rotateX(-90deg) translateZ(75px) rotate(0deg); transform: rotateX(-90deg) translateZ(75px) rotate(0deg);} ',
-            '.eruda-orientation-data {margin: 10px;} ',
-            '.eruda-content {padding: 10px;} ',
-            'table {width: 100%;} ',
-            'table td {border: 1px solid var(--border); padding: 10px;} ',
-            '.eruda-key {width: 150px;} ',
-            'sup {vertical-align: super; font-size: smaller;} ',
-          ].join('.eruda-dev-tools .eruda-tools .eruda-orientation ')
-        )
-        var 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" class="cube">',
-              '  <div class="eruda-face eruda-one">1</div>',
-              '  <div class="eruda-face eruda-two">2</div>',
-              '  <div class="eruda-face eruda-three">3</div>',
-              '  <div class="eruda-face eruda-four">4</div>',
-              '  <div class="eruda-face eruda-five">5</div>',
-              '  <div class="eruda-face eruda-six">6</div>',
-              '</div>',
-              '<div class="eruda-orientation-data">',
-              '  <div class="eruda-content">',
-              '    <table>',
-              '      <tbody>',
-              '        <tr>',
-              '          <td class="eruda-key">coordinates</td>',
-              '          <td class="eruda-coordinates">unknown</td>',
-              '        </tr>',
-              '        <tr>',
-              '          <td class="eruda-key">acceleration</td>',
-              '          <td class="eruda-acceleration">unknown</td>',
-              '        </tr>',
-              '        <tr>',
-              '          <td class="eruda-key">acceleration including gravity</td>',
-              '          <td class="eruda-acceleration-including-gravity">unknown</td>',
-              '        </tr>',
-              '        <tr>',
-              '          <td class="eruda-key">rotation rate</td>',
-              '          <td class="eruda-rotation-rate">unknown</td>',
-              '        </tr>',
-              '        <tr>',
-              '          <td class="eruda-key">interval</td>',
-              '          <td class="eruda-interval">unknown</td>',
-              '        </tr>',
-              '      </tbody>',
-              '    </table>',
-              '  </div>',
-              '</div>',
-            ].join('')
-          )
-          this._$cube = $el.find('.eruda-cube')
-          this._$coordinates = $el.find('.eruda-coordinates')
-          this._$acceleration = $el.find('.eruda-acceleration')
-          this._$accGravity = $el.find('.eruda-acceleration-including-gravity')
-          this._$rotationRate = $el.find('.eruda-rotation-rate')
-          this._$interval = $el.find('.eruda-interval')
-          this._bindEvent()
-        }
-      },
-      _bindEvent: function () {
-        var $cube = this._$cube
-        var $coordinates = this._$coordinates
-        var $acceleration = this._$acceleration
-        var $accGravity = this._$accGravity
-        var $rotationRate = this._$rotationRate
-        var $interval = this._$interval
-
-        var self = this
-        this._onDeviceorientation = function (e) {
-          if (!self._isShow) return
-
-          $cube.css(
-            'transform',
-            'rotateX(' +
-              e.beta +
-              'deg) ' +
-              'rotateY(' +
-              e.gamma +
-              'deg) ' +
-              'rotateZ(' +
-              e.alpha +
-              'deg)'
-          )
-
-          $coordinates.text(
-            '(' +
-              Math.round(e.beta) +
-              ', ' +
-              Math.round(e.gamma) +
-              ', ' +
-              Math.round(e.alpha) +
-              ')'
-          )
-        }
-        this._onDevicemotion = function (e) {
-          if (!self._isShow) return
-
-          var acceleration = e.acceleration
-          $acceleration.html(
-            '(' +
-              Math.round(acceleration.x) +
-              ', ' +
-              Math.round(acceleration.y) +
-              ', ' +
-              Math.round(acceleration.z) +
-              ') m/s<sup>2</sup>'
-          )
-
-          var accGravity = e.accelerationIncludingGravity
-          $accGravity.html(
-            '(' +
-              Math.round(accGravity.x) +
-              ', ' +
-              Math.round(accGravity.y) +
-              ', ' +
-              Math.round(accGravity.z) +
-              ') m/s<sup>2</sup>'
-          )
-
-          var rotationRate = e.rotationRate
-          $rotationRate.text(
-            '(' +
-              Math.round(rotationRate.beta) +
-              ', ' +
-              Math.round(rotationRate.gamma) +
-              ', ' +
-              Math.round(rotationRate.alpha) +
-              ')'
-          )
-
-          $interval.text(e.interval + 'ms')
-        }
-
-        function bind(type) {
-          var Event = DeviceOrientationEvent
-          var eventName = 'deviceorientation'
-          var listener = self._onDeviceorientation
-          if (type === 'motion') {
-            Event = DeviceMotionEvent
-            eventName = 'devicemotion'
-            listener = self._onDevicemotion
-          }
-
-          function requestPermission() {
-            Event.requestPermission().then(function (response) {
-              if (response === 'granted') {
-                $cube.off('click', requestPermission)
-              }
-            })
-          }
-          if (Event.requestPermission) {
-            $cube.on('click', requestPermission)
-          }
-          window.addEventListener(eventName, listener)
-        }
-
-        bind('orientation')
-        bind('motion')
-      },
-      show: function () {
-        this.callSuper(Tool, 'show', arguments)
-        this._isShow = true
-      },
-      hide: function () {
-        this.callSuper(Tool, 'hide', arguments)
-        this._isShow = false
-      },
-      destroy: function () {
-        this.callSuper(Tool, 'destroy', arguments)
-        util.evalCss.remove(this._style)
-        window.removeEventListener(
-          'deviceorientation',
-          this._onDeviceorientation
-        )
-        window.removeEventListener('devicemotion', this._onDevicemotion)
-      },
-    })
-
-    return Orientation
+
+  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