Wikipedysta:Matma Rex/highlight.js

// Proste [[podświetlanie składni]] wikitekstu. 
// 
// Zaznacza kolorem poprawnie sformatowane linki wewn. i zewn., szablony, tabelki, nagłówki i listy.
// 
// Dodaje do paska narzędzi przycisk "[[ ]]", który przełącza podświetlanie.
// 
// 
// Użycie: dodaj
//   importScript("Wikipedysta:Matma Rex/highlight.js")
// 
// na koniec swojego common.js.
// 
// Autor: Matma Rex, CC-BY-SA 3.0.



// The following two functions are freely available under unspecified license.
// Source: http://upshots.org/javascript/jquery-copy-style-copycss
$.fn.getStyleObject = function(){
	var dom = this.get(0);
	var style;
	var returns = {};
	if(window.getComputedStyle){
		var camelize = function(a,b){
			return b.toUpperCase();
		};
		style = window.getComputedStyle(dom, null);
		if (style.length)
			for(var i = 0, l = style.length; i < l; i++){
				var prop = style[i];
				var camel = prop.replace(/\-([a-z])/, camelize);
				var val = style.getPropertyValue(prop);
				returns[camel] = val;
			}
		else
			for(var prop in style){
				if(typeof style[prop] == 'function') continue;
				
				var camel = prop.replace(/\-([a-z])/, camelize);
				var val = style.getPropertyValue(prop)  || style[prop];
				returns[camel] = val;
			}
		return returns;
	};
	if(style = dom.currentStyle){
		for(var prop in style){
			returns[prop] = style[prop];
		};
		return returns;
	};
	if(style = dom.style){
	  for(var prop in style){
		if(typeof style[prop] != 'function'){
		  returns[prop] = style[prop];
		};
	  };
	  return returns;
	};
	return returns;
}
$.fn.copyCSS = function(source){
  var styles = $(source).getStyleObject();
  this.css(styles);
}



function hl_init()
{
	mw.util.addCSS("#wpTextbox1SyntaxHighlight .brace3open, #wpTextbox1SyntaxHighlight .brace3close, #wpTextbox1SyntaxHighlight .brace3>.pipe { background: rgb(255, 182, 193) }")
	mw.util.addCSS("#wpTextbox1SyntaxHighlight .brace3 { background: rgba(255, 182, 193, .3) }")
	
	mw.util.addCSS("#wpTextbox1SyntaxHighlight .tableopen, #wpTextbox1SyntaxHighlight .tableclose, #wpTextbox1SyntaxHighlight .table>.pipe { background: rgb(200, 150, 240) }")
	mw.util.addCSS("#wpTextbox1SyntaxHighlight .table { background: rgba(200, 150, 240, .3) }")
	
	mw.util.addCSS("#wpTextbox1SyntaxHighlight .brace2open, #wpTextbox1SyntaxHighlight .brace2close, #wpTextbox1SyntaxHighlight .brace2>.pipe { background: rgb(255, 246, 180) }")
	mw.util.addCSS("#wpTextbox1SyntaxHighlight .brace2 { background: rgba(255, 246, 180, .3) }")
	
	mw.util.addCSS("#wpTextbox1SyntaxHighlight .brkt2open, #wpTextbox1SyntaxHighlight .brkt2close, #wpTextbox1SyntaxHighlight .brkt2>.pipe { background: rgb(176, 196, 222) }")
	mw.util.addCSS("#wpTextbox1SyntaxHighlight .brkt2 { background: rgba(176, 196, 222, .3) }")
	
	mw.util.addCSS("#wpTextbox1SyntaxHighlight .brkt1open, #wpTextbox1SyntaxHighlight .brkt1close, #wpTextbox1SyntaxHighlight .brkt1>.pipe { background: rgb(255, 165, 0) }")
	mw.util.addCSS("#wpTextbox1SyntaxHighlight .brkt1 { background: rgba(255, 165, 0, .3) }")
	
	mw.util.addCSS("#wpTextbox1SyntaxHighlight .listitem, #wpTextbox1SyntaxHighlight .headeropen, #wpTextbox1SyntaxHighlight .headerclose { background: rgb(154, 205, 50) }")
	mw.util.addCSS("#wpTextbox1SyntaxHighlight .header { background: rgba(154, 205, 50, .3) }")
	
	mw.util.addCSS("#wpTextbox1SyntaxHighlight .syntaxerror { background: red }")
	
	mw.loader.using("ext.gadget.lib-toolbar", function()
	{
		toolbarGadget.addButton({
			title: 'Przełącz kolorowanie składni',
			alt: '[[]]',
			icon: '//upload.wikimedia.org/wikipedia/commons/7/7f/Vector_toolbar_brackets_button.png',
			onclick: hl_toggle
		})
	})
	
	if(window.hl_toggle_on_load !== false) hl_toggle()
}

