Raw Source Toggle Dropdown

• Minified Source

vaahtokarkki / Radio Helsinki shoutbox

// ==UserScript==
// @name         Radio Helsinki shoutbox
// @version      0.3
// @description  Lisää shoutbox Radio Helsingin kuuntelusivulle
// @author       Roni Lindholm, roni.lindholm@gmail.com
// @downloadURL  https://openuserjs.org/src/scripts/vaahtokarkki/Radio_Helsinki_shoutbox.user.js
// @match        https://www.radiohelsinki.fi/kuuntele*
// @grant        none
// @require http://code.jquery.com/jquery-latest.js
// @require http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
// @require https://github.com/gregjacobs/Autolinker.js/raw/master/dist/Autolinker.min.js
// @resource BootStrap http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
// @resource FaIcons http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
// @grant           GM_addStyle
// @grant           GM_getResourceText
// ==/UserScript==
//RADIO HELSINKI//

var cssTxt = GM_getResourceText("BootStrap");
GM_addStyle(cssTxt);
var cssTxt = GM_getResourceText("FaIcons");
GM_addStyle(cssTxt);

//Shoutbox iframe
var shoutbox = '<div id="shoutbox-wrap" style="opacity:0"><iframe src="https://www.radiohelsinki.fi/shoutbox/" id="shoutbox" style="width:100%;height:400px;border:0;margin-top:20px;margin-bottom:20px;"></iframe></div>';
$(".footer").prepend(shoutbox);

//Shoutbox controls
var controls = '<div id="controls" style="width:100%;height:50px;padding:10px">' +
    '<button class="btn btn-primary" style="float:left;border-radius:0;" id="toggle"><span>Sulje shoutbox</span><i class="fa fa-chevron fa-chevron-up" id="toggle-icon" style="font-size:18px;color:white;margin-left:5px;""></i></button>' +
    '<button class="btn btn-primary" style="float:left;border-radius:0;margin-left:10px;" id="refresh">Päivitä <i class="fa fa-refresh" style="font-size:18px;color:white;margin-left:5px;"></i></button>' +
    '</div>';
$(".footer").prepend(controls);
$(".footer").width("101%");
var i = false;
$("#shoutbox").load(function() {
    $("#shoutbox-wrap").css("opacity", 1);
    var iframe = $(this);
    //Rules hover & background fix
    iframe.contents().find('body').css("background-image", "none");
    iframe.contents().find('.shoutbox-rules-text').css("opacity", 0.2);
    iframe.contents().find('#shoutbox-messages').css("border", 0);
    iframe.contents().find(".shoutbox-rules-text").hover(function() {
        $(this).fadeTo(200, 1);
    }, function() {
        $(this).fadeTo(200, 0.2);
    });
    iframe.contents().find("#shoutbox-message")
        .focus(function() {
            iframe.contents().find(".shoutbox-rules-text").fadeTo(200, 1);
        })
        .focusout(function() {
            iframe.contents().find(".shoutbox-rules-text").fadeTo(200, 0.2);
        });
    //Convert links to html    
    setTimeout(function() {
        iframe.contents().find(".shoutbox-message.media").each(function() {
            var linked = Autolinker.link($(this).html());
            $(this).html(linked);
        });
    }, 1000);

    //Setup listeners only once after shoutbox load
    if (!i) {
        i = true;
        //Show/hide listener
        $('#toggle').click(function() {
            $('#shoutbox-wrap').slideToggle('slow', function() {
                var button = $('#toggle span');
                if ($(this).is(":visible")) {
                    button.text('Sulje shoutbox');
                    $("#toggle-icon").removeClass("fa-chevron-down").addClass("fa-chevron-up");
                } else {
                    button.text('Näytä shoutbox');
                    $("#toggle-icon").removeClass("fa-chevron-up").addClass("fa-chevron-down");
                }
            });
        });
        //Refresh shoutbox
        $("#refresh").click(function() {
            $("#shoutbox-wrap").css("opacity", 0);
            iframe.attr("src", iframe.attr("src"));
        });
        //Listen for new messages and conver links
        setTimeout(function() {
            iframe.contents().find('#shoutbox-messages').bind("DOMSubtreeModified", function() {
                var newMessage = Autolinker.link(iframe.contents().find(".shoutbox-message").last().html());
                iframe.contents().find(".shoutbox-message").last().html(newMessage);
            });
        }, 1200);

    }
});