refactor: remove draggabilly

package.json

@@ -47,7 +47,6 @@
     "chobitsu": "^1.4.3",
     "core-js": "^3.26.1",
     "css-loader": "^3.4.2",
-    "draggabilly": "^2.2.0",
     "es-check": "^6.2.1",
     "eslint": "^6.8.0",
     "eslint-loader": "^3.0.3",

src/DevTools/DevTools.js

@@ -2,7 +2,6 @@ import logger from '../lib/logger'
 import Tool from './Tool'
 import Settings from '../Settings/Settings'
 import Emitter from 'licia/Emitter'
-import isMobile from 'licia/isMobile'
 import defaults from 'licia/defaults'
 import keys from 'licia/keys'
 import last from 'licia/last'
@@ -17,7 +16,7 @@ import { isDarkTheme } from '../lib/themes'
 import LunaNotification from 'luna-notification'
 import LunaModal from 'luna-modal'
 import LunaTab from 'luna-tab'
-import { classPrefix as c } from '../lib/util'
+import { classPrefix as c, drag, eventClient } from '../lib/util'
 
 export default class DevTools extends Emitter {
   constructor($container, { defaults = {} } = {}) {
@@ -269,7 +268,7 @@ export default class DevTools extends Emitter {
   _bindEvent() {
     const $resizer = this._$el.find(c('.resizer'))
     const $navBar = this._$el.find(c('.nav-bar'))
-    const $root = $(document.documentElement)
+    const $document = $(document)
 
     const startListener = (e) => {
       e.preventDefault()
@@ -278,17 +277,12 @@ export default class DevTools extends Emitter {
       e = e.origEvent
       this._isResizing = true
       this._resizeStartSize = this.config.get('displaySize')
-      this._resizeStartY = getClientY(e)
+      this._resizeStartY = eventClient('y', e)
 
       $resizer.css('height', '100%')
 
-      if (isMobile()) {
-        $root.on('touchmove', moveListener)
-        $root.on('touchend', endListener)
-      } else {
-        $root.on('mousemove', moveListener)
-        $root.on('mouseup', endListener)
-      }
+      $document.on(drag('move'), moveListener)
+      $document.on(drag('end'), endListener)
     }
     const moveListener = (e) => {
       if (!this._isResizing) {
@@ -299,7 +293,7 @@ export default class DevTools extends Emitter {
 
       e = e.origEvent
       const deltaY =
-        ((this._resizeStartY - getClientY(e)) / window.innerHeight) * 100
+        ((this._resizeStartY - eventClient('y', e)) / window.innerHeight) * 100
       let displaySize = this._resizeStartSize + deltaY
       if (displaySize < 40) {
         displaySize = 40
@@ -314,27 +308,11 @@ export default class DevTools extends Emitter {
 
       $resizer.css('height', 10)
 
-      if (isMobile()) {
-        $root.off('touchmove', moveListener)
-        $root.off('touchend', endListener)
-      } else {
-        $root.off('mousemove', moveListener)
-        $root.off('mouseup', endListener)
-      }
+      $document.off(drag('move'), moveListener)
+      $document.off(drag('end'), endListener)
     }
     $resizer.css('height', 10)
-    const getClientY = (e) => {
-      if (e.clientY) return e.clientY
-
-      if (e.touches) return e.touches[0].clientY
-
-      return 0
-    }
     $navBar.on('contextmenu', (e) => e.preventDefault())
-    if (isMobile()) {
-      $resizer.on('touchstart', startListener)
-    } else {
-      $resizer.on('mousedown', startListener)
-    }
+    $resizer.on(drag('start'), startListener)
   }
 }

src/EntryBtn/EntryBtn.js

@@ -1,12 +1,14 @@
-import Draggabilly from 'draggabilly'
 import emitter from '../lib/emitter'
 import Settings from '../Settings/Settings'
 import Emitter from 'licia/Emitter'
+import $ from 'licia/$'
 import nextTick from 'licia/nextTick'
 import orientation from 'licia/orientation'
-import { pxToNum, classPrefix as c } from '../lib/util'
+import { pxToNum, classPrefix as c, drag, eventClient } from '../lib/util'
 import evalCss from '../lib/evalCss'
 
+const $document = $(document)
+
 export default class EntryBtn extends Emitter {
   constructor($container) {
     super()
@@ -15,7 +17,6 @@ export default class EntryBtn extends Emitter {
 
     this._$container = $container
     this._initTpl()
-    this._makeDraggable()
     this._bindEvent()
     this._registerListener()
   }
@@ -82,35 +83,75 @@ export default class EntryBtn extends Emitter {
 
     this.setPos(pos)
   }
-  _bindEvent() {
-    const draggabilly = this._draggabilly
+  _onDragStart = (e) => {
+    const $el = this._$el
+    $el.addClass(c('active'))
+
+    this._isClick = true
+    e = e.origEvent
+    this._startX = eventClient('x', e)
+    this._oldX = pxToNum($el.css('left'))
+    this._oldY = pxToNum($el.css('top'))
+    this._startY = eventClient('y', e)
+    $document.on(drag('move'), this._onDragMove)
+    $document.on(drag('end'), this._onDragEnd)
+  }
+  _onDragMove = (e) => {
+    const btnSize = this._$el.get(0).offsetWidth
+    const maxWidth = this._$container.get(0).offsetWidth
+    const maxHeight = this._$container.get(0).offsetHeight
+
+    this._isClick = false
+    e = e.origEvent
+    const deltaX = eventClient('x', e) - this._startX
+    const deltaY = eventClient('y', e) - this._startY
+    let newX = this._oldX + deltaX
+    let newY = this._oldY + deltaY
+    if (newX < 0) {
+      newX = 0
+    } else if (newX > maxWidth - btnSize) {
+      newX = maxWidth - btnSize
+    }
+    if (newY < 0) {
+      newY = 0
+    } else if (newY > maxHeight - btnSize) {
+      newY = maxHeight - btnSize
+    }
+    this._$el.css({
+      left: newX,
+      top: newY,
+    })
+  }
+  _onDragEnd = (e) => {
     const $el = this._$el
 
-    draggabilly
-      .on('staticClick', () => this.emit('click'))
-      .on('dragStart', () => $el.addClass('eruda-active'))
+    if (this._isClick) {
+      this.emit('click')
+    }
+
+    this._onDragMove(e)
+    $document.off(drag('move'), this._onDragMove)
+    $document.off(drag('end'), this._onDragEnd)
 
-    draggabilly.on('dragEnd', () => {
     const cfg = this.config
 
     if (cfg.get('rememberPos')) {
       cfg.set('pos', {
-          x: pxToNum(this._$el.css('left')),
-          y: pxToNum(this._$el.css('top')),
+        x: pxToNum($el.css('left')),
+        y: pxToNum($el.css('top')),
       })
     }
 
     $el.rmClass('eruda-active')
-    })
+  }
+  _bindEvent() {
+    const $el = this._$el
+
+    $el.on(drag('start'), this._onDragStart)
 
     orientation.on('change', () => this._resetPos(true))
     window.addEventListener('resize', () => this._resetPos())
   }
-  _makeDraggable() {
-    this._draggabilly = new Draggabilly(this._$el.get(0), {
-      containment: true,
-    })
-  }
   initCfg(settings) {
     const cfg = (this.config = Settings.createCfg('entry-button', {
       rememberPos: true,

src/EntryBtn/EntryBtn.scss

@@ -1,5 +1,6 @@
 .container {
   .entry-btn {
+    touch-action: none;
     width: 40px;
     height: 40px;
     display: flex;

src/lib/util.js

@@ -253,6 +253,48 @@ function processClass(str) {
   }).join(' ')
 }
 
+const hasTouchSupport = 'ontouchstart' in root
+const touchEvents = {
+  start: 'touchstart',
+  move: 'touchmove',
+  end: 'touchend',
+}
+const mouseEvents = {
+  start: 'mousedown',
+  move: 'mousemove',
+  end: 'mouseup',
+}
+
+export function drag(name) {
+  return hasTouchSupport ? touchEvents[name] : mouseEvents[name]
+}
+
+export function eventClient(type, e) {
+  const name = type === 'x' ? 'clientX' : 'clientY'
+
+  if (e[name]) {
+    return e[name]
+  }
+  if (e.changedTouches) {
+    return e.changedTouches[0][name]
+  }
+
+  return 0
+}
+
+export function eventPage(type, e) {
+  const name = type === 'x' ? 'pageX' : 'pageY'
+
+  if (e[name]) {
+    return e[name]
+  }
+  if (e.changedTouches) {
+    return e.changedTouches[0][name]
+  }
+
+  return 0
+}
+
 // To be removed in 3.0.0
 export {
   $,