| <!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> |
