TriX UI Library

UI library for the TriX Executor. Not intended for direct installation.

Stan na 02-07-2025. Zobacz najnowsza wersja.

Ten skrypt nie powinien być instalowany bezpośrednio. Jest to biblioteka dla innych skyptów do włączenia dyrektywą meta // @require https://update.greasyfork.org/scripts/541462/1618061/TriX%20UI%20Library.js

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Greasemonkey lub Violentmonkey.

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Violentmonkey.

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Violentmonkey.

Aby zainstalować ten skrypt, wymagana będzie instalacja rozszerzenia Tampermonkey lub Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

Aby zainstalować ten skrypt, musisz zainstalować rozszerzenie menedżera skryptów użytkownika.

(Mam już menedżera skryptów użytkownika, pozwól mi to zainstalować!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

Będziesz musiał zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

Będziesz musiał zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

Musisz zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

(Mam już menedżera stylów użytkownika, pozwól mi to zainstalować!)

// ==UserScript==
// @name        TriX UI Library
// @namespace   https://github.com/YourUsername/TriX-Executor
// @version     1.4.0
// @description UI library for the TriX Executor. Not intended for direct installation.
// @author      You
// @license     MIT
// ==/UserScript==

const TriX_UI = (function() {
    'use strict';

    // This UI module depends on the TriX_Core object being available.
    const UI = {
        isMinimized:!1,currentScriptName:"",
        init(){this.injectCSS(),this.injectHTML(),this.attachEventListeners(),TriX_Core.ScriptManager.populateScriptList(),TriX_Core.TabManager.updateTabCountUI(),this.log("TriX UI Library v1.4.0 initialized.")},
        injectCSS(){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-window-controls button{background:0 0;border:none;color:var(--trix-text-secondary);font-size:18px;cursor:pointer;margin-left:8px;padding:0 4px;line-height:1}#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:150px;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 10px;cursor:pointer;color:var(--trix-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trix-script-item:hover{background-color:var(--trix-bg-tertiary);color:var(--trix-text-primary)}.trix-script-item.active{background-color:var(--trix-accent-color);color:var(--trix-bg-primary)!important;font-weight:700}#trix-right-panel{flex-grow:1;display:flex;flex-direction:column}#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:'Consolas','Monaco',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:'Consolas','Monaco',monospace}#trix-console div{padding:2px 4px;border-bottom:1px solid #333;word-break:break-all}#trix-console .log-error{color:#ff5555}#trix-console .log-warn{color:#e5c07b}#trix-console .log-info{color:#00aeff}#trix-console .log-broadcast{color:#98c379;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;transition:background-color .2s}.trix-button:hover{background-color:#555}.trix-button.primary{background-color:var(--trix-accent-color);color:var(--trix-bg-primary);font-weight:700}.trix-button.primary:hover{background-color:#00bfff}.trix-button.danger{background-color:#c0392b}.trix-button.danger:hover{background-color:#e74c3c}`)},
        injectHTML(){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-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"><textarea id="trix-editor" placeholder="-- Paste or load a script here..."></textarea><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(){const e=document.getElementById("trix-container"),t=document.getElementById("trix-header");t.addEventListener("mousedown",t=>{if(t.target.closest("#trix-window-controls"))return;let s=!0;const o=t.clientX-e.offsetLeft,n=t.clientY-e.offsetTop,i=i=>{s&&(i.preventDefault(),e.style.left=`${i.clientX-o}px`,e.style.top=`${i.clientY-n}px`)},d=()=>{s=!1,document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",d)};document.addEventListener("mousemove",i),document.addEventListener("mouseup",d)}),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.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",()=>TriX_Core.Executor.execute(document.getElementById("trix-editor").value)),document.getElementById("trix-clear-btn").addEventListener("click",()=>{document.getElementById("trix-editor").value="",document.getElementById("trix-save-name").value="",this.setActiveScriptItem(null),this.currentScriptName=""}),document.getElementById("trix-save-btn").addEventListener("click",TriX_Core.ScriptManager.saveScriptFromEditor),document.getElementById("trix-delete-btn").addEventListener("click",TriX_Core.ScriptManager.deleteCurrentScript)},
        togglePanel(e){const t=document.getElementById("trix-container"),s=document.getElementById("trix-open-btn"),o=t.classList.contains("hidden");!0===e||o?(t.classList.remove("hidden"),s.style.display="none"):(t.classList.add("hidden"),s.style.display="flex")},
        log(e,t="log"){const s=document.getElementById("trix-console");if(!s)return;const o=document.createElement("div");o.className=`log-${t}`,o.textContent=`> ${String(e)}`,s.prepend(o)},
        setActiveScriptItem(e){document.querySelectorAll(".trix-script-item").forEach(t=>{t.classList.toggle("active",t.dataset.scriptKey===e)})}
    };

    // Expose the init function for the core library to call.
    return {
        init: UI.init,
        log: UI.log, // Expose for ScriptManager
        currentScriptName: UI.currentScriptName, // Expose for ScriptManager
        setActiveScriptItem: UI.setActiveScriptItem // Expose for ScriptManager
    };
})();