calckey/packages/client/src/components/MkMediaCaption.vue

328 lines
5.7 KiB
Vue
Raw Normal View History

<template>
2023-04-08 00:01:42 +00:00
<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>
2023-04-08 00:01:42 +00:00
<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>
2023-04-08 00:01:42 +00:00
</MkModal>
</template>
<script lang="ts">
2023-04-08 00:01:42 +00:00
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: {
MkModal,
MkButton,
},
props: {
image: {
type: Object,
required: true,
},
title: {
type: String,
2022-08-08 22:40:06 +00:00
required: false,
},
input: {
2022-08-08 22:40:06 +00:00
required: true,
},
showOkButton: {
type: Boolean,
2022-08-08 22:40:06 +00:00
default: true,
},
showCaptionButton: {
type: Boolean,
2022-10-27 22:07:36 +00:00
default: true,
},
showCancelButton: {
type: Boolean,
2022-08-08 22:40:06 +00:00
default: true,
},
cancelableByBgClick: {
type: Boolean,
2022-08-08 22:40:06 +00:00
default: true,
},
},
2023-04-08 00:01:42 +00:00
emits: ["done", "closed"],
data() {
return {
2022-11-11 08:41:34 +00:00
inputValue: this.input.default ? this.input.default : null,
i18n,
};
},
2021-11-11 17:02:25 +00:00
computed: {
remainingLength(): number {
const maxCaptionLength = instance.maxCaptionTextLength ?? 512;
if (typeof this.inputValue !== "string") return maxCaptionLength;
return maxCaptionLength - length(this.inputValue);
2023-04-08 00:01:42 +00:00
},
2021-11-11 17:02:25 +00:00
},
mounted() {
2023-04-08 00:01:42 +00:00
document.addEventListener("keydown", this.onKeydown);
},
beforeUnmount() {
2023-04-08 00:01:42 +00:00
document.removeEventListener("keydown", this.onKeydown);
},
methods: {
bytes,
number,
done(canceled, result?) {
2023-04-08 00:01:42 +00:00
this.$emit("done", { canceled, result });
this.$refs.modal.close();
},
async ok() {
if (!this.showOkButton) return;
const result = this.inputValue;
this.done(false, result);
},
cancel() {
this.done(true);
},
onBgClick() {
if (this.cancelableByBgClick) {
this.cancel();
}
},
onKeydown(evt) {
2023-04-08 00:01:42 +00:00
if (evt.which === 27) {
// ESC
this.cancel();
}
},
onInputKeydown(evt) {
2023-04-08 00:01:42 +00:00
if (evt.which === 13) {
// Enter
if (evt.ctrlKey) {
evt.preventDefault();
evt.stopPropagation();
this.ok();
}
}
2022-08-08 22:40:06 +00:00
},
2022-08-09 00:51:18 +00:00
caption() {
2023-04-08 00:01:42 +00:00
const img = document.getElementById(
"imgtocaption"
) as HTMLImageElement;
const ta = document.getElementById(
"captioninput"
) as HTMLTextAreaElement;
os.api("drive/files/caption-image", {
2022-10-27 22:01:38 +00:00
url: img.src,
2023-04-08 00:01:42 +00:00
}).then((text) => {
insertTextAtCursor(ta, text.slice(0, 512 - ta.value.length));
2022-08-09 00:51:18 +00:00
});
2022-08-08 22:40:06 +00:00
},
},
});
</script>
<style lang="scss" scoped>
.container {
display: flex;
width: 100%;
height: 100%;
flex-direction: row;
2022-03-09 13:33:07 +00:00
overflow: scroll;
position: fixed;
left: 0;
top: 0;
}
@media (max-width: 850px) {
.container {
flex-direction: column;
}
.top-caption {
padding-bottom: 8px;
}
}
.fullwidth {
width: 100%;
margin: auto;
}
.mk-dialog {
position: relative;
padding: 32px;
min-width: 320px;
max-width: 480px;
box-sizing: border-box;
text-align: center;
background: var(--panel);
border-radius: var(--radius);
margin: auto;
> header {
margin: 0 0 8px 0;
position: relative;
> .title {
font-weight: bold;
font-size: 20px;
}
> .text-count {
opacity: 0.7;
position: absolute;
right: 0;
}
}
> .buttons {
margin-top: 16px;
> * {
margin: 0 8px;
}
}
> textarea {
display: block;
box-sizing: border-box;
padding: 0 24px;
margin: 0;
width: 100%;
font-size: 16px;
border: none;
border-radius: 0;
background: transparent;
color: var(--fg);
font-family: inherit;
max-width: 100%;
min-width: 100%;
min-height: 90px;
2021-10-02 17:46:58 +00:00
&:focus-visible {
outline: none;
}
&:disabled {
opacity: 0.5;
}
}
}
.hdrwpsaf {
display: flex;
flex-direction: column;
height: 100%;
> header,
> footer {
align-self: center;
display: inline-block;
padding: 6px 9px;
font-size: 90%;
background: rgba(0, 0, 0, 0.5);
border-radius: 6px;
color: #fff;
}
> header {
margin-bottom: 8px;
opacity: 0.9;
}
> img {
display: block;
flex: 1;
min-height: 0;
object-fit: contain;
width: 100%;
cursor: zoom-out;
image-orientation: from-image;
}
> footer {
margin-top: 8px;
opacity: 0.8;
> span + span {
margin-left: 0.5em;
padding-left: 0.5em;
border-left: solid 1px rgba(255, 255, 255, 0.5);
}
}
}
</style>