☰

Codeforces User Notes

Adds a notes section to Codeforces user profiles for adding custom notes.

// ==UserScript==
// @name         Codeforces User Notes
// @namespace    https://therehello.top
// @author       therehello
// @version      1.0
// @license MIT
// @description  Adds a notes section to Codeforces user profiles for adding custom notes.
// @match        *://codeforces.com/profile/*
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function () {
    "use strict";

    var addNotesSection = function () {
        var ok = false;
        var handle = window.location.pathname.split("/")[2];
        var notes = GM_getValue(handle, "");

        var notesContainer = document.createElement("li");
        notesContainer.classList.add("notes-container");


        var notesIcon = document.createElement("img");
        notesIcon.id = "notes-icon";
        notesIcon.src = "data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAbwAAAG8B8aLcQwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFSSURBVDiNjdMxaxVBFAXg7/pexEJNUCtbg2JhMJAqRbCLna2VFiLYWlikMY2NhaB/ISkskyqky0sjNglRJBAEEWwEFWIhQYncFDsbNut7rAeG3Zl75u45O2fgKX5gf8T4jW1MZab2UDaPDysWwkss4wtm2vU+epn5MyImcdZJ7JbnR7zFSkRcycw/NaEPEdHHc1xsNVjABh6X+Tlcx7smaX+U/CF2BrjZtqCouI0Jw3GI1QZ3DPN407Rwq6PBoLyfwSYOsBjFwqiNJxARA9WPvorXmK4V9PCkQ8ELjOE7HhVFc33IzL8R8bmjwR2M4y7WcC8zt/mPU8AsvmIS61ioa6GK6yUs4ULry4vYwp4q0gf4kJn3a0Jt4TAinuF8q8EOZvBLlcSHeNAkHOcgM3cNQUTcwGV8U12qf9B1mU7hNHp4j2vtJL7Cp3KUXVjPzL3mwhFolunxT0yfJgAAAABJRU5ErkJggg==";
        notesIcon.style.display = "inline-block";
        notesIcon.style.width = "22px";
        notesIcon.style.height = "22px";
        notesIcon.style.marginRight = "0.5em";
        notesIcon.style.marginLeft = "2px";
        notesIcon.onclick = function toggleTextBox() {
            if (ok == true) {
                ok = false;
                return;
            }
            var textBox = document.getElementById("notes-box");
            if (textBox.style.display === "none") {
                var displayText = document.getElementById("notes-text");
                notesIcon.style.opacity = '0.5';
                textBox.style.display = "inline-block";
                textBox.value = displayText.innerHTML.trim();
                displayText.style.display = "none";
                textBox.focus();
            }
        };

        var blank = document.createElement("div");
        blank.style.display = "inline-block";
        blank.innerHTML = " ";
        var notesText = document.createElement("div");
        notesText.style.display = "inline-block";
        notesText.id = "notes-text";
        notesText.innerHTML = notes;
        var notesBox = document.createElement("textarea");
        notesBox.id = "notes-box";
        notesBox.rows = "1";
        notesBox.style.display = "inline-block";
        notesBox.style.width = "100px";
        notesBox.style.resize = "none";
        notesBox.style.display = "none";
        notesBox.addEventListener("blur", function () {
            ok = true;
            var textBox = document.getElementById("notes-box");
            var displayText = document.getElementById("notes-text");
            var text = textBox.value;
            GM_setValue(handle, text);
            notesIcon.style.opacity = '1';
            textBox.style.display = "none";
            displayText.innerHTML = text;
            displayText.style.display = "inline-block";
        });

        notesContainer.appendChild(notesIcon);
        notesContainer.appendChild(blank);
        notesContainer.appendChild(notesText);
        notesContainer.appendChild(notesBox);

        var infoUlElement = document.querySelector(".info").querySelector("ul");
        infoUlElement.insertBefore(notesContainer, infoUlElement.childNodes[0]);

    };

    var fontAwesomeStyle = document.createElement("link");
    fontAwesomeStyle.rel = "stylesheet";
    fontAwesomeStyle.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
    document.head.appendChild(fontAwesomeStyle);

    var customStyle = document.createElement("style");
    customStyle.innerHTML = `
        .notes-container {
            display: flex;
            align-items: center;
        }
    `;
    document.head.appendChild(customStyle);

    addNotesSection();
})();