MediaWiki:Skin/Spezial:Hochladen.js

/* === Hochlade-Seite === */

/* Konfiguration */

/*
 * das imgklick-Objekt:
 * hier wird festgelegt, welche Einfügeboxen erzeugt werden, welche Auswahlmöglichkeiten es gibt, welche
 * Optionen, usw. Es wird auch festgelegt, welche Daten beim Hinzufügen ins Feld eingefügt werden.
 *
 * Erklärung:
 * var imgklick =
 * [
 * 	{ genau 1 Element pro Auswahlfeld
 * 		name: String, der als Titel angezeigt wird, z.B. "Bildtechnik" oder "Lizenzen" 
 *              arg: String, der Argumentname benutzt wird z.B. "Technik" wird dann zu "|Technik=",
 * 		prefix: String, Teil des Namens der Vorlage vor dem Schrägstrich, z.B. "Bildquelle",
 * 		opts: Array für die Auswahlmöglichkeiten
 * 		[
 * 			{ genau 1 Element pro Auswahlmöglichkeit
 * 				info: String, Beschreibungstext des Auswahlfeldes,
 * 				vorlage: String, Teil des Namens der Vorlage nach dem Schrägstrich, z.B. "Wiki",
 * 				args: Array für die zusätzlichen Optionen
 * 				[
 * 					{ genau 1 Element pro Option
 * 						arg: String, Name des Arguments, z.B. "1" ( wird dann zu "{{...|1=...}}" ),
 * 						type: String, "text" für Textbox, "textarea" für mehrere Zeilen,
 * 						info: String, Beschreibungstext für die Option
 * 					}
 * 				]
 * 			}
 * 		]
 * 	}
 * ]
 *
 * Sieht leider recht kompliziert aus, einfach mal unten ansehen:
 */

var imgklick = 
[
	{
		name: "Quellen",
		arg: "Quellen",
		prefix: "Bildquelle",
		opts:
		[
			{
				name: "Kamelopedia",
				info: "Das Bild stammt aus der Kamelopedia.",
				vorlage: "Kamelo",
				args:
				[
					{ arg: "1", type: "text", info: "Bildname (ohne 'Bild:'):", pre: "" }
				]

			},
			{
				name: "Wikimedia Commons",
				info: "Das Bild stammt aus den Wikimedia Commons.",
				vorlage: "WikiCommons",
				args:
				[
					{ arg: "1", type: "text", info: "Bildname (ohne 'Bild:'):", pre: "" }
				]

			},
			{
				name: "Wikipedia (deutsch)",
				info: "Das Bild stammt aus der deutschen Wikipedia.<br/>Wenn das Bild aus den Wikimedia Commons in die Wikipedia eingebunden wurde, wähle lieber 'Wikimedia Commons' aus!<br/>",
				vorlage: "Wiki",
				args:
				[
					{ arg: "1", type: "text", info: "Bildname (ohne 'Bild:'):", pre: "" }
				]

			},
			{
				name: "Stupidedia",
				info: "Das Bild stammt aus der Stupidedia.",
				vorlage: "Stupi",
				args:
				[
					{ arg: "1", type: "text", info: "Bildname (ohne 'Bild:')", pre: "" }
				]
			},
			{
				name: "Scan",
				info: "Das wurde gescannt.",
				vorlage: "Scan",
				args:
				[
					{ arg: "1", type: "text", info: "Was hast du eingescannt:", pre: "" }
				]
			},
			{
				name: "Screenshot",
				info: "Das wurde gescreenshottet.",
				vorlage: "Screen",
				args:
				[
					{ arg: "1", type: "text", info: "Wo? (Webseite oder Programm)", pre: "" }
				]
			},
			{
				name: "Selbst",
				info: "Das Bild wurde komplett selbst erzeugt.",
				vorlage: "Selbst",
				args:
				[ /* keine */ ]
			},
			{
				name: "Unzureichend",
				info: "Die Quellenangabe des Bildes ist unzureichend!",
				vorlage: "Unzureichend",
				args:
				[
					/* { arg: "1", type: "textarea", info: "Bitte begründe hier, warum die Quellenangabe unzureichend ist:", pre: "" } */
				]
			}

		]
	},
	{
		name: "Lizenz",
		arg: "Lizenz",
		prefix: "Bildlizenz",
		opts: 
		[
			{
				name: "GNU FDL",
				info: "Das Bild steht unter der GNU FDL (wie auch sonst hier alles).",
				vorlage: "GNU_FDL",
				args:
				[ /* keine */ ]
			},
			{
				name: "Public Domain",
				info: "Das Bild ist gemeinfrei.",
				vorlage: "PD",
				args:
				[ /* keine */ ]
			},
			{
				name: "Creative Commons",
				info: "Das Bild steht unter einer Kommunisten-Lizenz",
				vorlage: "CCS1",
				args:
				[ /* keine */ ]
			}
		]
		
	},
	{
		name: "Bildtechnik",
		arg: "Technik",
		prefix: "Bildtechnik",
		opts: 
		[
			{
				name: "Unbekannt",
				info: "Es wurde keine Bildtechnik angegeben.",
				vorlage: "Unbekannt",
				args: [ /* keine */ ]
			},
			{
				name: "Animation",
				info: "Das Bild wurde animiert.",
				vorlage:"Animation",
				args: [ /* keine */ ]
			},
			{
				name: "Audio",
				info: "Das Bild wurde vertont.",
				vorlage:"Audio",
				args: [ /* keine */ ]
			},
			{
				name: "Grafik",
				info: "Das Bild ist eine Grafik.",
				vorlage:"Grafik",
				args: [ /* keine */ ]
			},
			{
				name: "Malerei",
				info: "Das Bild wurde gemalt.",
				vorlage:"Foto",
				args: [ /* keine */ ]
			},
			{
				name: "Mischtechnik",
				info: "Das Bild ist eine Mischtechnik.",
				vorlage:"Mix",
				args: [ /* keine */ ]
			},
			{
				name: "Foto",
				info: "Das Bild wurde fotographiert",
				vorlage:"Foto",
				args: [ /* keine */ ]
			},
			{	
				name: "Sonstiges",
				info: "",
				vorlage: "Sonstige",
				args:
				[ 
					{ arg: "Technik", type: "text", info: "Das Bild ist ein(e) ... ", pre: ""}
				]
			}
		]
	},
	{
		name: "Malware",
		arg: "Malware",
		prefix: "Malware",
		opts: 
		[
			{
				name: "Keine",
				info: "Es wurde keine Malware benutzt",
				vorlage: "keine",
				args: [ /* keine */ ]
			},
			{
				name: "Gimp",
				info: "Das Bild wurde gegimpt.",
				vorlage: "Gimp",
				args: [ /* keine */ ]
			},
			{
				name: "Inkscape",
				info: "Das Bild wurde geinkscapet.",
				vorlage: "Inkscape",
				args: [ /* keine */ ]
			},
			{
				name: "Paint",
				info: "Das Bild wurde gepaintet.",
				vorlage: "Paint",
				args: [ /* keine */ ]
			},
			{
				name: "Sonstige",
				info: "",
				vorlage: "Sonstige",
				args:
				[
					{ arg: "Malware", type: "text", info: "Das Bild wurde ...", pre: ""}	
				]
			}
		]
	}
];

