2020-01-14 04:48:44 +08:00
|
|
|
import TabAwareWidget from "./tab_aware_widget.js";
|
|
|
|
import utils from "../services/utils.js";
|
|
|
|
import protectedSessionHolder from "../services/protected_session_holder.js";
|
2020-01-20 04:40:23 +08:00
|
|
|
import SpacedUpdate from "../services/spaced_update.js";
|
|
|
|
import server from "../services/server.js";
|
2020-01-22 04:43:23 +08:00
|
|
|
import libraryLoader from "../services/library_loader.js";
|
2020-01-14 04:48:44 +08:00
|
|
|
|
|
|
|
const TPL = `
|
|
|
|
<div class="note-detail">
|
|
|
|
<style>
|
2020-01-19 20:19:40 +08:00
|
|
|
.note-detail {
|
2020-01-14 04:48:44 +08:00
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
|
2020-01-19 18:03:34 +08:00
|
|
|
const typeWidgetClasses = {
|
2020-01-19 18:20:02 +08:00
|
|
|
'empty': "./type_widgets/empty.js",
|
2020-01-19 18:03:34 +08:00
|
|
|
'text': "./type_widgets/text.js",
|
|
|
|
'code': "./type_widgets/code.js",
|
|
|
|
'file': "./type_widgets/file.js",
|
2020-01-23 04:38:00 +08:00
|
|
|
'image': "./type_widgets/image.js",
|
|
|
|
'search': "./type_widgets/search.js",
|
|
|
|
'render': "./type_widgets/render.js",
|
|
|
|
'relation-map': "./type_widgets/relation_map.js",
|
|
|
|
'protected-session': "./type_widgets/protected_session.js",
|
|
|
|
'book': "./type_widgets/book.js"
|
2020-01-14 04:48:44 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
export default class NoteDetailWidget extends TabAwareWidget {
|
|
|
|
constructor(appContext) {
|
|
|
|
super(appContext);
|
|
|
|
|
2020-01-19 18:03:34 +08:00
|
|
|
this.typeWidgets = {};
|
|
|
|
this.typeWidgetPromises = {};
|
2020-01-20 04:40:23 +08:00
|
|
|
|
|
|
|
this.spacedUpdate = new SpacedUpdate(async () => {
|
2020-02-01 18:33:31 +08:00
|
|
|
const {note} = this.tabContext;
|
2020-01-26 01:29:32 +08:00
|
|
|
const {noteId} = note;
|
2020-01-20 04:40:23 +08:00
|
|
|
|
2020-01-25 21:37:12 +08:00
|
|
|
const dto = note.dto;
|
2020-02-02 01:29:18 +08:00
|
|
|
dto.content = this.getTypeWidget().getContent();
|
2020-01-20 04:40:23 +08:00
|
|
|
|
2020-02-02 01:29:18 +08:00
|
|
|
await server.put('notes/' + noteId, dto, this.componentId);
|
2020-01-20 04:40:23 +08:00
|
|
|
});
|
2020-01-14 04:48:44 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
doRender() {
|
|
|
|
this.$widget = $(TPL);
|
|
|
|
|
2020-01-20 01:05:06 +08:00
|
|
|
this.$widget.on("dragover", e => e.preventDefault());
|
|
|
|
|
|
|
|
this.$widget.on("dragleave", e => e.preventDefault());
|
|
|
|
|
|
|
|
this.$widget.on("drop", async e => {
|
2020-02-08 04:43:02 +08:00
|
|
|
const activeNote = this.tabManager.getActiveTabNote();
|
2020-01-20 01:05:06 +08:00
|
|
|
|
|
|
|
if (!activeNote) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const files = [...e.originalEvent.dataTransfer.files]; // chrome has issue that dataTransfer.files empties after async operation
|
|
|
|
|
|
|
|
const importService = await import("../services/import.js");
|
|
|
|
|
|
|
|
importService.uploadFiles(activeNote.noteId, files, {
|
|
|
|
safeImport: true,
|
|
|
|
shrinkImages: true,
|
|
|
|
textImportedAsText: true,
|
|
|
|
codeImportedAsCode: true,
|
|
|
|
explodeArchives: true
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-01-14 04:48:44 +08:00
|
|
|
return this.$widget;
|
|
|
|
}
|
|
|
|
|
2020-01-19 18:03:34 +08:00
|
|
|
async refresh() {
|
2020-01-25 03:15:53 +08:00
|
|
|
await this.initType();
|
2020-01-19 18:03:34 +08:00
|
|
|
|
|
|
|
for (const typeWidget of Object.values(this.typeWidgets)) {
|
|
|
|
if (typeWidget.constructor.getType() !== this.type) {
|
|
|
|
typeWidget.cleanup();
|
|
|
|
typeWidget.toggle(false);
|
|
|
|
}
|
|
|
|
}
|
2020-01-14 04:48:44 +08:00
|
|
|
|
2020-01-19 18:03:34 +08:00
|
|
|
this.getTypeWidget().toggle(true);
|
2020-01-16 04:36:01 +08:00
|
|
|
|
|
|
|
this.setupClasses();
|
|
|
|
}
|
|
|
|
|
2020-01-25 03:15:53 +08:00
|
|
|
async initType() {
|
2020-01-25 04:15:40 +08:00
|
|
|
let foundType;
|
2020-01-25 03:15:53 +08:00
|
|
|
|
2020-01-25 04:15:40 +08:00
|
|
|
do {
|
2020-02-01 18:33:31 +08:00
|
|
|
foundType = this.type = await this.getWidgetType();
|
2020-01-25 03:15:53 +08:00
|
|
|
|
|
|
|
if (!(this.type in this.typeWidgetPromises)) {
|
|
|
|
this.typeWidgetPromises[this.type] = this.initWidgetType(this.type);
|
|
|
|
}
|
|
|
|
|
|
|
|
await this.typeWidgetPromises[this.type];
|
2020-02-01 18:33:31 +08:00
|
|
|
} while (foundType !== await this.getWidgetType());
|
2020-01-25 03:15:53 +08:00
|
|
|
}
|
|
|
|
|
2020-01-16 04:36:01 +08:00
|
|
|
setupClasses() {
|
|
|
|
for (const clazz of Array.from(this.$widget[0].classList)) { // create copy to safely iterate over while removing classes
|
|
|
|
if (clazz !== 'note-detail') {
|
|
|
|
this.$widget.removeClass(clazz);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-02-04 04:56:45 +08:00
|
|
|
const note = this.note;
|
2020-01-16 04:36:01 +08:00
|
|
|
|
2020-01-19 18:20:02 +08:00
|
|
|
if (note) {
|
|
|
|
this.$widget.addClass(note.cssClass);
|
|
|
|
this.$widget.addClass(utils.getNoteTypeClass(note.type));
|
|
|
|
this.$widget.addClass(utils.getMimeTypeClass(note.mime));
|
|
|
|
|
|
|
|
this.$widget.toggleClass("protected", note.isProtected);
|
|
|
|
}
|
2020-01-14 04:48:44 +08:00
|
|
|
}
|
|
|
|
|
2020-01-19 18:03:34 +08:00
|
|
|
getTypeWidget() {
|
|
|
|
if (!this.typeWidgets[this.type]) {
|
|
|
|
throw new Error("Could not find typeWidget for type: " + this.type);
|
2020-01-19 01:01:16 +08:00
|
|
|
}
|
2020-01-14 04:48:44 +08:00
|
|
|
|
2020-01-19 18:03:34 +08:00
|
|
|
return this.typeWidgets[this.type];
|
2020-01-19 01:01:16 +08:00
|
|
|
}
|
|
|
|
|
2020-01-19 18:03:34 +08:00
|
|
|
async initWidgetType(type) {
|
|
|
|
const clazz = await import(typeWidgetClasses[type]);
|
2020-01-17 05:44:36 +08:00
|
|
|
|
2020-01-25 03:15:53 +08:00
|
|
|
const typeWidget = this.typeWidgets[type] = new clazz.default(this.appContext);
|
2020-01-25 05:30:17 +08:00
|
|
|
typeWidget.spacedUpdate = this.spacedUpdate;
|
2020-01-20 04:40:23 +08:00
|
|
|
|
2020-01-25 05:30:17 +08:00
|
|
|
this.children.push(typeWidget);
|
2020-01-20 04:40:23 +08:00
|
|
|
this.$widget.append(typeWidget.render());
|
2020-01-19 01:01:16 +08:00
|
|
|
|
2020-01-20 04:40:23 +08:00
|
|
|
typeWidget.eventReceived('setTabContext', {tabContext: this.tabContext});
|
2020-01-14 04:48:44 +08:00
|
|
|
}
|
|
|
|
|
2020-02-02 18:44:08 +08:00
|
|
|
async getWidgetType() {
|
2020-02-04 04:56:45 +08:00
|
|
|
const note = this.note;
|
2020-01-14 04:48:44 +08:00
|
|
|
|
|
|
|
if (!note) {
|
|
|
|
return "empty";
|
|
|
|
}
|
|
|
|
|
|
|
|
let type = note.type;
|
|
|
|
|
2020-02-02 18:44:08 +08:00
|
|
|
if (type === 'text' && !this.tabContext.autoBookDisabled
|
2020-02-01 18:33:31 +08:00
|
|
|
&& note.hasChildren()
|
|
|
|
&& utils.isDesktop()) {
|
2020-01-19 18:03:34 +08:00
|
|
|
|
2020-02-01 18:33:31 +08:00
|
|
|
const noteComplement = await this.tabContext.getNoteComplement();
|
|
|
|
|
|
|
|
if (utils.isHtmlEmpty(noteComplement.content)) {
|
|
|
|
type = 'book';
|
|
|
|
}
|
2020-01-14 04:48:44 +08:00
|
|
|
}
|
|
|
|
|
2020-01-19 18:03:34 +08:00
|
|
|
if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
|
|
|
|
type = 'protected-session';
|
2020-01-14 04:48:44 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
return type;
|
|
|
|
}
|
2020-01-20 02:33:35 +08:00
|
|
|
|
|
|
|
async focusOnDetailListener({tabId}) {
|
|
|
|
if (this.tabContext.tabId === tabId) {
|
|
|
|
await this.refresh();
|
|
|
|
|
|
|
|
const widget = this.getTypeWidget();
|
|
|
|
widget.focus();
|
|
|
|
}
|
|
|
|
}
|
2020-01-20 04:40:23 +08:00
|
|
|
|
|
|
|
async beforeNoteSwitchListener({tabId}) {
|
|
|
|
if (this.isTab(tabId)) {
|
|
|
|
await this.spacedUpdate.updateNowIfNecessary();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async beforeTabRemoveListener({tabId}) {
|
|
|
|
if (this.isTab(tabId)) {
|
|
|
|
await this.spacedUpdate.updateNowIfNecessary();
|
|
|
|
}
|
|
|
|
}
|
2020-01-22 04:43:23 +08:00
|
|
|
|
|
|
|
async printActiveNoteListener() {
|
|
|
|
if (!this.tabContext.isActive()) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
await libraryLoader.requireLibrary(libraryLoader.PRINT_THIS);
|
|
|
|
|
|
|
|
this.$widget.find('.note-detail-printable:visible').printThis({
|
2020-02-04 04:56:45 +08:00
|
|
|
header: $("<h2>").text(this.note && this.note.title).prop('outerHTML') ,
|
2020-01-22 04:43:23 +08:00
|
|
|
importCSS: false,
|
|
|
|
loadCSS: [
|
|
|
|
"libraries/codemirror/codemirror.css",
|
|
|
|
"libraries/ckeditor/ckeditor-content.css"
|
|
|
|
],
|
|
|
|
debug: true
|
|
|
|
});
|
|
|
|
}
|
2020-01-24 22:44:24 +08:00
|
|
|
|
|
|
|
hoistedNoteChangedListener() {
|
|
|
|
this.refresh();
|
|
|
|
}
|
|
|
|
|
2020-02-01 05:32:24 +08:00
|
|
|
async entitiesReloadedListener({loadResults}) {
|
2020-02-02 01:29:18 +08:00
|
|
|
// we should test what happens when the loaded note is deleted
|
2020-02-01 05:32:24 +08:00
|
|
|
|
2020-02-02 01:29:18 +08:00
|
|
|
if (loadResults.isNoteContentReloaded(this.noteId, this.componentId)) {
|
2020-01-30 04:38:58 +08:00
|
|
|
this.refreshWithNote(this.note, this.notePath);
|
|
|
|
}
|
2020-01-28 05:58:03 +08:00
|
|
|
}
|
2020-02-02 17:41:43 +08:00
|
|
|
|
|
|
|
beforeUnloadListener() {
|
|
|
|
this.spacedUpdate.updateNowIfNecessary();
|
|
|
|
}
|
2020-02-02 18:44:08 +08:00
|
|
|
|
|
|
|
autoBookDisabledListener() {
|
|
|
|
this.refresh();
|
|
|
|
}
|
2020-01-14 04:48:44 +08:00
|
|
|
}
|