MediaWiki:Gadget-Bracketmatch.js

// [[:en:User:ais523/bracketmatch.js]] - Colour matching brackets in a copy of the edit box.
// By [[:en:User:ais523]], on a suggestion by [[:en:User:Absidy]].
// Made compatible with ResourceLoader by [[:simple:User:Chenzw]].
//
// What this does is add a "parse" link on the top of the edit box. Clicking on it will make a copy of the edit box appear
// but where the "Show Preview" section normally is. Where the various {{ and }} are, it will make the matching ones
// different colours for ease of reference.

$(function(){
  var p=document.getElementById('wikiPreview');
  if(p==null) p=document.getElementById('viewsourcetext');
  if(p)
    p.innerHTML+="<div id='bm_parseres'><a href='javascript:bm_parsebrackets();'>Parse</a></div>";
  try
  {
    var edh=document.getElementsByClassName('editHelp')[0];
    if(bm_useparsebutton)
      edh.innerHTML='<input id="bm_parsebutton" name="bm_parsebutton"'+
        ' type="button" tabindex="6" value="Show parsed" title="Show how braces parse in this text" '+
        ' onclick="bm_showparsed()"/>&nbsp;&nbsp;'+edh.innerHTML;
  } catch(x) {}
});

function bm_parsebrackets()
{
  var t=document.getElementById('wpTextbox1').value;
  var a=sajax_init_object();
  var p='action=expandtemplates&generatexml=1&format=json&callback=bm_callback&text='+encodeURIComponent(t);
  a.open('POST', mw.config.get(mw.config.get('wgServer'))+mw.config.get(wgScriptPath)+'/api.php');
  a.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  a.setRequestHeader("Content-length", p.length);
  a.setRequestHeader("Connection", "close");
  a.onreadystatechange=function(){bm_apirespond(a)};
  a.send(p);
}

function bm_showparsed()
{
  bm_parsebrackets();
  return 0;
}

function bm_apirespond(a)
{
  try
  {
    if(a.readyState==4)
      eval(a.responseText);
  }
  catch(e)
  {
    document.getElementById('bm_parseres').innerHTML=
      "Could not parse due to a server error. <a href='javascript:bm_parsebrackets();'>Parse</a>";
  }
}

var colang;

function bm_hexdigit(n)
{
  var i=Math.floor(n);
  if(i<10) return i+'';
  if(i==10) return 'A';
  if(i==11) return 'B';
  if(i==12) return 'C';
  if(i==13) return 'D';
  if(i==14) return 'E';
  if(i==15) return 'F';
}

function bm_tohex(n)
{
  var i=Math.floor(n);
  return bm_hexdigit(i/16)+bm_hexdigit(i%16);
}

function bm_gencol(ang)
{
  var r=Math.sin(ang)+1;
  var g=Math.sin(ang+3.14159*2/3)+1;
  var b=Math.sin(ang-3.14159*2/3)+1;
  return bm_tohex(r*127.5)+bm_tohex(g*127.5)+bm_tohex(b*127.5);
}

function bm_callback(o)
{
  var subs={"tplarg":"{{{",
            "/tplarg":"}}}",
            "template":"{{",
            "/template":"}}",
            "part":"|",
            "ext":"&"+"lt;",
            "/attr":"&"+"gt;",
            "attr/":"&"+"gt;"};
  var h=o.parsetree["*"].split("<");
  var i=h.length;
  var r;
  var n;
  var sp=0;
  var st=new Array();
  var col;
  colang=0;
  while(--i)
  {
    col="";
    n=1;
    h[i]=h[i].split(">");
    h[i][0]=h[i][0].split(" ");
    r=subs[h[i][0][0]];
    if(r==undefined) r="";
    if(r=='}}}'||r=='}}')
    {
      st[sp]=bm_gencol(colang);
      col=st[sp];
      sp++;
      colang+=2.4; //golden angle in radians, approx
    }
    else if(r=='{{{'||r=='{{')
    {
      sp--;
      col=st[sp];
      n=2;
    }
    if(col!="")
      r="<font color='#"+col+"' id='bm_f"+col+n+"' onclick='bm_highlight(\""+col+"\",\"black\")'>"+r+"</font>";
    h[i][0]=r;
    h[i]=h[i].join("");
  }
  document.getElementById('bm_parseres').innerHTML=
    "<div style='border:1px solid blue'><tt>"+h.join("").split("\n").join("<br />")+
    "</tt></div><div><a href='javascript:bm_parsebrackets();'>Parse</a></div>";
}

function bm_highlight(x,c)
{
  document.getElementById('bm_f'+x+'1').style.backgroundColor=c;
  document.getElementById('bm_f'+x+'2').style.backgroundColor=c;
  if(c=="black")
    window.setTimeout("bm_highlight('"+x+"','transparent')",3000);
}
//<pre>
//test: {{{a|b}}} {{a|b}} {{c|{{e|a=b|3=c}}|f}}<imagemap type=c>abc</imagemap>
//test: <i>f</i><nowiki>g</nowiki><includeonly>h</includeonly>
//test: <noinclude>i</noinclude> {{{{{{{{j}}}}}}}}
/* test:
{{startofline}}</pre>
*/