☰

Global Notepad

Adds a global notepad feature with Markdown support and settings GUI

  1. // ==UserScript==
  2. // @name         Global Notepad
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Adds a global notepad feature with Markdown support and settings GUI
  6. // @match        *://*/*
  7. // @grant        GM_setValue
  8. // @grant        GM_getValue
  9. // @run-at       document-end
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Create a button to toggle the notepad
  17.     const button = document.createElement('button');
  18.     button.textContent = '📝'; // Notepad icon
  19.     button.style.position = 'fixed';
  20.     button.style.bottom = '20px';
  21.     button.style.right = '20px';
  22.     button.style.zIndex = '1000';
  23.     button.style.fontSize = '24px';
  24.     button.style.border = 'none';
  25.     button.style.backgroundColor = '#007BFF';
  26.     button.style.color = '#fff';
  27.     button.style.borderRadius = '50%';
  28.     button.style.width = '50px';
  29.     button.style.height = '50px';
  30.     button.style.cursor = 'pointer';
  31.     document.body.appendChild(button);
  32.  
  33.     // Create the notepad container
  34.     const notepad = document.createElement('div');
  35.     notepad.style.position = 'fixed';
  36.     notepad.style.bottom = '80px';
  37.     notepad.style.right = '20px';
  38.     notepad.style.width = '300px';
  39.     notepad.style.height = '300px';
  40.     notepad.style.border = '1px solid #000';
  41.     notepad.style.backgroundColor = '#fff';
  42.     notepad.style.padding = '10px';
  43.     notepad.style.zIndex = '1000';
  44.     notepad.style.display = 'none';
  45.     notepad.style.overflow = 'auto';
  46.     notepad.style.fontFamily = 'Arial';
  47.     notepad.style.fontSize = '12pt';
  48.     document.body.appendChild(notepad);
  49.  
  50.     // Create a textarea for the notes
  51.     const textarea = document.createElement('textarea');
  52.     textarea.style.width = '100%';
  53.     textarea.style.height = '90%';
  54.     notepad.appendChild(textarea);
  55.  
  56.     // Create settings button
  57.     const settingsButton = document.createElement('button');
  58.     settingsButton.textContent = '⚙️'; // Settings icon
  59.     settingsButton.style.position = 'absolute';
  60.     settingsButton.style.bottom = '10px';
  61.     settingsButton.style.right = '10px'; // Position it near the textarea
  62.     settingsButton.style.zIndex = '1001';
  63.     settingsButton.style.border = 'none';
  64.     settingsButton.style.backgroundColor = '#ccc';
  65.     settingsButton.style.cursor = 'pointer';
  66.     settingsButton.style.display = 'none'; // Initially hidden
  67.     notepad.appendChild(settingsButton);
  68.  
  69.     // Create settings GUI
  70.     const settingsMenu = document.createElement('div');
  71.     settingsMenu.style.display = 'none';
  72.     settingsMenu.style.border = '1px solid #ccc';
  73.     settingsMenu.style.backgroundColor = '#f9f9f9';
  74.     settingsMenu.style.padding = '10px';
  75.     settingsMenu.style.position = 'absolute';
  76.     settingsMenu.style.bottom = '60px'; // Position it above the button
  77.     settingsMenu.style.right = '5px';
  78.     notepad.appendChild(settingsMenu);
  79.  
  80.     const fontSizeInput = document.createElement('input');
  81.     fontSizeInput.type = 'number';
  82.     fontSizeInput.value = 12;
  83.     fontSizeInput.style.marginBottom = '10px';
  84.     fontSizeInput.placeholder = 'Font Size (pt)';
  85.     settingsMenu.appendChild(fontSizeInput);
  86.  
  87.     const applyButton = document.createElement('button');
  88.     applyButton.textContent = 'Apply';
  89.     settingsMenu.appendChild(applyButton);
  90.  
  91.     // Create save button
  92.     const saveButton = document.createElement('button');
  93.     saveButton.textContent = '💾'; // Save icon
  94.     saveButton.style.position = 'fixed';
  95.     saveButton.style.bottom = '75px'; // Position it under the notepad icon
  96.     saveButton.style.right = '20px'; // Align it with the notepad icon
  97.     saveButton.style.zIndex = '1001';
  98.     saveButton.style.border = 'none';
  99.     saveButton.style.backgroundColor = '#90EE90'; // Light green
  100.     saveButton.style.color = '#fff';
  101.     saveButton.style.borderRadius = '50%';
  102.     saveButton.style.width = '50px';
  103.     saveButton.style.height = '50px';
  104.     saveButton.style.cursor = 'pointer';
  105.     saveButton.style.transform = 'translateY(100%)'; // Start hidden with glide effect
  106.     saveButton.style.transition = 'transform 0.3s ease'; // Glide animation
  107.     saveButton.style.display = 'none'; // Initially hidden
  108.     document.body.appendChild(saveButton);
  109.  
  110.     // Load saved notes
  111.     const savedNotes = GM_getValue('globalNotepadNotes', '');
  112.     textarea.value = savedNotes;
  113.  
  114.     // Save notes on change
  115.     textarea.addEventListener('input', () => {
  116.         GM_setValue('globalNotepadNotes', textarea.value);
  117.     });
  118.  
  119.     // Toggle notepad visibility
  120.     button.addEventListener('click', () => {
  121.         notepad.style.display = notepad.style.display === 'none' ? 'block' : 'none';
  122.     });
  123.  
  124.     // Collapse notepad when clicking outside
  125.     document.addEventListener('click', (event) => {
  126.         if (notepad.style.display === 'block' && !notepad.contains(event.target) && event.target !== button && event.target !== settingsButton && event.target !== saveButton) {
  127.             notepad.style.display = 'none';
  128.         }
  129.     });
  130.  
  131.     // Show settings button on hover over notepad icon
  132.     button.addEventListener('mouseover', () => {
  133.         settingsButton.style.display = 'block';
  134.         saveButton.style.display = 'block'; // Show save button
  135.         saveButton.style.transform = 'translateY(0)'; // Glide into view
  136.     });
  137.  
  138.     // Track mouse movements to keep buttons visible
  139.     let mouseInSettingsArea = false;
  140.     settingsButton.addEventListener('mouseenter', () => {
  141.         mouseInSettingsArea = true;
  142.     });
  143.  
  144.     settingsButton.addEventListener('mouseleave', () => {
  145.         mouseInSettingsArea = false;
  146.         setTimeout(() => {
  147.             if (!mouseInSettingsArea) {
  148.                 settingsButton.style.display = 'none';
  149.             }
  150.         }, 300); // Delay before hiding
  151.     });
  152.  
  153.     button.addEventListener('mouseleave', () => {
  154.         setTimeout(() => {
  155.             if (!mouseInSettingsArea) {
  156.                 settingsButton.style.display = 'none';
  157.                 saveButton.style.transform = 'translateY(100%)'; // Glide out of view
  158.                 saveButton.style.display = 'none'; // Hide save button
  159.             }
  160.         }, 500); // Increased delay before hiding
  161.     });
  162.  
  163.     // Show settings menu on settings button click
  164.     settingsButton.addEventListener('click', (event) => {
  165.         event.stopPropagation(); // Prevent closing the notepad
  166.         settingsMenu.style.display = settingsMenu.style.display === 'none' ? 'block' : 'none';
  167.     });
  168.  
  169.     // Apply font size change
  170.     applyButton.addEventListener('click', () => {
  171.         const fontSize = fontSizeInput.value;
  172.         notepad.style.fontSize = fontSize + 'pt';
  173.         textarea.style.fontSize = fontSize + 'pt';
  174.         settingsMenu.style.display = 'none'; // Hide settings menu after applying
  175.     });
  176.  
  177.     // Save to hard drive function
  178.     saveButton.addEventListener('click', () => {
  179.         const blob = new Blob([textarea.value], { type: 'text/plain' });
  180.         const url = URL.createObjectURL(blob);
  181.         const a = document.createElement('a');
  182.         a.href = url;
  183.         a.download = 'notepad_notes.txt'; // Default file name
  184.         document.body.appendChild(a);
  185.         a.click();
  186.         document.body.removeChild(a);
  187.         URL.revokeObjectURL(url);
  188.  
  189.         // Animation effect
  190.         saveButton.style.transform = 'scale(1.1)';
  191.         setTimeout(() => {
  192.             saveButton.style.transform = 'scale(1)';
  193.         }, 200); // Reset scale after animation
  194.     });
  195.  
  196. })();