AO3 Floaty Review Box

// ==UserScript==
// @name        AO3: Floaty Review Box
// @description Adds floaty review box as your read your fic!
// @require     https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js
// @include     http://archiveofourown.org/*
// @include     https://archiveofourown.org/*
// ==/UserScript==

// I DIDN'T MAKE THIS! I just tried to fix someone else's code //
// The original can be found here: https://pastebin.com/vYBCYWu4 //

// borrowed from https://www.sitepoint.com/6-jquery-cursor-functions/
// i think this just makes stuff work.... idk what it does
jQuery.fn.getSelectionStart = function(){
    if(this.lengh === 0) return -1;
    input = this[0];

    var pos = input.value.length;

    if (input.createTextRange) {
        var r = document.selection.createRange().duplicate();
        r.moveEnd('character', input.value.length);
        if (r.text === '')
        pos = input.value.length;
        pos = input.value.lastIndexOf(r.text);
    } else if(typeof(input.selectionStart)!="undefined")
    pos = input.selectionStart;

    return pos;
};

// more stuff from the same above link that magically makes it work
jQuery.fn.getCursorPosition = function(){
    if(this.lengh === 0) return -1;
    return $(this).getSelectionStart();
};

// Getting text for potential input... in a jenky way
var HighlightedText = "";

document.addEventListener("selectionchange", function() {
  var text = window.getSelection().toString();
  if(text) {
    HighlightedText = text;
  }
});

(function($) {

    // check if it's a list of works or bookmarks, or header on work page, and attach the menu
    checkWork();

    // check if it's a list of works/bookmarks/statistics, or header on work page
    function checkWork() {

        var found_work = $('ul.work');

        if (found_work.length) {

            // HTML to define layout of popup box
            // Include x button to close box
            var sHtml = '<p class="close actions" id="close_floaty"><a aria-label="cancel" style="display: inline-block; margin-top: 5px;">x</a></p>';
            // Button to insert highlighted text and for a help list
            sHtml += '<ul class="actions" style="float: left; margin-top: 15px;"><li id="insert_floaty_text"><a>Insert</a></li><li id="pop_up_review_tips"><a>Review Tips</a></li></ul>';
            // Header
            sHtml += '<div style="background: #900 url(/images/skins/textures/tiles/xred-ao3.png.pagespeed.ic.Glrf2YTGxy.png); margin: 0px; width: 100%; height:15px;" id="reviewTextArea_header"></div>';
            // Textarea
            sHtml += '<textarea style="margin: 5px; width: 97%;" id="floaty_textarea"></textarea>';

            // Create popup box
            $("<div/>", {
                id: "reviewTextArea",
                width:600, // Change for dimensions
                height:300, // Change for dimensions
                css: {
                    backgroundColor:"#ffffff",
                    opacity: 0.75,
                    border: "thin solid black",
                    display: "inline-block",
                    //"padding-right": 10,
                    position: "fixed",
                    top: 150,
                    right: 5,
                    resize: "both",
                    overflow: "auto"
                },
                html: sHtml
            }).appendTo("body"); // .resizable().draggable().appendTo("body");

            // Hide the popup box by default (comment out line below if you want it to always appear by adding // before it)
            $('#reviewTextArea').hide();

            // To close the box
            $('#close_floaty').click(function() {
                $('#reviewTextArea').hide();
            });

            // Anything you type in the box gets inserted into the real comment box below
            $('#floaty_textarea').on('input', function() {
                $('.comment_form').val($('#floaty_textarea').val());
            });

            // Add Float review box button to the top
            $('ul.work').prepend('<li id="floaty_review_box"><a>Floaty Review Box</a></li>');

            // If the above button is clicked, display the review box
            $('#floaty_review_box').click(function() {
                $('#reviewTextArea').show();
            });

            // Insert highlighted/selected text into textarea when Insert button is clicked
            $('#insert_floaty_text').click(function() {
                var sInitialText = $('#floaty_textarea').val();
                var iPosition = $('#floaty_textarea').getCursorPosition();

                var sHighlightedText = HighlightedText;

                var sNewText = sInitialText.substr(0, iPosition) + '<i>"' + sHighlightedText + '"</i>\n' + sInitialText.substr(iPosition);
                $('#floaty_textarea').val(sNewText); // $('#floaty_textarea').val(sNewText);

                // Copy into real comment box
                $('.comment_form').val($('#floaty_textarea').val());
            });

            // Create the review tips box
            sReviewTipsHtml = '<p class="close actions" id="close_review_tips"><a aria-label="cancel" style="display: inline-block;">x</a></p>' +
                    'Writers will love any love you give them. If you&#39;re looking for things to help jumpstart a review, there are lots of different things you could focus on.<br />' +
                    '<ul><li>Quotes you liked</li><li>Scenes you liked</li><li>What&#39;s your feeling at the end of the chapter (did it move you?)</li><li>What are you most looking forward to next?</li>' +
                    '<li>Do you have any predictions for the next chapters you want to share?</li><li>Did this chapter give you any questions you can&#39;t wait to find out the answers for?</li>' +
                    '<li>How would you describe the fic to a friend if you were recommending it?</li><li>Is there something unique about the story that you like?</li><li>Does the author have a style that really works for you?</li>' +
                    '<li>Did the author leave any comments in the notes that said what they wanted feedback on?</li>' +
                    '<li>Even if all you have are &quot;incoherent screams of delight&quot;, and can&#39;t come up with a real comment at the moment, authors love to hear that as well</li></ul>';
            $("<div/>", {
                id: "reviewTips",
                width:600, // Change for dimensions
                height:300, // Change for dimensions
                css: {
                    backgroundColor:"#ffffff",
                    border: "thin solid black",
                    'font-size': '80%',
                    padding: '10px 10px 0 10px',
                    position: "fixed",
                    top: 150,
                    right: 620,
                },
                html: sReviewTipsHtml
            }).appendTo("body"); // .resizable().draggable()
            $('#reviewTips li').css('list-style', 'circle inside none');
            $('#reviewTips').hide();

            // Pop up list of review tips
            $('#pop_up_review_tips').click(function() {
                $('#reviewTips').show();
            });

            $('#close_review_tips').click(function() {
                $('#reviewTips').hide();
            });
        }
    }

})(jQuery);

// This draggable stuff was copied from
// https://www.w3schools.com/howto/howto_js_draggable.asp
// because this bitch doesn't know shit

//Make the DIV element draggagle:
if (document.getElementById(("reviewTextArea"))) {
    dragElement(document.getElementById(("reviewTextArea")));
    dragElement(document.getElementById(("reviewTips")));
}

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "_header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "_header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}