FFN Floaty Review Box Script

// ==UserScript==
// @name         FFN Review
// @namespace    saxamaphone
// @version      0.1
// @description  Adds a floaty review box
// @author       You
// @match        https://www.fanfiction.net/s/*
// @grant        none
// ==/UserScript==

// From http://stackoverflow.com/a/1909997/584004
(function (jQuery, undefined) {
    jQuery.fn.getCursorPosition = function() {
        var el = jQuery(this).get(0);
        var pos = 0;
        if('selectionStart' in el) {
            pos = el.selectionStart;
        } else if('selection' in document) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        return pos;
    };
})(jQuery);

// From http://stackoverflow.com/a/841121/584004
(function (jQuery, undefined) {
    jQuery.fn.selectRange = function(start, end) {
        if(end === undefined) {
            end = start;
        }
        return this.each(function() {
            if('selectionStart' in this) {
                this.selectionStart = start;
                this.selectionEnd = end;
            } else if(this.setSelectionRange) {
                this.setSelectionRange(start, end);
            } else if(this.createTextRange) {
                var range = this.createTextRange();
                range.collapse(true);
                range.moveEnd('character', end);
                range.moveStart('character', start);
                range.select();
            }
        });
    };
})(jQuery);

jQuery(window).ready(function() {
    // HTML to define layout of popup box
    // Include x button to close box
    var sHtml = '<button class="btn" style="float: right; margin-top: 10px;" id="close_floaty">×</button>';
    // Button to insert highlighted text and for a help list
    sHtml += '<button class="btn" style="float: left; margin-top: 10px; margin-left: 5px;" id="insert_floaty_text">Insert</button><button  style="float: left; margin-top: 10px;" class="btn" id="pop_up_review_tips">Review Tips</button>';
    // Textarea
    sHtml += '<textarea style="margin: 5px; width: 97%; height: 80%;" id="floaty_textarea"></textarea>';

    // Create popup box
    jQuery("<div/>", {
        id: "reviewTextArea",
        width:600, // Change for dimensions
        height:300, // Change for dimensions
        css: {
            backgroundColor:"#ffffff",
            opacity: 0.85,
            border: "thin solid black",
            display: "inline-block",
            "padding-right": 10,
            position: "fixed",
            top: 150,
            right: 5,
            "z-index": 999
        },
        html: sHtml
    }).appendTo("body");

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

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

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

    // Add Float review box button to the top
    jQuery('#profile_top .icon-heart').after('<button class=\'btn pull-right\' type=button id=\'floaty_review_box\'> Floaty Review Box</button>');

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

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

        var sHighlightedText = window.getSelection().toString();

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

        // Copy into real comment box
        jQuery('#review_review').val(jQuery('#floaty_textarea').val());
    });

    // Create the review tips box
    sReviewTipsHtml = '<button class="btn" aria-label="cancel" style="float: right;" id="close_review_tips">×</button>' +
        '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 style="margin-left: 2em; text-indent: -2em;">Quotes you liked</li>'+
        '<li style="margin-left: 2em; text-indent: -2em;">Scenes you liked</li>' +
        '<li style="margin-left: 2em; text-indent: -2em;">What&#39;s your feeling at the end of the chapter (did it move you?)</li>' +
        '<li style="margin-left: 2em; text-indent: -2em;">What are you most looking forward to next?</li>' +
        '<li style="margin-left: 2em; text-indent: -2em;">Do you have any predictions for the next chapters you want to share?</li>' +
        '<li style="margin-left: 2em; text-indent: -2em;">Did this chapter give you any questions you can&#39;t wait to find out the answers for?</li>' +
        '<li style="margin-left: 2em; text-indent: -2em;">How would you describe the fic to a friend if you were recommending it?</li>' +
        '<li style="margin-left: 2em; text-indent: -2em;">Is there something unique about the story that you like?</li>' +
        '<li style="margin-left: 2em; text-indent: -2em;">Does the author have a style that really works for you?</li>' +
        '<li style="margin-left: 2em; text-indent: -2em;">Did the author leave any comments in the notes that said what they wanted feedback on?</li>' +
        '<li style="margin-left: 2em; text-indent: -2em;">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>';
    jQuery("<div/>", {
        id: "reviewTips",
        width:600, // Change for dimensions
        height:300, // Change for dimensions
        css: {
            backgroundColor:"#ffffff",
            border: "thin solid black",
            padding: '10px 10px 0 10px',
            position: "fixed",
            top: 150,
            right: 620,
            "z-index": 999
        },
        html: sReviewTipsHtml
    }).appendTo("body");
    jQuery('#reviewTips li').css('list-style', 'circle inside none');
    jQuery('#reviewTips').hide();

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

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

    // Enable text selection
    var sStyles='*,p,div{user-select:text !important;-moz-user-select:text !important;-webkit-user-select:text !important;}';
    jQuery('head').append(jQuery('<style />').html(sStyles));
    var allowNormal=function(){
      return true;
    };
    jQuery('*[onselectstart], *[ondragstart], *[oncontextmenu], #songLyricsDiv').unbind('contextmenu').unbind('selectstart').unbind('dragstart').unbind('mousedown').unbind('mouseup').unbind('click').attr('onselectstart',allowNormal).attr('oncontextmenu',allowNormal).attr('ondragstart',allowNormal);

});