☰

Tiny Modal

Tiny Modal!

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.greatest.deepsurf.us/scripts/491129/1350905/Tiny%20Modal.js 

  1. // ==UserScript==
  2. // @name         Tiny Modal
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2024-03-28
  5. // @description  Tiny Modal
  6. // @author       NoLongerPure
  7. // @match        https://www.torn.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=torn.com
  9. // @grant        GM_addStyle
  10. // ==/UserScript==
  11.  
  12. function createModal(content) {
  13.     const modalWrapper = document.createElement('div');
  14.     modalWrapper.id = 'tmModalWrapper';
  15.     modalWrapper.innerHTML = `
  16.         <div id="tmModal">
  17.             <div id="tmModalHeader">
  18.                 <span id="tmModalCloseBtn">×</span>
  19.             </div>
  20.             <div id="tmModalContent">
  21.                 ${content}
  22.             </div>
  23.         </div>
  24.     `;
  25.     document.body.appendChild(modalWrapper);
  26.  
  27.     // Style for modal
  28.     const modalStyle = `
  29.         #tmModalWrapper {
  30.             position: fixed;
  31.             top: 50px;
  32.             left: 50px;
  33.             z-index: 9999;
  34.         }
  35.         #tmModal {
  36.             border: 1px solid #ccc;
  37.             background-color: #fff;
  38.             border-radius: 5px;
  39.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  40.             max-width: 200px;
  41.         }
  42.         #tmModalHeader {
  43.             background-color: #f0f0f0;
  44.             padding: 8px;
  45.             border-bottom: 1px solid #ccc;
  46.             cursor: move;
  47.         }
  48.         #tmModalContent {
  49.             padding: 16px;
  50.         }
  51.         #tmModalCloseBtn {
  52.             cursor: pointer;
  53.             float: right;
  54.             font-size: 20px;
  55.         }
  56.     `;
  57.     GM_addStyle(modalStyle);
  58.  
  59.     // Make modal movable
  60.     const modal = document.getElementById('tmModalWrapper');
  61.     const modalHeader = document.getElementById('tmModalHeader');
  62.     let isDragging = false;
  63.     let offsetX, offsetY;
  64.     let modalWidth = modal.offsetWidth;
  65.     let modalHeight = modal.offsetHeight;
  66.     let windowWidth = window.innerWidth;
  67.     let windowHeight = window.innerHeight;
  68.  
  69.     modalHeader.addEventListener('mousedown', startDragging);
  70.     modalHeader.addEventListener('mouseup', stopDragging);
  71.  
  72.     function startDragging(e) {
  73.         isDragging = true;
  74.         offsetX = e.clientX - modal.offsetLeft;
  75.         offsetY = e.clientY - modal.offsetTop;
  76.         document.addEventListener('mousemove', dragModal);
  77.     }
  78.  
  79.     function stopDragging() {
  80.         isDragging = false;
  81.         document.removeEventListener('mousemove', dragModal);
  82.     }
  83.  
  84.     function dragModal(e) {
  85.         if (isDragging) {
  86.             const newX = e.clientX - offsetX;
  87.             const newY = e.clientY - offsetY;
  88.  
  89.             // Ensure modal does not go past the left edge of the screen
  90.             const leftEdge = Math.max(newX, 0);
  91.  
  92.             // Ensure modal does not go past the top edge of the screen
  93.             const topEdge = Math.max(newY, 0);
  94.  
  95.             // Ensure modal does not go past the right edge of the screen
  96.             const rightEdge = Math.min(newX, window.innerWidth - modal.offsetWidth);
  97.  
  98.             // Ensure modal does not go past the bottom edge of the screen
  99.             const bottomEdge = Math.min(newY, window.innerHeight - modal.offsetHeight);
  100.  
  101.             modal.style.left = `${Math.min(Math.max(leftEdge, 0), window.innerWidth - modal.offsetWidth)}px`;
  102.             modal.style.top = `${Math.min(Math.max(topEdge, 0), window.innerHeight - modal.offsetHeight)}px`;
  103.         }
  104.     }
  105.  
  106.  
  107.     // Close modal when close button is clicked
  108.     const closeBtn = document.getElementById('tmModalCloseBtn');
  109.     closeBtn.addEventListener('click', () => {
  110.         modal.style.display = 'none';
  111.     });
  112. }