• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• vscode-todo-md-master
  • src
    • utils
      • extensionUtils.ts
      • utils.ts
      • vscodeUtils.ts
      • colors.ts
      • taskUtils.ts
    • userSuggestItems.ts
    • decorations.ts
    • sort.ts
    • events.ts
    • time
      • timeUtils.ts
      • setDueDateHelper.ts
    • commands
      • toggleContextsTreeViewSorting.ts
      • hideTask.ts
      • resetAllRecurringTasks.ts
      • clearGlobalState.ts
      • collapseAllNestedTasks.ts
      • setDueDateWithArgs.ts
      • completeTask.ts
      • addTaskToActiveFile.ts
      • specifyDefaultFile.ts
      • expandAllNestedTasks.ts
      • getRandomTask.ts
      • followLinkCommand.ts
      • toggleComment.ts
      • showGlobalState.ts
      • createSimilarTask.ts
      • replaceWithToday.ts
      • showWebviewSettings.ts
      • showDefaultFileSetting.ts
      • archiveCompletedTasks.ts
      • removeAllOverdue.ts
      • addTaskToDefaultFile.ts
      • specifyDefaultArchiveFile.ts
      • deleteTask.ts
      • incrementPriority.ts
      • startTask.ts
      • focusTasksWebviewAndInput.ts
      • goToLineInArchived.ts
      • filter.ts
      • openDefaultArchiveFile.ts
      • decrementPriority.ts
      • openDefaultFile.ts
      • webviewToggleShowRecurringUpcoming.ts
      • toggleDone.ts
      • setDueDate.ts
      • clearFilter.ts
      • getNextTask.ts
      • toggleProjectsTreeViewSorting.ts
      • setLastVisit.ts
      • getFewNextTasks.ts
      • goToLine.ts
      • toggleTagsTreeViewSorting.ts
    • test
      • runTest.ts
      • suite
        • index.ts
        • dueDate.test.ts
        • filterItems.test.ts
        • setDueDateHelper.test.ts
        • parseLine.test.ts
        • testUtils.ts
        • parseDocument.test.ts
      • env
        • test.md
    • documentActions.ts
    • languageFeatures
      • completionProviders.ts
      • hoverProvider.ts
      • documentHighlights.ts
      • getTaskHover.ts
      • languageFeatures.ts
      • renameProvider.ts
      • referenceProvider.ts
    • extension.ts
    • TheTask.ts
    • types.ts
    • treeViewProviders
      • treeViews.ts
      • projectProvider.ts
      • contextProvider.ts
      • taskProvider.ts
      • tagProvider.ts
    • statusBar.ts
    • dueDate.ts
    • webview
      • webviewView.ts
      • webviewUtils.ts
    • filter.ts
    • commands.ts
    • parse.ts
  • img
  • .vscodeignore
  • .eslintrc.json
  • LICENSE
  • media
    • index.ts
    • vendor
      • codicon.css
    • webpack.config.js
    • shims-vue.d.ts
    • scss
      • _box_sizing.scss
      • webview.scss
      • _suggest.scss
      • _modal.scss
      • _context_menu.scss
      • _mixins.scss
      • _misc.scss
    • app
      • storeUtils.ts
      • Task.vue
      • components
        • TaskDetails.vue
        • TaskDetails.ts
        • TaskTitle.ts
      • App.ts
      • SendMessage.ts
      • store.ts
      • App.vue
      • webviewTypes.ts
      • Task.ts
    • tsconfig.json
  • .editorconfig
  • CHANGELOG.md
  • webpack.config.js
  • demo.md
  • README.md
  • package.json
  • scripts
    • copyWebviewResourcesFromNodeModules.js
    • generateDecorationSchema.ts
  • vetur.config.js
  • tsconfig.json
  • .gitignore
  • docs
    • img
    • docs.md
  • .vscode
    • settings.json
    • launch.json
    • extensions.json

import path from 'path';
import { CancellationToken, Uri, Webview, WebviewView, WebviewViewProvider, WebviewViewResolveContext, window } from 'vscode';
import { openSetDueDateInputbox } from '../commands/setDueDate';
import { decrementCountForTask, editTask, editTaskRawText, incrementCountForTask, revealTask, startTaskAtLine, toggleDoneAtLine, toggleTaskCollapse, toggleTaskCollapseRecursive, tryToDeleteTask } from '../documentActions';
import { updateEverything } from '../events';
import { $config, $state, Global } from '../extension';
import { MessageFromWebview, MessageToWebview } from '../types';
import { getActiveOrDefaultDocument } from '../utils/extensionUtils';
import { getTaskAtLineExtension } from '../utils/taskUtils';
import { followLink } from '../utils/vscodeUtils';
import { getNonce } from './webviewUtils';

export class TasksWebviewViewProvider implements WebviewViewProvider {
	public static readonly viewType = 'todomd.webviewTasks';

	private _view?: WebviewView;

	constructor(
		private readonly _extensionUri: Uri,
	) { }

	public resolveWebviewView(
		webviewView: WebviewView,
		context: WebviewViewResolveContext,
		_token: CancellationToken,
	) {
		this._view = webviewView;

		const localResourceRoots = [
			this._extensionUri,
		];

		if ($config.webview.customCSSPath) {
			localResourceRoots.push(Uri.file(path.dirname($config.webview.customCSSPath)));
		}

		webviewView.webview.options = {
			enableScripts: true,
			enableCommandUris: true,
			localResourceRoots,
		};

		webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);

