CAI Universal Toolbelt Menu

Reusable menu structure for various c.ai TM scripts that require a menu
目前為 2023-05-12 提交的版本，檢視最新版本。
此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.gf.qytechs.cn/scripts/466064/1189806/CAI%20Universal%20Toolbelt%20Menu.js
發表問題、評論、或檢舉該腳本。
Wrap lines
// ==UserScript==
// @exclude       *
// @author        notdoingthateither
 
// ==UserLibrary==
// @name          CAI Universal Toolbelt Menu
// @description   Reusable menu structure for various c.ai TM scripts that require a menu
// @license       MIT
 
 
// ==/UserScript==
 
// ==/UserLibrary==
 
CAIToolMenu = window.CAIToolMenu || {};
 
CAIToolMenu = function() {
 
  let menuElement = document.getElementById('tms-script-cai-universal-toolbelt');
  
  let toggleIconSpanL;
  let toggleIconSpanR;
  let menuToggleBtn;
 
  init = function() {
    const _CAIToolMenu_ArrowUp = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-up" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5zm-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5z"/> </svg>';
    const _CAIToolMenu_ArrowDown = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-down" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM8 6a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 .708-.708L7.5 12.293V6.5A.5.5 0 0 1 8 6z"/> </svg>';
    const parentElement = document.createElement('div');
    parentElement.setAttribute('id', 'tms-script-cai-universal-toolbelt-root');
    parentElement.setAttribute('style', 'display: none');
    parentElement.classList.add('cai-tool-root');
 
    menuElement = document.createElement('div');
    menuElement.setAttribute('id', 'tms-script-cai-universal-toolbelt');
    menuElement.classList.add('cai-tool-menu', 'cai-tool-menu-hide');
    
    toggleIconSpanL = document.createElement('span');
    toggleIconSpanL.classList.add('cai-tool-toggle');
    toggleIconSpanL.innerHTML = _CAIToolMenu_ArrowUp;
    
    const caitmSpan = document.createElement('span');
    caitmSpan.innerHTML = 'TM';
 
    toggleIconSpanR = document.createElement('span');
    toggleIconSpanR.classList.add('cai-tool-toggle');
    toggleIconSpanR.innerHTML = _CAIToolMenu_ArrowUp;
 
    menuToggleBtn = document.createElement('button');
    menuToggleBtn.classList.add('cai-tool-menu-toggle');
    menuToggleBtn.append(toggleIconSpanL, caitmSpan, toggleIconSpanR);
    menuToggleBtn.dataset.menuHidden = 'true';
    menuToggleBtn.onclick = () => {
      triggerMenuClick(menuToggleBtn.dataset.menuHidden === 'true');
    };
 
    parentElement.append(menuElement, menuToggleBtn);
    document.body.appendChild(parentElement);
    console.log('menu initialized.');
    
    const styleHTML = document.createElement('style');
    styleHTML.innerHTML = `
      .cai-tool-root {
        position: fixed;
        bottom: 5px;
        z-index: 200;
        display: flex;
        align-items: start;
        flex-direction: column;
      }
 
      .cai-tool-menu {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        max-width: 300px;
        z-index: 201;
      }
 
      .cai-tool-menu-hide {
        display: none !important;
      }
      
      .cai-tool-btn {
        border-radius: 32px;
        cursor: pointer;
        margin: .25rem .25rem 0 .25rem;
        border: 1px solid;
        width: fit-content;
        min-width: 32px;
        min-height: 32px;
      }
  
      .cai-tool-menu-toggle {
        cursor: pointer;
        display: flex;
        border: 1px solid transparent;
        background-color: transparent;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .05em;
        z-index: 202;
      }
  
      .cai-tool-toggle {
        margin-top: -.5rem;
        margin-bottom: -.5rem;
        padding: .25rem;
        width: 32px;
        flex: 0 0 auto;
        width: auto;
      }
    `;
    document.body.appendChild(styleHTML);
  };
 
  addButton = function() {
    const newBtn = document.createElement('button');
    newBtn.classList.add('cai-tool-btn');
 
    if (menuElement != null) {
      menuElement.append(newBtn);
      console.log('new button added!');
      onButtonAdded();
    }
 
    return newBtn;
  };
 
  onButtonAdded = function() {
    const parent = document.getElementById('tms-script-cai-universal-toolbelt-root');
    if (parent.hasAttribute('style')) parent.removeAttribute('style');
  };
  
  triggerMenuClick = function(isHidden) {
    if (isHidden) {
      menuElement.classList.remove('cai-tool-menu-hide');
      toggleIconSpanL.innerHTML = _CAIToolMenu_ArrowDown;
      toggleIconSpanR.innerHTML = _CAIToolMenu_ArrowDown;
      menuToggleBtn.dataset.menuHidden = 'false';
    } else {
      menuElement.classList.add('cai-tool-menu-hide');
      toggleIconSpanL.innerHTML = _CAIToolMenu_ArrowUp;
      toggleIconSpanR.innerHTML = _CAIToolMenu_ArrowUp;
      menuToggleBtn.dataset.menuHidden = 'true';
    }
  }
  
  if (menuElement == null) {
    console.log('init menu.');
    init();
  } else {
    console.log('menu already initialized.');
  }
 
  return {
    "newButton": addButton,
    "showMenu": triggerMenuClick
  };
}();
欢迎访问Greasy Fork镜像
