')
+ .attr('data-section-component-id', widget.componentId)
.append(widget.renderTitle())
);
@@ -55,8 +101,27 @@ export default class CollapsibleSectionContainer extends AbstractContainer {
this.$bodyContainer.append(
$('
')
+ .attr('data-section-component-id', widget.componentId)
.append(widget.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) {
+ this.$titleContainer.find(`.section-title-real[data-section-component-id="${$sectionTitle.attr('data-section-component-id')}"]`).addClass("active");
+ this.$bodyContainer.find(`.section-body[data-section-component-id="${$sectionTitle.attr('data-section-component-id')}"]`).addClass("active");
+ }
+ });
+ }
+
+ async refreshWithNote(note) {
+ this.$titleContainer.find('.section-title-real:first').trigger('click');
}
}
diff --git a/src/public/app/widgets/flex_container.js b/src/public/app/widgets/flex_container.js
index cff7f176a..d2e90842d 100644
--- a/src/public/app/widgets/flex_container.js
+++ b/src/public/app/widgets/flex_container.js
@@ -1,6 +1,6 @@
-import AbstractContainer from "./abstract_container.js";
+import BasicWidget from "./basic_widget.js";
-export default class FlexContainer extends AbstractContainer {
+export default class FlexContainer extends BasicWidget {
constructor(direction) {
super();
@@ -9,6 +9,29 @@ export default class FlexContainer extends AbstractContainer {
}
this.attrs.style = `display: flex; flex-direction: ${direction};`;
+
+ this.children = [];
+
+ this.positionCounter = 10;
+ }
+
+ child(...components) {
+ if (!components) {
+ return this;
+ }
+
+ super.child(...components);
+
+ for (const component of components) {
+ if (!component.position) {
+ component.position = this.positionCounter;
+ this.positionCounter += 10;
+ }
+ }
+
+ this.children.sort((a, b) => a.position - b.position < 0 ? -1 : 1);
+
+ return this;
}
doRender() {
diff --git a/src/public/app/widgets/inherited_attribute_list.js b/src/public/app/widgets/inherited_attribute_list.js
new file mode 100644
index 000000000..63360c119
--- /dev/null
+++ b/src/public/app/widgets/inherited_attribute_list.js
@@ -0,0 +1,66 @@
+import TabAwareWidget from "./tab_aware_widget.js";
+import AttributeDetailWidget from "./attribute_detail.js";
+import attributeRenderer from "../services/attribute_renderer.js";
+
+const TPL = `
+
`
+
+export default class InheritedAttributesWidget extends TabAwareWidget {
+ constructor() {
+ super();
+
+ this.attributeDetailWidget = new AttributeDetailWidget().setParent(this);
+ this.child(this.attributeDetailWidget);
+ }
+
+ renderTitle() {
+ this.$title = $('
').text('Inherited attributes');
+ return this.$title;
+ }
+
+ doRender() {
+ this.$widget = $(TPL);
+ this.contentSized();
+
+ this.$container = this.$widget.find('.inherited-attributes-container');
+ this.$widget.append(this.attributeDetailWidget.render());
+ }
+
+ async refreshWithNote(note) {
+ this.$container.empty();
+
+ const inheritedAttributes = note.getAttributes().filter(attr => attr.noteId !== this.noteId);
+
+ for (const attribute of inheritedAttributes) {
+ const $attr = (await attributeRenderer.renderAttribute(attribute, false))
+ .on('click', e => this.attributeDetailWidget.showAttributeDetail({
+ attribute: {
+ noteId: attribute.noteId,
+ type: attribute.type,
+ name: attribute.name,
+ value: attribute.value
+ },
+ isOwned: false,
+ x: e.pageX,
+ y: e.pageY
+ }));
+
+ this.$container
+ .append($attr)
+ .append(" ");
+ }
+ }
+}
diff --git a/src/public/app/widgets/owned_attribute_list.js b/src/public/app/widgets/owned_attribute_list.js
new file mode 100644
index 000000000..11b5d38c1
--- /dev/null
+++ b/src/public/app/widgets/owned_attribute_list.js
@@ -0,0 +1,63 @@
+import TabAwareWidget from "./tab_aware_widget.js";
+import AttributeDetailWidget from "./attribute_detail.js";
+import AttributeEditorWidget from "./attribute_editor.js";
+
+const TPL = `
+
+`;
+
+export default class OwnedAttributeListWidget extends TabAwareWidget {
+ constructor() {
+ super();
+
+ this.attributeDetailWidget = new AttributeDetailWidget().setParent(this);
+ this.attributeEditorWidget = new AttributeEditorWidget(this.attributeDetailWidget).setParent(this);
+
+ this.child(this.attributeEditorWidget, this.attributeDetailWidget);
+ }
+
+ renderTitle() {
+ this.$title = $('
').text('Owned attributes');
+ return this.$title;
+ }
+
+ doRender() {
+ this.$widget = $(TPL);
+ this.overflowing();
+
+ this.$widget.find('.attr-editor-placeholder').replaceWith(this.attributeEditorWidget.render());
+ this.$widget.append(this.attributeDetailWidget.render());
+ }
+
+ async saveAttributesCommand() {
+ await this.attributeEditorWidget.save();
+ }
+
+ async reloadAttributesCommand() {
+ await this.attributeEditorWidget.refresh();
+ }
+
+ async updateAttributeListCommand({attributes}) {
+ await this.attributeEditorWidget.updateAttributeList(attributes);
+ }
+
+ entitiesReloadedEvent({loadResults}) {
+ if (loadResults.getAttributes(this.componentId).find(attr => attr.isAffecting(this.note))) {
+ this.refreshWithNote(this.note, true);
+ }
+ }
+}