[JS] OMR Enhancement Suite.js

// ==UserScript==
// @name         Ryan's BIDMC OMR fix
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  CSS changes to make the page look nicer, add functionality
// @author       Ryan Neff, MS4. raneff@gmail.com
// @match        https://holmes.caregroup.org/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=caregroup.org
// @grant        MIT license
// ==/UserScript==
(function() {

    function prevent_closure(){
        //stop the browser window from closing without a warning
        //give user the option to cancel it (e.g. if they are in the middle of writing a note)
        window.addEventListener('beforeunload', function (e) {
            if(document.form.subm.value!="OK"){ //if they weren't submitting the note
                e.preventDefault();
                e.returnValue = '';
            }
        });
    };

    //add custom CSS files to the page
    function addCss(fileName) {

        var head = document.head;
        var link = document.createElement("link");

        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = fileName;

        head.appendChild(link);
    };

    //add markdown editor to note inputs
    addCss('https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css');

    //function to add custom JS scripts to page
    function addScript(src, fn_callback) {
        const s = document.createElement('script');

        s.setAttribute('src', src);
        s.onload = fn_callback;
        document.body.appendChild(s);
    };

    //once the markdown editor is loaded, attach it to note inputs

    callback_markdown = function(){
        if(document.getElementsByName("Text").length != 0){
            //global CSS styles
            addCss('https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css');
            prevent_closure();

            //init markdown editor
            var oldelem = document.getElementsByName("Text")[0];
            var simplemde = new SimpleMDE({ element: oldelem,
                                          spellChecker: false
                                          });
        }
       };

    //once the markdown viewer is loaded, attach it to note displays
    callback_notes = function(){
        if(document.getElementsByTagName("pre").length != 0){
            //init markdown viewer
            marked.setOptions({
                breaks: true
            });
            //swap the old <pre> tag with a new div for viewing styled notes
            var oldelem = document.getElementsByTagName("pre")[0];
            oldelem.setAttribute('style','width:70ch; background-color:#eee; padding:5px 15px;');
            var newelem = document.createElement("div");
            newelem.setAttribute('style','width:70ch; background-color:#eee; padding:5px 15px');
            newelem.innerHTML = marked.parse(oldelem.textContent);
            oldelem.insertAdjacentElement('beforebegin',newelem);
            oldelem.style.display = 'none';
            oldelem.id = 'oldelem';
            newelem.id = 'newelem';
            newelem.insertAdjacentHTML('beforebegin', '<button id="oldshowbtn" class="button" type="button" \
                                       onclick="document.getElementById(\'oldelem\').style.display=\'block\';\
document.getElementById(\'newelem\').style.display=\'none\'; document.getElementById(\'oldshowbtn\').style.display=\'none\';\
document.getElementById(\'newshowbtn\').style.display=\'block\';">Show plaintext</button>');
            newelem.insertAdjacentHTML('beforebegin', '<button id="newshowbtn" style="display:none" class="button" type="button" \
                                       onclick="document.getElementById(\'newelem\').style.display=\'block\';\
document.getElementById(\'oldelem\').style.display=\'none\'; document.getElementById(\'newshowbtn\').style.display=\'none\';\
document.getElementById(\'oldshowbtn\').style.display=\'block\';">Show formatted note</button>');
        } else {
            //global CSS styles (interferes with note viewing)
            addCss('https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css');
        }
    };

    //add script for markdown editor
    addScript("https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js", callback_markdown);

    //add script for markdown viewer
    addScript("https://cdn.jsdelivr.net/npm/marked/marked.min.js", callback_notes);


    // function to add global CSS style rules (one liner add)
    function addGlobalStyle(css) {
        var head, style;
        head = document.getElementsByTagName('head')[0];
        if (!head) { return; }
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    };
    //addGlobalStyle("table td, table th { vertical-align: middle; }");
    addGlobalStyle('body { font: 16px Arial, sans-serif !important}');
    addGlobalStyle('td { padding-top: 3px !important; padding-left: 3px !important }');
    addGlobalStyle('td[nowrap] { padding-bottom: 15px !important; padding-right: 3px !important; vertical-align:bottom !important }');
    addGlobalStyle('td > img[src="/images/lan/dot.gif"] { height:1px }');
    addGlobalStyle('td[align="center"] > img[src="/images/lan/dot.gif"] { height:20px }');
    addGlobalStyle('#ords { width:100% !important; height:90% !important}');
    addGlobalStyle('#hdr { width:100% !important; height:90% !important}');
    addGlobalStyle('frame { padding-left:25px !important; padding-right:25px !important}');
    addGlobalStyle('frame[name="header"] { padding-top: 0px !important}');
    addGlobalStyle('html { background-color:#ffffe6 !important}');
    addGlobalStyle('body { margin:0 auto !important}');
    addGlobalStyle('body > form > p ~ table { margin:0 auto !important}');
    addGlobalStyle('#cnont { font: 16px Arial; font-family: sans-serif !important}');
    addGlobalStyle('textarea { font: 16px Arial, sans-serif !important; width:860px !important; height:720px !important}');
    addGlobalStyle('table { font: 16px Arial, sans-serif !important}');
    addGlobalStyle('font { font: 16px Arial, sans-serif !important}');
    addGlobalStyle('font { font: 16px Arial, sans-serif !important}');
    addGlobalStyle('.CodeMirror {height:720px !important; width: 960px !important}');

    //log to console once loaded
    console.log("BIDMC custom OMR scripts loaded. Written by Ryan Neff, MS4.");
})();