TypeScript Panel.addClass方法代碼示例

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

  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.
   *
   * @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('span');
    button.className = COLLAPSIBLE_HEADER_ICON;
    header.node.appendChild(button);

    return header;
  }

  constructor(options: Collapse.IOptions) {
    super(options);
    this.addClass(COLLAPSE_CLASS);
    this._header = new Widget();
    this._header.addClass(COLLAPSE_HEADER_CLASS);
    this._header.node.addEventListener('click', this);
    this._content = new Panel();
    this._content.addClass(COLLAPSE_CONTENTS_CLASS);

    let layout = new PanelLayout();
    this.layout = layout;
    layout.addWidget(this._header);
    layout.addWidget(this._content);
    if (options.widget) {
      this.widget = options.widget;
    }
    this.collapsed = false;
  }

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