refactor: 📦 fuck them libs

2024-11-28 06:48:12 +09:00 · 2022-08-15 19:18:54 -07:00 · 2022-08-15 19:18:54 -07:00 · 53776e9d7a
commit 53776e9d7a
parent 41b4fea48f
3 changed files with 198 additions and 107 deletions
--- a/packages/client/package.json
+++ b/packages/client/package.json
@ -46,7 +46,6 @@
 		"seedrandom": "3.0.5",
 		"strict-event-emitter-types": "2.0.0",
 		"stringz": "2.1.0",
-		"swiped-events": "^1.1.6",
 		"syuilo-password-strength": "0.0.1",
 		"tesseract.js": "^2.1.5",
 		"textarea-caret": "3.1.0",
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@ -1,24 +1,42 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template>
-	<MkSpacer :content-max="800">
-		<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
-			<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
-			<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
-
-			<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
-			<div class="tl _block">
-				<XTimeline
-					ref="tl" :key="src"
-					class="tl"
-					:src="src"
-					:sound="true"
-					@queue="queueUpdated"
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="src"
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-my-avatar="true"
+		/></template>
+		<MkSpacer :content-max="800">
+			<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
+				<XTutorial
+					v-if="$store.reactiveState.tutorial.value != -1"
+					class="tutorial _block"
 				/>
+				<XPostForm
+					v-if="$store.reactiveState.showFixedPostForm.value"
+					class="post-form _block"
+					fixed
+				/>
+
+				<div v-if="queue > 0" class="new">
+					<button class="_buttonPrimary" @click="top()">
+						{{ i18n.ts.newNoteRecived }}
+					</button>
+				</div>
+				<div class="tl _block">
+					<XTimeline
+						ref="tl"
+						:key="src"
+						class="tl"
+						:src="src"
+						:sound="true"
+						@queue="queueUpdated"
+					/>
+				</div>
 			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>

 <script lang="ts" setup>
@ -34,16 +52,20 @@ import { $i } from '@/account';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';

-import 'swiped-events';
-
 const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));

-const isLocalTimelineAvailable = !instance.disableLocalTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
-const isRecommendedTimelineAvailable = !instance.disableRecommendedTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
-const isGlobalTimelineAvailable = !instance.disableGlobalTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
+const isLocalTimelineAvailable =
+	!instance.disableLocalTimeline ||
+	($i != null && ($i.isModerator || $i.isAdmin));
+const isRecommendedTimelineAvailable =
+	!instance.disableRecommendedTimeline ||
+	($i != null && ($i.isModerator || $i.isAdmin));
+const isGlobalTimelineAvailable =
+	!instance.disableGlobalTimeline ||
+	($i != null && ($i.isModerator || $i.isAdmin));
 const enableGuestTimeline = instance.enableGuestTimeline;
 const keymap = {
-	't': focus,
+	t: focus,
 };

 const DESKTOP_THRESHOLD = 1100;
@ -51,18 +73,24 @@ const MOBILE_THRESHOLD = 500;

 // デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
 const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
-const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
+const isMobile = ref(
+	deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD
+);
 window.addEventListener('resize', () => {
-	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
+	isMobile.value =
+		deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
 });

 const tlComponent = $ref<InstanceType<typeof XTimeline>>();
 const rootEl = $ref<HTMLElement>();

 let queue = $ref(0);
-const src = $computed({ get: () => defaultStore.reactiveState.tl.value.src, set: (x) => saveSrc(x) });
+const src = $computed({
+	get: () => defaultStore.reactiveState.tl.value.src,
+	set: (x) => saveSrc(x),
+});

