release: v2.1.0

.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "amd": true,
+    "commonjs": true
+  },
+  "extends": "eslint:recommended",
+  "rules": {
+    "indent": ["error", 2],
+    "quotes": ["error", "single"],
+    "no-extra-semi": "off"
+  }
+}

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+ko_fi: surunzi
+open_collective: eruda

.github/workflows/main.yml

@@ -0,0 +1,27 @@
+name: CI
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - 'master'
+    paths:
+      - 'src/**/*'
+
+jobs:
+  ci:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm i
+    - run: npm run ci

.github/workflows/publish.yml

@@ -0,0 +1,28 @@
+name: Publish to NPM
+
+on:
+  workflow_dispatch:
+  release:
+    types: [created]
+
+jobs:
+  publish:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Build eruda-orientation
+        run: |
+          npm i
+          npm run build
+      - name: Publish package on NPM
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "semi": false
+}

CHANGELOG.md

@@ -1,3 +1,7 @@
+## v2.1.0 (7 Aug 2024)
+
+* fix: safari not working
+
 ## v2.0.0 (3 Jan 2019)
 
 * feat: theme support

README.md

@@ -1,21 +1,21 @@
 # eruda-orientation
 
 [![NPM version][npm-image]][npm-url]
-[![Build status][travis-image]][travis-url]
+[![Build status][ci-image]][ci-url]
 [![License][license-image]][npm-url]
 
 [npm-image]: https://img.shields.io/npm/v/eruda-orientation.svg
 [npm-url]: https://npmjs.org/package/eruda-orientation
-[travis-image]: https://img.shields.io/travis/liriliri/eruda-orientation.svg
-[travis-url]: https://travis-ci.org/liriliri/eruda-orientation
+[ci-image]: https://img.shields.io/github/actions/workflow/status/liriliri/eruda-orientation/main.yml?branch=master&style=flat-square
+[ci-url]: https://github.com/liriliri/eruda-orientation/actions/workflows/main.yml
 [license-image]: https://img.shields.io/npm/l/eruda-orientation.svg
 
 Eruda plugin for testing orientation api.
 
 ## Demo
 
 Browse it on your phone: 