// name: Wie heißt die Grundvorlage?
// einfg: Wie soll sie am Anfang eingefügt werden?
grundvorlage =
{ 
	name: "Bild",
	einfg: "Bild\n"
};

// Welches Argument ("|xxxx=") soll für die Tags verwendet werden?
tag_arg = "Motiv";

/* Programmablauf */

/*
 * fügt zu einer Auswahl die Optionsbeschreibung und die Argumente ein.
 * element: nummer des Arrayelementes ( imgklick[?] )
 * t: das Auswahlelement (select)
 */
function mk_opts( element, t )
{
	out = create_opts( element, t.value );
	document.getElementById(imgklick[element].name+"_opt").innerHTML = out;
	return true;
};

/*
 * gibt zu einer Auswahl die Optionsbeschreibung zurück.
 * element: nummer des Arrayelementes imgklick[?]
 * val: nummer des Arrayelements imgklick[].opts[?] bzw. Nummer der Auswahl
 */
function create_opts( element, val )
{
var out = imgklick[element].opts[val].info + " ";
for ( i = 0; i<imgklick[element].opts[val].args.length; i++ )
{
	arg = imgklick[element].opts[val].args[i];
	if ( arg.type == "textarea" )
		out += arg.info + " <textarea style='width: 90%;' id='"+imgklick[element].name+"_arg_" + i+"'>"+arg.pre+"</textarea>";
	else
		out += arg.info + " <input type='" + arg.type + "' value='"+arg.pre+"' id='"+imgklick[element].name+"_arg_" + i + "'/>";
}
return out;
}

/*
 * fügt Text in die Textbox ein (eigentliches Klicktag)
 */
function mk_add( element )
{
	obj = imgklick[element].opts[document.getElementById(imgklick[element].name+"_select").value];
	var args = "";
	for( i=0; i<obj.args.length; i++ )
	{
		args += "|" + obj.args[i].arg + "=" + document.getElementById(imgklick[element].name+"_arg_"+i).value;
	}

	var val = "{{"+imgklick[element].prefix+"/"+obj.vorlage+args+"}}";
		
        var arg = imgklick[element].arg;
	var reg = new RegExp("[{][{]"+grundvorlage.name+"[\s\n\r]*([|](.|\n|\r)*)?[}][}]");
	var reg_has_arg = new RegExp("([{][{]"+grundvorlage.name+"[\s\n\r]*([|](.|\n|\r)*)?[|][\s\n]*"+arg+"=)((.|\n|\r)*}})");
	var reg_hasnt_arg = new RegExp("([{][{]"+grundvorlage.name+"[\s\n\r]*)(([|](.|\n|\r)*)?[}][}])");

	if ( -1 == box.value.search(reg) )
	{ // kein Grundvorlage
		alert("Grundvorlage nicht gefunden.\n\n Falls du die Grundvorlage noch nicht eingefügt hast, solltest du das zu allererst tun und erst dann hiermit weitermachen. Den Knopf dafür findest du ein kleines Stückchen weiter oben!");
	}
	else if ( -1 != box.value.search(reg_has_arg))
		box.value = box.value.replace( reg_has_arg, "$1\n"+val+"$4" );
	else
		box.value = box.value.replace( reg_hasnt_arg, "$1|"+arg+"=\n"+val+"\n$2");
	
};

