TypeScript widgets.Menu類代碼示例

  node.addEventListener('contextmenu', (event: MouseEvent) => {
    event.preventDefault();
    let path = fbWidget.pathForClick(event) || '';
    let ext = DocumentRegistry.extname(path);
    let factories = registry.preferredWidgetFactories(ext);
    let widgetNames = toArray(map(factories, factory => factory.name));
    let prefix = `${namespace}-contextmenu-${++Private.id}`;
    let openWith: Menu = null;
    if (path && widgetNames.length > 1) {
      let disposables = new DisposableSet();
      let command: string;

      openWith = new Menu({ commands });
      openWith.title.label = 'Open With...';
      openWith.disposed.connect(() => { disposables.dispose(); });

      for (let widgetName of widgetNames) {
        command = `${prefix}:${widgetName}`;
        disposables.add(commands.addCommand(command, {
          execute: () => fbWidget.openPath(path, widgetName),
          label: widgetName
        }));
        openWith.addItem({ command });
      }
    }

    let menu = createContextMenu(fbWidget, openWith);
    menu.open(event.clientX, event.clientY);
  });

  activate: (
    app: JupyterFrontEnd,
    statusBar: IStatusBar,
    editorTracker: IEditorTracker,
    settingRegistry: ISettingRegistry
  ) => {
    // Create a menu for switching tabs vs spaces.
    const menu = new Menu({ commands: app.commands });
    const command = 'fileeditor:change-tabs';
    const { shell } = app;
    const args: JSONObject = {
      insertSpaces: false,
      size: 4,
      name: 'Indent with Tab'
    };
    menu.addItem({ command, args });
    for (let size of [1, 2, 4, 8]) {
      let args: JSONObject = {
        insertSpaces: true,
        size,
        name: `Spaces: ${size} `
      };
      menu.addItem({ command, args });
    }

    // Create the status item.
    const item = new TabSpaceStatus({ menu });

    // Keep a reference to the code editor config from the settings system.
    const updateSettings = (settings: ISettingRegistry.ISettings): void => {
      const cached = settings.get('editorConfig').composite as Partial<
        CodeEditor.IConfig
      >;
      const config: CodeEditor.IConfig = {
        ...CodeEditor.defaultConfig,
        ...cached
      };
      item.model!.config = config;
    };
    void Promise.all([
      settingRegistry.load('@jupyterlab/fileeditor-extension:plugin'),
      app.restored
    ]).then(([settings]) => {
      updateSettings(settings);
      settings.changed.connect(updateSettings);
    });

    // Add the status item.
    statusBar.registerStatusItem(
      '@jupyterlab/fileeditor-extension:tab-space-status',
      {
        item,
        align: 'right',
        rank: 1,
        isActive: () => {
          return shell.currentWidget && editorTracker.has(shell.currentWidget);
        }
      }
    );
  }

/**
 * Create a top level menu for the file browser.
 */
