Fix doc and format

jupyterlab · Jul 26, 2021 · 78b2339 · 78b2339
1 parent 4ea5797
commit 78b2339
Show file tree

Hide file tree

Showing 5 changed files with 208 additions and 168 deletions.
diff --git a/examples/example-accordionpanel/src/index.ts b/examples/example-accordionpanel/src/index.ts
@@ -1,20 +1,20 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import "es6-promise/auto"; // polyfill Promise on IE
+import 'es6-promise/auto'; // polyfill Promise on IE
 
-import { Message } from "@lumino/messaging";
+import { Message } from '@lumino/messaging';
 
-import { AccordionPanel, BoxPanel, Widget } from "@lumino/widgets";
+import { AccordionPanel, BoxPanel, Widget } from '@lumino/widgets';
 
-import "../style/index.css";
+import '../style/index.css';
 
 class ContentWidget extends Widget {
   static createNode(): HTMLElement {
-    let node = document.createElement("div");
-    let content = document.createElement("div");
-    let input = document.createElement("input");
-    input.placeholder = "Placeholder...";
+    let node = document.createElement('div');
+    let content = document.createElement('div');
+    let input = document.createElement('input');
+    input.placeholder = 'Placeholder...';
     content.appendChild(input);
     node.appendChild(content);
     return node;
@@ -23,15 +23,15 @@ class ContentWidget extends Widget {
   constructor(name: string) {
     super({ node: ContentWidget.createNode() });
     this.setFlag(Widget.Flag.DisallowLayout);
-    this.addClass("content");
+    this.addClass('content');
     this.addClass(name.toLowerCase());
     this.title.label = name;
     this.title.closable = true;
     this.title.caption = `Long description for: ${name}`;
   }
 
   get inputNode(): HTMLInputElement {
-    return this.node.getElementsByTagName("input")[0] as HTMLInputElement;
+    return this.node.getElementsByTagName('input')[0] as HTMLInputElement;
   }
 
   protected onActivateRequest(msg: Message): void {
@@ -42,25 +42,21 @@ class ContentWidget extends Widget {
 }
 
 function main(): void {
-  const accordion = new AccordionPanel({ orientation: "vertical" });
-  accordion.id = "accordion";
+  const accordion = new AccordionPanel();
+  accordion.id = 'accordion';
 
-  const r1 = new ContentWidget("Red");
-  const b1 = new ContentWidget("Blue");
-  const g1 = new ContentWidget("Green");
-  // const y1 = new ContentWidget("Yellow");
-
-  // const r2 = new ContentWidget('Red');
-  // const b2 = new ContentWidget('Blue');
+  const r1 = new ContentWidget('Red');
+  const b1 = new ContentWidget('Blue');
+  const g1 = new ContentWidget('Green');
+
   accordion.addWidget(r1);
   accordion.addWidget(b1);
   accordion.addWidget(g1);
-  // accordion.addWidget(y1);
 
   BoxPanel.setStretch(accordion, 1);
 
-  const main = new BoxPanel({ direction: "left-to-right", spacing: 0 });
-  main.id = "main";
+  const main = new BoxPanel({ direction: 'left-to-right', spacing: 0 });
+  main.id = 'main';
   main.addWidget(accordion);
 
   window.onresize = () => {

diff --git a/packages/widgets/src/accordionlayout.ts b/packages/widgets/src/accordionlayout.ts
@@ -76,18 +76,18 @@ 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");
+    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);
 
     // Add the title node to the parent before the widget.
     this.parent!.node.appendChild(title);
 
-    widget.node.setAttribute("role", "region")
-    widget.node.setAttribute("aria-labelledby", title.id)
+    widget.node.setAttribute('role', 'region')
+    widget.node.setAttribute('aria-labelledby', title.id)
 
     super.attachWidget(index, widget);
   }
@@ -128,6 +128,17 @@ export class AccordionLayout extends SplitLayout {
     super.detachWidget(index, widget);
   }
 
+  /**
+   * Update the item position.
+   * 
+   * @param i Item index
+   * @param isHorizontal Whether the layout is horizontal or not
+   * @param left Left position in pixels
+   * @param top Top position in pixels
+   * @param height Item height
+   * @param width Item width
+   * @param size Item size
+   */
   protected updateItemPosition(
     i: number,
     isHorizontal: boolean,
@@ -173,7 +184,7 @@ export namespace AccordionLayout {
    */
   export interface IOptions extends SplitLayout.IOptions {
     /**
-     * The renderer to use for the split layout.
+     * The renderer to use for the accordion layout.
      */
     renderer: IRenderer;
 
@@ -206,6 +217,13 @@ export namespace AccordionLayout {
 }
 
 namespace Private {
+  /**
+   * Create the title HTML element.
+   *
+   * @param renderer Accordion renderer
+   * @param data Widget title
+   * @returns Title HTML element
+   */
   export function createTitle(
     renderer: AccordionLayout.IRenderer,
     data: Title<Widget>