/*
 * returnt eine Box zum Einfügen der übergeordneten Vorlage
 */
function mk_g_box ()
{
	var out = "";
	out += "<div style='border: 1px red dotted; margin: 5px; padding: 5px;'>";
	out += "<form><h4>Grundvorlage einfügen</h4>";
	out += "Als erstes brauchst du eine Grundvorlage: <input type='button' value='Hinzufügen!' onclick='mk_add_g();'>";
	out += "</form>";
	out += "</div>";
        return out;
}

function mk_tag_box ()
{
	var out = "";
	out += "<div style='border: 1px red dotted; margin: 5px; padding: 5px;'>";
	out += "<form><h4>Tags einfügen</h4>";
        out += "Hier kannst du Schlüsselwörter angeben, bitte durch Komma trennen! Angeben kannst du z.B. Motiv, Farben, Besonderheiten, … :<br/><textarea id='tag_box' style='width:95%;'></textarea><br/>";
	out += "<input type='button' value='Hinzufügen!' onclick='mk_add_tags();'>";
	out += "</form>";
	out += "</div>";
        return out;
}

function mk_add_tags ()
{
	var val = document.getElementById("tag_box").value;
		
	var reg = new RegExp("[{][{]"+grundvorlage.name+"[\s\n\r]*([|](.|\n|\r)*)?[}][}]");
	var reg_has_arg = new RegExp("([{][{]"+grundvorlage.name+"[\s\n\r]*([|](.|\n|\r)*)?[|][\s\n\r]*"+tag_arg+"=[\s\n\r]*[{][{]Bildmotiv[\s\n\r]*[|][\n\r\s]*Tags=[\n\r]?)((.|\n|\r)*[}][}])");
	var reg_hasnt_arg = new RegExp("([{][{]"+grundvorlage.name+"[\s\n\r]*)(([|](.|\n|\r)*)?[}][}])");

	if ( -1 == box.value.search(reg) )
	{ // kein Grundvorlage
		alert("Grundvorlage nicht gefunden.\n\n Falls du die Grundvorlage noch nicht eingefügt hast, solltest du das zu allererst tun und erst dann hiermit weitermachen. Den Knopf dafür findest du ein kleines Stückchen weiter oben!");
                return;
	}
	else if ( -1 != box.value.search(reg_has_arg))
		box.value = box.value.replace( reg_has_arg, "$1"+val+", $4" );
	else
		box.value = box.value.replace( reg_hasnt_arg, "$1|"+tag_arg+"=\n{{Bildmotiv|Tags="+val+"}}\n$2");
}

/*
 * fügt die Grundvorlage ein
 */
function mk_add_g ()
{
	if ( -1 == box.value.search(new RegExp("[{][{]"+grundvorlage.name+"(\s|\n|\r)*([|](.|\n|\r)*)?[}][}]")) )
        {
		box.value += "{{"+grundvorlage.einfg+"}}";
        }
        else
                alert("Wiki sagt: Ich glaube, da gibt es schon eine Grundvorlage.");
}

var box; // Globale Variable

/*
 * am Anfang alles reinladen
 */
addOnloadHook(mkALL);
function mkALL()
{
	// die Zeile wird im "echten" Betrieb weggelöscht
	//mk_my_page();

	box = document.getElementById("wpUploadDescription");

	if ( ! box )
	{ // Bild wird nicht hochgeladen, sondern bearbeitet!
		box = document.getElementById("wpTextbox1");
		var ibox = document.createElement("div");
		ibox.id = "klicktag";
		tb = document.getElementById("toolbar");
		if ( tb )
			tb.parentNode.insertBefore(ibox, tb);
		else
			box.parentNode.insertBefore(ibox, box);
	}

	var out = "";
        out += mk_g_box();
	for ( e=0; e<imgklick.length; e++ )
	{
		out += "<div style='border: 1px red dotted; margin: 5px; padding: 5px;'>";
		out += "<form><h4>"+imgklick[e].name+" hinzufügen</h4>";
		out += "<select name='" + e + "' id='" + imgklick[e].name + "_select' size='1' onchange='mk_opts( "+e+", this );'>";
		for ( i = 0; i<imgklick[e].opts.length; i++ )
		{
			out += "<option value='" + i + "'>" + imgklick[e].opts[i].name + "</option>";
		}
		out += "</select>";
		out += " <span id='" + imgklick[e].name + "_opt'>"+create_opts( e, 0 )+"</span> <input type='button' value='Hinzufügen' onclick='mk_add("+e+");'>";
		out += "</form>";
		out += "</div>";

	}
        out += mk_tag_box();
	document.getElementById("klicktag").innerHTML = out;
};