Texthooker Enhanced (for Clipboard Inserter)

<html>

<head>
    <meta charset="utf-8">
    <title>Texthooker Enhanced</title>
<!--
/////////////////////////////////////////////////////////////////////
/////////// Texthooker Enhanced for Clipboard Inserter //////////////
/////////////////////////////////////////////////////////////////////

Original script was from: https://pastebin.com/raw/HxjV6YrB, which was from the guide: https://pastebin.com/gNJfqpmN

Non-default Clipboard Inserter settings are required:
- element name: pre
- container selector: #textlines

Use it as is, modify it for your use case or delete it.

License: WTFPL

/////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////
-->
    <style type="text/css">
        body {
            background-color: #202020;
            color: #BCBCBC;
            font-size: 1.2em;
            font-weight: 400;
            line-height: 150%;
            margin-top: 5%;
            margin-left: 15%;
            margin-right: 15%;
            /*margin-left: 640px;
            margin-right: 8%;
            margin-bottom: 15%;*/
            margin-bottom: 500px;
            font-family: "IPAGothic", "Sazanami Gothic", "Kochi Gothic", "VL Gothic", "Ume Gothic", "Pro W3", "Hiragino Kaku Gothic Pro", "Osaka Mono", "Osaka", "MS Gothic", "Meiryo", "M+ 1m";
        }

        /* Main text style is here */
        pre {
            /*font-family: "IPAGothic", "Sazanami Gothic", "Kochi Gothic", "VL Gothic", "Ume Gothic", "Pro W3", "Hiragino Kaku Gothic Pro", "Osaka Mono", "Osaka", "MS Gothic", "Meiryo", "M+ 1m";*/
            font-family: "Segoe UI";
            white-space: pre-wrap;
            padding-bottom: 6px;
        }

        .buttoncontainer {
            position: fixed;
            top: 3px;
            right: 5px;
            display: inline-block;
            font-size: 1.4em;
            font-family: "VL Gothic";
            user-select: none;
        }

        .buttoncontainer>div:not(#counter):hover {
            filter: brightness(130%);
        }

        #textlines>pre {
            /*white-space: pre;*/
            border-bottom: #444444 solid 1px;
        }

        #counter {
            background-color: rgba(25, 25, 25, 0.5);
            color: #9d9d9d;
            font-size: 13px;
            line-height: 100%;
            float: left;
            padding-left: 8px;
            padding-right: 8px;
            padding-top: 5px;
            padding-bottom: 6px;
        }

        #clear_button {
            background-color: rgba(25, 25, 25, 0.5);
            color: #9d9d9d;
            font-size: 12px;
            line-height: 100%;
            float: left;
            margin-right: 8px;
            padding-left: 8px;
            padding-right: 8px;
            padding-top: 5px;
            padding-bottom: 7px;
            cursor: pointer;
            cursor: hand;
        }

        #remove_button {
            background-color: rgba(25, 25, 25, 0.5);
            color: #9d9d9d;
            font-size: 24px;
            line-height: 100%;
            float: right;
            margin-right: 10px;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
            cursor: pointer;
            cursor: hand;
        }

        #go_to_last_button {
            position: relative;
            bottom: -20px;
            width: 50px;
            cursor: pointer;
            user-select: none;
            font-size: 50px;
            filter: opacity(20%);
        }

        #go_to_last_button:hover {
            filter: opacity(40%);
        }

        #go_bottom_button {
            position: absolute;
            top: 16px;
            width: 50px;
            cursor: pointer;
            user-select: none;
            font-size: 50px;
            filter: opacity(20%);
        }

        #go_bottom_button:hover {
            filter: opacity(40%);
        }

        /* Hover CSS */
        .hoverButtonsContainer:hover,
        pre:hover>.hoverButtonsContainer>.hoverButtonsBackground {
            display: flex !important;
        }

        .hoverButtonsBackground:hover {
            filter: opacity(80%);
        }

        .hoverButtonsBackground {
            position: absolute;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            background-color: rgba(0, 0, 0, .2);
            padding: 2px 5px 5px 10px;
            border-radius: 0.3vw;
            z-index: 555;
            filter: opacity(35%);
            font-size: 14px;
            margin-left: -6px;
            margin-top: -2px;
            user-select: none;
            display: none;
        }

        .hoverButtonsContainer {
            position: absolute;
            width: 138px;
            height: 30vh;
            display: flex;
            background-color: transparent;
            margin-left: -138px !important;
            margin-top: 0px;
            user-select: none;
        }

        .hoverButtons {
            cursor: pointer;
            margin-right: 0px;
            color: #adadad;
        }

        .hoverButtons:hover {
            color: #fff;
        }

        .hoverButtonDelete {
            font-size: 25px;
            line-height: 28px;
            margin-right: 4px;
            margin-top: -1px;
        }

        .hoverButtonDown,
        .hoverButtonUp {
            font-size: 22px;
        }

        .hoverButtonReduceNewlines {
            font-size: 33px;
            line-height: 22px;
            font-family: Arial;
            margin-top: 4px;
            margin-right: 2px;
        }

        .hoverButtonCopy:hover {
            filter: contrast(170%);
        }

        .hoverButtonCopy {
            font-size: 20px;
            line-height: 22px;
            font-family: Arial;
            margin-top: 4px;
            filter: contrast(90%);
        }

    </style>
    <!------------------------


