Demo Tour [Archived]

main.tour

{
  "title": "Status Bar",
  "description": "Describes how we augment the status bar",
  "steps": [
    {
      "file": "src/extension.ts",
      "line": 36,
      "description": "### Activation\nThe status bar provider is registered upon extension activiation",
      "selection": {
        "start": {
          "line": 32,
          "character": 3
        },
        "end": {
          "line": 36,
          "character": 40
        }
      },
      "contents": "import * as vscode from \"vscode\";\nimport { registerCommands } from \"./commands\";\nimport { registerFileSystemProvider } from \"./fileSystem\";\nimport { registerTextDocumentContentProvider } from \"./fileSystem/documentProvider\";\nimport { initializeGitApi } from \"./git\";\nimport { registerDecorators } from \"./player/decorator\";\nimport { registerStatusBar } from \"./player/status\";\nimport { registerCompletionProvider } from \"./recorder/completionProvider\";\nimport { store } from \"./store\";\nimport {\n  endCurrentCodeTour,\n  exportTour,\n  promptForTour,\n  startCodeTour\n} from \"./store/actions\";\nimport { discoverTours } from \"./store/provider\";\nimport { registerTreeProvider } from \"./tree\";\n\nexport async function activate(context: vscode.ExtensionContext) {\n  registerCommands();\n\n  // If the user has a workspace open, then attempt to discover\n  // the tours contained within it and optionally prompt the user.\n  if (vscode.workspace.workspaceFolders) {\n    await discoverTours();\n\n    promptForTour(context.globalState);\n\n    registerDecorators();\n\n    store.showMarkers = vscode.workspace\n      .getConfiguration(\"codetour\")\n      .get(\"showMarkers\", true);\n\n    vscode.commands.executeCommand(\n      \"setContext\",\n      \"codetour:showingMarkers\",\n      store.showMarkers\n    );\n\n    initializeGitApi();\n  }\n\n  // Regardless if the user has a workspace open,\n  // we still need to register the following items\n  // in order to support opening tour files and/or\n  // enabling other extensions to start a tour.\n  registerTreeProvider(context.extensionPath);\n  registerFileSystemProvider();\n  registerTextDocumentContentProvider();\n  registerStatusBar();\n  registerCompletionProvider();\n\n  return {\n    startTour: startCodeTour,\n    exportTour,\n    endCurrentTour: endCurrentCodeTour\n  };\n}\n"
    },
    {
      "file": "src/player/status.ts",
      "line": 35,
      "description": "### Registration\nIf the currently opened workspace has any code tours, then we register the `Start Code Tour` status bar item.",
      "contents": "import { reaction } from \"mobx\";\nimport * as vscode from \"vscode\";\nimport { EXTENSION_NAME } from \"../constants\";\nimport { store } from \"../store\";\n\nfunction createCurrentTourItem() {\n  const currentTourItem = vscode.window.createStatusBarItem(\n    vscode.StatusBarAlignment.Left\n  );\n\n  currentTourItem.command = `${EXTENSION_NAME}.resumeTour`;\n  currentTourItem.color = new vscode.ThemeColor(\n    \"statusBarItem.prominentForeground\"\n  );\n\n  currentTourItem.show();\n\n  return currentTourItem;\n}\n\nlet currentTourItem: vscode.StatusBarItem | null = null;\nexport function registerStatusBar() {\n  reaction(\n    // @ts-ignore\n    () => [\n      store.activeTour\n        ? [\n            store.activeTour.step,\n            store.activeTour.tour.title,\n            store.activeTour.tour.steps.length\n          ]\n        : null,\n      store.isRecording\n    ],\n    () => {\n      if (store.activeTour) {\n        if (!currentTourItem) {\n          currentTourItem = createCurrentTourItem();\n        }\n\n        const prefix = store.isRecording ? \"Recording \" : \"\";\n        currentTourItem.text = `${prefix}CodeTour: #${\n          store.activeTour.step + 1\n        } of ${store.activeTour.tour.steps.length} (${\n          store.activeTour.tour.title\n        })`;\n      } else {\n        if (currentTourItem) {\n          currentTourItem.dispose();\n          currentTourItem = null;\n        }\n      }\n    }\n  );\n}\n"
    },
    {
      "file": "src/player/status.ts",
      "line": 35,
      "description": "### Waiting for user\nUsing MobX, we wait for the user to start and/or navigate a code tour.",
      "contents": "import { reaction } from \"mobx\";\nimport * as vscode from \"vscode\";\nimport { EXTENSION_NAME } from \"../constants\";\nimport { store } from \"../store\";\n\nfunction createCurrentTourItem() {\n  const currentTourItem = vscode.window.createStatusBarItem(\n    vscode.StatusBarAlignment.Left\n  );\n\n  currentTourItem.command = `${EXTENSION_NAME}.resumeTour`;\n  currentTourItem.color = new vscode.ThemeColor(\n    \"statusBarItem.prominentForeground\"\n  );\n\n  currentTourItem.show();\n\n  return currentTourItem;\n}\n\nlet currentTourItem: vscode.StatusBarItem | null = null;\nexport function registerStatusBar() {\n  reaction(\n    // @ts-ignore\n    () => [\n      store.activeTour\n        ? [\n            store.activeTour.step,\n            store.activeTour.tour.title,\n            store.activeTour.tour.steps.length\n          ]\n        : null,\n      store.isRecording\n    ],\n    () => {\n      if (store.activeTour) {\n        if (!currentTourItem) {\n          currentTourItem = createCurrentTourItem();\n        }\n\n        const prefix = store.isRecording ? \"Recording \" : \"\";\n        currentTourItem.text = `${prefix}CodeTour: #${\n          store.activeTour.step + 1\n        } of ${store.activeTour.tour.steps.length} (${\n          store.activeTour.tour.title\n        })`;\n      } else {\n        if (currentTourItem) {\n          currentTourItem.dispose();\n          currentTourItem = null;\n        }\n      }\n    }\n  );\n}\n"
    },
    {
      "file": "src/player/status.ts",
      "line": 47,
      "description": "### Updating\nWhen a tour is activate and/or navigated, we update the status bar item to indicate the current step and title.",
      "contents": "import { reaction } from \"mobx\";\nimport * as vscode from \"vscode\";\nimport { EXTENSION_NAME } from \"../constants\";\nimport { store } from \"../store\";\n\nfunction createCurrentTourItem() {\n  const currentTourItem = vscode.window.createStatusBarItem(\n    vscode.StatusBarAlignment.Left\n  );\n\n  currentTourItem.command = `${EXTENSION_NAME}.resumeTour`;\n  currentTourItem.color = new vscode.ThemeColor(\n    \"statusBarItem.prominentForeground\"\n  );\n\n  currentTourItem.show();\n\n  return currentTourItem;\n}\n\nlet currentTourItem: vscode.StatusBarItem | null = null;\nexport function registerStatusBar() {\n  reaction(\n    // @ts-ignore\n    () => [\n      store.activeTour\n        ? [\n            store.activeTour.step,\n            store.activeTour.tour.title,\n            store.activeTour.tour.steps.length\n          ]\n        : null,\n      store.isRecording\n    ],\n    () => {\n      if (store.activeTour) {\n        if (!currentTourItem) {\n          currentTourItem = createCurrentTourItem();\n        }\n\n        const prefix = store.isRecording ? \"Recording \" : \"\";\n        currentTourItem.text = `${prefix}CodeTour: #${\n          store.activeTour.step + 1\n        } of ${store.activeTour.tour.steps.length} (${\n          store.activeTour.tour.title\n        })`;\n      } else {\n        if (currentTourItem) {\n          currentTourItem.dispose();\n          currentTourItem = null;\n        }\n      }\n    }\n  );\n}\n"
    }
  ]
}