natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 📦 fuck them libs

This commit is contained in:
ThatOneCalculator 2022-08-15 19:18:54 -07:00
parent fc24c0639f
commit 866b1e9428
3 changed files with 198 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/package.json
View File

@ -46,7 +46,6 @@
"seedrandom": "3.0.5", "seedrandom": "3.0.5",
"strict-event-emitter-types": "2.0.0", "strict-event-emitter-types": "2.0.0",
"stringz": "2.1.0", "stringz": "2.1.0",
"swiped-events": "^1.1.6",
"syuilo-password-strength": "0.0.1", "syuilo-password-strength": "0.0.1",
"tesseract.js": "^2.1.5", "tesseract.js": "^2.1.5",
"textarea-caret": "3.1.0", "textarea-caret": "3.1.0",

287
packages/client/src/pages/timeline.vue
View File

@ -1,24 +1,42 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template> <template #header
<MkSpacer :content-max="800"> ><MkPageHeader
<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf"> v-model:tab="src"
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/> :actions="headerActions"
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/> :tabs="headerTabs"
:display-my-avatar="true"
<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div> /></template>
<div class="tl _block"> <MkSpacer :content-max="800">
<XTimeline <div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
ref="tl" :key="src" <XTutorial
class="tl" v-if="$store.reactiveState.tutorial.value != -1"
:src="src" class="tutorial _block"
:sound="true"
@queue="queueUpdated"
/> />
<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>
</div> </MkSpacer>
</MkSpacer> </MkStickyContainer>
</MkStickyContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -34,16 +52,20 @@ import { $i } from '@/account';
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from '@/scripts/page-metadata';
import { deviceKind } from '@/scripts/device-kind'; import { deviceKind } from '@/scripts/device-kind';
import 'swiped-events';
const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue')); const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
const isLocalTimelineAvailable = !instance.disableLocalTimeline || ($i != null && ($i.isModerator || $i.isAdmin)); const isLocalTimelineAvailable =
const isRecommendedTimelineAvailable = !instance.disableRecommendedTimeline || ($i != null && ($i.isModerator || $i.isAdmin)); !instance.disableLocalTimeline ||
const isGlobalTimelineAvailable = !instance.disableGlobalTimeline || ($i != null && ($i.isModerator || $i.isAdmin)); ($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 enableGuestTimeline = instance.enableGuestTimeline;
const keymap = { const keymap = {
't': focus, t: focus,
}; };
const DESKTOP_THRESHOLD = 1100; const DESKTOP_THRESHOLD = 1100;
@ -51,18 +73,24 @@ const MOBILE_THRESHOLD = 500;
// デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない // デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD); 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', () => { 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 tlComponent = $ref<InstanceType<typeof XTimeline>>();
const rootEl = $ref<HTMLElement>(); const rootEl = $ref<HTMLElement>();
let queue = $ref(0); 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 { function queueUpdated(q: number): void {
queue = q; queue = q;
@ -74,7 +102,7 @@ function top(): void {
async function chooseList(ev: MouseEvent): Promise<void> { async function chooseList(ev: MouseEvent): Promise<void> {
const lists = await os.api('users/lists/list'); const lists = await os.api('users/lists/list');
const items = lists.map(list => ({ const items = lists.map((list) => ({
type: 'link' as const, type: 'link' as const,
text: list.name, text: list.name,
to: `/timeline/list/${list.id}`, to: `/timeline/list/${list.id}`,
@ -84,7 +112,7 @@ async function chooseList(ev: MouseEvent): Promise<void> {
async function chooseAntenna(ev: MouseEvent): Promise<void> { async function chooseAntenna(ev: MouseEvent): Promise<void> {
const antennas = await os.api('antennas/list'); const antennas = await os.api('antennas/list');
const items = antennas.map(antenna => ({ const items = antennas.map((antenna) => ({
type: 'link' as const, type: 'link' as const,
text: antenna.name, text: antenna.name,
indicate: antenna.hasUnreadNote, indicate: antenna.hasUnreadNote,
@ -95,7 +123,7 @@ async function chooseAntenna(ev: MouseEvent): Promise<void> {
async function chooseChannel(ev: MouseEvent): Promise<void> { async function chooseChannel(ev: MouseEvent): Promise<void> {
const channels = await os.api('channels/followed'); const channels = await os.api('channels/followed');
const items = channels.map(channel => ({ const items = channels.map((channel) => ({
type: 'link' as const, type: 'link' as const,
text: channel.name, text: channel.name,
indicate: channel.hasUnreadNote, indicate: channel.hasUnreadNote,
@ -104,7 +132,9 @@ async function chooseChannel(ev: MouseEvent): Promise<void> {
os.popupMenu(items, ev.currentTarget ?? ev.target); 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.set('tl', {
...defaultStore.state.tl, ...defaultStore.state.tl,
src: newSrc, src: newSrc,
@ -124,75 +154,154 @@ function focus(): void {
tlComponent.focus(); tlComponent.focus();
} }
const headerActions = $computed(() => [{ const headerActions = $computed(() => [
icon: 'fas fa-list-ul', {
title: i18n.ts.lists, icon: 'fas fa-list-ul',
iconOnly: true, title: i18n.ts.lists,
handler: chooseList, iconOnly: true,
}, { handler: chooseList,
icon: 'fas fa-satellite', },
title: i18n.ts.antennas, {
iconOnly: true, icon: 'fas fa-satellite',
handler: chooseAntenna, title: i18n.ts.antennas,
}, /* **TODO: fix timetravel** { iconOnly: true,
handler: chooseAntenna,
} /* **TODO: fix timetravel** {
icon: 'fas fa-calendar-alt', icon: 'fas fa-calendar-alt',
title: i18n.ts.jumpToSpecifiedDate, title: i18n.ts.jumpToSpecifiedDate,
iconOnly: true, iconOnly: true,
handler: timetravel, handler: timetravel,
}*/]); }*/,
]);
const headerTabs = $computed(() => [{ const headerTabs = $computed(() => [
key: 'home', {
title: i18n.ts._timelines.home, key: 'home',
icon: 'fas fa-home', title: i18n.ts._timelines.home,
iconOnly: true, icon: 'fas fa-home',
}, ...(isLocalTimelineAvailable ? [{ iconOnly: true,
key: 'local', },
title: i18n.ts._timelines.local, ...(isLocalTimelineAvailable
icon: 'fas fa-user-group', ? [
iconOnly: true, {
}] : []), key: 'local',
...(isRecommendedTimelineAvailable ? [{ title: i18n.ts._timelines.local,
key: 'recommended', icon: 'fas fa-user-group',
title: i18n.ts._timelines.recommended, iconOnly: true,
icon: 'fas fa-signs-post', },
iconOnly: true, ]
}] : []), : []),
...(isLocalTimelineAvailable ? [{ ...(isRecommendedTimelineAvailable
key: 'social', ? [
title: i18n.ts._timelines.social, {
icon: 'fas fa-handshake-simple', key: 'recommended',
iconOnly: true, title: i18n.ts._timelines.recommended,
}] : []), icon: 'fas fa-signs-post',
...(isGlobalTimelineAvailable ? [{ iconOnly: true,
key: 'global', },
title: i18n.ts._timelines.global, ]
icon: 'fas fa-globe', : []),
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(() => ({ definePageMetadata(
title: i18n.ts.timeline, computed(() => ({
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', 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) { if (isMobile.value) {
document.addEventListener('swipeleft', () => { document.addEventListener('touchstart', handleTouchStart, false);
const current = headerTabs.values.find(x => x.key === src.value); document.addEventListener('touchmove', handleTouchMove, false);
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);
});
}
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.cmuxhskf { .cmuxhskf {
> .new { > .new {
position: sticky; position: sticky;

17
yarn.lock
View File

@ -3900,7 +3900,6 @@ __metadata:
start-server-and-test: 1.14.0 start-server-and-test: 1.14.0
strict-event-emitter-types: 2.0.0 strict-event-emitter-types: 2.0.0
stringz: 2.1.0 stringz: 2.1.0
swiped-events: ^1.1.6
syuilo-password-strength: 0.0.1 syuilo-password-strength: 0.0.1
tesseract.js: ^2.1.5 tesseract.js: ^2.1.5
textarea-caret: 3.1.0 textarea-caret: 3.1.0
@ -10360,13 +10359,6 @@ __metadata:
languageName: node languageName: node
linkType: hard 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": "natural-compare@npm:^1.4.0":
version: 1.4.0 version: 1.4.0
resolution: "natural-compare@npm:1.4.0" resolution: "natural-compare@npm:1.4.0"
@ -14054,15 +14046,6 @@ __metadata:
languageName: unknown languageName: unknown
linkType: soft 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": "symbol-tree@npm:^3.2.4":
version: 3.2.4 version: 3.2.4
resolution: "symbol-tree@npm:3.2.4" resolution: "symbol-tree@npm:3.2.4"