☰

BlogsMarks - Inputs Plus - Multiline and increase maxlength

When adding a new Marks, for all inputs, it make them Multiline and increase maxlength

  1. // ==UserScript==
  2. // @name         BlogsMarks - Inputs Plus - Multiline and increase maxlength
  3. // @namespace    https://blogmarks.net
  4. // @version      0.2
  5. // @description  When adding a new Marks, for all inputs, it make them Multiline and increase maxlength
  6. // @author       Decembre
  7. // @icon         https://icons.iconarchive.com/icons/sicons/basic-round-social/48/blogmarks-icon.png
  8. // @match        https://blogmarks.net/*
  9. // @grant        GM_addStyle
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     console.log("Userscript is running...");
  16.  
  17.     // Function to replace the input field with a textarea
  18.     function replaceInputWithTextarea(inputId, rows, cols, maxLength) {
  19.         const inputField = document.getElementById(inputId);
  20.  
  21.         // Check if the input field exists and if the textarea does not already exist
  22.         if (inputField && !document.getElementById(`${inputId}-textarea`)) {
  23.             console.log(`Input field ${inputId} found, replacing with textarea...`);
  24.  
  25.             // Create a new textarea element
  26.             const textArea = document.createElement('textarea');
  27.             textArea.id = `${inputId}-textarea`; // Set a new ID for the textarea
  28.             textArea.name = inputField.name; // Set the name attribute
  29.             textArea.rows = rows; // Set the number of visible rows
  30.             textArea.cols = cols; // Set the number of visible columns (same as size)
  31.             textArea.maxLength = maxLength; // Set the maxlength
  32.             textArea.value = inputField.value; // Copy the current value
  33.  
  34.             // Replace the input field with the textarea
  35.             inputField.parentNode.replaceChild(textArea, inputField);
  36.             console.log(`Textarea replaced successfully for ${inputId}.`);
  37.         } else if (!inputField) {
  38.             console.log(`Input field ${inputId} not found.`);
  39.         }
  40.     }
  41.  
  42.     // Create a MutationObserver to watch for changes in the DOM
  43.     const observer = new MutationObserver((mutations) => {
  44.         mutations.forEach((mutation) => {
  45.             if (mutation.type === 'childList') {
  46.                 replaceInputWithTextarea('new-url', 2, 52, 500);
  47.                 replaceInputWithTextarea('new-title', 2, 52, 500);
  48.                 replaceInputWithTextarea('new-publictags', 4, 52, 500);
  49.                 replaceInputWithTextarea('new-privatetags', 4, 52, 500);
  50.                 replaceInputWithTextarea('new-via', 1, 52, 200);
  51.             }
  52.         });
  53.     });
  54.  
  55.     // Start observing the body for changes
  56.     observer.observe(document.body, { childList: true, subtree: true });
  57.  
  58.     // Initial check in case the input fields are already present
  59.     replaceInputWithTextarea('new-url', 2, 52, 500);
  60.     replaceInputWithTextarea('new-title', 2, 52, 500);
  61.     replaceInputWithTextarea('new-publictags', 4, 52, 500);
  62.     replaceInputWithTextarea('new-privatetags', 4, 52, 500);
  63.     replaceInputWithTextarea('new-via', 1, 52, 200);
  64.  
  65.     // Add custom styles
  66.     GM_addStyle(`
  67.         html:has(.my.bm-frame) body.my.bm-frame #container #content-wrapper #content .b form#mark-form textarea {
  68.             width: 100% !important;
  69.             width: auto;
  70.             min-width: 100% !important;
  71.             max-width: 100% !important;
  72.             border: 1px solid red !important;
  73.         }
  74.     `);
  75. })();