TypeScript Widget.addClass方法代碼示例

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

function createKernelNameItem(kernelOwner: IKernelOwner): Widget {
  let widget = new Widget();
  widget.addClass(TOOLBAR_KERNEL_CLASS);
  updateKernelNameItem(widget, kernelOwner.kernel);
  kernelOwner.kernelChanged.connect(() => {
    updateKernelNameItem(widget, kernelOwner.kernel);
  });
  return widget;
}

 /**
  * Add an item to the toolbar.
  *
  * @param name - The name of the widget to add to the toolbar.
  *
  * @param widget - The widget to add to the toolbar.
  *
  * @param after - The optional name of the item to insert after.
  *
  * #### Notes
  * An error is thrown if a widget of the same name is already given.
  * If `after` is not given, or the named widget is not in the toolbar,
  * the widget will be added to the end of the toolbar.
  */
 add(name: string, widget: Widget, after?: string): void {
   let names = this.list();
   if (names.indexOf(name) !== -1) {
     throw new Error(`A button named "${name}" was already added`);
   }
   widget.addClass(TOOLBAR_ITEM_CLASS);
   let layout = this.layout as PanelLayout;
   let index = names.indexOf(after);
   if (index === -1) {
     layout.addWidget(widget);
   } else {
     layout.insertWidget(index + 1, widget);
   }
   Private.nameProperty.set(widget, name);
 }

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

 static createPrompts(model: ImmutableDiffModel, parent: CellDiffModel): Panel {
   let prompts: string[] = [];
   if (!parent.added) {
     let base = model.base as number | null;
     let baseStr = `In [${base || ' '}]:`;
     prompts.push(baseStr);
   }
   if (!parent.unchanged && !parent.deleted) {
     let remote = model.remote as number | null;
     let remoteStr = `In [${remote || ' '}]:`;
     prompts.push(remoteStr);
   }
   let container = new FlexPanel({direction: 'left-to-right'});
   for (let text of prompts) {
     let w = new Widget();
     w.node.innerText = text;
     w.addClass(PROMPT_CLASS);
     container.addWidget(w);
     FlexPanel.setGrow(w, 1);
   }
   return container;
 }

function activateLanding(app: JupyterLab, services: IServiceManager, pathTracker: IPathTracker, palette: ICommandPalette): void {
  let widget = new Widget();
  widget.id = 'landing-jupyterlab';
  widget.title.label = 'Launcher';
  widget.title.closable = true;
  widget.addClass('jp-Landing');

  let dialog = document.createElement('div');
  dialog.className = 'jp-Landing-dialog';
  widget.node.appendChild(dialog);

  let logo = document.createElement('span');
  logo.className = 'jp-ImageJupyterLab jp-Landing-logo';
  dialog.appendChild(logo);

  let previewMessages = ['super alpha preview', 'very alpha preview', 'extremely alpha preview', 'exceedingly alpha preview', 'alpha alpha preview'];
  let subtitle = document.createElement('span');
  let index = Math.floor(Math.random() * previewMessages.length);
  subtitle.textContent = previewMessages[index];
  subtitle.className = 'jp-Landing-subtitle';
  dialog.appendChild(subtitle);

  let tour = document.createElement('span');
  tour.className = 'jp-Landing-tour';
  dialog.appendChild(tour);
  tour.addEventListener('click', () => {
    app.commands.execute('about-jupyterlab:show', void 0);
  });

  let header = document.createElement('span');
  header.textContent = 'Start a new activity';
  header.className = 'jp-Landing-header';
  dialog.appendChild(header);

  let body = document.createElement('div');
  body.className = 'jp-Landing-body';
  dialog.appendChild(body);

  for (let name of ['Notebook', 'Console', 'Terminal', 'Text Editor']) {
    let column = document.createElement('div');
    body.appendChild(column);
    column.className = 'jp-Landing-column';

    let img = document.createElement('span');
    let imgName = name.replace(' ', '');
    img.className = `jp-Image${imgName} jp-Landing-image`;

    column.appendChild(img);

    let text = document.createElement('span');
    text.textContent = name;
    text.className = 'jp-Landing-text';
    column.appendChild(text);
  }

  let img = body.getElementsByClassName('jp-ImageNotebook')[0];
  img.addEventListener('click', () => {
    app.commands.execute('file-operations:new-notebook', void 0);
  });

  img = body.getElementsByClassName('jp-ImageConsole')[0];
  img.addEventListener('click', () => {
    app.commands.execute(`console:create-${services.kernelspecs.default}`, void 0);
  });

  img = body.getElementsByClassName('jp-ImageTextEditor')[0];
  img.addEventListener('click', () => {
    app.commands.execute('file-operations:new-text-file', void 0);
  });

  img = body.getElementsByClassName('jp-ImageTerminal')[0];
  img.addEventListener('click', () => {
    app.commands.execute('terminal:create-new', void 0);
  });

  let cwd = document.createElement('div');
  cwd.className = 'jp-Landing-cwd';


  let folderImage = document.createElement('span');
  folderImage.className = 'jp-Landing-folder';


  let path = document.createElement('span');
  path.textContent = 'home';
  pathTracker.pathChanged.connect(() => {
    if (pathTracker.path.length > 0) {
      path.textContent = 'home > ';
      let path2 = pathTracker.path;
      path2 = path2.replace('/', ' > ');
      path.textContent += path2;
    } else {
      path.textContent = 'home';
    }
  });
  path.className = 'jp-Landing-path';

  cwd.appendChild(folderImage);
  cwd.appendChild(path);
  dialog.appendChild(cwd);
//.........這裏部分代碼省略.........

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

 protected createNewWidget(context: DocumentRegistry.Context): Widget {
   let widget = new Widget();
   widget.addClass('WidgetFactory');
   return widget;
 }