404 lines
11 KiB
Vue
404 lines
11 KiB
Vue
|
<template>
|
||
|
|
<q-dialog
|
||
|
|
persistent
|
||
|
|
v-model="show_dialog"
|
||
|
|
@show="onShow"
|
||
|
|
@before-hide="resetData"
|
||
|
|
>
|
||
|
|
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 70vw">
|
||
|
|
<q-form @submit="onSubmit">
|
||
|
|
<q-card-section class="q-ma-none q-pa-sm">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-auto text-h6">
|
||
|
|
{{ $t("subtitle") }}
|
||
|
|
</div>
|
||
|
|
<q-space />
|
||
|
|
<div>
|
||
|
|
<q-btn
|
||
|
|
:loading="loading"
|
||
|
|
flat
|
||
|
|
round
|
||
|
|
icon="close"
|
||
|
|
color="red"
|
||
|
|
v-close-popup
|
||
|
|
>
|
||
|
|
<q-tooltip>
|
||
|
|
{{ $t("close") }}
|
||
|
|
</q-tooltip>
|
||
|
|
</q-btn>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-card-section>
|
||
|
|
|
||
|
|
<q-separator />
|
||
|
|
|
||
|
|
<q-card-section style="max-height: 75vh; width: 70vw" class="scroll">
|
||
|
|
<q-list>
|
||
|
|
<q-item>
|
||
|
|
<q-item-section>
|
||
|
|
<q-input
|
||
|
|
type="number"
|
||
|
|
v-model="subtitle.width"
|
||
|
|
:label="$t('width')"
|
||
|
|
/>
|
||
|
|
</q-item-section>
|
||
|
|
<q-item-section>
|
||
|
|
<q-input
|
||
|
|
type="number"
|
||
|
|
v-model="subtitle.height"
|
||
|
|
:label="$t('height')"
|
||
|
|
/>
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item>
|
||
|
|
<q-item-section>
|
||
|
|
<q-input
|
||
|
|
type="number"
|
||
|
|
v-model="subtitle.x"
|
||
|
|
:label="$t('x pos')"
|
||
|
|
/>
|
||
|
|
</q-item-section>
|
||
|
|
<q-item-section>
|
||
|
|
<q-input
|
||
|
|
type="number"
|
||
|
|
v-model="subtitle.y"
|
||
|
|
:label="$t('y pos')"
|
||
|
|
/>
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item>
|
||
|
|
<q-item-section>
|
||
|
|
<q-checkbox :label="$t('roll switch')" v-model="subtitle.on" />
|
||
|
|
</q-item-section>
|
||
|
|
<q-item-section>
|
||
|
|
<q-checkbox
|
||
|
|
:label="$t('move forward')"
|
||
|
|
v-model="subtitle.x_move_forward"
|
||
|
|
/>
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-separator inset />
|
||
|
|
<q-item>
|
||
|
|
<q-item-section>
|
||
|
|
<q-input
|
||
|
|
filled
|
||
|
|
:label="$t('background color')"
|
||
|
|
v-model="subtitle.background"
|
||
|
|
:rules="['anyColor']"
|
||
|
|
hint=""
|
||
|
|
>
|
||
|
|
<template v-slot:append>
|
||
|
|
<q-icon name="colorize" class="cursor-pointer">
|
||
|
|
<q-popup-proxy
|
||
|
|
transition-show="scale"
|
||
|
|
transition-hide="scale"
|
||
|
|
>
|
||
|
|
<q-color v-model="subtitle.background" />
|
||
|
|
</q-popup-proxy>
|
||
|
|
</q-icon>
|
||
|
|
</template>
|
||
|
|
</q-input>
|
||
|
|
</q-item-section>
|
||
|
|
<q-item-section>
|
||
|
|
<q-checkbox
|
||
|
|
:label="$t('background transparent')"
|
||
|
|
v-model="subtitle.bakcground_transparent"
|
||
|
|
/>
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-separator inset />
|
||
|
|
<q-item>
|
||
|
|
<q-item-section>
|
||
|
|
<q-select
|
||
|
|
:label="$t('speed')"
|
||
|
|
v-model="subtitle.x_speed"
|
||
|
|
:options="[1, 2, 3, 4, 5, 6, 7, 8, 9]"
|
||
|
|
></q-select>
|
||
|
|
</q-item-section>
|
||
|
|
<q-item-section></q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-separator inset />
|
||
|
|
|
||
|
|
<q-item style="height: 45vh">
|
||
|
|
<div class="col">
|
||
|
|
<div class="row">
|
||
|
|
<div ref="wysiwyg_toolbar" class="fit ck-reset_all"></div>
|
||
|
|
</div>
|
||
|
|
<div class="row" style="height: 45vh">
|
||
|
|
<div ref="wysiwyg_editor"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-item>
|
||
|
|
</q-list>
|
||
|
|
</q-card-section>
|
||
|
|
|
||
|
|
<q-separator />
|
||
|
|
|
||
|
|
<q-card-actions align="right">
|
||
|
|
<q-btn
|
||
|
|
:loading="loading"
|
||
|
|
flat
|
||
|
|
:label="$t('Cancel')"
|
||
|
|
color="primary"
|
||
|
|
v-close-popup
|
||
|
|
/>
|
||
|
|
<q-btn
|
||
|
|
ref="accept"
|
||
|
|
flat
|
||
|
|
:label="$t('Accept')"
|
||
|
|
:loading="loading"
|
||
|
|
type="submit"
|
||
|
|
color="primary"
|
||
|
|
/>
|
||
|
|
</q-card-actions>
|
||
|
|
</q-form>
|
||
|
|
</q-card>
|
||
|
|
</q-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* --------- EDITOR STYLES ---------------------------------------------------------------------------------------- */
|
||
|
|
|
||
|
|
.editor__editable,
|
||
|
|
/* Classic build. */
|
||
|
|
main .ck-editor[role='application'] .ck.ck-content,
|
||
|
|
/* Decoupled document build. */
|
||
|
|
.ck.editor__editable[role='textbox'],
|
||
|
|
.ck.ck-editor__editable[role='textbox'],
|
||
|
|
/* Inline & Balloon build. */
|
||
|
|
.ck.editor[role='textbox'] {
|
||
|
|
width: 100%;
|
||
|
|
background: #fff;
|
||
|
|
font-size: 1em;
|
||
|
|
line-height: 1.6em;
|
||
|
|
min-height: var(--ck-sample-editor-min-height);
|
||
|
|
padding: 1.5em 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
main .ck-editor[role="application"] {
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ck.ck-editor__editable {
|
||
|
|
background: #fff;
|
||
|
|
border: 1px solid hsl(0, 0%, 70%);
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Because of sidebar `position: relative`, Edge is overriding the outline of a focused editor. */
|
||
|
|
.ck.ck-editor__editable {
|
||
|
|
position: relative;
|
||
|
|
z-index: var(--ck-sample-editor-z-index);
|
||
|
|
}
|
||
|
|
|
||
|
|
.editor-container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import {
|
||
|
|
defineComponent,
|
||
|
|
ref,
|
||
|
|
Ref,
|
||
|
|
watch,
|
||
|
|
computed,
|
||
|
|
onMounted,
|
||
|
|
onBeforeUnmount,
|
||
|
|
} from "vue";
|
||
|
|
import { useStore } from "src/store";
|
||
|
|
import { useQuasar } from "quasar";
|
||
|
|
import { useI18n } from "vue-i18n";
|
||
|
|
import GlobalData from "src/common/GlobalData";
|
||
|
|
import SubtitleEntity from "src/entities/SubtitleEntity";
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: "ComponentSubtitleDialog",
|
||
|
|
setup() {
|
||
|
|
let $store = useStore();
|
||
|
|
let $q = useQuasar();
|
||
|
|
let $t = useI18n();
|
||
|
|
|
||
|
|
let show_dialog = ref(false);
|
||
|
|
let loading = ref(false);
|
||
|
|
let subtitle = ref(new SubtitleEntity());
|
||
|
|
let wysiwyg_editor: Ref<HTMLElement | null> = ref(null);
|
||
|
|
let wysiwyg_toolbar: Ref<HTMLElement | null> = ref(null);
|
||
|
|
let editor: any = null;
|
||
|
|
|
||
|
|
const createEditor = () => {
|
||
|
|
if (!wysiwyg_editor.value) {
|
||
|
|
throw "wysiwyg_editor is null";
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
(window as any).DecoupledDocumentEditor.create(wysiwyg_editor.value, {
|
||
|
|
fontSize: {
|
||
|
|
options: [
|
||
|
|
9,
|
||
|
|
11,
|
||
|
|
13,
|
||
|
|
"default",
|
||
|
|
17,
|
||
|
|
19,
|
||
|
|
21,
|
||
|
|
25,
|
||
|
|
29,
|
||
|
|
31,
|
||
|
|
35,
|
||
|
|
39,
|
||
|
|
41,
|
||
|
|
45,
|
||
|
|
49,
|
||
|
|
51,
|
||
|
|
55,
|
||
|
|
59,
|
||
|
|
61,
|
||
|
|
69,
|
||
|
|
71,
|
||
|
|
79,
|
||
|
|
89,
|
||
|
|
99,
|
||
|
|
109,
|
||
|
|
],
|
||
|
|
},
|
||
|
|
toolbar: {
|
||
|
|
items: [
|
||
|
|
"alignment",
|
||
|
|
"|",
|
||
|
|
"fontSize",
|
||
|
|
"fontColor",
|
||
|
|
"fontBackgroundColor",
|
||
|
|
"|",
|
||
|
|
"bold",
|
||
|
|
"italic",
|
||
|
|
"underline",
|
||
|
|
"strikethrough",
|
||
|
|
"|",
|
||
|
|
"numberedList",
|
||
|
|
"bulletedList",
|
||
|
|
"todoList",
|
||
|
|
"|",
|
||
|
|
"blockQuote",
|
||
|
|
"|",
|
||
|
|
"undo",
|
||
|
|
"redo",
|
||
|
|
],
|
||
|
|
},
|
||
|
|
language: "zh-cn",
|
||
|
|
licenseKey: "",
|
||
|
|
})
|
||
|
|
.then((_editor: any) => {
|
||
|
|
editor = _editor;
|
||
|
|
|
||
|
|
wysiwyg_toolbar.value?.appendChild(editor.ui.view.toolbar.element);
|
||
|
|
document.querySelector(".ck-toolbar")?.classList.add("ck-reset_all");
|
||
|
|
})
|
||
|
|
.catch((error: any) => {
|
||
|
|
console.error("Oops, something went wrong!");
|
||
|
|
console.error(
|
||
|
|
"Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:"
|
||
|
|
);
|
||
|
|
console.warn("Build id: t0wgz4abajwu-875d6cqqao7");
|
||
|
|
console.error(error);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return {
|
||
|
|
show_dialog,
|
||
|
|
loading,
|
||
|
|
subtitle,
|
||
|
|
wysiwyg_editor,
|
||
|
|
wysiwyg_toolbar,
|
||
|
|
async showDialog() {
|
||
|
|
show_dialog.value = true;
|
||
|
|
loading.value = true;
|
||
|
|
|
||
|
|
try {
|
||
|
|
let response = await GlobalData.getInstance()
|
||
|
|
.getCurrentClient()
|
||
|
|
?.getSubtitle();
|
||
|
|
if (response) {
|
||
|
|
subtitle.value = response.subtitle;
|
||
|
|
createEditor();
|
||
|
|
}
|
||
|
|
loading.value = false;
|
||
|
|
} catch (e) {
|
||
|
|
console.log(e);
|
||
|
|
show_dialog.value = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
if (editor) {
|
||
|
|
editor.ui.view.toolbar.isCompact = false;
|
||
|
|
editor.ui.view.toolbar.maxWidth = "100%";
|
||
|
|
|
||
|
|
document.querySelectorAll(".ck-dropdown__panel").forEach((item) => {
|
||
|
|
((item as HTMLElement)?.style as any).overflow = "auto";
|
||
|
|
((item as HTMLElement)?.style as any).height = "45vh";
|
||
|
|
});
|
||
|
|
|
||
|
|
editor.setData(subtitle.value.text);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
resetData() {
|
||
|
|
loading.value = false;
|
||
|
|
},
|
||
|
|
|
||
|
|
async onSubmit() {
|
||
|
|
loading.value = true;
|
||
|
|
try {
|
||
|
|
if (!editor) {
|
||
|
|
$q.notify({
|
||
|
|
color: "negative",
|
||
|
|
icon: "warning",
|
||
|
|
message: $t.t("editor error") + "!",
|
||
|
|
position: "top",
|
||
|
|
timeout: 1000,
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
subtitle.value.text = editor.getData();
|
||
|
|
subtitle.value.width = parseInt(subtitle.value.width.toString());
|
||
|
|
subtitle.value.height = parseInt(subtitle.value.height.toString());
|
||
|
|
subtitle.value.x = parseInt(subtitle.value.x.toString());
|
||
|
|
subtitle.value.y = parseInt(subtitle.value.y.toString());
|
||
|
|
if (
|
||
|
|
isNaN(subtitle.value.width) ||
|
||
|
|
isNaN(subtitle.value.height) ||
|
||
|
|
isNaN(subtitle.value.x) ||
|
||
|
|
isNaN(subtitle.value.y)
|
||
|
|
) {
|
||
|
|
$q.notify({
|
||
|
|
color: "negative",
|
||
|
|
icon: "warning",
|
||
|
|
message: $t.t("input data error") + "!",
|
||
|
|
position: "top",
|
||
|
|
timeout: 1000,
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
GlobalData.getInstance()
|
||
|
|
.getCurrentClient()
|
||
|
|
?.setSubtitle(subtitle.value);
|
||
|
|
$q.notify({
|
||
|
|
color: "positive",
|
||
|
|
icon: "done",
|
||
|
|
message: $t.t("set subtitle success") + "!",
|
||
|
|
position: "top",
|
||
|
|
timeout: 1000,
|
||
|
|
});
|
||
|
|
show_dialog.value = false;
|
||
|
|
} catch {}
|
||
|
|
loading.value = false;
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|