function createMenu(app: JupyterLab): Menu {
  const { commands } = app;
  const menu = new Menu({ commands });

  menu.title.label = 'File';
  [
    CommandIDs.createLauncher,
    'docmanager:save',
    'docmanager:save-as',
    'docmanager:rename',
    'docmanager:restore-checkpoint',
    'docmanager:clone',
    'docmanager:close',
    'docmanager:close-all-files'
  ].forEach(command => { menu.addItem({ command }); });
  menu.addItem({ type: 'separator' });
  menu.addItem({ command: 'settingeditor:open' });

  return menu;
}

  /**
   * Create a menu for the editor.
   */
  function createMenu(): Menu {
    let settings = new Menu({ commands });
    let theme = new Menu({ commands });
    let menu = new Menu({ commands });

    menu.title.label = 'Editor';
    settings.title.label = 'Settings';
    theme.title.label = 'Theme';

    settings.addItem({ command: CommandIDs.lineNumbers });
    settings.addItem({ command: CommandIDs.lineWrap });
    settings.addItem({ command: CommandIDs.matchBrackets });
    settings.addItem({ command: CommandIDs.vimMode });

    commands.addCommand(CommandIDs.changeTheme, {
      label: args => args['theme'] as string,
      execute: args => {
        let name = args['theme'] as string || CodeMirrorEditor.DEFAULT_THEME;
        tracker.forEach(widget => {
          if (widget.editor instanceof CodeMirrorEditor) {
            let cm = widget.editor.editor;
            cm.setOption('theme', name);
          }
        });
      }
    });

    [
     'jupyter', 'default', 'abcdef', 'base16-dark', 'base16-light',
     'hopscotch', 'material', 'mbo', 'mdn-like', 'seti', 'the-matrix',
     'xq-light', 'zenburn'
    ].forEach(name => theme.addItem({
      command: 'editor:change-theme',
      args: { theme: name }
    }));

    menu.addItem({ type: 'separator' });
    menu.addItem({ type: 'submenu', submenu: settings });
    menu.addItem({ type: 'submenu', submenu: theme });

    return menu;
  }

  /**
   * Create a menu for the help plugin.
   */
  function createMenu(): Menu {
    let { commands } = app;
    let menu = new Menu({ commands });
    menu.title.label = category;

    menu.addItem({ command: 'about-jupyterlab:open' });
    menu.addItem({ command: 'faq-jupyterlab:open' });
    menu.addItem({ command: CommandIDs.launchClassic });
    menu.addItem({ type: 'separator' });
    RESOURCES.forEach(args => { menu.addItem({ args, command }); });
    menu.addItem({ type: 'separator' });
    menu.addItem({ command: 'statedb:clear' });

    return menu;
  }

		return () => {
			commands.addCommand("cut", {
				label: "Cut",
				mnemonic: 1,
				icon: "fa fa-cut",
				execute: () => {
					console.log("Cut");
				}
			});

			commands.addCommand("copy", {
				label: "Copy File",
				mnemonic: 0,
				icon: "fa fa-copy",
				execute: () => {
					console.log("Copy");
				}
			});

			commands.addCommand("paste", {
				label: "Paste",
				mnemonic: 0,
				icon: "fa fa-paste",
				execute: () => {
					console.log("Paste");
				}
			});

			commands.addCommand("new-tab", {
				label: "New Tab",
				mnemonic: 0,
				caption: "Open a new tab",
				icon: "fa fa-plus",
				execute: () => {
					let content = new Content("New");
					dock.addWidget(content);
				}
			});

			commands.addCommand("close", {
				label: "Close",
				mnemonic: 0,
				icon: "fa fa-close",
				execute: () => {
					console.log("Close");
				}
			});

			commands.addCommand("default-theme", {
				label: "Default theme",
				mnemonic: 0,
				icon: "fa fa-paint-brush",
				execute: () => {
					console.log("Default theme");
				}
			});

			commands.addCommand("clean-theme", {
				label: "Clean theme",
				mnemonic: 0,
				icon: "fa fa-tint",
				execute: () => {
					console.log("Clean theme");
				}
			});

			commands.addCommand("dark-toggle", {
				label: "Toggle",
				mnemonic: 0,
				icon: "fa fa-plus",
				execute: () => {
					document.body.classList.toggle("--dark");
				}
			});

			let menu1 = new Menu({commands});
			menu1.title.label = "File";
			menu1.title.mnemonic = 0;
			menu1.addItem({command: "new-tab"});
			menu1.addItem({type: "separator"});
			menu1.addItem({command: "close"});

			let menu2 = new Menu({commands});
			menu2.title.label = "Theme";
			menu2.title.mnemonic = 0;
			menu2.addItem({command: "default-theme"});
			menu2.addItem({command: "clean-theme"});

			let ctxt = new Menu({commands});
			ctxt.addItem({command: "copy"});
			ctxt.addItem({command: "cut"});
			ctxt.addItem({command: "paste"});

			let bar = new MenuBar();
			bar.addMenu(menu1);
			bar.addMenu(menu2);
			bar.id = "menuBar";

			let toggle = new Toggle({onLabel: "Dark", offLabel: "Light", command: "dark-toggle", commands: commands});
			toggle.id = "daylightToggle";
//.........這裏部分代碼省略.........

/**
 * Create a context menu for the file browser listing.
 *
 * #### Notes
 * This function generates temporary commands with an incremented name. These
 * commands are disposed when the menu itself is disposed.
 */
function createContextMenu(model: Contents.IModel, commands: CommandRegistry, registry: DocumentRegistry): Menu {
  const path = model.path;
  const menu = new Menu({ commands });

  menu.addItem({ command: CommandIDs.open });

  if (model.type !== 'directory') {
    const factories = registry.preferredWidgetFactories(path).map(f => f.name);
    if (path && factories.length > 1) {
      const command =  'docmanager:open';
      const openWith = new Menu({ commands });
      openWith.title.label = 'Open With';
      factories.forEach(factory => {
        openWith.addItem({ args: { factory, path }, command });
      });
      menu.addItem({ type: 'submenu', submenu: openWith });
    }
  }

  menu.addItem({ command: CommandIDs.rename });
  menu.addItem({ command: CommandIDs.del });
  menu.addItem({ command: CommandIDs.cut });

  if (model.type !== 'directory') {
    menu.addItem({ command: CommandIDs.copy });
  }

  menu.addItem({ command: CommandIDs.paste });

  if (model.type !== 'directory') {
    menu.addItem({ command: CommandIDs.duplicate });
    menu.addItem({ command: CommandIDs.download });
    menu.addItem({ command: CommandIDs.shutdown });
  }

  menu.addItem({ command: CommandIDs.share });

  return menu;
}

 each(registry.creators(), creator => {
   const command = CommandIDs.createFrom;
   const creatorName = creator.name;
   const label = `New ${creatorName}`;
   const args = { creatorName, label };
   menu.insertItem(0, { args, command });
   Private.creators.add(palette.addItem({ args, category, command }));
 });