Notes/src/public/javascripts/widgets/collapsible_widget.js

77 lines
2.1 KiB
JavaScript
Raw Normal View History

import TabAwareWidget from "./tab_aware_widget.js";
2019-08-15 21:08:41 +02:00
const WIDGET_TPL = `
<div class="card widget">
<div class="card-header">
<div>
<button class="btn btn-sm widget-title" data-toggle="collapse" data-target="#[to be set]">
Collapsible Group Item
</button>
<a class="widget-help external no-arrow bx bx-info-circle"></a>
</div>
2019-08-15 21:08:41 +02:00
<div class="widget-header-actions"></div>
</div>
2020-02-25 16:31:44 +01:00
<div id="[to be set]" class="collapse body-wrapper" style="transition: none; ">
2019-08-15 21:08:41 +02:00
<div class="card-body"></div>
</div>
</div>
`;
2020-02-02 20:02:08 +01:00
export default class CollapsibleWidget extends TabAwareWidget {
getWidgetTitle() { return "Untitled widget"; }
getHeaderActions() { return []; }
getHelp() { return {}; }
2020-02-02 20:02:08 +01:00
doRender() {
2019-08-15 21:08:41 +02:00
this.$widget = $(WIDGET_TPL);
2020-02-02 18:46:50 +01:00
this.$widget.find('[data-target]').attr('data-target', "#" + this.componentId);
2019-08-15 21:08:41 +02:00
this.$bodyWrapper = this.$widget.find('.body-wrapper');
2020-02-25 16:31:44 +01:00
this.$bodyWrapper.attr('id', this.componentId); // for toggle to work we need id
2020-02-02 18:46:50 +01:00
this.$bodyWrapper.collapse("show");
2019-08-15 21:08:41 +02:00
this.$body = this.$bodyWrapper.find('.card-body');
this.$title = this.$widget.find('.widget-title');
2019-08-17 10:45:20 +02:00
this.$title.text(this.getWidgetTitle());
this.$help = this.$widget.find('.widget-help');
const help = this.getHelp();
if (help.title) {
this.$help.attr("title", help.title);
this.$help.attr("href", help.url || "javascript:");
if (!help.url) {
this.$help.addClass('no-link');
}
}
else {
this.$help.hide();
}
2019-08-15 21:08:41 +02:00
this.$headerActions = this.$widget.find('.widget-header-actions');
2019-08-17 10:45:20 +02:00
this.$headerActions.append(...this.getHeaderActions());
2020-03-01 18:47:20 +01:00
this.decorateWidget();
2020-02-02 20:02:08 +01:00
this.initialized = this.doRenderBody();
2019-08-17 10:45:20 +02:00
return this.$widget;
}
2019-08-19 20:59:40 +02:00
2020-03-01 18:47:20 +01:00
/** for overriding */
decorateWidget() {}
2019-08-15 21:08:41 +02:00
/** for overriding */
async doRenderBody() {}
2019-08-22 20:58:43 +02:00
isExpanded() {
2019-08-16 21:52:36 +02:00
return this.$bodyWrapper.hasClass("show");
2019-08-15 21:08:41 +02:00
}
2020-02-02 20:02:08 +01:00
}