		webviewView.webview.onDidReceiveMessage(async (message: MessageFromWebview) => {
			switch (message.type) {
				// ──── Needs to update everything ────────────────────────────
				case 'webviewLoaded': {
					this.sendEverything();
					break;
				}
				case 'toggleDone': {
					await toggleDoneAtLine(await getActiveOrDefaultDocument(), message.value);
					await updateEverything();
					break;
				}
				case 'toggleTaskCollapse': {
					await toggleTaskCollapse(await getActiveOrDefaultDocument(), message.value);
					await updateEverything();
					break;
				}
				case 'editTask': {
					await editTask(await getActiveOrDefaultDocument(), message.value);
					await updateEverything();
					break;
				}
				case 'startTask': {
					await startTaskAtLine(message.value, await getActiveOrDefaultDocument());
					await updateEverything();
					break;
				}
				case 'toggleTaskCollapseRecursive': {
					await toggleTaskCollapseRecursive(await getActiveOrDefaultDocument(), message.value);
					await updateEverything();
					break;
				}
				case 'incrementCount': {
					await incrementCountForTask(await getActiveOrDefaultDocument(), message.value, getTaskAtLineExtension(message.value)!);
					await updateEverything();
					break;
				}
				case 'decrementCount': {
					await decrementCountForTask(await getActiveOrDefaultDocument(), message.value, getTaskAtLineExtension(message.value)!);
					await updateEverything();
					break;
				}
				case 'deleteTask': {
					await tryToDeleteTask(await getActiveOrDefaultDocument(), message.value);
					await updateEverything();
					break;
				}
				case 'editTaskRawText': {
					await editTaskRawText(await getActiveOrDefaultDocument(), message.value.lineNumber, message.value.newRawText);
					await updateEverything();
					break;
				}
				// ──── No need to update everything ──────────────────────────
				case 'showNotification': {
					window.showInformationMessage(message.value);
					break;
				}
				case 'goToTask': {
					revealTask(message.value);
					break;
				}
				case 'updateWebviewTitle': {
					this.updateTitle(message.value);
					break;
				}
				case 'followLink': {
					followLink(message.value);
					break;
				}
				case 'setDueDate': {
					openSetDueDateInputbox(await getActiveOrDefaultDocument(), [message.value]);
					break;
				}
			}
		});
		/**
		 * Update webview on it's visibility change (only when it becomes visible).
		 */
		webviewView.onDidChangeVisibility(e => {
			if (webviewView.visible === true) {
				this.sendEverything();
			}
		});
	}
	/**
	 * Send all the needed data to the webview view
	 */
	sendEverything() {
		if (this._view && this._view.visible === true) {
			this.sendMessageToWebview({
				type: 'updateEverything',
				value: {
					tasksAsTree: $state.tasksAsTree,
					tags: $state.tags,
					projects: $state.projects,
					contexts: $state.contexts,
					defaultFileSpecified: Boolean($config.defaultFile),
					activeDocumentOpened: Boolean($state.activeDocument),
					config: $config.webview,
				},
			});
			this.updateTitle($state.tasksAsTree.length);
		}
	}
	/**
	 * Update webview title (counter).
	 */
	updateTitle(numberOfTasks: number) {
		if (this._view) {
			this._view.title = `webview (${numberOfTasks})`;
		}
	}
	/**
	 * Focus main input in webview.
	 */
	focusFilterInput() {
		this.sendMessageToWebview({
			type: 'focusFilterInput',
		});
	}
	/**
	 * Send message. js objects that will be serialized to json.
	 */
	private sendMessageToWebview(message: MessageToWebview) {
		this._view?.webview.postMessage(message);
	}
	/**
	 * Generate html template for webview.
	 */
	private _getHtmlForWebview(webview: Webview) {
		const JSUri = webview.asWebviewUri(Uri.joinPath(this._extensionUri, 'media', 'webview.js'));
		const CSSUri = webview.asWebviewUri(Uri.joinPath(this._extensionUri, 'media', 'webview.css'));
		const codiconCSSUri = webview.asWebviewUri(Uri.joinPath(this._extensionUri, 'media', 'vendor', 'codicon.css'));
		const nonce = getNonce();// Use a nonce to only allow a specific script to be run.

		const userCSSLink = $config.webview.customCSSPath ? `<link href="${webview.asWebviewUri(Uri.file($config.webview.customCSSPath))}" rel="stylesheet">` : '';

		return `<!DOCTYPE html>
			<html lang="en">
			<head>
				<meta charset="UTF-8">
				<meta name="viewport" content="width=device-width, initial-scale=1.0">
				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src 'unsafe-inline' ${webview.cspSource}; script-src 'nonce-${nonce}';">
				<link href="${codiconCSSUri}" rel="stylesheet" />
				<link href="${CSSUri}" rel="stylesheet">
				${userCSSLink}
				<title>Tasks</title>
			</head>
			<body>
				<div id="app"></div>
				<script defer nonce="${nonce}" src="${JSUri}"></script>
			</body>
			</html>`;
	}
}
/**
 * Update main webview view (tasks)
 */
export function updateWebviewView() {
	if (Global.webviewProvider) {
		Global.webviewProvider.sendEverything();
	}
}