MediaWiki:Gadget-scribunto-console-core.js

"use strict";

/**
 * Gadget that loads a couple of snippets for the console on module 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
*/
var 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();