Greasy Fork is available in English.

CAI Universal Toolbelt Menu

Reusable menu structure for various c.ai TM scripts that require a menu

Version vom 12.05.2023. Aktuellste Version

Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greasyfork.org/scripts/466064/1189696/CAI%20Universal%20Toolbelt%20Menu.js 

// ==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() {

  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>';

  let menuElement = document.getElementById('tms-script-cai-universal-toolbelt');
  let waitList = [];

  _processWaitList = function() {
    menuElement.append(waitList);
    waitList = [];
  };

  _initCallback = function() {
    const parentElement = document.getElementsByClassName('chatfooterbg-normal');
    log.dir(parentElement);
    menuElement = document.createElement('div');
    menuElement.setAttribute('id', 'tms-script-cai-universal-toolbelt');
    menuElement.classList.add('cai-tool-menu', 'cai-tool-menu-hide');
    
    const toggleIconSpan = document.createElement('span');
    toggleIconSpan.classList.add('cai-tool-toggle');
    toggleIconSpan.innerHTML = _CAIToolMenu_ArrowUp;
    
    const menuToggleBtn = document.createElement('button');
    menuToggleBtn.classList.add('cai-tool-menu-toggle');
    menuToggleBtn.append(toggleIconSpan);
    menuToggleBtn.dataset.menuHidden = 'true';
    menuToggleBtn.onclick = () => {
      if (menuToggleBtn.dataset.menuHidden === 'true') {
        menuElement.classList.remove('cai-tool-menu-hide');
        menuToggleBtn.innerHTML = _CAIToolMenu_ArrowUp;
        menuToggleBtn.dataset.menuHidden = 'false';
      } else {
        menuElement.classList.add('cai-tool-menu-hide');
        menuToggleBtn.innerHTML = _CAIToolMenu_ArrowDown;
        menuToggleBtn.dataset.menuHidden = 'true';
      }
    };
    parentElement.prepend(menuElement, menuToggleBtn);
    _processWaitList();
    console.log('menu setup finished');
  };

  init = function() {
    if (document.readyState === 'complete') {
      _initCallback();
    } else {
      window.addEventListener("load", _initCallback);
    }
  
    const styleHTML = document.createElement('style');
    styleHTML.innerHTML = `
      .cai-tool-btn {
        border-radius: 32px;
        cursor: pointer;
        margin-right: .25rem;
        margin-left: .25rem;
        padding: .1rem;
        flex: 0 0 auto;
        width: auto;
        border: 1px solid transparent;
      }
  
      .cai-tool-menu {
        display: flex;
        align-items: center;
        justify-content: center;
      }
  
      .cai-tool-menu-hide {
        display: none !important;
      }
  
      .cai-tool-menu-toggle {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        background-color: transparent;
      }
  
      .cai-tool-toggle {
        margin-top: -.5rem;
        margin-bottom: -.5rem;
        flex: 0 0 auto;
        width: auto;
      }
    `;
    document.body.appendChild(styleHTML);
    console.log('added menu style');
  };

  addButton = function() {
    const newBtn = document.createElement('button');
    newBtn.classList.add('cai-tool-btn');
    if (menuElement !== null) {
      menuElement.append(newBtn);
      console.log('new button added!');
    } else {
      console.log('no menu initialized, adding button to wait list...');
      waitList.push(newBtn);
    }

    return newBtn;
  };

  if (menuElement === null) {
    console.log('no menu');
    init();
  }

  return {
    "newButton": addButton
  };
}();