Wikipedysta:Matma Rex/split editarea.js

// Ten skrypt pozwala na rozdzielenie pola edycji na dwie połówki i automatyczne utrzymanie ich synchronizacji.
// This script allows you to split the edit area into two halves and automatically keeps them synchronised.

// Dwukliknij na pasek z ikonką strzałek poniżej pola edycji, aby je podzielić. Kliknij i przeciągnij nowopowstałe paski, aby zmienić rozmiar pól edycji.
// Doubleclick the bar with arrows below edit field to split it. Click and drag newly created bars to change size of edit fields.

// Testowano na: Opera 11.62
// Tested on: Opera 11.62


if(mw.config.get('wgAction') == 'edit' || mw.config.get('wgAction') == 'submit')
{
	mw.loader.using('jquery.ui', function()
	{
		$(document).ready(function()
		{
			// set up the starting handler element
			var tb = document.getElementById('wpTextbox1')
			
			var hndl = document.createElement('div')
			var img = document.createElement('img')
			img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Substitution.svg/20px-Substitution.svg.png'
			hndl.appendChild(img)
			hndl.style.cssText = 'background: #D0DEE7; width:100%; height:20px; text-align:center; cursor:pointer;'
			
			// there's no insertAfter...
			tb.parentNode[tb.nextSibling ? 'insertBefore' : 'appendChild'](hndl, tb.nextSibling)
			
			window._split_editarea_toggle_handle = hndl
			
			var handler_start
			handler_start = function(e)
			{
				window._split_editarea_toggle_handle.parentNode.removeChild(window._split_editarea_toggle_handle)
				window._split_editarea_toggle_handle = null
				
				// set up second textbox and drag handles
				var tb1 = tb.cloneNode(true)
				tb1.id = 'wpTextbox1-1'
				tb1.tabindex = "2"
				tb1.accesskey = "."
				tb1.style.borderTop = "1px solid #C0C0C0"
				tb.parentNode[tb.nextSibling ? 'insertBefore' : 'appendChild'](tb1, tb.nextSibling)
				
				// split in 2:1 ratio, still keeping the total height unchanged
				// oh god the jQuery
				var total_height = $(tb).height()
				$(tb).height( Math.round(2/3 * total_height) )
				$(tb1).height( total_height - $(tb).height() )
				
				var handler_type = function(e)
				{
					if(e.target == tb)
						tb1.value = tb.value
					else
						tb.value = tb1.value
				}
				
				tb.addEventListener('keyup', handler_type, false)
				tb1.addEventListener('keyup', handler_type, false)
				tb.addEventListener('focus', handler_type, false)
				tb1.addEventListener('focus', handler_type, false)
				tb.addEventListener('change', handler_type, false)
				tb1.addEventListener('change', handler_type, false)
				
				$(tb).resizable({handles:'s'})
				$(tb1).resizable({handles:'s'})
				
				// we can't use custom handles above because jQuery sucks
				var hndl = $(tb).parent().find('.ui-resizable-handle')[0]
				var hndl1 = $(tb1).parent().find('.ui-resizable-handle')[0]
				
				css = 'background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Substitution.svg/20px-Substitution.svg.png) center center no-repeat #D0DEE7; width:100%; height:20px;'
				css += 'bottom:0;' // workaround - some weird jQuery styles, eh
				
				hndl.style.cssText += css
				hndl1.style.cssText += css
				
			}
			hndl.addEventListener('dblclick', handler_start, false)
		})
	})
}