webview-template/invokeAction.html (96 lines of code) (raw):
<!--
#
# Licensed to the Apache Software Foundation (ASF) under one or more
# contributor license agreements. See the NOTICE file distributed with
# this work for additional information regarding copyright ownership.
# The ASF licenses this file to You under the Apache License, Version 2.0
# (the "License"); you may not use this file except in compliance with
# the License. You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Action Invoker</title>
<link href="{{nodeModulePath}}/jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="{{nodeModulePath}}/jsoneditor/dist/jsoneditor.min.js"></script>
<style>
html, body {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
body {
padding: 0 20px 20px;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.editor {
flex: 1;
}
.footer {
margin-top: 10px;
min-height: 35px
}
.jsoneditor {
border: none;
}
.jsoneditor-menu {
background-color: var(--vscode-activityBar-background);
border: none;
}
.jsoneditor-repair {
display: none;
}
.jsoneditor-poweredBy {
display: none
}
.button {
font-size: 13px;
min-width: 140px;
height: 35px;
line-height: 35px;
cursor: pointer;
background: var(--vscode-button-background);
border: none;
color: var(--vscode-button-foreground);
}
.button:hover, .button:active {
background: var(--vscode-button-hoverBackground);
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h2>Invoke action: {{actionName}}</h2>
<p>The action will be invoked with the following runtime parameters.</p>
</div>
<div id="jsoneditor" class="editor"></div>
<div class="footer">
<button class="button" onclick="invoke()">Invoke action</button>
</div>
</div>
<script>
const vscode = acquireVsCodeApi();
// create the editor
const container = document.getElementById("jsoneditor")
const editor = new JSONEditor(container, {
mode: "code",
indentation: 4,
enableSort: false,
enableTransform: false,
statusBar: false,
});
// add event listener
window.addEventListener('message', event => {
const message = event.data;
if (message.command === 'getParameters') {
editor.set(JSON.parse(message.params));
}
})
function invoke() {
vscode.postMessage({
command: 'invoke',
parameters: editor.getText()
})
}
</script>
</body>
</html>