2019-07-21 17:32:38 +08:00
|
|
|
import NoteInfoWidget from "../widgets/note_info.js";
|
2019-07-22 03:55:48 +08:00
|
|
|
import LinkMapWidget from "../widgets/link_map.js";
|
2019-07-26 04:31:09 +08:00
|
|
|
import NoteRevisionsWidget from "../widgets/note_revisions.js";
|
2019-08-07 02:05:05 +08:00
|
|
|
import AttributesWidget from "../widgets/attributes.js";
|
2019-07-21 17:32:38 +08:00
|
|
|
|
|
|
|
const WIDGET_TPL = `
|
|
|
|
<div class="card widget">
|
2019-07-25 04:52:51 +08:00
|
|
|
<div class="card-header">
|
|
|
|
<button class="btn btn-sm widget-title" data-toggle="collapse" data-target="#collapseOne">
|
|
|
|
Collapsible Group Item
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<div class="widget-header-actions"></div>
|
2019-07-21 17:32:38 +08:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="collapseOne" class="collapse show body-wrapper">
|
|
|
|
<div class="card-body"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
|
|
|
|
let widgetIdCtr = 1;
|
|
|
|
|
2019-07-21 16:17:08 +08:00
|
|
|
class Sidebar {
|
|
|
|
/**
|
|
|
|
* @param {TabContext} ctx
|
|
|
|
*/
|
|
|
|
constructor(ctx) {
|
|
|
|
this.ctx = ctx;
|
2019-08-07 04:39:27 +08:00
|
|
|
this.widgets = [];
|
2019-07-21 16:17:08 +08:00
|
|
|
this.$sidebar = ctx.$tabContent.find(".note-detail-sidebar");
|
2019-07-21 17:32:38 +08:00
|
|
|
this.$widgets = this.$sidebar.find(".note-detail-widgets");
|
2019-07-21 16:17:08 +08:00
|
|
|
this.$showSideBarButton = this.ctx.$tabContent.find(".show-sidebar-button");
|
|
|
|
this.$showSideBarButton.hide();
|
|
|
|
|
|
|
|
this.$hideSidebarButton = this.$sidebar.find(".hide-sidebar-button");
|
|
|
|
|
|
|
|
this.$hideSidebarButton.click(() => {
|
|
|
|
this.$sidebar.hide();
|
|
|
|
this.$showSideBarButton.show();
|
2019-08-15 16:04:03 +08:00
|
|
|
this.ctx.stateChanged();
|
2019-07-21 16:17:08 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
this.$showSideBarButton.click(() => {
|
|
|
|
this.$sidebar.show();
|
|
|
|
this.$showSideBarButton.hide();
|
2019-08-15 16:04:03 +08:00
|
|
|
this.ctx.stateChanged();
|
2019-07-21 17:32:38 +08:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-08-15 16:04:03 +08:00
|
|
|
isVisible() {
|
|
|
|
return this.$sidebar.is(":visible");
|
|
|
|
}
|
|
|
|
|
|
|
|
getSidebarState() {
|
|
|
|
return {
|
|
|
|
visible: this.isVisible(),
|
|
|
|
widgets: this.widgets.map(w => w.getWidgetState())
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-07-21 17:32:38 +08:00
|
|
|
async noteLoaded() {
|
2019-08-07 04:39:27 +08:00
|
|
|
this.widgets = [];
|
2019-07-21 17:32:38 +08:00
|
|
|
this.$widgets.empty();
|
|
|
|
|
2019-08-07 03:36:54 +08:00
|
|
|
const widgetClasses = [AttributesWidget, LinkMapWidget, NoteRevisionsWidget, NoteInfoWidget];
|
2019-07-26 04:31:09 +08:00
|
|
|
|
2019-08-07 03:36:54 +08:00
|
|
|
for (const widgetClass of widgetClasses) {
|
|
|
|
const $widget = this.createWidgetElement();
|
2019-07-26 04:31:09 +08:00
|
|
|
|
2019-08-07 03:36:54 +08:00
|
|
|
const attributesWidget = new widgetClass(this.ctx, $widget);
|
2019-08-07 04:39:27 +08:00
|
|
|
this.widgets.push(attributesWidget);
|
|
|
|
|
2019-08-07 03:36:54 +08:00
|
|
|
attributesWidget.renderBody(); // let it run in parallel
|
2019-07-21 17:32:38 +08:00
|
|
|
|
2019-08-07 03:36:54 +08:00
|
|
|
this.$widgets.append($widget);
|
|
|
|
}
|
2019-07-21 17:32:38 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
createWidgetElement() {
|
|
|
|
const widgetId = 'widget-' + widgetIdCtr++;
|
|
|
|
|
|
|
|
const $widget = $(WIDGET_TPL);
|
|
|
|
$widget.find('[data-target]').attr('data-target', "#" + widgetId);
|
|
|
|
$widget.find('.body-wrapper').attr('id', widgetId);
|
|
|
|
|
|
|
|
return $widget;
|
2019-07-21 16:17:08 +08:00
|
|
|
}
|
2019-08-07 04:39:27 +08:00
|
|
|
|
|
|
|
syncDataReceived(syncData) {
|
|
|
|
for (const widget of this.widgets) {
|
|
|
|
if (widget.syncDataReceived) {
|
|
|
|
widget.syncDataReceived(syncData);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-07-21 16:17:08 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default Sidebar;
|