Replace unmaintained HammerJS dependency with VueUse

Ref: hammerjs/hammer.js#1278

package.json

@@ -54,13 +54,13 @@
 		"@nextcloud/router": "^2.0.0",
 		"@nextcloud/vue-select": "^3.21.2",
 		"@skjnldsv/sanitize-svg": "^1.0.2",
+		"@vueuse/core": "^9.13.0",
 		"clone": "^2.1.2",
 		"debounce": "1.2.1",
 		"emoji-mart-vue-fast": "^12.0.1",
 		"escape-html": "^1.0.3",
 		"floating-vue": "^1.0.0-beta.19",
 		"focus-trap": "^7.1.0",
-		"hammerjs": "^2.0.8",
 		"linkify-string": "^4.0.0",
 		"md5": "^2.3.0",
 		"node-polyfill-webpack-plugin": "^2.0.1",

src/components/NcAppContent/NcAppContent.vue

@@ -117,9 +117,11 @@ import isMobile from '../../mixins/isMobile/index.js'
 import { getBuilder } from '@nextcloud/browser-storage'
 import { emit } from '@nextcloud/event-bus'
 
-import Hammer from 'hammerjs'
-import 'splitpanes/dist/splitpanes.css'
+import { useSwipe } from '@vueuse/core'
 import { Splitpanes, Pane } from 'splitpanes'
+import { ref } from 'vue'
+
+import 'splitpanes/dist/splitpanes.css'
 
 const browserStorage = getBuilder('nextcloud').persist().build()
 
@@ -199,8 +201,10 @@ export default {
 	data() {
 		return {
 			contentHeight: 0,
-
 			hasList: false,
+
+			lengthX: ref(0),
+			coordsStart: ref({}),
 			listPaneSize: this.restorePaneConfig(),
 		}
 	},
@@ -255,34 +259,35 @@ export default {
 	},
 
 	mounted() {
-		if (this.allowSwipeNavigation) {
-			this.mc = new Hammer(this.$el, { cssProps: { userSelect: 'text' } })
-			this.mc.on('swipeleft swiperight', this.handleSwipe)
-		}
+		const { coordsStart, lengthX } = useSwipe(this.$el, {
+			onSwipeEnd: this.handleSwipe
+		})
+		this.coordsStart = coordsStart
+		this.lengthX = lengthX
 
 		this.checkListSlot()
 		this.restorePaneConfig()
 	},
 
-	beforeDestroy() {
-		this.mc.off('swipeleft swiperight', this.handleSwipe)
-	},
-
 	methods: {
-		// handle the swipe event
-		handleSwipe(e) {
+		/**
+		 * handle the swipe event
+		 * @param {TouchEvent} e
+		 * @param {import('@vueuse/core').SwipeDirection} direction
+		 */
+		handleSwipe(e, direction) {
 			const minSwipeX = 70
-			const touchzone = 40
-			const startX = e.srcEvent.pageX - e.deltaX
-			const hasEnoughDistance = Math.abs(e.deltaX) > minSwipeX
-			if (hasEnoughDistance && startX < touchzone) {
-				emit('toggle-navigation', {
-					open: true,
-				})
-			} else if (hasEnoughDistance && startX < touchzone + 300) {
-				emit('toggle-navigation', {
-					open: false,
-				})
+			const touchZone = 300
+			if (this.lengthX.value > minSwipeX) {
+				if (this.coordsStart.value.x < (touchZone / 2) && direction === 'RIGHT') {
+					emit('toggle-navigation', {
+						open: true,
+					})
+				} else if (this.coordsStart.value.x < touchZone * 1.5 && direction === 'LEFT') {
+					emit('toggle-navigation', {
+						open: false,
+					})
+				}
 			}
 		},
 

src/components/NcModal/NcModal.vue

@@ -322,7 +322,7 @@ import Pause from 'vue-material-design-icons/Pause.vue'
 import Play from 'vue-material-design-icons/Play.vue'
 
 import { createFocusTrap } from 'focus-trap'
-import Hammer from 'hammerjs'
+import { useSwipe } from '@vueuse/core'
 
 export default {
 	name: 'NcModal',
@@ -552,9 +552,8 @@ export default {
 	mounted() {
 		// init clear view
 		this.useFocusTrap()
-		this.mc = new Hammer(this.$refs.mask)
-		this.mc.on('swipeleft swiperight', e => {
-			this.handleSwipe(e)
+		useSwipe(this.$refs.mask, {
+			onSwipeEnd: this.handleSwipe
 		})
 
 		if (this.container) {
@@ -629,12 +628,18 @@ export default {
 				break
 			}
 		},
-		handleSwipe(e) {
+
+		/**
+		 * handle the swipe event
+		 * @param {TouchEvent} e
+		 * @param {import('@vueuse/core').SwipeDirection} direction
+		 */
+		handleSwipe(e, direction) {
 			if (this.enableSwipe) {
-				if (e.type === 'swipeleft') {
+				if (direction === 'LEFT') {
 					// swiping to left to go to the next item
 					this.next(e)
-				} else if (e.type === 'swiperight') {
+				} else if (direction === 'RIGHT') {
 					// swiping to right to go back to the previous item
 					this.previous(e)
 				}