User:Chenzw/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]].
// 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.
 
$(document).ready(function() {
  var p=document.getElementById('wikiPreview');
  if(p===null) p=document.getElementById('viewsourcetext');
  if(p)
    p.innerHTML+="<div id='bm_parseres'><a id='bm_parselink' href='#'>Parse</a></div>";
    $('#bm_parselink').click(function(e) {
    	e.preventDefault();
    	bm_parsebrackets();
    });
  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" '+
        '/>&nbsp;&nbsp;'+edh.innerHTML;
    $('#bm_parsebutton').click(function(e) {
    	e.preventDefault();
    	bm_parsebrackets();
    });
  } catch(x) {}

function bm_parsebrackets()
{
  var t=document.getElementById('wpTextbox1').value;
  $.getJSON(
  	mw.util.wikiScript('api'), {
  		format: 'json',
  		action: 'expandtemplates',
  		prop: 'parsetree',
  		text: t
  	},
  	bm_callback
  )
  .fail(function() {
  	document.getElementById('bm_parseres').innerHTML=
  		"Could not parse due to a server error.<div><a id='bm_parselink' href='#'>Parse</a></div>";
  });
  $('#bm_parselink').click(function(e) {
  	e.preventDefault();
  	bm_parsebrackets();
  });
}

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.expandtemplates.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+"'>"+r+"</font>";
    }
    $('#bm_f'+col+n).click(function(e) {
    	bm_highlight(col, "black");
    });
    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 id='bm_parselink' href='#'>Parse</a></div>";
  $('#bm_parselink').click(function(e) {
  	e.preventDefault();
  	bm_parsebrackets();
  });
}

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(function() {
    	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>
*/