widget ordering WIP

This commit is contained in:
zadam
2019-08-22 20:58:43 +02:00
parent 4b9415a619
commit 8ab2c924c4
8 changed files with 110 additions and 60 deletions

View File

@@ -7,53 +7,8 @@ export default class SidebarOptions {
this.$sidebarMinWidth = $("#sidebar-min-width");
this.$sidebarWidthPercent = $("#sidebar-width-percent");
this.$showSidebarInNewTab = $("#show-sidebar-in-new-tab");
this.$widgetsActive = $("#widgets-active");
this.$widgetsInactive = $("#widgets-inactive");
const widgets = {
attributes: 'Attributes',
linkMap: 'Link map',
noteInfo: 'Note info',
noteRevisions: 'Note revisions',
whatLinksHere: 'What links here'
};
for (const widgetName in widgets) {
const $widgetTitle = $('<div class="widget-title">')
.attr('data-widget-name', widgetName)
.append($("<span>").addClass("handle jam jam-move"))
.append($("<span>").text(widgets[widgetName]));
const $expandedCheckbox = $('<div class="expansion-conf">')
.attr("title", "If checked, the widget will be by default expanded (opened)")
.append($('<input type="checkbox">')
.attr('id', 'widget-exp-' + widgetName))
.append("&nbsp;")
.append($("<label>")
.attr("for", 'widget-exp-' + widgetName)
.text(" expanded"));
const $el = $('<div>')
.addClass("list-group-item")
.append($widgetTitle)
.append($expandedCheckbox);
this.$widgetsActive.append($el);
}
libraryLoader.requireLibrary(libraryLoader.SORTABLE).then(() => {
new Sortable(this.$widgetsActive[0], {
group: 'widgets',
handle: '.handle',
animation: 150
});
new Sortable(this.$widgetsInactive[0], {
group: 'widgets',
handle: '.handle',
animation: 150
});
});
this.$widgetsEnabled = $("#widgets-enabled");
this.$widgetsDisabled = $("#widgets-disabled");
this.$sidebarMinWidth.change(async () => {
await server.put('options/sidebarMinWidth/' + this.$sidebarMinWidth.val());
@@ -86,6 +41,70 @@ export default class SidebarOptions {
else {
this.$showSidebarInNewTab.removeAttr("checked");
}
const widgets = [
{name: 'attributes', title: 'Attributes'},
{name: 'linkMap', title: 'Link map'},
{name: 'noteInfo', title: 'Note info'},
{name: 'noteRevisions', title: 'Note revisions'},
{name: 'whatLinksHere', title: 'What links here'}
].map(widget => {
widget.option = this.parseJsonSafely(options[widget.name + 'Widget']) || {
enabled: true,
expanded: true,
position: 100
};
return widget;
});
widgets.sort((a, b) => a.option.position - b.option.position);
for (const {name, title, option} of widgets) {
const $widgetTitle = $('<div class="widget-title">')
.attr('data-widget-name', name)
.append($("<span>").addClass("handle jam jam-move"))
.append($("<span>").text(title));
const $expandedCheckbox = $('<div class="expansion-conf">')
.attr("title", "If checked, the widget will be by default expanded (opened)")
.append($(`<input type="checkbox"${option.expanded ? ' checked' : ''}>`)
.attr('id', 'widget-exp-' + name))
.append("&nbsp;")
.append($("<label>")
.attr("for", 'widget-exp-' + name)
.text(" expanded"));
const $el = $('<div>')
.addClass("list-group-item")
.append($widgetTitle)
.append($expandedCheckbox);
(option.enabled ? this.$widgetsEnabled : this.$widgetsDisabled).append($el);
}
libraryLoader.requireLibrary(libraryLoader.SORTABLE).then(() => {
new Sortable(this.$widgetsEnabled[0], {
group: 'widgets',
handle: '.handle',
animation: 150
});
new Sortable(this.$widgetsDisabled[0], {
group: 'widgets',
handle: '.handle',
animation: 150
});
});
}
parseJsonSafely(str) {
try {
return JSON.parse(str);
}
catch (e) {
return null;
}
}
resizeSidebar() {