User:AlternateTorg/global.js

( => { 'use strict';  console.log('Personal Notes running!');  const URL_REGEXP = /^https:\/\/(? .+?)\.fandom\.com\/wiki\/(? .*)$/; const KEY = ( => { const match = location.href.match(URL_REGEXP)?.groups; return match && `${match.subdomain}|${match.path}`; });

if (!KEY) { return; }

const RIGHT_RAIL_SELECTOR = 'aside .right-rail-wrapper'; const NAMESPACE = '__com_walkertribe_rjw_fandom-personal-notes__'; const TEXTAREA_ID = `${NAMESPACE}textarea`; const MIN_TEXTAREA_HEIGHT = 100;

const load = => localStorage.getItem(KEY) ?? '';

const save = value => { if (value.length) { localStorage.setItem(KEY, value); } else { localStorage.removeItem(KEY); } };

const resizeEditor = => { const editor = document.getElementById(TEXTAREA_ID); editor.style.height = 'auto'; editor.style.height = Math.max(editor.scrollHeight, MIN_TEXTAREA_HEIGHT) + 'px'; };

const init = => { const el = document.querySelector(RIGHT_RAIL_SELECTOR);

if (!el) { return; }

const notesDiv = document.createElement('div'); notesDiv.style.marginTop = '24px'; notesDiv.style.borderBottom = '1px solid var(--theme-border-color)'; const h2 = document.createElement('h2'); h2.className = 'rail-module__header'; h2.textContent = 'Personal Notes'; notesDiv.appendChild(h2); const textarea = document.createElement('textarea'); textarea.id = TEXTAREA_ID; textarea.autocomplete = false; textarea.placeholder = 'Whatever you write here is visible only to you.'; textarea.style.display = 'block'; textarea.style.boxSizing = 'border-box'; textarea.style.width = '100%'; textarea.style.resize = 'none'; textarea.style.overflow = 'hidden'; textarea.style.fontFamily = 'inherit'; textarea.style.fontSize = '100%'; textarea.style.backgroundColor = 'transparent'; textarea.style.color = 'inherit'; textarea.style.borderColor = 'transparent'; textarea.style.marginBottom = '24px'; notesDiv.appendChild(textarea); el.insertBefore(notesDiv, el.firstChild); textarea.value = load; resizeEditor; textarea.addEventListener('input', resizeEditor); textarea.addEventListener('focus', => {      textarea.style.borderColor = 'unset';    }); textarea.addEventListener('blur', => {      textarea.style.borderColor = 'transparent';    }); };

setTimeout(init, 2000); // TODO Change this to wait for the right rail to appear });