TypeScript Panel.addWidget方法代码示例

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

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

 set widget(widget: Widget) {
   let oldWidget = this._widget;
   if (oldWidget) {
     oldWidget.disposed.disconnect(this._onChildDisposed, this);
     oldWidget.title.changed.disconnect(this._onTitleChanged, this);
     this._content.layout.removeWidget(oldWidget);
   }
   this._widget = widget;
   widget.disposed.connect(this._onChildDisposed, this);
   widget.title.changed.connect(this._onTitleChanged, this);
   this._onTitleChanged(widget.title);
   this._content.addWidget(widget);
 }

/**
 * Show the merge as represented by the base notebook and a
 * list of merge decisions
 */
function showMerge(data: {
    base: nbformat.INotebookContent,
    merge_decisions: IMergeDecision[]
    }): NotebookMergeWidget {
  const transformers = [
    new JavascriptRenderer(),
    new MarkdownRenderer(),
    new HTMLRenderer(),
    new ImageRenderer(),
    new SVGRenderer(),
    new LatexRenderer(),
    new TextRenderer()
  ];

  let renderers: RenderMime.MimeMap<RenderMime.IRenderer> = {};
  let order: string[] = [];
  for (let t of transformers) {
    for (let m of t.mimetypes) {
      renderers[m] = t;
      order.push(m);
    }
  }
  let rendermime = new RenderMime({
    renderers: renderers, order: order, sanitizer: defaultSanitizer});

  let nbmModel = new NotebookMergeModel(data.base,
      data.merge_decisions);
  let nbmWidget = new NotebookMergeWidget(nbmModel, 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(nbmWidget);
  let work = nbmWidget.init();
  work.then(() => {
    window.onresize = () => { panel.update(); };
  });
  return nbmWidget;
}

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

    // Add 'cell added/deleted' notifiers, as appropriate
    let CURR_DIFF_CLASSES = DIFF_CLASSES.slice();  // copy
    if (model.added) {
      let widget = new Widget();
      widget.node.textContent = 'Cell added';
      widget.addClass(ADD_DEL_LABEL_CLASS);
      this.addWidget(widget);
      this.addClass(ADDED_DIFF_CLASS);
      CURR_DIFF_CLASSES = DIFF_CLASSES.slice(1, 2);
    } else if (model.deleted) {
      let widget = new Widget();
      widget.node.textContent = 'Cell deleted';
      widget.addClass(ADD_DEL_LABEL_CLASS);
      this.addWidget(widget);
      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);
    }
    if (hasEntries(model.outputs)) {
      let container = new Panel();
      let changed = false;
      for (let o of model.outputs) {
        let outputsWidget = CellDiffWidget.createView(
          o, model, CURR_DIFF_CLASSES, this._rendermime);
        container.addWidget(outputsWidget);
        changed = changed || !o.unchanged || o.added || o.deleted;
      }
      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);
      }
    }
  }

 /**
  * Create a new sub-view.
  */
 static
 createView(model: IDiffModel, parent: CellDiffModel,
            editorClasses: string[], rendermime: IRenderMime): Panel {
   let view: Widget | null = null;
   if (model instanceof StringDiffModel) {
     if (model.unchanged && parent.cellType === 'markdown') {
       view = rendermime.render({bundle: {'text/markdown': model.base!}});
     } else {
       view = createNbdimeMergeView(model);
     }
   } else if (model instanceof OutputDiffModel) {
     // Take one of three actions, depending on output types
     // 1) Text-type output: Show a MergeView with text diff.
     // 2) Renderable types: Side-by-side comparison.
     // 3) Unknown types: Stringified JSON diff.
     // If the model is one-sided or unchanged, option 2) is preferred to 1)
     let renderable = RenderableOutputView.canRenderUntrusted(model);
     for (let mt of rendermime.order) {
       let key = model.hasMimeType(mt);
       if (key) {
         if (!renderable ||
             !(model.added || model.deleted || model.unchanged) &&
             valueIn(mt, stringDiffMimeTypes)) {
           // 1.
           view = createNbdimeMergeView(model.stringify(key));
         } else if (renderable) {
           // 2.
           view = new RenderableOutputView(model, editorClasses, rendermime);
         }
         break;
       }
     }
     if (!view) {
       // 3.
       view = createNbdimeMergeView(model.stringify());
     }
   } else {
     throw new Error('Unrecognized model type.');
   }
   if (model.collapsible) {
     view = new CollapsiblePanel(
         view, model.collapsibleHeader, model.startCollapsed);
   }
   let container = new Panel();
   if (model instanceof OutputDiffModel) {
     if (model.added) {
       if (!parent.added) {
         // Implies this is added output
         let addSpacer = new Widget();
         addSpacer.node.textContent = 'Output added';
         addSpacer.addClass(ADD_DEL_LABEL_CLASS);
         container.addWidget(addSpacer);
       }
       container.addClass(ADDED_DIFF_CLASS);
     } else if (model.deleted) {
       if (!parent.deleted) {
         // Implies this is deleted output
         let delSpacer = new Widget();
         delSpacer.node.textContent = 'Output deleted';
         delSpacer.addClass(ADD_DEL_LABEL_CLASS);
         container.addWidget(delSpacer);
       }
       container.addClass(DELETED_DIFF_CLASS);
     } else if (model.unchanged) {
       container.addClass(UNCHANGED_DIFF_CLASS);
     } else {
       container.addClass(TWOWAY_DIFF_CLASS);
     }
   }
   container.addWidget(view);
   return container;
 }