views commandsPanel.ts

0% Statements 0/23

0% Branches 0/1

0% Functions 0/6

0% Lines 0/21

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

import joplin from "api";
import { PassThrough } from "stream";
 
export interface CommandButton {
    label: string;
    command: string;
}
 
export class CommandsPanel {
    private panelHandle: string;
    private commands: CommandButton[];
 
    constructor(commands: CommandButton[]) {
        this.panelHandle = "templatesCommandsPanel";
        this.commands = commands;
    }
 
    public async create(): Promise<void> {
        try {
            // Create the panel
            this.panelHandle = await joplin.views.panels.create(this.panelHandle);
 
            // Set up message handler
            await joplin.views.panels.onMessage(this.panelHandle, async (message) => {
                console.log("Received message from webview:", message);
                Iif (message.type === "executeCommand") {
                    console.log("Executing command:", message.command);
                    try {
                        await joplin.commands.execute("dismissPluginPanels");
                    } catch (error) {
                        // Ignore error
                    }
                    await joplin.commands.execute(message.command);
                }
            });
 
            // Set the panel HTML
            const html = this.generateHtml();
            await joplin.views.panels.setHtml(this.panelHandle, html);
            await joplin.views.panels.addScript(this.panelHandle, "./views/webview.js");
 
            // Show the panel
            await joplin.views.panels.show(this.panelHandle, true);
        } catch (error) {
            console.error("Error creating commands panel:", error);
            throw error;
        }
    }
 
    private generateHtml(): string {
        const buttons = this.commands.map(cmd => `
            <button class="template-button" data-command="${cmd.command}">
                ${cmd.label}
            </button>
        `).join("\n");
 
        return `
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="UTF-8">
                <style>
                    body {
                        padding: 5px;
                        max-height: 100vh;
                        overflow-y: auto;
                    }
                    .template-button {
                        margin: 5px 0;
                        display: block;
                        width: 100%;
                        background-color: var(--joplin-background-color);
                        color: var(--joplin-color);
                        border-color: rgb(118, 118, 118);
                        border-width: 1px;
                        border-radius: 3px;
                        border-spacing: 5px;
                        border-style: solid;
                        cursor: pointer;
                        font-size: var(--joplin-font-size);
                    }
                    .template-button:hover {
                        background-color: var(--joplin-background-color-hover3);
                    }
                    #debug-info {
                        color: red;
                        font-size: 12px;
                        margin-bottom: 10px;
                        white-space: pre-wrap;
                    }
                </style>
            </head>
            <body>
                ${buttons}
            </body>
            </html>
        `;
    }
}