mirror of
https://github.com/zadam/trilium.git
synced 2024-09-20 23:55:59 +08:00
added iframe note type
This commit is contained in:
parent
ca35527aeb
commit
ee217d6306
|
@ -17,7 +17,8 @@ const NOTE_TYPE_ICONS = {
|
|||
"book": "bx bx-book",
|
||||
"note-map": "bx bx-map-alt",
|
||||
"mermaid": "bx bx-selection",
|
||||
"canvas": "bx bx-pen"
|
||||
"canvas": "bx bx-pen",
|
||||
"iframe": "bx bx-globe-alt"
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
@ -35,6 +35,7 @@ class TreeContextMenu {
|
|||
{ title: "Book", command: command, type: "book", uiIcon: "book" },
|
||||
{ title: "Mermaid diagram", command: command, type: "mermaid", uiIcon: "selection" },
|
||||
{ title: "Canvas", command: command, type: "canvas", uiIcon: "pen" },
|
||||
{ title: "IFrame", command: command, type: "iframe", uiIcon: "globe-alt" },
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
@ -3,6 +3,12 @@ import protectedSessionHolder from "../services/protected_session_holder.js";
|
|||
import SpacedUpdate from "../services/spaced_update.js";
|
||||
import server from "../services/server.js";
|
||||
import libraryLoader from "../services/library_loader.js";
|
||||
import appContext from "../services/app_context.js";
|
||||
import keyboardActionsService from "../services/keyboard_actions.js";
|
||||
import noteCreateService from "../services/note_create.js";
|
||||
import attributeService from "../services/attributes.js";
|
||||
import attributeRenderer from "../services/attribute_renderer.js";
|
||||
|
||||
import EmptyTypeWidget from "./type_widgets/empty.js";
|
||||
import EditableTextTypeWidget from "./type_widgets/editable_text.js";
|
||||
import EditableCodeTypeWidget from "./type_widgets/editable_code.js";
|
||||
|
@ -13,16 +19,12 @@ import RelationMapTypeWidget from "./type_widgets/relation_map.js";
|
|||
import CanvasTypeWidget from "./type_widgets/canvas.js";
|
||||
import ProtectedSessionTypeWidget from "./type_widgets/protected_session.js";
|
||||
import BookTypeWidget from "./type_widgets/book.js";
|
||||
import appContext from "../services/app_context.js";
|
||||
import keyboardActionsService from "../services/keyboard_actions.js";
|
||||
import noteCreateService from "../services/note_create.js";
|
||||
import DeletedTypeWidget from "./type_widgets/deleted.js";
|
||||
import ReadOnlyTextTypeWidget from "./type_widgets/read_only_text.js";
|
||||
import ReadOnlyCodeTypeWidget from "./type_widgets/read_only_code.js";
|
||||
import NoneTypeWidget from "./type_widgets/none.js";
|
||||
import attributeService from "../services/attributes.js";
|
||||
import NoteMapTypeWidget from "./type_widgets/note_map.js";
|
||||
import attributeRenderer from "../services/attribute_renderer.js";
|
||||
import IframeTypeWidget from "./type_widgets/iframe.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="note-detail">
|
||||
|
@ -54,7 +56,8 @@ const typeWidgetClasses = {
|
|||
'canvas': CanvasTypeWidget,
|
||||
'protected-session': ProtectedSessionTypeWidget,
|
||||
'book': BookTypeWidget,
|
||||
'note-map': NoteMapTypeWidget
|
||||
'note-map': NoteMapTypeWidget,
|
||||
'iframe': IframeTypeWidget
|
||||
};
|
||||
|
||||
export default class NoteDetailWidget extends NoteContextAwareWidget {
|
||||
|
@ -154,7 +157,7 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
|
|||
// https://github.com/zadam/trilium/issues/2522
|
||||
this.$widget.toggleClass("full-height",
|
||||
!this.noteContext.hasNoteList()
|
||||
&& ['editable-text', 'editable-code', 'canvas'].includes(this.type)
|
||||
&& ['editable-text', 'editable-code', 'canvas', 'iframe'].includes(this.type)
|
||||
&& this.mime !== 'text/x-sqlite;schema=trilium');
|
||||
}
|
||||
|
||||
|
|
|
@ -12,8 +12,9 @@ const NOTE_TYPES = [
|
|||
{ type: "relation-map", mime: "application/json", title: "Relation Map", selectable: true },
|
||||
{ type: "render", mime: '', title: "Render Note", selectable: true },
|
||||
{ type: "canvas", mime: 'application/json', title: "Canvas", selectable: true },
|
||||
{ type: "book", mime: '', title: "Book", selectable: true },
|
||||
{ type: "mermaid", mime: 'text/mermaid', title: "Mermaid Diagram", selectable: true },
|
||||
{ type: "book", mime: '', title: "Book", selectable: true },
|
||||
{ type: "iframe", mime: '', title: "IFrame", selectable: true },
|
||||
{ type: "code", mime: 'text/plain', title: "Code", selectable: true }
|
||||
];
|
||||
|
||||
|
|
|
@ -36,7 +36,7 @@ export default class NoteWrapperWidget extends FlexContainer {
|
|||
const note = this.noteContext?.note;
|
||||
|
||||
this.$widget.toggleClass("full-content-width",
|
||||
['image', 'mermaid', 'book', 'render', 'canvas'].includes(note?.type)
|
||||
['image', 'mermaid', 'book', 'render', 'canvas', 'iframe'].includes(note?.type)
|
||||
|| !!note?.hasLabel('fullContentWidth')
|
||||
);
|
||||
}
|
||||
|
|
|
@ -336,6 +336,10 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
|
|||
setDimensions(dimensions);
|
||||
|
||||
const onResize = () => {
|
||||
if (this.note?.type !== 'canvas') {
|
||||
return;
|
||||
}
|
||||
|
||||
const dimensions = {
|
||||
width: excalidrawWrapperRef.current.getBoundingClientRect().width,
|
||||
height: excalidrawWrapperRef.current.getBoundingClientRect().height
|
||||
|
|
67
src/public/app/widgets/type_widgets/iframe.js
Normal file
67
src/public/app/widgets/type_widgets/iframe.js
Normal file
|
@ -0,0 +1,67 @@
|
|||
import TypeWidget from "./type_widget.js";
|
||||
import attributeService from "../../services/attributes.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="note-detail-iframe note-detail-printable" style="height: 100%">
|
||||
<div class="note-detail-iframe-help alert alert-warning" style="margin: 50px; padding: 20px;">
|
||||
<p><strong>This help note is shown because this note of type IFrame HTML doesn't have required label to function properly.</strong></p>
|
||||
|
||||
<p>Please create label with a URL address you want to embed, e.g. <code>#iframeSrc="http://www.google.com"</code></p>
|
||||
</div>
|
||||
|
||||
<iframe class="note-detail-iframe-content"></iframe>
|
||||
</div>`;
|
||||
|
||||
export default class IframeTypeWidget extends TypeWidget {
|
||||
static getType() { return "iframe"; }
|
||||
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.$noteDetailIframeHelp = this.$widget.find('.note-detail-iframe-help');
|
||||
this.$noteDetailIframeContent = this.$widget.find('.note-detail-iframe-content');
|
||||
|
||||
window.addEventListener('resize', () => this.setDimensions(), false);
|
||||
|
||||
super.doRender();
|
||||
}
|
||||
|
||||
async doRefresh(note) {
|
||||
this.$widget.show();
|
||||
this.$noteDetailIframeHelp.hide();
|
||||
this.$noteDetailIframeContent.hide();
|
||||
|
||||
const iframeSrc = this.note.getLabelValue('iframeSrc');
|
||||
|
||||
if (iframeSrc) {
|
||||
this.$noteDetailIframeContent
|
||||
.show()
|
||||
.attr("src", iframeSrc);
|
||||
}
|
||||
else {
|
||||
this.$noteDetailIframeContent.hide();
|
||||
this.$noteDetailIframeHelp.show();
|
||||
}
|
||||
|
||||
this.setDimensions();
|
||||
|
||||
setTimeout(() => this.setDimensions(), 1000);
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
this.$noteDetailIframeContent.removeAttribute("src");
|
||||
}
|
||||
|
||||
setDimensions() {
|
||||
const $parent = this.$widget;
|
||||
|
||||
this.$noteDetailIframeContent
|
||||
.height($parent.height())
|
||||
.width($parent.width());
|
||||
}
|
||||
|
||||
entitiesReloadedEvent({loadResults}) {
|
||||
if (loadResults.getAttributes().find(attr => attr.name === 'iframeSrc' && attributeService.isAffecting(attr, this.noteContext.note))) {
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,13 +1,14 @@
|
|||
module.exports = [
|
||||
'text',
|
||||
'code',
|
||||
'render',
|
||||
'file',
|
||||
'image',
|
||||
'search',
|
||||
'relation-map',
|
||||
'book',
|
||||
'text',
|
||||
'code',
|
||||
'render',
|
||||
'file',
|
||||
'image',
|
||||
'search',
|
||||
'relation-map',
|
||||
'book',
|
||||
'note-map',
|
||||
'mermaid',
|
||||
'canvas'
|
||||
];
|
||||
'canvas',
|
||||
'iframe'
|
||||
];
|
||||
|
|
|
@ -55,7 +55,7 @@ function deriveMime(type, mime) {
|
|||
mime = 'text/plain';
|
||||
} else if (['relation-map', 'search', 'canvas'].includes(type)) {
|
||||
mime = 'application/json';
|
||||
} else if (['render', 'book'].includes(type)) {
|
||||
} else if (['render', 'book', 'iframe'].includes(type)) {
|
||||
mime = '';
|
||||
} else {
|
||||
mime = 'application/octet-stream';
|
||||
|
|
Loading…
Reference in a new issue