-watch ($$(src), () => queue = 0);
+watch($$(src), () => (queue = 0));

 function queueUpdated(q: number): void {
 	queue = q;
@ -74,7 +102,7 @@ function top(): void {

 async function chooseList(ev: MouseEvent): Promise<void> {
 	const lists = await os.api('users/lists/list');
-	const items = lists.map(list => ({
+	const items = lists.map((list) => ({
 		type: 'link' as const,
 		text: list.name,
 		to: `/timeline/list/${list.id}`,
@ -84,7 +112,7 @@ async function chooseList(ev: MouseEvent): Promise<void> {

 async function chooseAntenna(ev: MouseEvent): Promise<void> {
 	const antennas = await os.api('antennas/list');
-	const items = antennas.map(antenna => ({
+	const items = antennas.map((antenna) => ({
 		type: 'link' as const,
 		text: antenna.name,
 		indicate: antenna.hasUnreadNote,
@ -95,7 +123,7 @@ async function chooseAntenna(ev: MouseEvent): Promise<void> {

 async function chooseChannel(ev: MouseEvent): Promise<void> {
 	const channels = await os.api('channels/followed');
-	const items = channels.map(channel => ({
+	const items = channels.map((channel) => ({
 		type: 'link' as const,
 		text: channel.name,
 		indicate: channel.hasUnreadNote,
@ -104,7 +132,9 @@ async function chooseChannel(ev: MouseEvent): Promise<void> {
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }

-function saveSrc(newSrc: 'home' | 'local' | 'recommended' | 'social' | 'global'): void {
+function saveSrc(
+	newSrc: 'home' | 'local' | 'recommended' | 'social' | 'global'
+): void {
 	defaultStore.set('tl', {
 		...defaultStore.state.tl,
 		src: newSrc,
@ -124,75 +154,154 @@ function focus(): void {
 	tlComponent.focus();
 }

-const headerActions = $computed(() => [{
-	icon: 'fas fa-list-ul',
-	title: i18n.ts.lists,
-	iconOnly: true,
-	handler: chooseList,
-}, {
-	icon: 'fas fa-satellite',
-	title: i18n.ts.antennas,
-	iconOnly: true,
-	handler: chooseAntenna,
-}, /* **TODO: fix timetravel** {
+const headerActions = $computed(() => [
+	{
+		icon: 'fas fa-list-ul',
+		title: i18n.ts.lists,
+		iconOnly: true,
+		handler: chooseList,
+	},
+	{
+		icon: 'fas fa-satellite',
+		title: i18n.ts.antennas,
+		iconOnly: true,
+		handler: chooseAntenna,
+	} /* **TODO: fix timetravel** {
 	icon: 'fas fa-calendar-alt',
 	title: i18n.ts.jumpToSpecifiedDate,
 	iconOnly: true,
 	handler: timetravel,
-}*/]);
+}*/,
+]);

-const headerTabs = $computed(() => [{
-	key: 'home',
-	title: i18n.ts._timelines.home,
-	icon: 'fas fa-home',
-	iconOnly: true,
-}, ...(isLocalTimelineAvailable ? [{
-	key: 'local',
-	title: i18n.ts._timelines.local,
-	icon: 'fas fa-user-group',
-	iconOnly: true,
-}] : []),
-...(isRecommendedTimelineAvailable ? [{
-	key: 'recommended',
-	title: i18n.ts._timelines.recommended,
-	icon: 'fas fa-signs-post',
-	iconOnly: true,
-}] : []),
-...(isLocalTimelineAvailable ? [{
-	key: 'social',
-	title: i18n.ts._timelines.social,
-	icon: 'fas fa-handshake-simple',
-	iconOnly: true,
-}] : []),
-...(isGlobalTimelineAvailable ? [{
-	key: 'global',
-	title: i18n.ts._timelines.global,
-	icon: 'fas fa-globe',
-	iconOnly: true,
-}] : [])]);
+const headerTabs = $computed(() => [
+	{
+		key: 'home',
+		title: i18n.ts._timelines.home,
+		icon: 'fas fa-home',
+		iconOnly: true,
+	},
+	...(isLocalTimelineAvailable
+		? [
+			{
+				key: 'local',
+				title: i18n.ts._timelines.local,
+				icon: 'fas fa-user-group',
+				iconOnly: true,
+			},
+		]
+		: []),
+	...(isRecommendedTimelineAvailable
+		? [
+			{
+				key: 'recommended',
+				title: i18n.ts._timelines.recommended,
+				icon: 'fas fa-signs-post',
+				iconOnly: true,
+			},
+		]
+		: []),
+	...(isLocalTimelineAvailable
+		? [
+			{
+				key: 'social',
+				title: i18n.ts._timelines.social,
+				icon: 'fas fa-handshake-simple',
+				iconOnly: true,
+			},
+		]
+		: []),
+	...(isGlobalTimelineAvailable
+		? [
+			{
+				key: 'global',
+				title: i18n.ts._timelines.global,
+				icon: 'fas fa-globe',
+				iconOnly: true,
+			},
+		]
+		: []),
+]);

-definePageMetadata(computed(() => ({
-	title: i18n.ts.timeline,
-	icon: src === 'local' ? 'fas fa-user-group' : src === 'social' ? 'fas fa-handshake-simple' : src === 'recommended' ? 'fas fa-signs-post' : src === 'global' ? 'fas fa-globe' : 'fas fa-home',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.timeline,
+		icon:
+			src === 'local'
+				? 'fas fa-user-group'
+				: src === 'social'
+					? 'fas fa-handshake-simple'
+					: src === 'recommended'
+						? 'fas fa-signs-post'
+						: src === 'global'
+							? 'fas fa-globe'
+							: 'fas fa-home',
+	}))
+);

 if (isMobile.value) {
-	document.addEventListener('swipeleft', () => {
-		const current = headerTabs.values.find(x => x.key === src.value);
-		const next = headerTabs.values[(headerTabs.values.indexOf(current) - 1) % headerTabs.values.length];
-		saveSrc(next.key);
-	});
-	document.addEventListener('swiperight', () => {
-		const current = headerTabs.values.find(x => x.key === src.value);
-		const next = headerTabs.values[(headerTabs.values.indexOf(current) + 1) % headerTabs.values.length];
-		saveSrc(next.key);
-	});
-}
+	document.addEventListener('touchstart', handleTouchStart, false);
+	document.addEventListener('touchmove', handleTouchMove, false);

+	let xDown = null;
+	let yDown = null;
+
+	function getTouches(evt) {
+		return (
+			evt.touches || evt.originalEvent.touches
+		);
+	}
+
+	function handleTouchStart(evt) {
+		const firstTouch = getTouches(evt)[0];
+		xDown = firstTouch.clientX;
+		yDown = firstTouch.clientY;
+	}
+
+	function handleTouchMove(evt) {
+		if (!xDown || !yDown) {
+			return;
+		}
+
+		let xUp = evt.touches[0].clientX;
+		let yUp = evt.touches[0].clientY;
+
+		let xDiff = xDown - xUp;
+		let yDiff = yDown - yUp;
+
+		if (Math.abs(xDiff) > Math.abs(yDiff)) {
+			if (xDiff > 0) {
+				console.log('right swipe');
+				const current = headerTabs.values.find((x) => x.key === src.value);
+				const next =
+					headerTabs.values[
+						(headerTabs.values.indexOf(current) + 1) % headerTabs.values.length
+					];
+				saveSrc(next.key);
+			} else {
+				console.log('left swipe');
+				const current = headerTabs.values.find((x) => x.key === src.value);
+				const next =
+					headerTabs.values[
+						(headerTabs.values.indexOf(current) - 1) % headerTabs.values.length
+					];
+				saveSrc(next.key);
+			}
+		} /* else {
+			if (yDiff > 0) {
+				// down swipe
+			} else {
+				// up swipe
+			}
+		} */
+		/* reset values */
+		xDown = null;
+		yDown = null;
+	}
+}
 </script>

 <style lang="scss" scoped>
-
 .cmuxhskf {
 	> .new {
 		position: sticky;
--- a/yarn.lock
+++ b/yarn.lock
@ -3900,7 +3900,6 @@ __metadata:
    start-server-and-test: 1.14.0
    strict-event-emitter-types: 2.0.0
    stringz: 2.1.0
-    swiped-events: ^1.1.6
    syuilo-password-strength: 0.0.1
    tesseract.js: ^2.1.5
    textarea-caret: 3.1.0
@ -10360,13 +10359,6 @@ __metadata:
  languageName: node
  linkType: hard

-"natives@npm:^1.1.6":
-  version: 1.1.6
-  resolution: "natives@npm:1.1.6"
-  checksum: f9823dddba1eb71dc34f7e684d6d2bb39e709bdc54c42e89f27ec4a87966564644d88d2ea332ddfb91d00129a03d8e73abc35b09a0d985a80d6eaad95f3c1887
-  languageName: node
-  linkType: hard
-
 "natural-compare@npm:^1.4.0":
  version: 1.4.0
  resolution: "natural-compare@npm:1.4.0"
@ -14054,15 +14046,6 @@ __metadata:
  languageName: unknown
  linkType: soft

-"swiped-events@npm:^1.1.6":
-  version: 1.1.6
-  resolution: "swiped-events@npm:1.1.6"
-  dependencies:
-    natives: ^1.1.6
-  checksum: c2c88d0390c667938213fe661c693522d32d0432acbd02ccb8f1883b67b503ffdfa22cbec89d2102d1f9f61023aa477b704920fd1ec883ae813d8756aacd5506
-  languageName: node
-  linkType: hard
-
 "symbol-tree@npm:^3.2.4":
  version: 3.2.4
  resolution: "symbol-tree@npm:3.2.4"