function hl_scroll_adjuster()
{
	var tb = document.getElementById('wpTextbox1')
	var tm = document.getElementById('wpTextbox1SyntaxHighlight')
	tm.scrollTop = tb.scrollTop
}

function hl_toggle()
{
	if(! document.getElementById('wpTextbox1SyntaxHighlight')) // disabled
	{
		// tweak wpTextbox1
		var tb = document.getElementById('wpTextbox1')
		tb.style.cssText += '; background:none; position:relative; z-index:1;'
		
		// construct syntax highlight wrapper
		var tm = document.createElement('div')
		tm.id = 'wpTextbox1SyntaxHighlight'
		$(tm).copyCSS(tb) // magic happens here
		tm.style.cssText += '; white-space:pre-wrap; overflow:auto; background:white; color:transparent; -webkit-text-fill-color:transparent; display:block;'
		$(tm).width( $(tb).width() )
		var h = $(tb).outerHeight();
		$(tm).height(h)
		tm.style.cssText += '; position:relative; top:-'+h+'px; z-index:0; margin-bottom:-'+h+'px;'
		
		// should be placed *after* wpTextbox1 - some scripts depend on inserting elements before it,
		// and since we're positioning and overlaying, page formatting would break all over
		// we also take care to overlay it *under* wpTextbox1 (thus z-indices above and position:relative on the textbox)
		$(tm).insertAfter(tb)
		
		
		// workaround
		// for some reason Firefox considers the empty margin to actually take space and cover all the buttons below edit field
		tm.parentNode.style.overflow = 'hidden'
		
		// events
		tb.addEventListener('keyup', hl_highlight, false)
		tb.addEventListener('scroll', hl_scroll_adjuster, false)
		
		hl_highlight()
		hl_scroll_adjuster()
	}
	else
	{
		var tb = document.getElementById('wpTextbox1')
		var tm = document.getElementById('wpTextbox1SyntaxHighlight')
		
		// remove events
		tb.removeEventListener('keyup', hl_highlight, false)
		tb.removeEventListener('scroll', hl_scroll_adjuster, false)
		
		// unbreak wpTextbox1 and kill the wrapper
		tb.style.cssText += '; background:white; position:static; z-index:0;'
		tm.parentNode.removeChild(tm)
	}
}

function hl_highlight()
{
	var tb = document.getElementById('wpTextbox1')
	var tm = document.getElementById('wpTextbox1SyntaxHighlight')
	
	var s = tb.value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')

	
	// nestable - {{ }}, {{{ }}}, {| |}, [[ ]], also [ ] because it won't work otherwise
	while(true)
	{
		var n = s
		
		try
		{
			n = n.replace(/\[\[([^{\[\]}]*)\]\]/g, "<span class=brkt2><span class=brkt2open>((</span>$1<span class=brkt2close>))</span></span>")
			if(n != s) throw 'matched'
			n = n.replace(/\[([^{\[\]}]*)\]/g, "<span class=brkt1><span class=brkt1open>(</span>$1<span class=brkt1close>)</span></span>")
			if(n != s) throw 'matched'
			n = n.replace(/{{{([^{\[\]}]*)}}}/g, "<span class=brace3><span class=brace3open>(((</span>$1<span class=brace3close>)))</span></span>")
			if(n != s) throw 'matched'
			n = n.replace(/{{([^{\[\]}]*)}}/g, "<span class=brace2><span class=brace2open>((</span>$1<span class=brace2close>))</span></span>")
			if(n != s) throw 'matched'
			n = n.replace(/\{\|([^{\[\]}]+?\r?\n\s*)\|\}/g, "<span class=table><span class=tableopen>(|</span>$1<span class=tableclose>|)</span></span>")
			if(n != s) throw 'matched'
		}
		catch(what)
		{
			if(what == 'matched') {} // okay. continue the loop
			else {throw what} // not what we're looking for
		}
		
		if(n != s) s = n;
		else break;
	}
	
	// any leftovers are probably errors
	s = s.replace(/([\{\}\[\]]+)/g, "<span class=syntaxerror>$1</span>")
	
	// now other stuff
	s = s.replace(/(\r?\n)([:;*#]+)/g, "$1<span class=listitem>$2</span>")
	s = s.replace(/(\r?\n)(=+)(.+?)\2(?=\s*\r?\n)/g, "$1<span class=header><span class=headeropen>$2</span>$3<span class=headerclose>$2</span></span>")
	
	// pipes are special-cased
	s = s.replace(/\|/g, "<span class=pipe>|</span>")
	
	tm.innerHTML = s
}

$(function(){
	if(mw.config.get('wgAction') == 'edit' || mw.config.get('wgAction') == 'submit')
	{
		if(window.wikEd && !window.wikEd.turnedOn)
		{
			if (typeof(wikEd.config) == 'undefined') { wikEd.config = {}; }
			if (typeof(wikEd.config.setupHook) == 'undefined') { wikEd.config.setupHook = []; }
			wikEd.config.setupHook.push(hl_init)
		}
		else
		{
			hl_init()
		}
	}
})