')
- .attr('data-section-component-id', sectionWidget.componentId)
- .append(sectionWidget.render())
- );
- }
-
- for (const buttonWidget of this.buttonWidgets) {
- this.$buttonContainer.append(buttonWidget.render());
- }
-
- this.$titleContainer.on('click', '.section-title-real', e => {
- const $sectionTitle = $(e.target).closest('.section-title-real');
-
- const activate = !$sectionTitle.hasClass("active");
-
- this.$titleContainer.find('.section-title-real').removeClass("active");
- this.$bodyContainer.find('.section-body').removeClass("active");
-
- if (activate) {
- const sectionComponentId = $sectionTitle.attr('data-section-component-id');
-
- this.lastActiveComponentId = sectionComponentId;
-
- this.$titleContainer.find(`.section-title-real[data-section-component-id="${sectionComponentId}"]`).addClass("active");
- this.$bodyContainer.find(`.section-body[data-section-component-id="${sectionComponentId}"]`).addClass("active");
-
- const activeChild = this.getActiveSectionWidget();
-
- if (activeChild) {
- activeChild.handleEvent('noteSwitched', {noteContext: this.noteContext, notePath: this.notePath});
- }
- }
- else {
- this.lastActiveComponentId = null;
- }
- });
- }
-
- async refreshWithNote(note, noExplicitActivation = false) {
- this.lastNoteType = note.type;
-
- let $sectionToActivate, $lastActiveSection;
-
- this.$titleContainer.empty();
-
- for (const sectionWidget of this.sectionWidgets) {
- const ret = sectionWidget.getTitle(note);
-
- if (!ret.show) {
- continue;
- }
-
- const $sectionTitle = $('
')
- .attr('data-section-component-id', sectionWidget.componentId)
- .append($('
')
- .addClass(ret.icon)
- .attr("title", ret.title))
- .append(" ")
- .append($('').text(ret.title));
-
- this.$titleContainer.append($sectionTitle);
- this.$titleContainer.append('');
-
- if (ret.activate && !this.lastActiveComponentId && !$sectionToActivate && !noExplicitActivation) {
- $sectionToActivate = $sectionTitle;
- }
-
- if (this.lastActiveComponentId === sectionWidget.componentId) {
- $lastActiveSection = $sectionTitle;
- }
- }
-
- this.$titleContainer.find('.section-title-icon').tooltip();
-
- if (!$sectionToActivate) {
- $sectionToActivate = $lastActiveSection;
- }
-
- if ($sectionToActivate) {
- $sectionToActivate.trigger('click');
- }
- else {
- this.$bodyContainer.find('.section-body').removeClass("active");
- }
- }
-
- refreshSectionContainerCommand() {
- this.refreshWithNote(this.note, true);
- }
-
- async handleEventInChildren(name, data) {
- if (['activeContextChanged', 'setNoteContext'].includes(name)) {
- // won't trigger .refresh();
- await super.handleEventInChildren('setNoteContext', data);
- }
- else {
- const activeSectionWidget = this.getActiveSectionWidget();
-
- // forward events only to active section, inactive ones don't need to be updated
- if (activeSectionWidget) {
- await activeSectionWidget.handleEvent(name, data);
- }
-
- for (const buttonWidget of this.buttonWidgets) {
- await buttonWidget.handleEvent(name, data);
- }
- }
- }
-
- entitiesReloadedEvent({loadResults}) {
- if (loadResults.isNoteReloaded(this.noteId) && this.lastNoteType !== this.note.type) {
- // note type influences the list of available sections the most
- // check for type is so that we don't update on each title rename
- this.lastNoteType = this.note.type;
-
- this.refresh();
- }
- }
-
- getActiveSectionWidget() {
- return this.sectionWidgets.find(ch => ch.componentId === this.lastActiveComponentId)
- }
-}
diff --git a/src/public/app/widgets/containers/ribbon_container.js b/src/public/app/widgets/containers/ribbon_container.js
new file mode 100644
index 000000000..1d26a3c9f
--- /dev/null
+++ b/src/public/app/widgets/containers/ribbon_container.js
@@ -0,0 +1,263 @@
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
+
+const TPL = `
+
`;
+
+export default class RibbonContainer extends NoteContextAwareWidget {
+ constructor() {
+ super();
+
+ this.ribbonWidgets = [];
+ this.buttonWidgets = [];
+ }
+
+ ribbon(widget) {
+ super.child(widget);
+
+ this.ribbonWidgets.push(widget);
+
+ return this;
+ }
+
+ button(widget) {
+ super.child(widget);
+
+ this.buttonWidgets.push(widget);
+
+ return this;
+ }
+
+ doRender() {
+ this.$widget = $(TPL);
+ this.overflowing();
+
+ this.$tabContainer = this.$widget.find('.ribbon-tab-container');
+ this.$buttonContainer = this.$widget.find('.ribbon-button-container');
+ this.$bodyContainer = this.$widget.find('.ribbon-body-container');
+
+ for (const ribbonWidget of this.ribbonWidgets) {
+ this.$bodyContainer.append(
+ $('
')
+ .attr('data-ribbon-component-id', ribbonWidget.componentId)
+ .append(ribbonWidget.render())
+ );
+ }
+
+ for (const buttonWidget of this.buttonWidgets) {
+ this.$buttonContainer.append(buttonWidget.render());
+ }
+
+ this.$tabContainer.on('click', '.ribbon-tab-title', e => {
+ const $ribbonTitle = $(e.target).closest('.ribbon-tab-title');
+
+ const activate = !$ribbonTitle.hasClass("active");
+
+ this.$tabContainer.find('.ribbon-tab-title').removeClass("active");
+ this.$bodyContainer.find('.ribbon-body').removeClass("active");
+
+ if (activate) {
+ const ribbonComponendId = $ribbonTitle.attr('data-ribbon-component-id');
+
+ this.lastActiveComponentId = ribbonComponendId;
+
+ this.$tabContainer.find(`.ribbon-tab-title[data-ribbon-component-id="${ribbonComponendId}"]`).addClass("active");
+ this.$bodyContainer.find(`.ribbon-body[data-ribbon-component-id="${ribbonComponendId}"]`).addClass("active");
+
+ const activeChild = this.getActiveRibbonWidget();
+
+ if (activeChild) {
+ activeChild.handleEvent('noteSwitched', {noteContext: this.noteContext, notePath: this.notePath});
+ }
+ }
+ else {
+ this.lastActiveComponentId = null;
+ }
+ });
+ }
+
+ async refreshWithNote(note, noExplicitActivation = false) {
+ this.lastNoteType = note.type;
+
+ let $ribbonTabToActivate, $lastActiveRibbon;
+
+ this.$tabContainer.empty();
+
+ for (const ribbonWidget of this.ribbonWidgets) {
+ const ret = ribbonWidget.getTitle(note);
+
+ if (!ret.show) {
+ continue;
+ }
+
+ const $ribbonTitle = $('
')
+ .attr('data-ribbon-component-id', ribbonWidget.componentId)
+ .append($('
')
+ .addClass(ret.icon)
+ .attr("title", ret.title))
+ .append(" ")
+ .append($('').text(ret.title));
+
+ this.$tabContainer.append($ribbonTitle);
+ this.$tabContainer.append('');
+
+ if (ret.activate && !this.lastActiveComponentId && !$ribbonTabToActivate && !noExplicitActivation) {
+ $ribbonTabToActivate = $ribbonTitle;
+ }
+
+ if (this.lastActiveComponentId === ribbonWidget.componentId) {
+ $lastActiveRibbon = $ribbonTitle;
+ }
+ }
+
+ this.$tabContainer.find('.ribbon-tab-title-icon').tooltip();
+
+ if (!$ribbonTabToActivate) {
+ $ribbonTabToActivate = $lastActiveRibbon;
+ }
+
+ if ($ribbonTabToActivate) {
+ $ribbonTabToActivate.trigger('click');
+ }
+ else {
+ this.$bodyContainer.find('.ribbon-body').removeClass("active");
+ }
+ }
+
+ refreshRibbonContainerCommand() {
+ this.refreshWithNote(this.note, true);
+ }
+
+ async handleEventInChildren(name, data) {
+ if (['activeContextChanged', 'setNoteContext'].includes(name)) {
+ // won't trigger .refresh();
+ await super.handleEventInChildren('setNoteContext', data);
+ }
+ else {
+ const activeRibbonWidget = this.getActiveRibbonWidget();
+
+ // forward events only to active ribbon tab, inactive ones don't need to be updated
+ if (activeRibbonWidget) {
+ await activeRibbonWidget.handleEvent(name, data);
+ }
+
+ for (const buttonWidget of this.buttonWidgets) {
+ await buttonWidget.handleEvent(name, data);
+ }
+ }
+ }
+
+ entitiesReloadedEvent({loadResults}) {
+ if (loadResults.isNoteReloaded(this.noteId) && this.lastNoteType !== this.note.type) {
+ // note type influences the list of available ribbon tabs the most
+ // check for type is so that we don't update on each title rename
+ this.lastNoteType = this.note.type;
+
+ this.refresh();
+ }
+ }
+
+ getActiveRibbonWidget() {
+ return this.ribbonWidgets.find(ch => ch.componentId === this.lastActiveComponentId)
+ }
+}
diff --git a/src/public/app/widgets/section_widgets/basic_properties.js b/src/public/app/widgets/ribbon_widgets/basic_properties.js
similarity index 100%
rename from src/public/app/widgets/section_widgets/basic_properties.js
rename to src/public/app/widgets/ribbon_widgets/basic_properties.js
diff --git a/src/public/app/widgets/section_widgets/book_properties.js b/src/public/app/widgets/ribbon_widgets/book_properties.js
similarity index 100%
rename from src/public/app/widgets/section_widgets/book_properties.js
rename to src/public/app/widgets/ribbon_widgets/book_properties.js
diff --git a/src/public/app/widgets/section_widgets/file_properties.js b/src/public/app/widgets/ribbon_widgets/file_properties.js
similarity index 100%
rename from src/public/app/widgets/section_widgets/file_properties.js
rename to src/public/app/widgets/ribbon_widgets/file_properties.js
diff --git a/src/public/app/widgets/section_widgets/image_properties.js b/src/public/app/widgets/ribbon_widgets/image_properties.js
similarity index 100%
rename from src/public/app/widgets/section_widgets/image_properties.js
rename to src/public/app/widgets/ribbon_widgets/image_properties.js
diff --git a/src/public/app/widgets/section_widgets/inherited_attribute_list.js b/src/public/app/widgets/ribbon_widgets/inherited_attribute_list.js
similarity index 100%
rename from src/public/app/widgets/section_widgets/inherited_attribute_list.js
rename to src/public/app/widgets/ribbon_widgets/inherited_attribute_list.js
diff --git a/src/public/app/widgets/section_widgets/link_map.js b/src/public/app/widgets/ribbon_widgets/link_map.js
similarity index 99%
rename from src/public/app/widgets/section_widgets/link_map.js
rename to src/public/app/widgets/ribbon_widgets/link_map.js
index 6427301e1..fb90fe114 100644
--- a/src/public/app/widgets/section_widgets/link_map.js
+++ b/src/public/app/widgets/ribbon_widgets/link_map.js
@@ -211,6 +211,7 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
const notes = await froca.getNotes(Object.keys(this.noteIdToLinkCountMap), true);
const noteIdToLinkIdMap = {};
+ noteIdToLinkIdMap[this.noteId] = new Set(); // for case there are no relations
const linksGroupedBySourceTarget = {};
for (const link of Object.values(this.linkIdToLinkMap)) {
diff --git a/src/public/app/widgets/section_widgets/note_info_widget.js b/src/public/app/widgets/ribbon_widgets/note_info_widget.js
similarity index 100%
rename from src/public/app/widgets/section_widgets/note_info_widget.js
rename to src/public/app/widgets/ribbon_widgets/note_info_widget.js
diff --git a/src/public/app/widgets/section_widgets/note_paths.js b/src/public/app/widgets/ribbon_widgets/note_paths.js
similarity index 100%
rename from src/public/app/widgets/section_widgets/note_paths.js
rename to src/public/app/widgets/ribbon_widgets/note_paths.js
diff --git a/src/public/app/widgets/section_widgets/note_properties.js b/src/public/app/widgets/ribbon_widgets/note_properties.js
similarity index 100%
rename from src/public/app/widgets/section_widgets/note_properties.js
rename to src/public/app/widgets/ribbon_widgets/note_properties.js
diff --git a/src/public/app/widgets/section_widgets/owned_attribute_list.js b/src/public/app/widgets/ribbon_widgets/owned_attribute_list.js
similarity index 100%
rename from src/public/app/widgets/section_widgets/owned_attribute_list.js
rename to src/public/app/widgets/ribbon_widgets/owned_attribute_list.js
diff --git a/src/public/app/widgets/section_widgets/promoted_attributes.js b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
similarity index 99%
rename from src/public/app/widgets/section_widgets/promoted_attributes.js
rename to src/public/app/widgets/ribbon_widgets/promoted_attributes.js
index c8ee17e78..5b8e6441e 100644
--- a/src/public/app/widgets/section_widgets/promoted_attributes.js
+++ b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
@@ -290,7 +290,7 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
this.refresh();
this.getTitle(this.note);
- this.triggerCommand('refreshSectionContainer');
+ this.triggerCommand('refreshRibbonContainer');
}
}
}
diff --git a/src/public/app/widgets/section_widgets/search_definition.js b/src/public/app/widgets/ribbon_widgets/search_definition.js
similarity index 100%
rename from src/public/app/widgets/section_widgets/search_definition.js
rename to src/public/app/widgets/ribbon_widgets/search_definition.js
diff --git a/src/public/app/widgets/section_widgets/similar_notes.js b/src/public/app/widgets/ribbon_widgets/similar_notes.js
similarity index 100%
rename from src/public/app/widgets/section_widgets/similar_notes.js
rename to src/public/app/widgets/ribbon_widgets/similar_notes.js