To change background color or text color, just replace the style values above with the hex values for the colors you want.
If you want the background of the counter to remain semi-transparent, you must use rgb values like above. The last number (where I've put 0.8) is the opacity level (1.0 = completely opaque).
To change font size, just change the em value to what works for you (the standard size is 1, I like it at 1.5).
To change font weight (boldness), just edit the value above.  100 is quite thin, 400 is default, 900 is quite thick.  You may want it higher than default for Mincho fonts.
The line-height value changes the spacing between lines.

To use the font of your choice, remove the list of fonts above and put the ENGLISH name of your font in quotation marks (some JP font names are in Japanese, such as "ä¸‰æ¬¡å…ƒåˆ‡çµµå—").
Be sure to leave a semi-colon at the end of the line.
To find the English name of a given font, first install it, then open Firefox.
Go to about:preferences#content in the address bar, then click on the 'Default font' drop-down menu.
The "correct" name of your font will be listed here - just copy that down and paste it up above.

Note that if you would like to use your browser default font, replace the font-family line with font-family:""; or delete it altogether.
Your default is probably Gothic - if you want to try out a good Mincho font, try Aozora Mincho at http://www.freejapanesefont.com/aozora-mincho-download/
For various other free Japanese fonts, visit http://www.freejapanesefont.com/
For more font attribute information visit http://www.w3schools.com/css/css_font.asp

------------------------>
</head>

<body>
    <div id="go_bottom_button" title="Scroll to the bottom">🡻</div>

    <div class="buttoncontainer">

        <!-- This is the div used for the "remove last line" button. -->
        <div id="remove_button" title="Remove last line">✖</div>

        <!-- This is the div used for the "Clear all lines" button. -->
        <div id="clear_button" title="Clear all lines">🗑️</div>

        <!-- This is the div used for the counter. -->
        <div id="counter" title="No. of characters / No. of lines">0 / 0</div>

    </div>

    <div style="display:none;">
        <!-- Dummy div for buttons-->

    </div>

    <!-- jQuery is NOT needed anymore for the page to run. You can change this to an offline version if you prefer. -->

    <!--
        <script src="jquery.min.js"></script>
    -->

    <script>
        var domdebug = "";
        document.addEventListener("DOMContentLoaded", function(event) {

            //check document.location.hash at the start to set margins
            if (document.location.hash == "#lessmargins") {
                var newstyle = document.createElement("style");
                newstyle.innerHTML = `
                    body {
                        margin-top: 1%;
                        margin-left: 1%;
                        margin-right: 1%;
                        margin-bottom: 5%;
                    }
                `;
                document.head.append(newstyle);
            }


            //This listens for a node (line) to be inserted.
            document.addEventListener("DOMNodeInserted", function(dom) {

                // console.log(dom);
                // domdebug = dom;
                //return if the inserted node is not in #textlines
                var relatedId = "";
                try {
                    relatedId = dom.relatedNode.attributes.id.value;
                } catch (error) {}
                if (relatedId != "textlines") {
                    return
                }


                updateCounter();

                element = dom.target;
                //put the added pre text into a span so we can modify it later on.
                element.innerHTML = "<span>" + element.innerHTML + "</span>";


                //add hover buttons to every line
                createhoverButtons(element);

                //Scroll to item
                scrollToLast();

            }, false);

            //End of scroller and counter script.

            //Beginning of "remove last line" script.
            //Listen for click.
            document.getElementById("remove_button").addEventListener("click", function() {

                //Check whether there are any lines.
                var remove_lines = document.querySelectorAll('#textlines > pre').length;
                if (remove_lines > 0) {

                    //Remove the last line.
                    document.querySelector("#textlines > pre:last-of-type").remove();

                    updateCounter();
                };
            });
            //End of "remove last line" script.

            document.getElementById("clear_button").addEventListener("click", function() {
                document.querySelectorAll('#textlines')[0].innerHTML = "";
                //Update the counter.
                updateCounter();
            });

            document.getElementById("go_to_last_button").addEventListener("click", function() {
                //document.querySelector("#textlines > pre:last-of-type").scrollIntoView();
                window.scroll(0, findPos(document.querySelector("#textlines > pre:last-of-type"))[1] - 280);
            });


            document.getElementById("go_bottom_button").addEventListener("click", function() {
                document.querySelectorAll("html")[0].scrollIntoView(false);
            });

            /*
                        debugtest = true;
                        if (debugtest) {
                            pre = document.createElement("pre");
                            pre.innerHTML = "loremipsum\n\nkanjimuzukashikutewakaranai\n\n\n\nwillneverlearn";
                            document.querySelector("#textlines").append(pre);
                        }
             */
        });
        //---DOMContentLoaded end---

        //Used functions
        function scrollToLast() {
            window.scroll(0, findPos(document.querySelector("#textlines > pre:last-of-type"))[1] - 280);
        }


        function scrollUpDown(element, clientY, scrollUp) {
            //get the pre
            element = element.parentNode.parentNode.parentNode;
            var scrollto = null;
            try {
                if (scrollUp) {
                    scrollto = element.previousElementSibling;
                } else {
                    scrollto = element.nextElementSibling;
                }
                if (scrollto == null) {
                    if (scrollUp) {
                        document.querySelectorAll("html")[0].scrollIntoView(true);
                    } else {
                        document.querySelectorAll("html")[0].scrollIntoView(false);
                    }
                } else {
                    //fix scroll difference from reality
                    scrollamount = -16;
                    window.scroll(0, findPos(scrollto)[1] - clientY - scrollamount);
                    //scrollto.scrollIntoView();
                }
                return;
            } catch (error) {
                //console.log(error);
            }
        }

        //find an element's position in the whole page
        function findPos(obj) {
            var curleft = curtop = 0;
            if (obj.offsetParent) {
                do {
                    curleft += obj.offsetLeft;
                    curtop += obj.offsetTop;
                } while (obj = obj.offsetParent);
                values = [curleft, curtop];
                return values;
            }
        }

        function removeLine(element) {
            element = element.parentNode.parentNode.parentNode;
            element.remove();
            updateCounter();
        }

        function reduceNewlines(element) {
            element = element.parentNode.parentNode.parentNode;

            var modifystring = element.querySelector("span").innerText;
            //clean spaces
            modifystring = modifystring.replace(/\n[\r\t\f\v 　\u00a0]*/gm, "\n");
            //reduce newlines
            modifystring = modifystring.replace(/(\n(\n+?))|(\n+?)/gm, "$2$3");
            element.querySelector("span").innerText = modifystring;
        }

        function updateCounter() {
            var charlength = 0;
            var linecount = 0;
            try {
                document.querySelectorAll("#textlines > pre").forEach(element => {
                    charlength += element.innerText.length;
                    linecount++;
                });
            } catch (error) {

            }
            document.querySelector("#counter").textContent = charlength + ' / ' + linecount;
            return;
        }

        function createhoverButtons(element) {

            var hoverButtons = document.createElement("div");
            element.prepend(hoverButtons);
            hoverButtons.outerHTML = `<div class="hoverButtonsContainer">
<div class="hoverButtonsBackground">
<div class="hoverButtons hoverButtonDelete" title="Remove line">✖</div>
<div class="hoverButtons hoverButtonReduceNewlines" title="Reduce newlines and spaces">≡</div>
<div class="hoverButtons hoverButtonCopy" title="Copy to clipboard">📋</div>
<div class="hoverButtons hoverButtonDown" title="Scroll down one line">🡻</div>
<div class="hoverButtons hoverButtonUp" title="Scroll up one line">🡹</div>
</div>
</div>`;
            element.querySelector(".hoverButtonDelete").addEventListener("click", function(event) {
                removeLine(event.target);
            });
            element.querySelector(".hoverButtonReduceNewlines").addEventListener("click", function(event) {
                reduceNewlines(event.target);
            });
            element.querySelector(".hoverButtonUp").addEventListener("click", function(event) {
                scrollUpDown(event.target, event.clientY, true);
            });
            element.querySelector(".hoverButtonDown").addEventListener("click", function(event) {
                scrollUpDown(event.target, event.clientY, false);
            });
            element.querySelector(".hoverButtonCopy").addEventListener("click", function(event) {
                var range = document.createRange();
                console.log(event.target.parentNode.parentNode.parentNode.querySelector("span"));
                range.selectNode(event.target.parentNode.parentNode.parentNode.querySelector("span"));
                window.getSelection().removeAllRanges();
                window.getSelection().addRange(range);
                document.execCommand("copy");
                window.getSelection().removeAllRanges();
            });


        }

    </script>

    <!-- inserted pre tags go here -->
    <div id="textlines">
    </div>

    <div id="go_to_last_button" title="Scroll to the start of the last item">🡹</div>
</body>

</html>