filebrowser/frontend/src/views/files/Editor.vue

125 lines
2.8 KiB
Vue
Raw Normal View History

2018-02-01 12:17:04 +00:00
<template>
2023-09-04 02:21:25 +00:00
<div id="editor-container">
2020-07-04 03:11:51 +00:00
<form id="editor"></form>
</div>
2018-02-01 12:17:04 +00:00
</template>
<script>
2021-03-21 11:51:58 +00:00
import { mapState } from "vuex";
import { files as api } from "@/api";
import { theme } from "@/utils/constants";
import buttons from "@/utils/buttons";
import url from "@/utils/url";
2018-02-01 12:17:04 +00:00
2021-03-21 11:51:58 +00:00
import ace from "ace-builds/src-min-noconflict/ace.js";
import modelist from "ace-builds/src-min-noconflict/ext-modelist.js";
import "ace-builds/webpack-resolver";
2021-02-25 18:37:07 +00:00
2021-03-21 11:51:58 +00:00
import HeaderBar from "@/components/header/HeaderBar";
import Action from "@/components/header/Action";
import Breadcrumbs from "@/components/Breadcrumbs";
2018-02-01 12:17:04 +00:00
export default {
2021-03-21 11:51:58 +00:00
name: "editor",
2021-02-25 18:37:07 +00:00
components: {
HeaderBar,
2021-03-03 12:25:59 +00:00
Action,
2021-03-21 11:51:58 +00:00
Breadcrumbs,
2021-02-25 18:37:07 +00:00
},
2018-02-01 12:17:04 +00:00
data: function () {
2021-03-21 11:51:58 +00:00
return {};
2018-02-01 12:17:04 +00:00
},
2020-07-04 03:11:51 +00:00
computed: {
2023-09-04 02:21:25 +00:00
...mapState(["req", "user","currentView"]),
2021-03-21 11:51:58 +00:00
breadcrumbs() {
let parts = this.$route.path.split("/");
2020-07-04 03:11:51 +00:00
2021-03-21 11:51:58 +00:00
if (parts[0] === "") {
parts.shift();
2020-07-04 03:11:51 +00:00
}
2021-03-21 11:51:58 +00:00
if (parts[parts.length - 1] === "") {
parts.pop();
2020-07-04 03:11:51 +00:00
}
2021-03-21 11:51:58 +00:00
let breadcrumbs = [];
2020-07-04 03:11:51 +00:00
for (let i = 0; i < parts.length; i++) {
2021-03-21 11:51:58 +00:00
breadcrumbs.push({ name: decodeURIComponent(parts[i]) });
2020-07-04 03:11:51 +00:00
}
2021-03-21 11:51:58 +00:00
breadcrumbs.shift();
2020-07-04 03:11:51 +00:00
if (breadcrumbs.length > 3) {
while (breadcrumbs.length !== 4) {
2021-03-21 11:51:58 +00:00
breadcrumbs.shift();
2020-07-04 03:11:51 +00:00
}
2021-03-21 11:51:58 +00:00
breadcrumbs[0].name = "...";
2020-07-04 03:11:51 +00:00
}
2021-03-21 11:51:58 +00:00
return breadcrumbs;
},
2020-07-04 03:11:51 +00:00
},
2021-03-21 11:51:58 +00:00
created() {
window.addEventListener("keydown", this.keyEvent);
2018-02-01 12:17:04 +00:00
},
2021-03-21 11:51:58 +00:00
beforeDestroy() {
window.removeEventListener("keydown", this.keyEvent);
this.editor.destroy();
2018-02-01 12:17:04 +00:00
},
2021-02-25 18:37:07 +00:00
mounted: function () {
2021-03-21 11:51:58 +00:00
const fileContent = this.req.content || "";
2018-02-01 12:17:04 +00:00
2021-03-21 11:51:58 +00:00
this.editor = ace.edit("editor", {
value: fileContent,
showPrintMargin: false,
2021-03-21 11:51:58 +00:00
readOnly: this.req.type === "textImmutable",
theme: "ace/theme/chrome",
2019-11-04 07:23:48 +00:00
mode: modelist.getModeForPath(this.req.name).mode,
2021-03-21 11:51:58 +00:00
wrap: true,
});
2020-01-02 00:48:48 +00:00
2021-03-21 11:51:58 +00:00
if (theme == "dark") {
2020-01-02 00:48:48 +00:00
this.editor.setTheme("ace/theme/twilight");
}
2018-02-01 12:17:04 +00:00
},
methods: {
2021-03-21 11:51:58 +00:00
back() {
let uri = url.removeLastDir(this.$route.path) + "/";
this.$router.push({ path: uri });
2020-07-04 03:11:51 +00:00
},
2021-03-21 11:51:58 +00:00
keyEvent(event) {
2018-02-01 12:17:04 +00:00
if (!event.ctrlKey && !event.metaKey) {
2021-03-21 11:51:58 +00:00
return;
2018-02-01 12:17:04 +00:00
}
2021-03-21 11:51:58 +00:00
if (String.fromCharCode(event.which).toLowerCase() !== "s") {
return;
2018-02-01 12:17:04 +00:00
}
2021-03-21 11:51:58 +00:00
event.preventDefault();
this.save();
2018-02-01 12:17:04 +00:00
},
2021-03-21 11:51:58 +00:00
async save() {
const button = "save";
buttons.loading("save");
try {
2021-03-21 11:51:58 +00:00
await api.put(this.$route.path, this.editor.getValue());
buttons.success(button);
} catch (e) {
2021-03-21 11:51:58 +00:00
buttons.done(button);
this.$showError(e);
2018-02-01 12:17:04 +00:00
}
2021-02-25 18:37:07 +00:00
},
2021-03-21 11:51:58 +00:00
close() {
this.$store.commit("updateRequest", {});
2021-03-01 16:12:17 +00:00
2021-03-21 11:51:58 +00:00
let uri = url.removeLastDir(this.$route.path) + "/";
this.$router.push({ path: uri });
},
},
};
2018-02-01 12:17:04 +00:00
</script>