@cairn214/fluent-editor
Version:
A rich text editor based on Quill 2.0, which extends rich modules and formats on the basis of Quill. It's powerful and out-of-the-box.
124 lines (123 loc) • 4.48 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Quill = require("quill");
const selection = require("quill/core/selection");
const method = require("../../utils/method.cjs.js");
const file = require("../formats/file.cjs.js");
const Delta = Quill.imports.delta;
class FileBar {
constructor(quill, target) {
this.quill = quill;
this.file = target;
const fileBlot = Quill.find(target);
const index = this.quill.getIndex(fileBlot);
const [fileItem, offset] = this.quill.scroll.descendant(file.default, index);
const length = fileItem && fileItem.length();
this.fileRange = new selection.Range(index - offset, length);
const timestamp = Number(this.file.dataset.lastModified);
const _lastModifiedDate = this.formatDate(timestamp);
this.template = [
// `<a class="ql-last-modified-date" href="${this.file.href}" target="_blank">${this.file.href}</a>`,
// '<span class="ql-split"></span>',
// `<a class="ql-file-preview"><i class="icon-preview"></i></a>`,
`<a class="ql-file-download"><i class="icon-download"></i></a>`,
'<a class="ql-file-delete"><i class="icon-delete"></i></a>'
].join("");
this.createFileBar();
}
createFileBar() {
this.domNode = document.createElement("div");
this.domNode.className = "ql-file-bar";
this.domNode.innerHTML = this.template;
const filePreview = this.domNode.querySelector("a.ql-file-preview");
if (filePreview) {
filePreview.addEventListener("click", (event) => {
this.operateFile(event, "view");
});
}
const fileDownload = this.domNode.querySelector("a.ql-file-download");
if (fileDownload) {
fileDownload.addEventListener("click", (event) => {
this.operateFile(event, "download");
});
}
const fileDelete = this.domNode.querySelector("a.ql-file-delete");
if (fileDelete) {
fileDelete.addEventListener("click", (event) => {
this.operateFile(event, "delete");
const delta = new Delta().retain(this.fileRange.index).delete(this.fileRange.length);
this.quill.updateContents(delta, Quill.sources.USER);
this.quill.setSelection(this.fileRange.index);
});
}
this.setPosition();
this.quill.root.parentNode.appendChild(this.domNode);
}
destroy() {
if (this.domNode) {
this.domNode.remove();
this.domNode = null;
this.file = null;
}
}
operateFile(event, operate) {
event.preventDefault();
const fileId = this.file.dataset.id || "";
const fileDownloadUrl = this.file.href;
if (fileId) {
this.quill.emitter.emit("file-change", {
operation: operate,
data: { fileId, fileDownloadUrl }
});
}
if (operate === "download") {
const a = document.createElement("a");
a.href = fileDownloadUrl;
a.target = "_blank";
a.id = "exppub";
document.body.appendChild(a);
const alink = document.getElementById("exppub");
alink.click();
alink.parentNode.removeChild(a);
}
this.destroy();
}
setPosition() {
if (this.domNode && this.file) {
const parent = this.quill.root.parentNode;
const child = this.file.querySelector("span");
const containerRect = parent.getBoundingClientRect();
const fileRect = child.getBoundingClientRect();
this.css(this.domNode, {
left: `${fileRect.left - containerRect.left}px`,
top: `${fileRect.top - containerRect.top + 10}px`
});
}
}
css(domNode, rules) {
if (typeof rules === "object") {
for (const prop in rules) {
if (prop) {
if (Array.isArray(rules[prop])) {
rules[prop].forEach((val) => {
domNode.style[prop] = val;
});
} else {
domNode.style[prop] = rules[prop];
}
}
}
}
}
formatDate(timestamp) {
const date = new Date(timestamp);
const year = date.getFullYear();
const month = method.unshiftString(`${date.getMonth() + 1}`, 2, "0");
const day = method.unshiftString(`${date.getDate()}`, 2, "0");
const hour = method.unshiftString(`${date.getHours()}`, 2, "0");
const minute = method.unshiftString(`${date.getMinutes()}`, 2, "0");
return Number.isNaN(year) ? "--" : `${year}/${month}/${day} ${hour}:${minute}`;
}
}
exports.default = FileBar;
//# sourceMappingURL=file-bar.cjs.js.map