The main user interface for the TriX Executor, with PyScript integration.
La data de
Acest script nu ar trebui instalat direct. Aceasta este o bibliotecă pentru alte scripturi care este inclusă prin directiva meta a // @require https://update.greasyfork.org/scripts/541462/1622842/TriX%20UI%20Library.js
// ==UserScript==
// @name TriX UI Library
// @namespace https://github.com/YourUsername/TriX-Executor
// @version 4.0.0
// @description The main user interface for the TriX Executor, with PyScript integration.
// @author You
// @license MIT
// ==/UserScript==
const TriX_UI=(function(){"use strict";let _GM;const UI={isMinimized:!1,currentScriptName:"",init(gmFunctions){_GM=gmFunctions,this.injectCSS(),this.injectHTML(),this.attachEventListeners(),TriX_Core.ScriptManager.populateScriptList(),this.updateTabCountUI(1),this.log("TriX UI Library v4.0.0 initialized."),this.showTab("js"),"undefined"!=typeof TriX_Addons&&TriX_Addons.init(_GM)},updateTabCountUI(e){const t=document.getElementById("trix-open-btn-badge"),i=document.getElementById("trix-header-tab-counter");t&&(t.textContent=e),i&&(i.textContent=e)},
injectCSS:function(){_GM.GM_addStyle(`:root{--trix-bg-primary:#1e1e1e;--trix-bg-secondary:#2d2d2d;--trix-bg-tertiary:#3c3c3c;--trix-accent-color:#00aeff;--trix-text-primary:#d4d4d4;--trix-text-secondary:#8c8c8c;--trix-border-color:#4a4a4a}#trix-container,#trix-open-btn{font-family:'Segoe UI','Roboto',sans-serif!important}#trix-container{position:fixed!important;top:50px!important;left:50px!important;width:600px;height:400px;background-color:var(--trix-bg-primary);border:1px solid var(--trix-border-color);box-shadow:0 0 20px rgba(0,0,0,.5);z-index:1000000!important;display:flex!important;flex-direction:column;resize:both;overflow:hidden;min-width:450px;min-height:300px}#trix-container.hidden{display:none!important}#trix-container.minimized{height:auto!important;min-height:0!important;resize:none!important}#trix-container.minimized #trix-body,#trix-container.minimized #trix-footer,#trix-container.minimized #trix-console{display:none!important}#trix-open-btn{position:fixed!important;top:20px!important;right:20px!important;z-index:999999!important;display:flex!important;align-items:center;background-color:var(--trix-accent-color)!important;color:#fff!important;border:none!important;border-radius:5px;padding:10px 15px!important;cursor:pointer!important;box-shadow:0 0 10px rgba(0,174,255,.7);font-weight:700!important;font-size:14px!important}.trix-tab-badge{display:inline-block;background-color:var(--trix-bg-secondary);color:var(--trix-text-primary);padding:2px 8px;margin-left:8px;border-radius:10px;font-size:12px;font-weight:700;line-height:1.2;vertical-align:middle;min-width:10px;text-align:center}#trix-header{background-color:var(--trix-bg-secondary);padding:5px 10px;cursor:move;user-select:none;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--trix-border-color)}#trix-header-title{display:flex;align-items:center;font-weight:700;color:var(--trix-text-primary)}#trix-logo{width:24px;height:24px;margin-right:8px}#trix-addons-btn-container{flex-grow:1;text-align:center}#trix-addons-btn{display:inline-block;padding:4px 12px;font-size:13px;font-weight:700;background-color:var(--trix-bg-tertiary);border-radius:5px;cursor:pointer;transition:background-color .2s}#trix-addons-btn:hover{background-color:#4a5276}#trix-window-controls{display:flex;align-items:center}#trix-window-controls button{background:0 0;border:none;color:var(--trix-text-secondary);font-size:18px;cursor:pointer;margin-left:10px;padding:0 4px;line-height:1;transition:color .2s}#trix-window-controls button:hover{color:var(--trix-accent-color)}#trix-close-btn:hover{color:#ff5555}#trix-body{flex-grow:1;display:flex;overflow:hidden}#trix-left-panel{width:160px;background-color:var(--trix-bg-secondary);padding:10px 0;display:flex;flex-direction:column;border-right:1px solid var(--trix-border-color)}#trix-script-list-title{padding:0 10px 10px;font-weight:700;color:var(--trix-text-primary);border-bottom:1px solid var(--trix-border-color)}#trix-script-list{flex-grow:1;overflow-y:auto;margin-top:10px}.trix-script-item{padding:8px 15px;cursor:pointer;color:var(--trix-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid transparent}.trix-script-item:hover{background-color:var(--trix-bg-tertiary);color:var(--trix-text-primary)}.trix-script-item.active{border-left:3px solid var(--trix-accent-color);background-color:rgba(0,174,255,.1);color:var(--trix-text-primary)!important;font-weight:700}#trix-right-panel{flex-grow:1;display:flex;flex-direction:column}#trix-editor-tabs{display:flex;background-color:var(--trix-bg-primary);border-bottom:1px solid var(--trix-border-color)}.trix-editor-tab-btn{padding:8px 12px;cursor:pointer;border:none;background-color:transparent;color:var(--trix-text-secondary);font-size:13px;border-bottom:2px solid transparent}.trix-editor-tab-btn.active{color:var(--trix-accent-color);border-bottom-color:var(--trix-accent-color)}.trix-editor-pane{display:none;flex-grow:1;flex-direction:column}.trix-editor-pane.active{display:flex}.trix-editor{flex-grow:1;background-color:var(--trix-bg-primary);color:var(--trix-text-primary);border:none;padding:10px;box-sizing:border-box;resize:none;font-family:'Fira Code',monospace;font-size:14px}#trix-console{height:120px;background-color:var(--trix-bg-secondary);border-top:1px solid var(--trix-border-color);padding:5px;overflow-y:auto;font-size:12px;font-family:'Fira Code',monospace}#trix-console div{padding:2px 8px;border-bottom:1px solid #1e202c;word-break:break-all}#trix-console .log-error{color:#f7768e}#trix-console .log-warn{color:#e0af68}#trix-console .log-info{color:#7dcfff}#trix-console .log-broadcast{color:#9ece6a;font-style:italic}#trix-footer{display:flex;gap:10px;padding:10px;background-color:var(--trix-bg-secondary);border-top:1px solid var(--trix-border-color);align-items:center}.trix-button{background-color:var(--trix-bg-tertiary);border:1px solid var(--trix-border-color);color:var(--trix-text-primary);padding:8px 15px;cursor:pointer;border-radius:5px}.trix-button:hover{background-color:#4a5276}.trix-button.primary{background-color:var(--trix-accent-color);color:#1a1b26;font-weight:700}.trix-button.primary:hover{background-color:#9aadef}.trix-button.danger{background-color:#f7768e;color:#1a1b26}.trix-button.danger:hover{background-color:#f88e9a}.trix-python-deps{flex-grow:1;background-color:var(--trix-bg-tertiary);border:1px solid var(--trix-border-color);color:var(--trix-text-primary);padding:8px 15px;border-radius:5px}`)},
injectHTML:function(){
const e=`
<div id="trix-container" class="hidden">
<div id="trix-header">
<div id="trix-header-title"><img id="trix-logo" src="https://i.postimg.cc/0NkRZxDm/image.png" alt="TriX Logo"> <span id="trix-header-title-text">TriX Executor</span><span id="trix-header-tab-counter" class="trix-tab-badge">1</span></div>
<div id="trix-addons-btn-container"><span id="trix-addons-btn" title="Addons">Addons +</span></div>
<div id="trix-window-controls"><button id="trix-minimize-btn" title="Minimize">－</button> <button id="trix-close-btn" title="Close">✕</button></div>
</div>
<div id="trix-body">
<div id="trix-left-panel"><div id="trix-script-list-title">Script List</div><div id="trix-script-list"></div></div>
<div id="trix-right-panel">
<div id="trix-editor-tabs">
<button class="trix-editor-tab-btn" data-tab="js">JavaScript</button>
<button class="trix-editor-tab-btn" data-tab="python">Python</button>
</div>
<div id="js-pane" class="trix-editor-pane">
<textarea id="trix-editor" placeholder="-- Paste or load a JavaScript script here..."></textarea>
</div>
<div id="python-pane" class="trix-editor-pane">
<!-- PyScript Integration Area -->
<py-config id="trix-py-config">
terminal = false
</py-config>
<py-script id="trix-py-script-target"></py-script>
<textarea id="trix-python-editor" class="trix-editor" placeholder="-- Paste your Python script here..."></textarea>
<div style="padding: 5px 10px; display:flex; gap:10px; align-items:center; background:var(--trix-bg-primary);">
<label for="trix-python-packages" style="font-size:12px;color:var(--trix-text-secondary);">Packages:</label>
<input type="text" id="trix-python-packages" class="trix-python-deps" placeholder="e.g., numpy, pandas">
</div>
</div>
<div id="trix-console"></div>
</div>
</div>
<div id="trix-footer">
<button id="trix-execute-btn" class="trix-button primary">▶ Execute</button> <button id="trix-clear-btn" class="trix-button">Clear</button> <input type="text" id="trix-save-name" placeholder="Script Name..." class="trix-button" style="flex-grow:1; cursor:text;"> <button id="trix-save-btn" class="trix-button">Save</button> <button id="trix-delete-btn" class="trix-button danger">Delete</button>
</div>
</div>
<button id="trix-open-btn"><span>Open TriX</span><span id="trix-open-btn-badge" class="trix-tab-badge">1</span></button>`;
document.body.insertAdjacentHTML("beforeend",e)
},
attachEventListeners:function(){const e=document.getElementById("trix-container"),t=document.getElementById("trix-header");t.addEventListener("mousedown",t=>{if(t.target.closest("#trix-window-controls, #trix-addons-btn-container"))return;let i=!0;const s=t.clientX-e.offsetLeft,o=t.clientY-e.offsetTop,n=t=>{i&&(t.preventDefault(),e.style.left=`${t.clientX-s}px`,e.style.top=`${t.clientY-o}px`)},c=()=>{i=!1,document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",c)};document.addEventListener("mousemove",n),document.addEventListener("mouseup",c)}),document.getElementById("trix-open-btn").addEventListener("click",()=>this.togglePanel(!0)),document.getElementById("trix-close-btn").addEventListener("click",()=>this.togglePanel(!1)),document.getElementById("trix-minimize-btn").addEventListener("click",()=>{this.isMinimized=!this.isMinimized,e.classList.toggle("minimized",this.isMinimized)}),document.querySelectorAll(".trix-editor-tab-btn").forEach(e=>{e.addEventListener("click",()=>this.showTab(e.dataset.tab))}),document.getElementById("trix-script-list").addEventListener("click",e=>{if(e.target.matches(".trix-script-item")){const t=e.target.dataset.scriptKey;TriX_Core.ScriptManager.loadScriptToEditor(t)}}),document.getElementById("trix-execute-btn").addEventListener("click",()=>{const e=document.querySelector(".trix-editor-tab-btn.active").dataset.tab;"js"===e?TriX_Core.Executor.execute(document.getElementById("trix-editor").value):"python"===e&&this.runPython()}),document.getElementById("trix-clear-btn").addEventListener("click",()=>{document.getElementById("trix-editor").value="",document.getElementById("trix-python-editor").value="",document.getElementById("trix-save-name").value="",this.setActiveScriptItem(null),this.currentScriptName=""}),document.getElementById("trix-save-btn").addEventListener("click",()=>TriX_Core.ScriptManager.saveScriptFromEditor("trix_script_")),document.getElementById("trix-delete-btn").addEventListener("click",()=>TriX_Core.ScriptManager.deleteCurrentScript("trix_script_")),document.getElementById("trix-addons-btn").addEventListener("click",()=>TriX_Addons.show())},
showTab:function(e){document.querySelectorAll(".trix-editor-pane").forEach(t=>t.classList.remove("active")),document.querySelectorAll(".trix-editor-tab-btn").forEach(t=>t.classList.remove("active")),document.getElementById(`${e}-pane`).classList.add("active"),document.querySelector(`.trix-editor-tab-btn[data-tab="${e}"]`).classList.add("active")},
runPython() {
const code = document.getElementById('trix-python-editor').value;
const packages = document.getElementById('trix-python-packages').value;
const configEl = document.getElementById('trix-py-config');
const scriptTargetEl = document.getElementById('trix-py-script-target');
this.log('Executing Python via PyScript...', 'info');
// Update the config with necessary packages
configEl.innerHTML = `
terminal = false
[[fetch]]
files = ["./trix_console.py"]
[[packages]]
${packages ? `packages = ["${packages.split(',').map(p => p.trim()).join('", "')}"]` : ''}
`;
// The Python code that will redirect print() to our console
const bootstrapper = `
import sys
from js import TriX_UI
class TriXConsoleIO:
def write(self, s):
if s.strip(): # Avoid logging empty newlines
TriX_UI.log(f"[Python]: {s.strip()}", 'log')
def flush(self):
pass
sys.stdout = TriXConsoleIO()
sys.stderr = TriXConsoleIO()
print("Python environment ready.")
`;
// Set the code inside the pyscript tag and let it run
scriptTargetEl.innerHTML = bootstrapper + "\n" + code;
},
// Minified helpers...
togglePanel:function(e){const t=document.getElementById("trix-container"),i=document.getElementById("trix-open-btn"),s=t.classList.contains("hidden");!0===e||s?(t.classList.remove("hidden"),i.style.display="none"):(t.classList.add("hidden"),i.style.display="flex")},log:function(e,t="log"){const i=document.getElementById("trix-console");if(!i)return;const s=document.createElement("div");s.className=`log-${t}`,s.textContent=`> ${String(e)}`,i.prepend(s)},setActiveScriptItem:function(e){document.querySelectorAll(".trix-script-item").forEach(t=>{t.classList.toggle("active",t.dataset.scriptKey===e)})}};
return UI;
})();