☰

lucianjp-library

Core library to handle webpages dom with userscripts

Tento skript by neměl být instalován přímo. Jedná se o knihovnu, kterou by měly jiné skripty využívat pomocí meta příkazu // @require https://update.greatest.deepsurf.us/scripts/464986/1182404/lucianjp-library.js 

  1. // ==UserScript==
  2. // @name        lucianjp-library
  3. // @namespace   lucianjp
  4. // @version     1.0.0
  5. // @author      lucianjp
  6. // @grant       GM_addStyle
  7. // @description Core library to handle webpages dom with userscripts
  8. // ==/UserScript==
  9.  
  10. class LucianJP_Menu {
  11.   constructor() {
  12.     this.menuContainer = null;
  13.     this.isActive = true;
  14.   }
  15.   
  16.   get container() {
  17.     return this.menuContainer = this.menuContainer || document.querySelector('.lucianjp-menu') || this.createMenuContainer();
  18.   }
  19.  
  20.   createMenuContainer() {
  21.     this.menuContainer = document.createElement('div');
  22.     this.menuContainer.classList.add('lucianjp-menu');
  23.     document.body.appendChild(this.menuContainer);
  24.  
  25.     // Handle shift keypress to show/hide the menu
  26.     document.addEventListener('keydown', (event) => {
  27.       if (event.key === 'Shift') {
  28.         this.toggleMenu();
  29.       }
  30.     });
  31.  
  32.     return this.menuContainer;
  33.   }
  34.  
  35.    add(text, onClick) {
  36.     if (typeof onClick !== 'function') {
  37.       console.error('LucianJP_Menu.add(): onClick argument must be a function.');
  38.       return;
  39.     }
  40.  
  41.     const menuItem = document.createElement('div');
  42.     menuItem.innerText = text;
  43.     menuItem.classList.add('lucianjp-menu-item');
  44.     menuItem.addEventListener('click', onClick);
  45.     this.container.appendChild(menuItem);
  46.   }
  47.  
  48.   toggleMenu() {
  49.     this.isActive = !this.isActive;
  50.     this.container.classList.toggle('lucianjp-menu-close', !this.isActive);
  51.   }
  52. }
  53.  
  54. const lucianjp = {
  55.   observe: (t, cb, once = false) => {
  56.     let complete = true;
  57.  
  58.     const disconnectHandler = VM.observe(document, () => {
  59.       if (!complete) return true;
  60.       complete = false;
  61.       const node = document.querySelector(t);
  62.  
  63.       if (node) {
  64.         cb(node);
  65.         return true;
  66.       }
  67.  
  68.       complete = true;
  69.     });
  70.     if (once) ready(disconnectHandler);
  71.   },
  72.   ready: callback => {
  73.     if (document.readyState != "loading") callback();
  74.     else document.addEventListener("DOMContentLoaded", callback);
  75.   },
  76.  
  77.   menu: new LucianJP_Menu()
  78. }
  79.  
  80. // Add styles
  81. GM_addStyle(`
  82.   .lucianjp-menu {
  83.     position: fixed;
  84.     right: -6px;
  85.     top: 50%;
  86.     transform: translateY(-50%);
  87.     z-index: 9999;
  88.     transition: transform 0.3s ease-in-out;
  89.   }
  90.  
  91.   .lucianjp-menu-close {
  92.     transform: translateX(calc(100% - 20px)) translateY(-50%);
  93.   }
  94.  
  95.   .lucianjp-menu-item {
  96.     padding: 8px 16px;
  97.     font-size: 14px;
  98.     font-weight: bold;
  99.     cursor: pointer;
  100.     color: #fff;
  101.     background: #007aff;
  102.     border-radius: 8px;
  103.     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  104.     margin: 8px 0;
  105.   }
  106.  
  107.   .lucianjp-menu-item:hover {
  108.     background: #0066cc;
  109.   }
  110. `);