Untitled

<html>
<head>
<title>Texthooker</title>
    <script src="https://cdn.rawgit.com/lingtalfi/simpledrag/master/simpledrag.js"></script>
    <style type="text/css">

    body {
        background-color: #202020;
        color: #BCBCBC;
        height: 100%;
    }

    .container {
        position:fixed;
        top:3px;
        right:5px;
        display:inline-block;
    }

    .panes-container {
        display: flex;
        width: 100%;
        overflow: hidden;
    }

    .left-pane {
        width: 18%;
        background: #202020;
    }

    .panes-separator {
        width: 2%;
        background: red;
        position: relative;
        cursor: col-resize;
    }

    .right-pane {
        flex: auto;
        background: #202020;
    }

    .panes-container,
    .left-pane,
    .right-pane {
        margin: 0;
        padding: 0;
        height: 100%;
    }


        .panes-separator{
            background-color: #181818;
            width: 20px;
        }

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

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

    </style>

</head>
<body>


    <div class="panes-container">
    <div class="left-pane" id="left-pane">
        allo

    </div>
    <div class="panes-separator" id="panes-separator"></div>
    <div class="right-pane" id="right-pane">
        aaaaa
    </div>
</div>

    <div class="container">

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

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


        <!-- jQuery is needed for the page to run. You can change this to an offline version if you prefer. -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

        <script>

        var leftPane = document.getElementById('left-pane');
        var rightPane = document.getElementById('right-pane');
        var paneSep = document.getElementById('panes-separator');


        // The script below constrains the target to move horizontally between a left and a right virtual boundaries.
        // - the left limit is positioned at 10% of the screen width
        // - the right limit is positioned at 90% of the screen width
        var leftLimit = 10;
        var rightLimit = 90;


         $(document).ready(function(){

        //The text inserter/scroller and the counter begin here.

        //These are needed later.
        oldlines = 0;
        chars = 0;

        //This listens for a node (line) to be inserted.
        document.addEventListener("DOMNodeInserted", function () {
          //Counter begins here. Get the current number of lines first.
          var lines = leftPane.length;

          //Second, confirm whether the node insertion was a new line.
          //(Rikai also inserts and removes a node (a div).)
          var isnew = lines - oldlines;
          if ( isnew > 0 ){
              //If it is a new line, do a character count of the line and add it to the running tally.
              var i=lines-1
              var newline = leftPane[i].innerHTML;
              var linechars = newline.length;
              newchars = chars + linechars;

              //Make the numbers look nice.
              var charsdisp = newchars.toLocaleString();
              var linesdisp = lines.toLocaleString();

              //Print the new counts into the counter.
              jQuery('#counter').text(charsdisp+' / '+linesdisp);

              //Get ready for the next line.
              oldlines = lines;
              chars = newchars;

              //The counter ends here and the text-scroller is below.
              //I've included it in the "if new line" statement.
              //(That is, it won't run unless a new line was added.)
              //Like this it won't autoscroll down every time Rikai is used.

              var LEEWAY = 200; // Amount of "leeway" pixels before latching onto the bottom.

              // Some obscene browser shit because making sense is for dweebs
              var b = document.body;
              var offset = b.scrollHeight - b.offsetHeight;
              var scrollPos = (b.scrollTop+offset);
              var scrollBottom = (b.scrollHeight - (b.clientHeight+offset));

              // If we are at the bottom, go to the bottom again.
              if (scrollPos >= scrollBottom - LEEWAY) {
                 window.scrollTo(0,document.body.scrollHeight);
              }

          }; //This is the end of the "if new line" statement.

        }, 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 = leftPane.length;
            if ( remove_lines > 0 ){

                //If there are, find the last line and do a character count.
                var q = remove_lines - 1;
                var last = leftPane[q].innerHTML;
                var lastlen = last.length;

                //Remove the last line.
                $('body').children('p:last').remove();

                //Update the counter.
                var newch = chars - lastlen;
                var newchdisp = newch.toLocaleString();
                var newl = oldlines - 1;
                var newldisp = newl.toLocaleString();
                jQuery('#counter').text(newchdisp+' / '+newldisp);

                //Prepare for next line.
                chars = newch;
                oldlines = newl;
            };
        });

        //End of "remove last line" script.

        });


        paneSep.sdrag(function (el, pageX, startX, pageY, startY, fix) {

            fix.skipX = true;

            if (pageX < window.innerWidth * leftLimit / 100) {
                pageX = window.innerWidth * leftLimit / 100;
                fix.pageX = pageX;
            }
            if (pageX > window.innerWidth * rightLimit / 100) {
                pageX = window.innerWidth * rightLimit / 100;
                fix.pageX = pageX;
            }

            var cur = pageX / window.innerWidth * 100;
            if (cur < 0) {
                cur = 0;
            }
            if (cur > window.innerWidth) {
                cur = window.innerWidth;
            }


            var right = (100-cur-2);
            leftPane.style.width = cur + '%';
            rightPane.style.width = right + '%';

        }, null, 'horizontal');


        </script>

</body>
</html>