pywebexec 1.2.0__py3-none-any.whl → 1.4.12__py3-none-any.whl

pywebexec/static/css/style.css

@@ -1,5 +1,12 @@
+@font-face {
+    font-family: 'Consolas NF';
+    src: url('/static/css/Consolas NF.ttf');
+    font-weight: 400;
+    font-style: normal;
+}
 body {
-    font-family: Arial, sans-serif; 
+    font-family: Arial, sans-serif;
+    overflow: hidden;
 }
 .table-container {
     height: 270px;
@@ -30,21 +37,26 @@ th {
     width: 100%;
 }
 select { /* Safari bug */
+    -webkit-appearance: none;
+    -webkit-border-radius: none;
+    appearance: none;
+    outline: none;
     font-size: 15px;
     border: #aaa solid 1px;
     border-radius: 5px;
+    padding: 0px 5px 5px 0px;
+    min-width: 150px;
 }
 .output {
     white-space: pre-wrap;
-    background: #f0f0f0;
+    background: #111;
     padding: 10px;
     border: 1px solid #ccc;
-    font-family: monospace;
     border-radius: 10px;
-    overflow-y: auto;
+    overflow-y: hidden;
 }
 .copy-icon { cursor: pointer; }
-.monospace { font-family: monospace; }
+.monospace { font-family: Consolas NF, monospace; }
 .copied { color: green; margin-left: 5px; }
 button {
     -webkit-appearance: none;
@@ -62,6 +74,11 @@ button {
 form {
     padding-bottom: 15px;
 }
+.form-inline {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
 .status-icon {
     display: inline-block;
     width: 16px;
@@ -103,21 +120,90 @@ form {
 .copy_clip_ok, .copy_clip_ok:hover {
     background-image: url("/static/images/copy_ok.svg");
 }
-input {
-    width: 50%;
+#params, #commandName {
     -webkit-appearance: none;
     -webkit-border-radius: none;
     appearance: none;
     border-radius: 15px;
     padding: 3px;
-    padding-right: 13px;
     border: 1px #aaa solid;
     height: 15px;
     font-size: 15px;
     outline: none;
+    background-color: white;
+    margin: 0; /* Remove margin */
+}
+
+#commandName {
+    width: auto; /* Allow dynamic width */
+    background-size: 16px 16px;
+    border-radius: 15px 0px 0px 15px;
+    border-right: 0px;
     text-indent: 5px;
+    padding-right: 0px;
+}
+#params {
+    width: auto; /* Allow dynamic width */
+    border-radius: 0px 15px 15px 0px;
+    border-left: 0px;
+}
+
+.input-group {
+    display: flex;
+    align-items: center;
+    /*width: 60%;*/
+}
+
+.show-command-list-button {
     background-color: white;
+    cursor: pointer;
+    height: 21px;
+    font-size: 15px;
+    border-top: 1px solid #aaa;
+    border-bottom: 1px solid #aaa;
+    border-radius: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.show-command-list-button .arrow {
+    visibility: hidden; /* Hide arrow by default */
 }
+
+.show-command-list-button:hover .arrow {
+    visibility: visible; /* Show arrow on hover */
+}
+
+#commandName:focus + .show-command-list-button .arrow {
+    visibility: visible; /* Show arrow when input has focus */
+}
+
+#commandList.show + .show-command-list-button .arrow {
+    display: none; /* Hide arrow when list is shown */
+}
+
+.command-list {
+    display: none;
+    position: absolute;
+    background-color: white;
+    border: 1px solid #aaa;
+    border-radius: 5px;
+    padding: 0px 5px 0px 5px;
+    margin-top: 2px;
+    overflow-y: auto;
+    z-index: 1000;
+}
+
+.command-item {
+    padding: 3px 5px 3px 5px;
+    cursor: pointer;
+}
+
+.command-item:hover, .command-item.highlighted {
+    background-color: #eee;
+}
+
 .currentcommand {
     background-color: #eef;
 }
@@ -156,6 +242,7 @@ body.dimmed * {
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 1000;
+    overflow-y: hidden;
 }
 .dimmer-text {
     color: white;
@@ -166,3 +253,29 @@ body.dimmed * {
     left: 50%;
     transform: translate(-50%, -50%);
 }
+/* allow wide chars in terminal */
+span {
+    letter-spacing: -0.03px !important;
+}
+.slider-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 10px;
+}
+#outputSlider {
+    width: 100%;
+}
+.popup-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    margin-left: 5px;
+    vertical-align: middle;
+}
+.popup-button img {
+    width: 16px;
+    height: 16px;
+}
+

pywebexec/static/css/xterm.css

@@ -0,0 +1,209 @@
+/**
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+ * https://github.com/chjj/term.js
+ * @license MIT
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * Originally forked from (with the author's permission):
+ *   Fabrice Bellard's javascript vt100 for jslinux:
+ *   http://bellard.org/jslinux/
+ *   Copyright (c) 2011 Fabrice Bellard
+ *   The original design remains. The terminal itself
+ *   has been extended to include xterm CSI codes, among
+ *   other features.
+ */
+
+/**
+ *  Default styles for xterm.js
+ */
+
+.xterm {
+    cursor: text;
+    position: relative;
+    user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+}
+
+.xterm.focus,
+.xterm:focus {
+    outline: none;
+}
+
+.xterm .xterm-helpers {
+    position: absolute;
+    top: 0;
+    /**
+     * The z-index of the helpers must be higher than the canvases in order for
+     * IMEs to appear on top.
+     */
+    z-index: 5;
+}
+
+.xterm .xterm-helper-textarea {
+    padding: 0;
+    border: 0;
+    margin: 0;
+    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
+    position: absolute;
+    opacity: 0;
+    left: -9999em;
+    top: 0;
+    width: 0;
+    height: 0;
+    z-index: -5;
+    /** Prevent wrapping so the IME appears against the textarea at the correct position */
+    white-space: nowrap;
+    overflow: hidden;
+    resize: none;
+}
+
+.xterm .composition-view {
+    /* TODO: Composition position got messed up somewhere */
+    background: #000;
+    color: #FFF;
+    display: none;
+    position: absolute;
+    white-space: nowrap;
+    z-index: 1;
+}
+
+.xterm .composition-view.active {
+    display: block;
+}
+
+.xterm .xterm-viewport {
+    /* On OS X this is required in order for the scroll bar to appear fully opaque */
+    background-color: #000;
+    overflow-y: scroll;
+    cursor: default;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.xterm .xterm-screen {
+    position: relative;
+}
+
+.xterm .xterm-screen canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.xterm .xterm-scroll-area {
+    visibility: hidden;
+}
+
+.xterm-char-measure-element {
+    display: inline-block;
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: -9999em;
+    line-height: normal;
+}
+
+.xterm.enable-mouse-events {
+    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+    cursor: default;
+}
+
+.xterm.xterm-cursor-pointer,
+.xterm .xterm-cursor-pointer {
+    cursor: pointer;
+}
+
+.xterm.column-select.focus {
+    /* Column selection mode */
+    cursor: crosshair;
+}
+
+.xterm .xterm-accessibility,
+.xterm .xterm-message {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    color: transparent;
+    pointer-events: none;
+}
+
+.xterm .live-region {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+.xterm-dim {
+    /* Dim should not apply to background, so the opacity of the foreground color is applied
+     * explicitly in the generated class and reset to 1 here */
+    opacity: 1 !important;
+}
+
+.xterm-underline-1 { text-decoration: underline; }
+.xterm-underline-2 { text-decoration: double underline; }
+.xterm-underline-3 { text-decoration: wavy underline; }
+.xterm-underline-4 { text-decoration: dotted underline; }
+.xterm-underline-5 { text-decoration: dashed underline; }
+
+.xterm-overline {
+    text-decoration: overline;
+}
+
+.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
+.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
+.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
+.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
+.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }
+
+.xterm-strikethrough {
+    text-decoration: line-through;
+}
+
+.xterm-screen .xterm-decoration-container .xterm-decoration {
+	z-index: 6;
+	position: absolute;
+}
+
+.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
+	z-index: 7;
+}
+
+.xterm-decoration-overview-ruler {
+    z-index: 8;
+    position: absolute;
+    top: 0;
+    right: 0;
+    pointer-events: none;
+}
+
+.xterm-decoration-top {
+    z-index: 2;
+    position: relative;
+}

pywebexec/static/images/down-arrow.svg

@@ -0,0 +1 @@
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"><polygon points="4 3 12 3 8 10 4 3" fill="black" /></svg>

pywebexec/static/images/favicon.svg

@@ -1 +1,8 @@
-<svg fill="#000000" viewBox="-1 0 19 19" xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M16.5 9.5a8 8 0 1 1-8-8 8 8 0 0 1 8 8zm-2.97.006a5.03 5.03 0 1 0-5.03 5.03 5.03 5.03 0 0 0 5.03-5.03zm-7.383-.4H4.289a4.237 4.237 0 0 1 2.565-3.498q.1-.042.2-.079a7.702 7.702 0 0 0-.907 3.577zm0 .8a7.7 7.7 0 0 0 .908 3.577q-.102-.037-.201-.079a4.225 4.225 0 0 1-2.565-3.498zm.8-.8a9.04 9.04 0 0 1 .163-1.402 6.164 6.164 0 0 1 .445-1.415c.289-.615.66-1.013.945-1.013.285 0 .656.398.945 1.013a6.18 6.18 0 0 1 .445 1.415 9.078 9.078 0 0 1 .163 1.402zm3.106.8a9.073 9.073 0 0 1-.163 1.402 6.187 6.187 0 0 1-.445 1.415c-.289.616-.66 1.013-.945 1.013-.285 0-.656-.397-.945-1.013a6.172 6.172 0 0 1-.445-1.415 9.036 9.036 0 0 1-.163-1.402zm1.438-3.391a4.211 4.211 0 0 1 1.22 2.591h-1.858a7.698 7.698 0 0 0-.908-3.577q.102.037.201.08a4.208 4.208 0 0 1 1.345.906zm-.638 3.391h1.858a4.238 4.238 0 0 1-2.565 3.498q-.1.043-.2.08a7.697 7.697 0 0 0 .907-3.578z"></path></g></svg>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+<g id="SVGRepo_iconCarrier"> 
+    <path opacity="0.8" d="M3 8C3 6.11438 3 5.17157 3.58579 4.58579C4.17157 4 5.11438 4 7 4H12H17C18.8856 4 19.8284 4 20.4142 4.58579C21 5.17157 21 6.11438 21 8V12V16C21 17.8856 21 18.8284 20.4142 19.4142C19.8284 20 18.8856 20 17 20H12H7C5.11438 20 4.17157 20 3.58579 19.4142C3 18.8284 3 17.8856 3 16V12V8Z" style="fill: rgba(5, 167, 98, 0.9);"></path> 
+    <path d="M13 15H16" stroke="#323232" stroke-width="2" stroke-linecap="round"></path> 
+    <path d="M8 15L10.5 12.5V12.5C10.7761 12.2239 10.7761 11.7761 10.5 11.5V11.5L8 9" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
+    <path d="M3 8C3 6.11438 3 5.17157 3.58579 4.58579C4.17157 4 5.11438 4 7 4H12H17C18.8856 4 19.8284 4 20.4142 4.58579C21 5.17157 21 6.11438 21 8V12V16C21 17.8856 21 18.8284 20.4142 19.4142C19.8284 20 18.8856 20 17 20H12H7C5.11438 20 4.17157 20 3.58579 19.4142C3 18.8284 3 17.8856 3 16V12V8Z" stroke="#323232" stroke-width="2" stroke-linejoin="round"></path> 
+</g></svg>

pywebexec/static/images/popup.svg

@@ -0,0 +1 @@
+<svg fill="#000000" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>popout</title> <path d="M15.694 13.541l2.666 2.665 5.016-5.017 2.59 2.59 0.004-7.734-7.785-0.046 2.526 2.525-5.017 5.017zM25.926 16.945l-1.92-1.947 0.035 9.007-16.015 0.009 0.016-15.973 8.958-0.040-2-2h-7c-1.104 0-2 0.896-2 2v16c0 1.104 0.896 2 2 2h16c1.104 0 2-0.896 2-2l-0.074-7.056z"></path> </g></svg>

pywebexec/static/js/commands.js

@@ -0,0 +1,223 @@
+// commands.js
+let commandInput = document.getElementById('commandName');
+let paramsInput = document.getElementById('params');
+let commandListSelect = document.getElementById('commandList');
+let showCommandListButton = document.getElementById('showCommandListButton');
+let isHandlingKeydown = false;
+
+function unfilterCommands() {
+    const options = commandListSelect.options;
+    for (let i = 0; i < options.length; i++) {
+        options[i].style.display = 'block';
+    }
+    commandListSelect.size = Math.min(20, commandListSelect.options.length);
+}
+
+function filterCommands() {
+    const value = commandInput.value.slice(0, commandInput.selectionStart);
+    const options = commandListSelect.options;
+    let nbVisibleItems = 0;
+    for (let i = 0; i < options.length; i++) {
+        if (options[i].text.startsWith(value)) {
+            options[i].style.display = 'block';
+            nbVisibleItems += 1;
+        } else {
+            options[i].style.display = 'none';
+        }
+    }
+    if (nbVisibleItems > 1) {
+        commandListSelect.size = Math.min(20, nbVisibleItems);
+        commandListSelect.style.display = 'block';
+    } else {
+        commandListSelect.style.display = 'none';
+    }
+}
+
+function setCommandListPosition() {
+    const rect = commandInput.getBoundingClientRect();
+    commandListSelect.style.left = `${rect.left}px`;
+    commandListSelect.style.top = `${rect.bottom}px`;
+}
+
+function adjustInputWidth(input) {
+    input.style.width = 'auto';
+    input.style.width = `${input.scrollWidth}px`;
+}
+
+
+paramsInput.addEventListener('input', () => adjustInputWidth(paramsInput));
+commandInput.addEventListener('input', () => {
+    adjustInputWidth(commandInput);
+    filterCommands(); // Filter commands on input
+});
+
+paramsInput.addEventListener('mouseover', () => {
+    paramsInput.focus();
+    paramsInput.setSelectionRange(0, paramsInput.value.length);
+});
+
+commandInput.addEventListener('mouseover', () => {
+    commandInput.focus();
+    commandInput.setSelectionRange(0, commandInput.value.length);
+});
+
+commandInput.addEventListener('input', (event) => {
+    if (event.inputType === 'deleteContentBackward') {
+        const newValue = commandInput.value.slice(0, -1);
+        commandInput.value = newValue;
+        commandInput.setSelectionRange(newValue.length, newValue.length);
+    }
+    const value = commandInput.value;
+    const options = commandListSelect.options;
+    if (value) {
+        const match = Array.from(options).find(option => option.text.startsWith(value));
+        if (match) {
+            commandInput.value = match.text;
+            commandInput.setSelectionRange(value.length, match.text.length);
+        } else {
+            commandInput.value = value.slice(0, -1);
+        }
+    }
+    filterCommands();
+    adjustInputWidth(commandInput); // Adjust width on input
+});
+
+commandInput.addEventListener('keydown', (event) => {
+    if (event.key === ' ' || event.key === 'ArrowRight') {
+        event.preventDefault();
+        paramsInput.focus();
+        paramsInput.setSelectionRange(0, paramsInput.value.length);
+    } else if (event.key === 'ArrowDown') {
+        /*setCommandListPosition();*/
+        unfilterCommands();
+        if (commandListSelect.options.length > 1) {
+            commandListSelect.style.display = 'block';
+            commandListSelect.focus();
+            commandListSelect.selectedIndex = 0;
+        }
+        event.preventDefault();
+    }
+});
+
+paramsInput.addEventListener('keydown', (event) => {
+    if (paramsInput.selectionStart > 0) return;
+    if (event.key === 'ArrowLeft') {
+        commandInput.focus();
+        commandInput.setSelectionRange(0, commandInput.value.length);
+        event.preventDefault();
+        return;
+    }
+    if (event.key === 'Backspace') {
+        val = paramsInput.value
+        paramsInput.value = val.slice(0, paramsInput.selectionStart) + val.slice(paramsInput.selectionEnd)
+        commandInput.focus();
+        commandInput.setSelectionRange(0, commandInput.value.length);
+        event.preventDefault();
+    }
+});
+
+commandListSelect.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+        event.preventDefault(); // Prevent form submission
+        const selectedOption = commandListSelect.options[commandListSelect.selectedIndex];
+        commandInput.value = selectedOption.text;
+        commandListSelect.style.display = 'none';
+        adjustInputWidth(commandInput);
+        paramsInput.focus();
+        return;
+    }
+    if (event.key === 'ArrowUp' && commandListSelect.selectedIndex == 0) {
+        commandInput.focus();
+        commandListSelect.style.display = 'none'
+    }
+});
+
+commandListSelect.addEventListener('click', (event) => {
+    event.preventDefault(); // Prevent form submission
+    const selectedOption = commandListSelect.options[commandListSelect.selectedIndex];
+    commandInput.value = selectedOption.text;
+    commandListSelect.style.display = 'none';
+    adjustInputWidth(commandInput);
+    paramsInput.focus();
+});
+
+
+commandInput.addEventListener('click', () => {
+    setCommandListPosition();
+    if (commandListSelect.style.display == 'none')
+        commandListSelect.style.display = 'block';
+    else
+        commandListSelect.style.display = 'none';
+    filterCommands();
+});
+
+commandInput.addEventListener('blur', (event) => {
+    if (event.relatedTarget === showCommandListButton || event.relatedTarget === commandListSelect) {
+        event.preventDefault();
+        return;
+    }
+    commandListSelect.style.display = 'none';
+    adjustInputWidth(commandInput);
+});
+
+showCommandListButton.addEventListener('click', (event) => {
+    event.preventDefault();
+    setCommandListPosition();
+    unfilterCommands();
+    if (commandListSelect.style.display == 'none')
+        commandListSelect.style.display = 'block';
+    else
+        commandListSelect.style.display = 'none';
+});
+
+window.addEventListener('click', (event) => {
+    if (!commandInput.contains(event.target) && !commandListSelect.contains(event.target) && !showCommandListButton.contains(event.target)) {
+        commandListSelect.style.display = 'none';
+    }
+});
+
+window.addEventListener('keydown', (event) => {
+    if ([commandInput, paramsInput, commandListSelect].includes(document.activeElement)) return;
+    if (event.code === `Key${event.key.toUpperCase()}`) {
+        commandInput.focus();
+        commandInput.dispatchEvent(new KeyboardEvent('keydown', event));
+    }
+});
+
+window.addEventListener('resize', () => {
+    setCommandListPosition();
+});
+
+window.addEventListener('load', () => {
+    fetchExecutables();
+    adjustInputWidth(paramsInput); // Adjust width on load
+    adjustInputWidth(commandInput); // Adjust width on load
+    setCommandListPosition();
+});
+
+async function fetchExecutables() {
+    try {
+        const response = await fetch(`/executables${urlToken}`);
+        if (!response.ok) {
+            throw new Error('Failed to fetch command status');
+        }
+        const executables = await response.json();
+        commandListSelect.innerHTML = '';
+        executables.forEach(executable => {
+            const option = document.createElement('option');
+            option.className = 'command-item';
+            option.text = executable;
+            commandListSelect.appendChild(option);
+        });
+    } catch (error) {
+        alert("Failed to fetch executables");
+    }
+    commandListSelect.size = Math.min(20, commandListSelect.options.length);
+    if (commandListSelect.options.length == 1) {
+        commandInput.value = commandListSelect.options[0].text;
+        showCommandListButton.style.display = 'none';
+    }
+    if (commandListSelect.options.length == 0)
+        document.getElementById('launchForm').style.display = 'none';
+
+}