☰

Sticky Note

sticky note to the browser for taking quick notes

  1. // ==UserScript==
  2. // @name Sticky Note
  3. // @namespace https://greasyfork.org/en/scripts/475201-sticky-note
  4. // @homepage https://github.com/Rainman69/Sticky-note-for-browser/
  5. // @version 1.8.1
  6. // @description sticky note to the browser for taking quick notes
  7. // @match https://*/*
  8. // @match http://*/*
  9. // @icon  data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAV1BMVEVBQUH/5AA7PEJ2bjj/6wD/6ACxoCq2pS40N0I+PkF5cDg9P0U4O0Xgyy42OUZNSz//8gDkzywwM0Ldxh69rCt2bz0kKkQvNEbn0irdyS8pMEdzbD58cjancakPAAABjklEQVR4nO3c207CQBiFUQSKDGcRtSrv/5wSxcih0CaSDPNnrWtC8qWz27vp9QAAAAAAAAAAAAAAAAAAAAD+o387uVOaLSeDW5ksc8c06U9Ww1tZTe7xKfYHw4dbGQ4U5qBQocL8FCpUmJ9ChQrzU6hQYX4KFSrMT6FChfkpVKgwP4UKFeancK/qYlVwYfU86mDzknLnNOhYOHodt1m/1duCn+HjuO2P0qwu+pS2FqZ+XZX8pmktTOmpKvpd2laYprvAyIW7De4CAxfuA+MWfm8wcuHPBgMX/h7RsIUHgTEL/45o0MKjwIiFh0c0ZOFJYLzC4yMasDBN58eB0QrT4uQJRitMi/o0MFbh2QajFZ5vMFhhWjQFBips2mCowsYNRips3mCgwgsbjFPY8KGPVXhxg1EKL28wSGGaXQsMUHhtgyEKr24wQuH1DQYoTIv3lsDCC9eXP/RBCj/aA++1sNOdCqvNvMPP7vNOhY73Ynxui70Xo+PdJqngu00AAAAAAAAAAAAAAAAAAACAYnwB4rYpAiTInEoAAAAASUVORK5CYII=
  10. // @grant GM_addStyle
  11. // @grant GM_setValue
  12. // @grant GM_getValue
  13. // @grant GM_deleteValue
  14. // @license      CC BY-NC-ND 4.0
  15. // @licenseURL   https://github.com/Rainman69/Sticky-note-for-browser/blob/main/LICENSE
  16. // ==/UserScript==
  17.  
  18. (function () {
  19.   'use strict';
  20.  
  21.   // Create the sticky note element
  22.   var note = document.createElement('div');
  23.   note.id = 'sticky-note';
  24.   note.contentEditable = true;
  25.   note.spellcheck = false;
  26.   note.style.display = 'none';
  27.   note.style.position = 'fixed';
  28.   note.style.top = '10px';
  29.   note.style.right = '10px';
  30.   note.style.width = '7em';
  31.   note.style.height = '8em';
  32.   note.style.padding = '10px';
  33.   note.style.backgroundColor = 'rgba(255, 215, 0, 0.9)'; // Set opacity to 90%
  34.   note.style.color = '#000000';
  35.   note.style.fontFamily = 'Arial, sans-serif';
  36.   note.style.fontSize = '14px';
  37.   note.style.zIndex = '9999';
  38.   note.style.borderRadius = '10px'; // Rounded corners
  39.   note.style.boxShadow =
  40.     '0px -3px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(255, 215, 0, 0.5)'; // Upper shadow and glow shadow
  41.   note.style.overflow = 'auto'; // Enable scrollbars when content exceeds the box height
  42.  
  43.   // Append the note to the document
  44.   document.body.appendChild(note);
  45.  
  46.   // Show or hide the note when Tab key is pressed
  47.   var isNoteVisible = false;
  48.  
  49.   document.addEventListener('keydown', function (event) {
  50.     if (event.key === 'Tab') {
  51.       isNoteVisible = !isNoteVisible;
  52.       note.style.display = isNoteVisible ? 'block' : 'none';
  53.       event.preventDefault(); // Prevents the default tab behavior
  54.     }
  55.   });
  56.  
  57.   // Save note content when it's changed
  58.   note.addEventListener('input', function () {
  59.     var content = note.innerText; // Use innerText to get plain text without HTML tags
  60.     GM_setValue('stickyNoteContent', content);
  61.     resizeNote();
  62.   });
  63.  
  64.   // Remove note when the page is unloaded
  65.   window.addEventListener('beforeunload', function () {
  66.     GM_deleteValue('stickyNoteContent'); // Delete the stored note content
  67.     document.body.removeChild(note);
  68.   });
  69.  
  70.   // Resize the note based on content length
  71.   function resizeNote() {
  72.     var content = note.innerText; // Use innerText to get plain text without HTML tags
  73.     note.style.height = ''; // Reset the height to recalculate the scrollable height
  74.  
  75.     // Determine text direction based on the note content
  76.     if (isRTLText(content)) {
  77.       note.style.direction = 'rtl';
  78.     } else {
  79.       note.style.direction = 'ltr';
  80.     }
  81.   }
  82.  
  83.   // Check if text contains right-to-left (RTL) characters
  84.   function isRTLText(text) {
  85.     var rtlRegex = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/;
  86.     return rtlRegex.test(text);
  87.   }
  88.  
  89.   // Retrieve note content if available
  90.   var storedContent = GM_getValue('stickyNoteContent');
  91.   if (storedContent) {
  92.     note.innerText = storedContent;
  93.   }
  94.  
  95.   // Resize the note when it becomes visible
  96.   note.addEventListener('transitionend', function () {
  97.     if (isNoteVisible) {
  98.       resizeNote();
  99.     }
  100.   });
  101. })();