CAI Universal Toolbelt Menu

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

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/466064/1190599/CAI%20Universal%20Toolbelt%20Menu.js 

// ==UserScript==
// @exclude      *
// @author       notdoingthateither
// @version      1.1

// ==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 buttons = []

  init = function() {
    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');

    const menuElement = document.createElement('div');
    menuElement.setAttribute('id', 'tms-script-cai-universal-toolbelt');
    menuElement.classList.add('cai-tool-menu', 'cai-tool-menu-hide');
    
    const menuToggleBtn = document.createElement('button');
    menuToggleBtn.setAttribute('id', 'tms-script-cai-universal-toolbelt-toggle-btn');
    menuToggleBtn.classList.add('cai-tool-menu-toggle');
    menuToggleBtn.innerHTML = "ToolMenu";
    menuToggleBtn.dataset.menuHidden = 'true';
    menuToggleBtn.onclick = () => {
      triggerMenuClick(menuToggleBtn.dataset.menuHidden === 'true');
    };
    parentElement.append(menuElement, menuToggleBtn);
    
    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: 0 .25rem .25rem .25rem;
        border: 1px solid rgba(60, 133, 246, .75);
        width: fit-content;
        min-width: 32px;
        min-height: 32px;
      }
  
      .cai-tool-menu-toggle {
        cursor: pointer;
        display: flex;
        border: 1px solid transparent;
        background-color: rgba(60, 133, 246, .75);
        border-radius: .25rem !important;
        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);
    document.body.appendChild(parentElement);

    if (buttons.length > 0) {
      menuElement.append(buttons);
      onButtonAdded(parentElement);
    }

    console.log('menu initialized.');
  };

  addButton = function() {
    const newBtn = document.createElement('button');
    const menu = getMenu();
    newBtn.classList.add('cai-tool-btn');

    if (menu != null) {
      menu.append(newBtn);
      onButtonAdded(menu.parentElement);
    } else {
      buttons.push(newBtn);
    }

    return newBtn;
  };

  onButtonAdded = function(parent) {
    if (parent.hasAttribute('style')) parent.removeAttribute('style');
    console.log('new button added!');
  };
  
  triggerMenuClick = function(isHidden) {
    const menuToggleBtn = document.getElementById('tms-script-cai-universal-toolbelt-toggle-btn');

    if (isHidden) {
      getMenu().classList.remove('cai-tool-menu-hide');
      menuToggleBtn.dataset.menuHidden = 'false';
    } else {
      getMenu().classList.add('cai-tool-menu-hide');
      menuToggleBtn.dataset.menuHidden = 'true';
    }
  };

  getMenu = function() {
    return document.getElementById('tms-script-cai-universal-toolbelt');
  };
  
  if (getMenu() == null) {
    console.log('wait for doc to load to init menu.');
    window.addEventListener('DOMContentLoaded', () => {
      if (getMenu() == null) init();
    }, false);
  } else {
    console.log('menu already initialized.');
  }

  return {
    "newButton": addButton,
    "showMenu": triggerMenuClick
  };
}();