fix: format script; chore: format
This commit is contained in:
Kainoa Kanter
parent
aeb0839da9
commit
6bf1cbc0ef
430 changed files with 36649 additions and 21793 deletions
|
|
@ -48,8 +48,8 @@ Thank you for your PR! Before creating a PR, please check the following:
|
|||
- If there is an Issue which will be resolved by this PR, please include a reference to the Issue in the text. Good examples include `Closing: #21` or `Resolves: #21`
|
||||
- Check if there are any documents that need to be created or updated due to this change.
|
||||
- If you have added a feature or fixed a bug, please add a test case if possible.
|
||||
- Please make sure that tests and Lint are passed in advance.
|
||||
- You can run it with `pnpm run test` and `pnpm run lint`. [See more info](#testing)
|
||||
- Please make sure that formatting, tests and Lint are passed in advance.
|
||||
- You can run it with `pnpm run format`, `pnpm run test` and `pnpm run lint`. [See more info](#testing)
|
||||
- If this PR includes UI changes, please attach a screenshot in the text.
|
||||
|
||||
Thanks for your cooperation 🤗
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
"e2e": "start-server-and-test start:test http://localhost:61812 cy:run",
|
||||
"mocha": "pnpm --filter backend run mocha",
|
||||
"test": "pnpm run mocha",
|
||||
"format": "gulp format",
|
||||
"format": "pnpm rome format packages/**/* --write && pnpm --filter client run format",
|
||||
"clean": "pnpm node ./scripts/clean.js",
|
||||
"clean-all": "pnpm node ./scripts/clean-all.js",
|
||||
"cleanall": "pnpm run clean-all"
|
||||
|
|
|
|||
15
packages/client/.prettierrc
Normal file
15
packages/client/.prettierrc
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"tabWidth": 4,
|
||||
"useTabs": true,
|
||||
"singleQuote": false,
|
||||
"vueIndentScriptAndStyle": false,
|
||||
"plugins": ["vue"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": "*.vue",
|
||||
"options": {
|
||||
"parser": "vue"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -4,7 +4,8 @@
|
|||
"scripts": {
|
||||
"watch": "pnpm vite build --watch --mode development",
|
||||
"build": "pnpm vite build",
|
||||
"lint": "pnpm rome check \"src/**/*.{ts,vue}\""
|
||||
"lint": "pnpm rome check \"src/**/*.{ts,vue}\"",
|
||||
"format": "pnpm prettier --write '**/*.vue'"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@discordapp/twemoji": "14.0.2",
|
||||
|
|
@ -54,6 +55,8 @@
|
|||
"matter-js": "0.18.0",
|
||||
"mfm-js": "0.23.2",
|
||||
"photoswipe": "5.3.4",
|
||||
"prettier": "2.8.7",
|
||||
"prettier-plugin-vue": "1.1.6",
|
||||
"prismjs": "1.29.0",
|
||||
"punycode": "2.1.1",
|
||||
"querystring": "0.2.1",
|
||||
|
|
|
|||
|
|
@ -1,64 +1,93 @@
|
|||
<template>
|
||||
<div class="bcekxzvu _gap _panel">
|
||||
<div class="target">
|
||||
<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`">
|
||||
<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true" :disable-link="true"/>
|
||||
<div class="names">
|
||||
<MkUserName class="name" :user="report.targetUser"/>
|
||||
<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
|
||||
<div class="bcekxzvu _gap _panel">
|
||||
<div class="target">
|
||||
<MkA
|
||||
v-user-preview="report.targetUserId"
|
||||
class="info"
|
||||
:to="`/user-info/${report.targetUserId}`"
|
||||
>
|
||||
<MkAvatar
|
||||
class="avatar"
|
||||
:user="report.targetUser"
|
||||
:show-indicator="true"
|
||||
:disable-link="true"
|
||||
/>
|
||||
<div class="names">
|
||||
<MkUserName class="name" :user="report.targetUser" />
|
||||
<MkAcct
|
||||
class="acct"
|
||||
:user="report.targetUser"
|
||||
style="display: block"
|
||||
/>
|
||||
</div>
|
||||
</MkA>
|
||||
<MkKeyValue class="_formBlock">
|
||||
<template #key>{{ i18n.ts.registeredDate }}</template>
|
||||
<template #value
|
||||
>{{
|
||||
new Date(report.targetUser.createdAt).toLocaleString()
|
||||
}}
|
||||
(<MkTime :time="report.targetUser.createdAt" />)</template
|
||||
>
|
||||
</MkKeyValue>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div>
|
||||
<Mfm :text="report.comment" />
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter" />
|
||||
</div>
|
||||
<div v-if="report.assignee">
|
||||
{{ i18n.ts.moderator }}:
|
||||
<MkAcct :user="report.assignee" />
|
||||
</div>
|
||||
<div><MkTime :time="report.createdAt" /></div>
|
||||
<div class="action">
|
||||
<MkSwitch
|
||||
v-model="forward"
|
||||
:disabled="
|
||||
report.targetUser.host == null || report.resolved
|
||||
"
|
||||
>
|
||||
{{ i18n.ts.forwardReport }}
|
||||
<template #caption>{{
|
||||
i18n.ts.forwardReportIsAnonymous
|
||||
}}</template>
|
||||
</MkSwitch>
|
||||
<MkButton v-if="!report.resolved" primary @click="resolve">{{
|
||||
i18n.ts.abuseMarkAsResolved
|
||||
}}</MkButton>
|
||||
</div>
|
||||
</MkA>
|
||||
<MkKeyValue class="_formBlock">
|
||||
<template #key>{{ i18n.ts.registeredDate }}</template>
|
||||
<template #value>{{ new Date(report.targetUser.createdAt).toLocaleString() }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
|
||||
</MkKeyValue>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div>
|
||||
<Mfm :text="report.comment"/>
|
||||
</div>
|
||||
<hr/>
|
||||
<div>{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter"/></div>
|
||||
<div v-if="report.assignee">
|
||||
{{ i18n.ts.moderator }}:
|
||||
<MkAcct :user="report.assignee"/>
|
||||
</div>
|
||||
<div><MkTime :time="report.createdAt"/></div>
|
||||
<div class="action">
|
||||
<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
|
||||
{{ i18n.ts.forwardReport }}
|
||||
<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
|
||||
</MkSwitch>
|
||||
<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkSwitch from '@/components/form/switch.vue';
|
||||
import MkKeyValue from '@/components/MkKeyValue.vue';
|
||||
import { acct, userPage } from '@/filters/user';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import MkSwitch from "@/components/form/switch.vue";
|
||||
import MkKeyValue from "@/components/MkKeyValue.vue";
|
||||
import { acct, userPage } from "@/filters/user";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
report: any;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'resolved', reportId: string): void;
|
||||
(ev: "resolved", reportId: string): void;
|
||||
}>();
|
||||
|
||||
let forward = $ref(props.report.forwarded);
|
||||
|
||||
function resolve() {
|
||||
os.apiWithDialog('admin/resolve-abuse-user-report', {
|
||||
os.apiWithDialog("admin/resolve-abuse-user-report", {
|
||||
forward: forward,
|
||||
reportId: props.report.id,
|
||||
}).then(() => {
|
||||
emit('resolved', props.report.id);
|
||||
emit("resolved", props.report.id);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -81,7 +110,16 @@ function resolve() {
|
|||
padding: 14px;
|
||||
border-radius: 8px;
|
||||
--c: rgb(255 196 0 / 15%);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
var(--c) 16.67%,
|
||||
transparent 16.67%,
|
||||
transparent 50%,
|
||||
var(--c) 50%,
|
||||
var(--c) 66.67%,
|
||||
transparent 66.67%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 16px 16px;
|
||||
|
||||
> .avatar {
|
||||
|
|
|
|||
|
|
@ -1,35 +1,52 @@
|
|||
<template>
|
||||
<XWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
|
||||
<template #header>
|
||||
<i class="ph-warning-circle ph-bold ph-lg" style="margin-right: 0.5em;"></i>
|
||||
<I18n :src="i18n.ts.reportAbuseOf" tag="span">
|
||||
<template #name>
|
||||
<b><MkAcct :user="user"/></b>
|
||||
</template>
|
||||
</I18n>
|
||||
</template>
|
||||
<div class="dpvffvvy _monolithic_">
|
||||
<div class="_section">
|
||||
<MkTextarea v-model="comment">
|
||||
<template #label>{{ i18n.ts.details }}</template>
|
||||
<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
|
||||
</MkTextarea>
|
||||
<XWindow
|
||||
ref="uiWindow"
|
||||
:initial-width="400"
|
||||
:initial-height="500"
|
||||
:can-resize="true"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<template #header>
|
||||
<i
|
||||
class="ph-warning-circle ph-bold ph-lg"
|
||||
style="margin-right: 0.5em"
|
||||
></i>
|
||||
<I18n :src="i18n.ts.reportAbuseOf" tag="span">
|
||||
<template #name>
|
||||
<b><MkAcct :user="user" /></b>
|
||||
</template>
|
||||
</I18n>
|
||||
</template>
|
||||
<div class="dpvffvvy _monolithic_">
|
||||
<div class="_section">
|
||||
<MkTextarea v-model="comment">
|
||||
<template #label>{{ i18n.ts.details }}</template>
|
||||
<template #caption>{{
|
||||
i18n.ts.fillAbuseReportDescription
|
||||
}}</template>
|
||||
</MkTextarea>
|
||||
</div>
|
||||
<div class="_section">
|
||||
<MkButton
|
||||
primary
|
||||
full
|
||||
:disabled="comment.length === 0"
|
||||
@click="send"
|
||||
>{{ i18n.ts.send }}</MkButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_section">
|
||||
<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</XWindow>
|
||||
</XWindow>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import * as Misskey from 'calckey-js';
|
||||
import XWindow from '@/components/MkWindow.vue';
|
||||
import MkTextarea from '@/components/form/textarea.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { ref } from "vue";
|
||||
import * as Misskey from "calckey-js";
|
||||
import XWindow from "@/components/MkWindow.vue";
|
||||
import MkTextarea from "@/components/form/textarea.vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
user: Misskey.entities.User;
|
||||
|
|
@ -37,23 +54,27 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
const uiWindow = ref<InstanceType<typeof XWindow>>();
|
||||
const comment = ref(props.initialComment || '');
|
||||
const comment = ref(props.initialComment || "");
|
||||
|
||||
function send() {
|
||||
os.apiWithDialog('users/report-abuse', {
|
||||
userId: props.user.id,
|
||||
comment: comment.value,
|
||||
}, undefined).then(res => {
|
||||
os.apiWithDialog(
|
||||
"users/report-abuse",
|
||||
{
|
||||
userId: props.user.id,
|
||||
comment: comment.value,
|
||||
},
|
||||
undefined
|
||||
).then((res) => {
|
||||
os.alert({
|
||||
type: 'success',
|
||||
text: i18n.ts.abuseReported
|
||||
type: "success",
|
||||
text: i18n.ts.abuseReported,
|
||||
});
|
||||
uiWindow.value?.close();
|
||||
emit('closed');
|
||||
emit("closed");
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,62 @@
|
|||
<template>
|
||||
<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
|
||||
<template v-if="props.graduations === 'dots'">
|
||||
<circle
|
||||
v-for="(angle, i) in graduationsMajor"
|
||||
:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
|
||||
:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
|
||||
:r="0.125"
|
||||
:fill="(props.twentyfour ? h : h % 12) === i ? nowColor : majorGraduationColor"
|
||||
:opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="props.graduations === 'numbers'">
|
||||
<text
|
||||
v-for="(angle, i) in texts"
|
||||
:x="5 + (Math.sin(angle) * (5 - textsPadding))"
|
||||
:y="5 - (Math.cos(angle) * (5 - textsPadding))"
|
||||
text-anchor="middle"
|
||||
dominant-baseline="middle"
|
||||
:font-size="(props.twentyfour ? h : h % 12) === i ? 1 : 0.7"
|
||||
:font-weight="(props.twentyfour ? h : h % 12) === i ? 'bold' : 'normal'"
|
||||
:fill="(props.twentyfour ? h : h % 12) === i ? nowColor : 'currentColor'"
|
||||
:opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
|
||||
>
|
||||
{{ i === 0 ? (props.twentyfour ? '24' : '12') : i }}
|
||||
</text>
|
||||
</template>
|
||||
<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
|
||||
<template v-if="props.graduations === 'dots'">
|
||||
<circle
|
||||
v-for="(angle, i) in graduationsMajor"
|
||||
:cx="5 + Math.sin(angle) * (5 - graduationsPadding)"
|
||||
:cy="5 - Math.cos(angle) * (5 - graduationsPadding)"
|
||||
:r="0.125"
|
||||
:fill="
|
||||
(props.twentyfour ? h : h % 12) === i
|
||||
? nowColor
|
||||
: majorGraduationColor
|
||||
"
|
||||
:opacity="
|
||||
!props.fadeGraduations ||
|
||||
(props.twentyfour ? h : h % 12) === i
|
||||
? 1
|
||||
: Math.max(
|
||||
0,
|
||||
1 -
|
||||
angleDiff(hAngle, angle) / Math.PI -
|
||||
numbersOpacityFactor
|
||||
)
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="props.graduations === 'numbers'">
|
||||
<text
|
||||
v-for="(angle, i) in texts"
|
||||
:x="5 + Math.sin(angle) * (5 - textsPadding)"
|
||||
:y="5 - Math.cos(angle) * (5 - textsPadding)"
|
||||
text-anchor="middle"
|
||||
dominant-baseline="middle"
|
||||
:font-size="(props.twentyfour ? h : h % 12) === i ? 1 : 0.7"
|
||||
:font-weight="
|
||||
(props.twentyfour ? h : h % 12) === i ? 'bold' : 'normal'
|
||||
"
|
||||
:fill="
|
||||
(props.twentyfour ? h : h % 12) === i
|
||||
? nowColor
|
||||
: 'currentColor'
|
||||
"
|
||||
:opacity="
|
||||
!props.fadeGraduations ||
|
||||
(props.twentyfour ? h : h % 12) === i
|
||||
? 1
|
||||
: Math.max(
|
||||
0,
|
||||
1 -
|
||||
angleDiff(hAngle, angle) / Math.PI -
|
||||
numbersOpacityFactor
|
||||
)
|
||||
"
|
||||
>
|
||||
{{ i === 0 ? (props.twentyfour ? "24" : "12") : i }}
|
||||
</text>
|
||||
</template>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
<line
|
||||
:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
|
||||
:y1="5 + (Math.cos(sAngle) * (sHandLengthRatio * handsTailLength))"
|
||||
|
|
@ -38,50 +68,61 @@
|
|||
/>
|
||||
-->
|
||||
|
||||
<line
|
||||
class="s"
|
||||
:class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }"
|
||||
:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
|
||||
:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
|
||||
:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
|
||||
:y2="5 - (1 * ((sHandLengthRatio * 5) - handsPadding))"
|
||||
:stroke="sHandColor"
|
||||
:stroke-width="thickness / 2"
|
||||
:style="`transform: rotateZ(${sAngle}rad)`"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<line
|
||||
class="s"
|
||||
:class="{
|
||||
animate: !disableSAnimate && sAnimation !== 'none',
|
||||
elastic: sAnimation === 'elastic',
|
||||
easeOut: sAnimation === 'easeOut',
|
||||
}"
|
||||
:x1="5 - 0 * (sHandLengthRatio * handsTailLength)"
|
||||
:y1="5 + 1 * (sHandLengthRatio * handsTailLength)"
|
||||
:x2="5 + 0 * (sHandLengthRatio * 5 - handsPadding)"
|
||||
:y2="5 - 1 * (sHandLengthRatio * 5 - handsPadding)"
|
||||
:stroke="sHandColor"
|
||||
:stroke-width="thickness / 2"
|
||||
:style="`transform: rotateZ(${sAngle}rad)`"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
|
||||
<line
|
||||
:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
|
||||
:y1="5 + (Math.cos(mAngle) * (mHandLengthRatio * handsTailLength))"
|
||||
:x2="5 + (Math.sin(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
|
||||
:y2="5 - (Math.cos(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
|
||||
:stroke="mHandColor"
|
||||
:stroke-width="thickness"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<line
|
||||
:x1="5 - Math.sin(mAngle) * (mHandLengthRatio * handsTailLength)"
|
||||
:y1="5 + Math.cos(mAngle) * (mHandLengthRatio * handsTailLength)"
|
||||
:x2="5 + Math.sin(mAngle) * (mHandLengthRatio * 5 - handsPadding)"
|
||||
:y2="5 - Math.cos(mAngle) * (mHandLengthRatio * 5 - handsPadding)"
|
||||
:stroke="mHandColor"
|
||||
:stroke-width="thickness"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
|
||||
<line
|
||||
:x1="5 - (Math.sin(hAngle) * (hHandLengthRatio * handsTailLength))"
|
||||
:y1="5 + (Math.cos(hAngle) * (hHandLengthRatio * handsTailLength))"
|
||||
:x2="5 + (Math.sin(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
|
||||
:y2="5 - (Math.cos(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
|
||||
:stroke="hHandColor"
|
||||
:stroke-width="thickness"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
<line
|
||||
:x1="5 - Math.sin(hAngle) * (hHandLengthRatio * handsTailLength)"
|
||||
:y1="5 + Math.cos(hAngle) * (hHandLengthRatio * handsTailLength)"
|
||||
:x2="5 + Math.sin(hAngle) * (hHandLengthRatio * 5 - handsPadding)"
|
||||
:y2="5 - Math.cos(hAngle) * (hHandLengthRatio * 5 - handsPadding)"
|
||||
:stroke="hHandColor"
|
||||
:stroke-width="thickness"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted, onBeforeUnmount, shallowRef, nextTick } from 'vue';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { globalEvents } from '@/events.js';
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
shallowRef,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import tinycolor from "tinycolor2";
|
||||
import { globalEvents } from "@/events.js";
|
||||
|
||||
// https://stackoverflow.com/questions/1878907/how-can-i-find-the-difference-between-two-angles
|
||||
const angleDiff = (a: number, b: number) => {
|
||||
const x = Math.abs(a - b);
|
||||
return Math.abs((x + Math.PI) % (Math.PI * 2) - Math.PI);
|
||||
return Math.abs(((x + Math.PI) % (Math.PI * 2)) - Math.PI);
|
||||
};
|
||||
|
||||
const graduationsPadding = 0.5;
|
||||
|
|
@ -93,28 +134,31 @@ const mHandLengthRatio = 1;
|
|||
const sHandLengthRatio = 1;
|
||||
const numbersOpacityFactor = 0.35;
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
thickness?: number;
|
||||
offset?: number;
|
||||
twentyfour?: boolean;
|
||||
graduations?: 'none' | 'dots' | 'numbers';
|
||||
fadeGraduations?: boolean;
|
||||
sAnimation?: 'none' | 'elastic' | 'easeOut';
|
||||
}>(), {
|
||||
numbers: false,
|
||||
thickness: 0.1,
|
||||
offset: 0 - new Date().getTimezoneOffset(),
|
||||
twentyfour: false,
|
||||
graduations: 'dots',
|
||||
fadeGraduations: true,
|
||||
sAnimation: 'elastic',
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
thickness?: number;
|
||||
offset?: number;
|
||||
twentyfour?: boolean;
|
||||
graduations?: "none" | "dots" | "numbers";
|
||||
fadeGraduations?: boolean;
|
||||
sAnimation?: "none" | "elastic" | "easeOut";
|
||||
}>(),
|
||||
{
|
||||
numbers: false,
|
||||
thickness: 0.1,
|
||||
offset: 0 - new Date().getTimezoneOffset(),
|
||||
twentyfour: false,
|
||||
graduations: "dots",
|
||||
fadeGraduations: true,
|
||||
sAnimation: "elastic",
|
||||
}
|
||||
);
|
||||
|
||||
const graduationsMajor = computed(() => {
|
||||
const angles: number[] = [];
|
||||
const times = props.twentyfour ? 24 : 12;
|
||||
for (let i = 0; i < times; i++) {
|
||||
const angle = Math.PI * i / (times / 2);
|
||||
const angle = (Math.PI * i) / (times / 2);
|
||||
angles.push(angle);
|
||||
}
|
||||
return angles;
|
||||
|
|
@ -123,7 +167,7 @@ const texts = computed(() => {
|
|||
const angles: number[] = [];
|
||||
const times = props.twentyfour ? 24 : 12;
|
||||
for (let i = 0; i < times; i++) {
|
||||
const angle = Math.PI * i / (times / 2);
|
||||
const angle = (Math.PI * i) / (times / 2);
|
||||
angles.push(angle);
|
||||
}
|
||||
return angles;
|
||||
|
|
@ -147,14 +191,19 @@ let sOneRound = false;
|
|||
|
||||
function tick() {
|
||||
const now = new Date();
|
||||
now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
|
||||
now.setMinutes(
|
||||
now.getMinutes() + (new Date().getTimezoneOffset() + props.offset)
|
||||
);
|
||||
s = now.getSeconds();
|
||||
m = now.getMinutes();
|
||||
h = now.getHours();
|
||||
hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
|
||||
mAngle = Math.PI * (m + s / 60) / 30;
|
||||
if (sOneRound) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
|
||||
sAngle = Math.PI * 60 / 30;
|
||||
hAngle =
|
||||
(Math.PI * ((h % (props.twentyfour ? 24 : 12)) + (m + s / 60) / 60)) /
|
||||
(props.twentyfour ? 12 : 6);
|
||||
mAngle = (Math.PI * (m + s / 60)) / 30;
|
||||
if (sOneRound) {
|
||||
// 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
|
||||
sAngle = (Math.PI * 60) / 30;
|
||||
window.setTimeout(() => {
|
||||
disableSAnimate = true;
|
||||
window.setTimeout(() => {
|
||||
|
|
@ -165,7 +214,7 @@ function tick() {
|
|||
}, 100);
|
||||
}, 700);
|
||||
} else {
|
||||
sAngle = Math.PI * s / 30;
|
||||
sAngle = (Math.PI * s) / 30;
|
||||
}
|
||||
sOneRound = s === 59;
|
||||
}
|
||||
|
|
@ -174,12 +223,18 @@ tick();
|
|||
|
||||
function calcColors() {
|
||||
const computedStyle = getComputedStyle(document.documentElement);
|
||||
const dark = tinycolor(computedStyle.getPropertyValue('--bg')).isDark();
|
||||
const accent = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
|
||||
majorGraduationColor = dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
|
||||
const dark = tinycolor(computedStyle.getPropertyValue("--bg")).isDark();
|
||||
const accent = tinycolor(
|
||||
computedStyle.getPropertyValue("--accent")
|
||||
).toHexString();
|
||||
majorGraduationColor = dark
|
||||
? "rgba(255, 255, 255, 0.3)"
|
||||
: "rgba(0, 0, 0, 0.3)";
|
||||
//minorGraduationColor = dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
|
||||
sHandColor = dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
|
||||
mHandColor = tinycolor(computedStyle.getPropertyValue('--fg')).toHexString();
|
||||
sHandColor = dark ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.3)";
|
||||
mHandColor = tinycolor(
|
||||
computedStyle.getPropertyValue("--fg")
|
||||
).toHexString();
|
||||
hHandColor = accent;
|
||||
nowColor = accent;
|
||||
}
|
||||
|
|
@ -195,13 +250,13 @@ onMounted(() => {
|
|||
};
|
||||
update();
|
||||
|
||||
globalEvents.on('themeChanged', calcColors);
|
||||
globalEvents.on("themeChanged", calcColors);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
enabled = false;
|
||||
|
||||
globalEvents.off('themeChanged', calcColors);
|
||||
globalEvents.off("themeChanged", calcColors);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -214,11 +269,11 @@ onBeforeUnmount(() => {
|
|||
transform-origin: 50% 50%;
|
||||
|
||||
&.animate.elastic {
|
||||
transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
|
||||
transition: transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);
|
||||
}
|
||||
|
||||
&.animate.easeOut {
|
||||
transition: transform .7s cubic-bezier(0,.7,.3,1);
|
||||
transition: transform 0.7s cubic-bezier(0, 0.7, 0.3, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,49 +1,107 @@
|
|||
<template>
|
||||
<div ref="rootEl" class="swhvrteh _popup _shadow" :style="{ zIndex }" @contextmenu.prevent="() => {}">
|
||||
<ol v-if="type === 'user'" ref="suggests" class="users">
|
||||
<li v-for="user in users" tabindex="-1" class="user" @click="complete(type, user)" @keydown="onKeydown">
|
||||
<img class="avatar" :src="user.avatarUrl"/>
|
||||
<span class="name">
|
||||
<MkUserName :key="user.id" :user="user"/>
|
||||
</span>
|
||||
<span class="username">@{{ acct(user) }}</span>
|
||||
</li>
|
||||
<li tabindex="-1" class="choose" @click="chooseUser()" @keydown="onKeydown">{{ i18n.ts.selectUser }}</li>
|
||||
</ol>
|
||||
<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
|
||||
<li v-for="hashtag in hashtags" tabindex="-1" @click="complete(type, hashtag)" @keydown="onKeydown">
|
||||
<span class="name">{{ hashtag }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
|
||||
<li v-for="emoji in emojis" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
|
||||
<span v-if="emoji.isCustomEmoji" class="emoji"><img :src="defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
|
||||
<span v-else-if="!defaultStore.state.useOsNativeEmojis" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
|
||||
<span v-else class="emoji">{{ emoji.emoji }}</span>
|
||||
<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
|
||||
<span v-if="emoji.aliasOf" class="alias">({{ emoji.aliasOf }})</span>
|
||||
</li>
|
||||
</ol>
|
||||
<ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags">
|
||||
<li v-for="tag in mfmTags" tabindex="-1" @click="complete(type, tag)" @keydown="onKeydown">
|
||||
<span class="tag">{{ tag }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div
|
||||
ref="rootEl"
|
||||
class="swhvrteh _popup _shadow"
|
||||
:style="{ zIndex }"
|
||||
@contextmenu.prevent="() => {}"
|
||||
>
|
||||
<ol v-if="type === 'user'" ref="suggests" class="users">
|
||||
<li
|
||||
v-for="user in users"
|
||||
tabindex="-1"
|
||||
class="user"
|
||||
@click="complete(type, user)"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
<img class="avatar" :src="user.avatarUrl" />
|
||||
<span class="name">
|
||||
<MkUserName :key="user.id" :user="user" />
|
||||
</span>
|
||||
<span class="username">@{{ acct(user) }}</span>
|
||||
</li>
|
||||
<li
|
||||
tabindex="-1"
|
||||
class="choose"
|
||||
@click="chooseUser()"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
{{ i18n.ts.selectUser }}
|
||||
</li>
|
||||
</ol>
|
||||
<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
|
||||
<li
|
||||
v-for="hashtag in hashtags"
|
||||
tabindex="-1"
|
||||
@click="complete(type, hashtag)"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
<span class="name">{{ hashtag }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
|
||||
<li
|
||||
v-for="emoji in emojis"
|
||||
tabindex="-1"
|
||||
@click="complete(type, emoji.emoji)"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
<span v-if="emoji.isCustomEmoji" class="emoji"
|
||||
><img
|
||||
:src="
|
||||
defaultStore.state.disableShowingAnimatedImages
|
||||
? getStaticImageUrl(emoji.url)
|
||||
: emoji.url
|
||||
"
|
||||
:alt="emoji.emoji"
|
||||
/></span>
|
||||
<span
|
||||
v-else-if="!defaultStore.state.useOsNativeEmojis"
|
||||
class="emoji"
|
||||
><img :src="emoji.url" :alt="emoji.emoji"
|
||||
/></span>
|
||||
<span v-else class="emoji">{{ emoji.emoji }}</span>
|
||||
<span
|
||||
class="name"
|
||||
v-html="emoji.name.replace(q, `<b>${q}</b>`)"
|
||||
></span>
|
||||
<span v-if="emoji.aliasOf" class="alias"
|
||||
>({{ emoji.aliasOf }})</span
|
||||
>
|
||||
</li>
|
||||
</ol>
|
||||
<ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags">
|
||||
<li
|
||||
v-for="tag in mfmTags"
|
||||
tabindex="-1"
|
||||
@click="complete(type, tag)"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
<span class="tag">{{ tag }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { markRaw, ref, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
|
||||
import contains from '@/scripts/contains';
|
||||
import { char2filePath } from '@/scripts/twemoji-base';
|
||||
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
|
||||
import { acct } from '@/filters/user';
|
||||
import * as os from '@/os';
|
||||
import { MFM_TAGS } from '@/scripts/mfm-tags';
|
||||
import { defaultStore } from '@/store';
|
||||
import { emojilist } from '@/scripts/emojilist';
|
||||
import { instance } from '@/instance';
|
||||
import { i18n } from '@/i18n';
|
||||
import {
|
||||
markRaw,
|
||||
ref,
|
||||
onUpdated,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
nextTick,
|
||||
watch,
|
||||
} from "vue";
|
||||
import contains from "@/scripts/contains";
|
||||
import { char2filePath } from "@/scripts/twemoji-base";
|
||||
import { getStaticImageUrl } from "@/scripts/get-static-image-url";
|
||||
import { acct } from "@/filters/user";
|
||||
import * as os from "@/os";
|
||||
import { MFM_TAGS } from "@/scripts/mfm-tags";
|
||||
import { defaultStore } from "@/store";
|
||||
import { emojilist } from "@/scripts/emojilist";
|
||||
import { instance } from "@/instance";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
type EmojiDef = {
|
||||
emoji: string;
|
||||
|
|
@ -53,9 +111,9 @@ type EmojiDef = {
|
|||
isCustomEmoji?: boolean;
|
||||
};
|
||||
|
||||
const lib = emojilist.filter(x => x.category !== 'flags');
|
||||
const lib = emojilist.filter((x) => x.category !== "flags");
|
||||
|
||||
const emjdb: EmojiDef[] = lib.map(x => ({
|
||||
const emjdb: EmojiDef[] = lib.map((x) => ({
|
||||
emoji: x.char,
|
||||
name: x.name,
|
||||
url: char2filePath(x.char),
|
||||
|
|
@ -85,7 +143,7 @@ for (const x of customEmojis) {
|
|||
name: x.name,
|
||||
emoji: `:${x.name}:`,
|
||||
url: x.url,
|
||||
isCustomEmoji: true
|
||||
isCustomEmoji: true,
|
||||
});
|
||||
|
||||
if (x.aliases) {
|
||||
|
|
@ -95,7 +153,7 @@ for (const x of customEmojis) {
|
|||
aliasOf: x.name,
|
||||
emoji: `:${x.name}:`,
|
||||
url: x.url,
|
||||
isCustomEmoji: true
|
||||
isCustomEmoji: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -125,8 +183,8 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'done', value: { type: string; value: any }): void;
|
||||
(event: 'closed'): void;
|
||||
(event: "done", value: { type: string; value: any }): void;
|
||||
(event: "closed"): void;
|
||||
}>();
|
||||
|
||||
const suggests = ref<Element>();
|
||||
|
|
@ -135,36 +193,37 @@ const rootEl = ref<HTMLDivElement>();
|
|||
const fetching = ref(true);
|
||||
const users = ref<any[]>([]);
|
||||
const hashtags = ref<any[]>([]);
|
||||
const emojis = ref<(EmojiDef)[]>([]);
|
||||
const emojis = ref<EmojiDef[]>([]);
|
||||
const items = ref<Element[] | HTMLCollection>([]);
|
||||
const mfmTags = ref<string[]>([]);
|
||||
const select = ref(-1);
|
||||
const zIndex = os.claimZIndex('high');
|
||||
const zIndex = os.claimZIndex("high");
|
||||
|
||||
function complete(type: string, value: any) {
|
||||
emit('done', { type, value });
|
||||
emit('closed');
|
||||
if (type === 'emoji') {
|
||||
emit("done", { type, value });
|
||||
emit("closed");
|
||||
if (type === "emoji") {
|
||||
let recents = defaultStore.state.recentlyUsedEmojis;
|
||||
recents = recents.filter((emoji: any) => emoji !== value);
|
||||
recents.unshift(value);
|
||||
defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
|
||||
defaultStore.set("recentlyUsedEmojis", recents.splice(0, 32));
|
||||
}
|
||||
}
|
||||
|
||||
function setPosition() {
|
||||
if (!rootEl.value) return;
|
||||
if (props.x + rootEl.value.offsetWidth > window.innerWidth) {
|
||||
rootEl.value.style.left = (window.innerWidth - rootEl.value.offsetWidth) + 'px';
|
||||
rootEl.value.style.left =
|
||||
window.innerWidth - rootEl.value.offsetWidth + "px";
|
||||
} else {
|
||||
rootEl.value.style.left = `${props.x}px`;
|
||||
}
|
||||
if (props.y + rootEl.value.offsetHeight > window.innerHeight) {
|
||||
rootEl.value.style.top = (props.y - rootEl.value.offsetHeight) + 'px';
|
||||
rootEl.value.style.marginTop = '0';
|
||||
rootEl.value.style.top = props.y - rootEl.value.offsetHeight + "px";
|
||||
rootEl.value.style.marginTop = "0";
|
||||
} else {
|
||||
rootEl.value.style.top = props.y + 'px';
|
||||
rootEl.value.style.marginTop = 'calc(1em + 8px)';
|
||||
rootEl.value.style.top = props.y + "px";
|
||||
rootEl.value.style.marginTop = "calc(1em + 8px)";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -172,10 +231,10 @@ function exec() {
|
|||
select.value = -1;
|
||||
if (suggests.value) {
|
||||
for (const el of Array.from(items.value)) {
|
||||
el.removeAttribute('data-selected');
|
||||
el.removeAttribute("data-selected");
|
||||
}
|
||||
}
|
||||
if (props.type === 'user') {
|
||||
if (props.type === "user") {
|
||||
if (!props.q) {
|
||||
users.value = [];
|
||||
fetching.value = false;
|
||||
|
|
@ -189,20 +248,22 @@ function exec() {
|
|||
users.value = JSON.parse(cache);
|
||||
fetching.value = false;
|
||||
} else {
|
||||
os.api('users/search-by-username-and-host', {
|
||||
os.api("users/search-by-username-and-host", {
|
||||
username: props.q,
|
||||
limit: 10,
|
||||
detail: false
|
||||
}).then(searchedUsers => {
|
||||
detail: false,
|
||||
}).then((searchedUsers) => {
|
||||
users.value = searchedUsers as any[];
|
||||
fetching.value = false;
|
||||
// キャッシュ
|
||||
sessionStorage.setItem(cacheKey, JSON.stringify(searchedUsers));
|
||||
});
|
||||
}
|
||||
} else if (props.type === 'hashtag') {
|
||||
if (!props.q || props.q === '') {
|
||||
hashtags.value = JSON.parse(localStorage.getItem('hashtags') || '[]');
|
||||
} else if (props.type === "hashtag") {
|
||||
if (!props.q || props.q === "") {
|
||||
hashtags.value = JSON.parse(
|
||||
localStorage.getItem("hashtags") || "[]"
|
||||
);
|
||||
fetching.value = false;
|
||||
} else {
|
||||
const cacheKey = `autocomplete:hashtag:${props.q}`;
|
||||
|
|
@ -212,59 +273,80 @@ function exec() {
|
|||
hashtags.value = hashtags;
|
||||
fetching.value = false;
|
||||
} else {
|
||||
os.api('hashtags/search', {
|
||||
os.api("hashtags/search", {
|
||||
query: props.q,
|
||||
limit: 30
|
||||
}).then(searchedHashtags => {
|
||||
limit: 30,
|
||||
}).then((searchedHashtags) => {
|
||||
hashtags.value = searchedHashtags as any[];
|
||||
fetching.value = false;
|
||||
// キャッシュ
|
||||
sessionStorage.setItem(cacheKey, JSON.stringify(searchedHashtags));
|
||||
sessionStorage.setItem(
|
||||
cacheKey,
|
||||
JSON.stringify(searchedHashtags)
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
} else if (props.type === 'emoji') {
|
||||
if (!props.q || props.q === '') {
|
||||
} else if (props.type === "emoji") {
|
||||
if (!props.q || props.q === "") {
|
||||
// 最近使った絵文字をサジェスト
|
||||
emojis.value = defaultStore.state.recentlyUsedEmojis.map(emoji => emojiDb.find(dbEmoji => dbEmoji.emoji === emoji)).filter(x => x) as EmojiDef[];
|
||||
emojis.value = defaultStore.state.recentlyUsedEmojis
|
||||
.map((emoji) =>
|
||||
emojiDb.find((dbEmoji) => dbEmoji.emoji === emoji)
|
||||
)
|
||||
.filter((x) => x) as EmojiDef[];
|
||||
return;
|
||||
}
|
||||
|
||||
const matched: EmojiDef[] = [];
|
||||
const max = 30;
|
||||
|
||||
emojiDb.some(x => {
|
||||
if (x.name.startsWith(props.q ?? '') && !x.aliasOf && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
|
||||
emojiDb.some((x) => {
|
||||
if (
|
||||
x.name.startsWith(props.q ?? "") &&
|
||||
!x.aliasOf &&
|
||||
!matched.some((y) => y.emoji === x.emoji)
|
||||
)
|
||||
matched.push(x);
|
||||
return matched.length === max;
|
||||
});
|
||||
|
||||
if (matched.length < max) {
|
||||
emojiDb.some(x => {
|
||||
if (x.name.startsWith(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
|
||||
emojiDb.some((x) => {
|
||||
if (
|
||||
x.name.startsWith(props.q ?? "") &&
|
||||
!matched.some((y) => y.emoji === x.emoji)
|
||||
)
|
||||
matched.push(x);
|
||||
return matched.length === max;
|
||||
});
|
||||
}
|
||||
|
||||
if (matched.length < max) {
|
||||
emojiDb.some(x => {
|
||||
if (x.name.includes(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
|
||||
emojiDb.some((x) => {
|
||||
if (
|
||||
x.name.includes(props.q ?? "") &&
|
||||
!matched.some((y) => y.emoji === x.emoji)
|
||||
)
|
||||
matched.push(x);
|
||||
return matched.length === max;
|
||||
});
|
||||
}
|
||||
|
||||
emojis.value = matched;
|
||||
} else if (props.type === 'mfmTag') {
|
||||
if (!props.q || props.q === '') {
|
||||
} else if (props.type === "mfmTag") {
|
||||
if (!props.q || props.q === "") {
|
||||
mfmTags.value = MFM_TAGS;
|
||||
return;
|
||||
}
|
||||
|
||||
mfmTags.value = MFM_TAGS.filter(tag => tag.startsWith(props.q ?? ''));
|
||||
mfmTags.value = MFM_TAGS.filter((tag) => tag.startsWith(props.q ?? ""));
|
||||
}
|
||||
}
|
||||
|
||||
function onMousedown(event: Event) {
|
||||
if (!contains(rootEl.value, event.target) && (rootEl.value !== event.target)) props.close();
|
||||
if (!contains(rootEl.value, event.target) && rootEl.value !== event.target)
|
||||
props.close();
|
||||
}
|
||||
|
||||
function onKeydown(event: KeyboardEvent) {
|
||||
|
|
@ -274,7 +356,7 @@ function onKeydown(event: KeyboardEvent) {
|
|||
};
|
||||
|
||||
switch (event.key) {
|
||||
case 'Enter':
|
||||
case "Enter":
|
||||
if (select.value !== -1) {
|
||||
cancel();
|
||||
(items.value[select.value] as any).click();
|
||||
|
|
@ -283,12 +365,12 @@ function onKeydown(event: KeyboardEvent) {
|
|||
}
|
||||
break;
|
||||
|
||||
case 'Escape':
|
||||
case "Escape":
|
||||
cancel();
|
||||
props.close();
|
||||
break;
|
||||
|
||||
case 'ArrowUp':
|
||||
case "ArrowUp":
|
||||
if (select.value !== -1) {
|
||||
cancel();
|
||||
selectPrev();
|
||||
|
|
@ -297,8 +379,8 @@ function onKeydown(event: KeyboardEvent) {
|
|||
}
|
||||
break;
|
||||
|
||||
case 'Tab':
|
||||
case 'ArrowDown':
|
||||
case "Tab":
|
||||
case "ArrowDown":
|
||||
cancel();
|
||||
selectNext();
|
||||
break;
|
||||
|
|
@ -322,19 +404,19 @@ function selectPrev() {
|
|||
|
||||
function applySelect() {
|
||||
for (const el of Array.from(items.value)) {
|
||||
el.removeAttribute('data-selected');
|
||||
el.removeAttribute("data-selected");
|
||||
}
|
||||
|
||||
if (select.value !== -1) {
|
||||
items.value[select.value].setAttribute('data-selected', 'true');
|
||||
items.value[select.value].setAttribute("data-selected", "true");
|
||||
(items.value[select.value] as any).focus();
|
||||
}
|
||||
}
|
||||
|
||||
function chooseUser() {
|
||||
props.close();
|
||||
os.selectUser().then(user => {
|
||||
complete('user', user);
|
||||
os.selectUser().then((user) => {
|
||||
complete("user", user);
|
||||
props.textarea.focus();
|
||||
});
|
||||
}
|
||||
|
|
@ -347,28 +429,31 @@ onUpdated(() => {
|
|||
onMounted(() => {
|
||||
setPosition();
|
||||
|
||||
props.textarea.addEventListener('keydown', onKeydown);
|
||||
props.textarea.addEventListener("keydown", onKeydown);
|
||||
|
||||
for (const el of Array.from(document.querySelectorAll('body *'))) {
|
||||
el.addEventListener('mousedown', onMousedown);
|
||||
for (const el of Array.from(document.querySelectorAll("body *"))) {
|
||||
el.addEventListener("mousedown", onMousedown);
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
exec();
|
||||
|
||||
watch(() => props.q, () => {
|
||||
nextTick(() => {
|
||||
exec();
|
||||
});
|
||||
});
|
||||
watch(
|
||||
() => props.q,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
exec();
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
props.textarea.removeEventListener('keydown', onKeydown);
|
||||
props.textarea.removeEventListener("keydown", onKeydown);
|
||||
|
||||
for (const el of Array.from(document.querySelectorAll('body *'))) {
|
||||
el.removeEventListener('mousedown', onMousedown);
|
||||
for (const el of Array.from(document.querySelectorAll("body *"))) {
|
||||
el.removeEventListener("mousedown", onMousedown);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -399,7 +484,8 @@ onBeforeUnmount(() => {
|
|||
font-size: 0.9em;
|
||||
cursor: default;
|
||||
|
||||
&, * {
|
||||
&,
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -412,10 +498,11 @@ onBeforeUnmount(() => {
|
|||
background: var(--X3);
|
||||
}
|
||||
|
||||
&[data-selected='true'] {
|
||||
&[data-selected="true"] {
|
||||
background: var(--accent);
|
||||
|
||||
&, * {
|
||||
&,
|
||||
* {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -423,7 +510,8 @@ onBeforeUnmount(() => {
|
|||
&:active {
|
||||
background: var(--accentDarken);
|
||||
|
||||
&, * {
|
||||
&,
|
||||
* {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -431,7 +519,6 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
|
||||
> .users > li {
|
||||
|
||||
.avatar {
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
|
|
@ -447,7 +534,6 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
|
||||
> .emojis > li {
|
||||
|
||||
.emoji {
|
||||
display: inline-block;
|
||||
margin: 0 4px 0 0;
|
||||
|
|
@ -465,7 +551,6 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
|
||||
> .mfmTags > li {
|
||||
|
||||
.name {
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div class="defgtij">
|
||||
<div v-for="user in users" :key="user.id" class="avatar-holder">
|
||||
<MkAvatar :user="user" :show-indicator="true" class="avatar"/>
|
||||
<div class="defgtij">
|
||||
<div v-for="user in users" :key="user.id" class="avatar-holder">
|
||||
<MkAvatar :user="user" :show-indicator="true" class="avatar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import * as os from '@/os';
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as os from "@/os";
|
||||
|
||||
const props = defineProps<{
|
||||
userIds: string[];
|
||||
|
|
@ -17,8 +17,8 @@ const props = defineProps<{
|
|||
const users = ref([]);
|
||||
|
||||
onMounted(async () => {
|
||||
users.value = await os.api('users/show', {
|
||||
userIds: props.userIds
|
||||
users.value = await os.api("users/show", {
|
||||
userIds: props.userIds,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,36 @@
|
|||
<template>
|
||||
<button
|
||||
v-if="!link" class="bghgjjyj _button"
|
||||
:class="{ inline, primary, gradate, danger, rounded, full }"
|
||||
:type="type"
|
||||
@click="emit('click', $event)"
|
||||
@mousedown="onMousedown"
|
||||
>
|
||||
<div ref="ripples" class="ripples"></div>
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</button>
|
||||
<MkA
|
||||
v-else class="bghgjjyj _button"
|
||||
:class="{ inline, primary, gradate, danger, rounded, full }"
|
||||
:to="to"
|
||||
@mousedown="onMousedown"
|
||||
>
|
||||
<div ref="ripples" class="ripples"></div>
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</MkA>
|
||||
<button
|
||||
v-if="!link"
|
||||
class="bghgjjyj _button"
|
||||
:class="{ inline, primary, gradate, danger, rounded, full }"
|
||||
:type="type"
|
||||
@click="emit('click', $event)"
|
||||
@mousedown="onMousedown"
|
||||
>
|
||||
<div ref="ripples" class="ripples"></div>
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</button>
|
||||
<MkA
|
||||
v-else
|
||||
class="bghgjjyj _button"
|
||||
:class="{ inline, primary, gradate, danger, rounded, full }"
|
||||
:to="to"
|
||||
@mousedown="onMousedown"
|
||||
>
|
||||
<div ref="ripples" class="ripples"></div>
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</MkA>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted } from 'vue';
|
||||
import { nextTick, onMounted } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
type?: "button" | "submit" | "reset";
|
||||
primary?: boolean;
|
||||
gradate?: boolean;
|
||||
rounded?: boolean;
|
||||
|
|
@ -42,7 +44,7 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'click', payload: MouseEvent): void;
|
||||
(ev: "click", payload: MouseEvent): void;
|
||||
}>();
|
||||
|
||||
let el = $ref<HTMLElement | null>(null);
|
||||
|
|
@ -73,23 +75,28 @@ function onMousedown(evt: MouseEvent): void {
|
|||
const target = evt.target! as HTMLElement;
|
||||
const rect = target.getBoundingClientRect();
|
||||
|
||||
const ripple = document.createElement('div');
|
||||
ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
|
||||
ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
|
||||
const ripple = document.createElement("div");
|
||||
ripple.style.top = (evt.clientY - rect.top - 1).toString() + "px";
|
||||
ripple.style.left = (evt.clientX - rect.left - 1).toString() + "px";
|
||||
|
||||
ripples!.appendChild(ripple);
|
||||
|
||||
const circleCenterX = evt.clientX - rect.left;
|
||||
const circleCenterY = evt.clientY - rect.top;
|
||||
|
||||
const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
|
||||
const scale = calcCircleScale(
|
||||
target.clientWidth,
|
||||
target.clientHeight,
|
||||
circleCenterX,
|
||||
circleCenterY
|
||||
);
|
||||
|
||||
window.setTimeout(() => {
|
||||
ripple.style.transform = 'scale(' + (scale / 2) + ')';
|
||||
ripple.style.transform = "scale(" + scale / 2 + ")";
|
||||
}, 1);
|
||||
window.setTimeout(() => {
|
||||
ripple.style.transition = 'all 1s ease';
|
||||
ripple.style.opacity = '0';
|
||||
ripple.style.transition = "all 1s ease";
|
||||
ripple.style.opacity = "0";
|
||||
}, 1000);
|
||||
window.setTimeout(() => {
|
||||
if (ripples) ripples.removeChild(ripple);
|
||||
|
|
@ -151,7 +158,11 @@ function onMousedown(evt: MouseEvent): void {
|
|||
&.gradate {
|
||||
font-weight: bold;
|
||||
color: var(--fgOnAccent) !important;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--buttonGradateA),
|
||||
var(--buttonGradateB)
|
||||
);
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
||||
|
|
@ -212,7 +223,7 @@ function onMousedown(evt: MouseEvent): void {
|
|||
background: rgba(0, 0, 0, 0.1);
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition: all 0.5s cubic-bezier(0,.5,0,1);
|
||||
transition: all 0.5s cubic-bezier(0, 0.5, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,46 @@
|
|||
<template>
|
||||
<div>
|
||||
<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis/></span>
|
||||
<div ref="captchaEl"></div>
|
||||
</div>
|
||||
<div>
|
||||
<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis /></span>
|
||||
<div ref="captchaEl"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
|
||||
import { defaultStore } from '@/store';
|
||||
import { i18n } from '@/i18n';
|
||||
import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
|
||||
import { defaultStore } from "@/store";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
type Captcha = {
|
||||
render(container: string | Node, options: {
|
||||
readonly [_ in 'sitekey' | 'theme' | 'type' | 'size' | 'tabindex' | 'callback' | 'expired' | 'expired-callback' | 'error-callback' | 'endpoint']?: unknown;
|
||||
}): string;
|
||||
render(
|
||||
container: string | Node,
|
||||
options: {
|
||||
readonly [_ in
|
||||
| "sitekey"
|
||||
| "theme"
|
||||
| "type"
|
||||
| "size"
|
||||
| "tabindex"
|
||||
| "callback"
|
||||
| "expired"
|
||||
| "expired-callback"
|
||||
| "error-callback"
|
||||
| "endpoint"]?: unknown;
|
||||
}
|
||||
): string;
|
||||
remove(id: string): void;
|
||||
execute(id: string): void;
|
||||
reset(id?: string): void;
|
||||
getResponse(id: string): string;
|
||||
};
|
||||
|
||||
type CaptchaProvider = 'hcaptcha' | 'recaptcha';
|
||||
type CaptchaProvider = "hcaptcha" | "recaptcha";
|
||||
|
||||
type CaptchaContainer = {
|
||||
readonly [_ in CaptchaProvider]?: Captcha;
|
||||
};
|
||||
|
||||
declare global {
|
||||
interface Window extends CaptchaContainer { }
|
||||
interface Window extends CaptchaContainer {}
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
@ -37,7 +50,7 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'update:modelValue', v: string | null): void;
|
||||
(ev: "update:modelValue", v: string | null): void;
|
||||
}>();
|
||||
|
||||
const available = ref(false);
|
||||
|
|
@ -46,8 +59,10 @@ const captchaEl = ref<HTMLDivElement | undefined>();
|
|||
|
||||
const variable = computed(() => {
|
||||
switch (props.provider) {
|
||||
case 'hcaptcha': return 'hcaptcha';
|
||||
case 'recaptcha': return 'grecaptcha';
|
||||
case "hcaptcha":
|
||||
return "hcaptcha";
|
||||
case "recaptcha":
|
||||
return "grecaptcha";
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -55,22 +70,30 @@ const loaded = !!window[variable.value];
|
|||
|
||||
const src = computed(() => {
|
||||
switch (props.provider) {
|
||||
case 'hcaptcha': return 'https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off';
|
||||
case 'recaptcha': return 'https://www.recaptcha.net/recaptcha/api.js?render=explicit';
|
||||
case "hcaptcha":
|
||||
return "https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off";
|
||||
case "recaptcha":
|
||||
return "https://www.recaptcha.net/recaptcha/api.js?render=explicit";
|
||||
}
|
||||
});
|
||||
|
||||
const captcha = computed<Captcha>(() => window[variable.value] || {} as unknown as Captcha);
|
||||
const captcha = computed<Captcha>(
|
||||
() => window[variable.value] || ({} as unknown as Captcha)
|
||||
);
|
||||
|
||||
if (loaded) {
|
||||
available.value = true;
|
||||
} else {
|
||||
(document.getElementById(props.provider) || document.head.appendChild(Object.assign(document.createElement('script'), {
|
||||
async: true,
|
||||
id: props.provider,
|
||||
src: src.value,
|
||||
})))
|
||||
.addEventListener('load', () => available.value = true);
|
||||
(
|
||||
document.getElementById(props.provider) ||
|
||||
document.head.appendChild(
|
||||
Object.assign(document.createElement("script"), {
|
||||
async: true,
|
||||
id: props.provider,
|
||||
src: src.value,
|
||||
})
|
||||
)
|
||||
).addEventListener("load", () => (available.value = true));
|
||||
}
|
||||
|
||||
function reset() {
|
||||
|
|
@ -81,10 +104,10 @@ function requestRender() {
|
|||
if (captcha.value.render && captchaEl.value instanceof Element) {
|
||||
captcha.value.render(captchaEl.value, {
|
||||
sitekey: props.sitekey,
|
||||
theme: defaultStore.state.darkMode ? 'dark' : 'light',
|
||||
theme: defaultStore.state.darkMode ? "dark" : "light",
|
||||
callback: callback,
|
||||
'expired-callback': callback,
|
||||
'error-callback': callback,
|
||||
"expired-callback": callback,
|
||||
"error-callback": callback,
|
||||
});
|
||||
} else {
|
||||
window.setTimeout(requestRender, 1);
|
||||
|
|
@ -92,7 +115,7 @@ function requestRender() {
|
|||
}
|
||||
|
||||
function callback(response?: string) {
|
||||
emit('update:modelValue', typeof response === 'string' ? response : null);
|
||||
emit("update:modelValue", typeof response === "string" ? response : null);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -110,5 +133,4 @@ onBeforeUnmount(() => {
|
|||
defineExpose({
|
||||
reset,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,41 @@
|
|||
<template>
|
||||
<button class="hdcaacmi _button"
|
||||
:class="{ wait, active: isFollowing, full }"
|
||||
:disabled="wait"
|
||||
@click="onClick"
|
||||
>
|
||||
<template v-if="!wait">
|
||||
<template v-if="isFollowing">
|
||||
<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ph-minus ph-bold ph-lg"></i>
|
||||
<button
|
||||
class="hdcaacmi _button"
|
||||
:class="{ wait, active: isFollowing, full }"
|
||||
:disabled="wait"
|
||||
@click="onClick"
|
||||
>
|
||||
<template v-if="!wait">
|
||||
<template v-if="isFollowing">
|
||||
<span v-if="full">{{ i18n.ts.unfollow }}</span
|
||||
><i class="ph-minus ph-bold ph-lg"></i>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="full">{{ i18n.ts.follow }}</span
|
||||
><i class="ph-plus ph-bold ph-lg"></i>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="full">{{ i18n.ts.follow }}</span><i class="ph-plus ph-bold ph-lg"></i>
|
||||
<span v-if="full">{{ i18n.ts.processing }}</span
|
||||
><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="full">{{ i18n.ts.processing }}</span><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
|
||||
</template>
|
||||
</button>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { ref } from "vue";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
channel: Record<string, any>;
|
||||
full?: boolean;
|
||||
}>(), {
|
||||
full: false,
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
channel: Record<string, any>;
|
||||
full?: boolean;
|
||||
}>(),
|
||||
{
|
||||
full: false,
|
||||
}
|
||||
);
|
||||
|
||||
const isFollowing = ref<boolean>(props.channel.isFollowing);
|
||||
const wait = ref(false);
|
||||
|
|
@ -38,13 +45,13 @@ async function onClick() {
|
|||
|
||||
try {
|
||||
if (isFollowing.value) {
|
||||
await os.api('channels/unfollow', {
|
||||
channelId: props.channel.id
|
||||
await os.api("channels/unfollow", {
|
||||
channelId: props.channel.id,
|
||||
});
|
||||
isFollowing.value = false;
|
||||
} else {
|
||||
await os.api('channels/follow', {
|
||||
channelId: props.channel.id
|
||||
await os.api("channels/follow", {
|
||||
channelId: props.channel.id,
|
||||
});
|
||||
isFollowing.value = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,57 @@
|
|||
<template>
|
||||
<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
|
||||
<div class="banner" :style="bannerStyle">
|
||||
<div class="fade"></div>
|
||||
<div class="name"><i class="ph-television ph-bold ph-lg"></i> {{ channel.name }}</div>
|
||||
<div class="status">
|
||||
<div>
|
||||
<i class="ph-users ph-bold ph-lg ph-fw ph-lg"></i>
|
||||
<I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;">
|
||||
<template #n>
|
||||
<b>{{ channel.usersCount }}</b>
|
||||
</template>
|
||||
</I18n>
|
||||
<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
|
||||
<div class="banner" :style="bannerStyle">
|
||||
<div class="fade"></div>
|
||||
<div class="name">
|
||||
<i class="ph-television ph-bold ph-lg"></i> {{ channel.name }}
|
||||
</div>
|
||||
<div>
|
||||
<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i>
|
||||
<I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;">
|
||||
<template #n>
|
||||
<b>{{ channel.notesCount }}</b>
|
||||
</template>
|
||||
</I18n>
|
||||
<div class="status">
|
||||
<div>
|
||||
<i class="ph-users ph-bold ph-lg ph-fw ph-lg"></i>
|
||||
<I18n
|
||||
:src="i18n.ts._channel.usersCount"
|
||||
tag="span"
|
||||
style="margin-left: 4px"
|
||||
>
|
||||
<template #n>
|
||||
<b>{{ channel.usersCount }}</b>
|
||||
</template>
|
||||
</I18n>
|
||||
</div>
|
||||
<div>
|
||||
<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i>
|
||||
<I18n
|
||||
:src="i18n.ts._channel.notesCount"
|
||||
tag="span"
|
||||
style="margin-left: 4px"
|
||||
>
|
||||
<template #n>
|
||||
<b>{{ channel.notesCount }}</b>
|
||||
</template>
|
||||
</I18n>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<article v-if="channel.description">
|
||||
<p :title="channel.description">{{ channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description }}</p>
|
||||
</article>
|
||||
<footer>
|
||||
<span v-if="channel.lastNotedAt">
|
||||
{{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt"/>
|
||||
</span>
|
||||
</footer>
|
||||
</MkA>
|
||||
<article v-if="channel.description">
|
||||
<p :title="channel.description">
|
||||
{{
|
||||
channel.description.length > 85
|
||||
? channel.description.slice(0, 85) + "…"
|
||||
: channel.description
|
||||
}}
|
||||
</p>
|
||||
</article>
|
||||
<footer>
|
||||
<span v-if="channel.lastNotedAt">
|
||||
{{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt" />
|
||||
</span>
|
||||
</footer>
|
||||
</MkA>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import { computed } from "vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
channel: Record<string, any>;
|
||||
|
|
@ -45,7 +61,7 @@ const bannerStyle = computed(() => {
|
|||
if (props.channel.bannerUrl) {
|
||||
return { backgroundImage: `url(${props.channel.bannerUrl})` };
|
||||
} else {
|
||||
return { backgroundColor: '#4c5e6d' };
|
||||
return { backgroundColor: "#4c5e6d" };
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -155,5 +171,4 @@ const bannerStyle = computed(() => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,20 +1,35 @@
|
|||
<template>
|
||||
<MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :max-width="340" :direction="'top'" :inner-margin="16" @closed="emit('closed')">
|
||||
<div v-if="title || series" class="qpcyisrl">
|
||||
<div v-if="title" class="title">{{ title }}</div>
|
||||
<template v-if="series">
|
||||
<div v-for="x in series" class="series">
|
||||
<span class="color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
|
||||
<span>{{ x.text }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</MkTooltip>
|
||||
<MkTooltip
|
||||
ref="tooltip"
|
||||
:showing="showing"
|
||||
:x="x"
|
||||
:y="y"
|
||||
:max-width="340"
|
||||
:direction="'top'"
|
||||
:inner-margin="16"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<div v-if="title || series" class="qpcyisrl">
|
||||
<div v-if="title" class="title">{{ title }}</div>
|
||||
<template v-if="series">
|
||||
<div v-for="x in series" class="series">
|
||||
<span
|
||||
class="color"
|
||||
:style="{
|
||||
background: x.backgroundColor,
|
||||
borderColor: x.borderColor,
|
||||
}"
|
||||
></span>
|
||||
<span>{{ x.text }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</MkTooltip>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import MkTooltip from './MkTooltip.vue';
|
||||
import {} from "vue";
|
||||
import MkTooltip from "./MkTooltip.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
showing: boolean;
|
||||
|
|
@ -29,7 +44,7 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,56 +1,72 @@
|
|||
<template>
|
||||
<MkA
|
||||
class="rivslvers"
|
||||
tabindex="-1"
|
||||
:class="{
|
||||
isMe: isMe(message),
|
||||
isRead: message.groupId ? message.reads.includes($i?.id) : message.isRead,
|
||||
}"
|
||||
:to="
|
||||
message.groupId
|
||||
? `/my/messaging/group/${message.groupId}`
|
||||
: `/my/messaging/${getAcct(
|
||||
isMe(message) ? message.recipient : message.user
|
||||
)}`
|
||||
"
|
||||
>
|
||||
<div class="message _block">
|
||||
<MkAvatar
|
||||
class="avatar"
|
||||
:user="
|
||||
message.groupId
|
||||
? message.user
|
||||
: isMe(message)
|
||||
<MkA
|
||||
class="rivslvers"
|
||||
tabindex="-1"
|
||||
:class="{
|
||||
isMe: isMe(message),
|
||||
isRead: message.groupId
|
||||
? message.reads.includes($i?.id)
|
||||
: message.isRead,
|
||||
}"
|
||||
:to="
|
||||
message.groupId
|
||||
? `/my/messaging/group/${message.groupId}`
|
||||
: `/my/messaging/${getAcct(
|
||||
isMe(message) ? message.recipient : message.user
|
||||
)}`
|
||||
"
|
||||
>
|
||||
<div class="message _block">
|
||||
<MkAvatar
|
||||
class="avatar"
|
||||
:user="
|
||||
message.groupId
|
||||
? message.user
|
||||
: isMe(message)
|
||||
? message.recipient
|
||||
: message.user
|
||||
"
|
||||
:show-indicator="true"
|
||||
/>
|
||||
<header v-if="message.groupId">
|
||||
<span class="name">{{ message.group.name }}</span>
|
||||
<MkTime :time="message.createdAt" class="time"/>
|
||||
</header>
|
||||
<header v-else>
|
||||
<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
|
||||
<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
|
||||
<MkTime :time="message.createdAt" class="time"/>
|
||||
</header>
|
||||
<div class="body">
|
||||
<p class="text">
|
||||
<span v-if="isMe(message)" class="me">{{ i18n.ts.you }}: </span>
|
||||
<Mfm v-if="message.text != null && message.text.length > 0" :text="message.text"/>
|
||||
<span v-else> 📎</span>
|
||||
</p>
|
||||
"
|
||||
:show-indicator="true"
|
||||
/>
|
||||
<header v-if="message.groupId">
|
||||
<span class="name">{{ message.group.name }}</span>
|
||||
<MkTime :time="message.createdAt" class="time" />
|
||||
</header>
|
||||
<header v-else>
|
||||
<span class="name"
|
||||
><MkUserName
|
||||
:user="
|
||||
isMe(message) ? message.recipient : message.user
|
||||
"
|
||||
/></span>
|
||||
<span class="username"
|
||||
>@{{
|
||||
acct(isMe(message) ? message.recipient : message.user)
|
||||
}}</span
|
||||
>
|
||||
<MkTime :time="message.createdAt" class="time" />
|
||||
</header>
|
||||
<div class="body">
|
||||
<p class="text">
|
||||
<span v-if="isMe(message)" class="me"
|
||||
>{{ i18n.ts.you }}:
|
||||
</span>
|
||||
<Mfm
|
||||
v-if="message.text != null && message.text.length > 0"
|
||||
:text="message.text"
|
||||
/>
|
||||
<span v-else> 📎</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MkA>
|
||||
</MkA>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as Acct from 'calckey-js/built/acct';
|
||||
import { i18n } from '@/i18n';
|
||||
import { acct } from '@/filters/user';
|
||||
import { $i } from '@/account';
|
||||
import * as Acct from "calckey-js/built/acct";
|
||||
import { i18n } from "@/i18n";
|
||||
import { acct } from "@/filters/user";
|
||||
import { $i } from "@/account";
|
||||
|
||||
const getAcct = Acct.toString;
|
||||
|
||||
|
|
@ -138,7 +154,6 @@ function isMe(message): boolean {
|
|||
}
|
||||
|
||||
> .body {
|
||||
|
||||
> .text {
|
||||
display: block;
|
||||
margin: 0 0 0 0;
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
<template>
|
||||
<XModalWindow
|
||||
ref="dialog"
|
||||
:width="600"
|
||||
@close="dialog?.close()"
|
||||
@closed="$emit('closed')"
|
||||
>
|
||||
<template #header>{{ i18n.ts._mfm.cheatSheet }}</template>
|
||||
<XModalWindow
|
||||
ref="dialog"
|
||||
:width="600"
|
||||
@close="dialog?.close()"
|
||||
@closed="$emit('closed')"
|
||||
>
|
||||
<template #header>{{ i18n.ts._mfm.cheatSheet }}</template>
|
||||
|
||||
<div class="_monolithic_">
|
||||
<div class="_section">
|
||||
<XCheatSheet/>
|
||||
<div class="_monolithic_">
|
||||
<div class="_section">
|
||||
<XCheatSheet />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</XModalWindow>
|
||||
</XModalWindow>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import XModalWindow from '@/components/MkModalWindow.vue';
|
||||
import XCheatSheet from '@/pages/mfm-cheat-sheet.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import XModalWindow from "@/components/MkModalWindow.vue";
|
||||
import XCheatSheet from "@/pages/mfm-cheat-sheet.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'done'): void;
|
||||
(ev: 'closed'): void;
|
||||
(ev: "done"): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
const dialog = $ref<InstanceType<typeof XModalWindow>>();
|
||||
|
|
@ -41,6 +41,4 @@ function close(res) {
|
|||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
<template>
|
||||
<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
|
||||
<pre v-else :class="`language-${prismLang}`"><code :class="`language-${prismLang}`" v-html="html"></code></pre>
|
||||
<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
|
||||
<pre
|
||||
v-else
|
||||
:class="`language-${prismLang}`"
|
||||
><code :class="`language-${prismLang}`" v-html="html"></code></pre>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import Prism from 'prismjs';
|
||||
import 'prismjs/themes/prism-okaidia.css';
|
||||
import { computed } from "vue";
|
||||
import Prism from "prismjs";
|
||||
import "prismjs/themes/prism-okaidia.css";
|
||||
|
||||
const props = defineProps<{
|
||||
code: string;
|
||||
|
|
@ -14,6 +17,14 @@ const props = defineProps<{
|
|||
inline?: boolean;
|
||||
}>();
|
||||
|
||||
const prismLang = computed(() => Prism.languages[props.lang] ? props.lang : 'js');
|
||||
const html = computed(() => Prism.highlight(props.code, Prism.languages[prismLang.value], prismLang.value));
|
||||
const prismLang = computed(() =>
|
||||
Prism.languages[props.lang] ? props.lang : "js"
|
||||
);
|
||||
const html = computed(() =>
|
||||
Prism.highlight(
|
||||
props.code,
|
||||
Prism.languages[prismLang.value],
|
||||
prismLang.value
|
||||
)
|
||||
);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<XCode :code="code" :lang="lang" :inline="inline"/>
|
||||
<XCode :code="code" :lang="lang" :inline="inline" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
import { defineAsyncComponent } from "vue";
|
||||
|
||||
defineProps<{
|
||||
code: string;
|
||||
|
|
@ -11,5 +11,7 @@ defineProps<{
|
|||
inline?: boolean;
|
||||
}>();
|
||||
|
||||
const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'));
|
||||
const XCode = defineAsyncComponent(
|
||||
() => import("@/components/MkCode.core.vue")
|
||||
);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,67 @@
|
|||
<template>
|
||||
<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
|
||||
<header v-if="showHeader" ref="header">
|
||||
<div class="title"><slot name="header"></slot></div>
|
||||
<div class="sub">
|
||||
<slot name="func"></slot>
|
||||
<button v-if="foldable" class="_button" @click="() => showBody = !showBody">
|
||||
<template v-if="showBody"><i class="ph-caret-up ph-bold ph-lg"></i></template>
|
||||
<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<transition
|
||||
:name="$store.state.animation ? 'container-toggle' : ''"
|
||||
@enter="enter"
|
||||
@after-enter="afterEnter"
|
||||
@leave="leave"
|
||||
@after-leave="afterLeave"
|
||||
<div
|
||||
v-size="{ max: [380] }"
|
||||
class="ukygtjoj _panel"
|
||||
:class="{
|
||||
naked,
|
||||
thin,
|
||||
hideHeader: !showHeader,
|
||||
scrollable,
|
||||
closed: !showBody,
|
||||
}"
|
||||
>
|
||||
<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
|
||||
<slot></slot>
|
||||
<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
|
||||
<span>{{ i18n.ts.showMore }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<header v-if="showHeader" ref="header">
|
||||
<div class="title"><slot name="header"></slot></div>
|
||||
<div class="sub">
|
||||
<slot name="func"></slot>
|
||||
<button
|
||||
v-if="foldable"
|
||||
class="_button"
|
||||
@click="() => (showBody = !showBody)"
|
||||
>
|
||||
<template v-if="showBody"
|
||||
><i class="ph-caret-up ph-bold ph-lg"></i
|
||||
></template>
|
||||
<template v-else
|
||||
><i class="ph-caret-down ph-bold ph-lg"></i
|
||||
></template>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<transition
|
||||
:name="$store.state.animation ? 'container-toggle' : ''"
|
||||
@enter="enter"
|
||||
@after-enter="afterEnter"
|
||||
@leave="leave"
|
||||
@after-leave="afterLeave"
|
||||
>
|
||||
<div
|
||||
v-show="showBody"
|
||||
ref="content"
|
||||
class="content"
|
||||
:class="{ omitted }"
|
||||
>
|
||||
<slot></slot>
|
||||
<button
|
||||
v-if="omitted"
|
||||
class="fade _button"
|
||||
@click="
|
||||
() => {
|
||||
ignoreOmit = true;
|
||||
omitted = false;
|
||||
}
|
||||
"
|
||||
>
|
||||
<span>{{ i18n.ts.showMore }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import { defineComponent } from "vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
|
|
@ -78,22 +110,29 @@ export default defineComponent({
|
|||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$watch('showBody', showBody => {
|
||||
const headerHeight = this.showHeader ? this.$refs.header.offsetHeight : 0;
|
||||
this.$el.style.minHeight = `${headerHeight}px`;
|
||||
if (showBody) {
|
||||
this.$el.style.flexBasis = 'auto';
|
||||
} else {
|
||||
this.$el.style.flexBasis = `${headerHeight}px`;
|
||||
this.$watch(
|
||||
"showBody",
|
||||
(showBody) => {
|
||||
const headerHeight = this.showHeader
|
||||
? this.$refs.header.offsetHeight
|
||||
: 0;
|
||||
this.$el.style.minHeight = `${headerHeight}px`;
|
||||
if (showBody) {
|
||||
this.$el.style.flexBasis = "auto";
|
||||
} else {
|
||||
this.$el.style.flexBasis = `${headerHeight}px`;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
}, {
|
||||
immediate: true,
|
||||
});
|
||||
);
|
||||
|
||||
this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
|
||||
this.$el.style.setProperty("--maxHeight", this.maxHeight + "px");
|
||||
|
||||
const calcOmit = () => {
|
||||
if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
|
||||
if (this.omitted || this.ignoreOmit || this.maxHeight == null)
|
||||
return;
|
||||
const height = this.$refs.content.offsetHeight;
|
||||
this.omitted = height > this.maxHeight;
|
||||
};
|
||||
|
|
@ -113,14 +152,14 @@ export default defineComponent({
|
|||
const elementHeight = el.getBoundingClientRect().height;
|
||||
el.style.height = 0;
|
||||
el.offsetHeight; // reflow
|
||||
el.style.height = elementHeight + 'px';
|
||||
el.style.height = elementHeight + "px";
|
||||
},
|
||||
afterEnter(el) {
|
||||
el.style.height = null;
|
||||
},
|
||||
leave(el) {
|
||||
const elementHeight = el.getBoundingClientRect().height;
|
||||
el.style.height = elementHeight + 'px';
|
||||
el.style.height = elementHeight + "px";
|
||||
el.offsetHeight; // reflow
|
||||
el.style.height = 0;
|
||||
},
|
||||
|
|
@ -132,7 +171,8 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container-toggle-enter-active, .container-toggle-leave-active {
|
||||
.container-toggle-enter-active,
|
||||
.container-toggle-leave-active {
|
||||
overflow-y: hidden;
|
||||
transition: opacity 0.5s, height 0.5s !important;
|
||||
}
|
||||
|
|
@ -236,7 +276,8 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
&.max-width_380px, &.thin {
|
||||
&.max-width_380px,
|
||||
&.thin {
|
||||
> header {
|
||||
> .title {
|
||||
padding: 8px 10px;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,22 @@
|
|||
<template>
|
||||
<transition :name="$store.state.animation ? 'fade' : ''" appear>
|
||||
<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
|
||||
<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
|
||||
</div>
|
||||
</transition>
|
||||
<transition :name="$store.state.animation ? 'fade' : ''" appear>
|
||||
<div
|
||||
ref="rootEl"
|
||||
class="nvlagfpb"
|
||||
:style="{ zIndex }"
|
||||
@contextmenu.prevent.stop="() => {}"
|
||||
>
|
||||
<MkMenu :items="items" :align="'left'" @close="$emit('closed')" />
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onBeforeUnmount } from 'vue';
|
||||
import MkMenu from './MkMenu.vue';
|
||||
import { MenuItem } from './types/menu.vue';
|
||||
import contains from '@/scripts/contains';
|
||||
import * as os from '@/os';
|
||||
import { onMounted, onBeforeUnmount } from "vue";
|
||||
import MkMenu from "./MkMenu.vue";
|
||||
import { MenuItem } from "./types/menu.vue";
|
||||
import contains from "@/scripts/contains";
|
||||
import * as os from "@/os";
|
||||
|
||||
const props = defineProps<{
|
||||
items: MenuItem[];
|
||||
|
|
@ -19,12 +24,12 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
let rootEl = $ref<HTMLDivElement>();
|
||||
|
||||
let zIndex = $ref<number>(os.claimZIndex('high'));
|
||||
let zIndex = $ref<number>(os.claimZIndex("high"));
|
||||
|
||||
onMounted(() => {
|
||||
let left = props.ev.pageX + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
|
||||
|
|
@ -52,19 +57,19 @@ onMounted(() => {
|
|||
rootEl.style.top = `${top}px`;
|
||||
rootEl.style.left = `${left}px`;
|
||||
|
||||
for (const el of Array.from(document.querySelectorAll('body *'))) {
|
||||
el.addEventListener('mousedown', onMousedown);
|
||||
for (const el of Array.from(document.querySelectorAll("body *"))) {
|
||||
el.addEventListener("mousedown", onMousedown);
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
for (const el of Array.from(document.querySelectorAll('body *'))) {
|
||||
el.removeEventListener('mousedown', onMousedown);
|
||||
for (const el of Array.from(document.querySelectorAll("body *"))) {
|
||||
el.removeEventListener("mousedown", onMousedown);
|
||||
}
|
||||
});
|
||||
|
||||
function onMousedown(evt: Event) {
|
||||
if (!contains(rootEl, evt.target) && (rootEl !== evt.target)) emit('closed');
|
||||
if (!contains(rootEl, evt.target) && rootEl !== evt.target) emit("closed");
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -73,12 +78,15 @@ function onMousedown(evt: Event) {
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,47 +1,55 @@
|
|||
<template>
|
||||
<XModalWindow
|
||||
ref="dialogEl"
|
||||
:width="800"
|
||||
:height="500"
|
||||
:scroll="false"
|
||||
:with-ok-button="true"
|
||||
@close="cancel()"
|
||||
@ok="ok()"
|
||||
@closed="$emit('closed')"
|
||||
>
|
||||
<template #header>{{ i18n.ts.cropImage }}</template>
|
||||
<template #default="{ width, height }">
|
||||
<div class="mk-cropper-dialog" :style="`--vw: ${width}px; --vh: ${height}px;`">
|
||||
<Transition name="fade">
|
||||
<div v-if="loading" class="loading">
|
||||
<MkLoading/>
|
||||
<XModalWindow
|
||||
ref="dialogEl"
|
||||
:width="800"
|
||||
:height="500"
|
||||
:scroll="false"
|
||||
:with-ok-button="true"
|
||||
@close="cancel()"
|
||||
@ok="ok()"
|
||||
@closed="$emit('closed')"
|
||||
>
|
||||
<template #header>{{ i18n.ts.cropImage }}</template>
|
||||
<template #default="{ width, height }">
|
||||
<div
|
||||
class="mk-cropper-dialog"
|
||||
:style="`--vw: ${width}px; --vh: ${height}px;`"
|
||||
>
|
||||
<Transition name="fade">
|
||||
<div v-if="loading" class="loading">
|
||||
<MkLoading />
|
||||
</div>
|
||||
</Transition>
|
||||
<div class="container">
|
||||
<img
|
||||
ref="imgEl"
|
||||
:src="imgUrl"
|
||||
style="display: none"
|
||||
@load="onImageLoad"
|
||||
/>
|
||||
</div>
|
||||
</Transition>
|
||||
<div class="container">
|
||||
<img ref="imgEl" :src="imgUrl" style="display: none;" @load="onImageLoad">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</XModalWindow>
|
||||
</template>
|
||||
</XModalWindow>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted } from 'vue';
|
||||
import * as misskey from 'calckey-js';
|
||||
import Cropper from 'cropperjs';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import XModalWindow from '@/components/MkModalWindow.vue';
|
||||
import * as os from '@/os';
|
||||
import { $i } from '@/account';
|
||||
import { defaultStore } from '@/store';
|
||||
import { apiUrl, url } from '@/config';
|
||||
import { query } from '@/scripts/url';
|
||||
import { i18n } from '@/i18n';
|
||||
import { nextTick, onMounted } from "vue";
|
||||
import * as misskey from "calckey-js";
|
||||
import Cropper from "cropperjs";
|
||||
import tinycolor from "tinycolor2";
|
||||
import XModalWindow from "@/components/MkModalWindow.vue";
|
||||
import * as os from "@/os";
|
||||
import { $i } from "@/account";
|
||||
import { defaultStore } from "@/store";
|
||||
import { apiUrl, url } from "@/config";
|
||||
import { query } from "@/scripts/url";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'ok', cropped: misskey.entities.DriveFile): void;
|
||||
(ev: 'cancel'): void;
|
||||
(ev: 'closed'): void;
|
||||
(ev: "ok", cropped: misskey.entities.DriveFile): void;
|
||||
(ev: "cancel"): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
@ -60,24 +68,24 @@ let loading = $ref(true);
|
|||
const ok = async () => {
|
||||
const promise = new Promise<misskey.entities.DriveFile>(async (res) => {
|
||||
const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
|
||||
croppedCanvas.toBlob(blob => {
|
||||
croppedCanvas.toBlob((blob) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', blob);
|
||||
formData.append("file", blob);
|
||||
if (defaultStore.state.uploadFolder) {
|
||||
formData.append('folderId', defaultStore.state.uploadFolder);
|
||||
formData.append("folderId", defaultStore.state.uploadFolder);
|
||||
}
|
||||
|
||||
fetch(apiUrl + '/drive/files/create', {
|
||||
method: 'POST',
|
||||
fetch(apiUrl + "/drive/files/create", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
headers: {
|
||||
authorization: `Bearer ${$i.token}`,
|
||||
},
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(f => {
|
||||
res(f);
|
||||
});
|
||||
.then((response) => response.json())
|
||||
.then((f) => {
|
||||
res(f);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -85,12 +93,12 @@ const ok = async () => {
|
|||
|
||||
const f = await promise;
|
||||
|
||||
emit('ok', f);
|
||||
emit("ok", f);
|
||||
dialogEl.close();
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
emit('cancel');
|
||||
emit("cancel");
|
||||
dialogEl.close();
|
||||
};
|
||||
|
||||
|
|
@ -98,31 +106,32 @@ const onImageLoad = () => {
|
|||
loading = false;
|
||||
|
||||
if (cropper) {
|
||||
cropper.getCropperImage()!.$center('contain');
|
||||
cropper.getCropperImage()!.$center("contain");
|
||||
cropper.getCropperSelection()!.$center();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
cropper = new Cropper(imgEl, {
|
||||
});
|
||||
cropper = new Cropper(imgEl, {});
|
||||
|
||||
const computedStyle = getComputedStyle(document.documentElement);
|
||||
|
||||
const selection = cropper.getCropperSelection()!;
|
||||
selection.themeColor = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
|
||||
selection.themeColor = tinycolor(
|
||||
computedStyle.getPropertyValue("--accent")
|
||||
).toHexString();
|
||||
selection.aspectRatio = props.aspectRatio;
|
||||
selection.initialAspectRatio = props.aspectRatio;
|
||||
selection.outlined = true;
|
||||
|
||||
window.setTimeout(() => {
|
||||
cropper.getCropperImage()!.$center('contain');
|
||||
cropper.getCropperImage()!.$center("contain");
|
||||
selection.$center();
|
||||
}, 100);
|
||||
|
||||
// モーダルオープンアニメーションが終わったあとで再度調整
|
||||
window.setTimeout(() => {
|
||||
cropper.getCropperImage()!.$center('contain');
|
||||
cropper.getCropperImage()!.$center("contain");
|
||||
selection.$center();
|
||||
}, 500);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<button class="nrvgflfu _button" @click.stop="toggle">
|
||||
<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
|
||||
<span v-if="!modelValue">{{ label }}</span>
|
||||
</button>
|
||||
<button class="nrvgflfu _button" @click.stop="toggle">
|
||||
<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
|
||||
<span v-if="!modelValue">{{ label }}</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { length } from 'stringz';
|
||||
import * as misskey from 'calckey-js';
|
||||
import { concat } from '@/scripts/array';
|
||||
import { i18n } from '@/i18n';
|
||||
import { computed } from "vue";
|
||||
import { length } from "stringz";
|
||||
import * as misskey from "calckey-js";
|
||||
import { concat } from "@/scripts/array";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean;
|
||||
|
|
@ -18,19 +18,23 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'update:modelValue', v: boolean): void;
|
||||
(ev: "update:modelValue", v: boolean): void;
|
||||
}>();
|
||||
|
||||
const label = computed(() => {
|
||||
return concat([
|
||||
props.note.text ? [i18n.t('_cw.chars', { count: length(props.note.text) })] : [],
|
||||
props.note.files && props.note.files.length !== 0 ? [i18n.t('_cw.files', { count: props.note.files.length }) ] : [],
|
||||
props.note.poll != null ? [i18n.ts.poll] : []
|
||||
] as string[][]).join(' / ');
|
||||
props.note.text
|
||||
? [i18n.t("_cw.chars", { count: length(props.note.text) })]
|
||||
: [],
|
||||
props.note.files && props.note.files.length !== 0
|
||||
? [i18n.t("_cw.files", { count: props.note.files.length })]
|
||||
: [],
|
||||
props.note.poll != null ? [i18n.ts.poll] : [],
|
||||
] as string[][]).join(" / ");
|
||||
});
|
||||
|
||||
const toggle = () => {
|
||||
emit('update:modelValue', !props.modelValue);
|
||||
emit("update:modelValue", !props.modelValue);
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -60,11 +64,11 @@ const toggle = () => {
|
|||
margin-left: 4px;
|
||||
|
||||
&:before {
|
||||
content: '(';
|
||||
content: "(";
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: ')';
|
||||
content: ")";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, h, PropType, TransitionGroup } from 'vue';
|
||||
import MkAd from '@/components/global/MkAd.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import { defaultStore } from '@/store';
|
||||
import { defineComponent, h, PropType, TransitionGroup } from "vue";
|
||||
import MkAd from "@/components/global/MkAd.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
import { defaultStore } from "@/store";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
items: {
|
||||
type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>,
|
||||
type: Array as PropType<
|
||||
{ id: string; createdAt: string; _shouldInsertAd_: boolean }[]
|
||||
>,
|
||||
required: true,
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'down',
|
||||
default: "down",
|
||||
},
|
||||
reversed: {
|
||||
type: Boolean,
|
||||
|
|
@ -36,7 +38,7 @@ export default defineComponent({
|
|||
function getDateText(time: string) {
|
||||
const date = new Date(time).getDate();
|
||||
const month = new Date(time).getMonth() + 1;
|
||||
return i18n.t('monthAndDay', {
|
||||
return i18n.t("monthAndDay", {
|
||||
month: month.toString(),
|
||||
day: date.toString(),
|
||||
});
|
||||
|
|
@ -44,64 +46,81 @@ export default defineComponent({
|
|||
|
||||
if (props.items.length === 0) return;
|
||||
|
||||
const renderChildren = () => props.items.map((item, i) => {
|
||||
if (!slots || !slots.default) return;
|
||||
const renderChildren = () =>
|
||||
props.items.map((item, i) => {
|
||||
if (!slots || !slots.default) return;
|
||||
|
||||
const el = slots.default({
|
||||
item: item,
|
||||
})[0];
|
||||
if (el.key == null && item.id) el.key = item.id;
|
||||
const el = slots.default({
|
||||
item: item,
|
||||
})[0];
|
||||
if (el.key == null && item.id) el.key = item.id;
|
||||
|
||||
if (
|
||||
i !== props.items.length - 1 &&
|
||||
new Date(item.createdAt).getDate() !== new Date(props.items[i + 1].createdAt).getDate()
|
||||
) {
|
||||
const separator = h('div', {
|
||||
class: 'separator',
|
||||
key: item.id + ':separator',
|
||||
}, h('p', {
|
||||
class: 'date',
|
||||
}, [
|
||||
h('span', [
|
||||
h('i', {
|
||||
class: 'ph-caret-up ph-bold ph-lg icon',
|
||||
}),
|
||||
getDateText(item.createdAt),
|
||||
]),
|
||||
h('span', [
|
||||
getDateText(props.items[i + 1].createdAt),
|
||||
h('i', {
|
||||
class: 'ph-caret-down ph-bold ph-lg icon',
|
||||
}),
|
||||
]),
|
||||
]));
|
||||
if (
|
||||
i !== props.items.length - 1 &&
|
||||
new Date(item.createdAt).getDate() !==
|
||||
new Date(props.items[i + 1].createdAt).getDate()
|
||||
) {
|
||||
const separator = h(
|
||||
"div",
|
||||
{
|
||||
class: "separator",
|
||||
key: item.id + ":separator",
|
||||
},
|
||||
h(
|
||||
"p",
|
||||
{
|
||||
class: "date",
|
||||
},
|
||||
[
|
||||
h("span", [
|
||||
h("i", {
|
||||
class: "ph-caret-up ph-bold ph-lg icon",
|
||||
}),
|
||||
getDateText(item.createdAt),
|
||||
]),
|
||||
h("span", [
|
||||
getDateText(props.items[i + 1].createdAt),
|
||||
h("i", {
|
||||
class: "ph-caret-down ph-bold ph-lg icon",
|
||||
}),
|
||||
]),
|
||||
]
|
||||
)
|
||||
);
|
||||
|
||||
return [el, separator];
|
||||
} else {
|
||||
if (props.ad && item._shouldInsertAd_) {
|
||||
return [h(MkAd, {
|
||||
class: 'a', // advertiseの意(ブロッカー対策)
|
||||
key: item.id + ':ad',
|
||||
prefer: ['horizontal', 'horizontal-big'],
|
||||
}), el];
|
||||
return [el, separator];
|
||||
} else {
|
||||
return el;
|
||||
if (props.ad && item._shouldInsertAd_) {
|
||||
return [
|
||||
h(MkAd, {
|
||||
class: "a", // advertiseの意(ブロッカー対策)
|
||||
key: item.id + ":ad",
|
||||
prefer: ["horizontal", "horizontal-big"],
|
||||
}),
|
||||
el,
|
||||
];
|
||||
} else {
|
||||
return el;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return () => h(
|
||||
defaultStore.state.animation ? TransitionGroup : 'div',
|
||||
defaultStore.state.animation ? {
|
||||
class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
|
||||
name: 'list',
|
||||
tag: 'div',
|
||||
'data-direction': props.direction,
|
||||
'data-reversed': props.reversed ? 'true' : 'false',
|
||||
} : {
|
||||
class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
|
||||
},
|
||||
{ default: renderChildren });
|
||||
return () =>
|
||||
h(
|
||||
defaultStore.state.animation ? TransitionGroup : "div",
|
||||
defaultStore.state.animation
|
||||
? {
|
||||
class: "sqadhkmv" + (props.noGap ? " noGap" : ""),
|
||||
name: "list",
|
||||
tag: "div",
|
||||
"data-direction": props.direction,
|
||||
"data-reversed": props.reversed ? "true" : "false",
|
||||
}
|
||||
: {
|
||||
class: "sqadhkmv" + (props.noGap ? " noGap" : ""),
|
||||
},
|
||||
{ default: renderChildren }
|
||||
);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -121,7 +140,8 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
> .list-enter-active {
|
||||
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
|
||||
opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
&[data-direction="up"] {
|
||||
|
|
|
|||
|
|
@ -1,63 +1,171 @@
|
|||
<template>
|
||||
<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="emit('closed')">
|
||||
<MkModal
|
||||
ref="modal"
|
||||
:prefer-type="'dialog'"
|
||||
:z-priority="'high'"
|
||||
@click="done(true)"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<div :class="$style.root">
|
||||
<div v-if="icon" :class="$style.icon">
|
||||
<i :class="icon"></i>
|
||||
</div>
|
||||
<div v-else-if="!input && !select" :class="[$style.icon, $style['type_' + type]]">
|
||||
<i v-if="type === 'success'" :class="$style.iconInner" class="ph-check ph-bold ph-lg"></i>
|
||||
<i v-else-if="type === 'error'" :class="$style.iconInner" class="ph-circle-wavy-warning ph-bold ph-lg"></i>
|
||||
<i v-else-if="type === 'warning'" :class="$style.iconInner" class="ph-warning ph-bold ph-lg"></i>
|
||||
<i v-else-if="type === 'info'" :class="$style.iconInner" class="ph-info ph-bold ph-lg"></i>
|
||||
<i v-else-if="type === 'question'" :class="$style.iconInner" class="ph-circle-question ph-bold ph-lg"></i>
|
||||
<MkLoading v-else-if="type === 'waiting'" :class="$style.iconInner" :em="true"/>
|
||||
<div
|
||||
v-else-if="!input && !select"
|
||||
:class="[$style.icon, $style['type_' + type]]"
|
||||
>
|
||||
<i
|
||||
v-if="type === 'success'"
|
||||
:class="$style.iconInner"
|
||||
class="ph-check ph-bold ph-lg"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="type === 'error'"
|
||||
:class="$style.iconInner"
|
||||
class="ph-circle-wavy-warning ph-bold ph-lg"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="type === 'warning'"
|
||||
:class="$style.iconInner"
|
||||
class="ph-warning ph-bold ph-lg"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="type === 'info'"
|
||||
:class="$style.iconInner"
|
||||
class="ph-info ph-bold ph-lg"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="type === 'question'"
|
||||
:class="$style.iconInner"
|
||||
class="ph-circle-question ph-bold ph-lg"
|
||||
></i>
|
||||
<MkLoading
|
||||
v-else-if="type === 'waiting'"
|
||||
:class="$style.iconInner"
|
||||
:em="true"
|
||||
/>
|
||||
</div>
|
||||
<header v-if="title" :class="$style.title"><Mfm :text="title"/></header>
|
||||
<header v-if="title == null && (input && input.type === 'password')" :class="$style.title"><Mfm :text="i18n.ts.password"/></header>
|
||||
<div v-if="text" :class="$style.text"><Mfm :text="text"/></div>
|
||||
<MkInput v-if="input && input.type !== 'paragraph'" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" @keydown="onInputKeydown">
|
||||
<template v-if="input.type === 'password'" #prefix><i class="ph-password ph-bold ph-lg"></i></template>
|
||||
<header v-if="title" :class="$style.title">
|
||||
<Mfm :text="title" />
|
||||
</header>
|
||||
<header
|
||||
v-if="title == null && input && input.type === 'password'"
|
||||
:class="$style.title"
|
||||
>
|
||||
<Mfm :text="i18n.ts.password" />
|
||||
</header>
|
||||
<div v-if="text" :class="$style.text"><Mfm :text="text" /></div>
|
||||
<MkInput
|
||||
v-if="input && input.type !== 'paragraph'"
|
||||
v-model="inputValue"
|
||||
autofocus
|
||||
:type="input.type || 'text'"
|
||||
:placeholder="input.placeholder || undefined"
|
||||
@keydown="onInputKeydown"
|
||||
>
|
||||
<template v-if="input.type === 'password'" #prefix
|
||||
><i class="ph-password ph-bold ph-lg"></i
|
||||
></template>
|
||||
</MkInput>
|
||||
<MkTextarea v-if="input && input.type === 'paragraph'" v-model="inputValue" autofocus :type="paragraph" :placeholder="input.placeholder || undefined">
|
||||
<MkTextarea
|
||||
v-if="input && input.type === 'paragraph'"
|
||||
v-model="inputValue"
|
||||
autofocus
|
||||
:type="paragraph"
|
||||
:placeholder="input.placeholder || undefined"
|
||||
>
|
||||
</MkTextarea>
|
||||
<MkSelect v-if="select" v-model="selectedValue" autofocus>
|
||||
<template v-if="select.items">
|
||||
<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
|
||||
<option v-for="item in select.items" :value="item.value">
|
||||
{{ item.text }}
|
||||
</option>
|
||||
</template>
|
||||
<template v-else>
|
||||
<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
|
||||
<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
|
||||
<optgroup
|
||||
v-for="groupedItem in select.groupedItems"
|
||||
:label="groupedItem.label"
|
||||
>
|
||||
<option
|
||||
v-for="item in groupedItem.items"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.text }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</template>
|
||||
</MkSelect>
|
||||
<div v-if="(showOkButton || showCancelButton) && !actions" :class="$style.buttons">
|
||||
<div
|
||||
v-if="(showOkButton || showCancelButton) && !actions"
|
||||
:class="$style.buttons"
|
||||
>
|
||||
<div v-if="!isYesNo">
|
||||
<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt }}</MkButton>
|
||||
<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
|
||||
<MkButton
|
||||
v-if="showOkButton"
|
||||
inline
|
||||
primary
|
||||
:autofocus="!input && !select"
|
||||
@click="ok"
|
||||
>{{
|
||||
showCancelButton || input || select
|
||||
? i18n.ts.ok
|
||||
: i18n.ts.gotIt
|
||||
}}</MkButton
|
||||
>
|
||||
<MkButton
|
||||
v-if="showCancelButton || input || select"
|
||||
inline
|
||||
@click="cancel"
|
||||
>{{ i18n.ts.cancel }}</MkButton
|
||||
>
|
||||
</div>
|
||||
<div v-else>
|
||||
<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ i18n.ts.yes }}</MkButton>
|
||||
<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.no }}</MkButton>
|
||||
<MkButton
|
||||
v-if="showOkButton"
|
||||
inline
|
||||
primary
|
||||
:autofocus="!input && !select"
|
||||
@click="ok"
|
||||
>{{ i18n.ts.yes }}</MkButton
|
||||
>
|
||||
<MkButton
|
||||
v-if="showCancelButton || input || select"
|
||||
inline
|
||||
@click="cancel"
|
||||
>{{ i18n.ts.no }}</MkButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="actions" :class="$style.buttons">
|
||||
<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); modal?.close(); }">{{ action.text }}</MkButton>
|
||||
<MkButton
|
||||
v-for="action in actions"
|
||||
:key="action.text"
|
||||
inline
|
||||
:primary="action.primary"
|
||||
@click="
|
||||
() => {
|
||||
action.callback();
|
||||
modal?.close();
|
||||
}
|
||||
"
|
||||
>{{ action.text }}</MkButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</MkModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
|
||||
import MkModal from '@/components/MkModal.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkInput from '@/components/form/input.vue';
|
||||
import MkTextarea from '@/components/form/textarea.vue';
|
||||
import MkSelect from '@/components/form/select.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import MkInput from "@/components/form/input.vue";
|
||||
import MkTextarea from "@/components/form/textarea.vue";
|
||||
import MkSelect from "@/components/form/select.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
type Input = {
|
||||
type: HTMLInputElement['type'];
|
||||
type: HTMLInputElement["type"];
|
||||
placeholder?: string | null;
|
||||
default: any | null;
|
||||
};
|
||||
|
|
@ -77,37 +185,46 @@ type Select = {
|
|||
default: string | null;
|
||||
};
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
type?: 'success' | 'error' | 'warning' | 'info' | 'question' | 'waiting';
|
||||
title: string;
|
||||
text?: string;
|
||||
input?: Input;
|
||||
select?: Select;
|
||||
icon?: string;
|
||||
actions?: {
|
||||
text: string;
|
||||
primary?: boolean,
|
||||
callback: (...args: any[]) => void;
|
||||
}[];
|
||||
showOkButton?: boolean;
|
||||
showCancelButton?: boolean;
|
||||
isYesNo?: boolean;
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
type?:
|
||||
| "success"
|
||||
| "error"
|
||||
| "warning"
|
||||
| "info"
|
||||
| "question"
|
||||
| "waiting";
|
||||
title: string;
|
||||
text?: string;
|
||||
input?: Input;
|
||||
select?: Select;
|
||||
icon?: string;
|
||||
actions?: {
|
||||
text: string;
|
||||
primary?: boolean;
|
||||
callback: (...args: any[]) => void;
|
||||
}[];
|
||||
showOkButton?: boolean;
|
||||
showCancelButton?: boolean;
|
||||
isYesNo?: boolean;
|
||||
|
||||
cancelableByBgClick?: boolean;
|
||||
okText?: string;
|
||||
cancelText?: string;
|
||||
}>(), {
|
||||
type: 'info',
|
||||
showOkButton: true,
|
||||
showCancelButton: false,
|
||||
isYesNo: false,
|
||||
cancelableByBgClick?: boolean;
|
||||
okText?: string;
|
||||
cancelText?: string;
|
||||
}>(),
|
||||
{
|
||||
type: "info",
|
||||
showOkButton: true,
|
||||
showCancelButton: false,
|
||||
isYesNo: false,
|
||||
|
||||
cancelableByBgClick: true,
|
||||
});
|
||||
cancelableByBgClick: true,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'done', v: { canceled: boolean; result: any }): void;
|
||||
(ev: 'closed'): void;
|
||||
(ev: "done", v: { canceled: boolean; result: any }): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
const modal = shallowRef<InstanceType<typeof MkModal>>();
|
||||
|
|
@ -116,17 +233,18 @@ const inputValue = ref(props.input?.default || null);
|
|||
const selectedValue = ref(props.select?.default || null);
|
||||
|
||||
function done(canceled: boolean, result?) {
|
||||
emit('done', { canceled, result });
|
||||
emit("done", { canceled, result });
|
||||
modal.value?.close();
|
||||
}
|
||||
|
||||
async function ok() {
|
||||
if (!props.showOkButton) return;
|
||||
|
||||
const result =
|
||||
props.input ? inputValue.value :
|
||||
props.select ? selectedValue.value :
|
||||
true;
|
||||
const result = props.input
|
||||
? inputValue.value
|
||||
: props.select
|
||||
? selectedValue.value
|
||||
: true;
|
||||
done(false, result);
|
||||
}
|
||||
|
||||
|
|
@ -139,11 +257,11 @@ function onBgClick() {
|
|||
}
|
||||
*/
|
||||
function onKeydown(evt: KeyboardEvent) {
|
||||
if (evt.key === 'Escape') cancel();
|
||||
if (evt.key === "Escape") cancel();
|
||||
}
|
||||
|
||||
function onInputKeydown(evt: KeyboardEvent) {
|
||||
if (evt.key === 'Enter') {
|
||||
if (evt.key === "Enter") {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
ok();
|
||||
|
|
@ -151,11 +269,11 @@ function onInputKeydown(evt: KeyboardEvent) {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', onKeydown);
|
||||
document.addEventListener("keydown", onKeydown);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('keydown', onKeydown);
|
||||
document.removeEventListener("keydown", onKeydown);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,36 @@
|
|||
<template>
|
||||
<span class="zjobosdg">
|
||||
<span v-text="hh"></span>
|
||||
<span class="colon" :class="{ showColon }">:</span>
|
||||
<span v-text="mm"></span>
|
||||
<span v-if="showS" class="colon" :class="{ showColon }">:</span>
|
||||
<span v-if="showS" v-text="ss"></span>
|
||||
<span v-if="showMs" class="colon" :class="{ showColon }">:</span>
|
||||
<span v-if="showMs" v-text="ms"></span>
|
||||
</span>
|
||||
<span class="zjobosdg">
|
||||
<span v-text="hh"></span>
|
||||
<span class="colon" :class="{ showColon }">:</span>
|
||||
<span v-text="mm"></span>
|
||||
<span v-if="showS" class="colon" :class="{ showColon }">:</span>
|
||||
<span v-if="showS" v-text="ss"></span>
|
||||
<span v-if="showMs" class="colon" :class="{ showColon }">:</span>
|
||||
<span v-if="showMs" v-text="ms"></span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onUnmounted, ref, watch } from 'vue';
|
||||
import { onUnmounted, ref, watch } from "vue";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
showS?: boolean;
|
||||
showMs?: boolean;
|
||||
offset?: number;
|
||||
}>(), {
|
||||
showS: true,
|
||||
showMs: false,
|
||||
offset: 0 - new Date().getTimezoneOffset(),
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
showS?: boolean;
|
||||
showMs?: boolean;
|
||||
offset?: number;
|
||||
}>(),
|
||||
{
|
||||
showS: true,
|
||||
showMs: false,
|
||||
offset: 0 - new Date().getTimezoneOffset(),
|
||||
}
|
||||
);
|
||||
|
||||
let intervalId;
|
||||
const hh = ref('');
|
||||
const mm = ref('');
|
||||
const ss = ref('');
|
||||
const ms = ref('');
|
||||
const hh = ref("");
|
||||
const mm = ref("");
|
||||
const ss = ref("");
|
||||
const ms = ref("");
|
||||
const showColon = ref(false);
|
||||
let prevSec: number | null = null;
|
||||
|
||||
|
|
@ -41,21 +44,29 @@ watch(showColon, (v) => {
|
|||
|
||||
const tick = () => {
|
||||
const now = new Date();
|
||||
now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
|
||||
hh.value = now.getHours().toString().padStart(2, '0');
|
||||
mm.value = now.getMinutes().toString().padStart(2, '0');
|
||||
ss.value = now.getSeconds().toString().padStart(2, '0');
|
||||
ms.value = Math.floor(now.getMilliseconds() / 10).toString().padStart(2, '0');
|
||||
now.setMinutes(
|
||||
now.getMinutes() + (new Date().getTimezoneOffset() + props.offset)
|
||||
);
|
||||
hh.value = now.getHours().toString().padStart(2, "0");
|
||||
mm.value = now.getMinutes().toString().padStart(2, "0");
|
||||
ss.value = now.getSeconds().toString().padStart(2, "0");
|
||||
ms.value = Math.floor(now.getMilliseconds() / 10)
|
||||
.toString()
|
||||
.padStart(2, "0");
|
||||
if (now.getSeconds() !== prevSec) showColon.value = true;
|
||||
prevSec = now.getSeconds();
|
||||
};
|
||||
|
||||
tick();
|
||||
|
||||
watch(() => props.showMs, () => {
|
||||
if (intervalId) window.clearInterval(intervalId);
|
||||
intervalId = window.setInterval(tick, props.showMs ? 10 : 1000);
|
||||
}, { immediate: true });
|
||||
watch(
|
||||
() => props.showMs,
|
||||
() => {
|
||||
if (intervalId) window.clearInterval(intervalId);
|
||||
intervalId = window.setInterval(tick, props.showMs ? 10 : 1000);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
window.clearInterval(intervalId);
|
||||
|
|
|
|||
|
|
@ -1,102 +1,131 @@
|
|||
<template>
|
||||
<div
|
||||
class="ncvczrfv"
|
||||
:class="{ isSelected }"
|
||||
draggable="true"
|
||||
:title="title"
|
||||
@click="onClick"
|
||||
@contextmenu.stop="onContextmenu"
|
||||
@dragstart="onDragstart"
|
||||
@dragend="onDragend"
|
||||
>
|
||||
<div v-if="$i?.avatarId == file.id" class="label">
|
||||
<img src="/client-assets/label.svg"/>
|
||||
<p>{{ i18n.ts.avatar }}</p>
|
||||
</div>
|
||||
<div v-if="$i?.bannerId == file.id" class="label">
|
||||
<img src="/client-assets/label.svg"/>
|
||||
<p>{{ i18n.ts.banner }}</p>
|
||||
</div>
|
||||
<div v-if="file.isSensitive" class="label red">
|
||||
<img src="/client-assets/label-red.svg"/>
|
||||
<p>{{ i18n.ts.nsfw }}</p>
|
||||
</div>
|
||||
<div
|
||||
class="ncvczrfv"
|
||||
:class="{ isSelected }"
|
||||
draggable="true"
|
||||
:title="title"
|
||||
@click="onClick"
|
||||
@contextmenu.stop="onContextmenu"
|
||||
@dragstart="onDragstart"
|
||||
@dragend="onDragend"
|
||||
>
|
||||
<div v-if="$i?.avatarId == file.id" class="label">
|
||||
<img src="/client-assets/label.svg" />
|
||||
<p>{{ i18n.ts.avatar }}</p>
|
||||
</div>
|
||||
<div v-if="$i?.bannerId == file.id" class="label">
|
||||
<img src="/client-assets/label.svg" />
|
||||
<p>{{ i18n.ts.banner }}</p>
|
||||
</div>
|
||||
<div v-if="file.isSensitive" class="label red">
|
||||
<img src="/client-assets/label-red.svg" />
|
||||
<p>{{ i18n.ts.nsfw }}</p>
|
||||
</div>
|
||||
|
||||
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
|
||||
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain" />
|
||||
|
||||
<p class="name">
|
||||
<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
|
||||
<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<p class="name">
|
||||
<span>{{
|
||||
file.name.lastIndexOf(".") != -1
|
||||
? file.name.substr(0, file.name.lastIndexOf("."))
|
||||
: file.name
|
||||
}}</span>
|
||||
<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{
|
||||
file.name.substr(file.name.lastIndexOf("."))
|
||||
}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineAsyncComponent, ref } from 'vue';
|
||||
import * as Misskey from 'calckey-js';
|
||||
import copyToClipboard from '@/scripts/copy-to-clipboard';
|
||||
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
|
||||
import bytes from '@/filters/bytes';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { $i } from '@/account';
|
||||
import { computed, defineAsyncComponent, ref } from "vue";
|
||||
import * as Misskey from "calckey-js";
|
||||
import copyToClipboard from "@/scripts/copy-to-clipboard";
|
||||
import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
|
||||
import bytes from "@/filters/bytes";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
import { $i } from "@/account";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
file: Misskey.entities.DriveFile;
|
||||
isSelected?: boolean;
|
||||
selectMode?: boolean;
|
||||
}>(), {
|
||||
isSelected: false,
|
||||
selectMode: false,
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
file: Misskey.entities.DriveFile;
|
||||
isSelected?: boolean;
|
||||
selectMode?: boolean;
|
||||
}>(),
|
||||
{
|
||||
isSelected: false,
|
||||
selectMode: false,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'chosen', r: Misskey.entities.DriveFile): void;
|
||||
(ev: 'dragstart'): void;
|
||||
(ev: 'dragend'): void;
|
||||
(ev: "chosen", r: Misskey.entities.DriveFile): void;
|
||||
(ev: "dragstart"): void;
|
||||
(ev: "dragend"): void;
|
||||
}>();
|
||||
|
||||
const isDragging = ref(false);
|
||||
|
||||
const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
|
||||
const title = computed(
|
||||
() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`
|
||||
);
|
||||
|
||||
function getMenu() {
|
||||
return [{
|
||||
text: i18n.ts.rename,
|
||||
icon: 'ph-cursor-text ph-bold ph-lg',
|
||||
action: rename,
|
||||
}, {
|
||||
text: props.file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
|
||||
icon: props.file.isSensitive ? 'ph-eye ph-bold ph-lg' : 'ph-eye-slash ph-bold ph-lg',
|
||||
action: toggleSensitive,
|
||||
}, {
|
||||
text: i18n.ts.describeFile,
|
||||
icon: 'ph-cursor-text ph-bold ph-lg',
|
||||
action: describe,
|
||||
}, null, {
|
||||
text: i18n.ts.copyUrl,
|
||||
icon: 'ph-link-simple ph-bold ph-lg',
|
||||
action: copyUrl,
|
||||
}, {
|
||||
type: 'a',
|
||||
href: props.file.url,
|
||||
target: '_blank',
|
||||
text: i18n.ts.download,
|
||||
icon: 'ph-download-simple ph-bold ph-lg',
|
||||
download: props.file.name,
|
||||
}, null, {
|
||||
text: i18n.ts.delete,
|
||||
icon: 'ph-trash ph-bold ph-lg',
|
||||
danger: true,
|
||||
action: deleteFile,
|
||||
}];
|
||||
return [
|
||||
{
|
||||
text: i18n.ts.rename,
|
||||
icon: "ph-cursor-text ph-bold ph-lg",
|
||||
action: rename,
|
||||
},
|
||||
{
|
||||
text: props.file.isSensitive
|
||||
? i18n.ts.unmarkAsSensitive
|
||||
: i18n.ts.markAsSensitive,
|
||||
icon: props.file.isSensitive
|
||||
? "ph-eye ph-bold ph-lg"
|
||||
: "ph-eye-slash ph-bold ph-lg",
|
||||
action: toggleSensitive,
|
||||
},
|
||||
{
|
||||
text: i18n.ts.describeFile,
|
||||
icon: "ph-cursor-text ph-bold ph-lg",
|
||||
action: describe,
|
||||
},
|
||||
null,
|
||||
{
|
||||
text: i18n.ts.copyUrl,
|
||||
icon: "ph-link-simple ph-bold ph-lg",
|
||||
action: copyUrl,
|
||||
},
|
||||
{
|
||||
type: "a",
|
||||
href: props.file.url,
|
||||
target: "_blank",
|
||||
text: i18n.ts.download,
|
||||
icon: "ph-download-simple ph-bold ph-lg",
|
||||
download: props.file.name,
|
||||
},
|
||||
null,
|
||||
{
|
||||
text: i18n.ts.delete,
|
||||
icon: "ph-trash ph-bold ph-lg",
|
||||
danger: true,
|
||||
action: deleteFile,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function onClick(ev: MouseEvent) {
|
||||
if (props.selectMode) {
|
||||
emit('chosen', props.file);
|
||||
emit("chosen", props.file);
|
||||
} else {
|
||||
os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
|
||||
os.popupMenu(
|
||||
getMenu(),
|
||||
(ev.currentTarget ?? ev.target ?? undefined) as
|
||||
| HTMLElement
|
||||
| undefined
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -106,17 +135,20 @@ function onContextmenu(ev: MouseEvent) {
|
|||
|
||||
function onDragstart(ev: DragEvent) {
|
||||
if (ev.dataTransfer) {
|
||||
ev.dataTransfer.effectAllowed = 'move';
|
||||
ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
|
||||
ev.dataTransfer.effectAllowed = "move";
|
||||
ev.dataTransfer.setData(
|
||||
_DATA_TRANSFER_DRIVE_FILE_,
|
||||
JSON.stringify(props.file)
|
||||
);
|
||||
}
|
||||
isDragging.value = true;
|
||||
|
||||
emit('dragstart');
|
||||
emit("dragstart");
|
||||
}
|
||||
|
||||
function onDragend() {
|
||||
isDragging.value = false;
|
||||
emit('dragend');
|
||||
emit("dragend");
|
||||
}
|
||||
|
||||
function rename() {
|
||||
|
|
@ -126,7 +158,7 @@ function rename() {
|
|||
default: props.file.name,
|
||||
}).then(({ canceled, result: name }) => {
|
||||
if (canceled) return;
|
||||
os.api('drive/files/update', {
|
||||
os.api("drive/files/update", {
|
||||
fileId: props.file.id,
|
||||
name: name,
|
||||
});
|
||||
|
|
@ -134,27 +166,32 @@ function rename() {
|
|||
}
|
||||
|
||||
function describe() {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
|
||||
title: i18n.ts.describeFile,
|
||||
input: {
|
||||
placeholder: i18n.ts.inputNewDescription,
|
||||
default: props.file.comment != null ? props.file.comment : '',
|
||||
os.popup(
|
||||
defineAsyncComponent(() => import("@/components/MkMediaCaption.vue")),
|
||||
{
|
||||
title: i18n.ts.describeFile,
|
||||
input: {
|
||||
placeholder: i18n.ts.inputNewDescription,
|
||||
default: props.file.comment != null ? props.file.comment : "",
|
||||
},
|
||||
image: props.file,
|
||||
},
|
||||
image: props.file,
|
||||
}, {
|
||||
done: result => {
|
||||
if (!result || result.canceled) return;
|
||||
let comment = result.result;
|
||||
os.api('drive/files/update', {
|
||||
fileId: props.file.id,
|
||||
comment: comment.length === 0 ? null : comment,
|
||||
});
|
||||
{
|
||||
done: (result) => {
|
||||
if (!result || result.canceled) return;
|
||||
let comment = result.result;
|
||||
os.api("drive/files/update", {
|
||||
fileId: props.file.id,
|
||||
comment: comment.length === 0 ? null : comment,
|
||||
});
|
||||
},
|
||||
},
|
||||
}, 'closed');
|
||||
"closed"
|
||||
);
|
||||
}
|
||||
|
||||
function toggleSensitive() {
|
||||
os.api('drive/files/update', {
|
||||
os.api("drive/files/update", {
|
||||
fileId: props.file.id,
|
||||
isSensitive: !props.file.isSensitive,
|
||||
});
|
||||
|
|
@ -171,12 +208,12 @@ function addApp() {
|
|||
*/
|
||||
async function deleteFile() {
|
||||
const { canceled } = await os.confirm({
|
||||
type: 'warning',
|
||||
text: i18n.t('driveFileDeleteConfirm', { name: props.file.name }),
|
||||
type: "warning",
|
||||
text: i18n.t("driveFileDeleteConfirm", { name: props.file.name }),
|
||||
});
|
||||
|
||||
if (canceled) return;
|
||||
os.api('drive/files/delete', {
|
||||
os.api("drive/files/delete", {
|
||||
fileId: props.file.id,
|
||||
});
|
||||
}
|
||||
|
|
@ -189,7 +226,8 @@ async function deleteFile() {
|
|||
min-height: 180px;
|
||||
border-radius: 8px;
|
||||
|
||||
&, * {
|
||||
&,
|
||||
* {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,56 +1,68 @@
|
|||
<template>
|
||||
<div
|
||||
class="rghtznwe"
|
||||
:class="{ draghover }"
|
||||
draggable="true"
|
||||
:title="title"
|
||||
@click="onClick"
|
||||
@contextmenu.stop="onContextmenu"
|
||||
@mouseover="onMouseover"
|
||||
@mouseout="onMouseout"
|
||||
@dragover.prevent.stop="onDragover"
|
||||
@dragenter.prevent="onDragenter"
|
||||
@dragleave="onDragleave"
|
||||
@drop.prevent.stop="onDrop"
|
||||
@dragstart="onDragstart"
|
||||
@dragend="onDragend"
|
||||
>
|
||||
<p class="name">
|
||||
<template v-if="hover"><i class="ph-folder-notch-open ph-bold ph-lg ph-fw ph-lg"></i></template>
|
||||
<template v-if="!hover"><i class="ph-folder-notch ph-bold ph-lg ph-fw ph-lg"></i></template>
|
||||
{{ folder.name }}
|
||||
</p>
|
||||
<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
|
||||
{{ i18n.ts.uploadFolder }}
|
||||
</p>
|
||||
<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>
|
||||
</div>
|
||||
<div
|
||||
class="rghtznwe"
|
||||
:class="{ draghover }"
|
||||
draggable="true"
|
||||
:title="title"
|
||||
@click="onClick"
|
||||
@contextmenu.stop="onContextmenu"
|
||||
@mouseover="onMouseover"
|
||||
@mouseout="onMouseout"
|
||||
@dragover.prevent.stop="onDragover"
|
||||
@dragenter.prevent="onDragenter"
|
||||
@dragleave="onDragleave"
|
||||
@drop.prevent.stop="onDrop"
|
||||
@dragstart="onDragstart"
|
||||
@dragend="onDragend"
|
||||
>
|
||||
<p class="name">
|
||||
<template v-if="hover"
|
||||
><i class="ph-folder-notch-open ph-bold ph-lg ph-fw ph-lg"></i
|
||||
></template>
|
||||
<template v-if="!hover"
|
||||
><i class="ph-folder-notch ph-bold ph-lg ph-fw ph-lg"></i
|
||||
></template>
|
||||
{{ folder.name }}
|
||||
</p>
|
||||
<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
|
||||
{{ i18n.ts.uploadFolder }}
|
||||
</p>
|
||||
<button
|
||||
v-if="selectMode"
|
||||
class="checkbox _button"
|
||||
:class="{ checked: isSelected }"
|
||||
@click.prevent.stop="checkboxClicked"
|
||||
></button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineAsyncComponent, ref } from 'vue';
|
||||
import * as Misskey from 'calckey-js';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { defaultStore } from '@/store';
|
||||
import { computed, defineAsyncComponent, ref } from "vue";
|
||||
import * as Misskey from "calckey-js";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
import { defaultStore } from "@/store";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
folder: Misskey.entities.DriveFolder;
|
||||
isSelected?: boolean;
|
||||
selectMode?: boolean;
|
||||
}>(), {
|
||||
isSelected: false,
|
||||
selectMode: false,
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
folder: Misskey.entities.DriveFolder;
|
||||
isSelected?: boolean;
|
||||
selectMode?: boolean;
|
||||
}>(),
|
||||
{
|
||||
isSelected: false,
|
||||
selectMode: false,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'chosen', v: Misskey.entities.DriveFolder): void;
|
||||
(ev: 'move', v: Misskey.entities.DriveFolder): void;
|
||||
(ev: 'upload', file: File, folder: Misskey.entities.DriveFolder);
|
||||
(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
|
||||
(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
|
||||
(ev: 'dragstart'): void;
|
||||
(ev: 'dragend'): void;
|
||||
(ev: "chosen", v: Misskey.entities.DriveFolder): void;
|
||||
(ev: "move", v: Misskey.entities.DriveFolder): void;
|
||||
(ev: "upload", file: File, folder: Misskey.entities.DriveFolder);
|
||||
(ev: "removeFile", v: Misskey.entities.DriveFile["id"]): void;
|
||||
(ev: "removeFolder", v: Misskey.entities.DriveFolder["id"]): void;
|
||||
(ev: "dragstart"): void;
|
||||
(ev: "dragend"): void;
|
||||
}>();
|
||||
|
||||
const hover = ref(false);
|
||||
|
|
@ -60,11 +72,11 @@ const isDragging = ref(false);
|
|||
const title = computed(() => props.folder.name);
|
||||
|
||||
function checkboxClicked() {
|
||||
emit('chosen', props.folder);
|
||||
emit("chosen", props.folder);
|
||||
}
|
||||
|
||||
function onClick() {
|
||||
emit('move', props.folder);
|
||||
emit("move", props.folder);
|
||||
}
|
||||
|
||||
function onMouseover() {
|
||||
|
|
@ -81,18 +93,20 @@ function onDragover(ev: DragEvent) {
|
|||
// 自分自身がドラッグされている場合
|
||||
if (isDragging.value) {
|
||||
// 自分自身にはドロップさせない
|
||||
ev.dataTransfer.dropEffect = 'none';
|
||||
ev.dataTransfer.dropEffect = "none";
|
||||
return;
|
||||
}
|
||||
|
||||
const isFile = ev.dataTransfer.items[0].kind === 'file';
|
||||
const isFile = ev.dataTransfer.items[0].kind === "file";
|
||||
const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
|
||||
const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
|
||||
const isDriveFolder =
|
||||
ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
|
||||
|
||||
if (isFile || isDriveFile || isDriveFolder) {
|
||||
ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
|
||||
ev.dataTransfer.dropEffect =
|
||||
ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
|
||||
} else {
|
||||
ev.dataTransfer.dropEffect = 'none';
|
||||
ev.dataTransfer.dropEffect = "none";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -112,17 +126,17 @@ function onDrop(ev: DragEvent) {
|
|||
// ファイルだったら
|
||||
if (ev.dataTransfer.files.length > 0) {
|
||||
for (const file of Array.from(ev.dataTransfer.files)) {
|
||||
emit('upload', file, props.folder);
|
||||
emit("upload", file, props.folder);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
//#region ドライブのファイル
|
||||
const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
|
||||
if (driveFile != null && driveFile !== '') {
|
||||
if (driveFile != null && driveFile !== "") {
|
||||
const file = JSON.parse(driveFile);
|
||||
emit('removeFile', file.id);
|
||||
os.api('drive/files/update', {
|
||||
emit("removeFile", file.id);
|
||||
os.api("drive/files/update", {
|
||||
fileId: file.id,
|
||||
folderId: props.folder.id,
|
||||
});
|
||||
|
|
@ -131,33 +145,35 @@ function onDrop(ev: DragEvent) {
|
|||
|
||||
//#region ドライブのフォルダ
|
||||
const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
|
||||
if (driveFolder != null && driveFolder !== '') {
|
||||
if (driveFolder != null && driveFolder !== "") {
|
||||
const folder = JSON.parse(driveFolder);
|
||||
|
||||
// 移動先が自分自身ならreject
|
||||
if (folder.id === props.folder.id) return;
|
||||
|
||||
emit('removeFolder', folder.id);
|
||||
os.api('drive/folders/update', {
|
||||
emit("removeFolder", folder.id);
|
||||
os.api("drive/folders/update", {
|
||||
folderId: folder.id,
|
||||
parentId: props.folder.id,
|
||||
}).then(() => {
|
||||
// noop
|
||||
}).catch(err => {
|
||||
switch (err) {
|
||||
case 'detected-circular-definition':
|
||||
os.alert({
|
||||
title: i18n.ts.unableToProcess,
|
||||
text: i18n.ts.circularReferenceFolder,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: i18n.ts.somethingHappened,
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.then(() => {
|
||||
// noop
|
||||
})
|
||||
.catch((err) => {
|
||||
switch (err) {
|
||||
case "detected-circular-definition":
|
||||
os.alert({
|
||||
title: i18n.ts.unableToProcess,
|
||||
text: i18n.ts.circularReferenceFolder,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
os.alert({
|
||||
type: "error",
|
||||
text: i18n.ts.somethingHappened,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
//#endregion
|
||||
}
|
||||
|
|
@ -165,22 +181,25 @@ function onDrop(ev: DragEvent) {
|
|||
function onDragstart(ev: DragEvent) {
|
||||
if (!ev.dataTransfer) return;
|
||||
|
||||
ev.dataTransfer.effectAllowed = 'move';
|
||||
ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FOLDER_, JSON.stringify(props.folder));
|
||||
ev.dataTransfer.effectAllowed = "move";
|
||||
ev.dataTransfer.setData(
|
||||
_DATA_TRANSFER_DRIVE_FOLDER_,
|
||||
JSON.stringify(props.folder)
|
||||
);
|
||||
isDragging.value = true;
|
||||
|
||||
// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
|
||||
// (=あなたの子供が、ドラッグを開始しましたよ)
|
||||
emit('dragstart');
|
||||
emit("dragstart");
|
||||
}
|
||||
|
||||
function onDragend() {
|
||||
isDragging.value = false;
|
||||
emit('dragend');
|
||||
emit("dragend");
|
||||
}
|
||||
|
||||
function go() {
|
||||
emit('move', props.folder.id);
|
||||
emit("move", props.folder.id);
|
||||
}
|
||||
|
||||
function rename() {
|
||||
|
|
@ -190,7 +209,7 @@ function rename() {
|
|||
default: props.folder.name,
|
||||
}).then(({ canceled, result: name }) => {
|
||||
if (canceled) return;
|
||||
os.api('drive/folders/update', {
|
||||
os.api("drive/folders/update", {
|
||||
folderId: props.folder.id,
|
||||
name: name,
|
||||
});
|
||||
|
|
@ -198,54 +217,71 @@ function rename() {
|
|||
}
|
||||
|
||||
function deleteFolder() {
|
||||
os.api('drive/folders/delete', {
|
||||
os.api("drive/folders/delete", {
|
||||
folderId: props.folder.id,
|
||||
}).then(() => {
|
||||
if (defaultStore.state.uploadFolder === props.folder.id) {
|
||||
defaultStore.set('uploadFolder', null);
|
||||
}
|
||||
}).catch(err => {
|
||||
switch (err.id) {
|
||||
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
|
||||
os.alert({
|
||||
type: 'error',
|
||||
title: i18n.ts.unableToDelete,
|
||||
text: i18n.ts.hasChildFilesOrFolders,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: i18n.ts.unableToDelete,
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.then(() => {
|
||||
if (defaultStore.state.uploadFolder === props.folder.id) {
|
||||
defaultStore.set("uploadFolder", null);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
switch (err.id) {
|
||||
case "b0fc8a17-963c-405d-bfbc-859a487295e1":
|
||||
os.alert({
|
||||
type: "error",
|
||||
title: i18n.ts.unableToDelete,
|
||||
text: i18n.ts.hasChildFilesOrFolders,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
os.alert({
|
||||
type: "error",
|
||||
text: i18n.ts.unableToDelete,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setAsUploadFolder() {
|
||||
defaultStore.set('uploadFolder', props.folder.id);
|
||||
defaultStore.set("uploadFolder", props.folder.id);
|
||||
}
|
||||
|
||||
function onContextmenu(ev: MouseEvent) {
|
||||
os.contextMenu([{
|
||||
text: i18n.ts.openInWindow,
|
||||
icon: 'ph-copy ph-bold ph-lg',
|
||||
action: () => {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), {
|
||||
initialFolder: props.folder,
|
||||
}, {
|
||||
}, 'closed');
|
||||
},
|
||||
}, null, {
|
||||
text: i18n.ts.rename,
|
||||
icon: 'ph-cursor-text ph-bold ph-lg',
|
||||
action: rename,
|
||||
}, null, {
|
||||
text: i18n.ts.delete,
|
||||
icon: 'ph-trash ph-bold ph-lg',
|
||||
danger: true,
|
||||
action: deleteFolder,
|
||||
}], ev);
|
||||
os.contextMenu(
|
||||
[
|
||||
{
|
||||
text: i18n.ts.openInWindow,
|
||||
icon: "ph-copy ph-bold ph-lg",
|
||||
action: () => {
|
||||
os.popup(
|
||||
defineAsyncComponent(
|
||||
() => import("@/components/MkDriveWindow.vue")
|
||||
),
|
||||
{
|
||||
initialFolder: props.folder,
|
||||
},
|
||||
{},
|
||||
"closed"
|
||||
);
|
||||
},
|
||||
},
|
||||
null,
|
||||
{
|
||||
text: i18n.ts.rename,
|
||||
icon: "ph-cursor-text ph-bold ph-lg",
|
||||
action: rename,
|
||||
},
|
||||
null,
|
||||
{
|
||||
text: i18n.ts.delete,
|
||||
icon: "ph-trash ph-bold ph-lg",
|
||||
danger: true,
|
||||
action: deleteFolder,
|
||||
},
|
||||
],
|
||||
ev
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -257,7 +293,8 @@ function onContextmenu(ev: MouseEvent) {
|
|||
background: var(--driveFolderBg);
|
||||
border-radius: 4px;
|
||||
|
||||
&, * {
|
||||
&,
|
||||
* {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,23 @@
|
|||
<template>
|
||||
<div class="drylbebk"
|
||||
:class="{ draghover }"
|
||||
@click="onClick"
|
||||
@dragover.prevent.stop="onDragover"
|
||||
@dragenter="onDragenter"
|
||||
@dragleave="onDragleave"
|
||||
@drop.stop="onDrop"
|
||||
>
|
||||
<i v-if="folder == null" class="ph-cloud ph-bold ph-lg"></i>
|
||||
<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="drylbebk"
|
||||
:class="{ draghover }"
|
||||
@click="onClick"
|
||||
@dragover.prevent.stop="onDragover"
|
||||
@dragenter="onDragenter"
|
||||
@dragleave="onDragleave"
|
||||
@drop.stop="onDrop"
|
||||
>
|
||||
<i v-if="folder == null" class="ph-cloud ph-bold ph-lg"></i>
|
||||
<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import * as Misskey from 'calckey-js';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { ref } from "vue";
|
||||
import * as Misskey from "calckey-js";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
folder?: Misskey.entities.DriveFolder;
|
||||
|
|
@ -24,17 +25,21 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'move', v?: Misskey.entities.DriveFolder): void;
|
||||
(ev: 'upload', file: File, folder?: Misskey.entities.DriveFolder | null): void;
|
||||
(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
|
||||
(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
|
||||
(ev: "move", v?: Misskey.entities.DriveFolder): void;
|
||||
(
|
||||
ev: "upload",
|
||||
file: File,
|
||||
folder?: Misskey.entities.DriveFolder | null
|
||||
): void;
|
||||
(ev: "removeFile", v: Misskey.entities.DriveFile["id"]): void;
|
||||
(ev: "removeFolder", v: Misskey.entities.DriveFolder["id"]): void;
|
||||
}>();
|
||||
|
||||
const hover = ref(false);
|
||||
const draghover = ref(false);
|
||||
|
||||
function onClick() {
|
||||
emit('move', props.folder);
|
||||
emit("move", props.folder);
|
||||
}
|
||||
|
||||
function onMouseover() {
|
||||
|
|
@ -50,17 +55,19 @@ function onDragover(ev: DragEvent) {
|
|||
|
||||
// このフォルダがルートかつカレントディレクトリならドロップ禁止
|
||||
if (props.folder == null && props.parentFolder == null) {
|
||||
ev.dataTransfer.dropEffect = 'none';
|
||||
ev.dataTransfer.dropEffect = "none";
|
||||
}
|
||||
|
||||
const isFile = ev.dataTransfer.items[0].kind === 'file';
|
||||
const isFile = ev.dataTransfer.items[0].kind === "file";
|
||||
const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
|
||||
const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
|
||||
const isDriveFolder =
|
||||
ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
|
||||
|
||||
if (isFile || isDriveFile || isDriveFolder) {
|
||||
ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
|
||||
ev.dataTransfer.dropEffect =
|
||||
ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
|
||||
} else {
|
||||
ev.dataTransfer.dropEffect = 'none';
|
||||
ev.dataTransfer.dropEffect = "none";
|
||||
}
|
||||
|
||||
return false;
|
||||
|
|
@ -82,33 +89,33 @@ function onDrop(ev: DragEvent) {
|
|||
// ファイルだったら
|
||||
if (ev.dataTransfer.files.length > 0) {
|
||||
for (const file of Array.from(ev.dataTransfer.files)) {
|
||||
emit('upload', file, props.folder);
|
||||
emit("upload", file, props.folder);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
//#region ドライブのファイル
|
||||
const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
|
||||
if (driveFile != null && driveFile !== '') {
|
||||
if (driveFile != null && driveFile !== "") {
|
||||
const file = JSON.parse(driveFile);
|
||||
emit('removeFile', file.id);
|
||||
os.api('drive/files/update', {
|
||||
emit("removeFile", file.id);
|
||||
os.api("drive/files/update", {
|
||||
fileId: file.id,
|
||||
folderId: props.folder ? props.folder.id : null
|
||||
folderId: props.folder ? props.folder.id : null,
|
||||
});
|
||||
}
|
||||
//#endregion
|
||||
|
||||
//#region ドライブのフォルダ
|
||||
const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
|
||||
if (driveFolder != null && driveFolder !== '') {
|
||||
if (driveFolder != null && driveFolder !== "") {
|
||||
const folder = JSON.parse(driveFolder);
|
||||
// 移動先が自分自身ならreject
|
||||
if (props.folder && folder.id === props.folder.id) return;
|
||||
emit('removeFolder', folder.id);
|
||||
os.api('drive/folders/update', {
|
||||
emit("removeFolder", folder.id);
|
||||
os.api("drive/folders/update", {
|
||||
folderId: folder.id,
|
||||
parentId: props.folder ? props.folder.id : null
|
||||
parentId: props.folder ? props.folder.id : null,
|
||||
});
|
||||
}
|
||||
//#endregion
|
||||
|
|
|
|||
|
|
@ -1,121 +1,181 @@
|
|||
<template>
|
||||
<div class="yfudmmck">
|
||||
<nav>
|
||||
<div class="path" @contextmenu.prevent.stop="() => {}">
|
||||
<XNavFolder
|
||||
:class="{ current: folder == null }"
|
||||
:parent-folder="folder"
|
||||
@move="move"
|
||||
@upload="upload"
|
||||
@removeFile="removeFile"
|
||||
@removeFolder="removeFolder"
|
||||
/>
|
||||
<template v-for="f in hierarchyFolders">
|
||||
<span class="separator"><i class="ph-caret-right ph-bold ph-lg"></i></span>
|
||||
<div class="yfudmmck">
|
||||
<nav>
|
||||
<div class="path" @contextmenu.prevent.stop="() => {}">
|
||||
<XNavFolder
|
||||
:folder="f"
|
||||
:class="{ current: folder == null }"
|
||||
:parent-folder="folder"
|
||||
@move="move"
|
||||
@upload="upload"
|
||||
@removeFile="removeFile"
|
||||
@removeFolder="removeFolder"
|
||||
/>
|
||||
</template>
|
||||
<span v-if="folder != null" class="separator"><i class="ph-caret-right ph-bold ph-lg"></i></span>
|
||||
<span v-if="folder != null" class="folder current">{{ folder.name }}</span>
|
||||
<template v-for="f in hierarchyFolders">
|
||||
<span class="separator"
|
||||
><i class="ph-caret-right ph-bold ph-lg"></i
|
||||
></span>
|
||||
<XNavFolder
|
||||
:folder="f"
|
||||
:parent-folder="folder"
|
||||
@move="move"
|
||||
@upload="upload"
|
||||
@removeFile="removeFile"
|
||||
@removeFolder="removeFolder"
|
||||
/>
|
||||
</template>
|
||||
<span v-if="folder != null" class="separator"
|
||||
><i class="ph-caret-right ph-bold ph-lg"></i
|
||||
></span>
|
||||
<span v-if="folder != null" class="folder current">{{
|
||||
folder.name
|
||||
}}</span>
|
||||
</div>
|
||||
<button class="menu _button" @click="showMenu">
|
||||
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</nav>
|
||||
<div
|
||||
ref="main"
|
||||
class="main"
|
||||
:class="{ uploading: uploadings.length > 0, fetching }"
|
||||
@dragover.prevent.stop="onDragover"
|
||||
@dragenter="onDragenter"
|
||||
@dragleave="onDragleave"
|
||||
@drop.prevent.stop="onDrop"
|
||||
@contextmenu.stop="onContextmenu"
|
||||
>
|
||||
<div ref="contents" class="contents">
|
||||
<div
|
||||
v-show="folders.length > 0"
|
||||
ref="foldersContainer"
|
||||
class="folders"
|
||||
>
|
||||
<XFolder
|
||||
v-for="(f, i) in folders"
|
||||
:key="f.id"
|
||||
v-anim="i"
|
||||
class="folder"
|
||||
:folder="f"
|
||||
:select-mode="select === 'folder'"
|
||||
:is-selected="
|
||||
selectedFolders.some((x) => x.id === f.id)
|
||||
"
|
||||
@chosen="chooseFolder"
|
||||
@move="move"
|
||||
@upload="upload"
|
||||
@removeFile="removeFile"
|
||||
@removeFolder="removeFolder"
|
||||
@dragstart="isDragSource = true"
|
||||
@dragend="isDragSource = false"
|
||||
/>
|
||||
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
|
||||
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
|
||||
<MkButton v-if="moreFolders" ref="moreFolders">{{
|
||||
i18n.ts.loadMore
|
||||
}}</MkButton>
|
||||
</div>
|
||||
<div
|
||||
v-show="files.length > 0"
|
||||
ref="filesContainer"
|
||||
class="files"
|
||||
>
|
||||
<XFile
|
||||
v-for="(file, i) in files"
|
||||
:key="file.id"
|
||||
v-anim="i"
|
||||
class="file"
|
||||
:file="file"
|
||||
:select-mode="select === 'file'"
|
||||
:is-selected="
|
||||
selectedFiles.some((x) => x.id === file.id)
|
||||
"
|
||||
@chosen="chooseFile"
|
||||
@dragstart="isDragSource = true"
|
||||
@dragend="isDragSource = false"
|
||||
/>
|
||||
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
|
||||
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
|
||||
<MkButton
|
||||
v-show="moreFiles"
|
||||
ref="loadMoreFiles"
|
||||
@click="fetchMoreFiles"
|
||||
>{{ i18n.ts.loadMore }}</MkButton
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="files.length == 0 && folders.length == 0 && !fetching"
|
||||
class="empty"
|
||||
>
|
||||
<p v-if="draghover">{{ i18n.t("empty-draghover") }}</p>
|
||||
<p v-if="!draghover && folder == null">
|
||||
<strong>{{ i18n.ts.emptyDrive }}</strong
|
||||
><br />{{ i18n.t("empty-drive-description") }}
|
||||
</p>
|
||||
<p v-if="!draghover && folder != null">
|
||||
{{ i18n.ts.emptyFolder }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<MkLoading v-if="fetching" />
|
||||
</div>
|
||||
<button class="menu _button" @click="showMenu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button>
|
||||
</nav>
|
||||
<div
|
||||
ref="main" class="main"
|
||||
:class="{ uploading: uploadings.length > 0, fetching }"
|
||||
@dragover.prevent.stop="onDragover"
|
||||
@dragenter="onDragenter"
|
||||
@dragleave="onDragleave"
|
||||
@drop.prevent.stop="onDrop"
|
||||
@contextmenu.stop="onContextmenu"
|
||||
>
|
||||
<div ref="contents" class="contents">
|
||||
<div v-show="folders.length > 0" ref="foldersContainer" class="folders">
|
||||
<XFolder
|
||||
v-for="(f, i) in folders"
|
||||
:key="f.id"
|
||||
v-anim="i"
|
||||
class="folder"
|
||||
:folder="f"
|
||||
:select-mode="select === 'folder'"
|
||||
:is-selected="selectedFolders.some(x => x.id === f.id)"
|
||||
@chosen="chooseFolder"
|
||||
@move="move"
|
||||
@upload="upload"
|
||||
@removeFile="removeFile"
|
||||
@removeFolder="removeFolder"
|
||||
@dragstart="isDragSource = true"
|
||||
@dragend="isDragSource = false"
|
||||
/>
|
||||
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
|
||||
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
|
||||
<MkButton v-if="moreFolders" ref="moreFolders">{{ i18n.ts.loadMore }}</MkButton>
|
||||
</div>
|
||||
<div v-show="files.length > 0" ref="filesContainer" class="files">
|
||||
<XFile
|
||||
v-for="(file, i) in files"
|
||||
:key="file.id"
|
||||
v-anim="i"
|
||||
class="file"
|
||||
:file="file"
|
||||
:select-mode="select === 'file'"
|
||||
:is-selected="selectedFiles.some(x => x.id === file.id)"
|
||||
@chosen="chooseFile"
|
||||
@dragstart="isDragSource = true"
|
||||
@dragend="isDragSource = false"
|
||||
/>
|
||||
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
|
||||
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
|
||||
<MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ i18n.ts.loadMore }}</MkButton>
|
||||
</div>
|
||||
<div v-if="files.length == 0 && folders.length == 0 && !fetching" class="empty">
|
||||
<p v-if="draghover">{{ i18n.t('empty-draghover') }}</p>
|
||||
<p v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.t('empty-drive-description') }}</p>
|
||||
<p v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<MkLoading v-if="fetching"/>
|
||||
<div v-if="draghover" class="dropzone"></div>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept="*/*"
|
||||
multiple
|
||||
tabindex="-1"
|
||||
@change="onChangeFileInput"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="draghover" class="dropzone"></div>
|
||||
<input ref="fileInput" type="file" accept="*/*" multiple tabindex="-1" @change="onChangeFileInput"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import * as Misskey from 'calckey-js';
|
||||
import MkButton from './MkButton.vue';
|
||||
import XNavFolder from '@/components/MkDrive.navFolder.vue';
|
||||
import XFolder from '@/components/MkDrive.folder.vue';
|
||||
import XFile from '@/components/MkDrive.file.vue';
|
||||
import * as os from '@/os';
|
||||
import { stream } from '@/stream';
|
||||
import { defaultStore } from '@/store';
|
||||
import { i18n } from '@/i18n';
|
||||
import { uploadFile, uploads } from '@/scripts/upload';
|
||||
import {
|
||||
markRaw,
|
||||
nextTick,
|
||||
onActivated,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
ref,
|
||||
watch,
|
||||
} from "vue";
|
||||
import * as Misskey from "calckey-js";
|
||||
import MkButton from "./MkButton.vue";
|
||||
import XNavFolder from "@/components/MkDrive.navFolder.vue";
|
||||
import XFolder from "@/components/MkDrive.folder.vue";
|
||||
import XFile from "@/components/MkDrive.file.vue";
|
||||
import * as os from "@/os";
|
||||
import { stream } from "@/stream";
|
||||
import { defaultStore } from "@/store";
|
||||
import { i18n } from "@/i18n";
|
||||
import { uploadFile, uploads } from "@/scripts/upload";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
initialFolder?: Misskey.entities.DriveFolder;
|
||||
type?: string;
|
||||
multiple?: boolean;
|
||||
select?: 'file' | 'folder' | null;
|
||||
}>(), {
|
||||
multiple: false,
|
||||
select: null,
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
initialFolder?: Misskey.entities.DriveFolder;
|
||||
type?: string;
|
||||
multiple?: boolean;
|
||||
select?: "file" | "folder" | null;
|
||||
}>(),
|
||||
{
|
||||
multiple: false,
|
||||
select: null,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
|
||||
(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
|
||||
(ev: 'move-root'): void;
|
||||
(ev: 'cd', v: Misskey.entities.DriveFolder | null): void;
|
||||
(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
|
||||
(
|
||||
ev: "selected",
|
||||
v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder
|
||||
): void;
|
||||
(
|
||||
ev: "change-selection",
|
||||
v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]
|
||||
): void;
|
||||
(ev: "move-root"): void;
|
||||
(ev: "cd", v: Misskey.entities.DriveFolder | null): void;
|
||||
(ev: "open-folder", v: Misskey.entities.DriveFolder): void;
|
||||
}>();
|
||||
|
||||
const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
|
||||
|
|
@ -130,7 +190,7 @@ const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
|
|||
const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
|
||||
const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
|
||||
const uploadings = uploads;
|
||||
const connection = stream.useChannel('drive');
|
||||
const connection = stream.useChannel("drive");
|
||||
const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
|
||||
|
||||
// ドロップされようとしているか
|
||||
|
|
@ -143,10 +203,14 @@ const isDragSource = ref(false);
|
|||
const fetching = ref(true);
|
||||
|
||||
const ilFilesObserver = new IntersectionObserver(
|
||||
(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles(),
|
||||
(entries) =>
|
||||
entries.some((entry) => entry.isIntersecting) &&
|
||||
!fetching.value &&
|
||||
moreFiles.value &&
|
||||
fetchMoreFiles()
|
||||
);
|
||||
|
||||
watch(folder, () => emit('cd', folder.value));
|
||||
watch(folder, () => emit("cd", folder.value));
|
||||
|
||||
function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
|
||||
addFile(file, true);
|
||||
|
|
@ -165,11 +229,15 @@ function onStreamDriveFileDeleted(fileId: string) {
|
|||
removeFile(fileId);
|
||||
}
|
||||
|
||||
function onStreamDriveFolderCreated(createdFolder: Misskey.entities.DriveFolder) {
|
||||
function onStreamDriveFolderCreated(
|
||||
createdFolder: Misskey.entities.DriveFolder
|
||||
) {
|
||||
addFolder(createdFolder, true);
|
||||
}
|
||||
|
||||
function onStreamDriveFolderUpdated(updatedFolder: Misskey.entities.DriveFolder) {
|
||||
function onStreamDriveFolderUpdated(
|
||||
updatedFolder: Misskey.entities.DriveFolder
|
||||
) {
|
||||
const current = folder.value ? folder.value.id : null;
|
||||
if (current !== updatedFolder.parentId) {
|
||||
removeFolder(updatedFolder);
|
||||
|
|
@ -188,17 +256,19 @@ function onDragover(ev: DragEvent): any {
|
|||
// ドラッグ元が自分自身の所有するアイテムだったら
|
||||
if (isDragSource.value) {
|
||||
// 自分自身にはドロップさせない
|
||||
ev.dataTransfer.dropEffect = 'none';
|
||||
ev.dataTransfer.dropEffect = "none";
|
||||
return;
|
||||
}
|
||||
|
||||
const isFile = ev.dataTransfer.items[0].kind === 'file';
|
||||
const isFile = ev.dataTransfer.items[0].kind === "file";
|
||||
const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
|
||||
const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
|
||||
const isDriveFolder =
|
||||
ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
|
||||
if (isFile || isDriveFile || isDriveFolder) {
|
||||
ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
|
||||
ev.dataTransfer.dropEffect =
|
||||
ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
|
||||
} else {
|
||||
ev.dataTransfer.dropEffect = 'none';
|
||||
ev.dataTransfer.dropEffect = "none";
|
||||
}
|
||||
|
||||
return false;
|
||||
|
|
@ -227,11 +297,11 @@ function onDrop(ev: DragEvent): any {
|
|||
|
||||
//#region ドライブのファイル
|
||||
const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
|
||||
if (driveFile != null && driveFile !== '') {
|
||||
if (driveFile != null && driveFile !== "") {
|
||||
const file = JSON.parse(driveFile);
|
||||
if (files.value.some(f => f.id === file.id)) return;
|
||||
if (files.value.some((f) => f.id === file.id)) return;
|
||||
removeFile(file.id);
|
||||
os.api('drive/files/update', {
|
||||
os.api("drive/files/update", {
|
||||
fileId: file.id,
|
||||
folderId: folder.value ? folder.value.id : null,
|
||||
});
|
||||
|
|
@ -240,33 +310,35 @@ function onDrop(ev: DragEvent): any {
|
|||
|
||||
//#region ドライブのフォルダ
|
||||
const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
|
||||
if (driveFolder != null && driveFolder !== '') {
|
||||
if (driveFolder != null && driveFolder !== "") {
|
||||
const droppedFolder = JSON.parse(driveFolder);
|
||||
|
||||
// 移動先が自分自身ならreject
|
||||
if (folder.value && droppedFolder.id === folder.value.id) return false;
|
||||
if (folders.value.some(f => f.id === droppedFolder.id)) return false;
|
||||
if (folders.value.some((f) => f.id === droppedFolder.id)) return false;
|
||||
removeFolder(droppedFolder.id);
|
||||
os.api('drive/folders/update', {
|
||||
os.api("drive/folders/update", {
|
||||
folderId: droppedFolder.id,
|
||||
parentId: folder.value ? folder.value.id : null,
|
||||
}).then(() => {
|
||||
// noop
|
||||
}).catch(err => {
|
||||
switch (err) {
|
||||
case 'detected-circular-definition':
|
||||
os.alert({
|
||||
title: i18n.ts.unableToProcess,
|
||||
text: i18n.ts.circularReferenceFolder,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: i18n.ts.somethingHappened,
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.then(() => {
|
||||
// noop
|
||||
})
|
||||
.catch((err) => {
|
||||
switch (err) {
|
||||
case "detected-circular-definition":
|
||||
os.alert({
|
||||
title: i18n.ts.unableToProcess,
|
||||
text: i18n.ts.circularReferenceFolder,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
os.alert({
|
||||
type: "error",
|
||||
text: i18n.ts.somethingHappened,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
//#endregion
|
||||
}
|
||||
|
|
@ -278,11 +350,11 @@ function selectLocalFile() {
|
|||
function urlUpload() {
|
||||
os.inputText({
|
||||
title: i18n.ts.uploadFromUrl,
|
||||
type: 'url',
|
||||
type: "url",
|
||||
placeholder: i18n.ts.uploadFromUrlDescription,
|
||||
}).then(({ canceled, result: url }) => {
|
||||
if (canceled || !url) return;
|
||||
os.api('drive/files/upload-from-url', {
|
||||
os.api("drive/files/upload-from-url", {
|
||||
url: url,
|
||||
folderId: folder.value ? folder.value.id : undefined,
|
||||
});
|
||||
|
|
@ -300,10 +372,10 @@ function createFolder() {
|
|||
placeholder: i18n.ts.folderName,
|
||||
}).then(({ canceled, result: name }) => {
|
||||
if (canceled) return;
|
||||
os.api('drive/folders/create', {
|
||||
os.api("drive/folders/create", {
|
||||
name: name,
|
||||
parentId: folder.value ? folder.value.id : undefined,
|
||||
}).then(createdFolder => {
|
||||
}).then((createdFolder) => {
|
||||
addFolder(createdFolder, true);
|
||||
});
|
||||
});
|
||||
|
|
@ -316,10 +388,10 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
|
|||
default: folderToRename.name,
|
||||
}).then(({ canceled, result: name }) => {
|
||||
if (canceled) return;
|
||||
os.api('drive/folders/update', {
|
||||
os.api("drive/folders/update", {
|
||||
folderId: folderToRename.id,
|
||||
name: name,
|
||||
}).then(updatedFolder => {
|
||||
}).then((updatedFolder) => {
|
||||
// FIXME: 画面を更新するために自分自身に移動
|
||||
move(updatedFolder);
|
||||
});
|
||||
|
|
@ -327,27 +399,29 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
|
|||
}
|
||||
|
||||
function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
|
||||
os.api('drive/folders/delete', {
|
||||
os.api("drive/folders/delete", {
|
||||
folderId: folderToDelete.id,
|
||||
}).then(() => {
|
||||
// 削除時に親フォルダに移動
|
||||
move(folderToDelete.parentId);
|
||||
}).catch(err => {
|
||||
switch (err.id) {
|
||||
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
|
||||
os.alert({
|
||||
type: 'error',
|
||||
title: i18n.ts.unableToDelete,
|
||||
text: i18n.ts.hasChildFilesOrFolders,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: i18n.ts.unableToDelete,
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.then(() => {
|
||||
// 削除時に親フォルダに移動
|
||||
move(folderToDelete.parentId);
|
||||
})
|
||||
.catch((err) => {
|
||||
switch (err.id) {
|
||||
case "b0fc8a17-963c-405d-bfbc-859a487295e1":
|
||||
os.alert({
|
||||
type: "error",
|
||||
title: i18n.ts.unableToDelete,
|
||||
text: i18n.ts.hasChildFilesOrFolders,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
os.alert({
|
||||
type: "error",
|
||||
text: i18n.ts.unableToDelete,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onChangeFileInput() {
|
||||
|
|
@ -357,46 +431,62 @@ function onChangeFileInput() {
|
|||
}
|
||||
}
|
||||
|
||||
function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null) {
|
||||
uploadFile(file, (folderToUpload && typeof folderToUpload === 'object') ? folderToUpload.id : null, undefined, keepOriginal.value).then(res => {
|
||||
function upload(
|
||||
file: File,
|
||||
folderToUpload?: Misskey.entities.DriveFolder | null
|
||||
) {
|
||||
uploadFile(
|
||||
file,
|
||||
folderToUpload && typeof folderToUpload === "object"
|
||||
? folderToUpload.id
|
||||
: null,
|
||||
undefined,
|
||||
keepOriginal.value
|
||||
).then((res) => {
|
||||
addFile(res, true);
|
||||
});
|
||||
}
|
||||
|
||||
function chooseFile(file: Misskey.entities.DriveFile) {
|
||||
const isAlreadySelected = selectedFiles.value.some(f => f.id === file.id);
|
||||
const isAlreadySelected = selectedFiles.value.some((f) => f.id === file.id);
|
||||
if (props.multiple) {
|
||||
if (isAlreadySelected) {
|
||||
selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
|
||||
selectedFiles.value = selectedFiles.value.filter(
|
||||
(f) => f.id !== file.id
|
||||
);
|
||||
} else {
|
||||
selectedFiles.value.push(file);
|
||||
}
|
||||
emit('change-selection', selectedFiles.value);
|
||||
emit("change-selection", selectedFiles.value);
|
||||
} else {
|
||||
if (isAlreadySelected) {
|
||||
emit('selected', file);
|
||||
emit("selected", file);
|
||||
} else {
|
||||
selectedFiles.value = [file];
|
||||
emit('change-selection', [file]);
|
||||
emit("change-selection", [file]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
|
||||
const isAlreadySelected = selectedFolders.value.some(f => f.id === folderToChoose.id);
|
||||
const isAlreadySelected = selectedFolders.value.some(
|
||||
(f) => f.id === folderToChoose.id
|
||||
);
|
||||
if (props.multiple) {
|
||||
if (isAlreadySelected) {
|
||||
selectedFolders.value = selectedFolders.value.filter(f => f.id !== folderToChoose.id);
|
||||
selectedFolders.value = selectedFolders.value.filter(
|
||||
(f) => f.id !== folderToChoose.id
|
||||
);
|
||||
} else {
|
||||
selectedFolders.value.push(folderToChoose);
|
||||
}
|
||||
emit('change-selection', selectedFolders.value);
|
||||
emit("change-selection", selectedFolders.value);
|
||||
} else {
|
||||
if (isAlreadySelected) {
|
||||
emit('selected', folderToChoose);
|
||||
emit("selected", folderToChoose);
|
||||
} else {
|
||||
selectedFolders.value = [folderToChoose];
|
||||
emit('change-selection', [folderToChoose]);
|
||||
emit("change-selection", [folderToChoose]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -405,26 +495,26 @@ function move(target?: Misskey.entities.DriveFolder) {
|
|||
if (!target) {
|
||||
goRoot();
|
||||
return;
|
||||
} else if (typeof target === 'object') {
|
||||
} else if (typeof target === "object") {
|
||||
target = target.id;
|
||||
}
|
||||
|
||||
fetching.value = true;
|
||||
|
||||
os.api('drive/folders/show', {
|
||||
os.api("drive/folders/show", {
|
||||
folderId: target,
|
||||
}).then(folderToMove => {
|
||||
}).then((folderToMove) => {
|
||||
folder.value = folderToMove;
|
||||
hierarchyFolders.value = [];
|
||||
|
||||
const dive = folderToDive => {
|
||||
const dive = (folderToDive) => {
|
||||
hierarchyFolders.value.unshift(folderToDive);
|
||||
if (folderToDive.parent) dive(folderToDive.parent);
|
||||
};
|
||||
|
||||
if (folderToMove.parent) dive(folderToMove.parent);
|
||||
|
||||
emit('open-folder', folderToMove);
|
||||
emit("open-folder", folderToMove);
|
||||
fetch();
|
||||
});
|
||||
}
|
||||
|
|
@ -433,8 +523,8 @@ function addFolder(folderToAdd: Misskey.entities.DriveFolder, unshift = false) {
|
|||
const current = folder.value ? folder.value.id : null;
|
||||
if (current !== folderToAdd.parentId) return;
|
||||
|
||||
if (folders.value.some(f => f.id === folderToAdd.id)) {
|
||||
const exist = folders.value.map(f => f.id).indexOf(folderToAdd.id);
|
||||
if (folders.value.some((f) => f.id === folderToAdd.id)) {
|
||||
const exist = folders.value.map((f) => f.id).indexOf(folderToAdd.id);
|
||||
folders.value[exist] = folderToAdd;
|
||||
return;
|
||||
}
|
||||
|
|
@ -450,8 +540,8 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
|
|||
const current = folder.value ? folder.value.id : null;
|
||||
if (current !== fileToAdd.folderId) return;
|
||||
|
||||
if (files.value.some(f => f.id === fileToAdd.id)) {
|
||||
const exist = files.value.map(f => f.id).indexOf(fileToAdd.id);
|
||||
if (files.value.some((f) => f.id === fileToAdd.id)) {
|
||||
const exist = files.value.map((f) => f.id).indexOf(fileToAdd.id);
|
||||
files.value[exist] = fileToAdd;
|
||||
return;
|
||||
}
|
||||
|
|
@ -464,13 +554,14 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
|
|||
}
|
||||
|
||||
function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
|
||||
const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
|
||||
folders.value = folders.value.filter(f => f.id !== folderIdToRemove);
|
||||
const folderIdToRemove =
|
||||
typeof folderToRemove === "object" ? folderToRemove.id : folderToRemove;
|
||||
folders.value = folders.value.filter((f) => f.id !== folderIdToRemove);
|
||||
}
|
||||
|
||||
function removeFile(file: Misskey.entities.DriveFile | string) {
|
||||
const fileId = typeof file === 'object' ? file.id : file;
|
||||
files.value = files.value.filter(f => f.id !== fileId);
|
||||
const fileId = typeof file === "object" ? file.id : file;
|
||||
files.value = files.value.filter((f) => f.id !== fileId);
|
||||
}
|
||||
|
||||
function appendFile(file: Misskey.entities.DriveFile) {
|
||||
|
|
@ -495,7 +586,7 @@ function goRoot() {
|
|||
|
||||
folder.value = null;
|
||||
hierarchyFolders.value = [];
|
||||
emit('move-root');
|
||||
emit("move-root");
|
||||
fetch();
|
||||
}
|
||||
|
||||
|
|
@ -509,30 +600,37 @@ async function fetch() {
|
|||
const foldersMax = 30;
|
||||
const filesMax = 30;
|
||||
|
||||
const foldersPromise = os.api('drive/folders', {
|
||||
folderId: folder.value ? folder.value.id : null,
|
||||
limit: foldersMax + 1,
|
||||
}).then(fetchedFolders => {
|
||||
if (fetchedFolders.length === foldersMax + 1) {
|
||||
moreFolders.value = true;
|
||||
fetchedFolders.pop();
|
||||
}
|
||||
return fetchedFolders;
|
||||
});
|
||||
const foldersPromise = os
|
||||
.api("drive/folders", {
|
||||
folderId: folder.value ? folder.value.id : null,
|
||||
limit: foldersMax + 1,
|
||||
})
|
||||
.then((fetchedFolders) => {
|
||||
if (fetchedFolders.length === foldersMax + 1) {
|
||||
moreFolders.value = true;
|
||||
fetchedFolders.pop();
|
||||
}
|
||||
return fetchedFolders;
|
||||
});
|
||||
|
||||
const filesPromise = os.api('drive/files', {
|
||||
folderId: folder.value ? folder.value.id : null,
|
||||
type: props.type,
|
||||
limit: filesMax + 1,
|
||||
}).then(fetchedFiles => {
|
||||
if (fetchedFiles.length === filesMax + 1) {
|
||||
moreFiles.value = true;
|
||||
fetchedFiles.pop();
|
||||
}
|
||||
return fetchedFiles;
|
||||
});
|
||||
const filesPromise = os
|
||||
.api("drive/files", {
|
||||
folderId: folder.value ? folder.value.id : null,
|
||||
type: props.type,
|
||||
limit: filesMax + 1,
|
||||
})
|
||||
.then((fetchedFiles) => {
|
||||
if (fetchedFiles.length === filesMax + 1) {
|
||||
moreFiles.value = true;
|
||||
fetchedFiles.pop();
|
||||
}
|
||||
return fetchedFiles;
|
||||
});
|
||||
|
||||
const [fetchedFolders, fetchedFiles] = await Promise.all([foldersPromise, filesPromise]);
|
||||
const [fetchedFolders, fetchedFiles] = await Promise.all([
|
||||
foldersPromise,
|
||||
filesPromise,
|
||||
]);
|
||||
|
||||
for (const x of fetchedFolders) appendFolder(x);
|
||||
for (const x of fetchedFiles) appendFile(x);
|
||||
|
|
@ -546,12 +644,12 @@ function fetchMoreFiles() {
|
|||
const max = 30;
|
||||
|
||||
// ファイル一覧取得
|
||||
os.api('drive/files', {
|
||||
os.api("drive/files", {
|
||||
folderId: folder.value ? folder.value.id : null,
|
||||
type: props.type,
|
||||
untilId: files.value[files.value.length - 1].id,
|
||||
limit: max + 1,
|
||||
}).then(files => {
|
||||
}).then((files) => {
|
||||
if (files.length === max + 1) {
|
||||
moreFiles.value = true;
|
||||
files.pop();
|
||||
|
|
@ -564,41 +662,71 @@ function fetchMoreFiles() {
|
|||
}
|
||||
|
||||
function getMenu() {
|
||||
return [{
|
||||
type: 'switch',
|
||||
text: i18n.ts.keepOriginalUploading,
|
||||
ref: keepOriginal,
|
||||
}, null, {
|
||||
text: i18n.ts.addFile,
|
||||
type: 'label',
|
||||
}, {
|
||||
text: i18n.ts.upload,
|
||||
icon: 'ph-upload-simple ph-bold ph-lg',
|
||||
action: () => { selectLocalFile(); },
|
||||
}, {
|
||||
text: i18n.ts.fromUrl,
|
||||
icon: 'ph-link-simple ph-bold ph-lg',
|
||||
action: () => { urlUpload(); },
|
||||
}, null, {
|
||||
text: folder.value ? folder.value.name : i18n.ts.drive,
|
||||
type: 'label',
|
||||
}, folder.value ? {
|
||||
text: i18n.ts.renameFolder,
|
||||
icon: 'ph-cursor-text ph-bold ph-lg',
|
||||
action: () => { renameFolder(folder.value); },
|
||||
} : undefined, folder.value ? {
|
||||
text: i18n.ts.deleteFolder,
|
||||
icon: 'ph-trash ph-bold ph-lg',
|
||||
action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
|
||||
} : undefined, {
|
||||
text: i18n.ts.createFolder,
|
||||
icon: 'ph-folder-notch-plus ph-bold ph-lg',
|
||||
action: () => { createFolder(); },
|
||||
}];
|
||||
return [
|
||||
{
|
||||
type: "switch",
|
||||
text: i18n.ts.keepOriginalUploading,
|
||||
ref: keepOriginal,
|
||||
},
|
||||
null,
|
||||
{
|
||||
text: i18n.ts.addFile,
|
||||
type: "label",
|
||||
},
|
||||
{
|
||||
text: i18n.ts.upload,
|
||||
icon: "ph-upload-simple ph-bold ph-lg",
|
||||
action: () => {
|
||||
selectLocalFile();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: i18n.ts.fromUrl,
|
||||
icon: "ph-link-simple ph-bold ph-lg",
|
||||
action: () => {
|
||||
urlUpload();
|
||||
},
|
||||
},
|
||||
null,
|
||||
{
|
||||
text: folder.value ? folder.value.name : i18n.ts.drive,
|
||||
type: "label",
|
||||
},
|
||||
folder.value
|
||||
? {
|
||||
text: i18n.ts.renameFolder,
|
||||
icon: "ph-cursor-text ph-bold ph-lg",
|
||||
action: () => {
|
||||
renameFolder(folder.value);
|
||||
},
|
||||
}
|
||||
: undefined,
|
||||
folder.value
|
||||
? {
|
||||
text: i18n.ts.deleteFolder,
|
||||
icon: "ph-trash ph-bold ph-lg",
|
||||
action: () => {
|
||||
deleteFolder(
|
||||
folder.value as Misskey.entities.DriveFolder
|
||||
);
|
||||
},
|
||||
}
|
||||
: undefined,
|
||||
{
|
||||
text: i18n.ts.createFolder,
|
||||
icon: "ph-folder-notch-plus ph-bold ph-lg",
|
||||
action: () => {
|
||||
createFolder();
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function showMenu(ev: MouseEvent) {
|
||||
os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
|
||||
os.popupMenu(
|
||||
getMenu(),
|
||||
(ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined
|
||||
);
|
||||
}
|
||||
|
||||
function onContextmenu(ev: MouseEvent) {
|
||||
|
|
@ -612,12 +740,12 @@ onMounted(() => {
|
|||
});
|
||||
}
|
||||
|
||||
connection.on('fileCreated', onStreamDriveFileCreated);
|
||||
connection.on('fileUpdated', onStreamDriveFileUpdated);
|
||||
connection.on('fileDeleted', onStreamDriveFileDeleted);
|
||||
connection.on('folderCreated', onStreamDriveFolderCreated);
|
||||
connection.on('folderUpdated', onStreamDriveFolderUpdated);
|
||||
connection.on('folderDeleted', onStreamDriveFolderDeleted);
|
||||
connection.on("fileCreated", onStreamDriveFileCreated);
|
||||
connection.on("fileUpdated", onStreamDriveFileUpdated);
|
||||
connection.on("fileDeleted", onStreamDriveFileDeleted);
|
||||
connection.on("folderCreated", onStreamDriveFolderCreated);
|
||||
connection.on("folderUpdated", onStreamDriveFolderUpdated);
|
||||
connection.on("folderDeleted", onStreamDriveFolderDeleted);
|
||||
|
||||
if (props.initialFolder) {
|
||||
move(props.initialFolder);
|
||||
|
|
@ -656,7 +784,8 @@ onBeforeUnmount(() => {
|
|||
font-size: 0.9em;
|
||||
box-shadow: 0 1px 0 var(--divider);
|
||||
|
||||
&, * {
|
||||
&,
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -714,7 +843,8 @@ onBeforeUnmount(() => {
|
|||
overflow: auto;
|
||||
padding: var(--margin);
|
||||
|
||||
&, * {
|
||||
&,
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -735,7 +865,6 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
|
||||
> .contents {
|
||||
|
||||
> .folders,
|
||||
> .files {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,48 @@
|
|||
<template>
|
||||
<div ref="thumbnail" class="zdjebgpv">
|
||||
<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
|
||||
<i v-else-if="is === 'image'" class="ph-file-image ph-bold ph-lg icon"></i>
|
||||
<i v-else-if="is === 'video'" class="ph-file-video ph-bold ph-lg icon"></i>
|
||||
<i v-else-if="is === 'audio' || is === 'midi'" class="ph-file-audio ph-bold ph-lg icon"></i>
|
||||
<i v-else-if="is === 'csv'" class="ph-file-csv ph-bold ph-lg icon"></i>
|
||||
<i v-else-if="is === 'pdf'" class="ph-file-pdf ph-bold ph-lg icon"></i>
|
||||
<i v-else-if="is === 'textfile'" class="ph-file-text ph-bold ph-lg icon"></i>
|
||||
<i v-else-if="is === 'archive'" class="ph-file-zip ph-bold ph-lg icon"></i>
|
||||
<i v-else class="ph-file ph-bold ph-lg icon"></i>
|
||||
<div ref="thumbnail" class="zdjebgpv">
|
||||
<ImgWithBlurhash
|
||||
v-if="isThumbnailAvailable"
|
||||
:hash="file.blurhash"
|
||||
:src="file.thumbnailUrl"
|
||||
:alt="file.name"
|
||||
:title="file.name"
|
||||
:cover="fit !== 'contain'"
|
||||
/>
|
||||
<i
|
||||
v-else-if="is === 'image'"
|
||||
class="ph-file-image ph-bold ph-lg icon"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="is === 'video'"
|
||||
class="ph-file-video ph-bold ph-lg icon"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="is === 'audio' || is === 'midi'"
|
||||
class="ph-file-audio ph-bold ph-lg icon"
|
||||
></i>
|
||||
<i v-else-if="is === 'csv'" class="ph-file-csv ph-bold ph-lg icon"></i>
|
||||
<i v-else-if="is === 'pdf'" class="ph-file-pdf ph-bold ph-lg icon"></i>
|
||||
<i
|
||||
v-else-if="is === 'textfile'"
|
||||
class="ph-file-text ph-bold ph-lg icon"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="is === 'archive'"
|
||||
class="ph-file-zip ph-bold ph-lg icon"
|
||||
></i>
|
||||
<i v-else class="ph-file ph-bold ph-lg icon"></i>
|
||||
|
||||
<i v-if="isThumbnailAvailable && is === 'video'" class="ph-file-video ph-bold ph-lg icon-sub"></i>
|
||||
</div>
|
||||
<i
|
||||
v-if="isThumbnailAvailable && is === 'video'"
|
||||
class="ph-file-video ph-bold ph-lg icon-sub"
|
||||
></i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import type * as Misskey from 'calckey-js';
|
||||
import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
|
||||
import { computed } from "vue";
|
||||
import type * as Misskey from "calckey-js";
|
||||
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
file: Misskey.entities.DriveFile;
|
||||
|
|
@ -25,30 +50,33 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const is = computed(() => {
|
||||
if (props.file.type.startsWith('image/')) return 'image';
|
||||
if (props.file.type.startsWith('video/')) return 'video';
|
||||
if (props.file.type === 'audio/midi') return 'midi';
|
||||
if (props.file.type.startsWith('audio/')) return 'audio';
|
||||
if (props.file.type.endsWith('/csv')) return 'csv';
|
||||
if (props.file.type.endsWith('/pdf')) return 'pdf';
|
||||
if (props.file.type.startsWith('text/')) return 'textfile';
|
||||
if ([
|
||||
'application/zip',
|
||||
'application/x-cpio',
|
||||
'application/x-bzip',
|
||||
'application/x-bzip2',
|
||||
'application/java-archive',
|
||||
'application/x-rar-compressed',
|
||||
'application/x-tar',
|
||||
'application/gzip',
|
||||
'application/x-7z-compressed',
|
||||
].some(archiveType => archiveType === props.file.type)) return 'archive';
|
||||
return 'unknown';
|
||||
if (props.file.type.startsWith("image/")) return "image";
|
||||
if (props.file.type.startsWith("video/")) return "video";
|
||||
if (props.file.type === "audio/midi") return "midi";
|
||||
if (props.file.type.startsWith("audio/")) return "audio";
|
||||
if (props.file.type.endsWith("/csv")) return "csv";
|
||||
if (props.file.type.endsWith("/pdf")) return "pdf";
|
||||
if (props.file.type.startsWith("text/")) return "textfile";
|
||||
if (
|
||||
[
|
||||
"application/zip",
|
||||
"application/x-cpio",
|
||||
"application/x-bzip",
|
||||
"application/x-bzip2",
|
||||
"application/java-archive",
|
||||
"application/x-rar-compressed",
|
||||
"application/x-tar",
|
||||
"application/gzip",
|
||||
"application/x-7z-compressed",
|
||||
].some((archiveType) => archiveType === props.file.type)
|
||||
)
|
||||
return "archive";
|
||||
return "unknown";
|
||||
});
|
||||
|
||||
const isThumbnailAvailable = computed(() => {
|
||||
return props.file.thumbnailUrl
|
||||
? (is.value === 'image' as const || is.value === 'video')
|
||||
? is.value === ("image" as const) || is.value === "video"
|
||||
: false;
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,61 @@
|
|||
<template>
|
||||
<XModalWindow
|
||||
ref="dialog"
|
||||
:width="800"
|
||||
:height="500"
|
||||
:with-ok-button="true"
|
||||
:ok-button-disabled="(type === 'file') && (selected.length === 0)"
|
||||
@click="cancel()"
|
||||
@close="cancel()"
|
||||
@ok="ok()"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<template #header>
|
||||
{{ multiple ? ((type === 'file') ? i18n.ts.selectFiles : i18n.ts.selectFolders) : ((type === 'file') ? i18n.ts.selectFile : i18n.ts.selectFolder) }}
|
||||
<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
|
||||
</template>
|
||||
<XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>
|
||||
</XModalWindow>
|
||||
<XModalWindow
|
||||
ref="dialog"
|
||||
:width="800"
|
||||
:height="500"
|
||||
:with-ok-button="true"
|
||||
:ok-button-disabled="type === 'file' && selected.length === 0"
|
||||
@click="cancel()"
|
||||
@close="cancel()"
|
||||
@ok="ok()"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<template #header>
|
||||
{{
|
||||
multiple
|
||||
? type === "file"
|
||||
? i18n.ts.selectFiles
|
||||
: i18n.ts.selectFolders
|
||||
: type === "file"
|
||||
? i18n.ts.selectFile
|
||||
: i18n.ts.selectFolder
|
||||
}}
|
||||
<span
|
||||
v-if="selected.length > 0"
|
||||
style="margin-left: 8px; opacity: 0.5"
|
||||
>({{ number(selected.length) }})</span
|
||||
>
|
||||
</template>
|
||||
<XDrive
|
||||
:multiple="multiple"
|
||||
:select="type"
|
||||
@changeSelection="onChangeSelection"
|
||||
@selected="ok()"
|
||||
/>
|
||||
</XModalWindow>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import * as Misskey from 'calckey-js';
|
||||
import XDrive from '@/components/MkDrive.vue';
|
||||
import XModalWindow from '@/components/MkModalWindow.vue';
|
||||
import number from '@/filters/number';
|
||||
import { i18n } from '@/i18n';
|
||||
import { ref } from "vue";
|
||||
import * as Misskey from "calckey-js";
|
||||
import XDrive from "@/components/MkDrive.vue";
|
||||
import XModalWindow from "@/components/MkModalWindow.vue";
|
||||
import number from "@/filters/number";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
withDefaults(defineProps<{
|
||||
type?: 'file' | 'folder';
|
||||
multiple: boolean;
|
||||
}>(), {
|
||||
type: 'file',
|
||||
});
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
type?: "file" | "folder";
|
||||
multiple: boolean;
|
||||
}>(),
|
||||
{
|
||||
type: "file",
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'done', r?: Misskey.entities.DriveFile[]): void;
|
||||
(ev: 'closed'): void;
|
||||
(ev: "done", r?: Misskey.entities.DriveFile[]): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
const dialog = ref<InstanceType<typeof XModalWindow>>();
|
||||
|
|
@ -43,12 +63,12 @@ const dialog = ref<InstanceType<typeof XModalWindow>>();
|
|||
const selected = ref<Misskey.entities.DriveFile[]>([]);
|
||||
|
||||
function ok() {
|
||||
emit('done', selected.value);
|
||||
emit("done", selected.value);
|
||||
dialog.value?.close();
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
emit('done');
|
||||
emit("done");
|
||||
dialog.value?.close();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
<template>
|
||||
<XWindow
|
||||
ref="window"
|
||||
:initial-width="800"
|
||||
:initial-height="500"
|
||||
:can-resize="true"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<template #header>
|
||||
{{ i18n.ts.drive }}
|
||||
</template>
|
||||
<XDrive :initial-folder="initialFolder"/>
|
||||
</XWindow>
|
||||
<XWindow
|
||||
ref="window"
|
||||
:initial-width="800"
|
||||
:initial-height="500"
|
||||
:can-resize="true"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<template #header>
|
||||
{{ i18n.ts.drive }}
|
||||
</template>
|
||||
<XDrive :initial-folder="initialFolder" />
|
||||
</XWindow>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import * as Misskey from 'calckey-js';
|
||||
import XDrive from '@/components/MkDrive.vue';
|
||||
import XWindow from '@/components/MkWindow.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import {} from "vue";
|
||||
import * as Misskey from "calckey-js";
|
||||
import XDrive from "@/components/MkDrive.vue";
|
||||
import XWindow from "@/components/MkWindow.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
defineProps<{
|
||||
initialFolder?: Misskey.entities.DriveFolder;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,32 @@
|
|||
<template>
|
||||
<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
|
||||
<section>
|
||||
<header class="_acrylic" @click="shown = !shown">
|
||||
<i class="toggle ph-fw ph-lg" :class="shown ? 'ph-caret-down-bold ph-lg' : 'ph-caret-up ph-bold ph-lg'"></i> <slot></slot> ({{ emojis.length }})
|
||||
</header>
|
||||
<div v-if="shown" class="body">
|
||||
<button
|
||||
v-for="emoji in emojis"
|
||||
:key="emoji"
|
||||
class="_button item"
|
||||
@click="emit('chosen', emoji, $event)"
|
||||
>
|
||||
<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
|
||||
<section>
|
||||
<header class="_acrylic" @click="shown = !shown">
|
||||
<i
|
||||
class="toggle ph-fw ph-lg"
|
||||
:class="
|
||||
shown
|
||||
? 'ph-caret-down-bold ph-lg'
|
||||
: 'ph-caret-up ph-bold ph-lg'
|
||||
"
|
||||
></i>
|
||||
<slot></slot> ({{ emojis.length }})
|
||||
</header>
|
||||
<div v-if="shown" class="body">
|
||||
<button
|
||||
v-for="emoji in emojis"
|
||||
:key="emoji"
|
||||
class="_button item"
|
||||
@click="emit('chosen', emoji, $event)"
|
||||
>
|
||||
<MkEmoji class="emoji" :emoji="emoji" :normal="true" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
emojis: string[];
|
||||
|
|
@ -26,11 +34,10 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'chosen', v: string, event: MouseEvent): void;
|
||||
(ev: "chosen", v: string, event: MouseEvent): void;
|
||||
}>();
|
||||
|
||||
const shown = ref(!!props.initialShown);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,107 +1,191 @@
|
|||
<template>
|
||||
<div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
|
||||
<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @paste.stop="paste" @keyup.enter="done()">
|
||||
<div ref="emojis" class="emojis">
|
||||
<section class="result">
|
||||
<div v-if="searchResultCustom.length > 0" class="body">
|
||||
<button
|
||||
v-for="emoji in searchResultCustom"
|
||||
:key="emoji.id"
|
||||
class="_button item"
|
||||
:title="emoji.name"
|
||||
tabindex="0"
|
||||
@click="chosen(emoji, $event)"
|
||||
>
|
||||
<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
|
||||
<img class="emoji" :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="searchResultUnicode.length > 0" class="body">
|
||||
<button
|
||||
v-for="emoji in searchResultUnicode"
|
||||
:key="emoji.name"
|
||||
class="_button item"
|
||||
:title="emoji.name"
|
||||
tabindex="0"
|
||||
@click="chosen(emoji, $event)"
|
||||
>
|
||||
<MkEmoji class="emoji" :emoji="emoji.char"/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div v-if="tab === 'index'" class="group index">
|
||||
<section v-if="showPinned">
|
||||
<div class="body">
|
||||
<div
|
||||
class="omfetrab"
|
||||
:class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]"
|
||||
:style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
|
||||
>
|
||||
<input
|
||||
ref="search"
|
||||
v-model.trim="q"
|
||||
class="search"
|
||||
data-prevent-emoji-insert
|
||||
:class="{ filled: q != null && q != '' }"
|
||||
:placeholder="i18n.ts.search"
|
||||
type="search"
|
||||
@paste.stop="paste"
|
||||
@keyup.enter="done()"
|
||||
/>
|
||||
<div ref="emojis" class="emojis">
|
||||
<section class="result">
|
||||
<div v-if="searchResultCustom.length > 0" class="body">
|
||||
<button
|
||||
v-for="emoji in pinned"
|
||||
:key="emoji"
|
||||
v-for="emoji in searchResultCustom"
|
||||
:key="emoji.id"
|
||||
class="_button item"
|
||||
:title="emoji.name"
|
||||
tabindex="0"
|
||||
@click="chosen(emoji, $event)"
|
||||
>
|
||||
<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
|
||||
<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
|
||||
<img
|
||||
class="emoji"
|
||||
:src="
|
||||
disableShowingAnimatedImages
|
||||
? getStaticImageUrl(emoji.url)
|
||||
: emoji.url
|
||||
"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="searchResultUnicode.length > 0" class="body">
|
||||
<button
|
||||
v-for="emoji in searchResultUnicode"
|
||||
:key="emoji.name"
|
||||
class="_button item"
|
||||
:title="emoji.name"
|
||||
tabindex="0"
|
||||
@click="chosen(emoji, $event)"
|
||||
>
|
||||
<MkEmoji class="emoji" :emoji="emoji.char" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header class="_acrylic"><i class="ph-alarm ph-bold ph-fw ph-lg"></i> {{ i18n.ts.recentUsed }}</header>
|
||||
<div class="body">
|
||||
<button
|
||||
v-for="emoji in recentlyUsedEmojis"
|
||||
:key="emoji"
|
||||
class="_button item"
|
||||
@click="chosen(emoji, $event)"
|
||||
>
|
||||
<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<div v-if="tab === 'index'" class="group index">
|
||||
<section v-if="showPinned">
|
||||
<div class="body">
|
||||
<button
|
||||
v-for="emoji in pinned"
|
||||
:key="emoji"
|
||||
class="_button item"
|
||||
tabindex="0"
|
||||
@click="chosen(emoji, $event)"
|
||||
>
|
||||
<MkEmoji
|
||||
class="emoji"
|
||||
:emoji="emoji"
|
||||
:normal="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header class="_acrylic">
|
||||
<i class="ph-alarm ph-bold ph-fw ph-lg"></i>
|
||||
{{ i18n.ts.recentUsed }}
|
||||
</header>
|
||||
<div class="body">
|
||||
<button
|
||||
v-for="emoji in recentlyUsedEmojis"
|
||||
:key="emoji"
|
||||
class="_button item"
|
||||
@click="chosen(emoji, $event)"
|
||||
>
|
||||
<MkEmoji
|
||||
class="emoji"
|
||||
:emoji="emoji"
|
||||
:normal="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div v-once class="group">
|
||||
<header>{{ i18n.ts.customEmojis }}</header>
|
||||
<XSection
|
||||
v-for="category in customEmojiCategories"
|
||||
:key="'custom:' + category"
|
||||
:initial-shown="false"
|
||||
:emojis="
|
||||
customEmojis
|
||||
.filter((e) => e.category === category)
|
||||
.map((e) => ':' + e.name + ':')
|
||||
"
|
||||
@chosen="chosen"
|
||||
>{{ category || i18n.ts.other }}</XSection
|
||||
>
|
||||
</div>
|
||||
<div v-once class="group">
|
||||
<header>{{ i18n.ts.emoji }}</header>
|
||||
<XSection
|
||||
v-for="category in categories"
|
||||
:key="category"
|
||||
:emojis="
|
||||
emojilist
|
||||
.filter((e) => e.category === category)
|
||||
.map((e) => e.char)
|
||||
"
|
||||
@chosen="chosen"
|
||||
>{{ category }}</XSection
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-once class="group">
|
||||
<header>{{ i18n.ts.customEmojis }}</header>
|
||||
<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
|
||||
</div>
|
||||
<div v-once class="group">
|
||||
<header>{{ i18n.ts.emoji }}</header>
|
||||
<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
|
||||
<div class="tabs">
|
||||
<button
|
||||
class="_button tab"
|
||||
:class="{ active: tab === 'index' }"
|
||||
@click="tab = 'index'"
|
||||
>
|
||||
<i class="ph-asterisk ph-bold ph-lg ph-fw ph-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
class="_button tab"
|
||||
:class="{ active: tab === 'custom' }"
|
||||
@click="tab = 'custom'"
|
||||
>
|
||||
<i class="ph-smiley ph-bold ph-lg ph-fw ph-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
class="_button tab"
|
||||
:class="{ active: tab === 'unicode' }"
|
||||
@click="tab = 'unicode'"
|
||||
>
|
||||
<i class="ph-leaf ph-bold ph-lg ph-fw ph-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
class="_button tab"
|
||||
:class="{ active: tab === 'tags' }"
|
||||
@click="tab = 'tags'"
|
||||
>
|
||||
<i class="ph-hash ph-bold ph-lg ph-fw ph-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="ph-asterisk ph-bold ph-lg ph-fw ph-lg"></i></button>
|
||||
<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="ph-smiley ph-bold ph-lg ph-fw ph-lg"></i></button>
|
||||
<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="ph-leaf ph-bold ph-lg ph-fw ph-lg"></i></button>
|
||||
<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ph-hash ph-bold ph-lg ph-fw ph-lg"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import * as Misskey from 'calckey-js';
|
||||
import XSection from '@/components/MkEmojiPicker.section.vue';
|
||||
import { emojilist, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist';
|
||||
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
|
||||
import Ripple from '@/components/MkRipple.vue';
|
||||
import * as os from '@/os';
|
||||
import { isTouchUsing } from '@/scripts/touch';
|
||||
import { deviceKind } from '@/scripts/device-kind';
|
||||
import { emojiCategories, instance } from '@/instance';
|
||||
import { i18n } from '@/i18n';
|
||||
import { defaultStore } from '@/store';
|
||||
import { ref, computed, watch, onMounted } from "vue";
|
||||
import * as Misskey from "calckey-js";
|
||||
import XSection from "@/components/MkEmojiPicker.section.vue";
|
||||
import {
|
||||
emojilist,
|
||||
UnicodeEmojiDef,
|
||||
unicodeEmojiCategories as categories,
|
||||
} from "@/scripts/emojilist";
|
||||
import { getStaticImageUrl } from "@/scripts/get-static-image-url";
|
||||
import Ripple from "@/components/MkRipple.vue";
|
||||
import * as os from "@/os";
|
||||
import { isTouchUsing } from "@/scripts/touch";
|
||||
import { deviceKind } from "@/scripts/device-kind";
|
||||
import { emojiCategories, instance } from "@/instance";
|
||||
import { i18n } from "@/i18n";
|
||||
import { defaultStore } from "@/store";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
showPinned?: boolean;
|
||||
asReactionPicker?: boolean;
|
||||
maxHeight?: number;
|
||||
asDrawer?: boolean;
|
||||
}>(), {
|
||||
showPinned: true,
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
showPinned?: boolean;
|
||||
asReactionPicker?: boolean;
|
||||
maxHeight?: number;
|
||||
asDrawer?: boolean;
|
||||
}>(),
|
||||
{
|
||||
showPinned: true,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'chosen', v: string): void;
|
||||
(ev: "chosen", v: string): void;
|
||||
}>();
|
||||
|
||||
const search = ref<HTMLInputElement>();
|
||||
|
|
@ -116,41 +200,48 @@ const {
|
|||
recentlyUsedEmojis,
|
||||
} = defaultStore.reactiveState;
|
||||
|
||||
const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1);
|
||||
const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3);
|
||||
const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
|
||||
const size = computed(() =>
|
||||
props.asReactionPicker ? reactionPickerSize.value : 1
|
||||
);
|
||||
const width = computed(() =>
|
||||
props.asReactionPicker ? reactionPickerWidth.value : 3
|
||||
);
|
||||
const height = computed(() =>
|
||||
props.asReactionPicker ? reactionPickerHeight.value : 2
|
||||
);
|
||||
const customEmojiCategories = emojiCategories;
|
||||
const customEmojis = instance.emojis;
|
||||
const q = ref<string | null>(null);
|
||||
const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]);
|
||||
const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
|
||||
const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
|
||||
const tab = ref<"index" | "custom" | "unicode" | "tags">("index");
|
||||
|
||||
watch(q, () => {
|
||||
if (emojis.value) emojis.value.scrollTop = 0;
|
||||
|
||||
if (q.value == null || q.value === '') {
|
||||
if (q.value == null || q.value === "") {
|
||||
searchResultCustom.value = [];
|
||||
searchResultUnicode.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
const newQ = q.value.replace(/:/g, '').toLowerCase();
|
||||
const newQ = q.value.replace(/:/g, "").toLowerCase();
|
||||
|
||||
const searchCustom = () => {
|
||||
const max = 8;
|
||||
const emojis = customEmojis;
|
||||
const matches = new Set<Misskey.entities.CustomEmoji>();
|
||||
|
||||
const exactMatch = emojis.find(emoji => emoji.name === newQ);
|
||||
const exactMatch = emojis.find((emoji) => emoji.name === newQ);
|
||||
if (exactMatch) matches.add(exactMatch);
|
||||
|
||||
if (newQ.includes(' ')) { // AND検索
|
||||
const keywords = newQ.split(' ');
|
||||
if (newQ.includes(" ")) {
|
||||
// AND検索
|
||||
const keywords = newQ.split(" ");
|
||||
|
||||
// 名前にキーワードが含まれている
|
||||
for (const emoji of emojis) {
|
||||
if (keywords.every(keyword => emoji.name.includes(keyword))) {
|
||||
if (keywords.every((keyword) => emoji.name.includes(keyword))) {
|
||||
matches.add(emoji);
|
||||
if (matches.size >= max) break;
|
||||
}
|
||||
|
|
@ -159,7 +250,15 @@ watch(q, () => {
|
|||
|
||||
// 名前またはエイリアスにキーワードが含まれている
|
||||
for (const emoji of emojis) {
|
||||
if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.aliases.some(alias => alias.includes(keyword)))) {
|
||||
if (
|
||||
keywords.every(
|
||||
(keyword) =>
|
||||
emoji.name.includes(keyword) ||
|
||||
emoji.aliases.some((alias) =>
|
||||
alias.includes(keyword)
|
||||
)
|
||||
)
|
||||
) {
|
||||
matches.add(emoji);
|
||||
if (matches.size >= max) break;
|
||||
}
|
||||
|
|
@ -174,7 +273,7 @@ watch(q, () => {
|
|||
if (matches.size >= max) return matches;
|
||||
|
||||
for (const emoji of emojis) {
|
||||
if (emoji.aliases.some(alias => alias.startsWith(newQ))) {
|
||||
if (emoji.aliases.some((alias) => alias.startsWith(newQ))) {
|
||||
matches.add(emoji);
|
||||
if (matches.size >= max) break;
|
||||
}
|
||||
|
|
@ -190,7 +289,7 @@ watch(q, () => {
|
|||
if (matches.size >= max) return matches;
|
||||
|
||||
for (const emoji of emojis) {
|
||||
if (emoji.aliases.some(alias => alias.includes(newQ))) {
|
||||
if (emoji.aliases.some((alias) => alias.includes(newQ))) {
|
||||
matches.add(emoji);
|
||||
if (matches.size >= max) break;
|
||||
}
|
||||
|
|
@ -205,15 +304,16 @@ watch(q, () => {
|
|||
const emojis = emojilist;
|
||||
const matches = new Set<UnicodeEmojiDef>();
|
||||
|
||||
const exactMatch = emojis.find(emoji => emoji.name === newQ);
|
||||
const exactMatch = emojis.find((emoji) => emoji.name === newQ);
|
||||
if (exactMatch) matches.add(exactMatch);
|
||||
|
||||
if (newQ.includes(' ')) { // AND検索
|
||||
const keywords = newQ.split(' ');
|
||||
if (newQ.includes(" ")) {
|
||||
// AND検索
|
||||
const keywords = newQ.split(" ");
|
||||
|
||||
// 名前にキーワードが含まれている
|
||||
for (const emoji of emojis) {
|
||||
if (keywords.every(keyword => emoji.name.includes(keyword))) {
|
||||
if (keywords.every((keyword) => emoji.name.includes(keyword))) {
|
||||
matches.add(emoji);
|
||||
if (matches.size >= max) break;
|
||||
}
|
||||
|
|
@ -222,7 +322,15 @@ watch(q, () => {
|
|||
|
||||
// 名前またはエイリアスにキーワードが含まれている
|
||||
for (const emoji of emojis) {
|
||||
if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.keywords.some(alias => alias.includes(keyword)))) {
|
||||
if (
|
||||
keywords.every(
|
||||
(keyword) =>
|
||||
emoji.name.includes(keyword) ||
|
||||
emoji.keywords.some((alias) =>
|
||||
alias.includes(keyword)
|
||||
)
|
||||
)
|
||||
) {
|
||||
matches.add(emoji);
|
||||
if (matches.size >= max) break;
|
||||
}
|
||||
|
|
@ -237,7 +345,9 @@ watch(q, () => {
|
|||
if (matches.size >= max) return matches;
|
||||
|
||||
for (const emoji of emojis) {
|
||||
if (emoji.keywords.some(keyword => keyword.startsWith(newQ))) {
|
||||
if (
|
||||
emoji.keywords.some((keyword) => keyword.startsWith(newQ))
|
||||
) {
|
||||
matches.add(emoji);
|
||||
if (matches.size >= max) break;
|
||||
}
|
||||
|
|
@ -253,7 +363,7 @@ watch(q, () => {
|
|||
if (matches.size >= max) return matches;
|
||||
|
||||
for (const emoji of emojis) {
|
||||
if (emoji.keywords.some(keyword => keyword.includes(newQ))) {
|
||||
if (emoji.keywords.some((keyword) => keyword.includes(newQ))) {
|
||||
matches.add(emoji);
|
||||
if (matches.size >= max) break;
|
||||
}
|
||||
|
|
@ -268,7 +378,7 @@ watch(q, () => {
|
|||
});
|
||||
|
||||
function focus() {
|
||||
if (!['smartphone', 'tablet'].includes(deviceKind) && !isTouchUsing) {
|
||||
if (!["smartphone", "tablet"].includes(deviceKind) && !isTouchUsing) {
|
||||
search.value?.focus({
|
||||
preventScroll: true,
|
||||
});
|
||||
|
|
@ -277,36 +387,40 @@ function focus() {
|
|||
|
||||
function reset() {
|
||||
if (emojis.value) emojis.value.scrollTop = 0;
|
||||
q.value = '';
|
||||
q.value = "";
|
||||
}
|
||||
|
||||
function getKey(emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef): string {
|
||||
return typeof emoji === 'string' ? emoji : (emoji.char || `:${emoji.name}:`);
|
||||
function getKey(
|
||||
emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef
|
||||
): string {
|
||||
return typeof emoji === "string" ? emoji : emoji.char || `:${emoji.name}:`;
|
||||
}
|
||||
|
||||
function chosen(emoji: any, ev?: MouseEvent) {
|
||||
const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
|
||||
const el =
|
||||
ev &&
|
||||
((ev.currentTarget ?? ev.target) as HTMLElement | null | undefined);
|
||||
if (el) {
|
||||
const rect = el.getBoundingClientRect();
|
||||
const x = rect.left + (el.offsetWidth / 2);
|
||||
const y = rect.top + (el.offsetHeight / 2);
|
||||
os.popup(Ripple, { x, y }, {}, 'end');
|
||||
const x = rect.left + el.offsetWidth / 2;
|
||||
const y = rect.top + el.offsetHeight / 2;
|
||||
os.popup(Ripple, { x, y }, {}, "end");
|
||||
}
|
||||
|
||||
const key = getKey(emoji);
|
||||
emit('chosen', key);
|
||||
emit("chosen", key);
|
||||
|
||||
// 最近使った絵文字更新
|
||||
if (!pinned.value.includes(key)) {
|
||||
let recents = defaultStore.state.recentlyUsedEmojis;
|
||||
recents = recents.filter((emoji: any) => emoji !== key);
|
||||
recents.unshift(key);
|
||||
defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
|
||||
defaultStore.set("recentlyUsedEmojis", recents.splice(0, 32));
|
||||
}
|
||||
}
|
||||
|
||||
function paste(event: ClipboardEvent) {
|
||||
const paste = (event.clipboardData || window.clipboardData).getData('text');
|
||||
const paste = (event.clipboardData || window.clipboardData).getData("text");
|
||||
if (done(paste)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
|
@ -314,15 +428,17 @@ function paste(event: ClipboardEvent) {
|
|||
|
||||
function done(query?: any): boolean | void {
|
||||
if (query == null) query = q.value;
|
||||
if (query == null || typeof query !== 'string') return;
|
||||
if (query == null || typeof query !== "string") return;
|
||||
|
||||
const q2 = query.replaceAll(':', '');
|
||||
const exactMatchCustom = customEmojis.find(emoji => emoji.name === q2);
|
||||
const q2 = query.replaceAll(":", "");
|
||||
const exactMatchCustom = customEmojis.find((emoji) => emoji.name === q2);
|
||||
if (exactMatchCustom) {
|
||||
chosen(exactMatchCustom);
|
||||
return true;
|
||||
}
|
||||
const exactMatchUnicode = emojilist.find(emoji => emoji.char === q2 || emoji.name === q2);
|
||||
const exactMatchUnicode = emojilist.find(
|
||||
(emoji) => emoji.char === q2 || emoji.name === q2
|
||||
);
|
||||
if (exactMatchUnicode) {
|
||||
chosen(exactMatchUnicode);
|
||||
return true;
|
||||
|
|
@ -543,7 +659,7 @@ defineExpose({
|
|||
|
||||
> .emoji {
|
||||
height: 1.25em;
|
||||
vertical-align: -.25em;
|
||||
vertical-align: -0.25em;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,58 +1,66 @@
|
|||
<template>
|
||||
<MkModal
|
||||
ref="modal"
|
||||
v-slot="{ type, maxHeight }"
|
||||
:z-priority="'middle'"
|
||||
:prefer-type="asReactionPicker && defaultStore.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'"
|
||||
:transparent-bg="true"
|
||||
:manual-showing="manualShowing"
|
||||
:src="src"
|
||||
@click="modal?.close()"
|
||||
@opening="opening"
|
||||
@close="emit('close')"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<MkEmojiPicker
|
||||
ref="picker"
|
||||
class="ryghynhb _popup _shadow"
|
||||
:class="{ drawer: type === 'drawer' }"
|
||||
:show-pinned="showPinned"
|
||||
:as-reaction-picker="asReactionPicker"
|
||||
:as-drawer="type === 'drawer'"
|
||||
:max-height="maxHeight"
|
||||
@chosen="chosen"
|
||||
/>
|
||||
</MkModal>
|
||||
<MkModal
|
||||
ref="modal"
|
||||
v-slot="{ type, maxHeight }"
|
||||
:z-priority="'middle'"
|
||||
:prefer-type="
|
||||
asReactionPicker &&
|
||||
defaultStore.state.reactionPickerUseDrawerForMobile === false
|
||||
? 'popup'
|
||||
: 'auto'
|
||||
"
|
||||
:transparent-bg="true"
|
||||
:manual-showing="manualShowing"
|
||||
:src="src"
|
||||
@click="modal?.close()"
|
||||
@opening="opening"
|
||||
@close="emit('close')"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<MkEmojiPicker
|
||||
ref="picker"
|
||||
class="ryghynhb _popup _shadow"
|
||||
:class="{ drawer: type === 'drawer' }"
|
||||
:show-pinned="showPinned"
|
||||
:as-reaction-picker="asReactionPicker"
|
||||
:as-drawer="type === 'drawer'"
|
||||
:max-height="maxHeight"
|
||||
@chosen="chosen"
|
||||
/>
|
||||
</MkModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import MkModal from '@/components/MkModal.vue';
|
||||
import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
|
||||
import { defaultStore } from '@/store';
|
||||
import { ref } from "vue";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import MkEmojiPicker from "@/components/MkEmojiPicker.vue";
|
||||
import { defaultStore } from "@/store";
|
||||
|
||||
withDefaults(defineProps<{
|
||||
manualShowing?: boolean | null;
|
||||
src?: HTMLElement;
|
||||
showPinned?: boolean;
|
||||
asReactionPicker?: boolean;
|
||||
}>(), {
|
||||
manualShowing: null,
|
||||
showPinned: true,
|
||||
asReactionPicker: false,
|
||||
});
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
manualShowing?: boolean | null;
|
||||
src?: HTMLElement;
|
||||
showPinned?: boolean;
|
||||
asReactionPicker?: boolean;
|
||||
}>(),
|
||||
{
|
||||
manualShowing: null,
|
||||
showPinned: true,
|
||||
asReactionPicker: false,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'done', v: any): void;
|
||||
(ev: 'close'): void;
|
||||
(ev: 'closed'): void;
|
||||
(ev: "done", v: any): void;
|
||||
(ev: "close"): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
const modal = ref<InstanceType<typeof MkModal>>();
|
||||
const picker = ref<InstanceType<typeof MkEmojiPicker>>();
|
||||
|
||||
function chosen(emoji: any) {
|
||||
emit('done', emoji);
|
||||
emit("done", emoji);
|
||||
modal.value?.close();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
<template>
|
||||
<div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
|
||||
<div
|
||||
v-if="meta"
|
||||
class="xfbouadm"
|
||||
:style="{ backgroundImage: `url(${meta.backgroundImageUrl})` }"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import * as Misskey from 'calckey-js';
|
||||
import * as os from '@/os';
|
||||
import { ref } from "vue";
|
||||
import * as Misskey from "calckey-js";
|
||||
import * as os from "@/os";
|
||||
|
||||
const meta = ref<Misskey.entities.DetailedInstanceMetadata>();
|
||||
|
||||
os.api('meta', { detail: true }).then(gotMeta => {
|
||||
os.api("meta", { detail: true }).then((gotMeta) => {
|
||||
meta.value = gotMeta;
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,80 @@
|
|||
<template>
|
||||
<div>
|
||||
<MkPagination v-slot="{items}" :pagination="pagination" class="urempief" :class="{ grid: viewMode === 'grid' }">
|
||||
<MkA
|
||||
v-for="file in items"
|
||||
:key="file.id"
|
||||
v-tooltip.mfm="`${file.type}\n${bytes(file.size)}\n${new Date(file.createdAt).toLocaleString()}\nby ${file.user ? '@' + Acct.toString(file.user) : 'system'}`"
|
||||
:to="`/admin/file/${file.id}`"
|
||||
class="file _button"
|
||||
<div>
|
||||
<MkPagination
|
||||
v-slot="{ items }"
|
||||
:pagination="pagination"
|
||||
class="urempief"
|
||||
:class="{ grid: viewMode === 'grid' }"
|
||||
>
|
||||
<div v-if="file.isSensitive" class="sensitive-label">{{ i18n.ts.sensitive }}</div>
|
||||
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
|
||||
<div v-if="viewMode === 'list'" class="body">
|
||||
<div>
|
||||
<small style="opacity: 0.7;">{{ file.name }}</small>
|
||||
<MkA
|
||||
v-for="file in items"
|
||||
:key="file.id"
|
||||
v-tooltip.mfm="
|
||||
`${file.type}\n${bytes(file.size)}\n${new Date(
|
||||
file.createdAt
|
||||
).toLocaleString()}\nby ${
|
||||
file.user ? '@' + Acct.toString(file.user) : 'system'
|
||||
}`
|
||||
"
|
||||
:to="`/admin/file/${file.id}`"
|
||||
class="file _button"
|
||||
>
|
||||
<div v-if="file.isSensitive" class="sensitive-label">
|
||||
{{ i18n.ts.sensitive }}
|
||||
</div>
|
||||
<div>
|
||||
<MkAcct v-if="file.user" :user="file.user"/>
|
||||
<div v-else>{{ i18n.ts.system }}</div>
|
||||
<MkDriveFileThumbnail
|
||||
class="thumbnail"
|
||||
:file="file"
|
||||
fit="contain"
|
||||
/>
|
||||
<div v-if="viewMode === 'list'" class="body">
|
||||
<div>
|
||||
<small style="opacity: 0.7">{{ file.name }}</small>
|
||||
</div>
|
||||
<div>
|
||||
<MkAcct v-if="file.user" :user="file.user" />
|
||||
<div v-else>{{ i18n.ts.system }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span style="margin-right: 1em">{{ file.type }}</span>
|
||||
<span>{{ bytes(file.size) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
>{{ i18n.ts.registeredDate }}:
|
||||
<MkTime :time="file.createdAt" mode="detail"
|
||||
/></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span style="margin-right: 1em;">{{ file.type }}</span>
|
||||
<span>{{ bytes(file.size) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ i18n.ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
|
||||
</div>
|
||||
</div>
|
||||
</MkA>
|
||||
</MkPagination>
|
||||
</div>
|
||||
</MkA>
|
||||
</MkPagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import * as Acct from 'calckey-js/built/acct';
|
||||
import MkSwitch from '@/components/ui/switch.vue';
|
||||
import MkPagination from '@/components/MkPagination.vue';
|
||||
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
|
||||
import bytes from '@/filters/bytes';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { computed } from "vue";
|
||||
import * as Acct from "calckey-js/built/acct";
|
||||
import MkSwitch from "@/components/ui/switch.vue";
|
||||
import MkPagination from "@/components/MkPagination.vue";
|
||||
import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
|
||||
import bytes from "@/filters/bytes";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
pagination: any;
|
||||
viewMode: 'grid' | 'list';
|
||||
viewMode: "grid" | "list";
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@keyframes sensitive-blink {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.urempief {
|
||||
|
|
@ -94,7 +118,7 @@ const props = defineProps<{
|
|||
> .file {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
|
||||
|
||||
> .thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
<template>
|
||||
<span class="mk-file-type-icon">
|
||||
<template v-if="kind == 'image'"><i class="ph-file-image ph-bold ph-lg"></i></template>
|
||||
</span>
|
||||
<span class="mk-file-type-icon">
|
||||
<template v-if="kind == 'image'"
|
||||
><i class="ph-file-image ph-bold ph-lg"></i
|
||||
></template>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
type: string;
|
||||
}>();
|
||||
|
||||
const kind = computed(() => props.type.split('/')[0]);
|
||||
const kind = computed(() => props.type.split("/")[0]);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,40 @@
|
|||
<template>
|
||||
<div v-size="{ max: [500] }" class="ssazuxis">
|
||||
<header class="_button" :style="{ background: bg }" @click="showBody = !showBody">
|
||||
<div class="title"><slot name="header"></slot></div>
|
||||
<div class="divider"></div>
|
||||
<button class="_button">
|
||||
<template v-if="showBody"><i class="ph-caret-up ph-bold ph-lg"></i></template>
|
||||
<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
|
||||
</button>
|
||||
</header>
|
||||
<transition
|
||||
:name="$store.state.animation ? 'folder-toggle' : ''"
|
||||
@enter="enter"
|
||||
@after-enter="afterEnter"
|
||||
@leave="leave"
|
||||
@after-leave="afterLeave"
|
||||
>
|
||||
<div v-show="showBody">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div v-size="{ max: [500] }" class="ssazuxis">
|
||||
<header
|
||||
class="_button"
|
||||
:style="{ background: bg }"
|
||||
@click="showBody = !showBody"
|
||||
>
|
||||
<div class="title"><slot name="header"></slot></div>
|
||||
<div class="divider"></div>
|
||||
<button class="_button">
|
||||
<template v-if="showBody"
|
||||
><i class="ph-caret-up ph-bold ph-lg"></i
|
||||
></template>
|
||||
<template v-else
|
||||
><i class="ph-caret-down ph-bold ph-lg"></i
|
||||
></template>
|
||||
</button>
|
||||
</header>
|
||||
<transition
|
||||
:name="$store.state.animation ? 'folder-toggle' : ''"
|
||||
@enter="enter"
|
||||
@after-enter="afterEnter"
|
||||
@leave="leave"
|
||||
@after-leave="afterLeave"
|
||||
>
|
||||
<div v-show="showBody">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import tinycolor from 'tinycolor2';
|
||||
|
||||
const localStoragePrefix = 'ui:folder:';
|
||||
import { defineComponent } from "vue";
|
||||
import tinycolor from "tinycolor2";
|
||||
|
||||
const localStoragePrefix = "ui:folder:";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
|
|
@ -45,19 +52,28 @@ export default defineComponent({
|
|||
data() {
|
||||
return {
|
||||
bg: null,
|
||||
showBody: (this.persistKey && localStorage.getItem(localStoragePrefix + this.persistKey)) ? localStorage.getItem(localStoragePrefix + this.persistKey) === 't' : this.expanded,
|
||||
showBody:
|
||||
this.persistKey &&
|
||||
localStorage.getItem(localStoragePrefix + this.persistKey)
|
||||
? localStorage.getItem(
|
||||
localStoragePrefix + this.persistKey
|
||||
) === "t"
|
||||
: this.expanded,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
showBody() {
|
||||
if (this.persistKey) {
|
||||
localStorage.setItem(localStoragePrefix + this.persistKey, this.showBody ? 't' : 'f');
|
||||
localStorage.setItem(
|
||||
localStoragePrefix + this.persistKey,
|
||||
this.showBody ? "t" : "f"
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
function getParentBg(el: Element | null): string {
|
||||
if (el == null || el.tagName === 'BODY') return 'var(--bg)';
|
||||
if (el == null || el.tagName === "BODY") return "var(--bg)";
|
||||
const bg = el.style.background || el.style.backgroundColor;
|
||||
if (bg) {
|
||||
return bg;
|
||||
|
|
@ -66,7 +82,13 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
const rawBg = getParentBg(this.$el);
|
||||
const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
|
||||
const bg = tinycolor(
|
||||
rawBg.startsWith("var(")
|
||||
? getComputedStyle(document.documentElement).getPropertyValue(
|
||||
rawBg.slice(4, -1)
|
||||
)
|
||||
: rawBg
|
||||
);
|
||||
bg.setAlpha(0.85);
|
||||
this.bg = bg.toRgbString();
|
||||
},
|
||||
|
|
@ -79,14 +101,14 @@ export default defineComponent({
|
|||
const elementHeight = el.getBoundingClientRect().height;
|
||||
el.style.height = 0;
|
||||
el.offsetHeight; // reflow
|
||||
el.style.height = elementHeight + 'px';
|
||||
el.style.height = elementHeight + "px";
|
||||
},
|
||||
afterEnter(el) {
|
||||
el.style.height = null;
|
||||
},
|
||||
leave(el) {
|
||||
const elementHeight = el.getBoundingClientRect().height;
|
||||
el.style.height = elementHeight + 'px';
|
||||
el.style.height = elementHeight + "px";
|
||||
el.offsetHeight; // reflow
|
||||
el.style.height = 0;
|
||||
},
|
||||
|
|
@ -98,7 +120,8 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.folder-toggle-enter-active, .folder-toggle-leave-active {
|
||||
.folder-toggle-enter-active,
|
||||
.folder-toggle-leave-active {
|
||||
overflow-y: hidden;
|
||||
transition: opacity 0.5s, height 0.5s !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,72 +1,87 @@
|
|||
<template>
|
||||
<button
|
||||
class="kpoogebi _button"
|
||||
:class="{
|
||||
wait,
|
||||
active: isFollowing || hasPendingFollowRequestFromYou,
|
||||
full,
|
||||
large,
|
||||
blocking: isBlocking
|
||||
}"
|
||||
:disabled="wait"
|
||||
@click="onClick"
|
||||
>
|
||||
<template v-if="!wait">
|
||||
<template v-if="isBlocking">
|
||||
<span v-if="full">{{ i18n.ts.blocked }}</span><i class="ph-prohibit ph-bold ph-lg"></i>
|
||||
<button
|
||||
class="kpoogebi _button"
|
||||
:class="{
|
||||
wait,
|
||||
active: isFollowing || hasPendingFollowRequestFromYou,
|
||||
full,
|
||||
large,
|
||||
blocking: isBlocking,
|
||||
}"
|
||||
:disabled="wait"
|
||||
@click="onClick"
|
||||
>
|
||||
<template v-if="!wait">
|
||||
<template v-if="isBlocking">
|
||||
<span v-if="full">{{ i18n.ts.blocked }}</span
|
||||
><i class="ph-prohibit ph-bold ph-lg"></i>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="hasPendingFollowRequestFromYou && user.isLocked"
|
||||
>
|
||||
<span v-if="full">{{ i18n.ts.followRequestPending }}</span
|
||||
><i class="ph-hourglass-medium ph-bold ph-lg"></i>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"
|
||||
>
|
||||
<!-- つまりリモートフォローの場合。 -->
|
||||
<span v-if="full">{{ i18n.ts.processing }}</span
|
||||
><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
|
||||
</template>
|
||||
<template v-else-if="isFollowing">
|
||||
<span v-if="full">{{ i18n.ts.unfollow }}</span
|
||||
><i class="ph-minus ph-bold ph-lg"></i>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && user.isLocked">
|
||||
<span v-if="full">{{ i18n.ts.followRequest }}</span
|
||||
><i class="ph-plus ph-bold ph-lg"></i>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && !user.isLocked">
|
||||
<span v-if="full">{{ i18n.ts.follow }}</span
|
||||
><i class="ph-plus ph-bold ph-lg"></i>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="hasPendingFollowRequestFromYou && user.isLocked">
|
||||
<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="ph-hourglass-medium ph-bold ph-lg"></i>
|
||||
<template v-else>
|
||||
<span v-if="full">{{ i18n.ts.processing }}</span
|
||||
><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
|
||||
</template>
|
||||
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
|
||||
<!-- つまりリモートフォローの場合。 -->
|
||||
<span v-if="full">{{ i18n.ts.processing }}</span><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
|
||||
</template>
|
||||
<template v-else-if="isFollowing">
|
||||
<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ph-minus ph-bold ph-lg"></i>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && user.isLocked">
|
||||
<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="ph-plus ph-bold ph-lg"></i>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && !user.isLocked">
|
||||
<span v-if="full">{{ i18n.ts.follow }}</span><i class="ph-plus ph-bold ph-lg"></i>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="full">{{ i18n.ts.processing }}</span><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
|
||||
</template>
|
||||
</button>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onBeforeUnmount, onMounted } from 'vue';
|
||||
import type * as Misskey from 'calckey-js';
|
||||
import * as os from '@/os';
|
||||
import { stream } from '@/stream';
|
||||
import { i18n } from '@/i18n';
|
||||
import { computed, onBeforeUnmount, onMounted } from "vue";
|
||||
import type * as Misskey from "calckey-js";
|
||||
import * as os from "@/os";
|
||||
import { stream } from "@/stream";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
const props = withDefaults(defineProps<{
|
||||
user: Misskey.entities.UserDetailed,
|
||||
full?: boolean,
|
||||
large?: boolean,
|
||||
}>(), {
|
||||
full: false,
|
||||
large: false,
|
||||
});
|
||||
const emit = defineEmits(["refresh"]);
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
user: Misskey.entities.UserDetailed;
|
||||
full?: boolean;
|
||||
large?: boolean;
|
||||
}>(),
|
||||
{
|
||||
full: false,
|
||||
large: false,
|
||||
}
|
||||
);
|
||||
|
||||
const isBlocking = computed(() => props.user.isBlocking);
|
||||
|
||||
let isFollowing = $ref(props.user.isFollowing);
|
||||
let hasPendingFollowRequestFromYou = $ref(props.user.hasPendingFollowRequestFromYou);
|
||||
let hasPendingFollowRequestFromYou = $ref(
|
||||
props.user.hasPendingFollowRequestFromYou
|
||||
);
|
||||
let wait = $ref(false);
|
||||
const connection = stream.useChannel('main');
|
||||
const connection = stream.useChannel("main");
|
||||
|
||||
if (props.user.isFollowing == null) {
|
||||
os.api('users/show', {
|
||||
os.api("users/show", {
|
||||
userId: props.user.id,
|
||||
})
|
||||
.then(onFollowChange);
|
||||
}).then(onFollowChange);
|
||||
}
|
||||
|
||||
function onFollowChange(user: Misskey.entities.UserDetailed) {
|
||||
|
|
@ -82,40 +97,41 @@ async function onClick() {
|
|||
try {
|
||||
if (isBlocking.value) {
|
||||
const { canceled } = await os.confirm({
|
||||
type: 'warning',
|
||||
text: i18n.t('unblockConfirm'),
|
||||
type: "warning",
|
||||
text: i18n.t("unblockConfirm"),
|
||||
});
|
||||
if (canceled) return
|
||||
if (canceled) return;
|
||||
|
||||
await os.api("blocking/delete", {
|
||||
userId: props.user.id,
|
||||
})
|
||||
});
|
||||
if (props.user.isMuted) {
|
||||
await os.api("mute/delete", {
|
||||
userId: props.user.id,
|
||||
})
|
||||
});
|
||||
}
|
||||
emit('refresh')
|
||||
}
|
||||
else if (isFollowing) {
|
||||
emit("refresh");
|
||||
} else if (isFollowing) {
|
||||
const { canceled } = await os.confirm({
|
||||
type: 'warning',
|
||||
text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
|
||||
type: "warning",
|
||||
text: i18n.t("unfollowConfirm", {
|
||||
name: props.user.name || props.user.username,
|
||||
}),
|
||||
});
|
||||
|
||||
if (canceled) return;
|
||||
|
||||
await os.api('following/delete', {
|
||||
await os.api("following/delete", {
|
||||
userId: props.user.id,
|
||||
});
|
||||
} else {
|
||||
if (hasPendingFollowRequestFromYou) {
|
||||
await os.api('following/requests/cancel', {
|
||||
await os.api("following/requests/cancel", {
|
||||
userId: props.user.id,
|
||||
});
|
||||
hasPendingFollowRequestFromYou = false;
|
||||
} else {
|
||||
await os.api('following/create', {
|
||||
await os.api("following/create", {
|
||||
userId: props.user.id,
|
||||
});
|
||||
hasPendingFollowRequestFromYou = true;
|
||||
|
|
@ -129,8 +145,8 @@ async function onClick() {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
connection.on('follow', onFollowChange);
|
||||
connection.on('unfollow', onFollowChange);
|
||||
connection.on("follow", onFollowChange);
|
||||
connection.on("unfollow", onFollowChange);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
|
|
|
|||
|
|
@ -1,63 +1,93 @@
|
|||
<template>
|
||||
<XModalWindow ref="dialog"
|
||||
:width="370"
|
||||
:height="400"
|
||||
@close="dialog.close()"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<template #header>{{ i18n.ts.forgotPassword }}</template>
|
||||
<XModalWindow
|
||||
ref="dialog"
|
||||
:width="370"
|
||||
:height="400"
|
||||
@close="dialog.close()"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<template #header>{{ i18n.ts.forgotPassword }}</template>
|
||||
|
||||
<form v-if="instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit">
|
||||
<div class="main _formRoot">
|
||||
<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required>
|
||||
<template #label>{{ i18n.ts.username }}</template>
|
||||
<template #prefix>@</template>
|
||||
</MkInput>
|
||||
<form
|
||||
v-if="instance.enableEmail"
|
||||
class="bafeceda"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<div class="main _formRoot">
|
||||
<MkInput
|
||||
v-model="username"
|
||||
class="_formBlock"
|
||||
type="text"
|
||||
pattern="^[a-zA-Z0-9_]+$"
|
||||
:spellcheck="false"
|
||||
autofocus
|
||||
required
|
||||
>
|
||||
<template #label>{{ i18n.ts.username }}</template>
|
||||
<template #prefix>@</template>
|
||||
</MkInput>
|
||||
|
||||
<MkInput v-model="email" class="_formBlock" type="email" :spellcheck="false" required>
|
||||
<template #label>{{ i18n.ts.emailAddress }}</template>
|
||||
<template #caption>{{ i18n.ts._forgotPassword.enterEmail }}</template>
|
||||
</MkInput>
|
||||
<MkInput
|
||||
v-model="email"
|
||||
class="_formBlock"
|
||||
type="email"
|
||||
:spellcheck="false"
|
||||
required
|
||||
>
|
||||
<template #label>{{ i18n.ts.emailAddress }}</template>
|
||||
<template #caption>{{
|
||||
i18n.ts._forgotPassword.enterEmail
|
||||
}}</template>
|
||||
</MkInput>
|
||||
|
||||
<MkButton class="_formBlock" type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ i18n.ts.send }}</MkButton>
|
||||
<MkButton
|
||||
class="_formBlock"
|
||||
type="submit"
|
||||
:disabled="processing"
|
||||
primary
|
||||
style="margin: 0 auto"
|
||||
>{{ i18n.ts.send }}</MkButton
|
||||
>
|
||||
</div>
|
||||
<div class="sub">
|
||||
<MkA to="/about" class="_link">{{
|
||||
i18n.ts._forgotPassword.ifNoEmail
|
||||
}}</MkA>
|
||||
</div>
|
||||
</form>
|
||||
<div v-else class="bafecedb">
|
||||
{{ i18n.ts._forgotPassword.contactAdmin }}
|
||||
</div>
|
||||
<div class="sub">
|
||||
<MkA to="/about" class="_link">{{ i18n.ts._forgotPassword.ifNoEmail }}</MkA>
|
||||
</div>
|
||||
</form>
|
||||
<div v-else class="bafecedb">
|
||||
{{ i18n.ts._forgotPassword.contactAdmin }}
|
||||
</div>
|
||||
</XModalWindow>
|
||||
</XModalWindow>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import XModalWindow from '@/components/MkModalWindow.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkInput from '@/components/form/input.vue';
|
||||
import * as os from '@/os';
|
||||
import { instance } from '@/instance';
|
||||
import { i18n } from '@/i18n';
|
||||
import {} from "vue";
|
||||
import XModalWindow from "@/components/MkModalWindow.vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import MkInput from "@/components/form/input.vue";
|
||||
import * as os from "@/os";
|
||||
import { instance } from "@/instance";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'done'): void;
|
||||
(ev: 'closed'): void;
|
||||
(ev: "done"): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
let dialog: InstanceType<typeof XModalWindow> = $ref();
|
||||
|
||||
let username = $ref('');
|
||||
let email = $ref('');
|
||||
let username = $ref("");
|
||||
let email = $ref("");
|
||||
let processing = $ref(false);
|
||||
|
||||
async function onSubmit() {
|
||||
processing = true;
|
||||
await os.apiWithDialog('request-reset-password', {
|
||||
await os.apiWithDialog("request-reset-password", {
|
||||
username,
|
||||
email,
|
||||
});
|
||||
emit('done');
|
||||
emit("done");
|
||||
dialog.close();
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,70 +1,170 @@
|
|||
<template>
|
||||
<XModalWindow
|
||||
ref="dialog"
|
||||
:width="450"
|
||||
:can-close="false"
|
||||
:with-ok-button="true"
|
||||
:ok-button-disabled="false"
|
||||
@click="cancel()"
|
||||
@ok="ok()"
|
||||
@close="cancel()"
|
||||
@closed="$emit('closed')"
|
||||
>
|
||||
<template #header>
|
||||
{{ title }}
|
||||
</template>
|
||||
<XModalWindow
|
||||
ref="dialog"
|
||||
:width="450"
|
||||
:can-close="false"
|
||||
:with-ok-button="true"
|
||||
:ok-button-disabled="false"
|
||||
@click="cancel()"
|
||||
@ok="ok()"
|
||||
@close="cancel()"
|
||||
@closed="$emit('closed')"
|
||||
>
|
||||
<template #header>
|
||||
{{ title }}
|
||||
</template>
|
||||
|
||||
<MkSpacer :margin-min="20" :margin-max="32">
|
||||
<div class="xkpnjxcv _formRoot">
|
||||
<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
|
||||
<FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1" class="_formBlock">
|
||||
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
|
||||
<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
|
||||
</FormInput>
|
||||
<FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text" class="_formBlock">
|
||||
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
|
||||
<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
|
||||
</FormInput>
|
||||
<FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]" class="_formBlock">
|
||||
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
|
||||
<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
|
||||
</FormTextarea>
|
||||
<FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]" class="_formBlock">
|
||||
<span v-text="form[item].label || item"></span>
|
||||
<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
|
||||
</FormSwitch>
|
||||
<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]" class="_formBlock">
|
||||
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
|
||||
<option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option>
|
||||
</FormSelect>
|
||||
<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]" class="_formBlock">
|
||||
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
|
||||
<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
|
||||
</FormRadios>
|
||||
<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].min" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter" class="_formBlock">
|
||||
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
|
||||
<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
|
||||
</FormRange>
|
||||
<MkButton v-else-if="form[item].type === 'button'" class="_formBlock" @click="form[item].action($event, values)">
|
||||
<span v-text="form[item].content || item"></span>
|
||||
</MkButton>
|
||||
</template>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</XModalWindow>
|
||||
<MkSpacer :margin-min="20" :margin-max="32">
|
||||
<div class="xkpnjxcv _formRoot">
|
||||
<template
|
||||
v-for="item in Object.keys(form).filter(
|
||||
(item) => !form[item].hidden
|
||||
)"
|
||||
>
|
||||
<FormInput
|
||||
v-if="form[item].type === 'number'"
|
||||
v-model="values[item]"
|
||||
type="number"
|
||||
:step="form[item].step || 1"
|
||||
class="_formBlock"
|
||||
>
|
||||
<template #label
|
||||
><span v-text="form[item].label || item"></span
|
||||
><span v-if="form[item].required === false">
|
||||
({{ i18n.ts.optional }})</span
|
||||
></template
|
||||
>
|
||||
<template v-if="form[item].description" #caption>{{
|
||||
form[item].description
|
||||
}}</template>
|
||||
</FormInput>
|
||||
<FormInput
|
||||
v-else-if="
|
||||
form[item].type === 'string' &&
|
||||
!form[item].multiline
|
||||
"
|
||||
v-model="values[item]"
|
||||
type="text"
|
||||
class="_formBlock"
|
||||
>
|
||||
<template #label
|
||||
><span v-text="form[item].label || item"></span
|
||||
><span v-if="form[item].required === false">
|
||||
({{ i18n.ts.optional }})</span
|
||||
></template
|
||||
>
|
||||
<template v-if="form[item].description" #caption>{{
|
||||
form[item].description
|
||||
}}</template>
|
||||
</FormInput>
|
||||
<FormTextarea
|
||||
v-else-if="
|
||||
form[item].type === 'string' && form[item].multiline
|
||||
"
|
||||
v-model="values[item]"
|
||||
class="_formBlock"
|
||||
>
|
||||
<template #label
|
||||
><span v-text="form[item].label || item"></span
|
||||
><span v-if="form[item].required === false">
|
||||
({{ i18n.ts.optional }})</span
|
||||
></template
|
||||
>
|
||||
<template v-if="form[item].description" #caption>{{
|
||||
form[item].description
|
||||
}}</template>
|
||||
</FormTextarea>
|
||||
<FormSwitch
|
||||
v-else-if="form[item].type === 'boolean'"
|
||||
v-model="values[item]"
|
||||
class="_formBlock"
|
||||
>
|
||||
<span v-text="form[item].label || item"></span>
|
||||
<template v-if="form[item].description" #caption>{{
|
||||
form[item].description
|
||||
}}</template>
|
||||
</FormSwitch>
|
||||
<FormSelect
|
||||
v-else-if="form[item].type === 'enum'"
|
||||
v-model="values[item]"
|
||||
class="_formBlock"
|
||||
>
|
||||
<template #label
|
||||
><span v-text="form[item].label || item"></span
|
||||
><span v-if="form[item].required === false">
|
||||
({{ i18n.ts.optional }})</span
|
||||
></template
|
||||
>
|
||||
<option
|
||||
v-for="item in form[item].enum"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</option>
|
||||
</FormSelect>
|
||||
<FormRadios
|
||||
v-else-if="form[item].type === 'radio'"
|
||||
v-model="values[item]"
|
||||
class="_formBlock"
|
||||
>
|
||||
<template #label
|
||||
><span v-text="form[item].label || item"></span
|
||||
><span v-if="form[item].required === false">
|
||||
({{ i18n.ts.optional }})</span
|
||||
></template
|
||||
>
|
||||
<option
|
||||
v-for="item in form[item].options"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</option>
|
||||
</FormRadios>
|
||||
<FormRange
|
||||
v-else-if="form[item].type === 'range'"
|
||||
v-model="values[item]"
|
||||
:min="form[item].min"
|
||||
:max="form[item].max"
|
||||
:step="form[item].step"
|
||||
:text-converter="form[item].textConverter"
|
||||
class="_formBlock"
|
||||
>
|
||||
<template #label
|
||||
><span v-text="form[item].label || item"></span
|
||||
><span v-if="form[item].required === false">
|
||||
({{ i18n.ts.optional }})</span
|
||||
></template
|
||||
>
|
||||
<template v-if="form[item].description" #caption>{{
|
||||
form[item].description
|
||||
}}</template>
|
||||
</FormRange>
|
||||
<MkButton
|
||||
v-else-if="form[item].type === 'button'"
|
||||
class="_formBlock"
|
||||
@click="form[item].action($event, values)"
|
||||
>
|
||||
<span v-text="form[item].content || item"></span>
|
||||
</MkButton>
|
||||
</template>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</XModalWindow>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import FormInput from './form/input.vue';
|
||||
import FormTextarea from './form/textarea.vue';
|
||||
import FormSwitch from './form/switch.vue';
|
||||
import FormSelect from './form/select.vue';
|
||||
import FormRange from './form/range.vue';
|
||||
import MkButton from './MkButton.vue';
|
||||
import FormRadios from './form/radios.vue';
|
||||
import XModalWindow from '@/components/MkModalWindow.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import { defineComponent } from "vue";
|
||||
import FormInput from "./form/input.vue";
|
||||
import FormTextarea from "./form/textarea.vue";
|
||||
import FormSwitch from "./form/switch.vue";
|
||||
import FormSelect from "./form/select.vue";
|
||||
import FormRange from "./form/range.vue";
|
||||
import MkButton from "./MkButton.vue";
|
||||
import FormRadios from "./form/radios.vue";
|
||||
import XModalWindow from "@/components/MkModalWindow.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
|
@ -89,7 +189,7 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
|
||||
emits: ['done'],
|
||||
emits: ["done"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -106,14 +206,14 @@ export default defineComponent({
|
|||
|
||||
methods: {
|
||||
ok() {
|
||||
this.$emit('done', {
|
||||
this.$emit("done", {
|
||||
result: this.values,
|
||||
});
|
||||
this.$refs.dialog.close();
|
||||
},
|
||||
|
||||
cancel() {
|
||||
this.$emit('done', {
|
||||
this.$emit("done", {
|
||||
canceled: true,
|
||||
});
|
||||
this.$refs.dialog.close();
|
||||
|
|
@ -124,6 +224,5 @@ export default defineComponent({
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.xkpnjxcv {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
<template>
|
||||
<XFormula :formula="formula" :block="block"/>
|
||||
<XFormula :formula="formula" :block="block" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, defineAsyncComponent } from 'vue';
|
||||
import * as os from '@/os';
|
||||
import { defineComponent, defineAsyncComponent } from "vue";
|
||||
import * as os from "@/os";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XFormula: defineAsyncComponent(() => import('@/components/MkFormulaCore.vue')),
|
||||
XFormula: defineAsyncComponent(
|
||||
() => import("@/components/MkFormulaCore.vue")
|
||||
),
|
||||
},
|
||||
props: {
|
||||
formula: {
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
<template>
|
||||
<div v-if="block" v-html="compiledFormula"></div>
|
||||
<span v-else v-html="compiledFormula"></span>
|
||||
<div v-if="block" v-html="compiledFormula"></div>
|
||||
<span v-else v-html="compiledFormula"></span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import katex from 'katex';
|
||||
import { defineComponent } from "vue";
|
||||
import katex from "katex";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
formula: {
|
||||
type: String,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
block: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
compiledFormula(): any {
|
||||
return katex.renderToString(this.formula, {
|
||||
throwOnError: false
|
||||
throwOnError: false,
|
||||
} as any);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,27 +1,31 @@
|
|||
<template>
|
||||
<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
|
||||
<div class="thumbnail">
|
||||
<ImgWithBlurhash class="img" :src="post.files[0].thumbnailUrl" :hash="post.files[0].blurhash"/>
|
||||
</div>
|
||||
<article>
|
||||
<header>
|
||||
<MkAvatar :user="post.user" class="avatar"/>
|
||||
</header>
|
||||
<footer>
|
||||
<span class="title">{{ post.title }}</span>
|
||||
</footer>
|
||||
</article>
|
||||
</MkA>
|
||||
<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
|
||||
<div class="thumbnail">
|
||||
<ImgWithBlurhash
|
||||
class="img"
|
||||
:src="post.files[0].thumbnailUrl"
|
||||
:hash="post.files[0].blurhash"
|
||||
/>
|
||||
</div>
|
||||
<article>
|
||||
<header>
|
||||
<MkAvatar :user="post.user" class="avatar" />
|
||||
</header>
|
||||
<footer>
|
||||
<span class="title">{{ post.title }}</span>
|
||||
</footer>
|
||||
</article>
|
||||
</MkA>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import { userName } from '@/filters/user';
|
||||
import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
|
||||
import {} from "vue";
|
||||
import { userName } from "@/filters/user";
|
||||
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
post: any;
|
||||
}>();
|
||||
post: any;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
<template>
|
||||
<div class="mk-google">
|
||||
<input v-model="query" type="search" :placeholder="q">
|
||||
<button @click="search"><i class="ph-magnifying-glass ph-bold ph-lg"></i> {{ i18n.ts.searchByGoogle }}</button>
|
||||
</div>
|
||||
<div class="mk-google">
|
||||
<input v-model="query" type="search" :placeholder="q" />
|
||||
<button @click="search">
|
||||
<i class="ph-magnifying-glass ph-bold ph-lg"></i>
|
||||
{{ i18n.ts.searchByGoogle }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import { ref } from "vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
q: string;
|
||||
|
|
@ -16,7 +19,10 @@ const props = defineProps<{
|
|||
const query = ref(props.q);
|
||||
|
||||
const search = () => {
|
||||
window.open(`https://search.annoyingorange.xyz/search?q=${query.value}`, '_blank');
|
||||
window.open(
|
||||
`https://search.annoyingorange.xyz/search?q=${query.value}`,
|
||||
"_blank"
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,30 @@
|
|||
<template>
|
||||
<div ref="rootEl">
|
||||
<MkLoading v-if="fetching"/>
|
||||
<MkLoading v-if="fetching" />
|
||||
<div v-else>
|
||||
<canvas ref="chartEl"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
|
||||
import { Chart } from 'chart.js';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
|
||||
import * as os from '@/os';
|
||||
import { defaultStore } from '@/store';
|
||||
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
|
||||
import { chartVLine } from '@/scripts/chart-vline';
|
||||
import { alpha } from '@/scripts/color';
|
||||
import { initChart } from '@/scripts/init-chart';
|
||||
import {
|
||||
markRaw,
|
||||
version as vueVersion,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
nextTick,
|
||||
watch,
|
||||
} from "vue";
|
||||
import { Chart } from "chart.js";
|
||||
import tinycolor from "tinycolor2";
|
||||
import { MatrixController, MatrixElement } from "chartjs-chart-matrix";
|
||||
import * as os from "@/os";
|
||||
import { defaultStore } from "@/store";
|
||||
import { useChartTooltip } from "@/scripts/use-chart-tooltip";
|
||||
import { chartVLine } from "@/scripts/chart-vline";
|
||||
import { alpha } from "@/scripts/color";
|
||||
import { initChart } from "@/scripts/init-chart";
|
||||
|
||||
initChart();
|
||||
|
||||
|
|
@ -32,7 +39,7 @@ let chartInstance: Chart = null;
|
|||
let fetching = $ref(true);
|
||||
|
||||
const { handler: externalTooltipHandler } = useChartTooltip({
|
||||
position: 'middle',
|
||||
position: "middle",
|
||||
});
|
||||
|
||||
async function renderChart() {
|
||||
|
|
@ -57,7 +64,9 @@ async function renderChart() {
|
|||
const format = (arr) => {
|
||||
return arr.map((v, i) => {
|
||||
const dt = getDate(i);
|
||||
const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, '0')}-${dt.getDate().toString().padStart(2, '0')}`;
|
||||
const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1)
|
||||
.toString()
|
||||
.padStart(2, "0")}-${dt.getDate().toString().padStart(2, "0")}`;
|
||||
return {
|
||||
x: iso,
|
||||
y: dt.getDay(),
|
||||
|
|
@ -69,20 +78,35 @@ async function renderChart() {
|
|||
|
||||
let values;
|
||||
|
||||
if (props.src === 'active-users') {
|
||||
const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' });
|
||||
if (props.src === "active-users") {
|
||||
const raw = await os.api("charts/active-users", {
|
||||
limit: chartLimit,
|
||||
span: "day",
|
||||
});
|
||||
values = raw.readWrite;
|
||||
} else if (props.src === 'notes') {
|
||||
const raw = await os.api('charts/notes', { limit: chartLimit, span: 'day' });
|
||||
} else if (props.src === "notes") {
|
||||
const raw = await os.api("charts/notes", {
|
||||
limit: chartLimit,
|
||||
span: "day",
|
||||
});
|
||||
values = raw.local.inc;
|
||||
} else if (props.src === 'ap-requests-inbox-received') {
|
||||
const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
|
||||
} else if (props.src === "ap-requests-inbox-received") {
|
||||
const raw = await os.api("charts/ap-request", {
|
||||
limit: chartLimit,
|
||||
span: "day",
|
||||
});
|
||||
values = raw.inboxReceived;
|
||||
} else if (props.src === 'ap-requests-deliver-succeeded') {
|
||||
const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
|
||||
} else if (props.src === "ap-requests-deliver-succeeded") {
|
||||
const raw = await os.api("charts/ap-request", {
|
||||
limit: chartLimit,
|
||||
span: "day",
|
||||
});
|
||||
values = raw.deliverSucceeded;
|
||||
} else if (props.src === 'ap-requests-deliver-failed') {
|
||||
const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
|
||||
} else if (props.src === "ap-requests-deliver-failed") {
|
||||
const raw = await os.api("charts/ap-request", {
|
||||
limit: chartLimit,
|
||||
span: "day",
|
||||
});
|
||||
values = raw.deliverFailed;
|
||||
}
|
||||
|
||||
|
|
@ -90,43 +114,51 @@ async function renderChart() {
|
|||
|
||||
await nextTick();
|
||||
|
||||
const color = defaultStore.state.darkMode ? '#ebbcba' : '#d7827e';
|
||||
const color = defaultStore.state.darkMode ? "#ebbcba" : "#d7827e";
|
||||
|
||||
// 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする
|
||||
const max = values.slice().sort((a, b) => b - a).slice(0, 3).reduce((a, b) => a + b, 0) / 3;
|
||||
const max =
|
||||
values
|
||||
.slice()
|
||||
.sort((a, b) => b - a)
|
||||
.slice(0, 3)
|
||||
.reduce((a, b) => a + b, 0) / 3;
|
||||
|
||||
const min = Math.max(0, Math.min(...values) - 1);
|
||||
|
||||
const marginEachCell = 4;
|
||||
|
||||
chartInstance = new Chart(chartEl, {
|
||||
type: 'matrix',
|
||||
type: "matrix",
|
||||
data: {
|
||||
datasets: [{
|
||||
label: 'Read & Write',
|
||||
data: format(values),
|
||||
pointRadius: 0,
|
||||
borderWidth: 0,
|
||||
borderJoinStyle: 'round',
|
||||
borderRadius: 3,
|
||||
backgroundColor(c) {
|
||||
const value = c.dataset.data[c.dataIndex].v;
|
||||
let a = (value - min) / max;
|
||||
if (value !== 0) { // 0でない限りは完全に不可視にはしない
|
||||
a = Math.max(a, 0.05);
|
||||
}
|
||||
return alpha(color, a);
|
||||
datasets: [
|
||||
{
|
||||
label: "Read & Write",
|
||||
data: format(values),
|
||||
pointRadius: 0,
|
||||
borderWidth: 0,
|
||||
borderJoinStyle: "round",
|
||||
borderRadius: 3,
|
||||
backgroundColor(c) {
|
||||
const value = c.dataset.data[c.dataIndex].v;
|
||||
let a = (value - min) / max;
|
||||
if (value !== 0) {
|
||||
// 0でない限りは完全に不可視にはしない
|
||||
a = Math.max(a, 0.05);
|
||||
}
|
||||
return alpha(color, a);
|
||||
},
|
||||
fill: true,
|
||||
width(c) {
|
||||
const a = c.chart.chartArea ?? {};
|
||||
return (a.right - a.left) / weeks - marginEachCell;
|
||||
},
|
||||
height(c) {
|
||||
const a = c.chart.chartArea ?? {};
|
||||
return (a.bottom - a.top) / 7 - marginEachCell;
|
||||
},
|
||||
},
|
||||
fill: true,
|
||||
width(c) {
|
||||
const a = c.chart.chartArea ?? {};
|
||||
return (a.right - a.left) / weeks - marginEachCell;
|
||||
},
|
||||
height(c) {
|
||||
const a = c.chart.chartArea ?? {};
|
||||
return (a.bottom - a.top) / 7 - marginEachCell;
|
||||
},
|
||||
}],
|
||||
],
|
||||
},
|
||||
options: {
|
||||
aspectRatio: wide ? 6 : narrow ? 1.8 : 3.2,
|
||||
|
|
@ -140,17 +172,17 @@ async function renderChart() {
|
|||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
type: "time",
|
||||
offset: true,
|
||||
position: 'bottom',
|
||||
position: "bottom",
|
||||
time: {
|
||||
unit: 'week',
|
||||
round: 'week',
|
||||
unit: "week",
|
||||
round: "week",
|
||||
isoWeekday: 0,
|
||||
displayFormats: {
|
||||
day: 'M/d',
|
||||
month: 'Y/M',
|
||||
week: 'M/d',
|
||||
day: "M/d",
|
||||
month: "Y/M",
|
||||
week: "M/d",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
|
|
@ -165,7 +197,7 @@ async function renderChart() {
|
|||
y: {
|
||||
offset: true,
|
||||
reverse: true,
|
||||
position: 'right',
|
||||
position: "right",
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
|
|
@ -176,7 +208,8 @@ async function renderChart() {
|
|||
font: {
|
||||
size: 9,
|
||||
},
|
||||
callback: (value, index, values) => ['', 'Mon', '', 'Wed', '', 'Fri', ''][value],
|
||||
callback: (value, index, values) =>
|
||||
["", "Mon", "", "Wed", "", "Fri", ""][value],
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -188,12 +221,13 @@ async function renderChart() {
|
|||
enabled: false,
|
||||
callbacks: {
|
||||
title(context) {
|
||||
const v = context[0].dataset.data[context[0].dataIndex];
|
||||
const v =
|
||||
context[0].dataset.data[context[0].dataIndex];
|
||||
return v.d;
|
||||
},
|
||||
label(context) {
|
||||
const v = context.dataset.data[context.dataIndex];
|
||||
return ['Active: ' + v.v];
|
||||
return ["Active: " + v.v];
|
||||
},
|
||||
},
|
||||
//mode: 'index',
|
||||
|
|
@ -207,10 +241,13 @@ async function renderChart() {
|
|||
});
|
||||
}
|
||||
|
||||
watch(() => props.src, () => {
|
||||
fetching = true;
|
||||
renderChart();
|
||||
});
|
||||
watch(
|
||||
() => props.src,
|
||||
() => {
|
||||
fetching = true;
|
||||
renderChart();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
renderChart();
|
||||
|
|
|
|||
|
|
@ -1,31 +1,46 @@
|
|||
<template>
|
||||
<MkModal ref="modal" :z-priority="'middle'" @click="modal.close()" @closed="emit('closed')">
|
||||
<div class="xubzgfga">
|
||||
<header>{{ image.name }}</header>
|
||||
<img :src="image.url" :alt="image.comment" :title="image.comment" @click="modal.close()"/>
|
||||
<footer>
|
||||
<span>{{ image.type }}</span>
|
||||
<span>{{ bytes(image.size) }}</span>
|
||||
<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
|
||||
</footer>
|
||||
</div>
|
||||
</MkModal>
|
||||
<MkModal
|
||||
ref="modal"
|
||||
:z-priority="'middle'"
|
||||
@click="modal.close()"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<div class="xubzgfga">
|
||||
<header>{{ image.name }}</header>
|
||||
<img
|
||||
:src="image.url"
|
||||
:alt="image.comment"
|
||||
:title="image.comment"
|
||||
@click="modal.close()"
|
||||
/>
|
||||
<footer>
|
||||
<span>{{ image.type }}</span>
|
||||
<span>{{ bytes(image.size) }}</span>
|
||||
<span v-if="image.properties && image.properties.width"
|
||||
>{{ number(image.properties.width) }}px ×
|
||||
{{ number(image.properties.height) }}px</span
|
||||
>
|
||||
</footer>
|
||||
</div>
|
||||
</MkModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import type * as misskey from 'calckey-js';
|
||||
import bytes from '@/filters/bytes';
|
||||
import number from '@/filters/number';
|
||||
import MkModal from '@/components/MkModal.vue';
|
||||
import {} from "vue";
|
||||
import type * as misskey from "calckey-js";
|
||||
import bytes from "@/filters/bytes";
|
||||
import number from "@/filters/number";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
image: misskey.entities.DriveFile;
|
||||
}>(), {
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
image: misskey.entities.DriveFile;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
const modal = $ref<InstanceType<typeof MkModal>>();
|
||||
|
|
|
|||
|
|
@ -1,30 +1,46 @@
|
|||
<template>
|
||||
<div class="xubzgfgb" :class="{ cover }" :title="title">
|
||||
<canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/>
|
||||
<img v-if="src" :src="src" :title="title" :type="type" :alt="alt" @load="onLoad"/>
|
||||
</div>
|
||||
<div class="xubzgfgb" :class="{ cover }" :title="title">
|
||||
<canvas
|
||||
v-if="!loaded"
|
||||
ref="canvas"
|
||||
:width="size"
|
||||
:height="size"
|
||||
:title="title"
|
||||
/>
|
||||
<img
|
||||
v-if="src"
|
||||
:src="src"
|
||||
:title="title"
|
||||
:type="type"
|
||||
:alt="alt"
|
||||
@load="onLoad"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { decode } from 'blurhash';
|
||||
import { onMounted } from "vue";
|
||||
import { decode } from "blurhash";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
src?: string | null;
|
||||
hash?: string;
|
||||
alt?: string;
|
||||
type?: string | null;
|
||||
title?: string | null;
|
||||
size?: number;
|
||||
cover?: boolean;
|
||||
}>(), {
|
||||
src: null,
|
||||
type: null,
|
||||
alt: '',
|
||||
title: null,
|
||||
size: 64,
|
||||
cover: true,
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
src?: string | null;
|
||||
hash?: string;
|
||||
alt?: string;
|
||||
type?: string | null;
|
||||
title?: string | null;
|
||||
size?: number;
|
||||
cover?: boolean;
|
||||
}>(),
|
||||
{
|
||||
src: null,
|
||||
type: null,
|
||||
alt: "",
|
||||
title: null,
|
||||
size: 64,
|
||||
cover: true,
|
||||
}
|
||||
);
|
||||
|
||||
const canvas = $ref<HTMLCanvasElement>();
|
||||
let loaded = $ref(false);
|
||||
|
|
@ -32,7 +48,7 @@ let loaded = $ref(false);
|
|||
function draw() {
|
||||
if (props.hash == null) return;
|
||||
const pixels = decode(props.hash, props.size, props.size);
|
||||
const ctx = canvas.getContext('2d');
|
||||
const ctx = canvas.getContext("2d");
|
||||
const imageData = ctx!.createImageData(props.size, props.size);
|
||||
imageData.data.set(pixels);
|
||||
ctx!.putImageData(imageData, 0, 0);
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div class="fpezltsf" :class="{ warn }">
|
||||
<i v-if="warn" class="ph-warning ph-bold ph-lg"></i>
|
||||
<i v-else class="ph-info ph-bold ph-lg"></i>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="fpezltsf" :class="{ warn }">
|
||||
<i v-if="warn" class="ph-warning ph-bold ph-lg"></i>
|
||||
<i v-else class="ph-info ph-bold ph-lg"></i>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import {} from "vue";
|
||||
|
||||
defineProps<{
|
||||
warn?: boolean;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,32 @@
|
|||
<template>
|
||||
<div :class="[$style.root, { yellow: instance.isNotResponding, red: instance.isBlocked, gray: instance.isSuspended }]">
|
||||
<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
|
||||
<div class="body">
|
||||
<span class="host">{{ instance.name ?? instance.host }}</span>
|
||||
<span class="sub _monospace"><b>{{ instance.host }}</b> / {{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</span>
|
||||
<div
|
||||
:class="[
|
||||
$style.root,
|
||||
{
|
||||
yellow: instance.isNotResponding,
|
||||
red: instance.isBlocked,
|
||||
gray: instance.isSuspended,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<img class="icon" :src="getInstanceIcon(instance)" alt="" />
|
||||
<div class="body">
|
||||
<span class="host">{{ instance.name ?? instance.host }}</span>
|
||||
<span class="sub _monospace"
|
||||
><b>{{ instance.host }}</b> /
|
||||
{{ instance.softwareName || "?" }}
|
||||
{{ instance.softwareVersion }}</span
|
||||
>
|
||||
</div>
|
||||
<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
|
||||
</div>
|
||||
<MkMiniChart v-if="chartValues" class="chart" :src="chartValues"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as misskey from 'calckey-js';
|
||||
import MkMiniChart from '@/components/MkMiniChart.vue';
|
||||
import * as os from '@/os';
|
||||
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
|
||||
import * as misskey from "calckey-js";
|
||||
import MkMiniChart from "@/components/MkMiniChart.vue";
|
||||
import * as os from "@/os";
|
||||
import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
|
||||
|
||||
const props = defineProps<{
|
||||
instance: misskey.entities.Instance;
|
||||
|
|
@ -21,14 +34,22 @@ const props = defineProps<{
|
|||
|
||||
let chartValues = $ref<number[] | null>(null);
|
||||
|
||||
os.apiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: 'day' }).then(res => {
|
||||
os.apiGet("charts/instance", {
|
||||
host: props.instance.host,
|
||||
limit: 16 + 1,
|
||||
span: "day",
|
||||
}).then((res) => {
|
||||
// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
|
||||
res.requests.received.splice(0, 1);
|
||||
chartValues = res.requests.received;
|
||||
});
|
||||
|
||||
function getInstanceIcon(instance): string {
|
||||
return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
|
||||
return (
|
||||
getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
|
||||
getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
|
||||
"/client-assets/dummy.png"
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -86,19 +107,46 @@ function getInstanceIcon(instance): string {
|
|||
|
||||
&:global(.yellow) {
|
||||
--c: rgb(255 196 0 / 15%);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
var(--c) 16.67%,
|
||||
transparent 16.67%,
|
||||
transparent 50%,
|
||||
var(--c) 50%,
|
||||
var(--c) 66.67%,
|
||||
transparent 66.67%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
&:global(.red) {
|
||||
--c: rgb(255 0 0 / 15%);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
var(--c) 16.67%,
|
||||
transparent 16.67%,
|
||||
transparent 50%,
|
||||
var(--c) 50%,
|
||||
var(--c) 66.67%,
|
||||
transparent 66.67%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
&:global(.gray) {
|
||||
--c: var(--bg);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
var(--c) 16.67%,
|
||||
transparent 16.67%,
|
||||
transparent 50%,
|
||||
var(--c) 50%,
|
||||
var(--c) 66.67%,
|
||||
transparent 66.67%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,87 +1,113 @@
|
|||
<template>
|
||||
<XModalWindow
|
||||
ref="dialogEl"
|
||||
:with-ok-button="true"
|
||||
:ok-button-disabled="selected == null"
|
||||
@click="cancel()"
|
||||
@close="cancel()"
|
||||
@ok="ok()"
|
||||
@closed="$emit('closed')"
|
||||
>
|
||||
<template #header>{{ i18n.ts.selectInstance }}</template>
|
||||
<div class="mehkoush">
|
||||
<div class="form">
|
||||
<MkInput v-model="hostname" :autofocus="true" @update:modelValue="search">
|
||||
<XModalWindow
|
||||
ref="dialogEl"
|
||||
:with-ok-button="true"
|
||||
:ok-button-disabled="selected == null"
|
||||
@click="cancel()"
|
||||
@close="cancel()"
|
||||
@ok="ok()"
|
||||
@closed="$emit('closed')"
|
||||
>
|
||||
<template #header>{{ i18n.ts.selectInstance }}</template>
|
||||
<div class="mehkoush">
|
||||
<div class="form">
|
||||
<MkInput
|
||||
v-model="hostname"
|
||||
:autofocus="true"
|
||||
@update:modelValue="search"
|
||||
>
|
||||
<template #label>{{ i18n.ts.instance }}</template>
|
||||
</MkInput>
|
||||
</div>
|
||||
<div v-if="hostname != ''" class="result" :class="{ hit: instances.length > 0 }">
|
||||
<div v-if="instances.length > 0" class="instances">
|
||||
<div v-for="item in instances" :key="item.id" class="instance" :class="{ selected: selected && selected.id === item.id }" @click="selected = item" @dblclick="ok()">
|
||||
<div class="body">
|
||||
<img class="icon" :src="item.iconUrl ?? '/client-assets/dummy.png'" aria-hidden="true"/>
|
||||
<span class="name">{{ item.host }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="hostname != ''"
|
||||
class="result"
|
||||
:class="{ hit: instances.length > 0 }"
|
||||
>
|
||||
<div v-if="instances.length > 0" class="instances">
|
||||
<div
|
||||
v-for="item in instances"
|
||||
:key="item.id"
|
||||
class="instance"
|
||||
:class="{
|
||||
selected: selected && selected.id === item.id,
|
||||
}"
|
||||
@click="selected = item"
|
||||
@dblclick="ok()"
|
||||
>
|
||||
<div class="body">
|
||||
<img
|
||||
class="icon"
|
||||
:src="
|
||||
item.iconUrl ?? '/client-assets/dummy.png'
|
||||
"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="name">{{ item.host }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty">
|
||||
<span>{{ i18n.ts.noInstances }}</span>
|
||||
<div v-else class="empty">
|
||||
<span>{{ i18n.ts.noInstances }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</XModalWindow>
|
||||
</XModalWindow>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import MkInput from '@/components/form/input.vue';
|
||||
import XModalWindow from '@/components/MkModalWindow.vue';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { Instance } from 'calckey-js/built/entities';
|
||||
import MkInput from "@/components/form/input.vue";
|
||||
import XModalWindow from "@/components/MkModalWindow.vue";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
import { Instance } from "calckey-js/built/entities";
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'ok', selected: Instance): void;
|
||||
(ev: 'cancel'): void;
|
||||
(ev: 'closed'): void;
|
||||
(ev: "ok", selected: Instance): void;
|
||||
(ev: "cancel"): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
let hostname = $ref('');
|
||||
let hostname = $ref("");
|
||||
let instances: Instance[] = $ref([]);
|
||||
let selected: Instance | null = $ref(null);
|
||||
let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
|
||||
|
||||
let searchOrderLatch = 0;
|
||||
const search = () => {
|
||||
if (hostname === '') {
|
||||
if (hostname === "") {
|
||||
instances = [];
|
||||
return;
|
||||
}
|
||||
|
||||
const searchId = ++searchOrderLatch;
|
||||
os.api('federation/instances', {
|
||||
os.api("federation/instances", {
|
||||
host: hostname,
|
||||
limit: 10,
|
||||
blocked: false,
|
||||
suspended: false,
|
||||
sort: '+pubSub',
|
||||
}).then(_instances => {
|
||||
sort: "+pubSub",
|
||||
}).then((_instances) => {
|
||||
if (searchId !== searchOrderLatch) return;
|
||||
instances = _instances.map(x => ({
|
||||
id: x.id,
|
||||
host: x.host,
|
||||
iconUrl: x.iconUrl,
|
||||
} as Instance));
|
||||
instances = _instances.map(
|
||||
(x) =>
|
||||
({
|
||||
id: x.id,
|
||||
host: x.host,
|
||||
iconUrl: x.iconUrl,
|
||||
} as Instance)
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const ok = () => {
|
||||
if (selected == null) return;
|
||||
emit('ok', selected);
|
||||
emit("ok", selected);
|
||||
dialogEl?.close();
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
emit('cancel');
|
||||
emit("cancel");
|
||||
dialogEl?.close();
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,49 +4,82 @@
|
|||
<template #header>Chart</template>
|
||||
<div :class="$style.chart">
|
||||
<div class="selects">
|
||||
<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
|
||||
<MkSelect v-model="chartSrc" style="margin: 0; flex: 1">
|
||||
<optgroup :label="i18n.ts.federation">
|
||||
<option value="federation">{{ i18n.ts._charts.federation }}</option>
|
||||
<option value="ap-request">{{ i18n.ts._charts.apRequest }}</option>
|
||||
<option value="federation">
|
||||
{{ i18n.ts._charts.federation }}
|
||||
</option>
|
||||
<option value="ap-request">
|
||||
{{ i18n.ts._charts.apRequest }}
|
||||
</option>
|
||||
</optgroup>
|
||||
<optgroup :label="i18n.ts.users">
|
||||
<option value="users">{{ i18n.ts._charts.usersIncDec }}</option>
|
||||
<option value="users-total">{{ i18n.ts._charts.usersTotal }}</option>
|
||||
<option value="active-users">{{ i18n.ts._charts.activeUsers }}</option>
|
||||
<option value="users">
|
||||
{{ i18n.ts._charts.usersIncDec }}
|
||||
</option>
|
||||
<option value="users-total">
|
||||
{{ i18n.ts._charts.usersTotal }}
|
||||
</option>
|
||||
<option value="active-users">
|
||||
{{ i18n.ts._charts.activeUsers }}
|
||||
</option>
|
||||
</optgroup>
|
||||
<optgroup :label="i18n.ts.notes">
|
||||
<option value="notes">{{ i18n.ts._charts.notesIncDec }}</option>
|
||||
<option value="local-notes">{{ i18n.ts._charts.localNotesIncDec }}</option>
|
||||
<option value="remote-notes">{{ i18n.ts._charts.remoteNotesIncDec }}</option>
|
||||
<option value="notes-total">{{ i18n.ts._charts.notesTotal }}</option>
|
||||
<option value="notes">
|
||||
{{ i18n.ts._charts.notesIncDec }}
|
||||
</option>
|
||||
<option value="local-notes">
|
||||
{{ i18n.ts._charts.localNotesIncDec }}
|
||||
</option>
|
||||
<option value="remote-notes">
|
||||
{{ i18n.ts._charts.remoteNotesIncDec }}
|
||||
</option>
|
||||
<option value="notes-total">
|
||||
{{ i18n.ts._charts.notesTotal }}
|
||||
</option>
|
||||
</optgroup>
|
||||
<optgroup :label="i18n.ts.drive">
|
||||
<option value="drive-files">{{ i18n.ts._charts.filesIncDec }}</option>
|
||||
<option value="drive">{{ i18n.ts._charts.storageUsageIncDec }}</option>
|
||||
<option value="drive-files">
|
||||
{{ i18n.ts._charts.filesIncDec }}
|
||||
</option>
|
||||
<option value="drive">
|
||||
{{ i18n.ts._charts.storageUsageIncDec }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</MkSelect>
|
||||
<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px;">
|
||||
<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px">
|
||||
<option value="hour">{{ i18n.ts.perHour }}</option>
|
||||
<option value="day">{{ i18n.ts.perDay }}</option>
|
||||
</MkSelect>
|
||||
</div>
|
||||
<div class="chart _panel">
|
||||
<MkChart :src="chartSrc" :span="chartSpan" :limit="chartLimit" :detailed="true"></MkChart>
|
||||
<MkChart
|
||||
:src="chartSrc"
|
||||
:span="chartSpan"
|
||||
:limit="chartLimit"
|
||||
:detailed="true"
|
||||
></MkChart>
|
||||
</div>
|
||||
</div>
|
||||
</MkFolder>
|
||||
|
||||
<MkFolder class="item">
|
||||
<template #header>Active users heatmap</template>
|
||||
<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0;">
|
||||
<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0">
|
||||
<option value="active-users">Active users</option>
|
||||
<option value="notes">Notes</option>
|
||||
<option value="ap-requests-inbox-received">Fediverse Requests: inboxReceived</option>
|
||||
<option value="ap-requests-deliver-succeeded">Fediverse Requests: deliverSucceeded</option>
|
||||
<option value="ap-requests-deliver-failed">Fediverse Requests: deliverFailed</option>
|
||||
<option value="ap-requests-inbox-received">
|
||||
Fediverse Requests: inboxReceived
|
||||
</option>
|
||||
<option value="ap-requests-deliver-succeeded">
|
||||
Fediverse Requests: deliverSucceeded
|
||||
</option>
|
||||
<option value="ap-requests-deliver-failed">
|
||||
Fediverse Requests: deliverFailed
|
||||
</option>
|
||||
</MkSelect>
|
||||
<div class="_panel" :class="$style.heatmap">
|
||||
<MkHeatmap :src="heatmapSrc"/>
|
||||
<MkHeatmap :src="heatmapSrc" />
|
||||
</div>
|
||||
</MkFolder>
|
||||
|
||||
|
|
@ -69,45 +102,49 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { Chart } from 'chart.js';
|
||||
import MkSelect from '@/components/form/select.vue';
|
||||
import MkChart from '@/components/MkChart.vue';
|
||||
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import MkHeatmap from '@/components/MkHeatmap.vue';
|
||||
import MkFolder from '@/components/MkFolder.vue';
|
||||
import { initChart } from '@/scripts/init-chart';
|
||||
import { onMounted } from "vue";
|
||||
import { Chart } from "chart.js";
|
||||
import MkSelect from "@/components/form/select.vue";
|
||||
import MkChart from "@/components/MkChart.vue";
|
||||
import { useChartTooltip } from "@/scripts/use-chart-tooltip";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
import MkHeatmap from "@/components/MkHeatmap.vue";
|
||||
import MkFolder from "@/components/MkFolder.vue";
|
||||
import { initChart } from "@/scripts/init-chart";
|
||||
|
||||
initChart();
|
||||
|
||||
const chartLimit = 500;
|
||||
let chartSpan = $ref<'hour' | 'day'>('hour');
|
||||
let chartSrc = $ref('active-users');
|
||||
let heatmapSrc = $ref('active-users');
|
||||
let chartSpan = $ref<"hour" | "day">("hour");
|
||||
let chartSrc = $ref("active-users");
|
||||
let heatmapSrc = $ref("active-users");
|
||||
let subDoughnutEl = $shallowRef<HTMLCanvasElement>();
|
||||
let pubDoughnutEl = $shallowRef<HTMLCanvasElement>();
|
||||
|
||||
const { handler: externalTooltipHandler1 } = useChartTooltip({
|
||||
position: 'middle',
|
||||
position: "middle",
|
||||
});
|
||||
const { handler: externalTooltipHandler2 } = useChartTooltip({
|
||||
position: 'middle',
|
||||
position: "middle",
|
||||
});
|
||||
|
||||
function createDoughnut(chartEl, tooltip, data) {
|
||||
const chartInstance = new Chart(chartEl, {
|
||||
type: 'doughnut',
|
||||
type: "doughnut",
|
||||
data: {
|
||||
labels: data.map(x => x.name),
|
||||
datasets: [{
|
||||
backgroundColor: data.map(x => x.color),
|
||||
borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
|
||||
borderWidth: 2,
|
||||
hoverOffset: 0,
|
||||
data: data.map(x => x.value),
|
||||
}],
|
||||
labels: data.map((x) => x.name),
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: data.map((x) => x.color),
|
||||
borderColor: getComputedStyle(
|
||||
document.documentElement
|
||||
).getPropertyValue("--panel"),
|
||||
borderWidth: 2,
|
||||
hoverOffset: 0,
|
||||
data: data.map((x) => x.value),
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
|
|
@ -120,7 +157,12 @@ function createDoughnut(chartEl, tooltip, data) {
|
|||
},
|
||||
},
|
||||
onClick: (ev) => {
|
||||
const hit = chartInstance.getElementsAtEventForMode(ev, 'nearest', { intersect: true }, false)[0];
|
||||
const hit = chartInstance.getElementsAtEventForMode(
|
||||
ev,
|
||||
"nearest",
|
||||
{ intersect: true },
|
||||
false
|
||||
)[0];
|
||||
if (hit && data[hit.index].onClick) {
|
||||
data[hit.index].onClick();
|
||||
}
|
||||
|
|
@ -131,7 +173,7 @@ function createDoughnut(chartEl, tooltip, data) {
|
|||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
mode: 'index',
|
||||
mode: "index",
|
||||
animation: {
|
||||
duration: 0,
|
||||
},
|
||||
|
|
@ -145,24 +187,48 @@ function createDoughnut(chartEl, tooltip, data) {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
os.apiGet('federation/stats', { limit: 30 }).then(fedStats => {
|
||||
createDoughnut(subDoughnutEl, externalTooltipHandler1, fedStats.topSubInstances.map(x => ({
|
||||
name: x.host,
|
||||
color: x.themeColor,
|
||||
value: x.followersCount,
|
||||
onClick: () => {
|
||||
os.pageWindow(`/instance-info/${x.host}`);
|
||||
},
|
||||
})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowersCount }]));
|
||||
os.apiGet("federation/stats", { limit: 30 }).then((fedStats) => {
|
||||
createDoughnut(
|
||||
subDoughnutEl,
|
||||
externalTooltipHandler1,
|
||||
fedStats.topSubInstances
|
||||
.map((x) => ({
|
||||
name: x.host,
|
||||
color: x.themeColor,
|
||||
value: x.followersCount,
|
||||
onClick: () => {
|
||||
os.pageWindow(`/instance-info/${x.host}`);
|
||||
},
|
||||
}))
|
||||
.concat([
|
||||
{
|
||||
name: "(other)",
|
||||
color: "#80808080",
|
||||
value: fedStats.otherFollowersCount,
|
||||
},
|
||||
])
|
||||
);
|
||||
|
||||
createDoughnut(pubDoughnutEl, externalTooltipHandler2, fedStats.topPubInstances.map(x => ({
|
||||
name: x.host,
|
||||
color: x.themeColor,
|
||||
value: x.followingCount,
|
||||
onClick: () => {
|
||||
os.pageWindow(`/instance-info/${x.host}`);
|
||||
},
|
||||
})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowingCount }]));
|
||||
createDoughnut(
|
||||
pubDoughnutEl,
|
||||
externalTooltipHandler2,
|
||||
fedStats.topPubInstances
|
||||
.map((x) => ({
|
||||
name: x.host,
|
||||
color: x.themeColor,
|
||||
value: x.followingCount,
|
||||
onClick: () => {
|
||||
os.pageWindow(`/instance-info/${x.host}`);
|
||||
},
|
||||
}))
|
||||
.concat([
|
||||
{
|
||||
name: "(other)",
|
||||
color: "#80808080",
|
||||
value: fedStats.otherFollowingCount,
|
||||
},
|
||||
])
|
||||
);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -205,7 +271,8 @@ onMounted(() => {
|
|||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
> .sub, > .pub {
|
||||
> .sub,
|
||||
> .pub {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,41 +1,50 @@
|
|||
<template>
|
||||
<div class="hpaizdrt" ref="ticker" :style="bg">
|
||||
<img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true"/>
|
||||
<span class="name">{{ instance.name }}</span>
|
||||
</div>
|
||||
<div class="hpaizdrt" ref="ticker" :style="bg">
|
||||
<img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true" />
|
||||
<span class="name">{{ instance.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { instanceName } from '@/config';
|
||||
import { instance as Instance } from '@/instance';
|
||||
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
|
||||
import { instanceName } from "@/config";
|
||||
import { instance as Instance } from "@/instance";
|
||||
import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
|
||||
|
||||
const props = defineProps<{
|
||||
instance?: {
|
||||
faviconUrl?: string
|
||||
name: string
|
||||
themeColor?: string
|
||||
}
|
||||
faviconUrl?: string;
|
||||
name: string;
|
||||
themeColor?: string;
|
||||
};
|
||||
}>();
|
||||
|
||||
let ticker = $ref<HTMLElement | null>(null);
|
||||
|
||||
// if no instance data is given, this is for the local instance
|
||||
const instance = props.instance ?? {
|
||||
faviconUrl: Instance.iconUrl || Instance.faviconUrl || '/favicon.ico',
|
||||
faviconUrl: Instance.iconUrl || Instance.faviconUrl || "/favicon.ico",
|
||||
name: instanceName,
|
||||
themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
|
||||
themeColor: (
|
||||
document.querySelector(
|
||||
'meta[name="theme-color-orig"]'
|
||||
) as HTMLMetaElement
|
||||
)?.content,
|
||||
};
|
||||
|
||||
const computedStyle = getComputedStyle(document.documentElement);
|
||||
const themeColor = instance.themeColor ?? computedStyle.getPropertyValue('--bg');
|
||||
const themeColor =
|
||||
instance.themeColor ?? computedStyle.getPropertyValue("--bg");
|
||||
|
||||
const bg = {
|
||||
background: `linear-gradient(90deg, ${themeColor}, ${themeColor}55)`,
|
||||
};
|
||||
|
||||
function getInstanceIcon(instance): string {
|
||||
return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
|
||||
return (
|
||||
getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
|
||||
getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
|
||||
"/client-assets/dummy.png"
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -48,10 +57,10 @@ function getInstanceIcon(instance): string {
|
|||
align-items: center;
|
||||
height: 1.1em;
|
||||
justify-self: flex-end;
|
||||
padding: .2em .4em;
|
||||
padding: .2em .4em;
|
||||
padding: 0.2em 0.4em;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 100px;
|
||||
font-size: .8em;
|
||||
font-size: 0.8em;
|
||||
text-shadow: 0 2px 2px var(--shadow);
|
||||
overflow: hidden;
|
||||
.header > .body & {
|
||||
|
|
@ -80,11 +89,14 @@ function getInstanceIcon(instance): string {
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg), -1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
|
||||
.article > .main &, .header > .body & {
|
||||
text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg),
|
||||
-1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
|
||||
.article > .main &,
|
||||
.header > .body & {
|
||||
display: unset;
|
||||
}
|
||||
.article > .main &, .header > .body & {
|
||||
.article > .main &,
|
||||
.header > .body & {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,39 @@
|
|||
<template>
|
||||
<div class="alqyeyti" :class="{ oneline }">
|
||||
<div class="key">
|
||||
<slot name="key"></slot>
|
||||
<div class="alqyeyti" :class="{ oneline }">
|
||||
<div class="key">
|
||||
<slot name="key"></slot>
|
||||
</div>
|
||||
<div class="value">
|
||||
<slot name="value"></slot>
|
||||
<button
|
||||
v-if="copy"
|
||||
v-tooltip="i18n.ts.copy"
|
||||
class="_textButton"
|
||||
style="margin-left: 0.5em"
|
||||
@click="copy_"
|
||||
>
|
||||
<i class="ph-clipboard-text ph-bold"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="value">
|
||||
<slot name="value"></slot>
|
||||
<button v-if="copy" v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="ph-clipboard-text ph-bold"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import copyToClipboard from '@/scripts/copy-to-clipboard';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import {} from "vue";
|
||||
import copyToClipboard from "@/scripts/copy-to-clipboard";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
copy?: string | null;
|
||||
oneline?: boolean;
|
||||
}>(), {
|
||||
copy: null,
|
||||
oneline: false,
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
copy?: string | null;
|
||||
oneline?: boolean;
|
||||
}>(),
|
||||
{
|
||||
copy: null,
|
||||
oneline: false,
|
||||
}
|
||||
);
|
||||
|
||||
const copy_ = () => {
|
||||
copyToClipboard(props.copy);
|
||||
|
|
|
|||
|
|
@ -1,61 +1,103 @@
|
|||
<template>
|
||||
<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :anchor="anchor" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
|
||||
<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
|
||||
<div class="main">
|
||||
<template v-for="item in items">
|
||||
<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
|
||||
<i class="icon" :class="item.icon"></i>
|
||||
<div class="text">{{ item.text }}</div>
|
||||
<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
|
||||
</button>
|
||||
<MkA v-else v-click-anime :to="item.to" @click.passive="close()">
|
||||
<i class="icon" :class="item.icon"></i>
|
||||
<div class="text">{{ item.text }}</div>
|
||||
<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
|
||||
</MkA>
|
||||
</template>
|
||||
<MkModal
|
||||
ref="modal"
|
||||
v-slot="{ type, maxHeight }"
|
||||
:prefer-type="preferedModalType"
|
||||
:anchor="anchor"
|
||||
:transparent-bg="true"
|
||||
:src="src"
|
||||
@click="modal.close()"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<div
|
||||
class="szkkfdyq _popup _shadow"
|
||||
:class="{ asDrawer: type === 'drawer' }"
|
||||
:style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }"
|
||||
>
|
||||
<div class="main">
|
||||
<template v-for="item in items">
|
||||
<button
|
||||
v-if="item.action"
|
||||
v-click-anime
|
||||
class="_button"
|
||||
@click="
|
||||
($event) => {
|
||||
item.action($event);
|
||||
close();
|
||||
}
|
||||
"
|
||||
>
|
||||
<i class="icon" :class="item.icon"></i>
|
||||
<div class="text">{{ item.text }}</div>
|
||||
<span v-if="item.indicate" class="indicator"
|
||||
><i class="ph-circle ph-fill"></i
|
||||
></span>
|
||||
</button>
|
||||
<MkA
|
||||
v-else
|
||||
v-click-anime
|
||||
:to="item.to"
|
||||
@click.passive="close()"
|
||||
>
|
||||
<i class="icon" :class="item.icon"></i>
|
||||
<div class="text">{{ item.text }}</div>
|
||||
<span v-if="item.indicate" class="indicator"
|
||||
><i class="ph-circle ph-fill"></i
|
||||
></span>
|
||||
</MkA>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MkModal>
|
||||
</MkModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import MkModal from '@/components/MkModal.vue';
|
||||
import { navbarItemDef } from '@/navbar';
|
||||
import { instanceName } from '@/config';
|
||||
import { defaultStore } from '@/store';
|
||||
import { i18n } from '@/i18n';
|
||||
import { deviceKind } from '@/scripts/device-kind';
|
||||
import * as os from '@/os';
|
||||
import {} from "vue";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import { navbarItemDef } from "@/navbar";
|
||||
import { instanceName } from "@/config";
|
||||
import { defaultStore } from "@/store";
|
||||
import { i18n } from "@/i18n";
|
||||
import { deviceKind } from "@/scripts/device-kind";
|
||||
import * as os from "@/os";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
src?: HTMLElement;
|
||||
anchor?: { x: string; y: string; };
|
||||
}>(), {
|
||||
anchor: () => ({ x: 'right', y: 'center' }),
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
src?: HTMLElement;
|
||||
anchor?: { x: string; y: string };
|
||||
}>(),
|
||||
{
|
||||
anchor: () => ({ x: "right", y: "center" }),
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
const preferedModalType = (deviceKind === 'desktop' && props.src != null) ? 'popup' :
|
||||
deviceKind === 'smartphone' ? 'drawer' :
|
||||
'dialog';
|
||||
const preferedModalType =
|
||||
deviceKind === "desktop" && props.src != null
|
||||
? "popup"
|
||||
: deviceKind === "smartphone"
|
||||
? "drawer"
|
||||
: "dialog";
|
||||
|
||||
const modal = $ref<InstanceType<typeof MkModal>>();
|
||||
|
||||
const menu = defaultStore.state.menu;
|
||||
|
||||
const items = Object.keys(navbarItemDef).filter(k => !menu.includes(k)).map(k => navbarItemDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
|
||||
type: def.to ? 'link' : 'button',
|
||||
text: i18n.ts[def.title],
|
||||
icon: def.icon,
|
||||
to: def.to,
|
||||
action: def.action,
|
||||
indicate: def.indicated,
|
||||
}));
|
||||
const items = Object.keys(navbarItemDef)
|
||||
.filter((k) => !menu.includes(k))
|
||||
.map((k) => navbarItemDef[k])
|
||||
.filter((def) => (def.show == null ? true : def.show))
|
||||
.map((def) => ({
|
||||
type: def.to ? "link" : "button",
|
||||
text: i18n.ts[def.title],
|
||||
icon: def.icon,
|
||||
to: def.to,
|
||||
action: def.action,
|
||||
indicate: def.indicated,
|
||||
}));
|
||||
|
||||
function close() {
|
||||
modal.close();
|
||||
|
|
@ -82,7 +124,8 @@ function close() {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
> .main, > .sub {
|
||||
> .main,
|
||||
> .sub {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,36 +1,55 @@
|
|||
<template>
|
||||
<component :is="self ? 'MkA' : 'a'" ref="el" class="xlcxczvw _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
|
||||
:title="url" @click.stop
|
||||
>
|
||||
<slot></slot>
|
||||
<i v-if="target === '_blank'" class="ph-arrow-square-out ph-bold ph-lg icon"></i>
|
||||
</component>
|
||||
<component
|
||||
:is="self ? 'MkA' : 'a'"
|
||||
ref="el"
|
||||
class="xlcxczvw _link"
|
||||
:[attr]="self ? url.substr(local.length) : url"
|
||||
:rel="rel"
|
||||
:target="target"
|
||||
:title="url"
|
||||
@click.stop
|
||||
>
|
||||
<slot></slot>
|
||||
<i
|
||||
v-if="target === '_blank'"
|
||||
class="ph-arrow-square-out ph-bold ph-lg icon"
|
||||
></i>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
import { url as local } from '@/config';
|
||||
import { useTooltip } from '@/scripts/use-tooltip';
|
||||
import * as os from '@/os';
|
||||
import { defineAsyncComponent } from "vue";
|
||||
import { url as local } from "@/config";
|
||||
import { useTooltip } from "@/scripts/use-tooltip";
|
||||
import * as os from "@/os";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
url: string;
|
||||
rel?: null | string;
|
||||
}>(), {
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
url: string;
|
||||
rel?: null | string;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const self = props.url.startsWith(local);
|
||||
const attr = self ? 'to' : 'href';
|
||||
const target = self ? null : '_blank';
|
||||
const attr = self ? "to" : "href";
|
||||
const target = self ? null : "_blank";
|
||||
|
||||
const el = $ref();
|
||||
|
||||
useTooltip($$(el), (showing) => {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
|
||||
showing,
|
||||
url: props.url,
|
||||
source: el,
|
||||
}, {}, 'closed');
|
||||
os.popup(
|
||||
defineAsyncComponent(
|
||||
() => import("@/components/MkUrlPreviewPopup.vue")
|
||||
),
|
||||
{
|
||||
showing,
|
||||
url: props.url,
|
||||
source: el,
|
||||
},
|
||||
{},
|
||||
"closed"
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -40,7 +59,7 @@ useTooltip($$(el), (showing) => {
|
|||
|
||||
> .icon {
|
||||
padding-left: 2px;
|
||||
font-size: .9em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script lang="ts">
|
||||
import { h, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { h, onMounted, onUnmounted, ref, watch } from "vue";
|
||||
|
||||
export default {
|
||||
name: 'MarqueeText',
|
||||
name: "MarqueeText",
|
||||
props: {
|
||||
duration: {
|
||||
type: Number,
|
||||
|
|
@ -38,37 +38,35 @@ export default {
|
|||
calc();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
});
|
||||
onUnmounted(() => {});
|
||||
|
||||
return {
|
||||
contentEl,
|
||||
};
|
||||
},
|
||||
render({
|
||||
$slots, $style, $props: {
|
||||
duration, repeat, paused, reverse,
|
||||
},
|
||||
}) {
|
||||
return h('div', { class: [$style.wrap] }, [
|
||||
h('span', {
|
||||
ref: 'contentEl',
|
||||
class: [
|
||||
paused
|
||||
? $style.paused
|
||||
: undefined,
|
||||
$style.content,
|
||||
],
|
||||
}, Array(repeat).fill(
|
||||
h('span', {
|
||||
class: $style.text,
|
||||
style: {
|
||||
animationDirection: reverse
|
||||
? 'reverse'
|
||||
: undefined,
|
||||
},
|
||||
}, $slots.default()),
|
||||
)),
|
||||
render({ $slots, $style, $props: { duration, repeat, paused, reverse } }) {
|
||||
return h("div", { class: [$style.wrap] }, [
|
||||
h(
|
||||
"span",
|
||||
{
|
||||
ref: "contentEl",
|
||||
class: [paused ? $style.paused : undefined, $style.content],
|
||||
},
|
||||
Array(repeat).fill(
|
||||
h(
|
||||
"span",
|
||||
{
|
||||
class: $style.text,
|
||||
style: {
|
||||
animationDirection: reverse
|
||||
? "reverse"
|
||||
: undefined,
|
||||
},
|
||||
},
|
||||
$slots.default()
|
||||
)
|
||||
)
|
||||
),
|
||||
]);
|
||||
},
|
||||
};
|
||||
|
|
@ -100,7 +98,11 @@ export default {
|
|||
animation-play-state: paused;
|
||||
}
|
||||
@keyframes marquee {
|
||||
0% { transform:translateX(0); }
|
||||
100% { transform:translateX(-100%); }
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,70 +1,84 @@
|
|||
<template>
|
||||
<div class="mk-media-banner">
|
||||
<div v-if="media.isSensitive && hide" class="sensitive" @click="hide = false">
|
||||
<span class="icon"><i class="ph-warning ph-bold ph-lg"></i></span>
|
||||
<b>{{ i18n.ts.sensitive }}</b>
|
||||
<span>{{ i18n.ts.clickToShow }}</span>
|
||||
</div>
|
||||
<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
|
||||
<VuePlyr
|
||||
:options="{
|
||||
controls: [
|
||||
'play-large',
|
||||
'play',
|
||||
'progress',
|
||||
'current-time',
|
||||
'mute',
|
||||
'volume',
|
||||
'download',
|
||||
],
|
||||
disableContextMenu: false,
|
||||
}"
|
||||
<div class="mk-media-banner">
|
||||
<div
|
||||
v-if="media.isSensitive && hide"
|
||||
class="sensitive"
|
||||
@click="hide = false"
|
||||
>
|
||||
<audio
|
||||
ref="audioEl"
|
||||
class="audio"
|
||||
:src="media.url"
|
||||
:title="media.name"
|
||||
controls
|
||||
preload="metadata"
|
||||
@volumechange="volumechange"
|
||||
/>
|
||||
</VuePlyr>
|
||||
<span class="icon"><i class="ph-warning ph-bold ph-lg"></i></span>
|
||||
<b>{{ i18n.ts.sensitive }}</b>
|
||||
<span>{{ i18n.ts.clickToShow }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
media.type.startsWith('audio') && media.type !== 'audio/midi'
|
||||
"
|
||||
class="audio"
|
||||
>
|
||||
<VuePlyr
|
||||
:options="{
|
||||
controls: [
|
||||
'play-large',
|
||||
'play',
|
||||
'progress',
|
||||
'current-time',
|
||||
'mute',
|
||||
'volume',
|
||||
'download',
|
||||
],
|
||||
disableContextMenu: false,
|
||||
}"
|
||||
>
|
||||
<audio
|
||||
ref="audioEl"
|
||||
class="audio"
|
||||
:src="media.url"
|
||||
:title="media.name"
|
||||
controls
|
||||
preload="metadata"
|
||||
@volumechange="volumechange"
|
||||
/>
|
||||
</VuePlyr>
|
||||
</div>
|
||||
<a
|
||||
v-else
|
||||
class="download"
|
||||
:href="media.url"
|
||||
:title="media.name"
|
||||
:download="media.name"
|
||||
>
|
||||
<span class="icon"
|
||||
><i class="ph-download-simple ph-bold ph-lg"></i
|
||||
></span>
|
||||
<b>{{ media.name }}</b>
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
v-else class="download"
|
||||
:href="media.url"
|
||||
:title="media.name"
|
||||
:download="media.name"
|
||||
>
|
||||
<span class="icon"><i class="ph-download-simple ph-bold ph-lg"></i></span>
|
||||
<b>{{ media.name }}</b>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue';
|
||||
import VuePlyr from 'vue-plyr';
|
||||
import type * as misskey from 'calckey-js';
|
||||
import { ColdDeviceStorage } from '@/store';
|
||||
import 'vue-plyr/dist/vue-plyr.css';
|
||||
import { i18n } from '@/i18n';
|
||||
import { onMounted } from "vue";
|
||||
import VuePlyr from "vue-plyr";
|
||||
import type * as misskey from "calckey-js";
|
||||
import { ColdDeviceStorage } from "@/store";
|
||||
import "vue-plyr/dist/vue-plyr.css";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
media: misskey.entities.DriveFile;
|
||||
}>(), {
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
media: misskey.entities.DriveFile;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const audioEl = $ref<HTMLAudioElement | null>();
|
||||
let hide = $ref(true);
|
||||
|
||||
function volumechange() {
|
||||
if (audioEl) ColdDeviceStorage.set('mediaVolume', audioEl.volume);
|
||||
if (audioEl) ColdDeviceStorage.set("mediaVolume", audioEl.volume);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume');
|
||||
if (audioEl) audioEl.volume = ColdDeviceStorage.get("mediaVolume");
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -97,7 +111,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: .2em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
|
|
|
|||
|
|
@ -1,45 +1,81 @@
|
|||
<template>
|
||||
<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
|
||||
<div class="container">
|
||||
<div class="fullwidth top-caption">
|
||||
<div class="mk-dialog">
|
||||
<header>
|
||||
<Mfm v-if="title" class="title" :text="title"/>
|
||||
<span class="text-count" :class="{ over: remainingLength < 0 }">{{ remainingLength }}</span>
|
||||
<br/>
|
||||
</header>
|
||||
<textarea id="captioninput" v-model="inputValue" autofocus :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
|
||||
<div v-if="(showOkButton || showCaptionButton || showCancelButton)" class="buttons">
|
||||
<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ i18n.ts.ok }}</MkButton>
|
||||
<MkButton inline @click="caption">{{ i18n.ts.caption }}</MkButton>
|
||||
<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
|
||||
<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
|
||||
<div class="container">
|
||||
<div class="fullwidth top-caption">
|
||||
<div class="mk-dialog">
|
||||
<header>
|
||||
<Mfm v-if="title" class="title" :text="title" />
|
||||
<span
|
||||
class="text-count"
|
||||
:class="{ over: remainingLength < 0 }"
|
||||
>{{ remainingLength }}</span
|
||||
>
|
||||
<br />
|
||||
</header>
|
||||
<textarea
|
||||
id="captioninput"
|
||||
v-model="inputValue"
|
||||
autofocus
|
||||
:placeholder="input.placeholder"
|
||||
@keydown="onInputKeydown"
|
||||
></textarea>
|
||||
<div
|
||||
v-if="
|
||||
showOkButton ||
|
||||
showCaptionButton ||
|
||||
showCancelButton
|
||||
"
|
||||
class="buttons"
|
||||
>
|
||||
<MkButton
|
||||
inline
|
||||
primary
|
||||
:disabled="remainingLength < 0"
|
||||
@click="ok"
|
||||
>{{ i18n.ts.ok }}</MkButton
|
||||
>
|
||||
<MkButton inline @click="caption">{{
|
||||
i18n.ts.caption
|
||||
}}</MkButton>
|
||||
<MkButton inline @click="cancel">{{
|
||||
i18n.ts.cancel
|
||||
}}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hdrwpsaf fullwidth">
|
||||
<header>{{ image.name }}</header>
|
||||
<img
|
||||
id="imgtocaption"
|
||||
:src="image.url"
|
||||
:alt="image.comment"
|
||||
:title="image.comment"
|
||||
@click="$refs.modal.close()"
|
||||
/>
|
||||
<footer>
|
||||
<span>{{ image.type }}</span>
|
||||
<span>{{ bytes(image.size) }}</span>
|
||||
<span v-if="image.properties && image.properties.width"
|
||||
>{{ number(image.properties.width) }}px ×
|
||||
{{ number(image.properties.height) }}px</span
|
||||
>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hdrwpsaf fullwidth">
|
||||
<header>{{ image.name }}</header>
|
||||
<img id="imgtocaption" :src="image.url" :alt="image.comment" :title="image.comment" @click="$refs.modal.close()"/>
|
||||
<footer>
|
||||
<span>{{ image.type }}</span>
|
||||
<span>{{ bytes(image.size) }}</span>
|
||||
<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</MkModal>
|
||||
</MkModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import insertTextAtCursor from 'insert-text-at-cursor';
|
||||
import { length } from 'stringz';
|
||||
import * as os from '@/os';
|
||||
import MkModal from '@/components/MkModal.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import bytes from '@/filters/bytes';
|
||||
import number from '@/filters/number';
|
||||
import { i18n } from '@/i18n';
|
||||
import { instance } from '@/instance';
|
||||
import { defineComponent } from "vue";
|
||||
import insertTextAtCursor from "insert-text-at-cursor";
|
||||
import { length } from "stringz";
|
||||
import * as os from "@/os";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import bytes from "@/filters/bytes";
|
||||
import number from "@/filters/number";
|
||||
import { i18n } from "@/i18n";
|
||||
import { instance } from "@/instance";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
|
@ -77,7 +113,7 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
|
||||
emits: ['done', 'closed'],
|
||||
emits: ["done", "closed"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -91,15 +127,15 @@ export default defineComponent({
|
|||
const maxCaptionLength = instance.maxCaptionTextLength ?? 512;
|
||||
if (typeof this.inputValue !== "string") return maxCaptionLength;
|
||||
return maxCaptionLength - length(this.inputValue);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
document.addEventListener('keydown', this.onKeydown);
|
||||
document.addEventListener("keydown", this.onKeydown);
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
document.removeEventListener('keydown', this.onKeydown);
|
||||
document.removeEventListener("keydown", this.onKeydown);
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -107,7 +143,7 @@ export default defineComponent({
|
|||
number,
|
||||
|
||||
done(canceled, result?) {
|
||||
this.$emit('done', { canceled, result });
|
||||
this.$emit("done", { canceled, result });
|
||||
this.$refs.modal.close();
|
||||
},
|
||||
|
||||
|
|
@ -129,13 +165,15 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
onKeydown(evt) {
|
||||
if (evt.which === 27) { // ESC
|
||||
if (evt.which === 27) {
|
||||
// ESC
|
||||
this.cancel();
|
||||
}
|
||||
},
|
||||
|
||||
onInputKeydown(evt) {
|
||||
if (evt.which === 13) { // Enter
|
||||
if (evt.which === 13) {
|
||||
// Enter
|
||||
if (evt.ctrlKey) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
|
|
@ -145,12 +183,16 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
caption() {
|
||||
const img = document.getElementById('imgtocaption') as HTMLImageElement;
|
||||
const ta = document.getElementById('captioninput') as HTMLTextAreaElement;
|
||||
os.api('drive/files/caption-image', {
|
||||
const img = document.getElementById(
|
||||
"imgtocaption"
|
||||
) as HTMLImageElement;
|
||||
const ta = document.getElementById(
|
||||
"captioninput"
|
||||
) as HTMLTextAreaElement;
|
||||
os.api("drive/files/caption-image", {
|
||||
url: img.src,
|
||||
}).then(text => {
|
||||
insertTextAtCursor(ta, text.slice(0, (512 - ta.value.length)));
|
||||
}).then((text) => {
|
||||
insertTextAtCursor(ta, text.slice(0, 512 - ta.value.length));
|
||||
});
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,32 +1,50 @@
|
|||
<template>
|
||||
<div v-if="hide" class="qjewsnkg" @click="hide = false">
|
||||
<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
|
||||
<div class="text">
|
||||
<div class="wrapper">
|
||||
<b style="display: block;"><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
|
||||
<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
|
||||
<div v-if="hide" class="qjewsnkg" @click="hide = false">
|
||||
<ImgWithBlurhash
|
||||
class="bg"
|
||||
:hash="image.blurhash"
|
||||
:title="image.comment"
|
||||
:alt="image.comment"
|
||||
/>
|
||||
<div class="text">
|
||||
<div class="wrapper">
|
||||
<b style="display: block"
|
||||
><i class="ph-warning ph-bold ph-lg"></i>
|
||||
{{ i18n.ts.sensitive }}</b
|
||||
>
|
||||
<span style="display: block">{{ i18n.ts.clickToShow }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="gqnyydlz">
|
||||
<a
|
||||
:href="image.url"
|
||||
:title="image.name"
|
||||
>
|
||||
<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :type="image.type" :title="image.comment" :cover="false"/>
|
||||
<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
|
||||
</a>
|
||||
<button v-tooltip="i18n.ts.hide" class="_button hide" @click="hide = true"><i class="ph-eye-slash ph-bold ph-lg"></i></button>
|
||||
</div>
|
||||
<div v-else class="gqnyydlz">
|
||||
<a :href="image.url" :title="image.name">
|
||||
<ImgWithBlurhash
|
||||
:hash="image.blurhash"
|
||||
:src="url"
|
||||
:alt="image.comment"
|
||||
:type="image.type"
|
||||
:title="image.comment"
|
||||
:cover="false"
|
||||
/>
|
||||
<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
|
||||
</a>
|
||||
<button
|
||||
v-tooltip="i18n.ts.hide"
|
||||
class="_button hide"
|
||||
@click="hide = true"
|
||||
>
|
||||
<i class="ph-eye-slash ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { watch } from 'vue';
|
||||
import type * as misskey from 'calckey-js';
|
||||
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
|
||||
import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
|
||||
import { defaultStore } from '@/store';
|
||||
import { i18n } from '@/i18n';
|
||||
import { watch } from "vue";
|
||||
import type * as misskey from "calckey-js";
|
||||
import { getStaticImageUrl } from "@/scripts/get-static-image-url";
|
||||
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
|
||||
import { defaultStore } from "@/store";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
image: misskey.entities.DriveFile;
|
||||
|
|
@ -35,19 +53,28 @@ const props = defineProps<{
|
|||
|
||||
let hide = $ref(true);
|
||||
|
||||
const url = (props.raw || defaultStore.state.loadRawImages)
|
||||
? props.image.url
|
||||
: defaultStore.state.disableShowingAnimatedImages
|
||||
const url =
|
||||
props.raw || defaultStore.state.loadRawImages
|
||||
? props.image.url
|
||||
: defaultStore.state.disableShowingAnimatedImages
|
||||
? getStaticImageUrl(props.image.thumbnailUrl)
|
||||
: props.image.thumbnailUrl;
|
||||
|
||||
// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
|
||||
watch(() => props.image, () => {
|
||||
hide = (defaultStore.state.nsfw === 'force') ? true : props.image.isSensitive && (defaultStore.state.nsfw !== 'ignore');
|
||||
}, {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
});
|
||||
watch(
|
||||
() => props.image,
|
||||
() => {
|
||||
hide =
|
||||
defaultStore.state.nsfw === "force"
|
||||
? true
|
||||
: props.image.isSensitive &&
|
||||
defaultStore.state.nsfw !== "ignore";
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -120,7 +147,7 @@ watch(() => props.image, () => {
|
|||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
left: 12px;
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
padding: 0 6px;
|
||||
text-align: center;
|
||||
top: 12px;
|
||||
|
|
|
|||
|
|
@ -1,29 +1,58 @@
|
|||
<template>
|
||||
<div class="hoawjimk">
|
||||
<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
|
||||
<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" :class="{ dmWidth: inDm }">
|
||||
<div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length" @click.stop>
|
||||
<template v-for="media in mediaList.filter(media => previewable(media))">
|
||||
<XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/>
|
||||
<XImage v-else-if="media.type.startsWith('image')" :key="media.id" class="image" :data-id="media.id" :image="media" :raw="raw"/>
|
||||
</template>
|
||||
<div class="hoawjimk">
|
||||
<XBanner
|
||||
v-for="media in mediaList.filter((media) => !previewable(media))"
|
||||
:key="media.id"
|
||||
:media="media"
|
||||
/>
|
||||
<div
|
||||
v-if="mediaList.filter((media) => previewable(media)).length > 0"
|
||||
class="gird-container"
|
||||
:class="{ dmWidth: inDm }"
|
||||
>
|
||||
<div
|
||||
ref="gallery"
|
||||
:data-count="
|
||||
mediaList.filter((media) => previewable(media)).length
|
||||
"
|
||||
@click.stop
|
||||
>
|
||||
<template
|
||||
v-for="media in mediaList.filter((media) =>
|
||||
previewable(media)
|
||||
)"
|
||||
>
|
||||
<XVideo
|
||||
v-if="media.type.startsWith('video')"
|
||||
:key="media.id"
|
||||
:video="media"
|
||||
/>
|
||||
<XImage
|
||||
v-else-if="media.type.startsWith('image')"
|
||||
:key="media.id"
|
||||
class="image"
|
||||
:data-id="media.id"
|
||||
:image="media"
|
||||
:raw="raw"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import * as misskey from 'calckey-js';
|
||||
import PhotoSwipeLightbox from 'photoswipe/lightbox';
|
||||
import PhotoSwipe from 'photoswipe';
|
||||
import 'photoswipe/style.css';
|
||||
import XBanner from '@/components/MkMediaBanner.vue';
|
||||
import XImage from '@/components/MkMediaImage.vue';
|
||||
import XVideo from '@/components/MkMediaVideo.vue';
|
||||
import * as os from '@/os';
|
||||
import { FILE_TYPE_BROWSERSAFE } from '@/const';
|
||||
import { defaultStore } from '@/store';
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as misskey from "calckey-js";
|
||||
import PhotoSwipeLightbox from "photoswipe/lightbox";
|
||||
import PhotoSwipe from "photoswipe";
|
||||
import "photoswipe/style.css";
|
||||
import XBanner from "@/components/MkMediaBanner.vue";
|
||||
import XImage from "@/components/MkMediaImage.vue";
|
||||
import XVideo from "@/components/MkMediaVideo.vue";
|
||||
import * as os from "@/os";
|
||||
import { FILE_TYPE_BROWSERSAFE } from "@/const";
|
||||
import { defaultStore } from "@/store";
|
||||
|
||||
const props = defineProps<{
|
||||
mediaList: misskey.entities.DriveFile[];
|
||||
|
|
@ -32,60 +61,72 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const gallery = ref(null);
|
||||
const pswpZIndex = os.claimZIndex('middle');
|
||||
const pswpZIndex = os.claimZIndex("middle");
|
||||
|
||||
onMounted(() => {
|
||||
const lightbox = new PhotoSwipeLightbox({
|
||||
dataSource: props.mediaList
|
||||
.filter(media => {
|
||||
if (media.type === 'image/svg+xml') return true; // svgのwebpublicはpngなのでtrue
|
||||
return media.type.startsWith('image') && FILE_TYPE_BROWSERSAFE.includes(media.type);
|
||||
.filter((media) => {
|
||||
if (media.type === "image/svg+xml") return true; // svgのwebpublicはpngなのでtrue
|
||||
return (
|
||||
media.type.startsWith("image") &&
|
||||
FILE_TYPE_BROWSERSAFE.includes(media.type)
|
||||
);
|
||||
})
|
||||
.map(media => {
|
||||
.map((media) => {
|
||||
const item = {
|
||||
src: media.url,
|
||||
w: media.properties.width,
|
||||
h: media.properties.height,
|
||||
alt: media.comment,
|
||||
};
|
||||
if (media.properties.orientation != null && media.properties.orientation >= 5) {
|
||||
if (
|
||||
media.properties.orientation != null &&
|
||||
media.properties.orientation >= 5
|
||||
) {
|
||||
[item.w, item.h] = [item.h, item.w];
|
||||
}
|
||||
return item;
|
||||
}),
|
||||
gallery: gallery.value,
|
||||
children: '.image',
|
||||
thumbSelector: '.image',
|
||||
children: ".image",
|
||||
thumbSelector: ".image",
|
||||
loop: false,
|
||||
padding: window.innerWidth > 500 ? {
|
||||
top: 32,
|
||||
bottom: 32,
|
||||
left: 32,
|
||||
right: 32,
|
||||
} : {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
imageClickAction: 'close',
|
||||
tapAction: 'toggle-controls',
|
||||
padding:
|
||||
window.innerWidth > 500
|
||||
? {
|
||||
top: 32,
|
||||
bottom: 32,
|
||||
left: 32,
|
||||
right: 32,
|
||||
}
|
||||
: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
imageClickAction: "close",
|
||||
tapAction: "toggle-controls",
|
||||
pswpModule: PhotoSwipe,
|
||||
});
|
||||
|
||||
lightbox.on('itemData', (ev) => {
|
||||
lightbox.on("itemData", (ev) => {
|
||||
const { itemData } = ev;
|
||||
|
||||
// element is children
|
||||
const { element } = itemData;
|
||||
|
||||
const id = element.dataset.id;
|
||||
const file = props.mediaList.find(media => media.id === id);
|
||||
const file = props.mediaList.find((media) => media.id === id);
|
||||
|
||||
itemData.src = file.url;
|
||||
itemData.w = Number(file.properties.width);
|
||||
itemData.h = Number(file.properties.height);
|
||||
if (file.properties.orientation != null && file.properties.orientation >= 5) {
|
||||
if (
|
||||
file.properties.orientation != null &&
|
||||
file.properties.orientation >= 5
|
||||
) {
|
||||
[itemData.w, itemData.h] = [itemData.h, itemData.w];
|
||||
}
|
||||
itemData.msrc = file.thumbnailUrl;
|
||||
|
|
@ -93,17 +134,17 @@ onMounted(() => {
|
|||
itemData.thumbCropped = true;
|
||||
});
|
||||
|
||||
lightbox.on('uiRegister', () => {
|
||||
lightbox.on("uiRegister", () => {
|
||||
lightbox.pswp.ui.registerElement({
|
||||
name: 'altText',
|
||||
className: 'pwsp__alt-text-container',
|
||||
appendTo: 'wrapper',
|
||||
name: "altText",
|
||||
className: "pwsp__alt-text-container",
|
||||
appendTo: "wrapper",
|
||||
onInit: (el, pwsp) => {
|
||||
let textBox = document.createElement('p');
|
||||
textBox.className = 'pwsp__alt-text';
|
||||
let textBox = document.createElement("p");
|
||||
textBox.className = "pwsp__alt-text";
|
||||
el.appendChild(textBox);
|
||||
|
||||
let preventProp = function(ev: Event): void {
|
||||
let preventProp = function (ev: Event): void {
|
||||
ev.stopPropagation();
|
||||
};
|
||||
|
||||
|
|
@ -114,7 +155,7 @@ onMounted(() => {
|
|||
el.onpointercancel = preventProp;
|
||||
el.onpointermove = preventProp;
|
||||
|
||||
pwsp.on('change', () => {
|
||||
pwsp.on("change", () => {
|
||||
textBox.textContent = pwsp.currSlide.data.alt?.trim();
|
||||
});
|
||||
},
|
||||
|
|
@ -125,15 +166,17 @@ onMounted(() => {
|
|||
});
|
||||
|
||||
const previewable = (file: misskey.entities.DriveFile): boolean => {
|
||||
if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
|
||||
if (file.type === "image/svg+xml") return true; // svgのwebpublic/thumbnailはpngなのでtrue
|
||||
// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
|
||||
return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
|
||||
return (
|
||||
(file.type.startsWith("video") || file.type.startsWith("image")) &&
|
||||
FILE_TYPE_BROWSERSAFE.includes(file.type)
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hoawjimk {
|
||||
|
||||
> .dmWidth {
|
||||
min-width: 20rem;
|
||||
max-width: 40rem;
|
||||
|
|
@ -147,9 +190,9 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
|
|||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
padding-top: 56.25% // 16:9;
|
||||
padding-top: 56.25%; // 16:9;
|
||||
}
|
||||
|
||||
> div {
|
||||
|
|
@ -221,7 +264,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
|
|||
<style lang="scss">
|
||||
.pswp {
|
||||
// なぜか機能しない
|
||||
//z-index: v-bind(pswpZIndex);
|
||||
//z-index: v-bind(pswpZIndex);
|
||||
z-index: 2000000;
|
||||
}
|
||||
.pwsp__alt-text-container {
|
||||
|
|
@ -254,5 +297,4 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
|
|||
.pwsp__alt-text:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,58 +1,66 @@
|
|||
<template>
|
||||
<div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
|
||||
<div>
|
||||
<b><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
|
||||
<span>{{ i18n.ts.clickToShow }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
|
||||
<VuePlyr
|
||||
:options="{
|
||||
controls: [
|
||||
'play-large',
|
||||
'play',
|
||||
'progress',
|
||||
'current-time',
|
||||
'mute',
|
||||
'volume',
|
||||
'pip',
|
||||
'download',
|
||||
'fullscreen'
|
||||
],
|
||||
disableContextMenu: false,
|
||||
}"
|
||||
<div
|
||||
v-if="hide"
|
||||
class="icozogqfvdetwohsdglrbswgrejoxbdj"
|
||||
@click="hide = false"
|
||||
>
|
||||
<video
|
||||
:poster="video.thumbnailUrl"
|
||||
:title="video.comment"
|
||||
:aria-label="video.comment"
|
||||
preload="none"
|
||||
controls
|
||||
@contextmenu.stop
|
||||
>
|
||||
<source
|
||||
:src="video.url"
|
||||
:type="video.type"
|
||||
<div>
|
||||
<b
|
||||
><i class="ph-warning ph-bold ph-lg"></i>
|
||||
{{ i18n.ts.sensitive }}</b
|
||||
>
|
||||
</video>
|
||||
</VuePlyr>
|
||||
<i class="ph-eye-slash ph-bold ph-lg" @click="hide = true"></i>
|
||||
</div>
|
||||
<span>{{ i18n.ts.clickToShow }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
|
||||
<VuePlyr
|
||||
:options="{
|
||||
controls: [
|
||||
'play-large',
|
||||
'play',
|
||||
'progress',
|
||||
'current-time',
|
||||
'mute',
|
||||
'volume',
|
||||
'pip',
|
||||
'download',
|
||||
'fullscreen',
|
||||
],
|
||||
disableContextMenu: false,
|
||||
}"
|
||||
>
|
||||
<video
|
||||
:poster="video.thumbnailUrl"
|
||||
:title="video.comment"
|
||||
:aria-label="video.comment"
|
||||
preload="none"
|
||||
controls
|
||||
@contextmenu.stop
|
||||
>
|
||||
<source :src="video.url" :type="video.type" />
|
||||
</video>
|
||||
</VuePlyr>
|
||||
<i class="ph-eye-slash ph-bold ph-lg" @click="hide = true"></i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import VuePlyr from 'vue-plyr';
|
||||
import type * as misskey from 'calckey-js';
|
||||
import { defaultStore } from '@/store';
|
||||
import 'vue-plyr/dist/vue-plyr.css';
|
||||
import { i18n } from '@/i18n';
|
||||
import { ref } from "vue";
|
||||
import VuePlyr from "vue-plyr";
|
||||
import type * as misskey from "calckey-js";
|
||||
import { defaultStore } from "@/store";
|
||||
import "vue-plyr/dist/vue-plyr.css";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
video: misskey.entities.DriveFile;
|
||||
}>();
|
||||
|
||||
const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
|
||||
const hide = ref(
|
||||
defaultStore.state.nsfw === "force"
|
||||
? true
|
||||
: props.video.isSensitive && defaultStore.state.nsfw !== "ignore"
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -67,7 +75,7 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
|
|||
background-color: var(--fg);
|
||||
color: var(--accentLighten);
|
||||
font-size: 14px;
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
padding: 3px 6px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -1,40 +1,68 @@
|
|||
<template>
|
||||
<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }" @click.stop>
|
||||
<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
|
||||
<span class="main">
|
||||
<span class="username">@{{ username }}</span>
|
||||
<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
|
||||
</span>
|
||||
</MkA>
|
||||
<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }" @click.stop>
|
||||
<span class="main">
|
||||
<span class="username">@{{ username }}</span>
|
||||
<span class="host">@{{ toUnicode(host) }}</span>
|
||||
</span>
|
||||
</a>
|
||||
<MkA
|
||||
v-if="url.startsWith('/')"
|
||||
v-user-preview="canonical"
|
||||
class="akbvjaqn"
|
||||
:class="{ isMe }"
|
||||
:to="url"
|
||||
:style="{ background: bgCss }"
|
||||
@click.stop
|
||||
>
|
||||
<img class="icon" :src="`/avatar/@${username}@${host}`" alt="" />
|
||||
<span class="main">
|
||||
<span class="username">@{{ username }}</span>
|
||||
<span
|
||||
v-if="host != localHost || $store.state.showFullAcct"
|
||||
class="host"
|
||||
>@{{ toUnicode(host) }}</span
|
||||
>
|
||||
</span>
|
||||
</MkA>
|
||||
<a
|
||||
v-else
|
||||
class="akbvjaqn"
|
||||
:href="url"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
:style="{ background: bgCss }"
|
||||
@click.stop
|
||||
>
|
||||
<span class="main">
|
||||
<span class="username">@{{ username }}</span>
|
||||
<span class="host">@{{ toUnicode(host) }}</span>
|
||||
</span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toUnicode } from 'punycode';
|
||||
import { } from 'vue';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { host as localHost } from '@/config';
|
||||
import { $i } from '@/account';
|
||||
import { toUnicode } from "punycode";
|
||||
import {} from "vue";
|
||||
import tinycolor from "tinycolor2";
|
||||
import { host as localHost } from "@/config";
|
||||
import { $i } from "@/account";
|
||||
|
||||
const props = defineProps<{
|
||||
username: string;
|
||||
host: string;
|
||||
}>();
|
||||
|
||||
const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`;
|
||||
const canonical =
|
||||
props.host === localHost
|
||||
? `@${props.username}`
|
||||
: `@${props.username}@${toUnicode(props.host)}`;
|
||||
|
||||
const url = `/${canonical}`;
|
||||
|
||||
const isMe = $i && (
|
||||
`@${props.username}@${toUnicode(props.host)}` === `@${$i.username}@${toUnicode(localHost)}`.toLowerCase()
|
||||
);
|
||||
const isMe =
|
||||
$i &&
|
||||
`@${props.username}@${toUnicode(props.host)}` ===
|
||||
`@${$i.username}@${toUnicode(localHost)}`.toLowerCase();
|
||||
|
||||
const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue(isMe ? '--mentionMe' : '--mention'));
|
||||
const bg = tinycolor(
|
||||
getComputedStyle(document.documentElement).getPropertyValue(
|
||||
isMe ? "--mentionMe" : "--mention"
|
||||
)
|
||||
);
|
||||
bg.setAlpha(0.1);
|
||||
const bgCss = bg.toRgbString();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,29 @@
|
|||
<template>
|
||||
<div ref="el" class="sfhdhdhr">
|
||||
<MkMenu ref="menu" :items="items" :align="align" :width="width" :as-drawer="false" @close="onChildClosed"/>
|
||||
</div>
|
||||
<div ref="el" class="sfhdhdhr">
|
||||
<MkMenu
|
||||
ref="menu"
|
||||
:items="items"
|
||||
:align="align"
|
||||
:width="width"
|
||||
:as-drawer="false"
|
||||
@close="onChildClosed"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { on } from 'events';
|
||||
import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import MkMenu from './MkMenu.vue';
|
||||
import { MenuItem } from '@/types/menu';
|
||||
import * as os from '@/os';
|
||||
import { on } from "events";
|
||||
import {
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
ref,
|
||||
watch,
|
||||
} from "vue";
|
||||
import MkMenu from "./MkMenu.vue";
|
||||
import { MenuItem } from "@/types/menu";
|
||||
import * as os from "@/os";
|
||||
|
||||
const props = defineProps<{
|
||||
items: MenuItem[];
|
||||
|
|
@ -20,27 +34,27 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
(ev: 'actioned'): void;
|
||||
(ev: "closed"): void;
|
||||
(ev: "actioned"): void;
|
||||
}>();
|
||||
|
||||
const el = ref<HTMLElement>();
|
||||
const align = 'left';
|
||||
const align = "left";
|
||||
|
||||
function setPosition() {
|
||||
const rootRect = props.rootElement.getBoundingClientRect();
|
||||
const rect = props.targetElement.getBoundingClientRect();
|
||||
const left = props.targetElement.offsetWidth;
|
||||
const top = (rect.top - rootRect.top) - 8;
|
||||
el.value.style.left = left + 'px';
|
||||
el.value.style.top = top + 'px';
|
||||
const top = rect.top - rootRect.top - 8;
|
||||
el.value.style.left = left + "px";
|
||||
el.value.style.top = top + "px";
|
||||
}
|
||||
|
||||
function onChildClosed(actioned?: boolean) {
|
||||
if (actioned) {
|
||||
emit('actioned');
|
||||
emit("actioned");
|
||||
} else {
|
||||
emit('closed');
|
||||
emit("closed");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -53,7 +67,7 @@ onMounted(() => {
|
|||
|
||||
defineExpose({
|
||||
checkHit: (ev: MouseEvent) => {
|
||||
return (ev.target === el.value || el.value.contains(ev.target));
|
||||
return ev.target === el.value || el.value.contains(ev.target);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,93 +1,225 @@
|
|||
<template>
|
||||
<div>
|
||||
<div
|
||||
ref="itemsEl" v-hotkey="keymap"
|
||||
class="rrevdjwt _popup _shadow"
|
||||
:class="{ center: align === 'center', asDrawer }"
|
||||
:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
|
||||
@contextmenu.self="e => e.preventDefault()"
|
||||
>
|
||||
<template v-for="(item, i) in items2">
|
||||
<div v-if="item === null" class="divider"></div>
|
||||
<span v-else-if="item.type === 'label'" class="label item">
|
||||
<span :style="item.textStyle || ''">{{ item.text }}</span>
|
||||
<div>
|
||||
<div
|
||||
ref="itemsEl"
|
||||
v-hotkey="keymap"
|
||||
class="rrevdjwt _popup _shadow"
|
||||
:class="{ center: align === 'center', asDrawer }"
|
||||
:style="{
|
||||
width: width && !asDrawer ? width + 'px' : '',
|
||||
maxHeight: maxHeight ? maxHeight + 'px' : '',
|
||||
}"
|
||||
@contextmenu.self="(e) => e.preventDefault()"
|
||||
>
|
||||
<template v-for="(item, i) in items2">
|
||||
<div v-if="item === null" class="divider"></div>
|
||||
<span v-else-if="item.type === 'label'" class="label item">
|
||||
<span :style="item.textStyle || ''">{{ item.text }}</span>
|
||||
</span>
|
||||
<span
|
||||
v-else-if="item.type === 'pending'"
|
||||
:tabindex="i"
|
||||
class="pending item"
|
||||
>
|
||||
<span><MkEllipsis /></span>
|
||||
</span>
|
||||
<MkA
|
||||
v-else-if="item.type === 'link'"
|
||||
:to="item.to"
|
||||
:tabindex="i"
|
||||
class="_button item"
|
||||
@click.passive="close(true)"
|
||||
@mouseenter.passive="onItemMouseEnter(item)"
|
||||
@mouseleave.passive="onItemMouseLeave(item)"
|
||||
>
|
||||
<i
|
||||
v-if="item.icon"
|
||||
class="ph-fw ph-lg"
|
||||
:class="item.icon"
|
||||
></i>
|
||||
<span v-else-if="item.icons">
|
||||
<i
|
||||
v-for="icon in item.icons"
|
||||
class="ph-fw ph-lg"
|
||||
:class="icon"
|
||||
></i>
|
||||
</span>
|
||||
<MkAvatar
|
||||
v-if="item.avatar"
|
||||
:user="item.avatar"
|
||||
class="avatar"
|
||||
/>
|
||||
<span :style="item.textStyle || ''">{{ item.text }}</span>
|
||||
<span v-if="item.indicate" class="indicator"
|
||||
><i class="ph-circle ph-fill"></i
|
||||
></span>
|
||||
</MkA>
|
||||
<a
|
||||
v-else-if="item.type === 'a'"
|
||||
:href="item.href"
|
||||
:target="item.target"
|
||||
:download="item.download"
|
||||
:tabindex="i"
|
||||
class="_button item"
|
||||
@click="close(true)"
|
||||
@mouseenter.passive="onItemMouseEnter(item)"
|
||||
@mouseleave.passive="onItemMouseLeave(item)"
|
||||
>
|
||||
<i
|
||||
v-if="item.icon"
|
||||
class="ph-fw ph-lg"
|
||||
:class="item.icon"
|
||||
></i>
|
||||
<span v-else-if="item.icons">
|
||||
<i
|
||||
v-for="icon in item.icons"
|
||||
class="ph-fw ph-lg"
|
||||
:class="icon"
|
||||
></i>
|
||||
</span>
|
||||
<span :style="item.textStyle || ''">{{ item.text }}</span>
|
||||
<span v-if="item.indicate" class="indicator"
|
||||
><i class="ph-circle ph-fill"></i
|
||||
></span>
|
||||
</a>
|
||||
<button
|
||||
v-else-if="item.type === 'user' && !items.hidden"
|
||||
:tabindex="i"
|
||||
class="_button item"
|
||||
:class="{ active: item.active }"
|
||||
:disabled="item.active"
|
||||
@click="clicked(item.action, $event)"
|
||||
@mouseenter.passive="onItemMouseEnter(item)"
|
||||
@mouseleave.passive="onItemMouseLeave(item)"
|
||||
>
|
||||
<MkAvatar :user="item.user" class="avatar" /><MkUserName
|
||||
:user="item.user"
|
||||
/>
|
||||
<span v-if="item.indicate" class="indicator"
|
||||
><i class="ph-circle ph-fill"></i
|
||||
></span>
|
||||
</button>
|
||||
<span
|
||||
v-else-if="item.type === 'switch'"
|
||||
:tabindex="i"
|
||||
class="item"
|
||||
@mouseenter.passive="onItemMouseEnter(item)"
|
||||
@mouseleave.passive="onItemMouseLeave(item)"
|
||||
>
|
||||
<FormSwitch
|
||||
v-model="item.ref"
|
||||
:disabled="item.disabled"
|
||||
class="form-switch"
|
||||
:style="item.textStyle || ''"
|
||||
>{{ item.text }}</FormSwitch
|
||||
>
|
||||
</span>
|
||||
<button
|
||||
v-else-if="item.type === 'parent'"
|
||||
:tabindex="i"
|
||||
class="_button item parent"
|
||||
:class="{ childShowing: childShowingItem === item }"
|
||||
@mouseenter="showChildren(item, $event)"
|
||||
>
|
||||
<i
|
||||
v-if="item.icon"
|
||||
class="ph-fw ph-lg"
|
||||
:class="item.icon"
|
||||
></i>
|
||||
<span v-else-if="item.icons">
|
||||
<i
|
||||
v-for="icon in item.icons"
|
||||
class="ph-fw ph-lg"
|
||||
:class="icon"
|
||||
></i>
|
||||
</span>
|
||||
<span :style="item.textStyle || ''">{{ item.text }}</span>
|
||||
<span class="caret"
|
||||
><i class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"></i
|
||||
></span>
|
||||
</button>
|
||||
<button
|
||||
v-else-if="!item.hidden"
|
||||
:tabindex="i"
|
||||
class="_button item"
|
||||
:class="{ danger: item.danger, active: item.active }"
|
||||
:disabled="item.active"
|
||||
@click="clicked(item.action, $event)"
|
||||
@mouseenter.passive="onItemMouseEnter(item)"
|
||||
@mouseleave.passive="onItemMouseLeave(item)"
|
||||
>
|
||||
<i
|
||||
v-if="item.icon"
|
||||
class="ph-fw ph-lg"
|
||||
:class="item.icon"
|
||||
></i>
|
||||
<span v-else-if="item.icons">
|
||||
<i
|
||||
v-for="icon in item.icons"
|
||||
class="ph-fw ph-lg"
|
||||
:class="icon"
|
||||
></i>
|
||||
</span>
|
||||
<MkAvatar
|
||||
v-if="item.avatar"
|
||||
:user="item.avatar"
|
||||
class="avatar"
|
||||
/>
|
||||
<span :style="item.textStyle || ''">{{ item.text }}</span>
|
||||
<span v-if="item.indicate" class="indicator"
|
||||
><i class="ph-circle ph-fill"></i
|
||||
></span>
|
||||
</button>
|
||||
</template>
|
||||
<span v-if="items2.length === 0" class="none item">
|
||||
<span>{{ i18n.ts.none }}</span>
|
||||
</span>
|
||||
<span v-else-if="item.type === 'pending'" :tabindex="i" class="pending item">
|
||||
<span><MkEllipsis/></span>
|
||||
</span>
|
||||
<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
|
||||
<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
|
||||
<span v-else-if="item.icons">
|
||||
<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
|
||||
</span>
|
||||
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
|
||||
<span :style="item.textStyle || ''">{{ item.text }}</span>
|
||||
<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
|
||||
</MkA>
|
||||
<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
|
||||
<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
|
||||
<span v-else-if="item.icons">
|
||||
<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
|
||||
</span>
|
||||
<span :style="item.textStyle || ''">{{ item.text }}</span>
|
||||
<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
|
||||
</a>
|
||||
<button v-else-if="item.type === 'user' && !items.hidden" :tabindex="i" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
|
||||
<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
|
||||
<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
|
||||
</button>
|
||||
<span v-else-if="item.type === 'switch'" :tabindex="i" class="item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
|
||||
<FormSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch" :style="item.textStyle || ''">{{ item.text }}</FormSwitch>
|
||||
</span>
|
||||
<button v-else-if="item.type === 'parent'" :tabindex="i" class="_button item parent" :class="{ childShowing: childShowingItem === item }" @mouseenter="showChildren(item, $event)">
|
||||
<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
|
||||
<span v-else-if="item.icons">
|
||||
<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
|
||||
</span>
|
||||
<span :style="item.textStyle || ''">{{ item.text }}</span>
|
||||
<span class="caret"><i class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"></i></span>
|
||||
</button>
|
||||
<button v-else-if="!item.hidden" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
|
||||
<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
|
||||
<span v-else-if="item.icons">
|
||||
<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
|
||||
</span>
|
||||
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
|
||||
<span :style="item.textStyle || ''">{{ item.text }}</span>
|
||||
<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
|
||||
</button>
|
||||
</template>
|
||||
<span v-if="items2.length === 0" class="none item">
|
||||
<span>{{ i18n.ts.none }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="childMenu" class="child">
|
||||
<XChild
|
||||
ref="child"
|
||||
:items="childMenu"
|
||||
:target-element="childTarget"
|
||||
:root-element="itemsEl"
|
||||
showing
|
||||
@actioned="childActioned"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="childMenu" class="child">
|
||||
<XChild ref="child" :items="childMenu" :target-element="childTarget" :root-element="itemsEl" showing @actioned="childActioned"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, menu, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
|
||||
import { focusPrev, focusNext } from '@/scripts/focus';
|
||||
import FormSwitch from '@/components/form/switch.vue';
|
||||
import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import {
|
||||
computed,
|
||||
menu,
|
||||
defineAsyncComponent,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
Ref,
|
||||
ref,
|
||||
watch,
|
||||
} from "vue";
|
||||
import { focusPrev, focusNext } from "@/scripts/focus";
|
||||
import FormSwitch from "@/components/form/switch.vue";
|
||||
import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from "@/types/menu";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
|
||||
const XChild = defineAsyncComponent(() => import("./MkMenu.child.vue"));
|
||||
|
||||
const props = defineProps<{
|
||||
items: MenuItem[];
|
||||
viaKeyboard?: boolean;
|
||||
asDrawer?: boolean;
|
||||
align?: 'center' | string;
|
||||
align?: "center" | string;
|
||||
width?: number;
|
||||
maxHeight?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'close', actioned?: boolean): void;
|
||||
(ev: "close", actioned?: boolean): void;
|
||||
}>();
|
||||
|
||||
let itemsEl = $ref<HTMLDivElement>();
|
||||
|
|
@ -97,31 +229,38 @@ let items2: InnerMenuItem[] = $ref([]);
|
|||
let child = $ref<InstanceType<typeof XChild>>();
|
||||
|
||||
let keymap = computed(() => ({
|
||||
'up|k|shift+tab': focusUp,
|
||||
'down|j|tab': focusDown,
|
||||
'esc': close,
|
||||
"up|k|shift+tab": focusUp,
|
||||
"down|j|tab": focusDown,
|
||||
esc: close,
|
||||
}));
|
||||
|
||||
let childShowingItem = $ref<MenuItem | null>();
|
||||
|
||||
watch(() => props.items, () => {
|
||||
const items: (MenuItem | MenuPending)[] = [...props.items].filter(item => item !== undefined);
|
||||
watch(
|
||||
() => props.items,
|
||||
() => {
|
||||
const items: (MenuItem | MenuPending)[] = [...props.items].filter(
|
||||
(item) => item !== undefined
|
||||
);
|
||||
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const item = items[i];
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const item = items[i];
|
||||
|
||||
if (item && 'then' in item) { // if item is Promise
|
||||
items[i] = { type: 'pending' };
|
||||
item.then(actualItem => {
|
||||
items2[i] = actualItem;
|
||||
});
|
||||
if (item && "then" in item) {
|
||||
// if item is Promise
|
||||
items[i] = { type: "pending" };
|
||||
item.then((actualItem) => {
|
||||
items2[i] = actualItem;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
items2 = items as InnerMenuItem[];
|
||||
}, {
|
||||
immediate: true,
|
||||
});
|
||||
items2 = items as InnerMenuItem[];
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
let childMenu = $ref<MenuItem[] | null>();
|
||||
let childTarget = $ref<HTMLElement | null>();
|
||||
|
|
@ -137,7 +276,11 @@ function childActioned() {
|
|||
}
|
||||
|
||||
function onGlobalMousedown(event: MouseEvent) {
|
||||
if (childTarget && (event.target === childTarget || childTarget.contains(event.target))) return;
|
||||
if (
|
||||
childTarget &&
|
||||
(event.target === childTarget || childTarget.contains(event.target))
|
||||
)
|
||||
return;
|
||||
if (child && child.checkHit(event)) return;
|
||||
closeChild();
|
||||
}
|
||||
|
|
@ -169,7 +312,7 @@ function clicked(fn: MenuAction, ev: MouseEvent) {
|
|||
}
|
||||
|
||||
function close(actioned = false) {
|
||||
emit('close', actioned);
|
||||
emit("close", actioned);
|
||||
}
|
||||
|
||||
function focusUp() {
|
||||
|
|
@ -187,11 +330,13 @@ onMounted(() => {
|
|||
});
|
||||
}
|
||||
|
||||
document.addEventListener('mousedown', onGlobalMousedown, { passive: true });
|
||||
document.addEventListener("mousedown", onGlobalMousedown, {
|
||||
passive: true,
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('mousedown', onGlobalMousedown);
|
||||
document.removeEventListener("mousedown", onGlobalMousedown);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,35 +1,34 @@
|
|||
<template>
|
||||
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" style="overflow:visible">
|
||||
<defs>
|
||||
<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
|
||||
<stop offset="0%" :stop-color="color" stop-opacity="0"></stop>
|
||||
<stop offset="100%" :stop-color="color" stop-opacity="0.65"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<polygon
|
||||
:points="polygonPoints"
|
||||
:style="`stroke: none; fill: url(#${ gradientId });`"
|
||||
/>
|
||||
<polyline
|
||||
:points="polylinePoints"
|
||||
fill="none"
|
||||
:stroke="color"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<circle
|
||||
:cx="headX"
|
||||
:cy="headY"
|
||||
r="3"
|
||||
:fill="color"
|
||||
/>
|
||||
</svg>
|
||||
<svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`" style="overflow: visible">
|
||||
<defs>
|
||||
<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
|
||||
<stop offset="0%" :stop-color="color" stop-opacity="0"></stop>
|
||||
<stop
|
||||
offset="100%"
|
||||
:stop-color="color"
|
||||
stop-opacity="0.65"
|
||||
></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<polygon
|
||||
:points="polygonPoints"
|
||||
:style="`stroke: none; fill: url(#${gradientId});`"
|
||||
/>
|
||||
<polyline
|
||||
:points="polylinePoints"
|
||||
fill="none"
|
||||
:stroke="color"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<circle :cx="headX" :cy="headY" r="3" :fill="color" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onUnmounted, watch } from 'vue';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { useInterval } from '@/scripts/use-interval';
|
||||
import { onUnmounted, watch } from "vue";
|
||||
import { v4 as uuid } from "uuid";
|
||||
import tinycolor from "tinycolor2";
|
||||
import { useInterval } from "@/scripts/use-interval";
|
||||
|
||||
const props = defineProps<{
|
||||
src: number[];
|
||||
|
|
@ -38,12 +37,14 @@ const props = defineProps<{
|
|||
const viewBoxX = 50;
|
||||
const viewBoxY = 50;
|
||||
const gradientId = uuid();
|
||||
let polylinePoints = $ref('');
|
||||
let polygonPoints = $ref('');
|
||||
let polylinePoints = $ref("");
|
||||
let polygonPoints = $ref("");
|
||||
let headX = $ref<number | null>(null);
|
||||
let headY = $ref<number | null>(null);
|
||||
let clock = $ref<number | null>(null);
|
||||
const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
|
||||
const accent = tinycolor(
|
||||
getComputedStyle(document.documentElement).getPropertyValue("--accent")
|
||||
);
|
||||
const color = accent.toRgbString();
|
||||
|
||||
function draw(): void {
|
||||
|
|
@ -52,12 +53,12 @@ function draw(): void {
|
|||
|
||||
const _polylinePoints = stats.map((n, i) => [
|
||||
i * (viewBoxX / (stats.length - 1)),
|
||||
(1 - (n / peak)) * viewBoxY,
|
||||
(1 - n / peak) * viewBoxY,
|
||||
]);
|
||||
|
||||
polylinePoints = _polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
|
||||
polylinePoints = _polylinePoints.map((xy) => `${xy[0]},${xy[1]}`).join(" ");
|
||||
|
||||
polygonPoints = `0,${ viewBoxY } ${ polylinePoints } ${ viewBoxX },${ viewBoxY }`;
|
||||
polygonPoints = `0,${viewBoxY} ${polylinePoints} ${viewBoxX},${viewBoxY}`;
|
||||
|
||||
headX = _polylinePoints[_polylinePoints.length - 1][0];
|
||||
headY = _polylinePoints[_polylinePoints.length - 1][1];
|
||||
|
|
|
|||
|
|
@ -1,15 +1,64 @@
|
|||
<template>
|
||||
<Transition
|
||||
:name="transitionName"
|
||||
:enter-active-class="$style['transition_' + transitionName + '_enterActive']"
|
||||
:leave-active-class="$style['transition_' + transitionName + '_leaveActive']"
|
||||
:enter-from-class="$style['transition_' + transitionName + '_enterFrom']"
|
||||
:enter-active-class="
|
||||
$style['transition_' + transitionName + '_enterActive']
|
||||
"
|
||||
:leave-active-class="
|
||||
$style['transition_' + transitionName + '_leaveActive']
|
||||
"
|
||||
:enter-from-class="
|
||||
$style['transition_' + transitionName + '_enterFrom']
|
||||
"
|
||||
:leave-to-class="$style['transition_' + transitionName + '_leaveTo']"
|
||||
:duration="transitionDuration" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened"
|
||||
:duration="transitionDuration"
|
||||
appear
|
||||
@after-leave="emit('closed')"
|
||||
@enter="emit('opening')"
|
||||
@after-enter="onOpened"
|
||||
>
|
||||
<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog' || type === 'dialog:top', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
|
||||
<div class="_modalBg data-cy-bg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent, 'data-cy-transparent': isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
|
||||
<div ref="content" :class="[$style.content, { [$style.fixed]: fixed, top: type === 'dialog:top' }]" :style="{ zIndex }" @click.self="onBgClick">
|
||||
<div
|
||||
v-show="manualShowing != null ? manualShowing : showing"
|
||||
v-hotkey.global="keymap"
|
||||
:class="[
|
||||
$style.root,
|
||||
{
|
||||
[$style.drawer]: type === 'drawer',
|
||||
[$style.dialog]: type === 'dialog' || type === 'dialog:top',
|
||||
[$style.popup]: type === 'popup',
|
||||
},
|
||||
]"
|
||||
:style="{
|
||||
zIndex,
|
||||
pointerEvents: (manualShowing != null ? manualShowing : showing)
|
||||
? 'auto'
|
||||
: 'none',
|
||||
'--transformOrigin': transformOrigin,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="_modalBg data-cy-bg"
|
||||
:class="[
|
||||
$style.bg,
|
||||
{
|
||||
[$style.bgTransparent]: isEnableBgTransparent,
|
||||
'data-cy-transparent': isEnableBgTransparent,
|
||||
},
|
||||
]"
|
||||
:style="{ zIndex }"
|
||||
@click="onBgClick"
|
||||
@mousedown="onBgClick"
|
||||
@contextmenu.prevent.stop="() => {}"
|
||||
></div>
|
||||
<div
|
||||
ref="content"
|
||||
:class="[
|
||||
$style.content,
|
||||
{ [$style.fixed]: fixed, top: type === 'dialog:top' },
|
||||
]"
|
||||
:style="{ zIndex }"
|
||||
@click.self="onBgClick"
|
||||
>
|
||||
<slot :max-height="maxHeight" :type="type"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -17,94 +66,103 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted, watch, provide } from 'vue';
|
||||
import * as os from '@/os';
|
||||
import { isTouchUsing } from '@/scripts/touch';
|
||||
import { defaultStore } from '@/store';
|
||||
import { deviceKind } from '@/scripts/device-kind';
|
||||
import { nextTick, onMounted, watch, provide } from "vue";
|
||||
import * as os from "@/os";
|
||||
import { isTouchUsing } from "@/scripts/touch";
|
||||
import { defaultStore } from "@/store";
|
||||
import { deviceKind } from "@/scripts/device-kind";
|
||||
|
||||
function getFixedContainer(el: Element | null): Element | null {
|
||||
if (el == null || el.tagName === 'BODY') return null;
|
||||
const position = window.getComputedStyle(el).getPropertyValue('position');
|
||||
if (position === 'fixed') {
|
||||
if (el == null || el.tagName === "BODY") return null;
|
||||
const position = window.getComputedStyle(el).getPropertyValue("position");
|
||||
if (position === "fixed") {
|
||||
return el;
|
||||
} else {
|
||||
return getFixedContainer(el.parentElement);
|
||||
}
|
||||
}
|
||||
|
||||
type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer';
|
||||
type ModalTypes = "popup" | "dialog" | "dialog:top" | "drawer";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
manualShowing?: boolean | null;
|
||||
anchor?: { x: string; y: string; };
|
||||
src?: HTMLElement;
|
||||
preferType?: ModalTypes | 'auto';
|
||||
zPriority?: 'low' | 'middle' | 'high';
|
||||
noOverlap?: boolean;
|
||||
transparentBg?: boolean;
|
||||
}>(), {
|
||||
manualShowing: null,
|
||||
src: null,
|
||||
anchor: () => ({ x: 'center', y: 'bottom' }),
|
||||
preferType: 'auto',
|
||||
zPriority: 'low',
|
||||
noOverlap: true,
|
||||
transparentBg: false,
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
manualShowing?: boolean | null;
|
||||
anchor?: { x: string; y: string };
|
||||
src?: HTMLElement;
|
||||
preferType?: ModalTypes | "auto";
|
||||
zPriority?: "low" | "middle" | "high";
|
||||
noOverlap?: boolean;
|
||||
transparentBg?: boolean;
|
||||
}>(),
|
||||
{
|
||||
manualShowing: null,
|
||||
src: null,
|
||||
anchor: () => ({ x: "center", y: "bottom" }),
|
||||
preferType: "auto",
|
||||
zPriority: "low",
|
||||
noOverlap: true,
|
||||
transparentBg: false,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'opening'): void;
|
||||
(ev: 'opened'): void;
|
||||
(ev: 'click'): void;
|
||||
(ev: 'esc'): void;
|
||||
(ev: 'close'): void;
|
||||
(ev: 'closed'): void;
|
||||
(ev: "opening"): void;
|
||||
(ev: "opened"): void;
|
||||
(ev: "click"): void;
|
||||
(ev: "esc"): void;
|
||||
(ev: "close"): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
provide('modal', true);
|
||||
provide("modal", true);
|
||||
|
||||
let maxHeight = $ref<number>();
|
||||
let fixed = $ref(false);
|
||||
let transformOrigin = $ref('center');
|
||||
let transformOrigin = $ref("center");
|
||||
let showing = $ref(true);
|
||||
let content = $shallowRef<HTMLElement>();
|
||||
const zIndex = os.claimZIndex(props.zPriority);
|
||||
let useSendAnime = $ref(false);
|
||||
const type = $computed<ModalTypes>(() => {
|
||||
if (props.preferType === 'auto') {
|
||||
if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
|
||||
return 'drawer';
|
||||
if (props.preferType === "auto") {
|
||||
if (
|
||||
!defaultStore.state.disableDrawer &&
|
||||
isTouchUsing &&
|
||||
deviceKind === "smartphone"
|
||||
) {
|
||||
return "drawer";
|
||||
} else {
|
||||
return props.src != null ? 'popup' : 'dialog';
|
||||
return props.src != null ? "popup" : "dialog";
|
||||
}
|
||||
} else {
|
||||
return props.preferType!;
|
||||
}
|
||||
});
|
||||
const isEnableBgTransparent = $computed(() => props.transparentBg && (type === 'popup'));
|
||||
let transitionName = $computed((() =>
|
||||
const isEnableBgTransparent = $computed(
|
||||
() => props.transparentBg && type === "popup"
|
||||
);
|
||||
let transitionName = $computed(() =>
|
||||
defaultStore.state.animation
|
||||
? useSendAnime
|
||||
? 'send'
|
||||
: type === 'drawer'
|
||||
? 'modal-drawer'
|
||||
: type === 'popup'
|
||||
? 'modal-popup'
|
||||
: 'modal'
|
||||
: ''
|
||||
));
|
||||
let transitionDuration = $computed((() =>
|
||||
transitionName === 'send'
|
||||
? "send"
|
||||
: type === "drawer"
|
||||
? "modal-drawer"
|
||||
: type === "popup"
|
||||
? "modal-popup"
|
||||
: "modal"
|
||||
: ""
|
||||
);
|
||||
let transitionDuration = $computed(() =>
|
||||
transitionName === "send"
|
||||
? 400
|
||||
: transitionName === 'modal-popup'
|
||||
? 100
|
||||
: transitionName === 'modal'
|
||||
? 200
|
||||
: transitionName === 'modal-drawer'
|
||||
? 200
|
||||
: 0
|
||||
));
|
||||
: transitionName === "modal-popup"
|
||||
? 100
|
||||
: transitionName === "modal"
|
||||
? 200
|
||||
: transitionName === "modal-drawer"
|
||||
? 200
|
||||
: 0
|
||||
);
|
||||
|
||||
let contentClicking = false;
|
||||
|
||||
|
|
@ -114,30 +172,30 @@ function close(opts: { useSendAnimation?: boolean } = {}) {
|
|||
}
|
||||
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
if (props.src) props.src.style.pointerEvents = 'auto';
|
||||
if (props.src) props.src.style.pointerEvents = "auto";
|
||||
showing = false;
|
||||
emit('close');
|
||||
emit("close");
|
||||
}
|
||||
|
||||
function onBgClick() {
|
||||
if (contentClicking) return;
|
||||
emit('click');
|
||||
emit("click");
|
||||
}
|
||||
|
||||
if (type === 'drawer') {
|
||||
if (type === "drawer") {
|
||||
maxHeight = window.innerHeight / 1.5;
|
||||
}
|
||||
|
||||
const keymap = {
|
||||
'esc': () => emit('esc'),
|
||||
esc: () => emit("esc"),
|
||||
};
|
||||
|
||||
const MARGIN = 16;
|
||||
|
||||
const align = () => {
|
||||
if (props.src == null) return;
|
||||
if (type === 'drawer') return;
|
||||
if (type === 'dialog') return;
|
||||
if (type === "drawer") return;
|
||||
if (type === "dialog") return;
|
||||
|
||||
if (content == null) return;
|
||||
|
||||
|
|
@ -152,19 +210,19 @@ const align = () => {
|
|||
const x = srcRect.left + (fixed ? 0 : window.pageXOffset);
|
||||
const y = srcRect.top + (fixed ? 0 : window.pageYOffset);
|
||||
|
||||
if (props.anchor.x === 'center') {
|
||||
left = x + (props.src.offsetWidth / 2) - (width / 2);
|
||||
} else if (props.anchor.x === 'left') {
|
||||
if (props.anchor.x === "center") {
|
||||
left = x + props.src.offsetWidth / 2 - width / 2;
|
||||
} else if (props.anchor.x === "left") {
|
||||
// TODO
|
||||
} else if (props.anchor.x === 'right') {
|
||||
} else if (props.anchor.x === "right") {
|
||||
left = x + props.src.offsetWidth;
|
||||
}
|
||||
|
||||
if (props.anchor.y === 'center') {
|
||||
top = (y - (height / 2));
|
||||
} else if (props.anchor.y === 'top') {
|
||||
if (props.anchor.y === "center") {
|
||||
top = y - height / 2;
|
||||
} else if (props.anchor.y === "top") {
|
||||
// TODO
|
||||
} else if (props.anchor.y === 'bottom') {
|
||||
} else if (props.anchor.y === "bottom") {
|
||||
top = y + props.src.offsetHeight;
|
||||
}
|
||||
|
||||
|
|
@ -174,20 +232,20 @@ const align = () => {
|
|||
left = window.innerWidth - width;
|
||||
}
|
||||
|
||||
const underSpace = (window.innerHeight - MARGIN) - top;
|
||||
const upperSpace = (srcRect.top - MARGIN);
|
||||
const underSpace = window.innerHeight - MARGIN - top;
|
||||
const upperSpace = srcRect.top - MARGIN;
|
||||
|
||||
// 画面から縦にはみ出る場合
|
||||
if (top + height > (window.innerHeight - MARGIN)) {
|
||||
if (props.noOverlap && props.anchor.x === 'center') {
|
||||
if (underSpace >= (upperSpace / 3)) {
|
||||
if (top + height > window.innerHeight - MARGIN) {
|
||||
if (props.noOverlap && props.anchor.x === "center") {
|
||||
if (underSpace >= upperSpace / 3) {
|
||||
maxHeight = underSpace;
|
||||
} else {
|
||||
maxHeight = upperSpace;
|
||||
top = (upperSpace + MARGIN) - height;
|
||||
top = upperSpace + MARGIN - height;
|
||||
}
|
||||
} else {
|
||||
top = (window.innerHeight - MARGIN) - height;
|
||||
top = window.innerHeight - MARGIN - height;
|
||||
}
|
||||
} else {
|
||||
maxHeight = underSpace;
|
||||
|
|
@ -198,20 +256,26 @@ const align = () => {
|
|||
left = window.innerWidth - width + window.scrollX - 1;
|
||||
}
|
||||
|
||||
const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset);
|
||||
const upperSpace = (srcRect.top - MARGIN);
|
||||
const underSpace =
|
||||
window.innerHeight - MARGIN - (top - window.pageYOffset);
|
||||
const upperSpace = srcRect.top - MARGIN;
|
||||
|
||||
// 画面から縦にはみ出る場合
|
||||
if (top + height - window.scrollY > (window.innerHeight - MARGIN)) {
|
||||
if (props.noOverlap && props.anchor.x === 'center') {
|
||||
if (underSpace >= (upperSpace / 3)) {
|
||||
if (top + height - window.scrollY > window.innerHeight - MARGIN) {
|
||||
if (props.noOverlap && props.anchor.x === "center") {
|
||||
if (underSpace >= upperSpace / 3) {
|
||||
maxHeight = underSpace;
|
||||
} else {
|
||||
maxHeight = upperSpace;
|
||||
top = window.scrollY + ((upperSpace + MARGIN) - height);
|
||||
top = window.scrollY + (upperSpace + MARGIN - height);
|
||||
}
|
||||
} else {
|
||||
top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1;
|
||||
top =
|
||||
window.innerHeight -
|
||||
MARGIN -
|
||||
height +
|
||||
window.pageYOffset -
|
||||
1;
|
||||
}
|
||||
} else {
|
||||
maxHeight = underSpace;
|
||||
|
|
@ -226,55 +290,76 @@ const align = () => {
|
|||
left = 0;
|
||||
}
|
||||
|
||||
let transformOriginX = 'center';
|
||||
let transformOriginY = 'center';
|
||||
let transformOriginX = "center";
|
||||
let transformOriginY = "center";
|
||||
|
||||
if (top >= srcRect.top + props.src.offsetHeight + (fixed ? 0 : window.pageYOffset)) {
|
||||
transformOriginY = 'top';
|
||||
} else if ((top + height) <= srcRect.top + (fixed ? 0 : window.pageYOffset)) {
|
||||
transformOriginY = 'bottom';
|
||||
if (
|
||||
top >=
|
||||
srcRect.top + props.src.offsetHeight + (fixed ? 0 : window.pageYOffset)
|
||||
) {
|
||||
transformOriginY = "top";
|
||||
} else if (top + height <= srcRect.top + (fixed ? 0 : window.pageYOffset)) {
|
||||
transformOriginY = "bottom";
|
||||
}
|
||||
|
||||
if (left >= srcRect.left + props.src.offsetWidth + (fixed ? 0 : window.pageXOffset)) {
|
||||
transformOriginX = 'left';
|
||||
} else if ((left + width) <= srcRect.left + (fixed ? 0 : window.pageXOffset)) {
|
||||
transformOriginX = 'right';
|
||||
if (
|
||||
left >=
|
||||
srcRect.left + props.src.offsetWidth + (fixed ? 0 : window.pageXOffset)
|
||||
) {
|
||||
transformOriginX = "left";
|
||||
} else if (
|
||||
left + width <=
|
||||
srcRect.left + (fixed ? 0 : window.pageXOffset)
|
||||
) {
|
||||
transformOriginX = "right";
|
||||
}
|
||||
|
||||
transformOrigin = `${transformOriginX} ${transformOriginY}`;
|
||||
|
||||
content.style.left = left + 'px';
|
||||
content.style.top = top + 'px';
|
||||
content.style.left = left + "px";
|
||||
content.style.top = top + "px";
|
||||
};
|
||||
|
||||
const onOpened = () => {
|
||||
emit('opened');
|
||||
emit("opened");
|
||||
|
||||
// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
|
||||
const el = content!.children[0];
|
||||
el.addEventListener('mousedown', ev => {
|
||||
contentClicking = true;
|
||||
window.addEventListener('mouseup', ev => {
|
||||
// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
|
||||
window.setTimeout(() => {
|
||||
contentClicking = false;
|
||||
}, 100);
|
||||
}, { passive: true, once: true });
|
||||
}, { passive: true });
|
||||
el.addEventListener(
|
||||
"mousedown",
|
||||
(ev) => {
|
||||
contentClicking = true;
|
||||
window.addEventListener(
|
||||
"mouseup",
|
||||
(ev) => {
|
||||
// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
|
||||
window.setTimeout(() => {
|
||||
contentClicking = false;
|
||||
}, 100);
|
||||
},
|
||||
{ passive: true, once: true }
|
||||
);
|
||||
},
|
||||
{ passive: true }
|
||||
);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
watch(() => props.src, async () => {
|
||||
if (props.src) {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.src.style.pointerEvents = 'none';
|
||||
}
|
||||
fixed = (type === 'drawer') || (getFixedContainer(props.src) != null);
|
||||
watch(
|
||||
() => props.src,
|
||||
async () => {
|
||||
if (props.src) {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.src.style.pointerEvents = "none";
|
||||
}
|
||||
fixed = type === "drawer" || getFixedContainer(props.src) != null;
|
||||
|
||||
await nextTick();
|
||||
await nextTick();
|
||||
|
||||
align();
|
||||
}, { immediate: true });
|
||||
align();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
nextTick(() => {
|
||||
new ResizeObserver((entries, observer) => {
|
||||
|
|
@ -297,7 +382,8 @@ defineExpose({
|
|||
|
||||
> .content {
|
||||
transform: translateY(0px);
|
||||
transition: opacity 0.3s ease-in, transform 0.3s cubic-bezier(.5,-0.5,1,.5) !important;
|
||||
transition: opacity 0.3s ease-in,
|
||||
transform 0.3s cubic-bezier(0.5, -0.5, 1, 0.5) !important;
|
||||
}
|
||||
}
|
||||
.transition_send_enterFrom,
|
||||
|
|
@ -346,7 +432,8 @@ defineExpose({
|
|||
|
||||
> .content {
|
||||
transform-origin: var(--transformOrigin);
|
||||
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
|
||||
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
|
||||
transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
|
||||
}
|
||||
}
|
||||
.transition_modal-popup_enterFrom,
|
||||
|
|
@ -369,7 +456,7 @@ defineExpose({
|
|||
}
|
||||
|
||||
> .content {
|
||||
transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
|
||||
transition: transform 0.2s cubic-bezier(0, 0.5, 0, 1) !important;
|
||||
}
|
||||
}
|
||||
.transition_modal-drawer_leaveActive {
|
||||
|
|
@ -378,7 +465,7 @@ defineExpose({
|
|||
}
|
||||
|
||||
> .content {
|
||||
transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
|
||||
transition: transform 0.2s cubic-bezier(0, 0.5, 0, 1) !important;
|
||||
}
|
||||
}
|
||||
.transition_modal-drawer_enterFrom,
|
||||
|
|
@ -404,15 +491,39 @@ defineExpose({
|
|||
margin: auto;
|
||||
padding: 32px;
|
||||
// TODO: mask-imageはiOSだとやたら重い。なんとかしたい
|
||||
-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
|
||||
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 1) 32px,
|
||||
rgba(0, 0, 0, 1) calc(100% - 32px),
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
mask-image: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 1) 32px,
|
||||
rgba(0, 0, 0, 1) calc(100% - 32px),
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
padding: 16px;
|
||||
-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
|
||||
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 1) 16px,
|
||||
rgba(0, 0, 0, 1) calc(100% - 16px),
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
mask-image: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 1) 16px,
|
||||
rgba(0, 0, 0, 1) calc(100% - 16px),
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
> ::v-deep(*) {
|
||||
|
|
@ -424,7 +535,6 @@ defineExpose({
|
|||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,51 +1,80 @@
|
|||
<template>
|
||||
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
|
||||
<div ref="rootEl" class="hrmcaedk _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
|
||||
<div class="header" @contextmenu="onContextmenu">
|
||||
<button v-if="history.length > 0" v-tooltip="i18n.ts.goBack" class="_button" @click="back()"><i class="ph-caret-left ph-bold ph-lg"></i></button>
|
||||
<span v-else style="display: inline-block; width: 20px"></span>
|
||||
<span v-if="pageMetadata?.value" class="title">
|
||||
<i v-if="pageMetadata?.value.icon" class="icon" :class="pageMetadata?.value.icon"></i>
|
||||
<span>{{ pageMetadata?.value.title }}</span>
|
||||
</span>
|
||||
<button class="_button" @click="$refs.modal.close()"><i class="ph-x ph-bold ph-lg"></i></button>
|
||||
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
|
||||
<div
|
||||
ref="rootEl"
|
||||
class="hrmcaedk _narrow_"
|
||||
:style="{
|
||||
width: `${width}px`,
|
||||
height: height ? `min(${height}px, 100%)` : '100%',
|
||||
}"
|
||||
>
|
||||
<div class="header" @contextmenu="onContextmenu">
|
||||
<button
|
||||
v-if="history.length > 0"
|
||||
v-tooltip="i18n.ts.goBack"
|
||||
class="_button"
|
||||
@click="back()"
|
||||
>
|
||||
<i class="ph-caret-left ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<span v-else style="display: inline-block; width: 20px"></span>
|
||||
<span v-if="pageMetadata?.value" class="title">
|
||||
<i
|
||||
v-if="pageMetadata?.value.icon"
|
||||
class="icon"
|
||||
:class="pageMetadata?.value.icon"
|
||||
></i>
|
||||
<span>{{ pageMetadata?.value.title }}</span>
|
||||
</span>
|
||||
<button class="_button" @click="$refs.modal.close()">
|
||||
<i class="ph-x ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="body">
|
||||
<MkStickyContainer>
|
||||
<template #header
|
||||
><MkPageHeader
|
||||
v-if="
|
||||
pageMetadata?.value &&
|
||||
!pageMetadata?.value.hideHeader
|
||||
"
|
||||
:info="pageMetadata?.value"
|
||||
/></template>
|
||||
<RouterView :router="router" />
|
||||
</MkStickyContainer>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader v-if="pageMetadata?.value && !pageMetadata?.value.hideHeader" :info="pageMetadata?.value"/></template>
|
||||
<RouterView :router="router"/>
|
||||
</MkStickyContainer>
|
||||
</div>
|
||||
</div>
|
||||
</MkModal>
|
||||
</MkModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ComputedRef, provide } from 'vue';
|
||||
import MkModal from '@/components/MkModal.vue';
|
||||
import { popout as _popout } from '@/scripts/popout';
|
||||
import copyToClipboard from '@/scripts/copy-to-clipboard';
|
||||
import { url } from '@/config';
|
||||
import * as os from '@/os';
|
||||
import { mainRouter, routes } from '@/router';
|
||||
import { i18n } from '@/i18n';
|
||||
import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
|
||||
import { Router } from '@/nirax';
|
||||
import { ComputedRef, provide } from "vue";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import { popout as _popout } from "@/scripts/popout";
|
||||
import copyToClipboard from "@/scripts/copy-to-clipboard";
|
||||
import { url } from "@/config";
|
||||
import * as os from "@/os";
|
||||
import { mainRouter, routes } from "@/router";
|
||||
import { i18n } from "@/i18n";
|
||||
import {
|
||||
PageMetadata,
|
||||
provideMetadataReceiver,
|
||||
setPageMetadata,
|
||||
} from "@/scripts/page-metadata";
|
||||
import { Router } from "@/nirax";
|
||||
|
||||
const props = defineProps<{
|
||||
initialPath: string;
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
(ev: 'click'): void;
|
||||
(ev: "closed"): void;
|
||||
(ev: "click"): void;
|
||||
}>();
|
||||
|
||||
const router = new Router(routes, props.initialPath);
|
||||
|
||||
router.addListener('push', ctx => {
|
||||
|
||||
});
|
||||
router.addListener("push", (ctx) => {});
|
||||
|
||||
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
|
||||
let rootEl = $ref();
|
||||
|
|
@ -55,40 +84,47 @@ let width = $ref(860);
|
|||
let height = $ref(660);
|
||||
const history = [];
|
||||
|
||||
provide('router', router);
|
||||
provide("router", router);
|
||||
provideMetadataReceiver((info) => {
|
||||
pageMetadata = info;
|
||||
});
|
||||
provide('shouldOmitHeaderTitle', true);
|
||||
provide('shouldHeaderThin', true);
|
||||
provide("shouldOmitHeaderTitle", true);
|
||||
provide("shouldHeaderThin", true);
|
||||
|
||||
const pageUrl = $computed(() => url + path);
|
||||
const contextmenu = $computed(() => {
|
||||
return [{
|
||||
type: 'label',
|
||||
text: path,
|
||||
}, {
|
||||
icon: 'ph-arrows-out-simple ph-bold ph-lg',
|
||||
text: i18n.ts.showInPage,
|
||||
action: expand,
|
||||
}, {
|
||||
icon: 'ph-arrow-square-out ph-bold ph-lg',
|
||||
text: i18n.ts.popout,
|
||||
action: popout,
|
||||
}, null, {
|
||||
icon: 'ph-arrow-square-out ph-bold ph-lg',
|
||||
text: i18n.ts.openInNewTab,
|
||||
action: () => {
|
||||
window.open(pageUrl, '_blank');
|
||||
modal.close();
|
||||
return [
|
||||
{
|
||||
type: "label",
|
||||
text: path,
|
||||
},
|
||||
}, {
|
||||
icon: 'ph-link-simple ph-bold ph-lg',
|
||||
text: i18n.ts.copyLink,
|
||||
action: () => {
|
||||
copyToClipboard(pageUrl);
|
||||
{
|
||||
icon: "ph-arrows-out-simple ph-bold ph-lg",
|
||||
text: i18n.ts.showInPage,
|
||||
action: expand,
|
||||
},
|
||||
}];
|
||||
{
|
||||
icon: "ph-arrow-square-out ph-bold ph-lg",
|
||||
text: i18n.ts.popout,
|
||||
action: popout,
|
||||
},
|
||||
null,
|
||||
{
|
||||
icon: "ph-arrow-square-out ph-bold ph-lg",
|
||||
text: i18n.ts.openInNewTab,
|
||||
action: () => {
|
||||
window.open(pageUrl, "_blank");
|
||||
modal.close();
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: "ph-link-simple ph-bold ph-lg",
|
||||
text: i18n.ts.copyLink,
|
||||
action: () => {
|
||||
copyToClipboard(pageUrl);
|
||||
},
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
function navigate(path, record = true) {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,51 @@
|
|||
<template>
|
||||
<MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
|
||||
<div ref="rootEl" class="ebkgoccj" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
|
||||
<MkModal
|
||||
ref="modal"
|
||||
:prefer-type="'dialog'"
|
||||
@click="onBgClick"
|
||||
@closed="$emit('closed')"
|
||||
>
|
||||
<div
|
||||
ref="rootEl"
|
||||
class="ebkgoccj"
|
||||
:style="{
|
||||
width: `${width}px`,
|
||||
height: scroll
|
||||
? height
|
||||
? `${height}px`
|
||||
: null
|
||||
: height
|
||||
? `min(${height}px, 100%)`
|
||||
: '100%',
|
||||
}"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
<div ref="headerEl" class="header">
|
||||
<button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="ph-x ph-bold ph-lg"></i></button>
|
||||
<button
|
||||
v-if="withOkButton"
|
||||
class="_button"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<i class="ph-x ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<span class="title">
|
||||
<slot name="header"></slot>
|
||||
</span>
|
||||
<button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="ph-x ph-bold ph-lg"></i></button>
|
||||
<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ph-check ph-bold ph-lg"></i></button>
|
||||
<button
|
||||
v-if="!withOkButton"
|
||||
class="_button"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<i class="ph-x ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
v-if="withOkButton"
|
||||
class="_button"
|
||||
:disabled="okButtonDisabled"
|
||||
@click="$emit('ok')"
|
||||
>
|
||||
<i class="ph-check ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="body">
|
||||
<slot :width="bodyWidth" :height="bodyHeight"></slot>
|
||||
|
|
@ -17,28 +55,31 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted } from 'vue';
|
||||
import MkModal from './MkModal.vue';
|
||||
import { onMounted, onUnmounted } from "vue";
|
||||
import MkModal from "./MkModal.vue";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
withOkButton: boolean;
|
||||
okButtonDisabled: boolean;
|
||||
width: number;
|
||||
height: number | null;
|
||||
scroll: boolean;
|
||||
}>(), {
|
||||
withOkButton: false,
|
||||
okButtonDisabled: false,
|
||||
width: 400,
|
||||
height: null,
|
||||
scroll: true,
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
withOkButton: boolean;
|
||||
okButtonDisabled: boolean;
|
||||
width: number;
|
||||
height: number | null;
|
||||
scroll: boolean;
|
||||
}>(),
|
||||
{
|
||||
withOkButton: false,
|
||||
okButtonDisabled: false,
|
||||
width: 400,
|
||||
height: null,
|
||||
scroll: true,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'click'): void;
|
||||
(event: 'close'): void;
|
||||
(event: 'closed'): void;
|
||||
(event: 'ok'): void;
|
||||
(event: "click"): void;
|
||||
(event: "close"): void;
|
||||
(event: "closed"): void;
|
||||
(event: "ok"): void;
|
||||
}>();
|
||||
|
||||
let modal = $shallowRef<InstanceType<typeof MkModal>>();
|
||||
|
|
@ -52,11 +93,12 @@ const close = () => {
|
|||
};
|
||||
|
||||
const onBgClick = () => {
|
||||
emit('click');
|
||||
emit("click");
|
||||
};
|
||||
|
||||
const onKeydown = (evt) => {
|
||||
if (evt.which === 27) { // Esc
|
||||
if (evt.which === 27) {
|
||||
// Esc
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
close();
|
||||
|
|
@ -146,4 +188,3 @@ defineExpose({
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,14 +1,17 @@
|
|||
<template>
|
||||
<div class="msjugskd _block">
|
||||
<i class="ph-airplane-takeoff ph-bold ph-lg" style="margin-right: 8px;"/>
|
||||
{{ i18n.ts.accountMoved }}
|
||||
<MkMention class="link" :username="acct" :host="host"/>
|
||||
</div>
|
||||
<div class="msjugskd _block">
|
||||
<i
|
||||
class="ph-airplane-takeoff ph-bold ph-lg"
|
||||
style="margin-right: 8px"
|
||||
/>
|
||||
{{ i18n.ts.accountMoved }}
|
||||
<MkMention class="link" :username="acct" :host="host" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import MkMention from './MkMention.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import MkMention from "./MkMention.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
defineProps<{
|
||||
acct: string;
|
||||
|
|
|
|||
|
|
@ -1,147 +1,286 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="!muted.muted"
|
||||
v-show="!isDeleted"
|
||||
ref="el"
|
||||
v-hotkey="keymap"
|
||||
v-size="{ max: [500, 450, 350, 300] }"
|
||||
class="tkcbzcuz"
|
||||
:tabindex="!isDeleted ? '-1' : null"
|
||||
:class="{ renote: isRenote }"
|
||||
>
|
||||
<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
|
||||
<div class="note-context" @click="noteClick">
|
||||
<div class="line"></div>
|
||||
<div v-if="appearNote._prId_" class="info"><i class="ph-megaphone-simple-bold ph-lg"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click.stop="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ph-x ph-bold ph-lg"></i></button></div>
|
||||
<div v-if="appearNote._featuredId_" class="info"><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts.featured }}</div>
|
||||
<div v-if="pinned" class="info"><i class="ph-push-pin ph-bold ph-lg"></i>{{ i18n.ts.pinnedNote }}</div>
|
||||
<div v-if="isRenote" class="renote">
|
||||
<i class="ph-repeat ph-bold ph-lg"></i>
|
||||
<I18n :src="i18n.ts.renotedBy" tag="span">
|
||||
<template #user>
|
||||
<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)" @click.stop>
|
||||
<MkUserName :user="note.user"/>
|
||||
</MkA>
|
||||
</template>
|
||||
</I18n>
|
||||
<div class="info">
|
||||
<button ref="renoteTime" class="_button time" @click.stop="showRenoteMenu()">
|
||||
<i v-if="isMyRenote" class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"></i>
|
||||
<MkTime :time="note.createdAt"/>
|
||||
<div
|
||||
v-if="!muted.muted"
|
||||
v-show="!isDeleted"
|
||||
ref="el"
|
||||
v-hotkey="keymap"
|
||||
v-size="{ max: [500, 450, 350, 300] }"
|
||||
class="tkcbzcuz"
|
||||
:tabindex="!isDeleted ? '-1' : null"
|
||||
:class="{ renote: isRenote }"
|
||||
>
|
||||
<MkNoteSub
|
||||
v-if="appearNote.reply"
|
||||
:note="appearNote.reply"
|
||||
class="reply-to"
|
||||
/>
|
||||
<div class="note-context" @click="noteClick">
|
||||
<div class="line"></div>
|
||||
<div v-if="appearNote._prId_" class="info">
|
||||
<i class="ph-megaphone-simple-bold ph-lg"></i>
|
||||
{{ i18n.ts.promotion
|
||||
}}<button class="_textButton hide" @click.stop="readPromo()">
|
||||
{{ i18n.ts.hideThisNote }}
|
||||
<i class="ph-x ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<MkVisibility :note="note"/>
|
||||
</div>
|
||||
<div v-if="appearNote._featuredId_" class="info">
|
||||
<i class="ph-lightning ph-bold ph-lg"></i>
|
||||
{{ i18n.ts.featured }}
|
||||
</div>
|
||||
<div v-if="pinned" class="info">
|
||||
<i class="ph-push-pin ph-bold ph-lg"></i
|
||||
>{{ i18n.ts.pinnedNote }}
|
||||
</div>
|
||||
<div v-if="isRenote" class="renote">
|
||||
<i class="ph-repeat ph-bold ph-lg"></i>
|
||||
<I18n :src="i18n.ts.renotedBy" tag="span">
|
||||
<template #user>
|
||||
<MkA
|
||||
v-user-preview="note.userId"
|
||||
class="name"
|
||||
:to="userPage(note.user)"
|
||||
@click.stop
|
||||
>
|
||||
<MkUserName :user="note.user" />
|
||||
</MkA>
|
||||
</template>
|
||||
</I18n>
|
||||
<div class="info">
|
||||
<button
|
||||
ref="renoteTime"
|
||||
class="_button time"
|
||||
@click.stop="showRenoteMenu()"
|
||||
>
|
||||
<i
|
||||
v-if="isMyRenote"
|
||||
class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
|
||||
></i>
|
||||
<MkTime :time="note.createdAt" />
|
||||
</button>
|
||||
<MkVisibility :note="note" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<article class="article" @contextmenu.stop="onContextmenu" @click="noteClick">
|
||||
<div class="main">
|
||||
<div class="header-container">
|
||||
<MkAvatar class="avatar" :user="appearNote.user"/>
|
||||
<XNoteHeader class="header" :note="appearNote" :mini="true"/>
|
||||
</div>
|
||||
<div class="body">
|
||||
<p v-if="appearNote.cw != null" class="cw">
|
||||
<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :custom-emojis="appearNote.emojis" :i="$i"/>
|
||||
<br/>
|
||||
<XCwButton v-model="showContent" :note="appearNote"/>
|
||||
</p>
|
||||
<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
|
||||
<div class="text">
|
||||
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
|
||||
<!-- <a v-if="appearNote.renote != null" class="rp">RN:</a> -->
|
||||
<div v-if="translating || translation" class="translation">
|
||||
<MkLoading v-if="translating" mini/>
|
||||
<div v-else class="translated">
|
||||
<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
|
||||
<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
|
||||
<article
|
||||
class="article"
|
||||
@contextmenu.stop="onContextmenu"
|
||||
@click="noteClick"
|
||||
>
|
||||
<div class="main">
|
||||
<div class="header-container">
|
||||
<MkAvatar class="avatar" :user="appearNote.user" />
|
||||
<XNoteHeader
|
||||
class="header"
|
||||
:note="appearNote"
|
||||
:mini="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="body">
|
||||
<p v-if="appearNote.cw != null" class="cw">
|
||||
<Mfm
|
||||
v-if="appearNote.cw != ''"
|
||||
class="text"
|
||||
:text="appearNote.cw"
|
||||
:author="appearNote.user"
|
||||
:custom-emojis="appearNote.emojis"
|
||||
:i="$i"
|
||||
/>
|
||||
<br />
|
||||
<XCwButton v-model="showContent" :note="appearNote" />
|
||||
</p>
|
||||
<div
|
||||
v-show="appearNote.cw == null || showContent"
|
||||
class="content"
|
||||
:class="{ collapsed, isLong }"
|
||||
>
|
||||
<div class="text">
|
||||
<Mfm
|
||||
v-if="appearNote.text"
|
||||
:text="appearNote.text"
|
||||
:author="appearNote.user"
|
||||
:i="$i"
|
||||
:custom-emojis="appearNote.emojis"
|
||||
/>
|
||||
<!-- <a v-if="appearNote.renote != null" class="rp">RN:</a> -->
|
||||
<div
|
||||
v-if="translating || translation"
|
||||
class="translation"
|
||||
>
|
||||
<MkLoading v-if="translating" mini />
|
||||
<div v-else class="translated">
|
||||
<b
|
||||
>{{
|
||||
i18n.t("translatedFrom", {
|
||||
x: translation.sourceLang,
|
||||
})
|
||||
}}:
|
||||
</b>
|
||||
<Mfm
|
||||
:text="translation.text"
|
||||
:author="appearNote.user"
|
||||
:i="$i"
|
||||
:custom-emojis="appearNote.emojis"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="appearNote.files.length > 0" class="files">
|
||||
<XMediaList :media-list="appearNote.files" />
|
||||
</div>
|
||||
<XPoll
|
||||
v-if="appearNote.poll"
|
||||
ref="pollViewer"
|
||||
:note="appearNote"
|
||||
class="poll"
|
||||
/>
|
||||
<MkUrlPreview
|
||||
v-for="url in urls"
|
||||
:key="url"
|
||||
:url="url"
|
||||
:compact="true"
|
||||
:detail="false"
|
||||
class="url-preview"
|
||||
/>
|
||||
<div v-if="appearNote.renote" class="renote">
|
||||
<XNoteSimple
|
||||
:note="appearNote.renote"
|
||||
@click.stop="
|
||||
router.push(notePage(appearNote.renote))
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
v-if="isLong && collapsed"
|
||||
class="fade _button"
|
||||
@click.stop="collapsed = false"
|
||||
>
|
||||
<span>{{ i18n.ts.showMore }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-else-if="isLong && !collapsed"
|
||||
class="showLess _button"
|
||||
@click.stop="collapsed = true"
|
||||
>
|
||||
<span>{{ i18n.ts.showLess }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="appearNote.files.length > 0" class="files">
|
||||
<XMediaList :media-list="appearNote.files"/>
|
||||
</div>
|
||||
<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
|
||||
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
|
||||
<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote" @click.stop="router.push(notePage(appearNote.renote))"/></div>
|
||||
<button v-if="isLong && collapsed" class="fade _button" @click.stop="collapsed = false">
|
||||
<span>{{ i18n.ts.showMore }}</span>
|
||||
</button>
|
||||
<button v-else-if="isLong && !collapsed" class="showLess _button" @click.stop="collapsed = true">
|
||||
<span>{{ i18n.ts.showLess }}</span>
|
||||
</button>
|
||||
<MkA
|
||||
v-if="appearNote.channel && !inChannel"
|
||||
class="channel"
|
||||
:to="`/channels/${appearNote.channel.id}`"
|
||||
@click.stop
|
||||
><i class="ph-television ph-bold ph-lg"></i>
|
||||
{{ appearNote.channel.name }}</MkA
|
||||
>
|
||||
</div>
|
||||
<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`" @click.stop><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
|
||||
<footer ref="el" class="footer" @click.stop>
|
||||
<XReactionsViewer
|
||||
ref="reactionsViewer"
|
||||
:note="appearNote"
|
||||
/>
|
||||
<button
|
||||
v-tooltip.noDelay.bottom="i18n.ts.reply"
|
||||
class="button _button"
|
||||
@click="reply()"
|
||||
>
|
||||
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
|
||||
<template v-if="appearNote.repliesCount > 0">
|
||||
<p class="count">{{ appearNote.repliesCount }}</p>
|
||||
</template>
|
||||
</button>
|
||||
<XRenoteButton
|
||||
ref="renoteButton"
|
||||
class="button"
|
||||
:note="appearNote"
|
||||
:count="appearNote.renoteCount"
|
||||
/>
|
||||
<XStarButton
|
||||
v-if="appearNote.myReaction == null"
|
||||
ref="starButton"
|
||||
class="button"
|
||||
:note="appearNote"
|
||||
/>
|
||||
<button
|
||||
v-if="appearNote.myReaction == null"
|
||||
ref="reactButton"
|
||||
v-tooltip.noDelay.bottom="i18n.ts.reaction"
|
||||
class="button _button"
|
||||
@click="react()"
|
||||
>
|
||||
<i class="ph-smiley ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
v-if="appearNote.myReaction != null"
|
||||
ref="reactButton"
|
||||
class="button _button reacted"
|
||||
@click="undoReact(appearNote)"
|
||||
>
|
||||
<i class="ph-minus ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<XQuoteButton class="button" :note="appearNote" />
|
||||
<button
|
||||
ref="menuButton"
|
||||
v-tooltip.noDelay.bottom="i18n.ts.more"
|
||||
class="button _button"
|
||||
@click="menu()"
|
||||
>
|
||||
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
<footer ref="el" class="footer" @click.stop>
|
||||
<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
|
||||
<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
|
||||
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
|
||||
<template v-if="appearNote.repliesCount > 0">
|
||||
<p class="count">{{ appearNote.repliesCount }}</p>
|
||||
</template>
|
||||
</button>
|
||||
<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
|
||||
<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
|
||||
<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
|
||||
<i class="ph-smiley ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
|
||||
<i class="ph-minus ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<XQuoteButton class="button" :note="appearNote"/>
|
||||
<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
|
||||
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div v-else class="muted" @click="muted.muted = false">
|
||||
<I18n :src="i18n.ts.userSaysSomethingReason" tag="small">
|
||||
<template #name>
|
||||
<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
|
||||
<MkUserName :user="appearNote.user"/>
|
||||
</MkA>
|
||||
</template>
|
||||
<template #reason>
|
||||
<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
|
||||
</template>
|
||||
</I18n>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div v-else class="muted" @click="muted.muted = false">
|
||||
<I18n :src="i18n.ts.userSaysSomethingReason" tag="small">
|
||||
<template #name>
|
||||
<MkA
|
||||
v-user-preview="appearNote.userId"
|
||||
class="name"
|
||||
:to="userPage(appearNote.user)"
|
||||
>
|
||||
<MkUserName :user="appearNote.user" />
|
||||
</MkA>
|
||||
</template>
|
||||
<template #reason>
|
||||
<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
|
||||
</template>
|
||||
</I18n>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, inject, onMounted, onUnmounted, reactive, ref } from 'vue';
|
||||
import * as mfm from 'mfm-js';
|
||||
import type { Ref } from 'vue';
|
||||
import type * as misskey from 'calckey-js';
|
||||
import MkNoteSub from '@/components/MkNoteSub.vue';
|
||||
import XNoteHeader from '@/components/MkNoteHeader.vue';
|
||||
import XNoteSimple from '@/components/MkNoteSimple.vue';
|
||||
import XMediaList from '@/components/MkMediaList.vue';
|
||||
import XCwButton from '@/components/MkCwButton.vue';
|
||||
import XPoll from '@/components/MkPoll.vue';
|
||||
import XRenoteButton from '@/components/MkRenoteButton.vue';
|
||||
import XReactionsViewer from '@/components/MkReactionsViewer.vue';
|
||||
import XStarButton from '@/components/MkStarButton.vue';
|
||||
import XQuoteButton from '@/components/MkQuoteButton.vue';
|
||||
import MkUrlPreview from '@/components/MkUrlPreview.vue';
|
||||
import MkVisibility from '@/components/MkVisibility.vue';
|
||||
import { pleaseLogin } from '@/scripts/please-login';
|
||||
import { focusPrev, focusNext } from '@/scripts/focus';
|
||||
import { getWordMute } from '@/scripts/check-word-mute';
|
||||
import { useRouter } from '@/router';
|
||||
import { userPage } from '@/filters/user';
|
||||
import * as os from '@/os';
|
||||
import { defaultStore, noteViewInterruptors } from '@/store';
|
||||
import { reactionPicker } from '@/scripts/reaction-picker';
|
||||
import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
|
||||
import { $i } from '@/account';
|
||||
import { i18n } from '@/i18n';
|
||||
import { getNoteMenu } from '@/scripts/get-note-menu';
|
||||
import { useNoteCapture } from '@/scripts/use-note-capture';
|
||||
import { notePage } from '@/filters/note';
|
||||
import { deepClone } from '@/scripts/clone';
|
||||
import { computed, inject, onMounted, onUnmounted, reactive, ref } from "vue";
|
||||
import * as mfm from "mfm-js";
|
||||
import type { Ref } from "vue";
|
||||
import type * as misskey from "calckey-js";
|
||||
import MkNoteSub from "@/components/MkNoteSub.vue";
|
||||
import XNoteHeader from "@/components/MkNoteHeader.vue";
|
||||
import XNoteSimple from "@/components/MkNoteSimple.vue";
|
||||
import XMediaList from "@/components/MkMediaList.vue";
|
||||
import XCwButton from "@/components/MkCwButton.vue";
|
||||
import XPoll from "@/components/MkPoll.vue";
|
||||
import XRenoteButton from "@/components/MkRenoteButton.vue";
|
||||
import XReactionsViewer from "@/components/MkReactionsViewer.vue";
|
||||
import XStarButton from "@/components/MkStarButton.vue";
|
||||
import XQuoteButton from "@/components/MkQuoteButton.vue";
|
||||
import MkUrlPreview from "@/components/MkUrlPreview.vue";
|
||||
import MkVisibility from "@/components/MkVisibility.vue";
|
||||
import { pleaseLogin } from "@/scripts/please-login";
|
||||
import { focusPrev, focusNext } from "@/scripts/focus";
|
||||
import { getWordMute } from "@/scripts/check-word-mute";
|
||||
import { useRouter } from "@/router";
|
||||
import { userPage } from "@/filters/user";
|
||||
import * as os from "@/os";
|
||||
import { defaultStore, noteViewInterruptors } from "@/store";
|
||||
import { reactionPicker } from "@/scripts/reaction-picker";
|
||||
import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
|
||||
import { $i } from "@/account";
|
||||
import { i18n } from "@/i18n";
|
||||
import { getNoteMenu } from "@/scripts/get-note-menu";
|
||||
import { useNoteCapture } from "@/scripts/use-note-capture";
|
||||
import { notePage } from "@/filters/note";
|
||||
import { deepClone } from "@/scripts/clone";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
|
|
@ -150,7 +289,7 @@ const props = defineProps<{
|
|||
pinned?: boolean;
|
||||
}>();
|
||||
|
||||
const inChannel = inject('inChannel', null);
|
||||
const inChannel = inject("inChannel", null);
|
||||
|
||||
let note = $ref(deepClone(props.note));
|
||||
|
||||
|
|
@ -165,12 +304,11 @@ if (noteViewInterruptors.length > 0) {
|
|||
});
|
||||
}
|
||||
|
||||
const isRenote = (
|
||||
const isRenote =
|
||||
note.renote != null &&
|
||||
note.text == null &&
|
||||
note.fileIds.length === 0 &&
|
||||
note.poll == null
|
||||
);
|
||||
note.poll == null;
|
||||
|
||||
const el = ref<HTMLElement>();
|
||||
const menuButton = ref<HTMLElement>();
|
||||
|
|
@ -178,29 +316,33 @@ const starButton = ref<InstanceType<typeof XStarButton>>();
|
|||
const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
|
||||
const renoteTime = ref<HTMLElement>();
|
||||
const reactButton = ref<HTMLElement>();
|
||||
let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
|
||||
const isMyRenote = $i && ($i.id === note.userId);
|
||||
let appearNote = $computed(() =>
|
||||
isRenote ? (note.renote as misskey.entities.Note) : note
|
||||
);
|
||||
const isMyRenote = $i && $i.id === note.userId;
|
||||
const showContent = ref(false);
|
||||
const isLong = (appearNote.cw == null && appearNote.text != null && (
|
||||
(appearNote.text.split('\n').length > 9) ||
|
||||
(appearNote.text.length > 500)
|
||||
));
|
||||
const isLong =
|
||||
appearNote.cw == null &&
|
||||
appearNote.text != null &&
|
||||
(appearNote.text.split("\n").length > 9 || appearNote.text.length > 500);
|
||||
const collapsed = ref(appearNote.cw == null && isLong);
|
||||
const isDeleted = ref(false);
|
||||
const muted = ref(getWordMute(appearNote, $i, defaultStore.state.mutedWords));
|
||||
const translation = ref(null);
|
||||
const translating = ref(false);
|
||||
const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5) : null;
|
||||
const urls = appearNote.text
|
||||
? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5)
|
||||
: null;
|
||||
|
||||
const keymap = {
|
||||
'r': () => reply(true),
|
||||
'e|a|plus': () => react(true),
|
||||
'q': () => renoteButton.value.renote(true),
|
||||
'up|k|shift+tab': focusBefore,
|
||||
'down|j|tab': focusAfter,
|
||||
'esc': blur,
|
||||
'm|o': () => menu(true),
|
||||
's': () => showContent.value !== showContent.value,
|
||||
r: () => reply(true),
|
||||
"e|a|plus": () => react(true),
|
||||
q: () => renoteButton.value.renote(true),
|
||||
"up|k|shift+tab": focusBefore,
|
||||
"down|j|tab": focusAfter,
|
||||
esc: blur,
|
||||
"m|o": () => menu(true),
|
||||
s: () => showContent.value !== showContent.value,
|
||||
};
|
||||
|
||||
useNoteCapture({
|
||||
|
|
@ -211,76 +353,113 @@ useNoteCapture({
|
|||
|
||||
function reply(viaKeyboard = false): void {
|
||||
pleaseLogin();
|
||||
os.post({
|
||||
reply: appearNote,
|
||||
animation: !viaKeyboard,
|
||||
}, () => {
|
||||
focus();
|
||||
});
|
||||
os.post(
|
||||
{
|
||||
reply: appearNote,
|
||||
animation: !viaKeyboard,
|
||||
},
|
||||
() => {
|
||||
focus();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function react(viaKeyboard = false): void {
|
||||
pleaseLogin();
|
||||
blur();
|
||||
reactionPicker.show(reactButton.value, reaction => {
|
||||
os.api('notes/reactions/create', {
|
||||
noteId: appearNote.id,
|
||||
reaction: reaction,
|
||||
});
|
||||
}, () => {
|
||||
focus();
|
||||
});
|
||||
reactionPicker.show(
|
||||
reactButton.value,
|
||||
(reaction) => {
|
||||
os.api("notes/reactions/create", {
|
||||
noteId: appearNote.id,
|
||||
reaction: reaction,
|
||||
});
|
||||
},
|
||||
() => {
|
||||
focus();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function undoReact(note): void {
|
||||
const oldReaction = note.myReaction;
|
||||
if (!oldReaction) return;
|
||||
os.api('notes/reactions/delete', {
|
||||
os.api("notes/reactions/delete", {
|
||||
noteId: note.id,
|
||||
});
|
||||
}
|
||||
|
||||
const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
|
||||
const currentClipPage = inject<Ref<misskey.entities.Clip> | null>(
|
||||
"currentClipPage",
|
||||
null
|
||||
);
|
||||
|
||||
function onContextmenu(ev: MouseEvent): void {
|
||||
const isLink = (el: HTMLElement) => {
|
||||
if (el.tagName === 'A') return true;
|
||||
if (el.tagName === "A") return true;
|
||||
if (el.parentElement) {
|
||||
return isLink(el.parentElement);
|
||||
}
|
||||
};
|
||||
if (isLink(ev.target)) return;
|
||||
if (window.getSelection().toString() !== '') return;
|
||||
if (window.getSelection().toString() !== "") return;
|
||||
|
||||
if (defaultStore.state.useReactionPickerForContextMenu) {
|
||||
ev.preventDefault();
|
||||
react();
|
||||
} else {
|
||||
os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), ev).then(focus);
|
||||
os.contextMenu(
|
||||
getNoteMenu({
|
||||
note: note,
|
||||
translating,
|
||||
translation,
|
||||
menuButton,
|
||||
isDeleted,
|
||||
currentClipPage,
|
||||
}),
|
||||
ev
|
||||
).then(focus);
|
||||
}
|
||||
}
|
||||
|
||||
function menu(viaKeyboard = false): void {
|
||||
os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, {
|
||||
viaKeyboard,
|
||||
}).then(focus);
|
||||
os.popupMenu(
|
||||
getNoteMenu({
|
||||
note: note,
|
||||
translating,
|
||||
translation,
|
||||
menuButton,
|
||||
isDeleted,
|
||||
currentClipPage,
|
||||
}),
|
||||
menuButton.value,
|
||||
{
|
||||
viaKeyboard,
|
||||
}
|
||||
).then(focus);
|
||||
}
|
||||
|
||||
function showRenoteMenu(viaKeyboard = false): void {
|
||||
if (!isMyRenote) return;
|
||||
os.popupMenu([{
|
||||
text: i18n.ts.unrenote,
|
||||
icon: 'ph-trash ph-bold ph-lg',
|
||||
danger: true,
|
||||
action: () => {
|
||||
os.api('notes/delete', {
|
||||
noteId: note.id,
|
||||
});
|
||||
isDeleted.value = true;
|
||||
},
|
||||
}], renoteTime.value, {
|
||||
viaKeyboard: viaKeyboard,
|
||||
});
|
||||
os.popupMenu(
|
||||
[
|
||||
{
|
||||
text: i18n.ts.unrenote,
|
||||
icon: "ph-trash ph-bold ph-lg",
|
||||
danger: true,
|
||||
action: () => {
|
||||
os.api("notes/delete", {
|
||||
noteId: note.id,
|
||||
});
|
||||
isDeleted.value = true;
|
||||
},
|
||||
},
|
||||
],
|
||||
renoteTime.value,
|
||||
{
|
||||
viaKeyboard: viaKeyboard,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function focus() {
|
||||
|
|
@ -300,15 +479,15 @@ function focusAfter() {
|
|||
}
|
||||
|
||||
function noteClick(e) {
|
||||
if (document.getSelection().type === 'Range') {
|
||||
if (document.getSelection().type === "Range") {
|
||||
e.stopPropagation();
|
||||
} else {
|
||||
router.push(notePage(appearNote))
|
||||
router.push(notePage(appearNote));
|
||||
}
|
||||
}
|
||||
|
||||
function readPromo() {
|
||||
os.api('promo/read', {
|
||||
os.api("promo/read", {
|
||||
noteId: appearNote.id,
|
||||
});
|
||||
isDeleted.value = true;
|
||||
|
|
@ -329,7 +508,7 @@ function readPromo() {
|
|||
// 今度はその処理自体がパフォーマンス低下の原因にならないか懸念される。また、被リアクションでも高さは変化するため、やはり多少のズレは生じる
|
||||
// 一度レンダリングされた要素はブラウザがよしなにサイズを覚えておいてくれるような実装になるまで待った方が良さそう(なるのか？)
|
||||
//content-visibility: auto;
|
||||
//contain-intrinsic-size: 0 128px;
|
||||
//contain-intrinsic-size: 0 128px;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
|
@ -354,13 +533,14 @@ function readPromo() {
|
|||
}
|
||||
|
||||
& > .article > .main {
|
||||
&:hover, &:focus-within {
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
:deep(.footer .button) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
> .reply-to {
|
||||
& + .note-context {
|
||||
.line::before {
|
||||
|
|
@ -393,9 +573,9 @@ function readPromo() {
|
|||
margin-top: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
|
||||
> div > i {
|
||||
margin-left: -.5px;
|
||||
margin-left: -0.5px;
|
||||
}
|
||||
> .info {
|
||||
display: flex;
|
||||
|
|
@ -414,7 +594,6 @@ function readPromo() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
> .renote {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -431,7 +610,7 @@ function readPromo() {
|
|||
flex-shrink: 1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
|
||||
> .name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -459,7 +638,6 @@ function readPromo() {
|
|||
padding: 4px 32px 10px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
@media (pointer: coarse) {
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -486,7 +664,7 @@ function readPromo() {
|
|||
min-width: 0;
|
||||
|
||||
> .body {
|
||||
margin-top: .7em;
|
||||
margin-top: 0.7em;
|
||||
|
||||
> .cw {
|
||||
cursor: default;
|
||||
|
|
@ -525,8 +703,14 @@ function readPromo() {
|
|||
overflow: hidden;
|
||||
> .text {
|
||||
max-height: 9em;
|
||||
mask: linear-gradient(black calc(100% - 64px), transparent);
|
||||
-webkit-mask: linear-gradient(black calc(100% - 64px), transparent);
|
||||
mask: linear-gradient(
|
||||
black calc(100% - 64px),
|
||||
transparent
|
||||
);
|
||||
-webkit-mask: linear-gradient(
|
||||
black calc(100% - 64px),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
> .fade {
|
||||
display: block;
|
||||
|
|
@ -576,8 +760,8 @@ function readPromo() {
|
|||
}
|
||||
|
||||
> .files {
|
||||
margin-top: .4em;
|
||||
margin-bottom: .4em;
|
||||
margin-top: 0.4em;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
> .url-preview {
|
||||
margin-top: 8px;
|
||||
|
|
@ -594,8 +778,9 @@ function readPromo() {
|
|||
padding: 16px;
|
||||
border: solid 1px var(--renote);
|
||||
border-radius: 8px;
|
||||
transition: background .2s;
|
||||
&:hover, &:focus-within {
|
||||
transition: background 0.2s;
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
background-color: var(--panelHighlight);
|
||||
}
|
||||
}
|
||||
|
|
@ -623,9 +808,9 @@ function readPromo() {
|
|||
width: max-content;
|
||||
min-width: max-content;
|
||||
pointer-events: all;
|
||||
transition: opacity .2s;
|
||||
transition: opacity 0.2s;
|
||||
&:first-of-type {
|
||||
margin-left: -.5em;
|
||||
margin-left: -0.5em;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
|
|
@ -644,7 +829,6 @@ function readPromo() {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
> .reply {
|
||||
border-top: solid 0.5px var(--divider);
|
||||
|
|
@ -679,8 +863,6 @@ function readPromo() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.max-width_300px {
|
||||
--avatarSize: 40px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,153 +1,309 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="!muted.muted"
|
||||
v-show="!isDeleted"
|
||||
ref="el"
|
||||
v-hotkey="keymap"
|
||||
v-size="{ max: [500, 450, 350, 300] }"
|
||||
class="lxwezrsl _block"
|
||||
:tabindex="!isDeleted ? '-1' : null"
|
||||
:class="{ renote: isRenote }"
|
||||
>
|
||||
<MkNoteSub v-for="note in conversation" :key="note.id" class="reply-to-more" :note="note"/>
|
||||
<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
|
||||
<div v-if="isRenote" class="renote">
|
||||
<MkAvatar class="avatar" :user="note.user"/>
|
||||
<i class="ph-repeat ph-bold ph-lg"></i>
|
||||
<I18n :src="i18n.ts.renotedBy" tag="span">
|
||||
<template #user>
|
||||
<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
|
||||
<MkUserName :user="note.user"/>
|
||||
</MkA>
|
||||
</template>
|
||||
</I18n>
|
||||
<div class="info">
|
||||
<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
|
||||
<i v-if="isMyRenote" class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"></i>
|
||||
<MkTime :time="note.createdAt"/>
|
||||
</button>
|
||||
<MkVisibility :note="note"/>
|
||||
</div>
|
||||
</div>
|
||||
<article ref="noteEl" class="article" @contextmenu.stop="onContextmenu" tabindex="-1">
|
||||
<header class="header">
|
||||
<MkAvatar class="avatar" :user="appearNote.user" :show-indicator="true"/>
|
||||
<div class="body">
|
||||
<div class="top">
|
||||
<MkA v-user-preview="appearNote.user.id" class="name" :to="userPage(appearNote.user)">
|
||||
<MkUserName :user="appearNote.user"/>
|
||||
<div
|
||||
v-if="!muted.muted"
|
||||
v-show="!isDeleted"
|
||||
ref="el"
|
||||
v-hotkey="keymap"
|
||||
v-size="{ max: [500, 450, 350, 300] }"
|
||||
class="lxwezrsl _block"
|
||||
:tabindex="!isDeleted ? '-1' : null"
|
||||
:class="{ renote: isRenote }"
|
||||
>
|
||||
<MkNoteSub
|
||||
v-for="note in conversation"
|
||||
:key="note.id"
|
||||
class="reply-to-more"
|
||||
:note="note"
|
||||
/>
|
||||
<MkNoteSub
|
||||
v-if="appearNote.reply"
|
||||
:note="appearNote.reply"
|
||||
class="reply-to"
|
||||
/>
|
||||
<div v-if="isRenote" class="renote">
|
||||
<MkAvatar class="avatar" :user="note.user" />
|
||||
<i class="ph-repeat ph-bold ph-lg"></i>
|
||||
<I18n :src="i18n.ts.renotedBy" tag="span">
|
||||
<template #user>
|
||||
<MkA
|
||||
v-user-preview="note.userId"
|
||||
class="name"
|
||||
:to="userPage(note.user)"
|
||||
>
|
||||
<MkUserName :user="note.user" />
|
||||
</MkA>
|
||||
<span v-if="appearNote.user.isBot" class="is-bot">bot</span>
|
||||
<div class="info">
|
||||
<MkVisibility :note="appearNote"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="username"><MkAcct :user="appearNote.user"/></div>
|
||||
<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
|
||||
</template>
|
||||
</I18n>
|
||||
<div class="info">
|
||||
<button
|
||||
ref="renoteTime"
|
||||
class="_button time"
|
||||
@click="showRenoteMenu()"
|
||||
>
|
||||
<i
|
||||
v-if="isMyRenote"
|
||||
class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
|
||||
></i>
|
||||
<MkTime :time="note.createdAt" />
|
||||
</button>
|
||||
<MkVisibility :note="note" />
|
||||
</div>
|
||||
</header>
|
||||
<div class="main">
|
||||
<div class="body">
|
||||
<div v-if="appearNote.cw != null" class="cw">
|
||||
<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
|
||||
<br/>
|
||||
<XCwButton v-model="showContent" :note="appearNote"/>
|
||||
</div>
|
||||
<div v-show="appearNote.cw == null || showContent" class="content">
|
||||
<div class="text">
|
||||
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
|
||||
<div v-if="translating || translation" class="translation">
|
||||
<MkLoading v-if="translating" mini/>
|
||||
<div v-else class="translated">
|
||||
<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
|
||||
<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
|
||||
</div>
|
||||
</div>
|
||||
<article
|
||||
ref="noteEl"
|
||||
class="article"
|
||||
@contextmenu.stop="onContextmenu"
|
||||
tabindex="-1"
|
||||
>
|
||||
<header class="header">
|
||||
<MkAvatar
|
||||
class="avatar"
|
||||
:user="appearNote.user"
|
||||
:show-indicator="true"
|
||||
/>
|
||||
<div class="body">
|
||||
<div class="top">
|
||||
<MkA
|
||||
v-user-preview="appearNote.user.id"
|
||||
class="name"
|
||||
:to="userPage(appearNote.user)"
|
||||
>
|
||||
<MkUserName :user="appearNote.user" />
|
||||
</MkA>
|
||||
<span v-if="appearNote.user.isBot" class="is-bot"
|
||||
>bot</span
|
||||
>
|
||||
<div class="info">
|
||||
<MkVisibility :note="appearNote" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="appearNote.files.length > 0" class="files">
|
||||
<XMediaList :media-list="appearNote.files"/>
|
||||
<div class="username">
|
||||
<MkAcct :user="appearNote.user" />
|
||||
</div>
|
||||
<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
|
||||
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" class="url-preview"/>
|
||||
<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote" @click.stop="router.push(notePage(appearNote.renote))"/></div>
|
||||
<MkInstanceTicker
|
||||
v-if="showTicker"
|
||||
class="ticker"
|
||||
:instance="appearNote.user.instance"
|
||||
/>
|
||||
</div>
|
||||
<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
|
||||
</header>
|
||||
<div class="main">
|
||||
<div class="body">
|
||||
<div v-if="appearNote.cw != null" class="cw">
|
||||
<Mfm
|
||||
v-if="appearNote.cw != ''"
|
||||
class="text"
|
||||
:text="appearNote.cw"
|
||||
:author="appearNote.user"
|
||||
:i="$i"
|
||||
:custom-emojis="appearNote.emojis"
|
||||
/>
|
||||
<br />
|
||||
<XCwButton v-model="showContent" :note="appearNote" />
|
||||
</div>
|
||||
<div
|
||||
v-show="appearNote.cw == null || showContent"
|
||||
class="content"
|
||||
>
|
||||
<div class="text">
|
||||
<Mfm
|
||||
v-if="appearNote.text"
|
||||
:text="appearNote.text"
|
||||
:author="appearNote.user"
|
||||
:i="$i"
|
||||
:custom-emojis="appearNote.emojis"
|
||||
/>
|
||||
<div
|
||||
v-if="translating || translation"
|
||||
class="translation"
|
||||
>
|
||||
<MkLoading v-if="translating" mini />
|
||||
<div v-else class="translated">
|
||||
<b
|
||||
>{{
|
||||
i18n.t("translatedFrom", {
|
||||
x: translation.sourceLang,
|
||||
})
|
||||
}}:
|
||||
</b>
|
||||
<Mfm
|
||||
:text="translation.text"
|
||||
:author="appearNote.user"
|
||||
:i="$i"
|
||||
:custom-emojis="appearNote.emojis"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="appearNote.files.length > 0" class="files">
|
||||
<XMediaList :media-list="appearNote.files" />
|
||||
</div>
|
||||
<XPoll
|
||||
v-if="appearNote.poll"
|
||||
ref="pollViewer"
|
||||
:note="appearNote"
|
||||
class="poll"
|
||||
/>
|
||||
<MkUrlPreview
|
||||
v-for="url in urls"
|
||||
:key="url"
|
||||
:url="url"
|
||||
:compact="true"
|
||||
:detail="true"
|
||||
class="url-preview"
|
||||
/>
|
||||
<div v-if="appearNote.renote" class="renote">
|
||||
<XNoteSimple
|
||||
:note="appearNote.renote"
|
||||
@click.stop="
|
||||
router.push(notePage(appearNote.renote))
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<MkA
|
||||
v-if="appearNote.channel && !inChannel"
|
||||
class="channel"
|
||||
:to="`/channels/${appearNote.channel.id}`"
|
||||
><i class="ph-television ph-bold ph-lg"></i>
|
||||
{{ appearNote.channel.name }}</MkA
|
||||
>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="info">
|
||||
<MkA class="created-at" :to="notePage(appearNote)">
|
||||
<MkTime
|
||||
:time="appearNote.createdAt"
|
||||
mode="detail"
|
||||
/>
|
||||
</MkA>
|
||||
</div>
|
||||
<XReactionsViewer
|
||||
ref="reactionsViewer"
|
||||
:note="appearNote"
|
||||
/>
|
||||
<button
|
||||
v-tooltip.noDelay.bottom="i18n.ts.reply"
|
||||
class="button _button"
|
||||
@click="reply()"
|
||||
>
|
||||
<template v-if="appearNote.reply"
|
||||
><i class="ph-arrow-u-up-left ph-bold ph-lg"></i
|
||||
></template>
|
||||
<template v-else
|
||||
><i class="ph-arrow-bend-up-left ph-bold ph-lg"></i
|
||||
></template>
|
||||
<p v-if="appearNote.repliesCount > 0" class="count">
|
||||
{{ appearNote.repliesCount }}
|
||||
</p>
|
||||
</button>
|
||||
<XRenoteButton
|
||||
ref="renoteButton"
|
||||
class="button"
|
||||
:note="appearNote"
|
||||
:count="appearNote.renoteCount"
|
||||
/>
|
||||
<XStarButton
|
||||
v-if="appearNote.myReaction == null"
|
||||
ref="starButton"
|
||||
class="button"
|
||||
:note="appearNote"
|
||||
/>
|
||||
<button
|
||||
v-if="appearNote.myReaction == null"
|
||||
ref="reactButton"
|
||||
v-tooltip.noDelay.bottom="i18n.ts.reaction"
|
||||
class="button _button"
|
||||
@click="react()"
|
||||
>
|
||||
<i class="ph-smiley ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
v-if="appearNote.myReaction != null"
|
||||
ref="reactButton"
|
||||
class="button _button reacted"
|
||||
@click="undoReact(appearNote)"
|
||||
>
|
||||
<i class="ph-minus ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<XQuoteButton class="button" :note="appearNote" />
|
||||
<button
|
||||
ref="menuButton"
|
||||
v-tooltip.noDelay.bottom="i18n.ts.more"
|
||||
class="button _button"
|
||||
@click="menu()"
|
||||
>
|
||||
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="info">
|
||||
<MkA class="created-at" :to="notePage(appearNote)">
|
||||
<MkTime :time="appearNote.createdAt" mode="detail"/>
|
||||
</MkA>
|
||||
</div>
|
||||
<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
|
||||
<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
|
||||
<template v-if="appearNote.reply"><i class="ph-arrow-u-up-left ph-bold ph-lg"></i></template>
|
||||
<template v-else><i class="ph-arrow-bend-up-left ph-bold ph-lg"></i></template>
|
||||
<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
|
||||
</button>
|
||||
<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
|
||||
<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
|
||||
<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
|
||||
<i class="ph-smiley ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
|
||||
<i class="ph-minus ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<XQuoteButton class="button" :note="appearNote"/>
|
||||
<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
|
||||
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</article>
|
||||
<MkNoteSub v-for="note in directReplies" :key="note.id" :note="note" class="reply" :conversation="replies"/>
|
||||
</div>
|
||||
<div v-else class="_panel muted" @click="muted.muted = false">
|
||||
<I18n :src="i18n.ts.userSaysSomethingReason" tag="small">
|
||||
<template #name>
|
||||
<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
|
||||
<MkUserName :user="appearNote.user"/>
|
||||
</MkA>
|
||||
</template>
|
||||
<template #reason>
|
||||
<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
|
||||
</template>
|
||||
</I18n>
|
||||
</div>
|
||||
</article>
|
||||
<MkNoteSub
|
||||
v-for="note in directReplies"
|
||||
:key="note.id"
|
||||
:note="note"
|
||||
class="reply"
|
||||
:conversation="replies"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="_panel muted" @click="muted.muted = false">
|
||||
<I18n :src="i18n.ts.userSaysSomethingReason" tag="small">
|
||||
<template #name>
|
||||
<MkA
|
||||
v-user-preview="appearNote.userId"
|
||||
class="name"
|
||||
:to="userPage(appearNote.user)"
|
||||
>
|
||||
<MkUserName :user="appearNote.user" />
|
||||
</MkA>
|
||||
</template>
|
||||
<template #reason>
|
||||
<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
|
||||
</template>
|
||||
</I18n>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, inject, onMounted, onUnmounted, onUpdated, reactive, ref } from 'vue';
|
||||
import * as mfm from 'mfm-js';
|
||||
import type * as misskey from 'calckey-js';
|
||||
import MkNoteSub from '@/components/MkNoteSub.vue';
|
||||
import XNoteSimple from '@/components/MkNoteSimple.vue';
|
||||
import XReactionsViewer from '@/components/MkReactionsViewer.vue';
|
||||
import XMediaList from '@/components/MkMediaList.vue';
|
||||
import XCwButton from '@/components/MkCwButton.vue';
|
||||
import XPoll from '@/components/MkPoll.vue';
|
||||
import XStarButton from '@/components/MkStarButton.vue';
|
||||
import XRenoteButton from '@/components/MkRenoteButton.vue';
|
||||
import XQuoteButton from '@/components/MkQuoteButton.vue';
|
||||
import MkUrlPreview from '@/components/MkUrlPreview.vue';
|
||||
import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
|
||||
import MkVisibility from '@/components/MkVisibility.vue';
|
||||
import { pleaseLogin } from '@/scripts/please-login';
|
||||
import { getWordMute } from '@/scripts/check-word-mute';
|
||||
import { userPage } from '@/filters/user';
|
||||
import { notePage } from '@/filters/note';
|
||||
import { useRouter } from '@/router';
|
||||
import * as os from '@/os';
|
||||
import { defaultStore, noteViewInterruptors } from '@/store';
|
||||
import { reactionPicker } from '@/scripts/reaction-picker';
|
||||
import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
|
||||
import { $i } from '@/account';
|
||||
import { i18n } from '@/i18n';
|
||||
import { getNoteMenu } from '@/scripts/get-note-menu';
|
||||
import { useNoteCapture } from '@/scripts/use-note-capture';
|
||||
import { deepClone } from '@/scripts/clone';
|
||||
import { stream } from '@/stream';
|
||||
import { NoteUpdatedEvent } from 'calckey-js/built/streaming.types';
|
||||
import {
|
||||
computed,
|
||||
inject,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
onUpdated,
|
||||
reactive,
|
||||
ref,
|
||||
} from "vue";
|
||||
import * as mfm from "mfm-js";
|
||||
import type * as misskey from "calckey-js";
|
||||
import MkNoteSub from "@/components/MkNoteSub.vue";
|
||||
import XNoteSimple from "@/components/MkNoteSimple.vue";
|
||||
import XReactionsViewer from "@/components/MkReactionsViewer.vue";
|
||||
import XMediaList from "@/components/MkMediaList.vue";
|
||||
import XCwButton from "@/components/MkCwButton.vue";
|
||||
import XPoll from "@/components/MkPoll.vue";
|
||||
import XStarButton from "@/components/MkStarButton.vue";
|
||||
import XRenoteButton from "@/components/MkRenoteButton.vue";
|
||||
import XQuoteButton from "@/components/MkQuoteButton.vue";
|
||||
import MkUrlPreview from "@/components/MkUrlPreview.vue";
|
||||
import MkInstanceTicker from "@/components/MkInstanceTicker.vue";
|
||||
import MkVisibility from "@/components/MkVisibility.vue";
|
||||
import { pleaseLogin } from "@/scripts/please-login";
|
||||
import { getWordMute } from "@/scripts/check-word-mute";
|
||||
import { userPage } from "@/filters/user";
|
||||
import { notePage } from "@/filters/note";
|
||||
import { useRouter } from "@/router";
|
||||
import * as os from "@/os";
|
||||
import { defaultStore, noteViewInterruptors } from "@/store";
|
||||
import { reactionPicker } from "@/scripts/reaction-picker";
|
||||
import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
|
||||
import { $i } from "@/account";
|
||||
import { i18n } from "@/i18n";
|
||||
import { getNoteMenu } from "@/scripts/get-note-menu";
|
||||
import { useNoteCapture } from "@/scripts/use-note-capture";
|
||||
import { deepClone } from "@/scripts/clone";
|
||||
import { stream } from "@/stream";
|
||||
import { NoteUpdatedEvent } from "calckey-js/built/streaming.types";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
|
|
@ -156,7 +312,7 @@ const props = defineProps<{
|
|||
pinned?: boolean;
|
||||
}>();
|
||||
|
||||
const inChannel = inject('inChannel', null);
|
||||
const inChannel = inject("inChannel", null);
|
||||
|
||||
let note = $ref(deepClone(props.note));
|
||||
|
||||
|
|
@ -171,12 +327,11 @@ if (noteViewInterruptors.length > 0) {
|
|||
});
|
||||
}
|
||||
|
||||
const isRenote = (
|
||||
const isRenote =
|
||||
note.renote != null &&
|
||||
note.text == null &&
|
||||
note.fileIds.length === 0 &&
|
||||
note.poll == null
|
||||
);
|
||||
note.poll == null;
|
||||
|
||||
const el = ref<HTMLElement>();
|
||||
const noteEl = $ref();
|
||||
|
|
@ -185,28 +340,34 @@ const starButton = ref<InstanceType<typeof XStarButton>>();
|
|||
const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
|
||||
const renoteTime = ref<HTMLElement>();
|
||||
const reactButton = ref<HTMLElement>();
|
||||
let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
|
||||
const isMyRenote = $i && ($i.id === note.userId);
|
||||
let appearNote = $computed(() =>
|
||||
isRenote ? (note.renote as misskey.entities.Note) : note
|
||||
);
|
||||
const isMyRenote = $i && $i.id === note.userId;
|
||||
const showContent = ref(false);
|
||||
const isDeleted = ref(false);
|
||||
const muted = ref(getWordMute(appearNote, $i, defaultStore.state.mutedWords));
|
||||
const translation = ref(null);
|
||||
const translating = ref(false);
|
||||
const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5) : null;
|
||||
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
|
||||
const urls = appearNote.text
|
||||
? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5)
|
||||
: null;
|
||||
const showTicker =
|
||||
defaultStore.state.instanceTicker === "always" ||
|
||||
(defaultStore.state.instanceTicker === "remote" &&
|
||||
appearNote.user.instance);
|
||||
const conversation = ref<misskey.entities.Note[]>([]);
|
||||
const replies = ref<misskey.entities.Note[]>([]);
|
||||
const directReplies = ref<misskey.entities.Note[]>([]);
|
||||
let isScrolling;
|
||||
|
||||
|
||||
const keymap = {
|
||||
'r': () => reply(true),
|
||||
'e|a|plus': () => react(true),
|
||||
'q': () => renoteButton.value.renote(true),
|
||||
'esc': blur,
|
||||
'm|o': () => menu(true),
|
||||
's': () => showContent.value !== showContent.value,
|
||||
r: () => reply(true),
|
||||
"e|a|plus": () => react(true),
|
||||
q: () => renoteButton.value.renote(true),
|
||||
esc: blur,
|
||||
"m|o": () => menu(true),
|
||||
s: () => showContent.value !== showContent.value,
|
||||
};
|
||||
|
||||
useNoteCapture({
|
||||
|
|
@ -217,74 +378,106 @@ useNoteCapture({
|
|||
|
||||
function reply(viaKeyboard = false): void {
|
||||
pleaseLogin();
|
||||
os.post({
|
||||
reply: appearNote,
|
||||
animation: !viaKeyboard,
|
||||
}, () => {
|
||||
focus();
|
||||
});
|
||||
os.post(
|
||||
{
|
||||
reply: appearNote,
|
||||
animation: !viaKeyboard,
|
||||
},
|
||||
() => {
|
||||
focus();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function react(viaKeyboard = false): void {
|
||||
pleaseLogin();
|
||||
blur();
|
||||
reactionPicker.show(reactButton.value, reaction => {
|
||||
os.api('notes/reactions/create', {
|
||||
noteId: appearNote.id,
|
||||
reaction: reaction,
|
||||
});
|
||||
}, () => {
|
||||
focus();
|
||||
});
|
||||
reactionPicker.show(
|
||||
reactButton.value,
|
||||
(reaction) => {
|
||||
os.api("notes/reactions/create", {
|
||||
noteId: appearNote.id,
|
||||
reaction: reaction,
|
||||
});
|
||||
},
|
||||
() => {
|
||||
focus();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function undoReact(note): void {
|
||||
const oldReaction = note.myReaction;
|
||||
if (!oldReaction) return;
|
||||
os.api('notes/reactions/delete', {
|
||||
os.api("notes/reactions/delete", {
|
||||
noteId: note.id,
|
||||
});
|
||||
}
|
||||
|
||||
function onContextmenu(ev: MouseEvent): void {
|
||||
const isLink = (el: HTMLElement) => {
|
||||
if (el.tagName === 'A') return true;
|
||||
if (el.tagName === "A") return true;
|
||||
if (el.parentElement) {
|
||||
return isLink(el.parentElement);
|
||||
}
|
||||
};
|
||||
if (isLink(ev.target)) return;
|
||||
if (window.getSelection().toString() !== '') return;
|
||||
if (window.getSelection().toString() !== "") return;
|
||||
|
||||
if (defaultStore.state.useReactionPickerForContextMenu) {
|
||||
ev.preventDefault();
|
||||
react();
|
||||
} else {
|
||||
os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), ev).then(focus);
|
||||
os.contextMenu(
|
||||
getNoteMenu({
|
||||
note: note,
|
||||
translating,
|
||||
translation,
|
||||
menuButton,
|
||||
isDeleted,
|
||||
}),
|
||||
ev
|
||||
).then(focus);
|
||||
}
|
||||
}
|
||||
|
||||
function menu(viaKeyboard = false): void {
|
||||
os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), menuButton.value, {
|
||||
viaKeyboard,
|
||||
}).then(focus);
|
||||
os.popupMenu(
|
||||
getNoteMenu({
|
||||
note: note,
|
||||
translating,
|
||||
translation,
|
||||
menuButton,
|
||||
isDeleted,
|
||||
}),
|
||||
menuButton.value,
|
||||
{
|
||||
viaKeyboard,
|
||||
}
|
||||
).then(focus);
|
||||
}
|
||||
|
||||
function showRenoteMenu(viaKeyboard = false): void {
|
||||
if (!isMyRenote) return;
|
||||
os.popupMenu([{
|
||||
text: i18n.ts.unrenote,
|
||||
icon: 'ph-trash ph-bold ph-lg',
|
||||
danger: true,
|
||||
action: () => {
|
||||
os.api('notes/delete', {
|
||||
noteId: note.id,
|
||||
});
|
||||
isDeleted.value = true;
|
||||
},
|
||||
}], renoteTime.value, {
|
||||
viaKeyboard: viaKeyboard,
|
||||
});
|
||||
os.popupMenu(
|
||||
[
|
||||
{
|
||||
text: i18n.ts.unrenote,
|
||||
icon: "ph-trash ph-bold ph-lg",
|
||||
danger: true,
|
||||
action: () => {
|
||||
os.api("notes/delete", {
|
||||
noteId: note.id,
|
||||
});
|
||||
isDeleted.value = true;
|
||||
},
|
||||
},
|
||||
],
|
||||
renoteTime.value,
|
||||
{
|
||||
viaKeyboard: viaKeyboard,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function focus() {
|
||||
|
|
@ -295,20 +488,26 @@ function blur() {
|
|||
noteEl.blur();
|
||||
}
|
||||
|
||||
os.api('notes/children', {
|
||||
os.api("notes/children", {
|
||||
noteId: appearNote.id,
|
||||
limit: 30,
|
||||
depth: 12,
|
||||
}).then(res => {
|
||||
}).then((res) => {
|
||||
replies.value = res;
|
||||
directReplies.value = res.filter(note => note.replyId === appearNote.id || note.renoteId === appearNote.id).reverse();
|
||||
directReplies.value = res
|
||||
.filter(
|
||||
(note) =>
|
||||
note.replyId === appearNote.id ||
|
||||
note.renoteId === appearNote.id
|
||||
)
|
||||
.reverse();
|
||||
});
|
||||
|
||||
if (appearNote.replyId) {
|
||||
os.api('notes/conversation', {
|
||||
os.api("notes/conversation", {
|
||||
noteId: appearNote.replyId,
|
||||
limit: 30,
|
||||
}).then(res => {
|
||||
}).then((res) => {
|
||||
conversation.value = res.reverse();
|
||||
focus();
|
||||
});
|
||||
|
|
@ -316,24 +515,23 @@ if (appearNote.replyId) {
|
|||
|
||||
function onNoteReplied(noteData: NoteUpdatedEvent): void {
|
||||
const { type, id, body } = noteData;
|
||||
if (type === 'replied' && id === appearNote.id) {
|
||||
if (type === "replied" && id === appearNote.id) {
|
||||
const { id: createdId } = body;
|
||||
|
||||
os.api('notes/show', {
|
||||
os.api("notes/show", {
|
||||
noteId: createdId,
|
||||
}).then(note => {
|
||||
}).then((note) => {
|
||||
if (note.replyId === appearNote.id) {
|
||||
replies.value.unshift(note);
|
||||
directReplies.value.unshift(note);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
document.addEventListener("wheel", () => {
|
||||
isScrolling = true;
|
||||
})
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
stream.on("noteUpdated", onNoteReplied);
|
||||
|
|
@ -343,14 +541,13 @@ onMounted(() => {
|
|||
|
||||
onUpdated(() => {
|
||||
if (!isScrolling) {
|
||||
noteEl.scrollIntoView()
|
||||
noteEl.scrollIntoView();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stream.off("noteUpdated", onNoteReplied);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -558,8 +755,9 @@ onUnmounted(() => {
|
|||
padding: 16px;
|
||||
border: solid 1px var(--renote);
|
||||
border-radius: 8px;
|
||||
transition: background .2s;
|
||||
&:hover, &:focus-within {
|
||||
transition: background 0.2s;
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
background-color: var(--panelHighlight);
|
||||
}
|
||||
}
|
||||
|
|
@ -617,7 +815,10 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
// Hover
|
||||
.reply :deep(.main), .reply-to, .reply-to-more, :deep(.more) {
|
||||
.reply :deep(.main),
|
||||
.reply-to,
|
||||
.reply-to-more,
|
||||
:deep(.more) {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
|
|
@ -627,10 +828,11 @@ onUnmounted(() => {
|
|||
background: var(--panelHighlight);
|
||||
border-radius: var(--radius);
|
||||
opacity: 0;
|
||||
transition: opacity .2s;
|
||||
transition: opacity 0.2s;
|
||||
z-index: -1;
|
||||
}
|
||||
&.reply-to, &.reply-to-more {
|
||||
&.reply-to,
|
||||
&.reply-to-more {
|
||||
&::before {
|
||||
inset: 0px 8px;
|
||||
}
|
||||
|
|
@ -651,7 +853,8 @@ onUnmounted(() => {
|
|||
&.more::before {
|
||||
inset: 0 !important;
|
||||
}
|
||||
&:hover, &:focus-within {
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -667,14 +870,12 @@ onUnmounted(() => {
|
|||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
&.max-width_500px {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
|
||||
&.max-width_450px {
|
||||
|
||||
> .reply-to-more:first-child {
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
|
@ -708,7 +909,6 @@ onUnmounted(() => {
|
|||
font-size: 0.825em;
|
||||
|
||||
> .article {
|
||||
|
||||
> .main {
|
||||
> .footer {
|
||||
> .button {
|
||||
|
|
|
|||
|
|
@ -1,36 +1,45 @@
|
|||
<template>
|
||||
<header class="kkwtjztg">
|
||||
<div class="user-info">
|
||||
<div>
|
||||
<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)" @click.stop>
|
||||
<MkUserName :user="note.user" class="mkusername">
|
||||
<span v-if="note.user.isBot" class="is-bot">bot</span>
|
||||
</MkUserName>
|
||||
</MkA>
|
||||
<div class="username"><MkAcct :user="note.user"/></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="info">
|
||||
<MkA class="created-at" :to="notePage(note)">
|
||||
<MkTime :time="note.createdAt"/>
|
||||
<header class="kkwtjztg">
|
||||
<div class="user-info">
|
||||
<div>
|
||||
<MkA
|
||||
v-user-preview="note.user.id"
|
||||
class="name"
|
||||
:to="userPage(note.user)"
|
||||
@click.stop
|
||||
>
|
||||
<MkUserName :user="note.user" class="mkusername">
|
||||
<span v-if="note.user.isBot" class="is-bot">bot</span>
|
||||
</MkUserName>
|
||||
</MkA>
|
||||
<MkVisibility :note="note"/>
|
||||
<div class="username"><MkAcct :user="note.user" /></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="info">
|
||||
<MkA class="created-at" :to="notePage(note)">
|
||||
<MkTime :time="note.createdAt" />
|
||||
</MkA>
|
||||
<MkVisibility :note="note" />
|
||||
</div>
|
||||
<MkInstanceTicker
|
||||
v-if="showTicker"
|
||||
class="ticker"
|
||||
:instance="note.user.instance"
|
||||
/>
|
||||
</div>
|
||||
<MkInstanceTicker v-if="showTicker" class="ticker" :instance="note.user.instance"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import type * as misskey from 'calckey-js';
|
||||
import { defaultStore, noteViewInterruptors } from '@/store';
|
||||
import MkVisibility from '@/components/MkVisibility.vue';
|
||||
import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
|
||||
import { notePage } from '@/filters/note';
|
||||
import { userPage } from '@/filters/user';
|
||||
import { deepClone } from '@/scripts/clone';
|
||||
import {} from "vue";
|
||||
import type * as misskey from "calckey-js";
|
||||
import { defaultStore, noteViewInterruptors } from "@/store";
|
||||
import MkVisibility from "@/components/MkVisibility.vue";
|
||||
import MkInstanceTicker from "@/components/MkInstanceTicker.vue";
|
||||
import { notePage } from "@/filters/note";
|
||||
import { userPage } from "@/filters/user";
|
||||
import { deepClone } from "@/scripts/clone";
|
||||
|
||||
const props = defineProps<{
|
||||
note: misskey.entities.Note;
|
||||
|
|
@ -39,10 +48,9 @@ const props = defineProps<{
|
|||
|
||||
let note = $ref(deepClone(props.note));
|
||||
|
||||
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && note.user.instance);
|
||||
|
||||
|
||||
|
||||
const showTicker =
|
||||
defaultStore.state.instanceTicker === "always" ||
|
||||
(defaultStore.state.instanceTicker === "remote" && note.user.instance);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -54,7 +62,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
|
|||
white-space: nowrap;
|
||||
justify-self: flex-end;
|
||||
border-radius: 100px;
|
||||
font-size: .8em;
|
||||
font-size: 0.8em;
|
||||
text-shadow: 0 2px 2px var(--shadow);
|
||||
> .avatar {
|
||||
width: 3.7em;
|
||||
|
|
@ -73,11 +81,11 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
|
|||
width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
gap: .1em 0;
|
||||
gap: 0.1em 0;
|
||||
}
|
||||
&:last-child {
|
||||
max-width: 50%;
|
||||
gap: .3em .5em;
|
||||
gap: 0.3em 0.5em;
|
||||
}
|
||||
.article > .main & {
|
||||
display: flex;
|
||||
|
|
@ -94,17 +102,17 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
|
|||
.name {
|
||||
// flex: 1 1 0px;
|
||||
display: inline;
|
||||
margin: 0 .5em 0 0;
|
||||
margin: 0 0.5em 0 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.mkusername >.is-bot {
|
||||
.mkusername > .is-bot {
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
margin: 0 .5em 0 0;
|
||||
margin: 0 0.5em 0 0;
|
||||
padding: 1px 6px;
|
||||
font-size: 80%;
|
||||
border: solid 0.5px var(--divider);
|
||||
|
|
@ -118,17 +126,17 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
|
|||
|
||||
.username {
|
||||
display: inline;
|
||||
margin: 0 .5em 0 0;
|
||||
margin: 0 0.5em 0 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
align-self: flex-start;
|
||||
font-size: .9em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
margin-left: .5em;
|
||||
margin-left: 0.5em;
|
||||
font-size: 0.9em;
|
||||
.created-at {
|
||||
max-width: 100%;
|
||||
|
|
@ -139,7 +147,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
|
|||
|
||||
.ticker {
|
||||
display: inline-flex;
|
||||
margin-left: .5em;
|
||||
margin-left: 0.5em;
|
||||
vertical-align: middle;
|
||||
> .name {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<template>
|
||||
<div v-size="{ min: [350, 500] }" class="fefdfafb">
|
||||
<MkAvatar class="avatar" :user="$i"/>
|
||||
<div class="main">
|
||||
<div class="header">
|
||||
<MkUserName :user="$i"/>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="content">
|
||||
<Mfm :text="preprocess(text).trim()" :author="$i" :i="$i"/>
|
||||
<div v-size="{ min: [350, 500] }" class="fefdfafb">
|
||||
<MkAvatar class="avatar" :user="$i" />
|
||||
<div class="main">
|
||||
<div class="header">
|
||||
<MkUserName :user="$i" />
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="content">
|
||||
<Mfm :text="preprocess(text).trim()" :author="$i" :i="$i" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import { preprocess } from '@/scripts/preprocess';
|
||||
import {} from "vue";
|
||||
import { preprocess } from "@/scripts/preprocess";
|
||||
|
||||
const props = defineProps<{
|
||||
text: string;
|
||||
|
|
@ -67,7 +67,6 @@ const props = defineProps<{
|
|||
}
|
||||
|
||||
> .body {
|
||||
|
||||
> .cw {
|
||||
cursor: default;
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,28 +1,35 @@
|
|||
<template>
|
||||
<div v-size="{ min: [350, 500] }" class="yohlumlk">
|
||||
<MkAvatar class="avatar" :user="note.user"/>
|
||||
<div class="main">
|
||||
<XNoteHeader class="header" :note="note" :mini="true"/>
|
||||
<div class="body">
|
||||
<p v-if="note.cw != null" class="cw">
|
||||
<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
|
||||
<br/>
|
||||
<XCwButton v-model="showContent" :note="note"/>
|
||||
</p>
|
||||
<div v-show="note.cw == null || showContent" class="content">
|
||||
<MkSubNoteContent class="text" :note="note"/>
|
||||
<div v-size="{ min: [350, 500] }" class="yohlumlk">
|
||||
<MkAvatar class="avatar" :user="note.user" />
|
||||
<div class="main">
|
||||
<XNoteHeader class="header" :note="note" :mini="true" />
|
||||
<div class="body">
|
||||
<p v-if="note.cw != null" class="cw">
|
||||
<Mfm
|
||||
v-if="note.cw != ''"
|
||||
class="text"
|
||||
:text="note.cw"
|
||||
:author="note.user"
|
||||
:i="$i"
|
||||
:custom-emojis="note.emojis"
|
||||
/>
|
||||
<br />
|
||||
<XCwButton v-model="showContent" :note="note" />
|
||||
</p>
|
||||
<div v-show="note.cw == null || showContent" class="content">
|
||||
<MkSubNoteContent class="text" :note="note" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import * as misskey from 'calckey-js';
|
||||
import XNoteHeader from '@/components/MkNoteHeader.vue';
|
||||
import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
|
||||
import XCwButton from '@/components/MkCwButton.vue';
|
||||
import {} from "vue";
|
||||
import * as misskey from "calckey-js";
|
||||
import XNoteHeader from "@/components/MkNoteHeader.vue";
|
||||
import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
|
||||
import XCwButton from "@/components/MkCwButton.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
note: misskey.entities.Note;
|
||||
|
|
@ -74,7 +81,6 @@ const showContent = $ref(false);
|
|||
}
|
||||
|
||||
> .body {
|
||||
|
||||
> .cw {
|
||||
cursor: default;
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,178 +1,309 @@
|
|||
<template>
|
||||
<div ref="el"
|
||||
v-size="{ max: [450, 500] }"
|
||||
class="wrpstxzv"
|
||||
:class="{ children: depth > 1, singleStart: replies.length == 1, firstColumn: depth == 1 && conversation }"
|
||||
>
|
||||
<div v-if="conversation && depth > 1" class="line"></div>
|
||||
<div class="main" @click="noteClick">
|
||||
<div class="avatar-container">
|
||||
<MkAvatar class="avatar" :user="appearNote.user"/>
|
||||
<div v-if="(!conversation) || replies.length > 0" class="line"></div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<XNoteHeader class="header" :note="note" :mini="true"/>
|
||||
<div
|
||||
ref="el"
|
||||
v-size="{ max: [450, 500] }"
|
||||
class="wrpstxzv"
|
||||
:class="{
|
||||
children: depth > 1,
|
||||
singleStart: replies.length == 1,
|
||||
firstColumn: depth == 1 && conversation,
|
||||
}"
|
||||
>
|
||||
<div v-if="conversation && depth > 1" class="line"></div>
|
||||
<div class="main" @click="noteClick">
|
||||
<div class="avatar-container">
|
||||
<MkAvatar class="avatar" :user="appearNote.user" />
|
||||
<div
|
||||
v-if="!conversation || replies.length > 0"
|
||||
class="line"
|
||||
></div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<p v-if="appearNote.cw != null" class="cw">
|
||||
<MkA v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`" class="reply-icon" @click.stop>
|
||||
<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
|
||||
</MkA>
|
||||
<MkA v-if="conversation && appearNote.renoteId && appearNote.renoteId != parentId && !appearNote.replyId" :to="`/notes/${appearNote.renoteId}`" class="reply-icon" @click.stop>
|
||||
<i class="ph-quotes ph-bold ph-lg"></i>
|
||||
</MkA>
|
||||
<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
|
||||
<br/>
|
||||
<XCwButton v-model="showContent" :note="note"/>
|
||||
</p>
|
||||
<div v-show="appearNote.cw == null || showContent" class="content">
|
||||
<MkSubNoteContent class="text" :note="note" :detailed="true" :parentId="appearNote.parentId" :conversation="conversation"/>
|
||||
</div>
|
||||
<div v-if="translating || translation" class="translation">
|
||||
<MkLoading v-if="translating" mini/>
|
||||
<div v-else class="translated">
|
||||
<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
|
||||
<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
|
||||
<XNoteHeader class="header" :note="note" :mini="true" />
|
||||
<div class="body">
|
||||
<p v-if="appearNote.cw != null" class="cw">
|
||||
<MkA
|
||||
v-if="appearNote.replyId"
|
||||
:to="`/notes/${appearNote.replyId}`"
|
||||
class="reply-icon"
|
||||
@click.stop
|
||||
>
|
||||
<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
|
||||
</MkA>
|
||||
<MkA
|
||||
v-if="
|
||||
conversation &&
|
||||
appearNote.renoteId &&
|
||||
appearNote.renoteId != parentId &&
|
||||
!appearNote.replyId
|
||||
"
|
||||
:to="`/notes/${appearNote.renoteId}`"
|
||||
class="reply-icon"
|
||||
@click.stop
|
||||
>
|
||||
<i class="ph-quotes ph-bold ph-lg"></i>
|
||||
</MkA>
|
||||
<Mfm
|
||||
v-if="appearNote.cw != ''"
|
||||
class="text"
|
||||
:text="appearNote.cw"
|
||||
:author="appearNote.user"
|
||||
:i="$i"
|
||||
:custom-emojis="appearNote.emojis"
|
||||
/>
|
||||
<br />
|
||||
<XCwButton v-model="showContent" :note="note" />
|
||||
</p>
|
||||
<div
|
||||
v-show="appearNote.cw == null || showContent"
|
||||
class="content"
|
||||
>
|
||||
<MkSubNoteContent
|
||||
class="text"
|
||||
:note="note"
|
||||
:detailed="true"
|
||||
:parentId="appearNote.parentId"
|
||||
:conversation="conversation"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="translating || translation" class="translation">
|
||||
<MkLoading v-if="translating" mini />
|
||||
<div v-else class="translated">
|
||||
<b
|
||||
>{{
|
||||
i18n.t("translatedFrom", {
|
||||
x: translation.sourceLang,
|
||||
})
|
||||
}}:
|
||||
</b>
|
||||
<Mfm
|
||||
:text="translation.text"
|
||||
:author="appearNote.user"
|
||||
:i="$i"
|
||||
:custom-emojis="appearNote.emojis"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer" @click.stop>
|
||||
<XReactionsViewer
|
||||
ref="reactionsViewer"
|
||||
:note="appearNote"
|
||||
/>
|
||||
<button
|
||||
v-tooltip.noDelay.bottom="i18n.ts.reply"
|
||||
class="button _button"
|
||||
@click="reply()"
|
||||
>
|
||||
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
|
||||
<template v-if="appearNote.repliesCount > 0">
|
||||
<p class="count">{{ appearNote.repliesCount }}</p>
|
||||
</template>
|
||||
</button>
|
||||
<XRenoteButton
|
||||
ref="renoteButton"
|
||||
class="button"
|
||||
:note="appearNote"
|
||||
:count="appearNote.renoteCount"
|
||||
/>
|
||||
<XStarButton
|
||||
v-if="appearNote.myReaction == null"
|
||||
ref="starButton"
|
||||
class="button"
|
||||
:note="appearNote"
|
||||
/>
|
||||
<button
|
||||
v-if="appearNote.myReaction == null"
|
||||
ref="reactButton"
|
||||
v-tooltip.noDelay.bottom="i18n.ts.reaction"
|
||||
class="button _button"
|
||||
@click="react()"
|
||||
>
|
||||
<i class="ph-smiley ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
v-if="appearNote.myReaction != null"
|
||||
ref="reactButton"
|
||||
class="button _button reacted"
|
||||
@click="undoReact(appearNote)"
|
||||
>
|
||||
<i class="ph-minus ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<XQuoteButton class="button" :note="appearNote" />
|
||||
<button
|
||||
ref="menuButton"
|
||||
v-tooltip.noDelay.bottom="i18n.ts.more"
|
||||
class="button _button"
|
||||
@click="menu()"
|
||||
>
|
||||
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
<footer class="footer" @click.stop>
|
||||
<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
|
||||
<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
|
||||
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
|
||||
<template v-if="appearNote.repliesCount > 0">
|
||||
<p class="count">{{ appearNote.repliesCount }}</p>
|
||||
</template>
|
||||
</button>
|
||||
<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
|
||||
<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
|
||||
<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
|
||||
<i class="ph-smiley ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
|
||||
<i class="ph-minus ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<XQuoteButton class="button" :note="appearNote"/>
|
||||
<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
|
||||
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
<template v-if="conversation">
|
||||
<template v-if="replies.length == 1">
|
||||
<MkNoteSub
|
||||
v-for="reply in replies"
|
||||
:key="reply.id"
|
||||
:note="reply"
|
||||
class="reply single"
|
||||
:conversation="conversation"
|
||||
:depth="depth"
|
||||
:parentId="appearNote.replyId"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="depth < 5">
|
||||
<MkNoteSub
|
||||
v-for="reply in replies"
|
||||
:key="reply.id"
|
||||
:note="reply"
|
||||
class="reply"
|
||||
:conversation="conversation"
|
||||
:depth="depth + 1"
|
||||
:parentId="appearNote.replyId"
|
||||
/>
|
||||
</template>
|
||||
<div v-else-if="replies.length > 0" class="more">
|
||||
<div class="line"></div>
|
||||
<MkA class="text _link" :to="notePage(note)"
|
||||
>{{ i18n.ts.continueThread }}
|
||||
<i class="ph-caret-double-right ph-bold ph-lg"></i
|
||||
></MkA>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<template v-if="conversation">
|
||||
<template v-if="replies.length == 1">
|
||||
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth" :parentId="appearNote.replyId"/>
|
||||
</template>
|
||||
<template v-else-if="depth < 5">
|
||||
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1" :parentId="appearNote.replyId"/>
|
||||
</template>
|
||||
<div v-else-if="replies.length > 0" class="more">
|
||||
<div class="line"></div>
|
||||
<MkA class="text _link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { inject, ref } from 'vue';
|
||||
import type { Ref } from 'vue';
|
||||
import * as misskey from 'calckey-js';
|
||||
import XNoteHeader from '@/components/MkNoteHeader.vue';
|
||||
import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
|
||||
import XReactionsViewer from '@/components/MkReactionsViewer.vue';
|
||||
import XStarButton from '@/components/MkStarButton.vue';
|
||||
import XRenoteButton from '@/components/MkRenoteButton.vue';
|
||||
import XQuoteButton from '@/components/MkQuoteButton.vue';
|
||||
import XCwButton from '@/components/MkCwButton.vue';
|
||||
import { pleaseLogin } from '@/scripts/please-login';
|
||||
import { getNoteMenu } from '@/scripts/get-note-menu';
|
||||
import { notePage } from '@/filters/note';
|
||||
import { useRouter } from '@/router';
|
||||
import * as os from '@/os';
|
||||
import { reactionPicker } from '@/scripts/reaction-picker';
|
||||
import { i18n } from '@/i18n';
|
||||
import { deepClone } from '@/scripts/clone';
|
||||
import { useNoteCapture } from '@/scripts/use-note-capture';
|
||||
|
||||
import { inject, ref } from "vue";
|
||||
import type { Ref } from "vue";
|
||||
import * as misskey from "calckey-js";
|
||||
import XNoteHeader from "@/components/MkNoteHeader.vue";
|
||||
import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
|
||||
import XReactionsViewer from "@/components/MkReactionsViewer.vue";
|
||||
import XStarButton from "@/components/MkStarButton.vue";
|
||||
import XRenoteButton from "@/components/MkRenoteButton.vue";
|
||||
import XQuoteButton from "@/components/MkQuoteButton.vue";
|
||||
import XCwButton from "@/components/MkCwButton.vue";
|
||||
import { pleaseLogin } from "@/scripts/please-login";
|
||||
import { getNoteMenu } from "@/scripts/get-note-menu";
|
||||
import { notePage } from "@/filters/note";
|
||||
import { useRouter } from "@/router";
|
||||
import * as os from "@/os";
|
||||
import { reactionPicker } from "@/scripts/reaction-picker";
|
||||
import { i18n } from "@/i18n";
|
||||
import { deepClone } from "@/scripts/clone";
|
||||
import { useNoteCapture } from "@/scripts/use-note-capture";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
note: misskey.entities.Note;
|
||||
conversation?: misskey.entities.Note[];
|
||||
parentId?;
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
note: misskey.entities.Note;
|
||||
conversation?: misskey.entities.Note[];
|
||||
parentId?;
|
||||
|
||||
// how many notes are in between this one and the note being viewed in detail
|
||||
depth?: number;
|
||||
}>(), {
|
||||
depth: 1,
|
||||
});
|
||||
// how many notes are in between this one and the note being viewed in detail
|
||||
depth?: number;
|
||||
}>(),
|
||||
{
|
||||
depth: 1,
|
||||
}
|
||||
);
|
||||
|
||||
let note = $ref(deepClone(props.note));
|
||||
|
||||
const isRenote = (
|
||||
const isRenote =
|
||||
note.renote != null &&
|
||||
note.text == null &&
|
||||
note.fileIds.length === 0 &&
|
||||
note.poll == null
|
||||
);
|
||||
note.poll == null;
|
||||
|
||||
const el = ref<HTMLElement>();
|
||||
const menuButton = ref<HTMLElement>();
|
||||
const starButton = ref<InstanceType<typeof XStarButton>>();
|
||||
const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
|
||||
const reactButton = ref<HTMLElement>();
|
||||
let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
|
||||
let appearNote = $computed(() =>
|
||||
isRenote ? (note.renote as misskey.entities.Note) : note
|
||||
);
|
||||
const isDeleted = ref(false);
|
||||
const translation = ref(null);
|
||||
const translating = ref(false);
|
||||
let showContent = $ref(false);
|
||||
const replies: misskey.entities.Note[] = props.conversation?.filter(item => item.replyId === props.note.id || item.renoteId === props.note.id).reverse() ?? [];
|
||||
const replies: misskey.entities.Note[] =
|
||||
props.conversation
|
||||
?.filter(
|
||||
(item) =>
|
||||
item.replyId === props.note.id ||
|
||||
item.renoteId === props.note.id
|
||||
)
|
||||
.reverse() ?? [];
|
||||
|
||||
useNoteCapture({
|
||||
rootEl: el,
|
||||
note: $$(appearNote)
|
||||
note: $$(appearNote),
|
||||
});
|
||||
|
||||
|
||||
function reply(viaKeyboard = false): void {
|
||||
pleaseLogin();
|
||||
os.post({
|
||||
reply: appearNote,
|
||||
animation: !viaKeyboard,
|
||||
}, () => {
|
||||
focus();
|
||||
});
|
||||
os.post(
|
||||
{
|
||||
reply: appearNote,
|
||||
animation: !viaKeyboard,
|
||||
},
|
||||
() => {
|
||||
focus();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function react(viaKeyboard = false): void {
|
||||
pleaseLogin();
|
||||
blur();
|
||||
reactionPicker.show(reactButton.value, reaction => {
|
||||
os.api('notes/reactions/create', {
|
||||
noteId: appearNote.id,
|
||||
reaction: reaction,
|
||||
});
|
||||
}, () => {
|
||||
focus();
|
||||
});
|
||||
reactionPicker.show(
|
||||
reactButton.value,
|
||||
(reaction) => {
|
||||
os.api("notes/reactions/create", {
|
||||
noteId: appearNote.id,
|
||||
reaction: reaction,
|
||||
});
|
||||
},
|
||||
() => {
|
||||
focus();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function undoReact(note): void {
|
||||
const oldReaction = note.myReaction;
|
||||
if (!oldReaction) return;
|
||||
os.api('notes/reactions/delete', {
|
||||
os.api("notes/reactions/delete", {
|
||||
noteId: note.id,
|
||||
});
|
||||
}
|
||||
|
||||
const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
|
||||
|
||||
const currentClipPage = inject<Ref<misskey.entities.Clip> | null>(
|
||||
"currentClipPage",
|
||||
null
|
||||
);
|
||||
|
||||
function menu(viaKeyboard = false): void {
|
||||
os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, {
|
||||
viaKeyboard,
|
||||
}).then(focus);
|
||||
os.popupMenu(
|
||||
getNoteMenu({
|
||||
note: note,
|
||||
translating,
|
||||
translation,
|
||||
menuButton,
|
||||
isDeleted,
|
||||
currentClipPage,
|
||||
}),
|
||||
menuButton.value,
|
||||
{
|
||||
viaKeyboard,
|
||||
}
|
||||
).then(focus);
|
||||
}
|
||||
|
||||
function focus() {
|
||||
|
|
@ -184,10 +315,10 @@ function blur() {
|
|||
}
|
||||
|
||||
function noteClick(e) {
|
||||
if (document.getSelection().type === 'Range') {
|
||||
if (document.getSelection().type === "Range") {
|
||||
e.stopPropagation();
|
||||
} else {
|
||||
router.push(notePage(props.note))
|
||||
router.push(notePage(props.note));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -206,7 +337,6 @@ function noteClick(e) {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
> .main {
|
||||
display: flex;
|
||||
|
||||
|
|
@ -231,7 +361,7 @@ function noteClick(e) {
|
|||
@media (pointer: coarse) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
> .header {
|
||||
margin-bottom: 2px;
|
||||
cursor: auto;
|
||||
|
|
@ -241,11 +371,12 @@ function noteClick(e) {
|
|||
.reply-icon {
|
||||
display: inline-block;
|
||||
border-radius: 6px;
|
||||
padding: .2em .2em;
|
||||
margin-right: .2em;
|
||||
padding: 0.2em 0.2em;
|
||||
margin-right: 0.2em;
|
||||
color: var(--accent);
|
||||
transition: background .2s;
|
||||
&:hover, &:focus {
|
||||
transition: background 0.2s;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--buttonHoverBg);
|
||||
}
|
||||
}
|
||||
|
|
@ -279,7 +410,7 @@ function noteClick(e) {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
|
||||
|
||||
|
||||
> .button {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
|
|
@ -289,20 +420,20 @@ function noteClick(e) {
|
|||
width: max-content;
|
||||
min-width: max-content;
|
||||
pointer-events: all;
|
||||
transition: opacity .2s;
|
||||
transition: opacity 0.2s;
|
||||
&:first-of-type {
|
||||
margin-left: -.5em;
|
||||
margin-left: -0.5em;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
|
||||
|
||||
> .count {
|
||||
display: inline;
|
||||
margin: 0 0 0 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
||||
&.reacted {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
|
@ -320,7 +451,8 @@ function noteClick(e) {
|
|||
margin-right: 8px !important;
|
||||
}
|
||||
}
|
||||
> .reply, > .more {
|
||||
> .reply,
|
||||
> .more {
|
||||
margin-top: 10px;
|
||||
&.single {
|
||||
padding: 0 !important;
|
||||
|
|
@ -361,15 +493,19 @@ function noteClick(e) {
|
|||
}
|
||||
}
|
||||
|
||||
&.reply, &.reply-to, &.reply-to-more {
|
||||
> .main:hover, > .main:focus-within {
|
||||
&.reply,
|
||||
&.reply-to,
|
||||
&.reply-to-more {
|
||||
> .main:hover,
|
||||
> .main:focus-within {
|
||||
:deep(.footer .button) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.reply-to, &.reply-to-more {
|
||||
&.reply-to,
|
||||
&.reply-to-more {
|
||||
padding-bottom: 0;
|
||||
&:first-child {
|
||||
padding-top: 24px;
|
||||
|
|
@ -378,9 +514,11 @@ function noteClick(e) {
|
|||
margin-bottom: -16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Reply Lines
|
||||
&.reply, &.reply-to, &.reply-to-more {
|
||||
&.reply,
|
||||
&.reply-to,
|
||||
&.reply-to-more {
|
||||
--indent: calc(var(--avatarSize) - 5px);
|
||||
> .main {
|
||||
> .avatar-container {
|
||||
|
|
@ -413,17 +551,20 @@ function noteClick(e) {
|
|||
}
|
||||
}
|
||||
}
|
||||
&.reply-to, &.reply-to-more {
|
||||
&.reply-to,
|
||||
&.reply-to-more {
|
||||
> .main > .avatar-container > .line {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
}
|
||||
&.single, &.singleStart {
|
||||
&.single,
|
||||
&.singleStart {
|
||||
> .main > .avatar-container > .line {
|
||||
margin-bottom: -10px !important;
|
||||
}
|
||||
}
|
||||
.reply.children:not(:last-child) { // Line that goes through multiple replies
|
||||
.reply.children:not(:last-child) {
|
||||
// Line that goes through multiple replies
|
||||
position: relative;
|
||||
> .line {
|
||||
position: absolute;
|
||||
|
|
@ -473,7 +614,9 @@ function noteClick(e) {
|
|||
}
|
||||
&.firstColumn > .children:last-child > .main {
|
||||
padding-bottom: 0 !important;
|
||||
&::before { bottom: 0 !important }
|
||||
&::before {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
// &::after { content: unset }
|
||||
}
|
||||
|
||||
|
|
@ -485,7 +628,9 @@ function noteClick(e) {
|
|||
}
|
||||
}
|
||||
&.firstColumn {
|
||||
> .main, > .line, > .children:not(.single) > .line {
|
||||
> .main,
|
||||
> .line,
|
||||
> .children:not(.single) > .line {
|
||||
--avatarSize: 35px;
|
||||
--indent: 35px;
|
||||
}
|
||||
|
|
@ -496,7 +641,8 @@ function noteClick(e) {
|
|||
}
|
||||
&.max-width_450px {
|
||||
padding: 14px 16px;
|
||||
&.reply-to, &.reply-to-more {
|
||||
&.reply-to,
|
||||
&.reply-to-more {
|
||||
padding: 14px 16px;
|
||||
padding-top: 14px !important;
|
||||
padding-bottom: 0 !important;
|
||||
|
|
|
|||
|
|
@ -1,29 +1,46 @@
|
|||
<template>
|
||||
<MkPagination ref="pagingComponent" :pagination="pagination">
|
||||
<template #empty>
|
||||
<div class="_fullinfo">
|
||||
<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
|
||||
<div>{{ i18n.ts.noNotes }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<MkPagination ref="pagingComponent" :pagination="pagination">
|
||||
<template #empty>
|
||||
<div class="_fullinfo">
|
||||
<img
|
||||
src="/static-assets/badges/info.png"
|
||||
class="_ghost"
|
||||
alt="Info"
|
||||
/>
|
||||
<div>{{ i18n.ts.noNotes }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #default="{ items: notes }">
|
||||
<div class="giivymft" :class="{ noGap }">
|
||||
<XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" :ad="true" class="notes">
|
||||
<XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note"/>
|
||||
</XList>
|
||||
</div>
|
||||
</template>
|
||||
</MkPagination>
|
||||
<template #default="{ items: notes }">
|
||||
<div class="giivymft" :class="{ noGap }">
|
||||
<XList
|
||||
ref="notes"
|
||||
v-slot="{ item: note }"
|
||||
:items="notes"
|
||||
:direction="pagination.reversed ? 'up' : 'down'"
|
||||
:reversed="pagination.reversed"
|
||||
:no-gap="noGap"
|
||||
:ad="true"
|
||||
class="notes"
|
||||
>
|
||||
<XNote
|
||||
:key="note._featuredId_ || note._prId_ || note.id"
|
||||
class="qtqtichx"
|
||||
:note="note"
|
||||
/>
|
||||
</XList>
|
||||
</div>
|
||||
</template>
|
||||
</MkPagination>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import type { Paging } from '@/components/MkPagination.vue';
|
||||
import XNote from '@/components/MkNote.vue';
|
||||
import XList from '@/components/MkDateSeparatedList.vue';
|
||||
import MkPagination from '@/components/MkPagination.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import { ref } from "vue";
|
||||
import type { Paging } from "@/components/MkPagination.vue";
|
||||
import XNote from "@/components/MkNote.vue";
|
||||
import XList from "@/components/MkDateSeparatedList.vue";
|
||||
import MkPagination from "@/components/MkPagination.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
pagination: Paging;
|
||||
|
|
|
|||
|
|
@ -1,99 +1,289 @@
|
|||
<template>
|
||||
<div ref="elRef" v-size="{ max: [500, 600] }" class="qglefbjs" :class="notification.type">
|
||||
<div class="head">
|
||||
<MkAvatar v-if="notification.type === 'pollEnded'" class="icon" :user="notification.note.user"/>
|
||||
<MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/>
|
||||
<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
|
||||
<div class="sub-icon" :class="notification.type">
|
||||
<i v-if="notification.type === 'follow'" class="ph-hand-waving ph-bold"></i>
|
||||
<i v-else-if="notification.type === 'receiveFollowRequest'" class="ph-clock ph-bold"></i>
|
||||
<i v-else-if="notification.type === 'followRequestAccepted'" class="ph-check ph-bold"></i>
|
||||
<i v-else-if="notification.type === 'groupInvited'" class="ph-identification-card ph-bold"></i>
|
||||
<i v-else-if="notification.type === 'renote'" class="ph-repeat ph-bold"></i>
|
||||
<i v-else-if="notification.type === 'reply'" class="ph-arrow-bend-up-left ph-bold"></i>
|
||||
<i v-else-if="notification.type === 'mention'" class="ph-at ph-bold"></i>
|
||||
<i v-else-if="notification.type === 'quote'" class="ph-quotes ph-bold"></i>
|
||||
<i v-else-if="notification.type === 'pollVote'" class="ph-microphone-stage ph-bold"></i>
|
||||
<i v-else-if="notification.type === 'pollEnded'" class="ph-microphone-stage ph-bold"></i>
|
||||
<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
|
||||
<XReactionIcon
|
||||
v-else-if="notification.type === 'reaction'"
|
||||
ref="reactionRef"
|
||||
:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
|
||||
:custom-emojis="notification.note.emojis"
|
||||
:no-style="true"
|
||||
<div
|
||||
ref="elRef"
|
||||
v-size="{ max: [500, 600] }"
|
||||
class="qglefbjs"
|
||||
:class="notification.type"
|
||||
>
|
||||
<div class="head">
|
||||
<MkAvatar
|
||||
v-if="notification.type === 'pollEnded'"
|
||||
class="icon"
|
||||
:user="notification.note.user"
|
||||
/>
|
||||
<MkAvatar
|
||||
v-else-if="notification.user"
|
||||
class="icon"
|
||||
:user="notification.user"
|
||||
/>
|
||||
<img
|
||||
v-else-if="notification.icon"
|
||||
class="icon"
|
||||
:src="notification.icon"
|
||||
alt=""
|
||||
/>
|
||||
<div class="sub-icon" :class="notification.type">
|
||||
<i
|
||||
v-if="notification.type === 'follow'"
|
||||
class="ph-hand-waving ph-bold"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="notification.type === 'receiveFollowRequest'"
|
||||
class="ph-clock ph-bold"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="notification.type === 'followRequestAccepted'"
|
||||
class="ph-check ph-bold"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="notification.type === 'groupInvited'"
|
||||
class="ph-identification-card ph-bold"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="notification.type === 'renote'"
|
||||
class="ph-repeat ph-bold"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="notification.type === 'reply'"
|
||||
class="ph-arrow-bend-up-left ph-bold"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="notification.type === 'mention'"
|
||||
class="ph-at ph-bold"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="notification.type === 'quote'"
|
||||
class="ph-quotes ph-bold"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="notification.type === 'pollVote'"
|
||||
class="ph-microphone-stage ph-bold"
|
||||
></i>
|
||||
<i
|
||||
v-else-if="notification.type === 'pollEnded'"
|
||||
class="ph-microphone-stage ph-bold"
|
||||
></i>
|
||||
<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
|
||||
<XReactionIcon
|
||||
v-else-if="notification.type === 'reaction'"
|
||||
ref="reactionRef"
|
||||
:reaction="
|
||||
notification.reaction
|
||||
? notification.reaction.replace(
|
||||
/^:(\w+):$/,
|
||||
':$1@.:'
|
||||
)
|
||||
: notification.reaction
|
||||
"
|
||||
:custom-emojis="notification.note.emojis"
|
||||
:no-style="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tail">
|
||||
<header>
|
||||
<span v-if="notification.type === 'pollEnded'">{{
|
||||
i18n.ts._notification.pollEnded
|
||||
}}</span>
|
||||
<MkA
|
||||
v-else-if="notification.user"
|
||||
v-user-preview="notification.user.id"
|
||||
class="name"
|
||||
:to="userPage(notification.user)"
|
||||
><MkUserName :user="notification.user"
|
||||
/></MkA>
|
||||
<span v-else>{{ notification.header }}</span>
|
||||
<MkTime
|
||||
v-if="withTime"
|
||||
:time="notification.createdAt"
|
||||
class="time"
|
||||
/>
|
||||
</header>
|
||||
<MkA
|
||||
v-if="notification.type === 'reaction'"
|
||||
class="text"
|
||||
:to="notePage(notification.note)"
|
||||
:title="getNoteSummary(notification.note)"
|
||||
>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
<Mfm
|
||||
:text="getNoteSummary(notification.note)"
|
||||
:plain="true"
|
||||
:nowrap="!full"
|
||||
:custom-emojis="notification.note.emojis"
|
||||
/>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
</MkA>
|
||||
<MkA
|
||||
v-if="notification.type === 'renote'"
|
||||
class="text"
|
||||
:to="notePage(notification.note)"
|
||||
:title="getNoteSummary(notification.note.renote)"
|
||||
>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
<Mfm
|
||||
:text="getNoteSummary(notification.note.renote)"
|
||||
:plain="true"
|
||||
:nowrap="!full"
|
||||
:custom-emojis="notification.note.renote.emojis"
|
||||
/>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
</MkA>
|
||||
<MkA
|
||||
v-if="notification.type === 'reply'"
|
||||
class="text"
|
||||
:to="notePage(notification.note)"
|
||||
:title="getNoteSummary(notification.note)"
|
||||
>
|
||||
<Mfm
|
||||
:text="getNoteSummary(notification.note)"
|
||||
:plain="true"
|
||||
:nowrap="!full"
|
||||
:custom-emojis="notification.note.emojis"
|
||||
/>
|
||||
</MkA>
|
||||
<MkA
|
||||
v-if="notification.type === 'mention'"
|
||||
class="text"
|
||||
:to="notePage(notification.note)"
|
||||
:title="getNoteSummary(notification.note)"
|
||||
>
|
||||
<Mfm
|
||||
:text="getNoteSummary(notification.note)"
|
||||
:plain="true"
|
||||
:nowrap="!full"
|
||||
:custom-emojis="notification.note.emojis"
|
||||
/>
|
||||
</MkA>
|
||||
<MkA
|
||||
v-if="notification.type === 'quote'"
|
||||
class="text"
|
||||
:to="notePage(notification.note)"
|
||||
:title="getNoteSummary(notification.note)"
|
||||
>
|
||||
<Mfm
|
||||
:text="getNoteSummary(notification.note)"
|
||||
:plain="true"
|
||||
:nowrap="!full"
|
||||
:custom-emojis="notification.note.emojis"
|
||||
/>
|
||||
</MkA>
|
||||
<MkA
|
||||
v-if="notification.type === 'pollVote'"
|
||||
class="text"
|
||||
:to="notePage(notification.note)"
|
||||
:title="getNoteSummary(notification.note)"
|
||||
>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
<Mfm
|
||||
:text="getNoteSummary(notification.note)"
|
||||
:plain="true"
|
||||
:nowrap="!full"
|
||||
:custom-emojis="notification.note.emojis"
|
||||
/>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
</MkA>
|
||||
<MkA
|
||||
v-if="notification.type === 'pollEnded'"
|
||||
class="text"
|
||||
:to="notePage(notification.note)"
|
||||
:title="getNoteSummary(notification.note)"
|
||||
>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
<Mfm
|
||||
:text="getNoteSummary(notification.note)"
|
||||
:plain="true"
|
||||
:nowrap="!full"
|
||||
:custom-emojis="notification.note.emojis"
|
||||
/>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
</MkA>
|
||||
<span
|
||||
v-if="notification.type === 'follow'"
|
||||
class="text"
|
||||
style="opacity: 0.6"
|
||||
>{{ i18n.ts.youGotNewFollower }}
|
||||
<div v-if="full">
|
||||
<MkFollowButton
|
||||
:user="notification.user"
|
||||
:full="true"
|
||||
/></div
|
||||
></span>
|
||||
<span
|
||||
v-if="notification.type === 'followRequestAccepted'"
|
||||
class="text"
|
||||
style="opacity: 0.6"
|
||||
>{{ i18n.ts.followRequestAccepted }}</span
|
||||
>
|
||||
<span
|
||||
v-if="notification.type === 'receiveFollowRequest'"
|
||||
class="text"
|
||||
style="opacity: 0.6"
|
||||
>{{ i18n.ts.receiveFollowRequest }}
|
||||
<div v-if="full && !followRequestDone">
|
||||
<button class="_textButton" @click="acceptFollowRequest()">
|
||||
{{ i18n.ts.accept }}
|
||||
</button>
|
||||
|
|
||||
<button class="_textButton" @click="rejectFollowRequest()">
|
||||
{{ i18n.ts.reject }}
|
||||
</button>
|
||||
</div></span
|
||||
>
|
||||
<span
|
||||
v-if="notification.type === 'groupInvited'"
|
||||
class="text"
|
||||
style="opacity: 0.6"
|
||||
>{{ i18n.ts.groupInvited }}:
|
||||
<b>{{ notification.invitation.group.name }}</b>
|
||||
<div v-if="full && !groupInviteDone">
|
||||
<button
|
||||
class="_textButton"
|
||||
@click="acceptGroupInvitation()"
|
||||
>
|
||||
{{ i18n.ts.accept }}
|
||||
</button>
|
||||
|
|
||||
<button
|
||||
class="_textButton"
|
||||
@click="rejectGroupInvitation()"
|
||||
>
|
||||
{{ i18n.ts.reject }}
|
||||
</button>
|
||||
</div></span
|
||||
>
|
||||
<span v-if="notification.type === 'app'" class="text">
|
||||
<Mfm :text="notification.body" :nowrap="!full" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tail">
|
||||
<header>
|
||||
<span v-if="notification.type === 'pollEnded'">{{ i18n.ts._notification.pollEnded }}</span>
|
||||
<MkA v-else-if="notification.user" v-user-preview="notification.user.id" class="name" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
|
||||
<span v-else>{{ notification.header }}</span>
|
||||
<MkTime v-if="withTime" :time="notification.createdAt" class="time"/>
|
||||
</header>
|
||||
<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
</MkA>
|
||||
<MkA v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
</MkA>
|
||||
<MkA v-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
|
||||
<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
|
||||
</MkA>
|
||||
<MkA v-if="notification.type === 'mention'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
|
||||
<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
|
||||
</MkA>
|
||||
<MkA v-if="notification.type === 'quote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
|
||||
<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
|
||||
</MkA>
|
||||
<MkA v-if="notification.type === 'pollVote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
</MkA>
|
||||
<MkA v-if="notification.type === 'pollEnded'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
</MkA>
|
||||
<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>
|
||||
<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span>
|
||||
<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ i18n.ts.receiveFollowRequest }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button></div></span>
|
||||
<span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ i18n.ts.groupInvited }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ i18n.ts.reject }}</button></div></span>
|
||||
<span v-if="notification.type === 'app'" class="text">
|
||||
<Mfm :text="notification.body" :nowrap="!full"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import * as misskey from 'calckey-js';
|
||||
import XReactionIcon from '@/components/MkReactionIcon.vue';
|
||||
import MkFollowButton from '@/components/MkFollowButton.vue';
|
||||
import XReactionTooltip from '@/components/MkReactionTooltip.vue';
|
||||
import { getNoteSummary } from '@/scripts/get-note-summary';
|
||||
import { notePage } from '@/filters/note';
|
||||
import { userPage } from '@/filters/user';
|
||||
import { i18n } from '@/i18n';
|
||||
import * as os from '@/os';
|
||||
import { stream } from '@/stream';
|
||||
import { useTooltip } from '@/scripts/use-tooltip';
|
||||
import { ref, onMounted, onUnmounted, watch } from "vue";
|
||||
import * as misskey from "calckey-js";
|
||||
import XReactionIcon from "@/components/MkReactionIcon.vue";
|
||||
import MkFollowButton from "@/components/MkFollowButton.vue";
|
||||
import XReactionTooltip from "@/components/MkReactionTooltip.vue";
|
||||
import { getNoteSummary } from "@/scripts/get-note-summary";
|
||||
import { notePage } from "@/filters/note";
|
||||
import { userPage } from "@/filters/user";
|
||||
import { i18n } from "@/i18n";
|
||||
import * as os from "@/os";
|
||||
import { stream } from "@/stream";
|
||||
import { useTooltip } from "@/scripts/use-tooltip";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
notification: misskey.entities.Notification;
|
||||
withTime?: boolean;
|
||||
full?: boolean;
|
||||
}>(), {
|
||||
withTime: false,
|
||||
full: false,
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
notification: misskey.entities.Notification;
|
||||
withTime?: boolean;
|
||||
full?: boolean;
|
||||
}>(),
|
||||
{
|
||||
withTime: false,
|
||||
full: false,
|
||||
}
|
||||
);
|
||||
|
||||
const elRef = ref<HTMLElement>(null);
|
||||
const reactionRef = ref(null);
|
||||
|
|
@ -104,8 +294,8 @@ let connection;
|
|||
onMounted(() => {
|
||||
if (!props.notification.isRead) {
|
||||
readObserver = new IntersectionObserver((entries, observer) => {
|
||||
if (!entries.some(entry => entry.isIntersecting)) return;
|
||||
stream.send('readNotification', {
|
||||
if (!entries.some((entry) => entry.isIntersecting)) return;
|
||||
stream.send("readNotification", {
|
||||
id: props.notification.id,
|
||||
});
|
||||
observer.disconnect();
|
||||
|
|
@ -113,8 +303,8 @@ onMounted(() => {
|
|||
|
||||
readObserver.observe(elRef.value);
|
||||
|
||||
connection = stream.useChannel('main');
|
||||
connection.on('readAllNotifications', () => readObserver.disconnect());
|
||||
connection = stream.useChannel("main");
|
||||
connection.on("readAllNotifications", () => readObserver.disconnect());
|
||||
|
||||
watch(props.notification.isRead, () => {
|
||||
readObserver.disconnect();
|
||||
|
|
@ -132,31 +322,42 @@ const groupInviteDone = ref(false);
|
|||
|
||||
const acceptFollowRequest = () => {
|
||||
followRequestDone.value = true;
|
||||
os.api('following/requests/accept', { userId: props.notification.user.id });
|
||||
os.api("following/requests/accept", { userId: props.notification.user.id });
|
||||
};
|
||||
|
||||
const rejectFollowRequest = () => {
|
||||
followRequestDone.value = true;
|
||||
os.api('following/requests/reject', { userId: props.notification.user.id });
|
||||
os.api("following/requests/reject", { userId: props.notification.user.id });
|
||||
};
|
||||
|
||||
const acceptGroupInvitation = () => {
|
||||
groupInviteDone.value = true;
|
||||
os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id });
|
||||
os.apiWithDialog("users/groups/invitations/accept", {
|
||||
invitationId: props.notification.invitation.id,
|
||||
});
|
||||
};
|
||||
|
||||
const rejectGroupInvitation = () => {
|
||||
groupInviteDone.value = true;
|
||||
os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
|
||||
os.api("users/groups/invitations/reject", {
|
||||
invitationId: props.notification.invitation.id,
|
||||
});
|
||||
};
|
||||
|
||||
useTooltip(reactionRef, (showing) => {
|
||||
os.popup(XReactionTooltip, {
|
||||
showing,
|
||||
reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction,
|
||||
emojis: props.notification.note.emojis,
|
||||
targetElement: reactionRef.value.$el,
|
||||
}, {}, 'closed');
|
||||
os.popup(
|
||||
XReactionTooltip,
|
||||
{
|
||||
showing,
|
||||
reaction: props.notification.reaction
|
||||
? props.notification.reaction.replace(/^:(\w+):$/, ":$1@.:")
|
||||
: props.notification.reaction,
|
||||
emojis: props.notification.note.emojis,
|
||||
targetElement: reactionRef.value.$el,
|
||||
},
|
||||
{},
|
||||
"closed"
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -219,7 +420,10 @@ useTooltip(reactionRef, (showing) => {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
&.follow, &.followRequestAccepted, &.receiveFollowRequest, &.groupInvited {
|
||||
&.follow,
|
||||
&.followRequestAccepted,
|
||||
&.receiveFollowRequest,
|
||||
&.groupInvited {
|
||||
padding: 3px;
|
||||
background: #31748f;
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -1,60 +1,77 @@
|
|||
<template>
|
||||
<XModalWindow
|
||||
ref="dialog"
|
||||
:width="400"
|
||||
:height="450"
|
||||
:with-ok-button="true"
|
||||
:ok-button-disabled="false"
|
||||
@ok="ok()"
|
||||
@close="dialog.close()"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<template #header>{{ i18n.ts.notificationSetting }}</template>
|
||||
<div class="_monolithic_">
|
||||
<div v-if="showGlobalToggle" class="_section">
|
||||
<MkSwitch v-model="useGlobalSetting">
|
||||
{{ i18n.ts.useGlobalSetting }}
|
||||
<template #caption>{{ i18n.ts.useGlobalSettingDesc }}</template>
|
||||
</MkSwitch>
|
||||
<XModalWindow
|
||||
ref="dialog"
|
||||
:width="400"
|
||||
:height="450"
|
||||
:with-ok-button="true"
|
||||
:ok-button-disabled="false"
|
||||
@ok="ok()"
|
||||
@close="dialog.close()"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<template #header>{{ i18n.ts.notificationSetting }}</template>
|
||||
<div class="_monolithic_">
|
||||
<div v-if="showGlobalToggle" class="_section">
|
||||
<MkSwitch v-model="useGlobalSetting">
|
||||
{{ i18n.ts.useGlobalSetting }}
|
||||
<template #caption>{{
|
||||
i18n.ts.useGlobalSettingDesc
|
||||
}}</template>
|
||||
</MkSwitch>
|
||||
</div>
|
||||
<div v-if="!useGlobalSetting" class="_section">
|
||||
<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
|
||||
<MkButton inline @click="disableAll">{{
|
||||
i18n.ts.disableAll
|
||||
}}</MkButton>
|
||||
<MkButton inline @click="enableAll">{{
|
||||
i18n.ts.enableAll
|
||||
}}</MkButton>
|
||||
<MkSwitch
|
||||
v-for="ntype in notificationTypes"
|
||||
:key="ntype"
|
||||
v-model="typesMap[ntype]"
|
||||
>{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!useGlobalSetting" class="_section">
|
||||
<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
|
||||
<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
|
||||
<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
|
||||
<MkSwitch v-for="ntype in notificationTypes" :key="ntype" v-model="typesMap[ntype]">{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch>
|
||||
</div>
|
||||
</div>
|
||||
</XModalWindow>
|
||||
</XModalWindow>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import { notificationTypes } from 'calckey-js';
|
||||
import MkSwitch from './form/switch.vue';
|
||||
import MkInfo from './MkInfo.vue';
|
||||
import MkButton from './MkButton.vue';
|
||||
import XModalWindow from '@/components/MkModalWindow.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import {} from "vue";
|
||||
import { notificationTypes } from "calckey-js";
|
||||
import MkSwitch from "./form/switch.vue";
|
||||
import MkInfo from "./MkInfo.vue";
|
||||
import MkButton from "./MkButton.vue";
|
||||
import XModalWindow from "@/components/MkModalWindow.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'done', v: { includingTypes: string[] | null }): void,
|
||||
(ev: 'closed'): void,
|
||||
(ev: "done", v: { includingTypes: string[] | null }): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
includingTypes?: typeof notificationTypes[number][] | null;
|
||||
showGlobalToggle?: boolean;
|
||||
}>(), {
|
||||
includingTypes: () => [],
|
||||
showGlobalToggle: true,
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
includingTypes?: (typeof notificationTypes)[number][] | null;
|
||||
showGlobalToggle?: boolean;
|
||||
}>(),
|
||||
{
|
||||
includingTypes: () => [],
|
||||
showGlobalToggle: true,
|
||||
}
|
||||
);
|
||||
|
||||
let includingTypes = $computed(() => props.includingTypes || []);
|
||||
|
||||
const dialog = $ref<InstanceType<typeof XModalWindow>>();
|
||||
|
||||
let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({});
|
||||
let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);
|
||||
let typesMap = $ref<Record<(typeof notificationTypes)[number], boolean>>({});
|
||||
let useGlobalSetting = $ref(
|
||||
(includingTypes === null || includingTypes.length === 0) &&
|
||||
props.showGlobalToggle
|
||||
);
|
||||
|
||||
for (const ntype of notificationTypes) {
|
||||
typesMap[ntype] = includingTypes.includes(ntype);
|
||||
|
|
@ -62,11 +79,12 @@ for (const ntype of notificationTypes) {
|
|||
|
||||
function ok() {
|
||||
if (useGlobalSetting) {
|
||||
emit('done', { includingTypes: null });
|
||||
emit("done", { includingTypes: null });
|
||||
} else {
|
||||
emit('done', {
|
||||
includingTypes: (Object.keys(typesMap) as typeof notificationTypes[number][])
|
||||
.filter(type => typesMap[type]),
|
||||
emit("done", {
|
||||
includingTypes: (
|
||||
Object.keys(typesMap) as (typeof notificationTypes)[number][]
|
||||
).filter((type) => typesMap[type]),
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -75,13 +93,13 @@ function ok() {
|
|||
|
||||
function disableAll() {
|
||||
for (const type in typesMap) {
|
||||
typesMap[type as typeof notificationTypes[number]] = false;
|
||||
typesMap[type as (typeof notificationTypes)[number]] = false;
|
||||
}
|
||||
}
|
||||
|
||||
function enableAll() {
|
||||
for (const type in typesMap) {
|
||||
typesMap[type as typeof notificationTypes[number]] = true;
|
||||
typesMap[type as (typeof notificationTypes)[number]] = true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,33 @@
|
|||
<template>
|
||||
<div class="mk-notification-toast" :style="{ zIndex }">
|
||||
<transition :name="$store.state.animation ? 'notification-toast' : ''" appear @after-leave="$emit('closed')">
|
||||
<XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="mk-notification-toast" :style="{ zIndex }">
|
||||
<transition
|
||||
:name="$store.state.animation ? 'notification-toast' : ''"
|
||||
appear
|
||||
@after-leave="$emit('closed')"
|
||||
>
|
||||
<XNotification
|
||||
v-if="showing"
|
||||
:notification="notification"
|
||||
class="notification _acrylic"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue';
|
||||
import XNotification from '@/components/MkNotification.vue';
|
||||
import * as os from '@/os';
|
||||
import { onMounted } from "vue";
|
||||
import XNotification from "@/components/MkNotification.vue";
|
||||
import * as os from "@/os";
|
||||
|
||||
defineProps<{
|
||||
notification: any; // TODO
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
const zIndex = os.claimZIndex('high');
|
||||
const zIndex = os.claimZIndex("high");
|
||||
let showing = $ref(true);
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -30,10 +38,12 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.notification-toast-enter-active, .notification-toast-leave-active {
|
||||
.notification-toast-enter-active,
|
||||
.notification-toast-leave-active {
|
||||
transition: opacity 0.3s, transform 0.3s !important;
|
||||
}
|
||||
.notification-toast-enter-from, .notification-toast-leave-to {
|
||||
.notification-toast-enter-from,
|
||||
.notification-toast-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-250px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,54 +1,89 @@
|
|||
<template>
|
||||
<MkPagination ref="pagingComponent" :pagination="pagination">
|
||||
<template #empty>
|
||||
<div class="_fullinfo">
|
||||
<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
|
||||
<div>{{ i18n.ts.noNotifications }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<MkPagination ref="pagingComponent" :pagination="pagination">
|
||||
<template #empty>
|
||||
<div class="_fullinfo">
|
||||
<img
|
||||
src="/static-assets/badges/info.png"
|
||||
class="_ghost"
|
||||
alt="Info"
|
||||
/>
|
||||
<div>{{ i18n.ts.noNotifications }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #default="{ items: notifications }">
|
||||
<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true">
|
||||
<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
|
||||
<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
|
||||
</XList>
|
||||
</template>
|
||||
</MkPagination>
|
||||
<template #default="{ items: notifications }">
|
||||
<XList
|
||||
v-slot="{ item: notification }"
|
||||
class="elsfgstc"
|
||||
:items="notifications"
|
||||
:no-gap="true"
|
||||
>
|
||||
<XNote
|
||||
v-if="
|
||||
['reply', 'quote', 'mention'].includes(
|
||||
notification.type
|
||||
)
|
||||
"
|
||||
:key="notification.id"
|
||||
:note="notification.note"
|
||||
/>
|
||||
<XNotification
|
||||
v-else
|
||||
:key="notification.id"
|
||||
:notification="notification"
|
||||
:with-time="true"
|
||||
:full="true"
|
||||
class="_panel notification"
|
||||
/>
|
||||
</XList>
|
||||
</template>
|
||||
</MkPagination>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineComponent, markRaw, onUnmounted, onMounted, computed, ref } from 'vue';
|
||||
import { notificationTypes } from 'calckey-js';
|
||||
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
||||
import XNotification from '@/components/MkNotification.vue';
|
||||
import XList from '@/components/MkDateSeparatedList.vue';
|
||||
import XNote from '@/components/MkNote.vue';
|
||||
import * as os from '@/os';
|
||||
import { stream } from '@/stream';
|
||||
import { $i } from '@/account';
|
||||
import { i18n } from '@/i18n';
|
||||
import {
|
||||
defineComponent,
|
||||
markRaw,
|
||||
onUnmounted,
|
||||
onMounted,
|
||||
computed,
|
||||
ref,
|
||||
} from "vue";
|
||||
import { notificationTypes } from "calckey-js";
|
||||
import MkPagination, { Paging } from "@/components/MkPagination.vue";
|
||||
import XNotification from "@/components/MkNotification.vue";
|
||||
import XList from "@/components/MkDateSeparatedList.vue";
|
||||
import XNote from "@/components/MkNote.vue";
|
||||
import * as os from "@/os";
|
||||
import { stream } from "@/stream";
|
||||
import { $i } from "@/account";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
includeTypes?: typeof notificationTypes[number][];
|
||||
includeTypes?: (typeof notificationTypes)[number][];
|
||||
unreadOnly?: boolean;
|
||||
}>();
|
||||
|
||||
const pagingComponent = ref<InstanceType<typeof MkPagination>>();
|
||||
|
||||
const pagination: Paging = {
|
||||
endpoint: 'i/notifications' as const,
|
||||
endpoint: "i/notifications" as const,
|
||||
limit: 10,
|
||||
params: computed(() => ({
|
||||
includeTypes: props.includeTypes ?? undefined,
|
||||
excludeTypes: props.includeTypes ? undefined : $i.mutingNotificationTypes,
|
||||
excludeTypes: props.includeTypes
|
||||
? undefined
|
||||
: $i.mutingNotificationTypes,
|
||||
unreadOnly: props.unreadOnly,
|
||||
})),
|
||||
};
|
||||
|
||||
const onNotification = (notification) => {
|
||||
const isMuted = props.includeTypes ? !props.includeTypes.includes(notification.type) : $i.mutingNotificationTypes.includes(notification.type);
|
||||
if (isMuted || document.visibilityState === 'visible') {
|
||||
stream.send('readNotification', {
|
||||
const isMuted = props.includeTypes
|
||||
? !props.includeTypes.includes(notification.type)
|
||||
: $i.mutingNotificationTypes.includes(notification.type);
|
||||
if (isMuted || document.visibilityState === "visible") {
|
||||
stream.send("readNotification", {
|
||||
id: notification.id,
|
||||
});
|
||||
}
|
||||
|
|
@ -56,7 +91,7 @@ const onNotification = (notification) => {
|
|||
if (!isMuted) {
|
||||
pagingComponent.value.prepend({
|
||||
...notification,
|
||||
isRead: document.visibilityState === 'visible',
|
||||
isRead: document.visibilityState === "visible",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -64,9 +99,9 @@ const onNotification = (notification) => {
|
|||
let connection;
|
||||
|
||||
onMounted(() => {
|
||||
connection = stream.useChannel('main');
|
||||
connection.on('notification', onNotification);
|
||||
connection.on('readAllNotifications', () => {
|
||||
connection = stream.useChannel("main");
|
||||
connection.on("notification", onNotification);
|
||||
connection.on("readAllNotifications", () => {
|
||||
if (pagingComponent.value) {
|
||||
for (const item of pagingComponent.value.queue) {
|
||||
item.isRead = true;
|
||||
|
|
@ -76,15 +111,23 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
});
|
||||
connection.on('readNotifications', notificationIds => {
|
||||
connection.on("readNotifications", (notificationIds) => {
|
||||
if (pagingComponent.value) {
|
||||
for (let i = 0; i < pagingComponent.value.queue.length; i++) {
|
||||
if (notificationIds.includes(pagingComponent.value.queue[i].id)) {
|
||||
if (
|
||||
notificationIds.includes(pagingComponent.value.queue[i].id)
|
||||
) {
|
||||
pagingComponent.value.queue[i].isRead = true;
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < (pagingComponent.value.items || []).length; i++) {
|
||||
if (notificationIds.includes(pagingComponent.value.items[i].id)) {
|
||||
for (
|
||||
let i = 0;
|
||||
i < (pagingComponent.value.items || []).length;
|
||||
i++
|
||||
) {
|
||||
if (
|
||||
notificationIds.includes(pagingComponent.value.items[i].id)
|
||||
) {
|
||||
pagingComponent.value.items[i].isRead = true;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<span>{{ number(Math.floor(tweened.number)) }}</span>
|
||||
<span>{{ number(Math.floor(tweened.number)) }}</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import gsap from 'gsap';
|
||||
import number from '@/filters/number';
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import gsap from "gsap";
|
||||
import number from "@/filters/number";
|
||||
|
||||
const props = defineProps<{
|
||||
value: number;
|
||||
|
|
@ -15,9 +15,13 @@ const tweened = reactive({
|
|||
number: 0,
|
||||
});
|
||||
|
||||
watch(() => props.value, (n) => {
|
||||
gsap.to(tweened, { duration: 0.6, number: Number(n) || 0 });
|
||||
}, {
|
||||
immediate: true,
|
||||
});
|
||||
watch(
|
||||
() => props.value,
|
||||
(n) => {
|
||||
gsap.to(tweened, { duration: 0.6, number: Number(n) || 0 });
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
<template>
|
||||
<span class="ceaaebcd" :class="{ isPlus, isMinus, isZero }">
|
||||
<slot name="before"></slot>{{ isPlus ? '+' : '' }}{{ number(value) }}<slot name="after"></slot>
|
||||
</span>
|
||||
<span class="ceaaebcd" :class="{ isPlus, isMinus, isZero }">
|
||||
<slot name="before"></slot>{{ isPlus ? "+" : "" }}{{ number(value)
|
||||
}}<slot name="after"></slot>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import number from '@/filters/number';
|
||||
import { computed, defineComponent } from "vue";
|
||||
import number from "@/filters/number";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -1,39 +1,66 @@
|
|||
<template>
|
||||
<div class="igpposuu _monospace">
|
||||
<div v-if="value === null" class="null">null</div>
|
||||
<div v-else-if="typeof value === 'boolean'" class="boolean" :class="{ true: value, false: !value }">{{ value ? 'true' : 'false' }}</div>
|
||||
<div v-else-if="typeof value === 'string'" class="string">"{{ value }}"</div>
|
||||
<div v-else-if="typeof value === 'number'" class="number">{{ number(value) }}</div>
|
||||
<div v-else-if="isArray(value) && isEmpty(value)" class="array empty">[]</div>
|
||||
<div v-else-if="isArray(value)" class="array">
|
||||
<div v-for="i in value.length" class="element">
|
||||
{{ i }}: <XValue :value="value[i - 1]" collapsed/>
|
||||
<div class="igpposuu _monospace">
|
||||
<div v-if="value === null" class="null">null</div>
|
||||
<div
|
||||
v-else-if="typeof value === 'boolean'"
|
||||
class="boolean"
|
||||
:class="{ true: value, false: !value }"
|
||||
>
|
||||
{{ value ? "true" : "false" }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="isObject(value) && isEmpty(value)" class="object empty">{}</div>
|
||||
<div v-else-if="isObject(value)" class="object">
|
||||
<div v-for="k in Object.keys(value)" class="kv">
|
||||
<button class="toggle _button" :class="{ visible: collapsable(value[k]) }" @click="collapsed[k] = !collapsed[k]">{{ collapsed[k] ? '+' : '-' }}</button>
|
||||
<div class="k">{{ k }}:</div>
|
||||
<div v-if="collapsed[k]" class="v">
|
||||
<button class="_button" @click="collapsed[k] = !collapsed[k]">
|
||||
<template v-if="typeof value[k] === 'string'">"..."</template>
|
||||
<template v-else-if="isArray(value[k])">[...]</template>
|
||||
<template v-else-if="isObject(value[k])">{...}</template>
|
||||
</button>
|
||||
<div v-else-if="typeof value === 'string'" class="string">
|
||||
"{{ value }}"
|
||||
</div>
|
||||
<div v-else-if="typeof value === 'number'" class="number">
|
||||
{{ number(value) }}
|
||||
</div>
|
||||
<div v-else-if="isArray(value) && isEmpty(value)" class="array empty">
|
||||
[]
|
||||
</div>
|
||||
<div v-else-if="isArray(value)" class="array">
|
||||
<div v-for="i in value.length" class="element">
|
||||
{{ i }}: <XValue :value="value[i - 1]" collapsed />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="isObject(value) && isEmpty(value)" class="object empty">
|
||||
{}
|
||||
</div>
|
||||
<div v-else-if="isObject(value)" class="object">
|
||||
<div v-for="k in Object.keys(value)" class="kv">
|
||||
<button
|
||||
class="toggle _button"
|
||||
:class="{ visible: collapsable(value[k]) }"
|
||||
@click="collapsed[k] = !collapsed[k]"
|
||||
>
|
||||
{{ collapsed[k] ? "+" : "-" }}
|
||||
</button>
|
||||
<div class="k">{{ k }}:</div>
|
||||
<div v-if="collapsed[k]" class="v">
|
||||
<button
|
||||
class="_button"
|
||||
@click="collapsed[k] = !collapsed[k]"
|
||||
>
|
||||
<template v-if="typeof value[k] === 'string'"
|
||||
>"..."</template
|
||||
>
|
||||
<template v-else-if="isArray(value[k])">[...]</template>
|
||||
<template v-else-if="isObject(value[k])"
|
||||
>{...}</template
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="v"><XValue :value="value[k]" /></div>
|
||||
</div>
|
||||
<div v-else class="v"><XValue :value="value[k]"/></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, reactive, ref } from 'vue';
|
||||
import number from '@/filters/number';
|
||||
import { computed, defineComponent, reactive, ref } from "vue";
|
||||
import number from "@/filters/number";
|
||||
|
||||
export default defineComponent({
|
||||
name: 'XValue',
|
||||
name: "XValue",
|
||||
|
||||
props: {
|
||||
value: {
|
||||
|
|
@ -51,7 +78,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
function isObject(v): boolean {
|
||||
return typeof v === 'object' && !Array.isArray(v) && v !== null;
|
||||
return typeof v === "object" && !Array.isArray(v) && v !== null;
|
||||
}
|
||||
|
||||
function isArray(v): boolean {
|
||||
|
|
@ -59,7 +86,10 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
function isEmpty(v): boolean {
|
||||
return (isArray(v) && v.length === 0) || (isObject(v) && Object.keys(v).length === 0);
|
||||
return (
|
||||
(isArray(v) && v.length === 0) ||
|
||||
(isObject(v) && Object.keys(v).length === 0)
|
||||
);
|
||||
}
|
||||
|
||||
function collapsable(v): boolean {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="zhyxdalp">
|
||||
<XValue :value="value" :collapsed="false"/>
|
||||
</div>
|
||||
<div class="zhyxdalp">
|
||||
<XValue :value="value" :collapsed="false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import XValue from './MkObjectView.value.vue';
|
||||
import {} from "vue";
|
||||
import XValue from "./MkObjectView.value.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
value: Record<string, unknown>;
|
||||
|
|
@ -15,6 +15,5 @@ const props = defineProps<{
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.zhyxdalp {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,41 @@
|
|||
<template>
|
||||
<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _block" tabindex="-1" :behavior="`${ui === 'deck' ? 'window' : null}`">
|
||||
<div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
|
||||
<article>
|
||||
<header>
|
||||
<h1 :title="page.title">{{ page.title }}</h1>
|
||||
</header>
|
||||
<p v-if="page.summary" :title="page.summary">{{ page.summary.length > 85 ? page.summary.slice(0, 85) + '…' : page.summary }}</p>
|
||||
<footer>
|
||||
<img class="icon" :src="page.user.avatarUrl" aria-label="none"/>
|
||||
<p>{{ userName(page.user) }}</p>
|
||||
</footer>
|
||||
</article>
|
||||
</MkA>
|
||||
<MkA
|
||||
:to="`/@${page.user.username}/pages/${page.name}`"
|
||||
class="vhpxefrj _block"
|
||||
tabindex="-1"
|
||||
:behavior="`${ui === 'deck' ? 'window' : null}`"
|
||||
>
|
||||
<div
|
||||
v-if="page.eyeCatchingImage"
|
||||
class="thumbnail"
|
||||
:style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"
|
||||
></div>
|
||||
<article>
|
||||
<header>
|
||||
<h1 :title="page.title">{{ page.title }}</h1>
|
||||
</header>
|
||||
<p v-if="page.summary" :title="page.summary">
|
||||
{{
|
||||
page.summary.length > 85
|
||||
? page.summary.slice(0, 85) + "…"
|
||||
: page.summary
|
||||
}}
|
||||
</p>
|
||||
<footer>
|
||||
<img
|
||||
class="icon"
|
||||
:src="page.user.avatarUrl"
|
||||
aria-label="none"
|
||||
/>
|
||||
<p>{{ userName(page.user) }}</p>
|
||||
</footer>
|
||||
</article>
|
||||
</MkA>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { userName } from '@/filters/user';
|
||||
import { ui } from '@/config';
|
||||
import { userName } from "@/filters/user";
|
||||
import { ui } from "@/config";
|
||||
|
||||
defineProps<{
|
||||
page: any;
|
||||
|
|
@ -149,5 +168,4 @@ defineProps<{
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,63 +1,74 @@
|
|||
<template>
|
||||
<XWindow
|
||||
ref="windowEl"
|
||||
:initial-width="500"
|
||||
:initial-height="500"
|
||||
:can-resize="true"
|
||||
:close-button="true"
|
||||
:buttons-left="buttonsLeft"
|
||||
:buttons-right="buttonsRight"
|
||||
:contextmenu="contextmenu"
|
||||
@closed="$emit('closed')"
|
||||
>
|
||||
<template #header>
|
||||
<template v-if="pageMetadata?.value">
|
||||
<i v-if="pageMetadata.value.icon" class="icon" :class="pageMetadata.value.icon" style="margin-right: 0.5em;"></i>
|
||||
<span>{{ pageMetadata.value.title }}</span>
|
||||
<XWindow
|
||||
ref="windowEl"
|
||||
:initial-width="500"
|
||||
:initial-height="500"
|
||||
:can-resize="true"
|
||||
:close-button="true"
|
||||
:buttons-left="buttonsLeft"
|
||||
:buttons-right="buttonsRight"
|
||||
:contextmenu="contextmenu"
|
||||
@closed="$emit('closed')"
|
||||
>
|
||||
<template #header>
|
||||
<template v-if="pageMetadata?.value">
|
||||
<i
|
||||
v-if="pageMetadata.value.icon"
|
||||
class="icon"
|
||||
:class="pageMetadata.value.icon"
|
||||
style="margin-right: 0.5em"
|
||||
></i>
|
||||
<span>{{ pageMetadata.value.title }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<div class="yrolvcoq" :style="{ background: pageMetadata?.value?.bg }">
|
||||
<RouterView :router="router"/>
|
||||
</div>
|
||||
</XWindow>
|
||||
<div class="yrolvcoq" :style="{ background: pageMetadata?.value?.bg }">
|
||||
<RouterView :router="router" />
|
||||
</div>
|
||||
</XWindow>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ComputedRef, inject, provide } from 'vue';
|
||||
import RouterView from '@/components/global/RouterView.vue';
|
||||
import XWindow from '@/components/MkWindow.vue';
|
||||
import { popout as _popout } from '@/scripts/popout';
|
||||
import copyToClipboard from '@/scripts/copy-to-clipboard';
|
||||
import { url } from '@/config';
|
||||
import * as os from '@/os';
|
||||
import { mainRouter, routes } from '@/router';
|
||||
import { Router } from '@/nirax';
|
||||
import { i18n } from '@/i18n';
|
||||
import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
|
||||
import { ComputedRef, inject, provide } from "vue";
|
||||
import RouterView from "@/components/global/RouterView.vue";
|
||||
import XWindow from "@/components/MkWindow.vue";
|
||||
import { popout as _popout } from "@/scripts/popout";
|
||||
import copyToClipboard from "@/scripts/copy-to-clipboard";
|
||||
import { url } from "@/config";
|
||||
import * as os from "@/os";
|
||||
import { mainRouter, routes } from "@/router";
|
||||
import { Router } from "@/nirax";
|
||||
import { i18n } from "@/i18n";
|
||||
import {
|
||||
PageMetadata,
|
||||
provideMetadataReceiver,
|
||||
setPageMetadata,
|
||||
} from "@/scripts/page-metadata";
|
||||
|
||||
const props = defineProps<{
|
||||
initialPath: string;
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
const router = new Router(routes, props.initialPath);
|
||||
|
||||
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
|
||||
let windowEl = $ref<InstanceType<typeof XWindow>>();
|
||||
const history = $ref<{ path: string; key: any; }[]>([{
|
||||
path: router.getCurrentPath(),
|
||||
key: router.getCurrentKey(),
|
||||
}]);
|
||||
const history = $ref<{ path: string; key: any }[]>([
|
||||
{
|
||||
path: router.getCurrentPath(),
|
||||
key: router.getCurrentKey(),
|
||||
},
|
||||
]);
|
||||
const buttonsLeft = $computed(() => {
|
||||
const buttons = [];
|
||||
|
||||
if (history.length > 1) {
|
||||
buttons.push({
|
||||
icon: 'ph-caret-left ph-bold ph-lg',
|
||||
icon: "ph-caret-left ph-bold ph-lg",
|
||||
onClick: back,
|
||||
});
|
||||
}
|
||||
|
|
@ -65,48 +76,55 @@ const buttonsLeft = $computed(() => {
|
|||
return buttons;
|
||||
});
|
||||
const buttonsRight = $computed(() => {
|
||||
const buttons = [{
|
||||
icon: 'ph-arrows-out-simple ph-bold ph-lg',
|
||||
title: i18n.ts.showInPage,
|
||||
onClick: expand,
|
||||
}];
|
||||
const buttons = [
|
||||
{
|
||||
icon: "ph-arrows-out-simple ph-bold ph-lg",
|
||||
title: i18n.ts.showInPage,
|
||||
onClick: expand,
|
||||
},
|
||||
];
|
||||
|
||||
return buttons;
|
||||
});
|
||||
|
||||
router.addListener('push', ctx => {
|
||||
router.addListener("push", (ctx) => {
|
||||
history.push({ path: ctx.path, key: ctx.key });
|
||||
});
|
||||
|
||||
provide('router', router);
|
||||
provide("router", router);
|
||||
provideMetadataReceiver((info) => {
|
||||
pageMetadata = info;
|
||||
});
|
||||
provide('shouldOmitHeaderTitle', true);
|
||||
provide('shouldHeaderThin', true);
|
||||
provide("shouldOmitHeaderTitle", true);
|
||||
provide("shouldHeaderThin", true);
|
||||
|
||||
const contextmenu = $computed(() => ([{
|
||||
icon: 'ph-arrows-out-simple ph-bold ph-lg',
|
||||
text: i18n.ts.showInPage,
|
||||
action: expand,
|
||||
}, {
|
||||
icon: 'ph-arrow-square-out ph-bold ph-lg',
|
||||
text: i18n.ts.popout,
|
||||
action: popout,
|
||||
}, {
|
||||
icon: 'ph-arrow-square-out ph-bold ph-lg',
|
||||
text: i18n.ts.openInNewTab,
|
||||
action: () => {
|
||||
window.open(url + router.getCurrentPath(), '_blank');
|
||||
windowEl.close();
|
||||
const contextmenu = $computed(() => [
|
||||
{
|
||||
icon: "ph-arrows-out-simple ph-bold ph-lg",
|
||||
text: i18n.ts.showInPage,
|
||||
action: expand,
|
||||
},
|
||||
}, {
|
||||
icon: 'ph-link-simple ph-bold ph-lg',
|
||||
text: i18n.ts.copyLink,
|
||||
action: () => {
|
||||
copyToClipboard(url + router.getCurrentPath());
|
||||
{
|
||||
icon: "ph-arrow-square-out ph-bold ph-lg",
|
||||
text: i18n.ts.popout,
|
||||
action: popout,
|
||||
},
|
||||
}]));
|
||||
{
|
||||
icon: "ph-arrow-square-out ph-bold ph-lg",
|
||||
text: i18n.ts.openInNewTab,
|
||||
action: () => {
|
||||
window.open(url + router.getCurrentPath(), "_blank");
|
||||
windowEl.close();
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: "ph-link-simple ph-bold ph-lg",
|
||||
text: i18n.ts.copyLink,
|
||||
action: () => {
|
||||
copyToClipboard(url + router.getCurrentPath());
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
function menu(ev) {
|
||||
os.popupMenu(contextmenu, ev.currentTarget ?? ev.target);
|
||||
|
|
@ -114,7 +132,10 @@ function menu(ev) {
|
|||
|
||||
function back() {
|
||||
history.pop();
|
||||
router.replace(history[history.length - 1].path, history[history.length - 1].key);
|
||||
router.replace(
|
||||
history[history.length - 1].path,
|
||||
history[history.length - 1].key
|
||||
);
|
||||
}
|
||||
|
||||
function close() {
|
||||
|
|
@ -122,7 +143,7 @@ function close() {
|
|||
}
|
||||
|
||||
function expand() {
|
||||
mainRouter.push(router.getCurrentPath(), 'forcePage');
|
||||
mainRouter.push(router.getCurrentPath(), "forcePage");
|
||||
windowEl.close();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,357 +1,490 @@
|
|||
<template>
|
||||
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
|
||||
<MkLoading v-if="fetching"/>
|
||||
<MkLoading v-if="fetching" />
|
||||
|
||||
<MkError v-else-if="error" @retry="init()"/>
|
||||
<MkError v-else-if="error" @retry="init()" />
|
||||
|
||||
<div v-else-if="empty" key="_empty_" class="empty">
|
||||
<slot name="empty">
|
||||
<div class="_fullinfo">
|
||||
<img src="/static-assets/badges/info.png" class="_ghost" alt="Error"/>
|
||||
<img
|
||||
src="/static-assets/badges/info.png"
|
||||
class="_ghost"
|
||||
alt="Error"
|
||||
/>
|
||||
<div>{{ i18n.ts.nothing }}</div>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div v-else ref="rootEl">
|
||||
<div v-show="pagination.reversed && more" key="_more_" class="cxiknjgy _gap">
|
||||
<MkButton v-if="!moreFetching" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMoreAhead">
|
||||
<div
|
||||
v-show="pagination.reversed && more"
|
||||
key="_more_"
|
||||
class="cxiknjgy _gap"
|
||||
>
|
||||
<MkButton
|
||||
v-if="!moreFetching"
|
||||
class="button"
|
||||
:disabled="moreFetching"
|
||||
:style="{ cursor: moreFetching ? 'wait' : 'pointer' }"
|
||||
primary
|
||||
@click="fetchMoreAhead"
|
||||
>
|
||||
{{ i18n.ts.loadMore }}
|
||||
</MkButton>
|
||||
<MkLoading v-else class="loading"/>
|
||||
<MkLoading v-else class="loading" />
|
||||
</div>
|
||||
<slot :items="items"></slot>
|
||||
<div v-show="!pagination.reversed && more" key="_more_" class="cxiknjgy _gap">
|
||||
<MkButton v-if="!moreFetching" v-appear="($store.state.enableInfiniteScroll && !disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
|
||||
<div
|
||||
v-show="!pagination.reversed && more"
|
||||
key="_more_"
|
||||
class="cxiknjgy _gap"
|
||||
>
|
||||
<MkButton
|
||||
v-if="!moreFetching"
|
||||
v-appear="
|
||||
$store.state.enableInfiniteScroll && !disableAutoLoad
|
||||
? fetchMore
|
||||
: null
|
||||
"
|
||||
class="button"
|
||||
:disabled="moreFetching"
|
||||
:style="{ cursor: moreFetching ? 'wait' : 'pointer' }"
|
||||
primary
|
||||
@click="fetchMore"
|
||||
>
|
||||
{{ i18n.ts.loadMore }}
|
||||
</MkButton>
|
||||
<MkLoading v-else class="loading"/>
|
||||
<MkLoading v-else class="loading" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ComputedRef, isRef, markRaw, onActivated, onDeactivated, Ref, ref, watch } from 'vue';
|
||||
import * as misskey from 'calckey-js';
|
||||
import * as os from '@/os';
|
||||
import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
computed,
|
||||
ComputedRef,
|
||||
isRef,
|
||||
markRaw,
|
||||
onActivated,
|
||||
onDeactivated,
|
||||
Ref,
|
||||
ref,
|
||||
watch,
|
||||
} from "vue";
|
||||
import * as misskey from "calckey-js";
|
||||
import * as os from "@/os";
|
||||
import {
|
||||
onScrollTop,
|
||||
isTopVisible,
|
||||
getScrollPosition,
|
||||
getScrollContainer,
|
||||
} from "@/scripts/scroll";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints> = {
|
||||
endpoint: E;
|
||||
limit: number;
|
||||
params?: misskey.Endpoints[E]['req'] | ComputedRef<misskey.Endpoints[E]['req']>;
|
||||
export type Paging<
|
||||
E extends keyof misskey.Endpoints = keyof misskey.Endpoints
|
||||
> = {
|
||||
endpoint: E;
|
||||
limit: number;
|
||||
params?:
|
||||
| misskey.Endpoints[E]["req"]
|
||||
| ComputedRef<misskey.Endpoints[E]["req"]>;
|
||||
|
||||
/**
|
||||
* 検索APIのような、ページング不可なエンドポイントを利用する場合
|
||||
* (そのようなAPIをこの関数で使うのは若干矛盾してるけど)
|
||||
*/
|
||||
noPaging?: boolean;
|
||||
/**
|
||||
* 検索APIのような、ページング不可なエンドポイントを利用する場合
|
||||
* (そのようなAPIをこの関数で使うのは若干矛盾してるけど)
|
||||
*/
|
||||
noPaging?: boolean;
|
||||
|
||||
/**
|
||||
* items 配列の中身を逆順にする(新しい方が最後)
|
||||
*/
|
||||
reversed?: boolean;
|
||||
/**
|
||||
* items 配列の中身を逆順にする(新しい方が最後)
|
||||
*/
|
||||
reversed?: boolean;
|
||||
|
||||
offsetMode?: boolean;
|
||||
};
|
||||
offsetMode?: boolean;
|
||||
};
|
||||
|
||||
const SECOND_FETCH_LIMIT = 30;
|
||||
const SECOND_FETCH_LIMIT = 30;
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
pagination: Paging;
|
||||
disableAutoLoad?: boolean;
|
||||
displayLimit?: number;
|
||||
}>(), {
|
||||
}>(),
|
||||
{
|
||||
displayLimit: 30,
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'queue', count: number): void;
|
||||
}>();
|
||||
const emit = defineEmits<{
|
||||
(ev: "queue", count: number): void;
|
||||
}>();
|
||||
|
||||
type Item = { id: string; [another: string]: unknown; };
|
||||
type Item = { id: string; [another: string]: unknown };
|
||||
|
||||
const rootEl = ref<HTMLElement>();
|
||||
const items = ref<Item[]>([]);
|
||||
const queue = ref<Item[]>([]);
|
||||
const offset = ref(0);
|
||||
const fetching = ref(true);
|
||||
const moreFetching = ref(false);
|
||||
const more = ref(false);
|
||||
const backed = ref(false); // 遡り中か否か
|
||||
const isBackTop = ref(false);
|
||||
const empty = computed(() => items.value.length === 0);
|
||||
const error = ref(false);
|
||||
const rootEl = ref<HTMLElement>();
|
||||
const items = ref<Item[]>([]);
|
||||
const queue = ref<Item[]>([]);
|
||||
const offset = ref(0);
|
||||
const fetching = ref(true);
|
||||
const moreFetching = ref(false);
|
||||
const more = ref(false);
|
||||
const backed = ref(false); // 遡り中か否か
|
||||
const isBackTop = ref(false);
|
||||
const empty = computed(() => items.value.length === 0);
|
||||
const error = ref(false);
|
||||
|
||||
const init = async (): Promise<void> => {
|
||||
queue.value = [];
|
||||
fetching.value = true;
|
||||
const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
|
||||
await os.api(props.pagination.endpoint, {
|
||||
const init = async (): Promise<void> => {
|
||||
queue.value = [];
|
||||
fetching.value = true;
|
||||
const params = props.pagination.params
|
||||
? isRef(props.pagination.params)
|
||||
? props.pagination.params.value
|
||||
: props.pagination.params
|
||||
: {};
|
||||
await os
|
||||
.api(props.pagination.endpoint, {
|
||||
...params,
|
||||
limit: props.pagination.noPaging ? (props.pagination.limit || 10) : (props.pagination.limit || 10) + 1,
|
||||
}).then(res => {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
const item = res[i];
|
||||
if (props.pagination.reversed) {
|
||||
if (i === res.length - 2) item._shouldInsertAd_ = true;
|
||||
} else {
|
||||
if (i === 3) item._shouldInsertAd_ = true;
|
||||
limit: props.pagination.noPaging
|
||||
? props.pagination.limit || 10
|
||||
: (props.pagination.limit || 10) + 1,
|
||||
})
|
||||
.then(
|
||||
(res) => {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
const item = res[i];
|
||||
if (props.pagination.reversed) {
|
||||
if (i === res.length - 2) item._shouldInsertAd_ = true;
|
||||
} else {
|
||||
if (i === 3) item._shouldInsertAd_ = true;
|
||||
}
|
||||
}
|
||||
if (
|
||||
!props.pagination.noPaging &&
|
||||
res.length > (props.pagination.limit || 10)
|
||||
) {
|
||||
res.pop();
|
||||
items.value = props.pagination.reversed
|
||||
? [...res].reverse()
|
||||
: res;
|
||||
more.value = true;
|
||||
} else {
|
||||
items.value = props.pagination.reversed
|
||||
? [...res].reverse()
|
||||
: res;
|
||||
more.value = false;
|
||||
}
|
||||
offset.value = res.length;
|
||||
error.value = false;
|
||||
fetching.value = false;
|
||||
},
|
||||
(err) => {
|
||||
error.value = true;
|
||||
fetching.value = false;
|
||||
}
|
||||
if (!props.pagination.noPaging && (res.length > (props.pagination.limit || 10))) {
|
||||
res.pop();
|
||||
items.value = props.pagination.reversed ? [...res].reverse() : res;
|
||||
more.value = true;
|
||||
} else {
|
||||
items.value = props.pagination.reversed ? [...res].reverse() : res;
|
||||
more.value = false;
|
||||
}
|
||||
offset.value = res.length;
|
||||
error.value = false;
|
||||
fetching.value = false;
|
||||
}, err => {
|
||||
error.value = true;
|
||||
fetching.value = false;
|
||||
});
|
||||
};
|
||||
);
|
||||
};
|
||||
|
||||
const reload = (): void => {
|
||||
items.value = [];
|
||||
init();
|
||||
};
|
||||
const reload = (): void => {
|
||||
items.value = [];
|
||||
init();
|
||||
};
|
||||
|
||||
const refresh = async (): void => {
|
||||
const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
|
||||
await os.api(props.pagination.endpoint, {
|
||||
const refresh = async (): void => {
|
||||
const params = props.pagination.params
|
||||
? isRef(props.pagination.params)
|
||||
? props.pagination.params.value
|
||||
: props.pagination.params
|
||||
: {};
|
||||
await os
|
||||
.api(props.pagination.endpoint, {
|
||||
...params,
|
||||
limit: items.value.length + 1,
|
||||
offset: 0,
|
||||
}).then(res => {
|
||||
let ids = items.value.reduce((a, b) => {
|
||||
a[b.id] = true;
|
||||
return a;
|
||||
}, {} as { [id: string]: boolean; });
|
||||
})
|
||||
.then(
|
||||
(res) => {
|
||||
let ids = items.value.reduce((a, b) => {
|
||||
a[b.id] = true;
|
||||
return a;
|
||||
}, {} as { [id: string]: boolean });
|
||||
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
const item = res[i];
|
||||
if (!updateItem(item.id, old => item)) {
|
||||
append(item);
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
const item = res[i];
|
||||
if (!updateItem(item.id, (old) => item)) {
|
||||
append(item);
|
||||
}
|
||||
delete ids[item.id];
|
||||
}
|
||||
delete ids[item.id];
|
||||
}
|
||||
|
||||
for (const id in ids) {
|
||||
removeItem(i => i.id === id);
|
||||
for (const id in ids) {
|
||||
removeItem((i) => i.id === id);
|
||||
}
|
||||
},
|
||||
(err) => {
|
||||
error.value = true;
|
||||
fetching.value = false;
|
||||
}
|
||||
}, err => {
|
||||
error.value = true;
|
||||
fetching.value = false;
|
||||
});
|
||||
};
|
||||
);
|
||||
};
|
||||
|
||||
const fetchMore = async (): Promise<void> => {
|
||||
if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
|
||||
moreFetching.value = true;
|
||||
backed.value = true;
|
||||
const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
|
||||
await os.api(props.pagination.endpoint, {
|
||||
const fetchMore = async (): Promise<void> => {
|
||||
if (
|
||||
!more.value ||
|
||||
fetching.value ||
|
||||
moreFetching.value ||
|
||||
items.value.length === 0
|
||||
)
|
||||
return;
|
||||
moreFetching.value = true;
|
||||
backed.value = true;
|
||||
const params = props.pagination.params
|
||||
? isRef(props.pagination.params)
|
||||
? props.pagination.params.value
|
||||
: props.pagination.params
|
||||
: {};
|
||||
await os
|
||||
.api(props.pagination.endpoint, {
|
||||
...params,
|
||||
limit: SECOND_FETCH_LIMIT + 1,
|
||||
...(props.pagination.offsetMode ? {
|
||||
offset: offset.value,
|
||||
} : props.pagination.reversed ? {
|
||||
sinceId: items.value[0].id,
|
||||
} : {
|
||||
untilId: items.value[items.value.length - 1].id,
|
||||
}),
|
||||
}).then(res => {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
const item = res[i];
|
||||
if (props.pagination.reversed) {
|
||||
if (i === res.length - 9) item._shouldInsertAd_ = true;
|
||||
} else {
|
||||
if (i === 10) item._shouldInsertAd_ = true;
|
||||
}
|
||||
}
|
||||
if (res.length > SECOND_FETCH_LIMIT) {
|
||||
res.pop();
|
||||
items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
|
||||
more.value = true;
|
||||
} else {
|
||||
items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
|
||||
more.value = false;
|
||||
}
|
||||
offset.value += res.length;
|
||||
moreFetching.value = false;
|
||||
}, err => {
|
||||
moreFetching.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const fetchMoreAhead = async (): Promise<void> => {
|
||||
if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
|
||||
moreFetching.value = true;
|
||||
const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
|
||||
await os.api(props.pagination.endpoint, {
|
||||
...params,
|
||||
limit: SECOND_FETCH_LIMIT + 1,
|
||||
...(props.pagination.offsetMode ? {
|
||||
offset: offset.value,
|
||||
} : props.pagination.reversed ? {
|
||||
untilId: items.value[0].id,
|
||||
} : {
|
||||
sinceId: items.value[items.value.length - 1].id,
|
||||
}),
|
||||
}).then(res => {
|
||||
if (res.length > SECOND_FETCH_LIMIT) {
|
||||
res.pop();
|
||||
items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
|
||||
more.value = true;
|
||||
} else {
|
||||
items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
|
||||
more.value = false;
|
||||
}
|
||||
offset.value += res.length;
|
||||
moreFetching.value = false;
|
||||
}, err => {
|
||||
moreFetching.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const prepend = (item: Item): void => {
|
||||
if (props.pagination.reversed) {
|
||||
if (rootEl.value) {
|
||||
const container = getScrollContainer(rootEl.value);
|
||||
if (container == null) {
|
||||
// TODO?
|
||||
} else {
|
||||
const pos = getScrollPosition(rootEl.value);
|
||||
const viewHeight = container.clientHeight;
|
||||
const height = container.scrollHeight;
|
||||
const isBottom = (pos + viewHeight > height - 32);
|
||||
if (isBottom) {
|
||||
// オーバーフローしたら古いアイテムは捨てる
|
||||
if (items.value.length >= props.displayLimit) {
|
||||
// このやり方だとVue 3.2以降アニメーションが動かなくなる
|
||||
//items.value = items.value.slice(-props.displayLimit);
|
||||
while (items.value.length >= props.displayLimit) {
|
||||
items.value.shift();
|
||||
}
|
||||
more.value = true;
|
||||
}
|
||||
...(props.pagination.offsetMode
|
||||
? {
|
||||
offset: offset.value,
|
||||
}
|
||||
: props.pagination.reversed
|
||||
? {
|
||||
sinceId: items.value[0].id,
|
||||
}
|
||||
: {
|
||||
untilId: items.value[items.value.length - 1].id,
|
||||
}),
|
||||
})
|
||||
.then(
|
||||
(res) => {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
const item = res[i];
|
||||
if (props.pagination.reversed) {
|
||||
if (i === res.length - 9) item._shouldInsertAd_ = true;
|
||||
} else {
|
||||
if (i === 10) item._shouldInsertAd_ = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
items.value.push(item);
|
||||
// TODO
|
||||
} else {
|
||||
// 初回表示時はunshiftだけでOK
|
||||
if (!rootEl.value) {
|
||||
items.value.unshift(item);
|
||||
return;
|
||||
}
|
||||
|
||||
const isTop = isBackTop.value || (document.body.contains(rootEl.value) && isTopVisible(rootEl.value));
|
||||
|
||||
if (isTop) {
|
||||
// Prepend the item
|
||||
items.value.unshift(item);
|
||||
|
||||
// オーバーフローしたら古いアイテムは捨てる
|
||||
if (items.value.length >= props.displayLimit) {
|
||||
// このやり方だとVue 3.2以降アニメーションが動かなくなる
|
||||
//this.items = items.value.slice(0, props.displayLimit);
|
||||
while (items.value.length >= props.displayLimit) {
|
||||
items.value.pop();
|
||||
}
|
||||
if (res.length > SECOND_FETCH_LIMIT) {
|
||||
res.pop();
|
||||
items.value = props.pagination.reversed
|
||||
? [...res].reverse().concat(items.value)
|
||||
: items.value.concat(res);
|
||||
more.value = true;
|
||||
} else {
|
||||
items.value = props.pagination.reversed
|
||||
? [...res].reverse().concat(items.value)
|
||||
: items.value.concat(res);
|
||||
more.value = false;
|
||||
}
|
||||
offset.value += res.length;
|
||||
moreFetching.value = false;
|
||||
},
|
||||
(err) => {
|
||||
moreFetching.value = false;
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const fetchMoreAhead = async (): Promise<void> => {
|
||||
if (
|
||||
!more.value ||
|
||||
fetching.value ||
|
||||
moreFetching.value ||
|
||||
items.value.length === 0
|
||||
)
|
||||
return;
|
||||
moreFetching.value = true;
|
||||
const params = props.pagination.params
|
||||
? isRef(props.pagination.params)
|
||||
? props.pagination.params.value
|
||||
: props.pagination.params
|
||||
: {};
|
||||
await os
|
||||
.api(props.pagination.endpoint, {
|
||||
...params,
|
||||
limit: SECOND_FETCH_LIMIT + 1,
|
||||
...(props.pagination.offsetMode
|
||||
? {
|
||||
offset: offset.value,
|
||||
}
|
||||
: props.pagination.reversed
|
||||
? {
|
||||
untilId: items.value[0].id,
|
||||
}
|
||||
: {
|
||||
sinceId: items.value[items.value.length - 1].id,
|
||||
}),
|
||||
})
|
||||
.then(
|
||||
(res) => {
|
||||
if (res.length > SECOND_FETCH_LIMIT) {
|
||||
res.pop();
|
||||
items.value = props.pagination.reversed
|
||||
? [...res].reverse().concat(items.value)
|
||||
: items.value.concat(res);
|
||||
more.value = true;
|
||||
} else {
|
||||
items.value = props.pagination.reversed
|
||||
? [...res].reverse().concat(items.value)
|
||||
: items.value.concat(res);
|
||||
more.value = false;
|
||||
}
|
||||
offset.value += res.length;
|
||||
moreFetching.value = false;
|
||||
},
|
||||
(err) => {
|
||||
moreFetching.value = false;
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const prepend = (item: Item): void => {
|
||||
if (props.pagination.reversed) {
|
||||
if (rootEl.value) {
|
||||
const container = getScrollContainer(rootEl.value);
|
||||
if (container == null) {
|
||||
// TODO?
|
||||
} else {
|
||||
queue.value.push(item);
|
||||
onScrollTop(rootEl.value, () => {
|
||||
for (const queueItem of queue.value) {
|
||||
prepend(queueItem);
|
||||
const pos = getScrollPosition(rootEl.value);
|
||||
const viewHeight = container.clientHeight;
|
||||
const height = container.scrollHeight;
|
||||
const isBottom = pos + viewHeight > height - 32;
|
||||
if (isBottom) {
|
||||
// オーバーフローしたら古いアイテムは捨てる
|
||||
if (items.value.length >= props.displayLimit) {
|
||||
// このやり方だとVue 3.2以降アニメーションが動かなくなる
|
||||
//items.value = items.value.slice(-props.displayLimit);
|
||||
while (items.value.length >= props.displayLimit) {
|
||||
items.value.shift();
|
||||
}
|
||||
more.value = true;
|
||||
}
|
||||
queue.value = [];
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const append = (item: Item): void => {
|
||||
items.value.push(item);
|
||||
};
|
||||
|
||||
const removeItem = (finder: (item: Item) => boolean): boolean => {
|
||||
const i = items.value.findIndex(finder);
|
||||
if (i === -1) {
|
||||
return false;
|
||||
// TODO
|
||||
} else {
|
||||
// 初回表示時はunshiftだけでOK
|
||||
if (!rootEl.value) {
|
||||
items.value.unshift(item);
|
||||
return;
|
||||
}
|
||||
|
||||
items.value.splice(i, 1);
|
||||
return true;
|
||||
};
|
||||
const isTop =
|
||||
isBackTop.value ||
|
||||
(document.body.contains(rootEl.value) &&
|
||||
isTopVisible(rootEl.value));
|
||||
|
||||
const updateItem = (id: Item['id'], replacer: (old: Item) => Item): boolean => {
|
||||
const i = items.value.findIndex(item => item.id === id);
|
||||
if (i === -1) {
|
||||
return false;
|
||||
if (isTop) {
|
||||
// Prepend the item
|
||||
items.value.unshift(item);
|
||||
|
||||
// オーバーフローしたら古いアイテムは捨てる
|
||||
if (items.value.length >= props.displayLimit) {
|
||||
// このやり方だとVue 3.2以降アニメーションが動かなくなる
|
||||
//this.items = items.value.slice(0, props.displayLimit);
|
||||
while (items.value.length >= props.displayLimit) {
|
||||
items.value.pop();
|
||||
}
|
||||
more.value = true;
|
||||
}
|
||||
} else {
|
||||
queue.value.push(item);
|
||||
onScrollTop(rootEl.value, () => {
|
||||
for (const queueItem of queue.value) {
|
||||
prepend(queueItem);
|
||||
}
|
||||
queue.value = [];
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
items.value[i] = replacer(items.value[i]);
|
||||
return true;
|
||||
};
|
||||
const append = (item: Item): void => {
|
||||
items.value.push(item);
|
||||
};
|
||||
|
||||
if (props.pagination.params && isRef(props.pagination.params)) {
|
||||
watch(props.pagination.params, init, { deep: true });
|
||||
const removeItem = (finder: (item: Item) => boolean): boolean => {
|
||||
const i = items.value.findIndex(finder);
|
||||
if (i === -1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
watch(queue, (a, b) => {
|
||||
items.value.splice(i, 1);
|
||||
return true;
|
||||
};
|
||||
|
||||
const updateItem = (id: Item["id"], replacer: (old: Item) => Item): boolean => {
|
||||
const i = items.value.findIndex((item) => item.id === id);
|
||||
if (i === -1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
items.value[i] = replacer(items.value[i]);
|
||||
return true;
|
||||
};
|
||||
|
||||
if (props.pagination.params && isRef(props.pagination.params)) {
|
||||
watch(props.pagination.params, init, { deep: true });
|
||||
}
|
||||
|
||||
watch(
|
||||
queue,
|
||||
(a, b) => {
|
||||
if (a.length === 0 && b.length === 0) return;
|
||||
emit('queue', queue.value.length);
|
||||
}, { deep: true });
|
||||
emit("queue", queue.value.length);
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
init();
|
||||
init();
|
||||
|
||||
onActivated(() => {
|
||||
isBackTop.value = false;
|
||||
});
|
||||
onActivated(() => {
|
||||
isBackTop.value = false;
|
||||
});
|
||||
|
||||
onDeactivated(() => {
|
||||
isBackTop.value = window.scrollY === 0;
|
||||
});
|
||||
onDeactivated(() => {
|
||||
isBackTop.value = window.scrollY === 0;
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
items,
|
||||
queue,
|
||||
backed,
|
||||
reload,
|
||||
refresh,
|
||||
prepend,
|
||||
append,
|
||||
removeItem,
|
||||
updateItem,
|
||||
});
|
||||
</script>
|
||||
defineExpose({
|
||||
items,
|
||||
queue,
|
||||
backed,
|
||||
reload,
|
||||
refresh,
|
||||
prepend,
|
||||
append,
|
||||
removeItem,
|
||||
updateItem,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.125s ease;
|
||||
<style lang="scss" scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.125s ease;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cxiknjgy {
|
||||
> .button {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cxiknjgy {
|
||||
> .button {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,62 @@
|
|||
<template>
|
||||
<div class="tivcixzd" :class="{ done: closed || isVoted }">
|
||||
<ul>
|
||||
<li v-for="(choice, i) in note.poll.choices" :key="i" :class="{ voted: choice.voted }" @click.stop="vote(i)">
|
||||
<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
|
||||
<span>
|
||||
<template v-if="choice.isVoted"><i class="ph-check ph-bold ph-lg"></i></template>
|
||||
<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
|
||||
<span v-if="showResult" class="votes">({{ i18n.t('_poll.votesCount', { n: choice.votes }) }})</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p v-if="!readOnly">
|
||||
<span>{{ i18n.t('_poll.totalVotes', { n: total }) }}</span>
|
||||
<span> · </span>
|
||||
<a v-if="!closed && !isVoted" @click.stop="showResult = !showResult">{{ showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult }}</a>
|
||||
<span v-if="isVoted">{{ i18n.ts._poll.voted }}</span>
|
||||
<span v-else-if="closed">{{ i18n.ts._poll.closed }}</span>
|
||||
<span v-if="remaining > 0"> · {{ timer }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="tivcixzd" :class="{ done: closed || isVoted }">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(choice, i) in note.poll.choices"
|
||||
:key="i"
|
||||
:class="{ voted: choice.voted }"
|
||||
@click.stop="vote(i)"
|
||||
>
|
||||
<div
|
||||
class="backdrop"
|
||||
:style="{
|
||||
width: `${
|
||||
showResult ? (choice.votes / total) * 100 : 0
|
||||
}%`,
|
||||
}"
|
||||
></div>
|
||||
<span>
|
||||
<template v-if="choice.isVoted"
|
||||
><i class="ph-check ph-bold ph-lg"></i
|
||||
></template>
|
||||
<Mfm
|
||||
:text="choice.text"
|
||||
:plain="true"
|
||||
:custom-emojis="note.emojis"
|
||||
/>
|
||||
<span v-if="showResult" class="votes"
|
||||
>({{
|
||||
i18n.t("_poll.votesCount", { n: choice.votes })
|
||||
}})</span
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p v-if="!readOnly">
|
||||
<span>{{ i18n.t("_poll.totalVotes", { n: total }) }}</span>
|
||||
<span> · </span>
|
||||
<a
|
||||
v-if="!closed && !isVoted"
|
||||
@click.stop="showResult = !showResult"
|
||||
>{{
|
||||
showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult
|
||||
}}</a
|
||||
>
|
||||
<span v-if="isVoted">{{ i18n.ts._poll.voted }}</span>
|
||||
<span v-else-if="closed">{{ i18n.ts._poll.closed }}</span>
|
||||
<span v-if="remaining > 0"> · {{ timer }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onUnmounted, ref, toRef } from 'vue';
|
||||
import * as misskey from 'calckey-js';
|
||||
import { sum } from '@/scripts/array';
|
||||
import { pleaseLogin } from '@/scripts/please-login';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { useInterval } from '@/scripts/use-interval';
|
||||
import { computed, onUnmounted, ref, toRef } from "vue";
|
||||
import * as misskey from "calckey-js";
|
||||
import { sum } from "@/scripts/array";
|
||||
import { pleaseLogin } from "@/scripts/please-login";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
import { useInterval } from "@/scripts/use-interval";
|
||||
|
||||
const props = defineProps<{
|
||||
note: misskey.entities.Note;
|
||||
|
|
@ -37,25 +65,42 @@ const props = defineProps<{
|
|||
|
||||
const remaining = ref(-1);
|
||||
|
||||
const total = computed(() => sum(props.note.poll.choices.map(x => x.votes)));
|
||||
const total = computed(() => sum(props.note.poll.choices.map((x) => x.votes)));
|
||||
const closed = computed(() => remaining.value === 0);
|
||||
const isVoted = computed(() => !props.note.poll.multiple && props.note.poll.choices.some(c => c.isVoted));
|
||||
const timer = computed(() => i18n.t(
|
||||
remaining.value >= 86400 ? '_poll.remainingDays' :
|
||||
remaining.value >= 3600 ? '_poll.remainingHours' :
|
||||
remaining.value >= 60 ? '_poll.remainingMinutes' : '_poll.remainingSeconds', {
|
||||
s: Math.floor(remaining.value % 60),
|
||||
m: Math.floor(remaining.value / 60) % 60,
|
||||
h: Math.floor(remaining.value / 3600) % 24,
|
||||
d: Math.floor(remaining.value / 86400),
|
||||
}));
|
||||
const isVoted = computed(
|
||||
() =>
|
||||
!props.note.poll.multiple &&
|
||||
props.note.poll.choices.some((c) => c.isVoted)
|
||||
);
|
||||
const timer = computed(() =>
|
||||
i18n.t(
|
||||
remaining.value >= 86400
|
||||
? "_poll.remainingDays"
|
||||
: remaining.value >= 3600
|
||||
? "_poll.remainingHours"
|
||||
: remaining.value >= 60
|
||||
? "_poll.remainingMinutes"
|
||||
: "_poll.remainingSeconds",
|
||||
{
|
||||
s: Math.floor(remaining.value % 60),
|
||||
m: Math.floor(remaining.value / 60) % 60,
|
||||
h: Math.floor(remaining.value / 3600) % 24,
|
||||
d: Math.floor(remaining.value / 86400),
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
const showResult = ref(props.readOnly || isVoted.value);
|
||||
|
||||
// 期限付きアンケート
|
||||
if (props.note.poll.expiresAt) {
|
||||
const tick = () => {
|
||||
remaining.value = Math.floor(Math.max(new Date(props.note.poll.expiresAt).getTime() - Date.now(), 0) / 1000);
|
||||
remaining.value = Math.floor(
|
||||
Math.max(
|
||||
new Date(props.note.poll.expiresAt).getTime() - Date.now(),
|
||||
0
|
||||
) / 1000
|
||||
);
|
||||
if (remaining.value === 0) {
|
||||
showResult.value = true;
|
||||
}
|
||||
|
|
@ -73,12 +118,14 @@ const vote = async (id) => {
|
|||
if (props.readOnly || closed.value || isVoted.value) return;
|
||||
|
||||
const { canceled } = await os.confirm({
|
||||
type: 'question',
|
||||
text: i18n.t('voteConfirm', { choice: props.note.poll.choices[id].text }),
|
||||
type: "question",
|
||||
text: i18n.t("voteConfirm", {
|
||||
choice: props.note.poll.choices[id].text,
|
||||
}),
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
await os.api('notes/polls/vote', {
|
||||
await os.api("notes/polls/vote", {
|
||||
noteId: props.note.id,
|
||||
choice: id,
|
||||
});
|
||||
|
|
@ -111,7 +158,11 @@ const vote = async (id) => {
|
|||
left: 0;
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
background: linear-gradient(90deg,var(--buttonGradateA),var(--buttonGradateB));
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--buttonGradateA),
|
||||
var(--buttonGradateB)
|
||||
);
|
||||
transition: width 1s ease;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,61 +1,84 @@
|
|||
<template>
|
||||
<div class="zmdxowus">
|
||||
<p v-if="choices.length < 2" class="caution">
|
||||
<i class="ph-warning ph-bold ph-lg"></i>{{ i18n.ts._poll.noOnlyOneChoice }}
|
||||
</p>
|
||||
<ul>
|
||||
<li v-for="(choice, i) in choices" :key="i">
|
||||
<MkInput class="input" small :model-value="choice" :placeholder="i18n.t('_poll.choiceN', { n: i + 1 })" @update:modelValue="onInput(i, $event)">
|
||||
</MkInput>
|
||||
<button class="_button" @click="remove(i)">
|
||||
<i class="ph-x ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<MkButton v-if="choices.length < 10" class="add" @click="add">{{ i18n.ts.add }}</MkButton>
|
||||
<MkButton v-else class="add" disabled>{{ i18n.ts._poll.noMore }}</MkButton>
|
||||
<MkSwitch v-model="multiple">{{ i18n.ts._poll.canMultipleVote }}</MkSwitch>
|
||||
<section>
|
||||
<div>
|
||||
<MkSelect v-model="expiration" small>
|
||||
<template #label>{{ i18n.ts._poll.expiration }}</template>
|
||||
<option value="infinite">{{ i18n.ts._poll.infinite }}</option>
|
||||
<option value="at">{{ i18n.ts._poll.at }}</option>
|
||||
<option value="after">{{ i18n.ts._poll.after }}</option>
|
||||
</MkSelect>
|
||||
<section v-if="expiration === 'at'">
|
||||
<MkInput v-model="atDate" small type="date" class="input">
|
||||
<template #label>{{ i18n.ts._poll.deadlineDate }}</template>
|
||||
<div class="zmdxowus">
|
||||
<p v-if="choices.length < 2" class="caution">
|
||||
<i class="ph-warning ph-bold ph-lg"></i
|
||||
>{{ i18n.ts._poll.noOnlyOneChoice }}
|
||||
</p>
|
||||
<ul>
|
||||
<li v-for="(choice, i) in choices" :key="i">
|
||||
<MkInput
|
||||
class="input"
|
||||
small
|
||||
:model-value="choice"
|
||||
:placeholder="i18n.t('_poll.choiceN', { n: i + 1 })"
|
||||
@update:modelValue="onInput(i, $event)"
|
||||
>
|
||||
</MkInput>
|
||||
<MkInput v-model="atTime" small type="time" class="input">
|
||||
<template #label>{{ i18n.ts._poll.deadlineTime }}</template>
|
||||
</MkInput>
|
||||
</section>
|
||||
<section v-else-if="expiration === 'after'">
|
||||
<MkInput v-model="after" small type="number" class="input">
|
||||
<template #label>{{ i18n.ts._poll.duration }}</template>
|
||||
</MkInput>
|
||||
<MkSelect v-model="unit" small>
|
||||
<option value="second">{{ i18n.ts._time.second }}</option>
|
||||
<option value="minute">{{ i18n.ts._time.minute }}</option>
|
||||
<option value="hour">{{ i18n.ts._time.hour }}</option>
|
||||
<option value="day">{{ i18n.ts._time.day }}</option>
|
||||
<button class="_button" @click="remove(i)">
|
||||
<i class="ph-x ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<MkButton v-if="choices.length < 10" class="add" @click="add">{{
|
||||
i18n.ts.add
|
||||
}}</MkButton>
|
||||
<MkButton v-else class="add" disabled>{{
|
||||
i18n.ts._poll.noMore
|
||||
}}</MkButton>
|
||||
<MkSwitch v-model="multiple">{{
|
||||
i18n.ts._poll.canMultipleVote
|
||||
}}</MkSwitch>
|
||||
<section>
|
||||
<div>
|
||||
<MkSelect v-model="expiration" small>
|
||||
<template #label>{{ i18n.ts._poll.expiration }}</template>
|
||||
<option value="infinite">
|
||||
{{ i18n.ts._poll.infinite }}
|
||||
</option>
|
||||
<option value="at">{{ i18n.ts._poll.at }}</option>
|
||||
<option value="after">{{ i18n.ts._poll.after }}</option>
|
||||
</MkSelect>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section v-if="expiration === 'at'">
|
||||
<MkInput v-model="atDate" small type="date" class="input">
|
||||
<template #label>{{
|
||||
i18n.ts._poll.deadlineDate
|
||||
}}</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="atTime" small type="time" class="input">
|
||||
<template #label>{{
|
||||
i18n.ts._poll.deadlineTime
|
||||
}}</template>
|
||||
</MkInput>
|
||||
</section>
|
||||
<section v-else-if="expiration === 'after'">
|
||||
<MkInput v-model="after" small type="number" class="input">
|
||||
<template #label>{{ i18n.ts._poll.duration }}</template>
|
||||
</MkInput>
|
||||
<MkSelect v-model="unit" small>
|
||||
<option value="second">
|
||||
{{ i18n.ts._time.second }}
|
||||
</option>
|
||||
<option value="minute">
|
||||
{{ i18n.ts._time.minute }}
|
||||
</option>
|
||||
<option value="hour">{{ i18n.ts._time.hour }}</option>
|
||||
<option value="day">{{ i18n.ts._time.day }}</option>
|
||||
</MkSelect>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import MkInput from './form/input.vue';
|
||||
import MkSelect from './form/select.vue';
|
||||
import MkSwitch from './form/switch.vue';
|
||||
import MkButton from './MkButton.vue';
|
||||
import { formatDateTimeString } from '@/scripts/format-time-string';
|
||||
import { addTime } from '@/scripts/time';
|
||||
import { i18n } from '@/i18n';
|
||||
import { ref, watch } from "vue";
|
||||
import MkInput from "./form/input.vue";
|
||||
import MkSelect from "./form/select.vue";
|
||||
import MkSwitch from "./form/switch.vue";
|
||||
import MkButton from "./MkButton.vue";
|
||||
import { formatDateTimeString } from "@/scripts/format-time-string";
|
||||
import { addTime } from "@/scripts/time";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: {
|
||||
|
|
@ -66,30 +89,35 @@ const props = defineProps<{
|
|||
};
|
||||
}>();
|
||||
const emit = defineEmits<{
|
||||
(ev: 'update:modelValue', v: {
|
||||
expiresAt: string;
|
||||
expiredAfter: number;
|
||||
choices: string[];
|
||||
multiple: boolean;
|
||||
}): void;
|
||||
(
|
||||
ev: "update:modelValue",
|
||||
v: {
|
||||
expiresAt: string;
|
||||
expiredAfter: number;
|
||||
choices: string[];
|
||||
multiple: boolean;
|
||||
}
|
||||
): void;
|
||||
}>();
|
||||
|
||||
const choices = ref(props.modelValue.choices);
|
||||
const multiple = ref(props.modelValue.multiple);
|
||||
const expiration = ref('infinite');
|
||||
const atDate = ref(formatDateTimeString(addTime(new Date(), 1, 'day'), 'yyyy-MM-dd'));
|
||||
const atTime = ref('00:00');
|
||||
const expiration = ref("infinite");
|
||||
const atDate = ref(
|
||||
formatDateTimeString(addTime(new Date(), 1, "day"), "yyyy-MM-dd")
|
||||
);
|
||||
const atTime = ref("00:00");
|
||||
const after = ref(0);
|
||||
const unit = ref('second');
|
||||
const unit = ref("second");
|
||||
|
||||
if (props.modelValue.expiresAt) {
|
||||
expiration.value = 'at';
|
||||
expiration.value = "at";
|
||||
atDate.value = atTime.value = props.modelValue.expiresAt;
|
||||
} else if (typeof props.modelValue.expiredAfter === 'number') {
|
||||
expiration.value = 'after';
|
||||
} else if (typeof props.modelValue.expiredAfter === "number") {
|
||||
expiration.value = "after";
|
||||
after.value = props.modelValue.expiredAfter / 1000;
|
||||
} else {
|
||||
expiration.value = 'infinite';
|
||||
expiration.value = "infinite";
|
||||
}
|
||||
|
||||
function onInput(i, value) {
|
||||
|
|
@ -97,7 +125,7 @@ function onInput(i, value) {
|
|||
}
|
||||
|
||||
function add() {
|
||||
choices.value.push('');
|
||||
choices.value.push("");
|
||||
// TODO
|
||||
// nextTick(() => {
|
||||
// (this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
|
||||
|
|
@ -116,30 +144,40 @@ function get() {
|
|||
const calcAfter = () => {
|
||||
let base = parseInt(after.value);
|
||||
switch (unit.value) {
|
||||
case 'day': base *= 24;
|
||||
// fallthrough
|
||||
case 'hour': base *= 60;
|
||||
// fallthrough
|
||||
case 'minute': base *= 60;
|
||||
// fallthrough
|
||||
case 'second': return base *= 1000;
|
||||
default: return null;
|
||||
case "day":
|
||||
base *= 24;
|
||||
// fallthrough
|
||||
case "hour":
|
||||
base *= 60;
|
||||
// fallthrough
|
||||
case "minute":
|
||||
base *= 60;
|
||||
// fallthrough
|
||||
case "second":
|
||||
return (base *= 1000);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
choices: choices.value,
|
||||
multiple: multiple.value,
|
||||
...(
|
||||
expiration.value === 'at' ? { expiresAt: calcAt() } :
|
||||
expiration.value === 'after' ? { expiredAfter: calcAfter() } : {}
|
||||
),
|
||||
...(expiration.value === "at"
|
||||
? { expiresAt: calcAt() }
|
||||
: expiration.value === "after"
|
||||
? { expiredAfter: calcAfter() }
|
||||
: {}),
|
||||
};
|
||||
}
|
||||
|
||||
watch([choices, multiple, expiration, atDate, atTime, after, unit], () => emit('update:modelValue', get()), {
|
||||
deep: true,
|
||||
});
|
||||
watch(
|
||||
[choices, multiple, expiration, atDate, atTime, after, unit],
|
||||
() => emit("update:modelValue", get()),
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,42 @@
|
|||
<template>
|
||||
<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="modal.close()" @closed="emit('closed')">
|
||||
<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq" :class="{ drawer: type === 'drawer' }" @close="modal.close()"/>
|
||||
</MkModal>
|
||||
<MkModal
|
||||
ref="modal"
|
||||
v-slot="{ type, maxHeight }"
|
||||
:z-priority="'high'"
|
||||
:src="src"
|
||||
:transparent-bg="true"
|
||||
@click="modal.close()"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<MkMenu
|
||||
:items="items"
|
||||
:align="align"
|
||||
:width="width"
|
||||
:max-height="maxHeight"
|
||||
:as-drawer="type === 'drawer'"
|
||||
class="sfhdhdhq"
|
||||
:class="{ drawer: type === 'drawer' }"
|
||||
@close="modal.close()"
|
||||
/>
|
||||
</MkModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import MkModal from './MkModal.vue';
|
||||
import MkMenu from './MkMenu.vue';
|
||||
import { MenuItem } from '@/types/menu';
|
||||
import {} from "vue";
|
||||
import MkModal from "./MkModal.vue";
|
||||
import MkMenu from "./MkMenu.vue";
|
||||
import { MenuItem } from "@/types/menu";
|
||||
|
||||
defineProps<{
|
||||
items: MenuItem[];
|
||||
align?: 'center' | string;
|
||||
align?: "center" | string;
|
||||
width?: number;
|
||||
viaKeyboard?: boolean;
|
||||
src?: any;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
let modal = $ref<InstanceType<typeof MkModal>>();
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,28 +1,46 @@
|
|||
<template>
|
||||
<div v-show="files.length != 0" class="skeikyzd">
|
||||
<XDraggable v-model="_files" class="files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
|
||||
<template #item="{element}">
|
||||
<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
|
||||
<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
|
||||
<div v-if="element.isSensitive" class="sensitive">
|
||||
<i class="ph-warning ph-bold ph-lg icon"></i>
|
||||
<div v-show="files.length != 0" class="skeikyzd">
|
||||
<XDraggable
|
||||
v-model="_files"
|
||||
class="files"
|
||||
item-key="id"
|
||||
animation="150"
|
||||
delay="100"
|
||||
delay-on-touch-only="true"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div
|
||||
class="file"
|
||||
@click="showFileMenu(element, $event)"
|
||||
@contextmenu.prevent="showFileMenu(element, $event)"
|
||||
>
|
||||
<MkDriveFileThumbnail
|
||||
:data-id="element.id"
|
||||
class="thumbnail"
|
||||
:file="element"
|
||||
fit="cover"
|
||||
/>
|
||||
<div v-if="element.isSensitive" class="sensitive">
|
||||
<i class="ph-warning ph-bold ph-lg icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</XDraggable>
|
||||
<p class="remain">{{ 16 - files.length }}/16</p>
|
||||
</div>
|
||||
</template>
|
||||
</XDraggable>
|
||||
<p class="remain">{{ 16 - files.length }}/16</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, defineAsyncComponent } from 'vue';
|
||||
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { defineComponent, defineAsyncComponent } from "vue";
|
||||
import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
|
||||
XDraggable: defineAsyncComponent(() =>
|
||||
import("vuedraggable").then((x) => x.default)
|
||||
),
|
||||
MkDriveFileThumbnail,
|
||||
},
|
||||
|
||||
|
|
@ -37,7 +55,7 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
|
||||
emits: ['updated', 'detach', 'changeSensitive', 'changeName'],
|
||||
emits: ["updated", "detach", "changeSensitive", "changeName"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -52,7 +70,7 @@ export default defineComponent({
|
|||
return this.files;
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('updated', value);
|
||||
this.$emit("updated", value);
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -62,15 +80,15 @@ export default defineComponent({
|
|||
if (this.detachMediaFn) {
|
||||
this.detachMediaFn(id);
|
||||
} else {
|
||||
this.$emit('detach', id);
|
||||
this.$emit("detach", id);
|
||||
}
|
||||
},
|
||||
toggleSensitive(file) {
|
||||
os.api('drive/files/update', {
|
||||
os.api("drive/files/update", {
|
||||
fileId: file.id,
|
||||
isSensitive: !file.isSensitive,
|
||||
}).then(() => {
|
||||
this.$emit('changeSensitive', file, !file.isSensitive);
|
||||
this.$emit("changeSensitive", file, !file.isSensitive);
|
||||
});
|
||||
},
|
||||
async rename(file) {
|
||||
|
|
@ -80,56 +98,86 @@ export default defineComponent({
|
|||
allowEmpty: false,
|
||||
});
|
||||
if (canceled) return;
|
||||
os.api('drive/files/update', {
|
||||
os.api("drive/files/update", {
|
||||
fileId: file.id,
|
||||
name: result,
|
||||
}).then(() => {
|
||||
this.$emit('changeName', file, result);
|
||||
this.$emit("changeName", file, result);
|
||||
file.name = result;
|
||||
});
|
||||
},
|
||||
|
||||
async describe(file) {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
|
||||
title: i18n.ts.describeFile,
|
||||
input: {
|
||||
placeholder: i18n.ts.inputNewDescription,
|
||||
default: file.comment !== null ? file.comment : '',
|
||||
os.popup(
|
||||
defineAsyncComponent(
|
||||
() => import("@/components/MkMediaCaption.vue")
|
||||
),
|
||||
{
|
||||
title: i18n.ts.describeFile,
|
||||
input: {
|
||||
placeholder: i18n.ts.inputNewDescription,
|
||||
default: file.comment !== null ? file.comment : "",
|
||||
},
|
||||
image: file,
|
||||
},
|
||||
image: file,
|
||||
}, {
|
||||
done: result => {
|
||||
if (!result || result.canceled) return;
|
||||
let comment = result.result.length === 0 ? null : result.result;
|
||||
os.api('drive/files/update', {
|
||||
fileId: file.id,
|
||||
comment: comment,
|
||||
}).then(() => {
|
||||
file.comment = comment;
|
||||
});
|
||||
{
|
||||
done: (result) => {
|
||||
if (!result || result.canceled) return;
|
||||
let comment =
|
||||
result.result.length === 0 ? null : result.result;
|
||||
os.api("drive/files/update", {
|
||||
fileId: file.id,
|
||||
comment: comment,
|
||||
}).then(() => {
|
||||
file.comment = comment;
|
||||
});
|
||||
},
|
||||
},
|
||||
}, 'closed');
|
||||
"closed"
|
||||
);
|
||||
},
|
||||
|
||||
showFileMenu(file, ev: MouseEvent) {
|
||||
if (this.menu) return;
|
||||
this.menu = os.popupMenu([{
|
||||
text: i18n.ts.renameFile,
|
||||
icon: 'ph-cursor-text ph-bold ph-lg',
|
||||
action: () => { this.rename(file); },
|
||||
}, {
|
||||
text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
|
||||
icon: file.isSensitive ? 'ph-eye-slash ph-bold ph-lg' : 'ph-eye ph-bold ph-lg',
|
||||
action: () => { this.toggleSensitive(file); },
|
||||
}, {
|
||||
text: i18n.ts.describeFile,
|
||||
icon: 'ph-cursor-text ph-bold ph-lg',
|
||||
action: () => { this.describe(file); },
|
||||
}, {
|
||||
text: i18n.ts.attachCancel,
|
||||
icon: 'ph-circle-wavy-warning ph-bold ph-lg',
|
||||
action: () => { this.detachMedia(file.id); },
|
||||
}], ev.currentTarget ?? ev.target).then(() => this.menu = null);
|
||||
this.menu = os
|
||||
.popupMenu(
|
||||
[
|
||||
{
|
||||
text: i18n.ts.renameFile,
|
||||
icon: "ph-cursor-text ph-bold ph-lg",
|
||||
action: () => {
|
||||
this.rename(file);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: file.isSensitive
|
||||
? i18n.ts.unmarkAsSensitive
|
||||
: i18n.ts.markAsSensitive,
|
||||
icon: file.isSensitive
|
||||
? "ph-eye-slash ph-bold ph-lg"
|
||||
: "ph-eye ph-bold ph-lg",
|
||||
action: () => {
|
||||
this.toggleSensitive(file);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: i18n.ts.describeFile,
|
||||
icon: "ph-cursor-text ph-bold ph-lg",
|
||||
action: () => {
|
||||
this.describe(file);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: i18n.ts.attachCancel,
|
||||
icon: "ph-circle-wavy-warning ph-bold ph-lg",
|
||||
action: () => {
|
||||
this.detachMedia(file.id);
|
||||
},
|
||||
},
|
||||
],
|
||||
ev.currentTarget ?? ev.target
|
||||
)
|
||||
.then(() => (this.menu = null));
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -172,7 +220,7 @@ export default defineComponent({
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
background: rgba(17, 17, 17, .7);
|
||||
background: rgba(17, 17, 17, 0.7);
|
||||
color: #fff;
|
||||
|
||||
> .icon {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,28 @@
|
|||
<template>
|
||||
<MkModal ref="modal" :prefer-type="'dialog'" @click="modal.close()" @closed="onModalClosed()">
|
||||
<MkPostForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" autofocus freeze-after-posted @posted="onPosted" @cancel="modal.close()" @esc="modal.close()"/>
|
||||
<MkModal
|
||||
ref="modal"
|
||||
:prefer-type="'dialog'"
|
||||
@click="modal.close()"
|
||||
@closed="onModalClosed()"
|
||||
>
|
||||
<MkPostForm
|
||||
ref="form"
|
||||
style="margin: 0 auto auto auto"
|
||||
v-bind="props"
|
||||
autofocus
|
||||
freeze-after-posted
|
||||
@posted="onPosted"
|
||||
@cancel="modal.close()"
|
||||
@esc="modal.close()"
|
||||
/>
|
||||
</MkModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import * as misskey from 'calckey-js';
|
||||
import MkModal from '@/components/MkModal.vue';
|
||||
import MkPostForm from '@/components/MkPostForm.vue';
|
||||
import {} from "vue";
|
||||
import * as misskey from "calckey-js";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import MkPostForm from "@/components/MkPostForm.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
reply?: misskey.entities.Note;
|
||||
|
|
@ -28,7 +42,7 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
let modal = $shallowRef<InstanceType<typeof MkModal>>();
|
||||
|
|
@ -41,6 +55,6 @@ function onPosted() {
|
|||
}
|
||||
|
||||
function onModalClosed() {
|
||||
emit('closed');
|
||||
emit("closed");
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,46 +1,63 @@
|
|||
<template>
|
||||
<MkButton
|
||||
v-if="supported && !pushRegistrationInServer"
|
||||
type="button"
|
||||
primary
|
||||
:gradate="gradate"
|
||||
:rounded="rounded"
|
||||
:inline="inline"
|
||||
:autofocus="autofocus"
|
||||
:wait="wait"
|
||||
:full="full"
|
||||
@click="subscribe"
|
||||
>
|
||||
{{ i18n.ts.subscribePushNotification }}
|
||||
</MkButton>
|
||||
<MkButton
|
||||
v-else-if="!showOnlyToRegister && ($i ? pushRegistrationInServer : pushSubscription)"
|
||||
type="button"
|
||||
:primary="false"
|
||||
:gradate="gradate"
|
||||
:rounded="rounded"
|
||||
:inline="inline"
|
||||
:autofocus="autofocus"
|
||||
:wait="wait"
|
||||
:full="full"
|
||||
@click="unsubscribe"
|
||||
>
|
||||
{{ i18n.ts.unsubscribePushNotification }}
|
||||
</MkButton>
|
||||
<MkButton v-else-if="$i && pushRegistrationInServer" disabled :rounded="rounded" :inline="inline" :wait="wait" :full="full">
|
||||
{{ i18n.ts.pushNotificationAlreadySubscribed }}
|
||||
</MkButton>
|
||||
<MkButton v-else-if="!supported" disabled :rounded="rounded" :inline="inline" :wait="wait" :full="full">
|
||||
{{ i18n.ts.pushNotificationNotSupported }}
|
||||
</MkButton>
|
||||
<MkButton
|
||||
v-if="supported && !pushRegistrationInServer"
|
||||
type="button"
|
||||
primary
|
||||
:gradate="gradate"
|
||||
:rounded="rounded"
|
||||
:inline="inline"
|
||||
:autofocus="autofocus"
|
||||
:wait="wait"
|
||||
:full="full"
|
||||
@click="subscribe"
|
||||
>
|
||||
{{ i18n.ts.subscribePushNotification }}
|
||||
</MkButton>
|
||||
<MkButton
|
||||
v-else-if="
|
||||
!showOnlyToRegister &&
|
||||
($i ? pushRegistrationInServer : pushSubscription)
|
||||
"
|
||||
type="button"
|
||||
:primary="false"
|
||||
:gradate="gradate"
|
||||
:rounded="rounded"
|
||||
:inline="inline"
|
||||
:autofocus="autofocus"
|
||||
:wait="wait"
|
||||
:full="full"
|
||||
@click="unsubscribe"
|
||||
>
|
||||
{{ i18n.ts.unsubscribePushNotification }}
|
||||
</MkButton>
|
||||
<MkButton
|
||||
v-else-if="$i && pushRegistrationInServer"
|
||||
disabled
|
||||
:rounded="rounded"
|
||||
:inline="inline"
|
||||
:wait="wait"
|
||||
:full="full"
|
||||
>
|
||||
{{ i18n.ts.pushNotificationAlreadySubscribed }}
|
||||
</MkButton>
|
||||
<MkButton
|
||||
v-else-if="!supported"
|
||||
disabled
|
||||
:rounded="rounded"
|
||||
:inline="inline"
|
||||
:wait="wait"
|
||||
:full="full"
|
||||
>
|
||||
{{ i18n.ts.pushNotificationNotSupported }}
|
||||
</MkButton>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { $i, getAccounts } from '@/account';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import { instance } from '@/instance';
|
||||
import { api, apiWithDialog, promiseDialog } from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { $i, getAccounts } from "@/account";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import { instance } from "@/instance";
|
||||
import { api, apiWithDialog, promiseDialog } from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
defineProps<{
|
||||
primary?: boolean;
|
||||
|
|
@ -62,38 +79,60 @@ let registration = $ref<ServiceWorkerRegistration | undefined>();
|
|||
let supported = $ref(false);
|
||||
// If this browser has already subscribed to push notification
|
||||
let pushSubscription = $ref<PushSubscription | null>(null);
|
||||
let pushRegistrationInServer = $ref<{ state?: string; key?: string; userId: string; endpoint: string; sendReadMessage: boolean; } | undefined>();
|
||||
let pushRegistrationInServer = $ref<
|
||||
| {
|
||||
state?: string;
|
||||
key?: string;
|
||||
userId: string;
|
||||
endpoint: string;
|
||||
sendReadMessage: boolean;
|
||||
}
|
||||
| undefined
|
||||
>();
|
||||
|
||||
function subscribe() {
|
||||
if (!registration || !supported || !instance.swPublickey) return;
|
||||
|
||||
// SEE: https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe#Parameters
|
||||
return promiseDialog(registration.pushManager.subscribe({
|
||||
userVisibleOnly: true,
|
||||
applicationServerKey: urlBase64ToUint8Array(instance.swPublickey),
|
||||
})
|
||||
.then(async subscription => {
|
||||
pushSubscription = subscription;
|
||||
return promiseDialog(
|
||||
registration.pushManager
|
||||
.subscribe({
|
||||
userVisibleOnly: true,
|
||||
applicationServerKey: urlBase64ToUint8Array(
|
||||
instance.swPublickey
|
||||
),
|
||||
})
|
||||
.then(
|
||||
async (subscription) => {
|
||||
pushSubscription = subscription;
|
||||
|
||||
// Register
|
||||
pushRegistrationInServer = await api('sw/register', {
|
||||
endpoint: subscription.endpoint,
|
||||
auth: encode(subscription.getKey('auth')),
|
||||
publickey: encode(subscription.getKey('p256dh')),
|
||||
});
|
||||
}, async err => { // When subscribe failed
|
||||
// 通知が許可されていなかったとき
|
||||
if (err?.name === 'NotAllowedError') {
|
||||
console.info('User denied the notification permission request.');
|
||||
return;
|
||||
}
|
||||
// Register
|
||||
pushRegistrationInServer = await api("sw/register", {
|
||||
endpoint: subscription.endpoint,
|
||||
auth: encode(subscription.getKey("auth")),
|
||||
publickey: encode(subscription.getKey("p256dh")),
|
||||
});
|
||||
},
|
||||
async (err) => {
|
||||
// When subscribe failed
|
||||
// 通知が許可されていなかったとき
|
||||
if (err?.name === "NotAllowedError") {
|
||||
console.info(
|
||||
"User denied the notification permission request."
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// 違うapplicationServerKey (または gcm_sender_id)のサブスクリプションが
|
||||
// 既に存在していることが原因でエラーになった可能性があるので、
|
||||
// そのサブスクリプションを解除しておく
|
||||
// （これは実行されなさそうだけど、おまじない的に古い実装から残してある）
|
||||
await unsubscribe();
|
||||
}), null, null);
|
||||
// 違うapplicationServerKey (または gcm_sender_id)のサブスクリプションが
|
||||
// 既に存在していることが原因でエラーになった可能性があるので、
|
||||
// そのサブスクリプションを解除しておく
|
||||
// （これは実行されなさそうだけど、おまじない的に古い実装から残してある）
|
||||
await unsubscribe();
|
||||
}
|
||||
),
|
||||
null,
|
||||
null
|
||||
);
|
||||
}
|
||||
|
||||
async function unsubscribe() {
|
||||
|
|
@ -105,13 +144,13 @@ async function unsubscribe() {
|
|||
pushRegistrationInServer = undefined;
|
||||
|
||||
if ($i && accounts.length >= 2) {
|
||||
apiWithDialog('sw/unregister', {
|
||||
apiWithDialog("sw/unregister", {
|
||||
i: $i.token,
|
||||
endpoint,
|
||||
});
|
||||
} else {
|
||||
pushSubscription.unsubscribe();
|
||||
apiWithDialog('sw/unregister', {
|
||||
apiWithDialog("sw/unregister", {
|
||||
endpoint,
|
||||
});
|
||||
pushSubscription = null;
|
||||
|
|
@ -127,10 +166,10 @@ function encode(buffer: ArrayBuffer | null) {
|
|||
* @param base64String base64 string
|
||||
*/
|
||||
function urlBase64ToUint8Array(base64String: string): Uint8Array {
|
||||
const padding = '='.repeat((4 - base64String.length % 4) % 4);
|
||||
const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
|
||||
const base64 = (base64String + padding)
|
||||
.replace(/-/g, '+')
|
||||
.replace(/_/g, '/');
|
||||
.replace(/-/g, "+")
|
||||
.replace(/_/g, "/");
|
||||
|
||||
const rawData = window.atob(base64);
|
||||
const outputArray = new Uint8Array(rawData.length);
|
||||
|
|
@ -144,16 +183,16 @@ function urlBase64ToUint8Array(base64String: string): Uint8Array {
|
|||
if (navigator.serviceWorker == null) {
|
||||
// TODO: よしなに？
|
||||
} else {
|
||||
navigator.serviceWorker.ready.then(async swr => {
|
||||
navigator.serviceWorker.ready.then(async (swr) => {
|
||||
registration = swr;
|
||||
|
||||
pushSubscription = await registration.pushManager.getSubscription();
|
||||
|
||||
if (instance.swPublickey && ('PushManager' in window) && $i && $i.token) {
|
||||
if (instance.swPublickey && "PushManager" in window && $i && $i.token) {
|
||||
supported = true;
|
||||
|
||||
if (pushSubscription) {
|
||||
const res = await api('sw/show-registration', {
|
||||
const res = await api("sw/show-registration", {
|
||||
endpoint: pushSubscription.endpoint,
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,27 +1,31 @@
|
|||
<template>
|
||||
<button
|
||||
v-if="canRenote && $store.state.seperateRenoteQuote"
|
||||
v-tooltip.noDelay.bottom="i18n.ts.quote"
|
||||
class="eddddedb _button"
|
||||
@click="quote()"
|
||||
>
|
||||
<i class="ph-quotes ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
v-if="canRenote && $store.state.seperateRenoteQuote"
|
||||
v-tooltip.noDelay.bottom="i18n.ts.quote"
|
||||
class="eddddedb _button"
|
||||
@click="quote()"
|
||||
>
|
||||
<i class="ph-quotes ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import type { Note } from 'calckey-js/built/entities';
|
||||
import { pleaseLogin } from '@/scripts/please-login';
|
||||
import * as os from '@/os';
|
||||
import { $i } from '@/account';
|
||||
import { i18n } from '@/i18n';
|
||||
import { computed } from "vue";
|
||||
import type { Note } from "calckey-js/built/entities";
|
||||
import { pleaseLogin } from "@/scripts/please-login";
|
||||
import * as os from "@/os";
|
||||
import { $i } from "@/account";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
note: Note;
|
||||
}>();
|
||||
|
||||
const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i?.id);
|
||||
const canRenote = computed(
|
||||
() =>
|
||||
["public", "home"].includes(props.note.visibility) ||
|
||||
props.note.userId === $i?.id
|
||||
);
|
||||
|
||||
function quote(): void {
|
||||
pleaseLogin();
|
||||
|
|
|
|||
|
|
@ -1,58 +1,84 @@
|
|||
<template>
|
||||
<MkModalWindow
|
||||
ref="dialog"
|
||||
:width="400"
|
||||
:height="450"
|
||||
@close="dialog.close()"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<template #header>{{ i18n.ts.reactions }}</template>
|
||||
<MkModalWindow
|
||||
ref="dialog"
|
||||
:width="400"
|
||||
:height="450"
|
||||
@close="dialog.close()"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<template #header>{{ i18n.ts.reactions }}</template>
|
||||
|
||||
<MkSpacer :margin-min="20" :margin-max="28">
|
||||
<div v-if="note" class="_gaps">
|
||||
<div v-if="reactions.length === 0" class="_fullinfo">
|
||||
<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
|
||||
<div>{{ i18n.ts.nothing }}</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div :class="$style.tabs">
|
||||
<button v-for="reaction in reactions" :key="reaction" :class="[$style.tab, { [$style.tabActive]: tab === reaction }]" class="_button" @click="tab = reaction">
|
||||
<MkReactionIcon
|
||||
ref="reactionRef"
|
||||
:reaction="reaction ? reaction.replace(/^:(\w+):$/, ':$1@.:') : reaction"
|
||||
:custom-emojis="note.emojis"
|
||||
/>
|
||||
<span style="margin-left: 4px;">{{ note.reactions[reaction] }}</span>
|
||||
</button>
|
||||
<MkSpacer :margin-min="20" :margin-max="28">
|
||||
<div v-if="note" class="_gaps">
|
||||
<div v-if="reactions.length === 0" class="_fullinfo">
|
||||
<img
|
||||
src="/static-assets/badges/info.png"
|
||||
class="_ghost"
|
||||
alt="Info"
|
||||
/>
|
||||
<div>{{ i18n.ts.nothing }}</div>
|
||||
</div>
|
||||
<MkA v-for="user in users" :key="user.id" :to="userPage(user)">
|
||||
<MkUserCardMini :user="user" :with-chart="false"/>
|
||||
</MkA>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else>
|
||||
<MkLoading/>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</MkModalWindow>
|
||||
<template v-else>
|
||||
<div :class="$style.tabs">
|
||||
<button
|
||||
v-for="reaction in reactions"
|
||||
:key="reaction"
|
||||
:class="[
|
||||
$style.tab,
|
||||
{ [$style.tabActive]: tab === reaction },
|
||||
]"
|
||||
class="_button"
|
||||
@click="tab = reaction"
|
||||
>
|
||||
<MkReactionIcon
|
||||
ref="reactionRef"
|
||||
:reaction="
|
||||
reaction
|
||||
? reaction.replace(
|
||||
/^:(\w+):$/,
|
||||
':$1@.:'
|
||||
)
|
||||
: reaction
|
||||
"
|
||||
:custom-emojis="note.emojis"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{
|
||||
note.reactions[reaction]
|
||||
}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<MkA
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
:to="userPage(user)"
|
||||
>
|
||||
<MkUserCardMini :user="user" :with-chart="false" />
|
||||
</MkA>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else>
|
||||
<MkLoading />
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</MkModalWindow>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, watch } from 'vue';
|
||||
import * as misskey from 'calckey-js';
|
||||
import MkModalWindow from '@/components/MkModalWindow.vue';
|
||||
import MkReactionIcon from '@/components/MkReactionIcon.vue';
|
||||
import MkUserCardMini from '@/components/MkUserCardMini.vue';
|
||||
import { userPage } from '@/filters/user';
|
||||
import { i18n } from '@/i18n';
|
||||
import * as os from '@/os';
|
||||
import { onMounted, watch } from "vue";
|
||||
import * as misskey from "calckey-js";
|
||||
import MkModalWindow from "@/components/MkModalWindow.vue";
|
||||
import MkReactionIcon from "@/components/MkReactionIcon.vue";
|
||||
import MkUserCardMini from "@/components/MkUserCardMini.vue";
|
||||
import { userPage } from "@/filters/user";
|
||||
import { i18n } from "@/i18n";
|
||||
import * as os from "@/os";
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void,
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
noteId: misskey.entities.Note['id'];
|
||||
noteId: misskey.entities.Note["id"];
|
||||
}>();
|
||||
|
||||
const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
|
||||
|
|
@ -63,17 +89,17 @@ let reactions = $ref<string[]>();
|
|||
let users = $ref();
|
||||
|
||||
watch($$(tab), async () => {
|
||||
const res = await os.api('notes/reactions', {
|
||||
const res = await os.api("notes/reactions", {
|
||||
noteId: props.noteId,
|
||||
type: tab,
|
||||
limit: 30,
|
||||
});
|
||||
|
||||
users = res.map(x => x.user);
|
||||
users = res.map((x) => x.user);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
os.api('notes/show', {
|
||||
os.api("notes/show", {
|
||||
noteId: props.noteId,
|
||||
}).then((res) => {
|
||||
reactions = Object.keys(res.reactions);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
<template>
|
||||
<MkEmoji :emoji="reaction" :custom-emojis="customEmojis || []" :is-reaction="true" :normal="true" :no-style="noStyle"/>
|
||||
<MkEmoji
|
||||
:emoji="reaction"
|
||||
:custom-emojis="customEmojis || []"
|
||||
:is-reaction="true"
|
||||
:normal="true"
|
||||
:no-style="noStyle"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import {} from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
reaction: string;
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue