Skip to content
Permalink
Browse files

feat(smartAutocomplete): View data update on file change (#103)

* fix(viewData): update on file change

With the new WebView Api, seems like we have to manually update the
WebView's html

* fix(aureliaViewData): Don't update webview panel on close
  • Loading branch information
hiaux0 authored and eriklieben committed Aug 17, 2019
1 parent 2a91268 commit 26dcb051ed3ed211ff0f65d38df073a8d137c8eb
Showing with 51 additions and 19 deletions.
  1. +50 −19 src/client/Preview/Register.ts
  2. +1 −0 src/client/Preview/TextDocumentContentProvider.ts
@@ -3,47 +3,63 @@ import {TextDocumentContentProvider} from './TextDocumentContentProvider';

export function registerPreview(context, window, client) {

const aureliaViewDataPanelType = 'aureliaViewData';

let previewUri = vscode.Uri.parse('aurelia-preview://authority/aurelia-preview');

let provider = new TextDocumentContentProvider(client);
let registration = vscode.workspace.registerTextDocumentContentProvider('aurelia-preview', provider);
let isPanelVisible: boolean = false;
let panel: vscode.WebviewPanel;

function fillWebViewHtml(bodyContent: string): string {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cat Coding</title>
</head>
${bodyContent}
</html>
`;
}

vscode.workspace.onDidChangeTextDocument((e: vscode.TextDocumentChangeEvent) => {
if (!isPanelVisible) return;
if (e.document === vscode.window.activeTextEditor.document) {
provider.update(previewUri);
provider.update(previewUri).then(success => {
panel.webview.html = fillWebViewHtml(success);
});
}
});

vscode.window.onDidChangeTextEditorSelection((e: vscode.TextEditorSelectionChangeEvent) => {
if (e.textEditor === vscode.window.activeTextEditor) {
provider.update(previewUri);
}
vscode.window.onDidChangeActiveTextEditor((editor: vscode.TextEditor) => {
setTimeout(() => {
if (!isPanelVisible) return;
if (editor === vscode.window.activeTextEditor) {
provider.update(previewUri).then(success => {
panel.webview.html = fillWebViewHtml(success);
});
}
}, 0);
});

context.subscriptions.push(vscode.commands.registerCommand('aurelia.showViewProperties', () => {

const smartAutocomplete = vscode.workspace.getConfiguration().get('aurelia.featureToggles.smartAutocomplete');
if (smartAutocomplete) {
const panel = vscode.window.createWebviewPanel(
'aureliaViewData',
panel = vscode.window.createWebviewPanel(
aureliaViewDataPanelType,
'Aurelia view data',
vscode.ViewColumn.Two,
);

provider.provideTextDocumentContent(previewUri)
.then(
(success) => {
panel.webview.html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cat Coding</title>
</head>
${success}
</html>
`
panel.webview.html = fillWebViewHtml(success);
},
(reason) => {
window.showErrorMessage(reason);
@@ -52,8 +68,23 @@ export function registerPreview(context, window, client) {
return vscode.window.showWarningMessage('This command requires the experimental feature "smartAutocomplete" to be enabled');
}

/**
* Set panel visible flag to true, if
* - we have the correct WebView type (multiple WebView types possible)
* - and panel itself is not active
*/
panel.onDidChangeViewState(event => {
const correctPanelType = (event.webviewPanel.viewType === aureliaViewDataPanelType);
/** Don't update panel if the panel itself is 'active' */
const panelNotActive = !event.webviewPanel.active
isPanelVisible = correctPanelType && panelNotActive;
});

panel.onDidDispose(event => {
isPanelVisible = false;
});

}));
}));

}

@@ -119,5 +119,6 @@

public update(uri: vscode.Uri) {
this._onDidChange.fire(uri);
return this.provideTextDocumentContent(uri);
}
}

0 comments on commit 26dcb05

Please sign in to comment.
You can’t perform that action at this time.