Greasy Fork is available in English.
UI library for the TriX Executor. Not intended for direct installation.
当前为
此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.greasyfork.icu/scripts/541462/1618070/TriX%20UI%20Library.js
// ==UserScript==
// @name TriX UI Library
// @namespace https://github.com/YourUsername/TriX-Executor
// @version 1.5.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:false, currentScriptName:"",
init() {
this.injectCSS();
this.injectHTML();
this.attachEventListeners();
// FIX: Call the globally exposed Core library object, not a private one.
TriX_Core.ScriptManager.populateScriptList();
this.updateTabCountUI(1); // Set initial count to 1
this.log("TriX UI Library v1.5.0 initialized.");
},
updateTabCountUI(count) {
const openBtnBadge = document.getElementById('trix-open-btn-badge');
const headerBadge = document.getElementById('trix-header-tab-counter');
if (openBtnBadge) openBtnBadge.textContent = count;
if (headerBadge) headerBadge.textContent = count;
},
attachEventListeners() {
const container = document.getElementById('trix-container');
const header = document.getElementById('trix-header');
header.addEventListener('mousedown', (e) => {
if (e.target.closest('#trix-window-controls')) return;
let isDragging = true;
const dragOffsetX = e.clientX - container.offsetLeft;
const dragOffsetY = e.clientY - container.offsetTop;
const onMouseMove = (moveEvent) => { if (!isDragging) return; moveEvent.preventDefault(); container.style.left = `${moveEvent.clientX - dragOffsetX}px`; container.style.top = `${moveEvent.clientY - dragOffsetY}px`; };
const onMouseUp = () => { isDragging = false; document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); };
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
document.getElementById('trix-open-btn').addEventListener('click', () => this.togglePanel(true));
document.getElementById('trix-close-btn').addEventListener('click', () => this.togglePanel(false));
document.getElementById('trix-minimize-btn').addEventListener('click', () => { this.isMinimized = !this.isMinimized; container.classList.toggle('minimized', this.isMinimized); });
// FIX: Call the globally exposed Core library object
document.getElementById('trix-script-list').addEventListener('click', (e) => { if (e.target.matches('.trix-script-item')) { const scriptKey = e.target.dataset.scriptKey; TriX_Core.ScriptManager.loadScriptToEditor(scriptKey); } });
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);
},
// --- Minified CSS, HTML, and other helper functions (no changes needed) ---
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)},
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)})}
};
return UI;
})();