TypeScript phosphor-widget.Widget類代碼示例

function createContent(title: string): Widget {
  let widget = new Widget();
  widget.addClass('content');
  widget.addClass(title.toLowerCase());
  widget.title.text = title;
  widget.title.closable = true;
  return widget;
}

  /**
   * Create a placeholder content widget.
   */
  function createPlaceholder(title: string, color: string): Widget {
    let widget = new Widget();
    widget.addClass('content');
    widget.addClass(color);

    widget.title.text = title;
    widget.title.closable = true;

    return widget;
  }

/**
 * The main application entry point.
 */
function main(): void {
  var contextArea = new Widget();
  contextArea.addClass('ContextArea');
  contextArea.node.innerHTML = (
    '<h2>Notice the menu bar at the top of the document.</h2>' +
    '<h2>Right click this panel for a context menu.</h2>' +
    '<h3>Clicked Item: <span id="log-span"></span></h3>'
  );
  contextArea.title.text = 'Demo';

  var cmSource = new CodeMirrorWidget({
    mode: 'text/javascript',
    lineNumbers: true,
    tabSize: 2,
  });
  cmSource.loadTarget('./index.ts');
  cmSource.title.text = 'Source';

  var cmCss = new CodeMirrorWidget({
    mode: 'text/css',
    lineNumbers: true,
    tabSize: 2,
  });
  cmCss.loadTarget('./index.css');
  cmCss.title.text = 'CSS';

  var contextMenu = createContextMenu();
  contextArea.node.addEventListener('contextmenu', (event: MouseEvent) => {
    event.preventDefault();
    var x = event.clientX;
    var y = event.clientY;
    contextMenu.popup(x, y);
  });

  var menuBar = createMenuBar();

  var panel = new TabPanel();
  panel.id = 'main';
  panel.addChild(contextArea);
  panel.addChild(cmSource);
  panel.addChild(cmCss);

  menuBar.attach(document.body);
  panel.attach(document.body);

  window.onresize = () => { panel.update() };
}

 this._listdispose = follow<ICellModel>(model.cells, this, (c: ICellModel) => {
   let w: Widget;
   switch(c.type) {
   case CellType.Code:
     w = new CodeCellWidget(c as CodeCellModel);
     break;
   case CellType.Markdown:
     w = new MarkdownCellWidget(c as MarkdownCellModel);
     break;
   default:
     // if there are any issues, just return a blank placeholder
     // widget so the lists stay in sync
     w = new Widget();
   }
   w.addClass(NB_CELL_CLASS);
   return w;
 })

 /**
  * 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);
   let layout = this.layout as PanelLayout;
   let index = names.indexOf(after);
   if (index === -1) {
     layout.addChild(widget);
   } else {
     layout.insertChild(index + 1, widget);
   }
   Private.nameProperty.set(widget, name);
 }

function activateLanding(app: Application, services: ServiceManager): void {
  let widget = new Widget();
  widget.id = 'landing-jupyterlab';
  widget.title.text = 'Launcher';
  widget.title.closable = true;
  widget.addClass('jp-Landing');

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

  let title = document.createElement('span');
  title.textContent = 'Welcome to';
  title.className = 'jp-Landing-title';
  dialog.appendChild(title);

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

  let subtitle = document.createElement('span');
  subtitle.textContent = 'alpha preview';
  subtitle.className = 'jp-Landing-subtitle';
  dialog.appendChild(subtitle);

  let subtext = document.createElement('span');
  subtext.textContent = 'This is not ready for general usage yet.';
  subtext.className = 'jp-Landing-subtext';
  dialog.appendChild(subtext);

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

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

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

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

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

  app.commands.add([{
    id: 'jupyterlab-launcher:show',
    handler: () => {
      if (!widget.isAttached) {
        app.shell.addToMainArea(widget);
      }
      app.shell.activateMain(widget.id);
    }
  }]);

  app.palette.add([{
    command: 'jupyterlab-launcher:show',
    text: 'JupyterLab Launcher',
    category: 'Help'
  }]);

//.........這裏部分代碼省略.........

function createContent(name: string): Widget {
  let widget = new Widget();
  widget.addClass('content');
  widget.addClass(name);
  return widget;
}

function activateLanding(app: Application, services: ServiceManager, pathTracker: PathTracker): void {
  let widget = new Widget();
  widget.id = 'landing-jupyterlab';
  widget.title.text = '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');
  subtitle.textContent = previewMessages[Math.floor(Math.random()*previewMessages.length)];
  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');
  });

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

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

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

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

  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 > '
      var 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);

//.........這裏部分代碼省略.........

function activateRed(app: Application): Promise<void> {
  let widget = new Widget();
  widget.id = 'red';
  widget.title.text = 'Red';
  widget.addClass('red-content');

  let commandItems = [
    createCommandItem('red:show-0', 'Red is best!'),
    createCommandItem('red:show-1', 'Red number one'),
    createCommandItem('red:show-2', 'Red number two'),
    createCommandItem('red:show-3', 'Red number three'),
    createCommandItem('red:show-4', 'Red number four'),
    createCommandItem('red:show-5', 'Red number five')
  ];

  let paletteItems = [
    {
      command: 'red:show-0',
      text: 'Red 0',
      caption: 'Red is best!',
      category: 'All Colours'
    },
    {
      command: 'red:show-1',
      text: 'Red 1',
      caption: 'Red number one',
      category: 'Red'
    },
    {
      command: 'red:show-2',
      text: 'Red 2',
      caption: 'Red number two',
      category: 'Red'
    },
    {
      command: 'red:show-3',
      text: 'Red 3',
      caption: 'Red number three',
      category: 'Red'
    },
    {
      command: 'red:show-4',
      text: 'Red 4',
      caption: 'Red number four',
      category: 'Red'
    },
    {
      command: 'red:show-5',
      text: 'Red 5',
      caption: 'Red number five',
      category: 'Red'
    }
  ];

  let shortcutItems = [
    {
      sequence: ['Ctrl R'],
      selector: '*',
      command: 'red:show-0'
    }
  ];

  app.commands.add(commandItems);

  app.shortcuts.add(shortcutItems);

  app.palette.add(paletteItems);

  app.shell.addToRightArea(widget, { rank: 30 });

  return Promise.resolve<void>();
}

function activateLanding(app: Application): void {
  let widget = new Widget();
  widget.id = 'landing-jupyterlab';
  widget.title.text = 'JupyterLab';
  widget.title.closable = true;
  widget.addClass('jp-Landing');

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

  let title = document.createElement('span');
  title.textContent = 'Welcome to';
  title.className = 'jp-Landing-title';
  dialog.appendChild(title);

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

  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', '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-Landing-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-Landing-imageNotebook')[0];
  img.addEventListener('click', () => {
    app.commands.execute('notebook:create-new');
  });

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

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

  app.commands.add([{
    id: 'jupyterlab-launcher:show',
    handler: () => {
      if (!widget.isAttached) app.shell.addToMainArea(widget);
      app.shell.activateMain(widget.id);
    }
  }]);

  app.palette.add([{
    command: 'jupyterlab-launcher:show',
    text: 'JupyterLab Launcher',
    category: 'Help'
  }]);

  app.shell.addToMainArea(widget);
}