Stack Snippets Console

Add a console to "Stack Snippets" executable code on StackExchange

Per 05-10-2014. Zie de nieuwste versie.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name       Stack Snippets Console
// @namespace  http://stackexchange.com/users/3846032/scimonster
// @version    1.0.0
// @description  Add a console to "Stack Snippets" executable code on StackExchange
// @include    http://*.stackexchange.com/*
// @include    http://stackoverflow.com/*
// @include    http://*.stackoverflow.com/*
// @include    http://stacksnippets.net/*
// @copyright  2014+, Scimonster
// ==/UserScript==

if (location.hostname == 'stacksnippets.net') {
(function(){

	// define some functions

	function isSEDomainName(dname) {
		return !!~["stackoverflow.com", "stackexchange.com"].indexOf(dname.split('.').slice(-2).join('.'));
	}

	function URLparser(href) {
		var p = document.createElement('a');
		p.href = href;
		return p;
	}

	// listen for the ping

	this.addEventListener('message', function(ev){
		if (isSEDomainName(URLparser(ev.origin).hostname) && ev.data == 'console ping') {
			// passes the test
			listen(ev);
		}
	}, false);

	// listen for console.log()s

	function listen(ev) {

		var oldLog = console.log;

		function log(firstArg) {
			var args = [].slice.call(arguments);

			oldLog.apply(console, args); // use the default console.log()

			if (typeof firstArg == 'string') { // might require replacing
				if (~firstArg.indexOf('%s') || ~firstArg.indexOf('%d') || ~firstArg.indexOf('%i') || ~firstArg.indexOf('%f')) {
					// there is something to be replaced
					args.shift();
					firstArg = firstArg.replace(/%[sdif]/g, function(match){
						switch (match) {
							case '%s': return args.shift().toString();
							case '%d': case '%i': return parseInt(args.shift());
							case '%f': return parseFloat(args.shift());
							default: return match;
						}
					});
					args.unshift(firstArg);
				}
			}
			// replacements done, ready for concat
			var text = args.map(function(a){
				if (typeof a == 'object') {
					try {
						return JSON.strigify(a);
					} catch(e) {
						return "{bad object}";
					}
				}
				return a.toString();
			});

			postMessage('log', firstArg, text.join(''));
		}

		this.console.log = log;

		function postMessage(type, message) {
			ev.source.postMessage({
				type: 'log',
				message: message,
				time: new Date,
				snippet: this.name // the iframe
			}, ev.origin);
		}

	}

})();
} else {
(function(){
	$(document).on('click', 'div.snippet-result input[type=button]', function(){
		var container = $(this).parent().parent();
		container.children('.snippet-console').remove();
		if (!this.className) { // the run button
			$('<div class="snippet-console"><h6>Snippet Console <small>v1.0.0</small></h6><ul></ul></div>').appendTo(container).css({
				position: 'relative',
				width: '100%',
				maxHeight: 200,
				borderTopWidth: 1,
				borderTopStyle: 'solid',
				borderTopColor: 'rgb(170, 170, 170)',
				overflow: 'auto'
			}).children('ul').css({
				listStyleType: 'none'
			});

			var snippet = container.find('iframe')[0];

			snippet.onload = function(){
				setTimeout(function(){
					snippet.contentWindow.postMessage('console ping', "*");
					// need to accept all because the iframe has no URL
				}, 100);
			};
		}
	});

	window.addEventListener('message', function(ev){
		if (ev.origin == 'null' && ev.data.snippet) { // seems to be a snippet
			var time = ev.data.time.getHours()+':'+ev.data.time.getMinutes()+':'+ev.data.time.getSeconds()+'.'+ev.data.time.getMilliseconds();
			var li = $('<li data-type="'+ev.data.type+'"><span style="color:gray">'+time+':</span> <span></span></li>');
			li.find('span').last().text(ev.data.message);
			var snCons = $('iframe[name="'+ev.data.snippet+'"]').parent().parent().children('.snippet-console');
			snCons.children('ul').append(li);
			snCons.scrollTop(snCons.children('ul').height()); // scroll to bottom
		}
	}, false);
})();
}