4chan Text Functions

Allows usage of [spoiler]Spoilers[/spoiler] and >greentext inside of picarto chats. See http://imgur.com/a/b8cmO for examples

Versión del día 28/8/2015. Echa un vistazo a la versión más reciente.

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

// ==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");
	}
});