Allows usage of [spoiler]Spoilers[/spoiler] and >greentext inside of picarto chats. See http://imgur.com/a/b8cmO for examples
Per
// ==UserScript==
// @name 4chan Text Functions
// @namespace Wolvan_PicartoTV_4chan_Chat_Functions
// @version 1.0
// @description Allows usage of [spoiler]Spoilers[/spoiler] and >greentext inside of picarto chats. See http://imgur.com/a/b8cmO for examples
// @author Wolvan
// @match *://*.picarto.tv/live/channel.php?*watch=*
// @match *://*.picarto.tv/live/multistream.php?*watch=*
// @grant none
// ==/UserScript==
// Get Picarto's jQuery instance, no need to polute it with our own
var $ = window.jQuery;
// A function to inject CSS into the site
function addCSS(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
// On appending a new message to the messages container we replace the new message's control codes ([spoiler]/[/spoiler]) with properly css-formatted <s> tags
// We also bind the mouseover and mouseout events to hide the spoilers again when you remove the mousecursor
$("#msgs").on("append", function(){
var incoming = $(".messageli:last").html();
if (typeof(incoming) !== "undefined") {
var processed = incoming.replace(/\[spoiler\]/gi, "<s>").replace(/\[\/spoiler\]/gi, "</s>");
var countS = (processed.match(/<s>/g) || []).length;
var countSE = (processed.match(/<\/s>/g) || []).length;
var countDiff = countS - countSE;
if (countDiff > 0) {
for(i = 0; i <= countDiff; i++) {
processed = processed + "</s>";
}
}
$(".messageli:last").html(processed).find("s").mouseover(function() {
$(this).css("color", "white");
}).mouseout(function() {
$(this).css("color", "black");
});
}
});
// Add the CSS to have the spoilers be black boxes without a strikethrough
addCSS(' \
s { \
background-color: black; \
color: black; \
text-decoration: none; \
}\
');
// On appending a new message to the message container we check if the first char of the message is > and turn the message green
$("#msgs").on("append", function(){
var msg = $(".messageli:last").find(".msgContent");
if (msg.text().startsWith(">")) {
msg.css("color", "#8ba446");
}
});