itk.academy
/
itk-extension


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
							function getWebviewContent(url) {
    return `<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Web Preview</title>
        <style>
            body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
            .browser-bar {
                display: flex;
                align-items: center;
                background: #f1f1f1;
                padding: 8px;
                border-bottom: 1px solid #ccc;
            }
            .btn {
                background: #ddd;
                border: none;
                padding: 6px 12px;
                margin-right: 6px;
                cursor: pointer;
                font-size: 14px;
                border-radius: 4px;
            }
            .btn:hover {
                background: #bbb;
            }
            .url-input {
                flex-grow: 1;
                padding: 6px;
                font-size: 14px;
                border: 1px solid #ccc;
                border-radius: 4px;
                outline: none;
            }
            iframe {
                width: 100vw;
                height: calc(100vh - 40px);
                border: none;
            }
        </style>
    </head>
    <body>
        <div class="browser-bar">
            <button class="btn" id="backBtn">←</button>
            <button class="btn" id="forwardBtn">→</button>
            <input type="text" class="url-input" id="urlInput" value="${url}">
            <button class="btn" id="refreshBtn">⟳</button>
            <button class="btn" id="inspectBtn">🔍 Inspect</button>
        </div>
        <iframe id="webFrame" src="${url}" sandbox="allow-scripts allow-same-origin"></iframe>

        <script>
            const vscode = acquireVsCodeApi();
            const backBtn = document.getElementById('backBtn');
            const forwardBtn = document.getElementById('forwardBtn');
            const refreshBtn = document.getElementById('refreshBtn');
            const inspectBtn = document.getElementById('inspectBtn');
            const urlInput = document.getElementById('urlInput');
            const iframe = document.getElementById('webFrame');

            let historyStack = [];
            let currentIndex = -1;

            function sendUrlChangeEvent(url) {
                vscode.postMessage({ command: 'urlChanged', url });
            }

            function navigateTo(url, addToHistory = true) {
                iframe.src = url;
                urlInput.value = url;
                sendUrlChangeEvent(url);

                if (addToHistory) {
                    historyStack = historyStack.slice(0, currentIndex + 1);
                    historyStack.push(url);
                    currentIndex++;
                }
                updateNavButtons();
            }

            function updateNavButtons() {
                backBtn.disabled = currentIndex <= 0;
                forwardBtn.disabled = currentIndex >= historyStack.length - 1;
            }

            backBtn.addEventListener('click', () => {
                if (currentIndex > 0) {
                    currentIndex--;
                    navigateTo(historyStack[currentIndex], false);
                }
            });

            forwardBtn.addEventListener('click', () => {
                if (currentIndex < historyStack.length - 1) {
                    currentIndex++;
                    navigateTo(historyStack[currentIndex], false);
                }
            });

            refreshBtn.addEventListener('click', () => {
                navigateTo(urlInput.value);
            });

            urlInput.addEventListener('keypress', (event) => {
                if (event.key === 'Enter') {
                    navigateTo(urlInput.value);
                }
            });

            // Open the iframe in a new window for inspection
            inspectBtn.addEventListener('click', () => {
                vscode.postMessage({ command: 'inspectUrl', url: iframe.src });
            });


            // Initialize history with the first URL
            navigateTo("${url}");
        </script>
    </body>
    </html>`;
}

module.exports = getWebviewContent;