AutoCommit/src/models/WebView.ts

112 lines
3.0 KiB
TypeScript
Raw Normal View History

2019-12-26 17:47:37 +08:00
/*
* Author : OBKoro1
* Date : 2019-12-26 13:49:02
* LastEditors : OBKoro1
* LastEditTime : 2019-12-26 15:24:08
* FilePath : /autoCommit/src/models/WebView.ts
* Description : 创建webview
* https://github.com/OBKoro1
*/
import * as vscode from 'vscode';
import * as path from 'path';
import * as fs from 'fs';
import { showMessage } from '../util/vscodeUtil';
import { webviewMsg } from '../util/dataStatement'
// webview 设置
interface WebviewPanelOption {
type: string; // webview type
title: string; // webview title
fileName: string; // webview 加载的资源
}
class WebView {
private currentPanel!: vscode.WebviewPanel;
public readonly context: vscode.ExtensionContext;
public MessageCallBack: Function; // webview消息回调
public constructor(context: vscode.ExtensionContext, callBack: Function) {
this.context = context;
this.MessageCallBack = callBack;
}
public create(
WebviewPanelOption: WebviewPanelOption,
column: vscode.ViewColumn = vscode.ViewColumn.One
) {
// 获取资源地址
// TODO: 打包
const srcPath = process.env.NODE_ENV !== 'production' ? 'src' : 'dist';
this.currentPanel = vscode.window.createWebviewPanel(
WebviewPanelOption.type,
WebviewPanelOption.title,
column,
{
// 只允许webview加载我们插件的`src/assets`目录下的资源
localResourceRoots: [
vscode.Uri.file(
path.join(this.context.extensionPath, `${srcPath}/assets`)
)
],
// 启用javascript
enableScripts: true,
retainContextWhenHidden: true // 隐藏保存状态
}
);
const htmlPath = path.join(
this.context.extensionPath,
`${srcPath}/views/${WebviewPanelOption.fileName}.html`
);
this.currentPanel.webview.html = this.getWebViewContent(htmlPath);
// 接收webview的消息回调
this.currentPanel.webview.onDidReceiveMessage(
this.handleMessage.bind(this),
undefined,
this.context.subscriptions
);
}
/**
* html模板内容
* @param templatePath
* @param content
*/
private getWebViewContent(templatePath: string, content?: string): string {
const dirPath = path.dirname(templatePath);
content = content || fs.readFileSync(templatePath, 'utf-8');
content = content.replace(
/(<link.+?href="|<script.+?src="|<img.+?src=")(.+?)"/g,
(m, $1, $2) => {
return `${$1}${vscode.Uri.file(path.resolve(dirPath, $2))
.with({ scheme: 'vscode-resource' })
.toString()}"`;
}
);
return content;
}
/**
* webview
*/
public close() {
const panel = this.currentPanel;
if (!panel) return;
panel.dispose();
}
// webview消息回调
public handleMessage(message: webviewMsg) {
const { command, data } = message;
if (command === 'event') {
this.MessageCallBack(message);
return;
}
showMessage(data, command);
}
}
export default WebView;