Skip to content

Commit

Permalink
feat(frontend): スワイプやボタンでタイムラインを再読込する機能 (misskey-dev#12113)
Browse files Browse the repository at this point in the history
  • Loading branch information
u1-liquid committed Oct 30, 2023
1 parent f66f78d commit 38d876e
Show file tree
Hide file tree
Showing 14 changed files with 382 additions and 58 deletions.
4 changes: 4 additions & 0 deletions locales/en-US.yml
Original file line number Diff line number Diff line change
Expand Up @@ -1098,6 +1098,10 @@ expired: "Expired"
doYouAgree: "Agree?"
beSureToReadThisAsItIsImportant: "Please read this important information."
iHaveReadXCarefullyAndAgree: "I have read the text \"{x}\" and agree."
releaseToRefresh: "Release to reload"
refreshing: "Reloading"
pullDownToRefresh: "Pull down to reload"
disableStreamingTimeline: "Disable realtime update on timeline"
_initialAccountSetting:
accountCreated: "Your account was successfully created!"
letsStartAccountSetup: "For starters, let's set up your profile."
Expand Down
4 changes: 4 additions & 0 deletions locales/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1109,6 +1109,10 @@ export interface Locale {
"pastAnnouncements": string;
"youHaveUnreadAnnouncements": string;
"externalServices": string;
"releaseToRefresh": string;
"refreshing": string;
"pullDownToRefresh": string;
"disableStreamingTimeline": string;
"_announcement": {
"forExistingUsers": string;
"forExistingUsersDescription": string;
Expand Down
4 changes: 4 additions & 0 deletions locales/ja-JP.yml
Original file line number Diff line number Diff line change
Expand Up @@ -1106,6 +1106,10 @@ currentAnnouncements: "現在のお知らせ"
pastAnnouncements: "過去のお知らせ"
youHaveUnreadAnnouncements: "未読のお知らせがあります。"
externalServices: "外部サービス"
releaseToRefresh: "離してリロード"
refreshing: "リロード中"
pullDownToRefresh: "引っ張ってリロード"
disableStreamingTimeline: "タイムラインのリアルタイム更新を無効にする"

_announcement:
forExistingUsers: "既存ユーザーのみ"
Expand Down
3 changes: 2 additions & 1 deletion packages/frontend/src/boot/main-boot.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { common } from './common';
import { version, ui, lang, updateLocale } from '@/config';
import { i18n, updateI18n } from '@/i18n';
import { confirm, alert, post, popup, toast } from '@/os';
import { useStream } from '@/stream';
import { useStream, isReloading } from '@/stream';
import * as sound from '@/scripts/sound';
import { $i, refreshAccount, login, updateAccount, signout } from '@/account';
import { defaultStore, ColdDeviceStorage } from '@/store';
Expand Down Expand Up @@ -39,6 +39,7 @@ export async function mainBoot() {

let reloadDialogShowing = false;
stream.on('_disconnected_', async () => {
if (isReloading) return;
if (defaultStore.state.serverDisconnectedBehavior === 'reload') {
location.reload();
} else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') {
Expand Down
2 changes: 2 additions & 0 deletions packages/frontend/src/components/MkPageWindow.vue
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,8 @@ defineExpose({

<style lang="scss" module>
.root {
overscroll-behavior: none;

min-height: 100%;
background: var(--bg);

Expand Down
6 changes: 6 additions & 0 deletions packages/frontend/src/components/MkPagination.vue
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ const props = withDefaults(defineProps<{

const emit = defineEmits<{
(ev: 'queue', count: number): void;
(ev: 'status', error: boolean): void;
}>();

let rootEl = $shallowRef<HTMLElement>();
Expand Down Expand Up @@ -164,6 +165,11 @@ watch(queue, (a, b) => {
emit('queue', queue.value.length);
}, { deep: true });

watch(error, (n, o) => {
if (n === o) return;
emit('status', n);
});

async function init(): Promise<void> {
queue.value = [];
fetching.value = true;
Expand Down
238 changes: 238 additions & 0 deletions packages/frontend/src/components/MkPullToRefresh.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->

<template>
<div ref="rootEl">
<div v-if="isPullStart" :class="$style.frame" :style="`--frame-min-height: ${pullDistance / (PULL_BRAKE_BASE + (pullDistance / PULL_BRAKE_FACTOR))}px;`">
<div :class="$style.frameContent">
<MkLoading v-if="isRefreshing" :class="$style.loader" :em="true"/>
<i v-else class="ti ti-arrow-bar-to-down" :class="[$style.icon, { [$style.refresh]: isPullEnd }]"></i>
<div :class="$style.text">
<template v-if="isPullEnd">{{ i18n.ts.releaseToRefresh }}</template>
<template v-else-if="isRefreshing">{{ i18n.ts.refreshing }}</template>
<template v-else>{{ i18n.ts.pullDownToRefresh }}</template>
</div>
</div>
</div>
<div :class="{ [$style.slotClip]: isPullStart }">
<slot/>
</div>
</div>
</template>

<script lang="ts" setup>
import MkLoading from '@/components/global/MkLoading.vue';
import { onMounted, onUnmounted } from 'vue';
import { i18n } from '@/i18n.js';

const SCROLL_STOP = 10;
const MAX_PULL_DISTANCE = Infinity;
const FIRE_THRESHOLD = 230;
const RELEASE_TRANSITION_DURATION = 200;
const PULL_BRAKE_BASE = 2;
const PULL_BRAKE_FACTOR = 200;

let isPullStart = $ref(false);
let isPullEnd = $ref(false);
let isRefreshing = $ref(false);
let pullDistance = $ref(0);

let supportPointerDesktop = false;
let startScreenY: number | null = null;

const rootEl = $shallowRef<HTMLDivElement>();
let scrollEl: HTMLElement | null = null;

let disabled = false;

const emits = defineEmits<(ev: "refresh") => void>();

function getScrollableParentElement(node) {
if (node == null) {
return null;
}

if (node.scrollHeight > node.clientHeight) {
return node;
} else {
return getScrollableParentElement(node.parentNode);
}
}

function getScreenY(event) {
if (supportPointerDesktop) {
return event.screenY;
}
return event.touches[0].screenY;
}

function moveStart(event) {
if (!isPullStart && !isRefreshing && !disabled) {
isPullStart = true;
startScreenY = getScreenY(event);
pullDistance = 0;
}
}

function moveBySystem(to: number): Promise<void> {
return new Promise(r => {
const startHeight = pullDistance;
const overHeight = pullDistance - to;
if (overHeight < 1) {
r();
return;
}
const startTime = Date.now();
let intervalId = setInterval(() => {
const time = Date.now() - startTime;
if (time > RELEASE_TRANSITION_DURATION) {
pullDistance = to;
clearInterval(intervalId);
r();
return;
}
const nextHeight = startHeight - (overHeight / RELEASE_TRANSITION_DURATION) * time;
if (pullDistance < nextHeight) return;
pullDistance = nextHeight;
}, 1);
});
}

async function fixOverContent() {
if (pullDistance > FIRE_THRESHOLD) {
await moveBySystem(FIRE_THRESHOLD);
}
}

async function closeContent() {
if (pullDistance > 0) {
await moveBySystem(0);
}
}

function moveEnd() {
if (isPullStart && !isRefreshing) {
startScreenY = null;
if (isPullEnd) {
isPullEnd = false;
isRefreshing = true;
fixOverContent().then(() => emits('refresh'));
} else {
closeContent().then(() => isPullStart = false);
}
}
}

function moving(event) {
if (!isPullStart || isRefreshing || disabled) return;

if (!scrollEl) {
scrollEl = getScrollableParentElement(rootEl);
}
if ((scrollEl?.scrollTop ?? 0) > (supportPointerDesktop ? SCROLL_STOP : SCROLL_STOP + pullDistance)) {
pullDistance = 0;
isPullEnd = false;
moveEnd();
return;
}

if (startScreenY === null) {
startScreenY = getScreenY(event);
}
const moveScreenY = getScreenY(event);

const moveHeight = moveScreenY - startScreenY!;
pullDistance = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE);

isPullEnd = pullDistance >= FIRE_THRESHOLD;
}

/**
* emit(refresh)が完了したことを知らせる関数
*
* タイムアウトがないのでこれを最終的に実行しないと出たままになる
*/
function refreshFinished() {
closeContent().then(() => {
isPullStart = false;
isRefreshing = false;
});
}

function setDisabled(value) {
disabled = value;
}

onMounted(() => {
// マウス操作でpull to refreshするのは不便そう
//supportPointerDesktop = !!window.PointerEvent && deviceKind === 'desktop';

if (supportPointerDesktop) {
rootEl.addEventListener('pointerdown', moveStart);
// ポインターの場合、ポップアップ系の動作をするとdownだけ発火されてupが発火されないため
window.addEventListener('pointerup', moveEnd);
rootEl.addEventListener('pointermove', moving, { passive: true });
} else {
rootEl.addEventListener('touchstart', moveStart);
rootEl.addEventListener('touchend', moveEnd);
rootEl.addEventListener('touchmove', moving, { passive: true });
}
});

onUnmounted(() => {
if (supportPointerDesktop) window.removeEventListener('pointerup', moveEnd);
});

defineExpose({
refreshFinished,
setDisabled,
});
</script>

<style lang="scss" module>
.frame {
position: relative;
overflow: clip;

width: 100%;
min-height: var(--frame-min-height, 0px);

mask-image: linear-gradient(90deg, #000 0%, #000 80%, transparent);
-webkit-mask-image: -webkit-linear-gradient(90deg, #000 0%, #000 80%, transparent);

pointer-events: none;
}

.frameContent {
position: absolute;
bottom: 0;
width: 100%;
margin: 5px 0;
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;

> .icon, > .loader {
margin: 6px 0;
}

> .icon {
transition: transform .25s;

&.refresh {
transform: rotate(180deg);
}
}

> .text {
margin: 5px 0;
}
}

.slotClip {
overflow-y: clip;
}
</style>
Loading

0 comments on commit 38d876e

Please sign in to comment.