MediaWiki:Gadget-scribunto-console-core.js

/**
 * Gadget that loads a couple of snippets for the console on module mw.pages
 * Authors:
 ** LapOnTheMoon
 ** Gaz Lloyd
 * 
 * 
 * The scribunto console is run by ext.scribunto.edit - https://github.com/wikimedia/mediawiki-extensions-Scribunto/blob/master/modules/ext.scribunto.edit.js
*/
const FRAME_TEST = [
	"local frame = {}",
	"function frame.getParent()",
	"  local args = {",
	"    -- Args go here as ['name'] = value,",
	"  }",
	"  return { args = args }",
	"end",
	"mw.log( p.main(frame) )"
],
FRAME_TEST_TEXT = FRAME_TEST.join('\n');
var $clearBtn, load_attempts = 0, $inp;

function addButtons() {
	var $addTextBtn = $('<input class="console-control console-addFrameText" type="button" value="Frame text" title="Load code for a basic frame">');
	$addTextBtn.on('click', function() {
		$inp.val(FRAME_TEST_TEXT).attr('rows', FRAME_TEST.length+1);
	});
	
	var $prevHistory = $('<input class="console-control console-prevHist" type="button" value="History &#708;" title="Load the previous input in your console history, if any">');
	var $nextHistory = $('<input class="console-control console-nextHist" type="button" value="History &#709;" title="Load the next in your console history, if any">');
	// send the appropriate keydown events to the input element
	// (ctrl+up / ctrl+down scrolls history)
	$prevHistory.on('click', function(){
		$inp.trigger({
		  type: 'keydown',
		  keyCode: 38, //UP arrow
		  ctrlKey: true
		});
	});
	$nextHistory.on('click', function(){
		$inp.trigger({
		  type: 'keydown',
		  keyCode: 40, //DOWN arrow
		  ctrlKey: true
		});
	});
	
	var $allowEnter = $('<input class="console-control console-allowEnter" type="checkbox" name="console-allowEnter" id="console-allowEnter">'),
		$allowEnterWrapper = $('<span title="Use the Run button or Ctrl+Enter to execute your code, when checked">');
		$allowEnterWrapper.append($allowEnter, '<label for="console-allowEnter">Allow normal enter key</label>');
	
	// don't actually need to have an event attached to this, we're just gonna check is(:checked)
	// BUT we are adding an event to save state to localStorage
	$allowEnter.prop('checked', window.localStorage.getItem('rsw-scribunto-console-allowEnter') === "true"); // do this before attaching event, just to be sure we don't fire it
	$allowEnter.on('change', function(){
		window.localStorage.setItem('rsw-scribunto-console-allowEnter', $allowEnter.is(':checked'));
	});
	
	// attach this to the parent element
	// capture=true => this runs before the innermost element's event
	document.getElementById('mw-scribunto-input').parentElement.addEventListener('keydown', function(e){
		if (e.target.id !== 'mw-scribunto-input') return;
		if (! (e.keyCode === 13)) return; // enter
		if (e.ctrlKey || e.shiftKey) return;
		if ($allowEnter.is(':checked')) {
			e.stopImmediatePropagation();
			$inp.attr('rows', $inp.val().split(/\r?\n/).length+1);
			return;
		}
	}, true);
	
	// enter runs the code
	// ctrl+enter runs it too, and we're explicitly excluding ctrl+enter from allowEnter
	var $run = $('<input class="console-control console-runButton" type="button" value="Run" title="Run the current input">');
	$run.on('click', function(){
		$inp.trigger({
			type: 'keydown',
			keyCode: 13,
			ctrlKey: true
		});
	});
	$clearBtn.parent().prepend($run).append($addTextBtn, $prevHistory, $nextHistory, $allowEnterWrapper);
}

function init() {
	$clearBtn = $('input[type="button"][value="Clear"]');
	$inp = $('#mw-scribunto-input');
	if ($('#mw-scribunto-output').length && $clearBtn.length && $inp.length) {
		$clearBtn.addClass('console-control console-clearButton').attr('title', 'Clear the console (no confirmation!)');
		addButtons();
	} else {
		load_attempts++;
		if (load_attempts > 100) return;
		setTimeout(init, 50);
	}
}
init();