diff options
Diffstat (limited to 'packages/client/src/ui')
21 files changed, 113 insertions, 64 deletions
diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue index 05688d7c53..9f7388db53 100644 --- a/packages/client/src/ui/_common_/common.vue +++ b/packages/client/src/ui/_common_/common.vue @@ -17,9 +17,11 @@ <script lang="ts"> import { defineAsyncComponent, defineComponent } from 'vue'; -import { popup, popups, uploads, pendingApiRequestsCount } from '@/os'; +import { popup, popups, pendingApiRequestsCount } from '@/os'; +import { uploads } from '@/scripts/upload'; import * as sound from '@/scripts/sound'; import { $i } from '@/account'; +import { swInject } from './sw-inject'; import { stream } from '@/stream'; export default defineComponent({ @@ -37,7 +39,7 @@ export default defineComponent({ id: notification.id }); - popup(import('@/components/notification-toast.vue'), { + popup(defineAsyncComponent(() => import('@/components/notification-toast.vue')), { notification }, {}, 'closed'); } @@ -48,6 +50,11 @@ export default defineComponent({ if ($i) { const connection = stream.useChannel('main', null, 'UI'); connection.on('notification', onNotification); + + //#region Listen message from SW + if ('serviceWorker' in navigator) { + swInject(); + } } return { diff --git a/packages/client/src/ui/_common_/sidebar-for-mobile.vue b/packages/client/src/ui/_common_/sidebar-for-mobile.vue index afcc50725b..41d0837233 100644 --- a/packages/client/src/ui/_common_/sidebar-for-mobile.vue +++ b/packages/client/src/ui/_common_/sidebar-for-mobile.vue @@ -33,7 +33,7 @@ </template> <script lang="ts"> -import { computed, defineComponent, ref, toRef, watch } from 'vue'; +import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } from 'vue'; import { host } from '@/config'; import { search } from '@/scripts/search'; import * as os from '@/os'; @@ -61,13 +61,13 @@ export default defineComponent({ otherMenuItemIndicated, post: os.post, search, - openAccountMenu:(ev) => { + openAccountMenu: (ev) => { openAccountMenu({ withExtraOperation: true, }, ev); }, more: () => { - os.popup(import('@/components/launch-pad.vue'), {}, { + os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {}, { }, 'closed'); }, }; diff --git a/packages/client/src/ui/_common_/sidebar.vue b/packages/client/src/ui/_common_/sidebar.vue index a23b7d4152..d65e776d86 100644 --- a/packages/client/src/ui/_common_/sidebar.vue +++ b/packages/client/src/ui/_common_/sidebar.vue @@ -33,7 +33,7 @@ </template> <script lang="ts" setup> -import { computed, ref, watch } from 'vue'; +import { computed, defineAsyncComponent, ref, watch } from 'vue'; import * as os from '@/os'; import { menuDef } from '@/menu'; import { $i, openAccountMenu as openAccountMenu_ } from '@/account'; @@ -69,7 +69,7 @@ function openAccountMenu(ev: MouseEvent) { } function more(ev: MouseEvent) { - os.popup(import('@/components/launch-pad.vue'), { + os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), { src: ev.currentTarget ?? ev.target, }, { }, 'closed'); diff --git a/packages/client/src/ui/_common_/sw-inject.ts b/packages/client/src/ui/_common_/sw-inject.ts new file mode 100644 index 0000000000..371f80ca15 --- /dev/null +++ b/packages/client/src/ui/_common_/sw-inject.ts @@ -0,0 +1,44 @@ +import { inject } from 'vue'; +import { post } from '@/os'; +import { $i, login } from '@/account'; +import { defaultStore } from '@/store'; +import { getAccountFromId } from '@/scripts/get-account-from-id'; +import { router } from '@/router'; + +export function swInject() { + const navHook = inject('navHook', null); + const sideViewHook = inject('sideViewHook', null); + + navigator.serviceWorker.addEventListener('message', ev => { + if (_DEV_) { + console.log('sw msg', ev.data); + } + + if (ev.data.type !== 'order') return; + + if (ev.data.loginId !== $i?.id) { + return getAccountFromId(ev.data.loginId).then(account => { + if (!account) return; + return login(account.token, ev.data.url); + }); + } + + switch (ev.data.order) { + case 'post': + return post(ev.data.options); + case 'push': + if (router.currentRoute.value.path === ev.data.url) { + return window.scroll({ top: 0, behavior: 'smooth' }); + } + if (navHook) { + return navHook(ev.data.url); + } + if (sideViewHook && defaultStore.state.defaultSideView && ev.data.url !== '/') { + return sideViewHook(ev.data.url); + } + return router.push(ev.data.url); + default: + return; + } + }); +} diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue index ab7678a505..f3703d0e8f 100644 --- a/packages/client/src/ui/_common_/upload.vue +++ b/packages/client/src/ui/_common_/upload.vue @@ -20,8 +20,8 @@ <script lang="ts" setup> import { } from 'vue'; import * as os from '@/os'; +import { uploads } from '@/scripts/upload'; -const uploads = os.uploads; const zIndex = os.claimZIndex('high'); </script> diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue index c7fddbc491..57008aeaed 100644 --- a/packages/client/src/ui/classic.header.vue +++ b/packages/client/src/ui/classic.header.vue @@ -39,7 +39,7 @@ </template> <script lang="ts"> -import { defineComponent } from 'vue'; +import { defineAsyncComponent, defineComponent } from 'vue'; import { host } from '@/config'; import { search } from '@/scripts/search'; import * as os from '@/os'; @@ -101,7 +101,7 @@ export default defineComponent({ }, more(ev) { - os.popup(import('@/components/launch-pad.vue'), { + os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), { src: ev.currentTarget ?? ev.target, anchor: { x: 'center', y: 'bottom' }, }, { diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue index 3364ee39be..6c0ce023e4 100644 --- a/packages/client/src/ui/classic.sidebar.vue +++ b/packages/client/src/ui/classic.sidebar.vue @@ -41,7 +41,7 @@ </template> <script lang="ts"> -import { defineComponent } from 'vue'; +import { defineAsyncComponent, defineComponent } from 'vue'; import { host } from '@/config'; import { search } from '@/scripts/search'; import * as os from '@/os'; @@ -121,12 +121,12 @@ export default defineComponent({ }, more(ev) { - os.popup(import('@/components/launch-pad.vue'), { + os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), { src: ev.currentTarget ?? ev.target, }, {}, 'closed'); }, - openAccountMenu:(ev) => { + openAccountMenu: (ev) => { openAccountMenu({ withExtraOperation: true, }, ev); diff --git a/packages/client/src/ui/classic.widgets.vue b/packages/client/src/ui/classic.widgets.vue index f42f27e926..6f9d18bde5 100644 --- a/packages/client/src/ui/classic.widgets.vue +++ b/packages/client/src/ui/classic.widgets.vue @@ -44,13 +44,13 @@ export default defineComponent({ }, removeWidget(widget) { - this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id)); + this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id !== widget.id)); }, updateWidget({ id, data }) { this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? { ...w, - data: data + data, } : w)); }, diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue index 1e0d9a1652..e538a93f06 100644 --- a/packages/client/src/ui/deck.vue +++ b/packages/client/src/ui/deck.vue @@ -17,7 +17,7 @@ :key="ids[0]" class="column" :column="columns.find(c => c.id === ids[0])" - :is-stacked="false" + :is-stacked="false" :style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }" @parent-focus="moveFocus(ids[0], $event)" /> diff --git a/packages/client/src/ui/deck/antenna-column.vue b/packages/client/src/ui/deck/antenna-column.vue index e0f56c2800..f12f5c6b25 100644 --- a/packages/client/src/ui/deck/antenna-column.vue +++ b/packages/client/src/ui/deck/antenna-column.vue @@ -22,8 +22,8 @@ const props = defineProps<{ }>(); const emit = defineEmits<{ - (e: 'loaded'): void; - (e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; + (ev: 'loaded'): void; + (ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; }>(); let timeline = $ref<InstanceType<typeof XTimeline>>(); diff --git a/packages/client/src/ui/deck/column-core.vue b/packages/client/src/ui/deck/column-core.vue index 485e89a062..2667b6d745 100644 --- a/packages/client/src/ui/deck/column-core.vue +++ b/packages/client/src/ui/deck/column-core.vue @@ -29,7 +29,7 @@ defineProps<{ }>(); const emit = defineEmits<{ - (e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; + (ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; }>(); /* diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue index 5f8da8cf8f..6db3549fbb 100644 --- a/packages/client/src/ui/deck/column.vue +++ b/packages/client/src/ui/deck/column.vue @@ -61,8 +61,8 @@ const props = withDefaults(defineProps<{ }); const emit = defineEmits<{ - (e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; - (e: 'change-active-state', v: boolean): void; + (ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; + (ev: 'change-active-state', v: boolean): void; }>(); let body = $ref<HTMLDivElement>(); @@ -94,7 +94,6 @@ onBeforeUnmount(() => { os.deckGlobalEvents.off('column.dragEnd', onOtherDragEnd); }); - function onOtherDragStart() { dropready = true; } @@ -193,9 +192,9 @@ function goTop() { }); } -function onDragstart(e) { - e.dataTransfer.effectAllowed = 'move'; - e.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, props.column.id); +function onDragstart(ev) { + ev.dataTransfer.effectAllowed = 'move'; + ev.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, props.column.id); // Chromeのバグで、Dragstartハンドラ内ですぐにDOMを変更する(=リアクティブなプロパティを変更する)とDragが終了してしまう // SEE: https://stackoverflow.com/questions/19639969/html5-dragend-event-firing-immediately @@ -204,35 +203,34 @@ function onDragstart(e) { }, 10); } -function onDragend(e) { +function onDragend(ev) { dragging = false; } -function onDragover(e) { +function onDragover(ev) { // 自分自身がドラッグされている場合 if (dragging) { // 自分自身にはドロップさせない - e.dataTransfer.dropEffect = 'none'; - return; - } + ev.dataTransfer.dropEffect = 'none'; + } else { + const isDeckColumn = ev.dataTransfer.types[0] === _DATA_TRANSFER_DECK_COLUMN_; - const isDeckColumn = e.dataTransfer.types[0] == _DATA_TRANSFER_DECK_COLUMN_; + ev.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none'; - e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none'; - - if (!dragging && isDeckColumn) draghover = true; + if (isDeckColumn) draghover = true; + } } function onDragleave() { draghover = false; } -function onDrop(e) { +function onDrop(ev) { draghover = false; os.deckGlobalEvents.emit('column.dragEnd'); - const id = e.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_); - if (id != null && id != '') { + const id = ev.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_); + if (id != null && id !== '') { swapColumn(props.column.id, id); } } diff --git a/packages/client/src/ui/deck/deck-store.ts b/packages/client/src/ui/deck/deck-store.ts index f7c39ad8fd..c847bf2b43 100644 --- a/packages/client/src/ui/deck/deck-store.ts +++ b/packages/client/src/ui/deck/deck-store.ts @@ -72,8 +72,8 @@ export const loadDeck = async () => { scope: ['client', 'deck', 'profiles'], key: deckStore.state.profile, }); - } catch (e) { - if (e.code === 'NO_SUCH_KEY') { + } catch (err) { + if (err.code === 'NO_SUCH_KEY') { // 後方互換性のため if (deckStore.state.profile === 'default') { saveDeck(); @@ -94,7 +94,7 @@ export const loadDeck = async () => { deckStore.set('layout', [['a'], ['b']]); return; } - throw e; + throw err; } deckStore.set('columns', deck.columns); @@ -114,7 +114,7 @@ export const saveDeck = throttle(1000, () => { }); export function addColumn(column: Column) { - if (column.name == undefined) column.name = null; + if (column.name === undefined) column.name = null; deckStore.push('columns', column); deckStore.push('layout', [column.id]); saveDeck(); @@ -129,10 +129,10 @@ export function removeColumn(id: Column['id']) { } export function swapColumn(a: Column['id'], b: Column['id']) { - const aX = deckStore.state.layout.findIndex(ids => ids.indexOf(a) != -1); - const aY = deckStore.state.layout[aX].findIndex(id => id == a); - const bX = deckStore.state.layout.findIndex(ids => ids.indexOf(b) != -1); - const bY = deckStore.state.layout[bX].findIndex(id => id == b); + const aX = deckStore.state.layout.findIndex(ids => ids.indexOf(a) !== -1); + const aY = deckStore.state.layout[aX].findIndex(id => id === a); + const bX = deckStore.state.layout.findIndex(ids => ids.indexOf(b) !== -1); + const bY = deckStore.state.layout[bX].findIndex(id => id === b); const layout = copy(deckStore.state.layout); layout[aX][aY] = b; layout[bX][bY] = a; @@ -259,7 +259,7 @@ export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) { const columnIndex = deckStore.state.columns.findIndex(c => c.id === id); const column = copy(deckStore.state.columns[columnIndex]); if (column == null) return; - column.widgets = column.widgets.filter(w => w.id != widget.id); + column.widgets = column.widgets.filter(w => w.id !== widget.id); columns[columnIndex] = column; deckStore.set('columns', columns); saveDeck(); @@ -276,14 +276,14 @@ export function setColumnWidgets(id: Column['id'], widgets: ColumnWidget[]) { saveDeck(); } -export function updateColumnWidget(id: Column['id'], widgetId: string, data: any) { +export function updateColumnWidget(id: Column['id'], widgetId: string, WidgetData: any) { const columns = copy(deckStore.state.columns); const columnIndex = deckStore.state.columns.findIndex(c => c.id === id); const column = copy(deckStore.state.columns[columnIndex]); if (column == null) return; column.widgets = column.widgets.map(w => w.id === widgetId ? { ...w, - data: data + data: widgetData, } : w); columns[columnIndex] = column; deckStore.set('columns', columns); diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue index ebaba574f4..4837c0ce38 100644 --- a/packages/client/src/ui/deck/direct-column.vue +++ b/packages/client/src/ui/deck/direct-column.vue @@ -18,7 +18,7 @@ defineProps<{ }>(); const emit = defineEmits<{ - (e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; + (ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; }>(); const pagination = { diff --git a/packages/client/src/ui/deck/list-column.vue b/packages/client/src/ui/deck/list-column.vue index b990516d05..843a3bd1cb 100644 --- a/packages/client/src/ui/deck/list-column.vue +++ b/packages/client/src/ui/deck/list-column.vue @@ -22,8 +22,8 @@ const props = defineProps<{ }>(); const emit = defineEmits<{ - (e: 'loaded'): void; - (e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; + (ev: 'loaded'): void; + (ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; }>(); let timeline = $ref<InstanceType<typeof XTimeline>>(); diff --git a/packages/client/src/ui/deck/main-column.vue b/packages/client/src/ui/deck/main-column.vue index 57caab44cb..3c97cd4867 100644 --- a/packages/client/src/ui/deck/main-column.vue +++ b/packages/client/src/ui/deck/main-column.vue @@ -35,7 +35,7 @@ defineProps<{ }>(); const emit = defineEmits<{ - (e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; + (ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; }>(); let pageInfo = $ref<Record<string, any> | null>(null); diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue index a7a012a7fb..0b6ca3a239 100644 --- a/packages/client/src/ui/deck/mentions-column.vue +++ b/packages/client/src/ui/deck/mentions-column.vue @@ -18,7 +18,7 @@ defineProps<{ }>(); const emit = defineEmits<{ - (e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; + (ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; }>(); const pagination = { diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/notifications-column.vue index 50ee12a275..6dd040cb8d 100644 --- a/packages/client/src/ui/deck/notifications-column.vue +++ b/packages/client/src/ui/deck/notifications-column.vue @@ -7,7 +7,7 @@ </template> <script lang="ts" setup> -import { } from 'vue'; +import { defineAsyncComponent } from 'vue'; import XColumn from './column.vue'; import XNotifications from '@/components/notifications.vue'; import * as os from '@/os'; @@ -20,11 +20,11 @@ const props = defineProps<{ }>(); const emit = defineEmits<{ - (e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; + (ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; }>(); function func() { - os.popup(import('@/components/notification-setting-window.vue'), { + os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), { includingTypes: props.column.includingTypes, }, { done: async (res) => { diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue index 02b9ef83a1..f3ecda5aa4 100644 --- a/packages/client/src/ui/deck/tl-column.vue +++ b/packages/client/src/ui/deck/tl-column.vue @@ -35,8 +35,8 @@ const props = defineProps<{ }>(); const emit = defineEmits<{ - (e: 'loaded'): void; - (e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; + (ev: 'loaded'): void; + (ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; }>(); let disabled = $ref(false); diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/widgets-column.vue index a2edc38357..10c6f5adf6 100644 --- a/packages/client/src/ui/deck/widgets-column.vue +++ b/packages/client/src/ui/deck/widgets-column.vue @@ -3,7 +3,7 @@ <template #header><i class="fas fa-window-maximize" style="margin-right: 8px;"></i>{{ column.name }}</template> <div class="wtdtxvec"> - <XWidgets v-if="column.widgets" :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/> + <XWidgets :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/> </div> </XColumn> </template> @@ -20,7 +20,7 @@ const props = defineProps<{ }>(); const emit = defineEmits<{ - (e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; + (ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; }>(); let edit = $ref(false); diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue index 2660e80368..7aed083886 100644 --- a/packages/client/src/ui/universal.widgets.vue +++ b/packages/client/src/ui/universal.widgets.vue @@ -3,7 +3,7 @@ <XWidgets :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/> <button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="fas fa-check"></i> {{ i18n.ts.editWidgetsExit }}</button> - <button v-else class="_textButton" style="font-size: 0.9em;" @click="editMode = true"><i class="fas fa-pencil-alt"></i> {{ i18n.ts.editWidgets }}</button> + <button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="fas fa-pencil-alt"></i> {{ i18n.ts.editWidgets }}</button> </div> </template> @@ -14,7 +14,7 @@ import { i18n } from '@/i18n'; import { defaultStore } from '@/store'; const emit = defineEmits<{ - (e: 'mounted', el: Element): void; + (ev: 'mounted', el: Element): void; }>(); let editMode = $ref(false); @@ -32,13 +32,13 @@ function addWidget(widget) { } function removeWidget(widget) { - defaultStore.set('widgets', defaultStore.state.widgets.filter(w => w.id != widget.id)); + defaultStore.set('widgets', defaultStore.state.widgets.filter(w => w.id !== widget.id)); } function updateWidget({ id, data }) { defaultStore.set('widgets', defaultStore.state.widgets.map(w => w.id === id ? { ...w, - data: data + data, } : w)); } |