refactor: rewrite MkMediaCaption
This commit is contained in:
parent
95b91c6396
commit
f3b189a70c
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
|
<MkModal ref="modal" @click="done(true)" @closed="emit('closed')">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="fullwidth top-caption">
|
<div class="fullwidth top-caption">
|
||||||
<div class="mk-dialog">
|
<div class="mk-dialog">
|
||||||
|
@ -48,9 +48,9 @@
|
||||||
<img
|
<img
|
||||||
id="imgtocaption"
|
id="imgtocaption"
|
||||||
:src="image.url"
|
:src="image.url"
|
||||||
:alt="image.comment"
|
:alt="image.comment || undefined"
|
||||||
:title="image.comment"
|
:title="image.comment || undefined"
|
||||||
@click="$refs.modal.close()"
|
@click="modal!.close()"
|
||||||
/>
|
/>
|
||||||
<footer>
|
<footer>
|
||||||
<span>{{ image.type }}</span>
|
<span>{{ image.type }}</span>
|
||||||
|
@ -65,8 +65,8 @@
|
||||||
</MkModal>
|
</MkModal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from "vue";
|
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
|
||||||
import insertTextAtCursor from "insert-text-at-cursor";
|
import insertTextAtCursor from "insert-text-at-cursor";
|
||||||
import { length } from "stringz";
|
import { length } from "stringz";
|
||||||
import * as os from "@/os";
|
import * as os from "@/os";
|
||||||
|
@ -76,122 +76,100 @@ import bytes from "@/filters/bytes";
|
||||||
import number from "@/filters/number";
|
import number from "@/filters/number";
|
||||||
import { i18n } from "@/i18n";
|
import { i18n } from "@/i18n";
|
||||||
import { instance } from "@/instance";
|
import { instance } from "@/instance";
|
||||||
|
import type { entities } from "firefish-js";
|
||||||
|
|
||||||
export default defineComponent({
|
const props = withDefaults(
|
||||||
components: {
|
defineProps<{
|
||||||
MkModal,
|
image: entities.DriveFile;
|
||||||
MkButton,
|
|
||||||
},
|
|
||||||
|
|
||||||
props: {
|
|
||||||
image: {
|
|
||||||
type: Object,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
},
|
|
||||||
input: {
|
input: {
|
||||||
required: true,
|
placeholder: string;
|
||||||
},
|
default: string;
|
||||||
showOkButton: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
showCaptionButton: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
showCancelButton: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
cancelableByBgClick: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ["done", "closed"],
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
inputValue: this.input.default ? this.input.default : null,
|
|
||||||
i18n,
|
|
||||||
};
|
};
|
||||||
|
title?: string;
|
||||||
|
showOkButton?: boolean;
|
||||||
|
showCaptionButton?: boolean;
|
||||||
|
showCancelButton?: boolean;
|
||||||
|
cancelableByBgClick?: boolean;
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
showOkButton: true,
|
||||||
|
showCaptionButton: true,
|
||||||
|
showCancelButton: true,
|
||||||
|
cancelableByBgClick: true,
|
||||||
},
|
},
|
||||||
|
);
|
||||||
|
|
||||||
computed: {
|
const emit = defineEmits<{
|
||||||
remainingLength(): number {
|
done: [v: { canceled: boolean; result?: string | null }];
|
||||||
const maxCaptionLength = instance.maxCaptionTextLength ?? 512;
|
closed: [];
|
||||||
if (typeof this.inputValue !== "string") return maxCaptionLength;
|
}>();
|
||||||
return maxCaptionLength - length(this.inputValue);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
const modal = ref<InstanceType<typeof MkModal> | null>(null);
|
||||||
document.addEventListener("keydown", this.onKeydown);
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeUnmount() {
|
const inputValue = ref(props.input.default ? props.input.default : null);
|
||||||
document.removeEventListener("keydown", this.onKeydown);
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
const remainingLength = computed(() => {
|
||||||
bytes,
|
const maxCaptionLength = instance.maxCaptionTextLength ?? 512;
|
||||||
number,
|
if (typeof inputValue.value !== "string") return maxCaptionLength;
|
||||||
|
return maxCaptionLength - length(inputValue.value);
|
||||||
|
});
|
||||||
|
|
||||||
done(canceled, result?) {
|
function done(canceled: boolean, result?: string | null) {
|
||||||
this.$emit("done", { canceled, result });
|
emit("done", { canceled, result });
|
||||||
this.$refs.modal.close();
|
modal.value!.close();
|
||||||
},
|
}
|
||||||
|
|
||||||
async ok() {
|
async function ok() {
|
||||||
if (!this.showOkButton) return;
|
if (!props.showOkButton) return;
|
||||||
|
|
||||||
const result = this.inputValue;
|
const result = inputValue.value;
|
||||||
this.done(false, result);
|
done(false, result);
|
||||||
},
|
}
|
||||||
|
|
||||||
cancel() {
|
function cancel() {
|
||||||
this.done(true);
|
done(true);
|
||||||
},
|
}
|
||||||
|
|
||||||
onBgClick() {
|
// function onBgClick() {
|
||||||
if (this.cancelableByBgClick) {
|
// if (props.cancelableByBgClick) {
|
||||||
this.cancel();
|
// cancel();
|
||||||
}
|
// }
|
||||||
},
|
// }
|
||||||
|
|
||||||
onKeydown(evt) {
|
function onKeydown(evt) {
|
||||||
if (evt.which === 27) {
|
if (evt.which === 27) {
|
||||||
// ESC
|
// ESC
|
||||||
this.cancel();
|
cancel();
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
|
||||||
onInputKeydown(evt) {
|
function onInputKeydown(evt) {
|
||||||
if (evt.which === 13) {
|
if (evt.which === 13) {
|
||||||
// Enter
|
// Enter
|
||||||
if (evt.ctrlKey) {
|
if (evt.ctrlKey) {
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
evt.stopPropagation();
|
evt.stopPropagation();
|
||||||
this.ok();
|
ok();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
|
||||||
caption() {
|
function caption() {
|
||||||
const img = document.getElementById("imgtocaption") as HTMLImageElement;
|
const img = document.getElementById("imgtocaption") as HTMLImageElement;
|
||||||
const ta = document.getElementById("captioninput") as HTMLTextAreaElement;
|
const ta = document.getElementById("captioninput") as HTMLTextAreaElement;
|
||||||
os.api("drive/files/caption-image", {
|
os.api("drive/files/caption-image", {
|
||||||
url: img.src,
|
url: img.src,
|
||||||
}).then((text) => {
|
}).then((text) => {
|
||||||
insertTextAtCursor(ta, text.slice(0, 512 - ta.value.length));
|
insertTextAtCursor(ta, text.slice(0, 512 - ta.value.length));
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
},
|
|
||||||
|
onMounted(() => {
|
||||||
|
document.addEventListener("keydown", onKeydown);
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
document.removeEventListener("keydown", onKeydown);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -279,6 +279,12 @@ export type Endpoints = {
|
||||||
res: DriveFile[];
|
res: DriveFile[];
|
||||||
};
|
};
|
||||||
"drive/files/attached-notes": { req: TODO; res: Note[] };
|
"drive/files/attached-notes": { req: TODO; res: Note[] };
|
||||||
|
"drive/files/caption-image": {
|
||||||
|
req: {
|
||||||
|
url: string,
|
||||||
|
}
|
||||||
|
res: string,
|
||||||
|
};
|
||||||
"drive/files/check-existence": { req: TODO; res: TODO };
|
"drive/files/check-existence": { req: TODO; res: TODO };
|
||||||
"drive/files/create": { req: TODO; res: TODO };
|
"drive/files/create": { req: TODO; res: TODO };
|
||||||
"drive/files/delete": { req: { fileId: DriveFile["id"] }; res: null };
|
"drive/files/delete": { req: { fileId: DriveFile["id"] }; res: null };
|
||||||
|
|
Loading…
Reference in New Issue