feat: add touch emulater

varletjs · Dec 24, 2020 · 6836953 · 6836953
1 parent 2858e3e
commit 6836953
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 8 deletions.
diff --git a/packages/varlet-cli/site/mobile/main.ts b/packages/varlet-cli/site/mobile/main.ts
@@ -1,18 +1,15 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
+import '@varlet/touch-emulator'
 import App from './App.vue'
 import AppType from './components/AppType.vue'
 
 import routes from './routes'
 
 const router = createRouter({
-  history: createWebHashHistory(),
-  routes
+	history: createWebHashHistory(),
+	routes,
 })
 
 const app = createApp(App as any)
-app
-  .component(AppType.name, AppType)
-  .use(router)
-  .mount('#app')
-
+app.component(AppType.name, AppType).use(router).mount('#app')
diff --git a/packages/varlet-cli/site/mobile/mobile.html b/packages/varlet-cli/site/mobile/mobile.html
@@ -6,7 +6,6 @@
     <meta content="<%= htmlWebpackPlugin.options.description %>" name="description" />
     <link href="<%= htmlWebpackPlugin.options.logo %>" rel="icon" type="image/png" />
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" name="viewport" />
-    <script src="https://cdn.jsdelivr.net/npm/@vant/touch-emulator"></script>
   </head>
   <body>
     <div id="app"></div>

diff --git a/packages/varlet-touch-emulator/CHANGELOG.md b/packages/varlet-touch-emulator/CHANGELOG.md
diff --git a/packages/varlet-touch-emulator/index.ts b/packages/varlet-touch-emulator/index.ts
@@ -0,0 +1,78 @@
+const supportTouch = 'ontouchstart' in window
+let initiated = false
+let eventTarget: EventTarget | null
+
+const isMousedown = (eventType: string): boolean => eventType === 'mousedown'
+
+const isMousemove = (eventType: string): boolean => eventType === 'mousemove'
+
+const isMouseup = (eventType: string): boolean => eventType === 'mouseup'
+
+const isUpdateTarget = (eventType: string): boolean =>
+	isMousedown(eventType) || !eventTarget || (eventTarget && !eventTarget.dispatchEvent)
+
+function updateTouchList(mouseEvent: MouseEvent): Touch[] {
+	const { clientX, clientY, screenX, screenY, pageX, pageY } = mouseEvent
+	const touchList: Touch[] = []
+	const touchInitDict: TouchInit = {
+		identifier: 1,
+		target: eventTarget as EventTarget,
+		clientX,
+		clientY,
+		screenX,
+		screenY,
+		pageX,
+		pageY,
+	}
+	touchList.push(new Touch(touchInitDict))
+	return touchList
+}
+
+function getActiveTouches(mouseEvent: MouseEvent): Touch[] {
+	const { type } = mouseEvent
+	const touchList: Touch[] = []
+	if (isMouseup(type)) return touchList
+	return updateTouchList(mouseEvent)
+}
+
+function triggerTouch(touchType: string, mouseEvent: MouseEvent) {
+	const { altKey, ctrlKey, metaKey, shiftKey } = mouseEvent
+
+	const eventInitDict: TouchEventInit = {
+		touches: getActiveTouches(mouseEvent),
+		targetTouches: getActiveTouches(mouseEvent),
+		changedTouches: updateTouchList(mouseEvent),
+		altKey,
+		ctrlKey,
+		metaKey,
+		shiftKey,
+		bubbles: true,
+		cancelable: true,
+	}
+
+	const touchEvent = new TouchEvent(touchType, eventInitDict)
+
+	;(eventTarget as EventTarget).dispatchEvent(touchEvent)
+}
+
+function onMouse(mouseEvent: MouseEvent, touchType: string) {
+	const { type, target } = mouseEvent
+
+	initiated = isMousedown(type) ? true : isMouseup(type) ? false : initiated
+
+	if (isMousemove(type) && !initiated) return
+
+	if (isUpdateTarget(type)) eventTarget = target
+
+	triggerTouch(touchType, mouseEvent)
+
+	if (isMouseup(type)) eventTarget = null
+}
+
+function createTouchEmulator() {
+	window.addEventListener('mousedown', (event) => onMouse(event, 'touchstart'), true)
+	window.addEventListener('mousemove', (event) => onMouse(event, 'touchmove'), true)
+	window.addEventListener('mouseup', (event) => onMouse(event, 'touchend'), true)
+}
+
+if (!supportTouch) createTouchEmulator()
diff --git a/packages/varlet-touch-emulator/package.json b/packages/varlet-touch-emulator/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@varlet/touch-emulator",
+  "version": "0.5.1",
+  "description": "touch-emulator",
+  "keywords": [
+    "emulator",
+    "varlet"
+  ],
+  "author": "BeADre <[email protected]>",
+  "homepage": "https://github.com/haoziqaq/varlet#readme",
+  "license": "MIT",
+  "main": "index.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/haoziqaq/varlet.git"
+  },
+  "bugs": {
+    "url": "https://github.com/haoziqaq/varlet/issues"
+  },
+  "gitHead": "5dabda353dc88340816ddc6f6ac8081c0680908f"
+}