Raw Source Toggle Dropdown

• Minified Source

cooljacker / MPChotbutton

// ==UserScript==
// @name       MPChotbutton
// @match      https://mpcdot.com/forums/shoutbox/
// @require    https://code.jquery.com/jquery-3.2.1.min.js
// @require    https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js
// ==/UserScript==

$(document).ready(function() {

    $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" />');
    $("#shoutbox-wrapper tr.row1 td.short").append($("<div id='containerdiv' style='padding: 8px;'></div>"));
    $("#containerdiv").append($("<div id='targetdiv' style='min-height:36px;'></div>"));
    $("#containerdiv").append($("<div id='emotediv' style='min-height:20px;'></div>"));

    tags.forEach(function(item) {
        createTagButton(item);
    });

    emotes.forEach(function(item) {
        createEmoteButton(item);
    });

    //$("#containerdiv").append($("<input class='jscolor' value='ab2567' onchange='setColor(this.jscolor)'>"));

    var qButton = $("<a>quote</a>");
    qButton.attr({
        "class":"qButton",
        "style" : style + style2 + "margin: 0; padding: 0px;"
    });
    qButton.append($("<i class='fa fa-quote'></i>"));

    var scotsButton = $("<a>Scotsman has Soured on</a>");
    scotsButton.attr({
        "style" : style + style2
    });
    scotsButton.click(writeScotsman);
    $("#emotediv").append(scotsButton);

    $("#shoutbox-shouts-table tr.row2").hover(function (){
        $('#shoutbox-shouts-table tr.row2 .qButton').remove();
        qButton.click(function() {
            var quote = $(this).closest('td').contents().not($(this).closest('td').children()).text().trim();
            writeQuote(quote);
        });
        //'#shoutbox-shouts-table tr.row2 span.right.desc span'
        qButton.insertAfter($(this).find("span.right.desc span"));
    });
    //replace this with a solution that just puts a quote button when you hover, this is a headache because of how the DOM updates
    /*var observer = new MutationObserver(function(mutations, observer) {
        // fired when a mutation occurs
        console.log('mutation Occured');
        $('.qButton').remove();
        qButton.click(function() {
            var quote = $(this).closest('td').contents().not($(this).closest('td').children()).text().trim();
            writeQuote(quote);
        });
        qButton.insertAfter('#shoutbox-shouts-table tr.row2 span.right.desc span');
    });
    observer.observe(document, {
        subtree: true,
        attributes: true
    });*/
});

function createTagButton(tag){
    var button = $("<a>");

    button.attr({
        "style" : style + style2
    });
    button.text(tag);
    //attach actual functionality
    button.click(function() {
        writeTag(tag);
    });
    button.prepend($("<i class ='fa "+ icons[tag] + "' style='margin-right: 8px; color: rgba(255,255,255,0.5);'> </i>"));
    //alert(icons[tag]);
    $("#targetdiv").append(button);
}
function createEmoteButton(emote){
    var button = $("<a>");

    button.attr({
        "style" : style
    });
    button.text(emote);
    //attach actual functionality
    button.click(function() {
        writeEmote(emote);
    });

    $("#emotediv").append(button);
}

function writeTag(tag){
    var text = $('[name="shout_msg"]');
    var Pos = text[0].selectionStart;
    var textAreaText = text.val();
    var textToAdd = "[" + tag + "][/" + tag + "]";
    var length =("[/" + tag + "]").length;
    text.val(textAreaText.substring(0, Pos) + textToAdd + textAreaText.substring(Pos) );
    var id = $('[name="shout_msg"]').attr('id');
    $('[name="shout_msg"]').focus();
}
function writeEmote(emote){
    var text = $('[name="shout_msg"]');
    var Pos = text[0].selectionStart;
    var textAreaText = text.val();
    var textToAdd = ":" + emote + ":";
    text.val(textAreaText.substring(0, Pos) + textToAdd + textAreaText.substring(Pos) );
    var id = $('[name="shout_msg"]').attr('id');
    $("#" + id).focus();
}
function writeQuote(quote){
    var text = $('[name="shout_msg"]');
    var Pos = text[0].selectionStart;
    var textAreaText = text.val();
    var textToAdd = "[quote]" + quote + "[/quote]";
    text.val(textAreaText.substring(0, Pos) + textToAdd + textAreaText.substring(Pos) );
    var id = $('[name="shout_msg"]').attr('id');
    $('[name="shout_msg"]').focus();
}
function writeScotsman(){
    console.log('scotsman');
    //call to wikipedia api to get random article
    var url = "https://en.wikipedia.org/w/api.php?action=query&generator=random&grnnamespace=0&prop=extracts&exchars=1&format=json&origin=*";
    $.getJSON( url, function( data ) {
        var key = Object.keys(data.query.pages)[0];
        var thing = data.query.pages[key].title;
        $('[name="shout_msg"]').val("Scotsman has soured on "+ thing);
    });
}

var colour1 = '';
var colour2 = '';

var style = "background-color: #219971;border: 1px solid rgba(255,255,255,0.15);border-top: 1px solid rgba(255,255,255,0.4);" +
    "margin: 2px;color: white;border-radius: 4px;padding:4px 10px;cursor:pointer; box-shadow: 0 0 0 1px rgba(0,120,25,0.75);" +
    "text-shadow: 0px 1px 2px rgba(0,0,0,0.5);min-width: 30px;box-shadow: 0 0 0 1px rgba(0,0,0,0.75);";
var style2 = "font-weight: bold;background-color: #555;display: inline-block; text-align: left;";

var tags = ["img","quote","spoiler","i","b","sperg"];
var emotes = ["jew","jewpuppet","mlad","allears","lol","lolnig","jewgold","hurr","mystery","troll","farage","negress"].sort();
var icons={"img":"fa-image","quote":"fa-quote-left","spoiler":"fa-lock","i":"fa-italic","b":"fa-bold","sperg":"fa-puzzle-piece"};