lucianjp-library

Core library to handle webpages dom with userscripts

Този скрипт не може да бъде инсталиран директно. Това е библиотека за други скриптове и може да бъде използвана с мета-директива // @require https://update.greasyfork.org/scripts/464986/1182404/lucianjp-library.js

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey, Greasemonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да инсталирате разширение, като например Tampermonkey .

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Userscripts.

За да инсталирате скрипта, трябва да инсталирате разширение като Tampermonkey.

За да инсталирате този скрипт, трябва да имате инсталиран скриптов мениджър.

(Вече имам скриптов мениджър, искам да го инсталирам!)

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

(Вече имам инсталиран мениджър на стиловете, искам да го инсталирам!)

// ==UserScript==
// @name        lucianjp-library
// @namespace   lucianjp
// @version     1.0.0
// @author      lucianjp
// @grant       GM_addStyle
// @description Core library to handle webpages dom with userscripts
// ==/UserScript==

class LucianJP_Menu {
  constructor() {
    this.menuContainer = null;
    this.isActive = true;
  }
  
  get container() {
    return this.menuContainer = this.menuContainer || document.querySelector('.lucianjp-menu') || this.createMenuContainer();
  }

  createMenuContainer() {
    this.menuContainer = document.createElement('div');
    this.menuContainer.classList.add('lucianjp-menu');
    document.body.appendChild(this.menuContainer);

    // Handle shift keypress to show/hide the menu
    document.addEventListener('keydown', (event) => {
      if (event.key === 'Shift') {
        this.toggleMenu();
      }
    });

    return this.menuContainer;
  }

   add(text, onClick) {
    if (typeof onClick !== 'function') {
      console.error('LucianJP_Menu.add(): onClick argument must be a function.');
      return;
    }

    const menuItem = document.createElement('div');
    menuItem.innerText = text;
    menuItem.classList.add('lucianjp-menu-item');
    menuItem.addEventListener('click', onClick);
    this.container.appendChild(menuItem);
  }

  toggleMenu() {
    this.isActive = !this.isActive;
    this.container.classList.toggle('lucianjp-menu-close', !this.isActive);
  }
}

const lucianjp = {
  observe: (t, cb, once = false) => {
    let complete = true;

    const disconnectHandler = VM.observe(document, () => {
      if (!complete) return true;
      complete = false;
      const node = document.querySelector(t);

      if (node) {
        cb(node);
        return true;
      }

      complete = true;
    });
    if (once) ready(disconnectHandler);
  },
  ready: callback => {
    if (document.readyState != "loading") callback();
    else document.addEventListener("DOMContentLoaded", callback);
  },

  menu: new LucianJP_Menu()
}

// Add styles
GM_addStyle(`
  .lucianjp-menu {
    position: fixed;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    transition: transform 0.3s ease-in-out;
  }

  .lucianjp-menu-close {
    transform: translateX(calc(100% - 20px)) translateY(-50%);
  }

  .lucianjp-menu-item {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    background: #007aff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    margin: 8px 0;
  }

  .lucianjp-menu-item:hover {
    background: #0066cc;
  }
`);