gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

convert other widgets to StandardWidget base class

Browse Source
This commit is contained in:
zadam 2019-08-15 21:18:33 +02:00
parent f8118444f9
commit aa981d3cd4
5 changed files with 45 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/public/javascripts/services/sidebar.js
View File

@ -48,8 +48,7 @@ class Sidebar {
this.widgets = []; this.widgets = [];
this.$widgetContainer.empty(); this.$widgetContainer.empty();
//const widgetClasses = [AttributesWidget, LinkMapWidget, NoteRevisionsWidget, NoteInfoWidget]; const widgetClasses = [AttributesWidget, LinkMapWidget, NoteRevisionsWidget, NoteInfoWidget];
const widgetClasses = [AttributesWidget];
for (const widgetClass of widgetClasses) { for (const widgetClass of widgetClasses) {
const widget = new widgetClass(this.ctx); const widget = new widgetClass(this.ctx);

39
src/public/javascripts/widgets/link_map.js
View File

@ -3,6 +3,7 @@ import linkMapDialog from "../dialogs/link_map.js";
import server from "../services/server.js"; import server from "../services/server.js";
import treeCache from "../services/tree_cache.js"; import treeCache from "../services/tree_cache.js";
import linkService from "../services/link.js"; import linkService from "../services/link.js";
import StandardWidget from "./standard_widget.js";
let linkMapContainerIdCtr = 1; let linkMapContainerIdCtr = 1;
@ -22,21 +23,15 @@ const linkOverlays = [
} ] } ]
]; ];
class LinkMapWidget { class LinkMapWidget extends StandardWidget {
/** /**
* @param {TabContext} ctx * @param {TabContext} ctx
* @param {jQuery} $widget * @param {object} state
*/ */
constructor(ctx, $widget) { constructor(ctx, state) {
this.ctx = ctx; super(ctx, state,'link-map');
this.$widget = $widget;
this.$widget.on('show.bs.collapse', () => this.renderBody());
this.$widget.on('show.bs.collapse', () => this.ctx.stateChanged());
this.$widget.on('hide.bs.collapse', () => this.ctx.stateChanged());
this.$title = this.$widget.find('.widget-title');
this.$title.text("Link map"); this.$title.text("Link map");
this.$headerActions = this.$widget.find('.widget-header-actions');
this.$bodyWrapper = this.$widget.find('.body-wrapper');
const $showFullButton = $("<a>").append("show full").addClass('widget-header-action'); const $showFullButton = $("<a>").append("show full").addClass('widget-header-action');
$showFullButton.click(() => { $showFullButton.click(() => {
@ -46,15 +41,10 @@ class LinkMapWidget {
this.$headerActions.append($showFullButton); this.$headerActions.append($showFullButton);
} }
async renderBody() { async doRenderBody() {
if (!this.isVisible()) { this.$body.html(TPL);
return;
}
const $body = this.$widget.find('.card-body'); this.$linkMapContainer = this.$body.find('.link-map-container');
$body.html(TPL);
this.$linkMapContainer = $body.find('.link-map-container');
this.$linkMapContainer.attr("id", "link-map-container-" + linkMapContainerIdCtr++); this.$linkMapContainer.attr("id", "link-map-container-" + linkMapContainerIdCtr++);
await libraryLoader.requireLibrary(libraryLoader.LINK_MAP); await libraryLoader.requireLibrary(libraryLoader.LINK_MAP);
@ -233,17 +223,6 @@ class LinkMapWidget {
noteIdToId(noteId) { noteIdToId(noteId) {
return "link-map-note-" + noteId; return "link-map-note-" + noteId;
} }
getWidgetState() {
return {
id: 'attributes',
visible: this.isVisible()
};
}
isVisible() {
return this.$bodyWrapper.is(":visible");
}
} }
export default LinkMapWidget; export default LinkMapWidget;

50
src/public/javascripts/widgets/note_info.js
View File

@ -1,3 +1,5 @@
import StandardWidget from "./standard_widget.js";
const TPL = ` const TPL = `
<table class="note-info-table"> <table class="note-info-table">
<tr> <tr>
@ -23,36 +25,25 @@ const TPL = `
</table> </table>
`; `;
class NoteInfoWidget { class NoteInfoWidget extends StandardWidget {
/** /**
* @param {TabContext} ctx * @param {TabContext} ctx
* @param {jQuery} $widget * @param {object} state
*/ */
constructor(ctx, $widget) { constructor(ctx, state) {
this.ctx = ctx; super(ctx, state, 'note-info');
this.$widget = $widget;
this.$widget.on('show.bs.collapse', () => this.renderBody());
this.$widget.on('show.bs.collapse', () => this.ctx.stateChanged());
this.$widget.on('hide.bs.collapse', () => this.ctx.stateChanged());
this.$title = this.$widget.find('.widget-title');
this.$title.text("Note info"); this.$title.text("Note info");
this.$bodyWrapper = this.$widget.find('.body-wrapper');
} }
async renderBody() { async doRenderBody() {
if (!this.isVisible()) { this.$body.html(TPL);
return;
}
const $body = this.$widget.find('.card-body'); const $noteId = this.$body.find(".note-info-note-id");
const $dateCreated = this.$body.find(".note-info-date-created");
$body.html(TPL); const $dateModified = this.$body.find(".note-info-date-modified");
const $type = this.$body.find(".note-info-type");
const $noteId = $body.find(".note-info-note-id"); const $mime = this.$body.find(".note-info-mime");
const $dateCreated = $body.find(".note-info-date-created");
const $dateModified = $body.find(".note-info-date-modified");
const $type = $body.find(".note-info-type");
const $mime = $body.find(".note-info-mime");
const note = this.ctx.note; const note = this.ctx.note;
@ -65,20 +56,9 @@ class NoteInfoWidget {
syncDataReceived(syncData) { syncDataReceived(syncData) {
if (syncData.find(sd => sd.entityName === 'notes' && sd.entityId === this.ctx.note.noteId)) { if (syncData.find(sd => sd.entityName === 'notes' && sd.entityId === this.ctx.note.noteId)) {
this.renderBody(); this.doRenderBody();
} }
} }
getWidgetState() {
return {
id: 'attributes',
visible: this.isVisible()
};
}
isVisible() {
return this.$bodyWrapper.is(":visible");
}
} }
export default NoteInfoWidget; export default NoteInfoWidget;

42
src/public/javascripts/widgets/note_revisions.js
View File

@ -1,42 +1,33 @@
import server from "../services/server.js"; import server from "../services/server.js";
import StandardWidget from "./standard_widget.js";
const TPL = ` const TPL = `
<ul class="note-revision-list" style="max-height: 150px; overflow: auto;"> <ul class="note-revision-list" style="max-height: 150px; overflow: auto;">
</ul> </ul>
`; `;
class NoteRevisionsWidget { class NoteRevisionsWidget extends StandardWidget {
/** /**
* @param {TabContext} ctx * @param {TabContext} ctx
* @param {jQuery} $widget * @param {object} state
*/ */
constructor(ctx, $widget) { constructor(ctx, state) {
this.ctx = ctx; super(ctx, state, 'note-revisions');
this.$widget = $widget;
this.$widget.on('show.bs.collapse', () => this.renderBody());
this.$widget.on('show.bs.collapse', () => this.ctx.stateChanged());
this.$widget.on('hide.bs.collapse', () => this.ctx.stateChanged());
this.$title = this.$widget.find('.widget-title');
this.$title.text("Note revisions"); this.$title.text("Note revisions");
this.$bodyWrapper = this.$widget.find('.body-wrapper');
} }
async renderBody() { async doRenderBody() {
if (!this.isVisible()) {
return;
}
const $body = this.$widget.find('.card-body');
const revisionItems = await server.get(`notes/${this.ctx.note.noteId}/revisions`); const revisionItems = await server.get(`notes/${this.ctx.note.noteId}/revisions`);
if (revisionItems.length === 0) { if (revisionItems.length === 0) {
$body.text("No revisions yet..."); this.$body.text("No revisions yet...");
return; return;
} }
$body.html(TPL); this.$body.html(TPL);
const $list = $body.find('.note-revision-list'); const $list = this.$body.find('.note-revision-list');
for (const item of revisionItems) { for (const item of revisionItems) {
$list.append($('<li>').append($("<a>", { $list.append($('<li>').append($("<a>", {
@ -50,20 +41,9 @@ class NoteRevisionsWidget {
syncDataReceived(syncData) { syncDataReceived(syncData) {
if (syncData.find(sd => sd.entityName === 'note_revisions' && sd.noteId === this.ctx.note.noteId)) { if (syncData.find(sd => sd.entityName === 'note_revisions' && sd.noteId === this.ctx.note.noteId)) {
this.renderBody(); this.doRenderBody();
} }
} }
getWidgetState() {
return {
id: 'attributes',
visible: this.isVisible()
};
}
isVisible() {
return this.$bodyWrapper.is(":visible");
}
} }
export default NoteRevisionsWidget; export default NoteRevisionsWidget;

16
src/public/javascripts/widgets/standard_widget.js
View File

@ -8,7 +8,7 @@ const WIDGET_TPL = `
<div class="widget-header-actions"></div> <div class="widget-header-actions"></div>
</div> </div>
<div id="[to be set]" class="collapse body-wrapper"> <div id="[to be set]" class="collapse body-wrapper" style="transition: none;">
<div class="card-body"></div> <div class="card-body"></div>
</div> </div>
</div> </div>
@ -18,17 +18,19 @@ class StandardWidget {
/** /**
* @param {TabContext} ctx * @param {TabContext} ctx
* @param {object} state * @param {object} state
* @param {string} widgetId * @param {string} widgetName
*/ */
constructor(ctx, state, widgetId) { constructor(ctx, state, widgetName) {
this.ctx = ctx; this.ctx = ctx;
this.widgetId = widgetId; this.widgetName = widgetName;
const widgetId = `tab-${ctx.tabId}-widget-${widgetName}`;
this.$widget = $(WIDGET_TPL); this.$widget = $(WIDGET_TPL);
this.$widget.find('[data-target]').attr('data-target', "#widget-" + widgetId); this.$widget.find('[data-target]').attr('data-target', "#" + widgetId);
this.$bodyWrapper = this.$widget.find('.body-wrapper'); this.$bodyWrapper = this.$widget.find('.body-wrapper');
this.$bodyWrapper.attr('id', "widget-" + widgetId); this.$bodyWrapper.attr('id', widgetId);
if (state && state.visible) { if (state && state.visible) {
this.$bodyWrapper.addClass("show"); this.$bodyWrapper.addClass("show");
@ -62,7 +64,7 @@ class StandardWidget {
getWidgetState() { getWidgetState() {
return { return {
id: this.widgetId, name: this.widgetName,
visible: this.isVisible() visible: this.isVisible()
}; };
} }