-[http://eruda.liriliri.io/?plugin=orientation](http://eruda.liriliri.io/?plugin=orientation)
+[https://eruda.liriliri.io/?plugin=orientation](https://eruda.liriliri.io/?plugin=orientation)
 
 ## Install
 

eruda-orientation.js

@@ -1,20 +1,20 @@
 // https://code.tutsplus.com/tutorials/an-introduction-to-the-device-orientation-api--cms-21067
-;(function(root, factory) {
+;(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()
   }
-})(this, function() {
-  return function(eruda) {
+})(this, function () {
+  return function (eruda) {
     var Tool = eruda.Tool
     var util = eruda.util
 
     var Orientation = Tool.extend({
       name: 'orientation',
-      init: function($el) {
+      init: function ($el) {
         this.callSuper(Tool, 'init', arguments)
         this._style = util.evalCss(
           [
@@ -33,7 +33,7 @@
             'table {width: 100%;}',
             'table td {border: 1px solid var(--border); padding: 10px;}',
             '.eruda-key {width: 150px;}',
-            'sup {vertical-align: super; font-size: smaller;}'
+            'sup {vertical-align: super; font-size: smaller;}',
           ].join('.eruda-dev-tools .eruda-tools .eruda-orientation ')
         )
         var isSupported =
@@ -81,7 +81,7 @@
               '      </tbody>',
               '    </table>',
               '  </div>',
-              '</div>'
+              '</div>',
             ].join('')
           )
           this._$cube = $el.find('.eruda-cube')
@@ -93,7 +93,7 @@
           this._bindEvent()
         }
       },
-      _bindEvent: function() {
+      _bindEvent: function () {
         var $cube = this._$cube
         var $coordinates = this._$coordinates
         var $acceleration = this._$acceleration
@@ -102,7 +102,7 @@
         var $interval = this._$interval
 
         var self = this
-        this._onDeviceorientation = function(e) {
+        this._onDeviceorientation = function (e) {
           if (!self._isShow) return
 
           $cube.css(
@@ -128,7 +128,7 @@
               ')'
           )
         }
-        this._onDevicemotion = function(e) {
+        this._onDevicemotion = function (e) {
           if (!self._isShow) return
 
           var acceleration = e.acceleration
@@ -166,26 +166,58 @@
 
           $interval.text(e.interval + 'ms')
         }
-        window.addEventListener('deviceorientation', this._onDeviceorientation)
-        window.addEventListener('devicemotion', this._onDevicemotion)
+
+        function requestOrientationPermission() {
+          DeviceOrientationEvent.requestPermission().then(function (response) {
+            if (response === 'granted') {
+              window.addEventListener(
+                'deviceorientation',
+                this._onDeviceorientation
+              )
+              $cube.off('click', requestOrientationPermission)
+            }
+          })
+        }
+        if (DeviceOrientationEvent.requestPermission) {
+          $cube.on('click', requestOrientationPermission)
+        } else {
+          window.addEventListener(
+            'deviceorientation',
+            this._onDeviceorientation
+          )
+        }
+
+        function requestMotionPermission() {
+          DeviceMotionEvent.requestPermission().then(function (response) {
+            if (response === 'granted') {
+              window.addEventListener('devicemotion', this._onDevicemotion)
+              $cube.off('click', requestMotionPermission)
+            }
+          })
+        }
+        if (DeviceMotionEvent.requestPermission) {
+          $cube.on('click', requestMotionPermission)
+        } else {
+          window.addEventListener('devicemotion', this._onDevicemotion)
+        }
       },
-      show: function() {
+      show: function () {
         this.callSuper(Tool, 'show', arguments)
         this._isShow = true
       },
-      hide: function() {
+      hide: function () {
         this.callSuper(Tool, 'hide', arguments)
         this._isShow = false
       },
-      destroy: function() {
+      destroy: function () {
         this.callSuper(Tool, 'destroy', arguments)
         util.evalCss.remove(this._style)
         window.removeEventListener(
           'deviceorientation',
           this._onDeviceorientation
         )
         window.removeEventListener('devicemotion', this._onDevicemotion)
-      }
+      },
     })
 
     return new Orientation()

index.html

@@ -13,7 +13,7 @@
 </head>
 <body>
     <script src="node_modules/eruda/eruda.js"></script>
-    <script>eruda.init({tool: ['console', 'elements']});</script>
+    <script>eruda.init({tool: ['console']});</script>
     <script src="eruda-orientation.js"></script>
     <script>
         eruda.add(erudaOrientation).show('orientation').show();

package.json

@@ -1,35 +1,36 @@
 {
   "name": "eruda-orientation",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "eruda-orientation.js",
   "description": "Eruda plugin for testing orientation api",
+  "files": [
+    "eruda-orientation.js",
+    "eruda-orientation.min.js"
+  ],
   "scripts": {
     "build": "uglifyjs eruda-orientation.js -o eruda-orientation.min.js --mangle",
     "lint": "eslint eruda-orientation.js",
-    "ci": "npm run lint && npm run build",
-    "dev": "nws -p 3000",
-    "format": "prettier *.js .eslintrc.js --write"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/liriliri/eruda-orientation.git"
+    "ci": "npm run lint && npm run build && npm run es5",
+    "dev": "http-server",
+    "format": "lsla prettier \"*.{js,json}\" --write",
+    "es5": "es-check es5 eruda-orientation.js"
   },
   "keywords": [
     "eruda",
     "orientation",
     "plugin"
   ],
-  "author": "redhoodsu",
+  "author": "surunzi",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/liriliri/eruda-orientation/issues"
   },
   "homepage": "https://github.com/liriliri/eruda-orientation#readme",
   "devDependencies": {
-    "eruda": "^2.0.0",
-    "eslint": "^4.12.1",
-    "nws": "^1.1.1",
-    "prettier": "^1.14.2",
-    "uglify-js": "^3.2.0"
+    "eruda": "^3.2.0",
+    "es-check": "^7.2.1",
+    "eslint": "^8.36.0",
+    "http-server": "^14.1.1",
+    "uglify-js": "^3.19.0"
   }
 }