TypeScript widgets.Panel類代碼示例

  /**
   * 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);
  }

/**
 * Show the diff as represented by the base notebook and a list of diff entries
 */
function showDiff(data: {base: nbformat.INotebookContent, diff: IDiffEntry[]}): Promise<void> {


  let rendermime = new RenderMimeRegistry({
    initialFactories: rendererFactories,
    sanitizer: defaultSanitizer,
  });

  let nbdModel = new NotebookDiffModel(data.base, data.diff);
  let nbdWidget = new NotebookDiffWidget(nbdModel, rendermime);

  let root = document.getElementById('nbdime-root');
  if (!root) {
    throw new Error('Missing root element "nbidme-root"');
  }
  root.innerHTML = '';
  let panel = new Panel();
  panel.id = 'main';
  Widget.attach(panel, root);
  panel.addWidget(nbdWidget);
  let work = nbdWidget.init();
  work.then(() => {
    window.onresize = () => { panel.update(); };
  });
  diffWidget = nbdWidget;
  return work;
}

 it('should insert a widget at the specified index', () => {
   let panel = new Panel();
   let widget = new Widget();
   panel.addWidget(new Widget());
   panel.insertWidget(0, widget);
   expect(panel.widgets[0]).to.equal(widget);
 });

  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);
  }

 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();
   });
 });

  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;
  }

 dispose() {
   super.dispose();
   this.content.dispose();
   this.labelContent.dispose();
   this.label.dispose();
   this.previewContainer && this.previewContainer.dispose();
 }

 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();
 }