☰

Mastodon Notes

Adds 'notes' buttons to profile links to configured Mastodon sites, which can be used to add your own notes (to be displayed as 'title' attributes) to users' profile links.

  1. // ==UserScript==
  2. // @name         Mastodon Notes
  3. // @namespace    FiXato's Mastodon Notes Extension
  4. // @version      0.5.1
  5. // @description  Adds 'notes' buttons to profile links to configured Mastodon sites, which can be used to add your own notes (to be displayed as 'title' attributes) to users' profile links.
  6. // @author       FiXato
  7. // @match        https://hackers.town/*
  8. // @match        https://mastodon.social/*
  9. // @match        https://octodon.social/*
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.     console.log('Mastodon Notes loaded');
  16.  
  17.     var users = {};
  18.     var first_call;
  19.     const max_time_between_calls = (1000 * 3); // 3 seconds delay to reduce lag from the function being called too often while new content loads.
  20.     var restore_users_note_timer;
  21.     var running = false;
  22.  
  23. try {
  24.  
  25.     if (typeof(Storage) === "undefined") {
  26.         console.error("Local Storage not supported");
  27.         return;
  28.     }
  29.  
  30.     if (get_notes_auto_status()) {
  31.         restore_users_notes();
  32.     }
  33.  
  34.     // Options for the observer (which mutations to observe)
  35.     const config = { attributes: false, childList: true, subtree: true };
  36.  
  37.     // Callback function to execute when mutations are observed
  38.     const callback = function(mutationsList, observer) {
  39.         // Use traditional 'for loops' for IE 11
  40.         for(let mutation of mutationsList) {
  41.             if (mutation.type === 'childList' && mutation.addedNodes && mutation.addedNodes.length > 0) {
  42.                 //console.log("Mastodon Notes:", mutation);
  43.                 if (get_notes_auto_status()) {
  44.                     if (mutation.target && mutation.target.getAttribute('role') == 'feed' && mutation.target.classList.contains('item-list')) {
  45.                         //FIXME: This should be called on only a subset of items, so it doesn't get repeatedly called on object that are already processed.
  46.                         restore_users_notes();
  47.                     }
  48.                     if (mutation.target && mutation.target.classList.contains('activity-stream')) {
  49.                         restore_users_notes();
  50.                     }
  51.                 }
  52.             }
  53.         }
  54.     };
  55.  
  56.     const targetNode = document.querySelector('body');
  57.  
  58.     // Create an observer instance linked to the callback function
  59.     const observer = new MutationObserver(callback);
  60.  
  61.     // Start observing the target node for configured mutations
  62.     observer.observe(targetNode, config);
  63. }
  64. catch(err) { console.error('Mastodon Notes: error', err); }
  65.  
  66.     // Function by Mark Amery from https://stackoverflow.com/a/35385518
  67.     function htmlToElement(html) {
  68.         let template = document.createElement('template');
  69.         html = html.trim(); // Never return a text node of whitespace as the result
  70.         template.innerHTML = html;
  71.         return template.content.firstChild;
  72.     }
  73.  
  74.     const notes_control_panel = htmlToElement(`
  75.       <div id="notes_control_panel">
  76.         <h1>Mastodon Notes:</h1><br/>
  77.         <div>
  78.           <label>Status:</label>
  79.           <label class="switch" for="notes_status_toggle">
  80.             <input type="checkbox" id="notes_status_toggle" value="Toggle" checked>
  81.             <span class="slider round"></span>
  82.           </label>
  83.         </div>
  84.         <div>
  85.           <label>Auto-Apply:</label>
  86.           <label class="switch" for="notes_auto_toggle">
  87.             <input type="checkbox" id="notes_auto_toggle" value="Toggle" checked>
  88.             <span class="slider round"></span>
  89.           </label>
  90.         </div>
  91.         <div><button id="reapply_notes">Reapply</button></div>
  92.       </div>
  93.     `);
  94.  
  95.     const head=document.querySelector('head');
  96.     var styles = `<style>button.notes { opacity: 0; visibility: hidden; transition: visibility 1s, opacity 1s linear; position: absolute; margin-top: -1em; margin-left: -2em;}
  97.     a:hover + button.notes, button.notes:hover { visibility: visible; opacity: 1; z-index: 998}
  98.     #notes_template {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; background: rgba(30,30,30, 0.8); color: #fff; }
  99.     .notes_panel {display: flex; align-items: center; justify-content: center; }
  100.     #notes_content {margin: auto 0; position: relative; background: rgb(30,30,30); border: 1px solid rgb(200,200,200); padding: 2em; margin: 2em;}
  101.     #notes_content form textarea, #notes_content form input {width: 100%;}
  102.     #notes_content form label, #notes_content form input {margin: 0.5em;}
  103.     #notes_control_panel { background-color: #282c37; color: #9baec8; margin-bottom: 10px; padding: 15px 30px 15px 15px; }
  104.     #notes_control_panel h1 { font-size: 1.2em; }
  105. #notes_control_panel > div { display: inline-block; margin-right: 0.5em; margin-bottom: 0.5em;}
  106.     /* The switch - the box around the slider */
  107.     .switch {
  108.         position: relative;
  109.         display: inline-block;
  110.         width: 3em;
  111.         height: 1.5em;
  112.     }
  113.  
  114.     /* Hide default HTML checkbox */
  115.     .switch input {
  116.         opacity: 0;
  117.         width: 0;
  118.         height: 0;
  119.     }
  120.  
  121.     /* The slider */
  122.     .slider {
  123.         position: absolute;
  124.         cursor: pointer;
  125.         top: 0;
  126.         left: 0;
  127.         right: 0;
  128.         bottom: 0;
  129.         background-color: #ccc;
  130.             -webkit-transition: .4s;
  131.         transition: .4s;
  132.     }
  133.  
  134.     .slider:before {
  135.         position: absolute;
  136.         content: "";
  137.         height: 1em;
  138.         width: 1em;
  139.         left: 0.25em;
  140.         bottom: 0.25em;
  141.         background-color: white;
  142.         -webkit-transition: .4s;
  143.         transition: .4s;
  144.     }
  145.  
  146.     input:checked + .slider {
  147.         background-color: #2196F3;
  148.     }
  149.  
  150.     input:focus + .slider {
  151.         box-shadow: 0 0 1px #2196F3;
  152.     }
  153.  
  154.     input:checked + .slider:before {
  155.         -webkit-transform: translateX(1.5em);
  156.         -ms-transform: translateX(1.5em);
  157.         transform: translateX(1.5em);
  158.     }
  159.  
  160.     /* Rounded sliders */
  161.     .slider.round {
  162.         border-radius: 1em;
  163.     }
  164.  
  165.     .slider.round:before {
  166.         border-radius: 50%;
  167.     }
  168. </style>`
  169.     head.appendChild(htmlToElement(styles));
  170.     add_control_panel();
  171.  
  172.     function get_notes_status() {
  173.         let notes_status = localStorage.getItem('notes_enabled');
  174.         if (notes_status === null) {notes_status = "true";}
  175.         // work around string type of localStorage.
  176.         notes_status = (notes_status == "true" ? true : false);
  177.         return notes_status;
  178.     }
  179.  
  180.     function get_notes_auto_status() {
  181.         let notes_auto_status = localStorage.getItem('notes_auto_apply');
  182.         if (notes_auto_status === null) {notes_auto_status = "true";}
  183.         // work around string type of localStorage.
  184.         notes_auto_status = (notes_auto_status == "true" ? true : false);
  185.         return notes_auto_status;
  186.     }
  187.  
  188.     function toggle_notes() {
  189.         let notes_status = !get_notes_status();
  190.         localStorage.setItem('notes_enabled', notes_status);
  191.  
  192.         let notes_status_toggle = document.querySelector('#notes_status_toggle');
  193.         if (notes_status_toggle === null) {
  194.             console.error('Mastodon Notes: could not find notes status toggle');
  195.             return false;
  196.         }
  197.         notes_status_toggle.checked = notes_status;
  198.         if (notes_status) {restore_users_notes();}
  199.     }
  200.  
  201.     function toggle_auto_apply() {
  202.         let notes_auto_status = !get_notes_auto_status();
  203.         localStorage.setItem('notes_auto_apply', notes_auto_status);
  204.  
  205.         let notes_status_toggle = document.querySelector('#notes_auto_toggle');
  206.         if (notes_status_toggle === null) {
  207.             console.error('Mastodon Notes: could not find notes auto-apply status toggle');
  208.             return false;
  209.         }
  210.         notes_status_toggle.checked = notes_auto_status;
  211.         if (notes_auto_status) {restore_users_notes();}
  212.     }
  213.  
  214.     function add_control_panel() {
  215.       let beforeElement = document.querySelector('.drawer .search, .column-1 .public-account-bio');
  216.       if (beforeElement === null) {
  217.           console.log('Mastodon Notes: Drawer with search not yet present. Will retry');
  218.           setTimeout(() => { add_control_panel(); }, 500);
  219.           return false;
  220.       }
  221.       let notes_control_panel_el = document.querySelector('body #notes_control_panel');
  222.       if(notes_control_panel_el === null) {
  223.           console.log('Mastodon Notes: Adding control panel');
  224.           beforeElement.parentElement.insertBefore(notes_control_panel, beforeElement);
  225.           let notes_status = get_notes_status();
  226.           let notes_status_toggle = document.querySelector('#notes_status_toggle');
  227.           if (notes_status_toggle !== null) {
  228.               notes_status_toggle.checked = notes_status;
  229.               notes_status_toggle.addEventListener('click', toggle_notes);
  230.           }
  231.  
  232.           let notes_auto_status = get_notes_auto_status();
  233.           let notes_auto_toggle = document.querySelector('#notes_auto_toggle');
  234.           if (notes_auto_toggle !== null) {
  235.               notes_auto_toggle.checked = notes_auto_status;
  236.               notes_auto_toggle.addEventListener('click', toggle_auto_apply);
  237.           }
  238.           let reapply_button = document.querySelector('#reapply_notes');
  239.           if (reapply_button !== null) { reapply_button.addEventListener('click', restore_users_notes); }
  240.       }
  241.     }
  242.  
  243.     function open_notes(event) {
  244.         console.log('opening notes interface');
  245.         let notes_template = '<div id="notes_template" class="notes_panel"><div id="notes_content"><form><label for="notes_profile_url">Notes for:</label><input type="text" id="notes_profile_url" /><br /><label for="notes"><textarea id="notes" cols="70" rows="15"></textarea></label><input id="save_notes" type="submit" value="Save!"><input id="close_notes" type="reset" value="Reset & Close"></form></div></div>'
  246.         let profile_url = this.dataset.profileUrl;
  247.         let new_element = htmlToElement(notes_template);
  248.         let body = document.querySelector('body');
  249.         body.insertBefore(new_element, body.firstElementChild);
  250.         document.querySelector('#notes_profile_url').value = profile_url;
  251.         document.querySelector('textarea#notes').value = users[profile_url];
  252.         document.querySelector('#notes_template form').addEventListener('submit', save_notes);
  253.         document.querySelector('#notes_template form #save_notes').addEventListener('click', save_notes);
  254.         document.querySelector('#notes_template form #close_notes').addEventListener('click', close_notes);
  255.     }
  256.     function close_notes(event) {
  257.         console.log('closing notes');
  258.         document.querySelector('#notes_template').remove();
  259.         set_open_notes_event_handlers();
  260.     }
  261.     function save_notes(event) {
  262.         event.preventDefault();
  263.         let profile_url = document.querySelector('#notes_profile_url').value;
  264.         let notes = document.querySelector('#notes').value;
  265.         console.log('saving notes for ' + profile_url);
  266.         if (store_user_notes(profile_url, notes) == true) {
  267.             close_notes()
  268.             restore_users_notes();
  269.         }
  270.     }
  271.  
  272.     function store_user_notes(profile_url, notes) {
  273.         users[profile_url] = notes;
  274.         localStorage.setItem('notes_for_' + profile_url, notes);
  275.         return true;
  276.     }
  277.  
  278.     // not sure why I have to call this multiple times, but otherwise I seem to lose the handler after editing the first note.
  279.     function set_open_notes_event_handlers() {
  280.         let note_buttons = document.querySelectorAll('button.notes');
  281.         note_buttons.forEach((element) => {
  282.             element.addEventListener('click', open_notes);
  283.         });
  284.  
  285.     }
  286.  
  287.     function append_notes_to_title(profile_url, element) {
  288.         if (users[profile_url] !== null) {
  289.             if (element.title !== undefined && element.dataset.originalTitle === undefined) {
  290.                 element.setAttribute('data-original-title', element.title);
  291.             }
  292.             element.title = (element.dataset.originalTitle + (element.dataset.originalTitle && element.dataset.originalTitle.length > 0 ? "\n" : "") + "Notes: " + users[profile_url]);
  293.         }
  294.     }
  295.     function add_buttons_to_link_elements(profile_link_elements) {
  296.         //let idx = 1;
  297.         for(let element of profile_link_elements) {
  298.             //console.log('Mastodon Notes: element[' + idx + '/' + profile_link_elements.length + ']:', element);
  299.             //idx += 1;
  300.             let profile_url = element.href;
  301.             // Don't add notes buttons again if it is already present.
  302.             if (!element.nextElementSibling || !element.nextElementSibling.classList.contains('notes')) {
  303.                 let new_element = htmlToElement('<button class="notes" data-profile-url="' + profile_url + '">Notes</button>');
  304.                 if (!element.nextElementSibling) {
  305.                     element.parentNode.appendChild(new_element);
  306.                 } else {
  307.                     element.parentNode.insertBefore(new_element, element.nextElementSibling);
  308.                 }
  309.             }
  310.             let notes = localStorage.getItem('notes_for_' + profile_url);
  311.             if (notes !== "undefined") {
  312.                 users[profile_url] = notes;
  313.                 try {
  314.                     append_notes_to_title(profile_url, element);
  315.                 }
  316.                 catch(err) {
  317.                     console.error('Mastodon Notes: error', err);
  318.                 }
  319.             }
  320.         }
  321.     }
  322.  
  323.     function restore_users_notes() {
  324.         if (!get_notes_status()) {
  325.             console.warn('Mastodon Notes: Cannot restore users notes as Mastodon Notes is currently disabled. Please toggle it on first.');
  326.             return false;
  327.         }
  328.         if (running) { return false; }
  329.         if (first_call === undefined) { first_call = Date.now();}
  330.         let delta_first_call = (Date.now() - first_call);
  331.  
  332.         if (restore_users_note_timer !== undefined) { clearTimeout(restore_users_note_timer); }
  333.  
  334.         if (delta_first_call < max_time_between_calls) {
  335.             let time_remaining = (max_time_between_calls - delta_first_call);
  336.             //console.log('Mastodon Notes: restore_users_notes() delayed for ' + time_remaining + 'ms');
  337.  
  338.             restore_users_note_timer = setTimeout(() => { restore_users_notes(); }, time_remaining);
  339.             return false;
  340.         } else {
  341.             first_call = Date.now();
  342.             restore_users_note_timer = undefined;
  343.         }
  344.         console.log("Mastodon Notes: restoring users' notes");
  345.         running = true;
  346.         let profile_link_elements = document.querySelectorAll('a.mention[href], a.status__display-name[href], a.avatar[href], a.detailed-status__display-name[href]');
  347.         add_buttons_to_link_elements(profile_link_elements);
  348.  
  349.         set_open_notes_event_handlers();
  350.         running = false;
  351.     }
  352.  
  353. })();