Merge pull request #249 from hbcarlos/update_title

Update title in AccordionPanel

Author: Steven Silvester

packages/widgets/src/accordionlayout.ts

@@ -68,6 +68,16 @@ export class AccordionLayout extends SplitLayout {
    */
   readonly renderer: AccordionLayout.IRenderer;
 
+  public updateTitle(index: number, widget: Widget): void {
+    const oldTitle = this._titles[index];
+    const expanded = oldTitle.classList.contains('lm-mod-expanded');
+    const newTitle = Private.createTitle(this.renderer, widget.title, expanded);
+    this._titles[index] = newTitle;
+
+    // Add the title node to the parent before the widget.
+    this.parent!.node.replaceChild(newTitle, oldTitle);
+  }
+
   /**
    * Attach a widget to the parent's DOM node.
    *
@@ -77,11 +87,6 @@ export class AccordionLayout extends SplitLayout {
    */
   protected attachWidget(index: number, widget: Widget): void {
     const title = Private.createTitle(this.renderer, widget.title);
-    title.style.position = 'absolute';
-    title.setAttribute('aria-label', `${widget.title.label} Section`);
-    title.setAttribute('aria-expanded', 'true');
-    title.setAttribute('aria-controls', widget.id);
-    title.classList.add('lm-mod-expanded');
 
     ArrayExt.insert(this._titles, index, title);
 
@@ -226,8 +231,17 @@ namespace Private {
    */
   export function createTitle(
     renderer: AccordionLayout.IRenderer,
-    data: Title<Widget>
+    data: Title<Widget>,
+    expanded: boolean = true
   ): HTMLElement {
-    return renderer.createSectionTitle(data);
+    const title = renderer.createSectionTitle(data);
+    title.style.position = 'absolute';
+    title.setAttribute('aria-label', `${data.label} Section`);
+    title.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+    title.setAttribute('aria-controls', data.owner.id);
+    if (expanded) {
+      title.classList.add('lm-mod-expanded');
+    }
+    return title;
   }
 }

packages/widgets/src/accordionpanel.ts

@@ -53,6 +53,34 @@ export class AccordionPanel extends SplitPanel {
     return (this.layout as AccordionLayout).titles;
   }
 
+  /**
+   * Add a widget to the end of the panel.
+   *
+   * @param widget - The widget to add to the panel.
+   *
+   * #### Notes
+   * If the widget is already contained in the panel, it will be moved.
+   */
+  addWidget(widget: Widget): void {
+    super.addWidget(widget);
+    widget.title.changed.connect(this._onTitleChanged, this);
+  }
+
+  /**
+   * Insert a widget at the specified index.
+   *
+   * @param index - The index at which to insert the widget.
+   *
+   * @param widget - The widget to insert into to the panel.
+   *
+   * #### Notes
+   * If the widget is already contained in the panel, it will be moved.
+   */
+  insertWidget(index: number, widget: Widget): void {
+    super.insertWidget(index, widget);
+    widget.title.changed.connect(this._onTitleChanged, this);
+  }
+
   /**
    * Handle the DOM events for the accordion panel.
    *
@@ -93,6 +121,20 @@ export class AccordionPanel extends SplitPanel {
     this.node.removeEventListener('keydown', this);
   }
 
+  /**
+   * Handle the `changed` signal of a title object.
+   */
+  private _onTitleChanged(sender: Title<Widget>): void {
+    const index = ArrayExt.findFirstIndex(this.widgets, widget => {
+      return widget.contains(sender.owner);
+    });
+
+    if (index >= 0) {
+      (this.layout as AccordionLayout).updateTitle(index, sender.owner);
+      this.update();
+    }
+  }
+
   /**
    * Handle the `'click'` event for the accordion panel
    */

packages/widgets/tests/src/accordionpanel.spec.ts

@@ -123,6 +123,18 @@ describe('@lumino/widgets', () => {
         });
         expect(panel.titles.length).to.equal(widgets.length);
       });
+
+      it('should update the title element', () => {
+        const text = 'Something';
+        let panel = new AccordionPanel();
+        let widget = new Widget();
+        panel.addWidget(widget);
+        widget.title.label = text;
+        const el = panel.titles[0].querySelector(
+          '.lm-AccordionPanel-titleLabel'
+        )!;
+        expect(el.textContent).to.equal(text);
+      });
     });
 
     describe('#handleEvent()', () => {