CAI Universal Toolbelt Menu

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

Pada tanggal 11 Mei 2023. Lihat %(latest_version_link).

Skrip ini tidak untuk dipasang secara langsung. Ini adalah pustaka skrip lain untuk disertakan dengan direktif meta // @require https://update.greasyfork.org/scripts/466064/1189193/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==

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

function CAIToolMenu_Struct() {
  const menuElement = document.getElementById('tms-script-cai-universal-toolbelt');
  if (menuElement === 'undefined') {
    CAIToolMenu_FreshInit(this);  
  } else {
    CAIToolMenu_Init(this, menuElement);
  }
}

function CAIToolMenu_FreshInit(caiToolMenu) {
  CAIToolMenu_InitCallBacks();

  const pdCallback = function() {
    const parentElement = document.findElementsByClassTag('chatfooterbg-normal');

    caiToolMenu.menuElement = document.createElement('div');
    caiToolMenu.menuElement.setAttribute('id', 'tms-script-cai-universal-toolbelt');
    caiToolMenu.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') {
        caiToolMenu.menuElement.classList.remove('cai-tool-menu-hide');
        menuToggleBtn.innerHTML = _CAIToolMenu_ArrowUp;
        menuToggleBtn.dataset.menuHidden = 'false';
      } else {
        caiToolMenu.menuElement.classList.add('cai-tool-menu-hide');
        menuToggleBtn.innerHTML = _CAIToolMenu_ArrowDown;
        menuToggleBtn.dataset.menuHidden = 'true';
      }
    };
    parentElement.prepend(_menuElement, menuToggleBtn);
    caiToolMenu.onInit();
  };

  if (document.readyState === 'complete') {
    pdCallback();
  } else {
    window.addEventListener("load", pdCallback);
  }

  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);
}

function CAIToolMenu_Init(caiToolMenu, menuElement) {
  caiToolMenu.menuElement = menuElement;
  CAIToolMenu_InitCallBacks(caiToolMenu);
  caiToolMenu.onInit();
}

function CAIToolMenu_InitCallBacks(caiToolMenu) {
  caiToolMenu.onInit = caiToolMenu.onInit || function() { console.log('init finished') };
  caiToolMenu.onNewButton = caiToolMenu.onNewButton || function() {console.log('button added') };
}

CAIToolMenu_Struct.prototype = {
  // Support old method of initalizing
  init: function() {
    CAIToolMenu_Init(this);
    this.onInit();
  },

  // call CAIToolMenu.newButton() from your script to add a new Button
  newButton: function () {
    const newBtn = document.createElement('button');
    newBtn.classList.add('cai-tool-btn');
    _menuElement.append(newBtn);
    onNewButton();

    return newBtn;
  }
}

const CAIToolMenu = CAIToolMenu_Struct();