☰

Tiny Modal

Tiny Modal!

بۇ قوليازمىنى بىۋاسىتە قاچىلاشقا بولمايدۇ. بۇ باشقا قوليازمىلارنىڭ ئىشلىتىشى ئۈچۈن تەمىنلەنگەن ئامبار بولۇپ، ئىشلىتىش ئۈچۈن مېتا كۆرسەتمىسىگە قىستۇرىدىغان كود: // @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. }