Benutzer:Johannes Kroll (WMDE)/Limestest/limesEmbed.js

var dynobjid= 0;
function createCheckbox(label, onchange, checked, id) {
	var cb= document.createElement("input");
	cb.type= "checkbox";
	dynobjid++;
	if(id) cb.id= id;
	else cb.id= "foo" + dynobjid;
	cb.onchange= onchange;
	cb.checked= checked;
	var l= document.createElement("label");
	l.htmlFor= cb.id;
	l.appendChild(document.createTextNode(label));
	var span= document.createElement("span");
	span.appendChild(cb);
	span.appendChild(l);
	return span;
}

var mapWidth= "50%";
function testInit() {
	// if(mw.config.get("wgCanonicalNamespace") != "User") return false; // this is now done in MediaWiki:Common.js

	var infobox= document.getElementById("vorlage-infobox-Limeskastell");
	if(!infobox) return;

	var lemma= escape(mw.config.get("wgPageName").split('/').pop());

	var iframe= document.createElement("iframe");
	iframe.src= "//tools.wmflabs.org/render-tests/limes-git/web#wpembed=true&focus=" + lemma;
	iframe.id= "strawberrylimes";
	iframe.style.width= "100%";
	iframe.style.height= "100%";
	iframe.style.margin= "0px";
	iframe.style.clear= "both";
	iframe.seamless= "seamless";
	iframe.frameBorder= 0;

	var descr= document.createElement("div");
	descr.innerHTML= "Use OpenLayers controls to navigate, search box to search for lemmas.<br />Drag timeline bar or click buttons to move through time.";
	descr.style.fontSize= "9pt";
	descr.style.color= "#666";
	descr.style.textAlign= "right";

	var mapcontainer= document.createElement("div");
	//mapcontainer.style.overflow= "hidden";
	mapcontainer.style.height= "400px";
	mapcontainer.style.border= "1px solid black";
	mapcontainer.id= "mapcontainer";
	mapcontainer.appendChild(iframe);

	var checkboxdiv= document.createElement("div");

	checkboxdiv.style.textAlign= "right";

	var d= document.createElement("span");
	d.innerHTML= "Time-Based Map: ";
	d.style.fontSize= "9pt";
	d.style.color= "#666";
	checkboxdiv.appendChild(d);

	var showbox= createCheckbox("Show", function() {
			var map= document.getElementById('outermapcontainer');
			var mapnode= document.getElementById('sldiv');
			if(this.checked) { map.style.visibility= 'visible'; map.style.height= '430px'; mapnode.style.width= mapWidth; mapnode.style.minWidth= "650px"; } 
			else { map.style.visibility= 'hidden'; map.style.height= '0px'; mapnode.style.width= "307px"; mapnode.style.minWidth= "0px"; }
		}, "checked", "slshowbox");
	checkboxdiv.appendChild(showbox);

	var expandbox= createCheckbox("Wide", function() {
		var mapdiv= document.getElementById('sldiv');
		if(this.checked) { var b= document.getElementById("slshowbox"); b.checked= "checked"; b.onchange(); mapWidth= '100%'; }
		else mapWidth= '50%';
		if(document.getElementById('outermapcontainer').style.visibility=='visible')
			mapdiv.style.width= mapWidth;
	});
	checkboxdiv.appendChild(expandbox);

	var outermapcontainer= document.createElement("div");
	outermapcontainer.id= "outermapcontainer";
	outermapcontainer.appendChild(descr);
	outermapcontainer.appendChild(mapcontainer);
	outermapcontainer.style.height= "430px";

	var mapnode= document.createElement("div");
	mapnode.className= "float-right";
	mapnode.style.width= "50%"
	mapnode.style.minWidth= "650px";
	mapnode.style.margin= "0px";
	mapnode.style.marginLeft= "5px";
	mapnode.style.marginBottom= "5px";
	mapnode.style.padding= "0px";
	mapnode.style.backgroundColor= "#def";
	mapnode.id= "sldiv";
	mapnode.appendChild(checkboxdiv);
	mapnode.appendChild(outermapcontainer);

	var contentNode= document.getElementById("mw-content-text");
	contentNode.insertBefore(mapnode, infobox);
	return false;
}

$(testInit);