TypeScript Panel.addClass方法代碼示例

 return new Promise<void>(resolve => {
   if (chunk.length === 1 && !(chunk[0].added || chunk[0].deleted)) {
     this.addWidget(new CellDiffWidget(
       chunk[0], rendermime, model.mimetype));
   } else {
     let chunkPanel = new Panel();
     chunkPanel.addClass(CHUNK_PANEL_CLASS);
     let addedPanel = new Panel();
     addedPanel.addClass(ADDED_CHUNK_PANEL_CLASS);
     let removedPanel = new Panel();
     removedPanel.addClass(REMOVED_CHUNK_PANEL_CLASS);
     for (let cell of chunk) {
       let target = cell.deleted ? removedPanel : addedPanel;
       target.addWidget(new CellDiffWidget(cell, rendermime, model.mimetype));
     }
     chunkPanel.addWidget(addedPanel);
     chunkPanel.addWidget(removedPanel);
     this.addWidget(chunkPanel);
   }
   // This limits us to drawing 60 cells per second, which shouldn't
   // be a problem...
   requestAnimationFrame(() => {
     resolve();
   });
 });

  constructor(inner: Widget, headerTitle?: string, collapsed?: boolean) {
    super();
    this.addClass(COLLAPSIBLE_CLASS);
    this.inner = inner;
    let constructor = this.constructor as typeof CollapsiblePanel;
    let header = constructor.createHeader(headerTitle);
    this.header = header;
    this.button = header.node.getElementsByClassName(
      COLLAPSIBLE_HEADER_ICON)[0] as HTMLElement;
    header.node.onclick = this.toggleCollapsed.bind(this);
    this.addWidget(header);
    this.container = new Panel();
    this.container.addClass(COLLAPSIBLE_CONTAINER);
    this.slider = new Panel();
    this.slider.addClass(COLLAPSIBLE_SLIDER);
    this.slider.addWidget(inner);
    this.container.addWidget(this.slider);
    this.addWidget(this.container);

    this.slider.addClass(
      collapsed === true ?
      COLLAPSIBLE_CLOSED :
      COLLAPSIBLE_OPEN);
    this.button.classList.add(
      collapsed === true ?
      COLLAPSIBLE_HEADER_ICON_CLOSED :
      COLLAPSIBLE_HEADER_ICON_OPEN);
  }

 render() {
     const manager = this.model.widget_manager
     const rendermime = manager.renderMime;
     this._outputView = new OutputArea({
         rendermime: rendermime,
         model: this.model.outputs
     })
     this.pWidget.insertWidget(0, this._outputView);
     this.pWidget.addClass('jupyter-widgets');
     this.pWidget.addClass('widget-output');
     this.update();
 }

  toggleCollapsed(): void {
    let slider = this.slider;
    let button = this.button;
    if (this.collapsed) {
      slider.removeClass(COLLAPSIBLE_CLOSED);
      slider.addClass(COLLAPSIBLE_OPEN);
      button.classList.remove(COLLAPSIBLE_HEADER_ICON_CLOSED);
      button.classList.add(COLLAPSIBLE_HEADER_ICON_OPEN);

    } else {
      slider.removeClass(COLLAPSIBLE_OPEN);
      slider.addClass(COLLAPSIBLE_CLOSED);
      button.classList.remove(COLLAPSIBLE_HEADER_ICON_OPEN);
      button.classList.add(COLLAPSIBLE_HEADER_ICON_CLOSED);
    }
  }

  /**
   * Create a dialog panel instance.
   *
   * @param options - The dialog setup options.
   */
  constructor(options: Dialog.IOptions={}) {
    super();
    this.addClass('jp-Dialog');
    options = Private.handleOptions(options);
    let renderer = options.renderer;

    this._host = options.host;
    this._defaultButton = options.defaultButton;
    this._buttons = options.buttons;
    this._buttonNodes = toArray(map(this._buttons, button => {
      return renderer.createButtonNode(button);
    }));
    this._primary = (
      options.primaryElement || this._buttonNodes[this._defaultButton]
    );

    let layout = this.layout = new PanelLayout();
    let content = new Panel();
    content.addClass('jp-Dialog-content');
    layout.addWidget(content);

    let header = renderer.createHeader(options.title);
    let body = renderer.createBody(options.body);
    let footer = renderer.createFooter(this._buttonNodes);
    content.addWidget(header);
    content.addWidget(body);
    content.addWidget(footer);
  }

  /**
   * Create a dialog panel instance.
   *
   * @param options - The dialog setup options.
   *
   * @param resolve - The function that resolves the dialog promise.
   *
   * @param reject - The function that rejects the dialog promise.
   *
   * #### Notes
   * Currently the dialog resolves with `cancelButton` rather than
   * rejecting the dialog promise.
   */
  constructor(options: IDialogOptions, resolve: (value: IButtonItem) => void, reject?: (error: any) => void) {
    super();

    if (!(options.body instanceof Widget)) {
      throw 'A widget dialog can only be created with a widget as its body.';
    }

    this.resolve = resolve;
    this.reject = reject;

    // Create the dialog nodes (except for the buttons).
    let content = new Panel();
    let header = new Widget({node: document.createElement('div')});
    let body = new Panel();
    let footer = new Widget({node: document.createElement('div')});
    let title = document.createElement('span');
    this.addClass(DIALOG_CLASS);
    if (options.dialogClass) {
      this.addClass(options.dialogClass);
    }
    content.addClass(CONTENT_CLASS);
    header.addClass(HEADER_CLASS);
    body.addClass(BODY_CLASS);
    footer.addClass(FOOTER_CLASS);
    title.className = TITLE_CLASS;
    this.addWidget(content);
    content.addWidget(header);
    content.addWidget(body);
    content.addWidget(footer);
    header.node.appendChild(title);

    // Populate the nodes.
    title.textContent = options.title || '';
    let child = options.body as Widget;
    child.addClass(BODY_CONTENT_CLASS);
    body.addWidget(child);
    this._buttons = options.buttons.slice();
    this._buttonNodes = options.buttons.map(createButton);
    this._buttonNodes.map(buttonNode => {
      footer.node.appendChild(buttonNode);
    });
    let primary = options.primary || this.lastButtonNode;
    if (typeof primary === 'number') {
      primary = this._buttonNodes[primary];
    }
    this._primary = primary as HTMLElement;
  }

  static createHeader(headerTitle?: string): Panel {
    let header = new Panel();
    header.addClass(COLLAPSIBLE_HEADER);
    if (headerTitle) {
      // let title = document.createElement('span');
      header.node.innerText = headerTitle;
      // header.appendChild(title);
    }
    let button = document.createElement('button');
    button.className = COLLAPSIBLE_HEADER_ICON;
    header.node.appendChild(button);

    return header;
  }

  /**
   *
   */
  constructor(options: NbdimeWidget.IOptions) {
    super();

    this.addClass(NBDIME_CLASS);

    this.base = options.base;
    this.remote = options.remote;
    this.rendermime = options.rendermime;

    let header = Private.diffHeader(options);
    this.addWidget(header);

    this.scroller = new Panel();
    this.scroller.addClass(ROOT_CLASS);
    this.scroller.node.tabIndex = -1;
    this.addWidget(this.scroller);

    let hideUnchangedChk = header.node.getElementsByClassName('nbdime-hide-unchanged')[0] as HTMLInputElement;
    hideUnchangedChk.onchange = () => {
      Private.toggleShowUnchanged(this.scroller.node, !hideUnchangedChk.checked);
    };

    let args: JSONObject;
    if (this.remote) {
      args = {base: this.base, remote: this.remote};
    } else if (options.baseLabel === 'Checkpoint') {
      args = {base: `checkpoint:${this.base}`}
    } else {
      args = {base: `git:${this.base}`}
    }

    let url = URLExt.join(urlRStrip(ServerConnection.defaultSettings.baseUrl), 'nbdime/api/diff');
    let promise = requestJsonPromise(url, args);
    promise.then(this.onData.bind(this)).catch(this.onError.bind(this));
    this.id = `nbdime-${JSON.stringify(args)}`;
    this.title.closable = true;
    return this;
  }

  /**
   * Create a dialog panel instance.
   *
   * @param options - The dialog setup options.
   */
  constructor(options: Partial<Dialog.IOptions<T>>={}) {
    super();
    this.addClass('jp-Dialog');
    let normalized = Private.handleOptions(options);
    let renderer = normalized.renderer;

    this._host = normalized.host;
    this._defaultButton = normalized.defaultButton;
    this._buttons = normalized.buttons;
    this._buttonNodes = toArray(map(this._buttons, button => {
      return renderer.createButtonNode(button);
    }));

    let layout = this.layout = new PanelLayout();
    let content = new Panel();
    content.addClass('jp-Dialog-content');
    layout.addWidget(content);

    this._body = normalized.body;

    let header = renderer.createHeader(normalized.title);
    let body = renderer.createBody(normalized.body);
    let footer = renderer.createFooter(this._buttonNodes);
    content.addWidget(header);
    content.addWidget(body);
    content.addWidget(footer);

    this._primary = this._buttonNodes[this._defaultButton];

    if (options.focusNodeSelector) {
      let el = body.node.querySelector(options.focusNodeSelector);
      if (el) {
        this._primary = el as HTMLElement;
      }
    }
  }

  protected init() {
    let model = this.model;

    // Add 'cell added/deleted' notifiers, as appropriate
    let CURR_DIFF_CLASSES = DIFF_CLASSES.slice();  // copy
    if (model.added) {
      this.addClass(ADDED_DIFF_CLASS);
      CURR_DIFF_CLASSES = DIFF_CLASSES.slice(1, 2);
    } else if (model.deleted) {
      this.addClass(DELETED_DIFF_CLASS);
      CURR_DIFF_CLASSES = DIFF_CLASSES.slice(0, 1);
    } else if (model.unchanged) {
      this.addClass(UNCHANGED_DIFF_CLASS);
    } else {
      this.addClass(TWOWAY_DIFF_CLASS);
    }

    // Add inputs and outputs, on a row-by-row basis
    let sourceView = CellDiffWidget.createView(
      model.source, model, CURR_DIFF_CLASSES, this._rendermime);
    sourceView.addClass(SOURCE_ROW_CLASS);
    if (model.executionCount) {
      sourceView.insertWidget(0, CellDiffWidget.createPrompts(
        model.executionCount, model));
    }
    this.addWidget(sourceView);

    if (!model.metadata.unchanged) {
      let metadataView = CellDiffWidget.createView(
        model.metadata, model, CURR_DIFF_CLASSES, this._rendermime);
      metadataView.addClass(METADATA_ROW_CLASS);
      this.addWidget(metadataView);
    }
    const chunks = model.getChunkedOutputs();
    if (hasEntries(chunks)) {
      let container = new Panel();
      container.addClass(OUTPUTS_DIFF_CLASS);
      let changed = false;
      for (let chunk of chunks) {
        if (chunk.length === 1) {
          let o = chunk[0];
          let outputsWidget = CellDiffWidget.createView(
            o, model, CURR_DIFF_CLASSES, this._rendermime);
          container.addWidget(outputsWidget);
          changed = changed || !o.unchanged || o.added || o.deleted;
        } else {
          // Create add/remove chunk wrappers
          let chunkPanel = new Panel();
          chunkPanel.addClass(CHUNK_PANEL_CLASS);
          let addedPanel = new Panel();
          addedPanel.addClass(ADDED_CHUNK_PANEL_CLASS);
          let removedPanel = new Panel();
          removedPanel.addClass(REMOVED_CHUNK_PANEL_CLASS);
          for (let o of chunk) {
            let target = o.deleted ? removedPanel : addedPanel;
            let outputsWidget = CellDiffWidget.createView(
              o, model, CURR_DIFF_CLASSES, this._rendermime);
            target.addWidget(outputsWidget);
            changed = changed || !o.unchanged || o.added || o.deleted;
          }
          chunkPanel.addWidget(addedPanel);
          chunkPanel.addWidget(removedPanel);
          container.addWidget(chunkPanel);
        }
      }
      if (model.added || model.deleted) {
        container.addClass(OUTPUTS_ROW_CLASS);
        this.addWidget(container);
      } else {
        let collapsed = !changed;
        let header = changed ? 'Outputs changed' : 'Outputs unchanged';
        let collapser = new CollapsiblePanel(container, header, collapsed);
        collapser.addClass(OUTPUTS_ROW_CLASS);
        this.addWidget(collapser);
      }
    }
  }