popup unedited posts (loyce backup)

// ==UserScript==
// @name         popup unedited posts (loyce backup)
// @namespace    https://bitcointalk.org/
// @version      0.1
// @description  popup unedited loyce (original posts) when click on date
// @author       0x256
// @include      https://bitcointalk.org/index.php?topic=*
// @grant        GM_addStyle

// ==/UserScript==

(function() {
    'use strict';
    /* edit_history_min style (css) */
    GM_addStyle(".modal{background-color:#fff;z-index:5;position:fixed;top:8%;width:70vw;border-radius:5px;margin-left: -4.5%;}.modal-header{position:relative}.modal-header,.modal-body{padding:10px}.modal-header > h3{margin:0}.modal-close{cursor:pointer;padding:10px 20px;display:inline-block;position:absolute;top:0;right:0;opacity:0.6}.modal-close:hover{opacity:1}.modal-body{background:#ECEDF3;overflow-y: auto;max-height: 500px;}.modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;opacity:.3;z-index:4}.modal-body:lang(ar)>.post{direction: rtl}.modal-body>.post>img.icon{float:left;margin-right:8px}");


// Get the button that opens the modal
let myBtn = document.querySelectorAll(".edited");

Array.from(myBtn).forEach((element) => {
    element.addEventListener('click', creatModal );
});

/** open the modal */
// When the user clicks the date, create and open the modal
function creatModal() {

    var msgID = (this.parentElement.parentElement.parentElement.querySelector('td+td>div.subject').id).match(/\d+/)[0],
        directoryName = msgID.slice(0, -4),
        loyceURL = 'https://loyce.club/archive/posts/'+ directoryName +'/'+ msgID +'.html';

    document.body.style.overflow = "hidden";

    /* create modal after myBtn */
    this.insertAdjacentHTML('afterend', `<div class="modal"><div class="modal-header"><h3>The Original Post <a target="_blank" href="`+loyceURL+`">(unedited loyce backup)</a></h3><span class="modal-close">✖</span></div><div class="modal-body"></div></div><div class="modal-backdrop show"></div>`);

    // Get the modal
    let modal = document.getElementsByClassName("modal")[0];

    // Get the <span> element that closes the modal
    let modalClose = document.getElementsByClassName("modal-close")[0];

    // Get the modal-body element
    let modalBody = document.getElementsByClassName("modal-body")[0];

    // Get the modal-backdrop
    let modalBackdrop = document.getElementsByClassName("modal-backdrop")[0];

    /*------------------------------------
      load loyce unedited backup post
    ------------------------------------*/
    function load_unedited_post() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {

            if (this.readyState < 4 ) {
                modalBody.innerHTML = '<div class="post"><img class="loadin icon" src="https://i.ibb.co/5j979m2/loading.gif" alt="loading icon" /> loading please wait ...</div>';
            }

            if (this.readyState == 4 && this.status == 404) {
                modalBody.innerHTML = '<div class="post"><img class="warning icon" src="https://i.ibb.co/HVY6PmJ/warning-icon.png" alt="warning icon" /> Sorry, there no unedited backup for this post.</div>';
            }

            if (this.readyState == 4 && this.status == 200) {
                //modalBody.innerHTML = this.responseText;

                /*from stackoverflow for test*/
                var doc = new DOMParser().parseFromString(this.responseText, 'text/html');
                var post = doc.querySelector('.post').innerHTML;

                modalBody.innerHTML = '<div class="post">'+post+'</div>';
            }
        };

        xhttp.open("GET", loyceURL, true);
        xhttp.send();

    }

    load_unedited_post();

    /** close the modal */
    // When the user clicks on <span> (x), close the modal
    modalClose.onclick = function() {
        modal.remove();
        modalBackdrop.remove();
        document.body.style.overflow = "auto";
    }

    // When the user clicks anywhere outside of the modal, close it
    modalBackdrop.onclick = function(event) {
        if (event.target == modalBackdrop) {
            modal.remove();
            modalBackdrop.remove();
            document.body.style.overflow = "auto";
        }
    }
}

})();