on select show quote button

by ordhor

HTML

<br /><br />
<div id="mensagem">Texto seleccionado faz aparecer botão para citar o conteúdo<br /><br />
Amet elementum, platea porta. Magna eros, pid velit? Pid urna nunc ut, amet duis ultrices vut ac nec mus phasellus tincidunt. Et penatibus augue. Proin ac urna, quis arcu ultrices, ut nunc! Ultrices et hac integer rhoncus a placerat sit? Auctor tristique tincidunt augue amet?<br /> Baseado <a href="http://motyar.blogspot.pt/2010/02/get-user-selected-text-with-jquery-and.html">neste código</a></div>
<br /><br />
<form name=aform >
    <textarea name="selectedtext" rows="6" cols="40"></textarea>
    </form>

CSS

#quote-place { position:absolute;  }

JavaScript

function getSelected() {
    if (window.getSelection) {
        return window.getSelection();
    }
    else if (document.getSelection) {
        return document.getSelection();
    }
    else {
        var selection = document.selection && document.selection.createRange();
        if (selection.text) {
            return selection.text;
        }
        return false;
    }
    return false;
}


$(document).ready(function() {
    var selectionImage;
    $('#mensagem').mouseup(function(e) {
        var selection = getSelected();

        if (!selectionImage) {
            selectionImage = $('<button>').attr({
                type: 'button',
                title: 'Citar Texto seleccionado',
                id: 'quote-place'

            }).html("Citar").css({
                "color": "red"
            }).hide();

            $(document.body).append(selectionImage);

        }
        $("#quote-place").click(function quote() {
            var txt = '';
            if (window.getSelection) {
                txt = window.getSelection();
            }
            else if (document.getSelection) {
                txt = document.getSelection();
            }
            else if (document.selection) {
                txt = document.selection.createRange().text;
            }
            else {
                return;
            }
            document.aform.selectedtext.value = txt;

        }).mousedown(function() {

            if (selectionImage) {
                selectionImage.fadeOut();
            }
        });

        selectionImage.css({
            top: e.pageY - 30,
            //offsets
            left: e.pageX - 13 //offsets
        }).fadeIn();
    });
});