Quelltext der Seite Benutzer:Kameloid/Vorlagen/Test.js

function mkTEXTAREA(){
//  var ContentSub = document.getElementById("contentSub"); 
  var ContentSub = document.getElementById("wikiPreview"); 
  var TEXTAREA= document.createElement("TEXTAREA");
  TEXTAREA.id= "wpUploadDescription";
  TEXTAREA.cols = "80";
  TEXTAREA.rows = "6";
  TEXTAREA.name = "wpUploadDescription";
 // TEXTAREA.innerHTML="{{Bild\n}}";
  ContentSub.appendChild(TEXTAREA);
box = document.getElementById("wpUploadDescription");
var ibox = document.createElement("div");
ibox.id = "klicktag";
box.parentNode.insertBefore(ibox, box);

}

/* === 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:
 */

/*
 * generieren der Datenstruktur aus DPL-Ergebnissen - #1: AJAX-Request
 */
var imgklick = new Array();
var BGcolor= new Array("red", "green", "gray");
var ButtonStyle0="width:170px;color:"+BGcolor[0]+";font-size:1.0em;font-weight:bold"
var ButtonStyle1="width:170px;color:"+BGcolor[1]+";font-size:1.0em;font-weight:bold"
var ButtonStyle2="width:170px;color:"+BGcolor[2]+";font-size:1.0em;font-weight:bold"

addOnloadHook(mk_ajax);
function mk_ajax()
{

var imgAjax = new Ajax.Request(
            wgScript,
            {
                method: 'get', 
                parameters: 'title=Kamelopedia:Bildsuche/Klick-Tpl&action=raw&templates=expand',
                onComplete: function( req ) { gen_imgklick( req.responseText ); mkALL(); }
            }
  );
}

/*
 * generieren der Datenstruktur aus DPL-Ergebnissen - #2: Parser
 */
function gen_imgklick( txt )
{

        txt = txt.replace(/ *[|¦] */g, "|");
        txt = txt.replace(/[\n\r]+/g, "\n" );

        /* Sicherheits-Feature: HTML-Tags weg (bis auf <br>) */
        txt = txt.replace(/[<]/g, "&lt;" );
        txt = txt.replace(/[>]/g, "&gt;" );
        txt = txt.replace( /&lt;br *\/? *&gt;/g, "<br/>" );
        lines = txt.split( "\n" );
//alert(txt);
        for( i=0; i<lines.length; i++ )
        {
                //zeile auslesen
                type = lines[i].substring(0,1);
                lines[i] = lines[i].substring(1);
                elements = lines[i].split( "|" );
                
                if( type == ";" ) // Vorlage
                {
                if ( elements[4] == "no" ) // ignorieren-Flag gesetzt
                        continue;
                if ( elements[2] == "" )
                        elements[2] = elements[1];
                if ( ! imgklick[0] || imgklick[imgklick.length-1].name != elements[0] )
                        imgklick.push( { name: elements[0], arg: elements[0], prefix:elements[0], opts: [ ] } );
                imgklick[imgklick.length-1].opts.push( { name: elements[2], info: elements[3], vorlage: elements[1], args: [ ], selected: elements[4] } );
                }
                else if( type == "*" ) // Argument
                {
                opts = imgklick[imgklick.length-1].opts
                opts[opts.length-1].args.push( { arg: elements[0], type: elements[1], info: elements[2], pre: elements[3], options: elements.slice(4) } );
                }
        }
}

/*
 * Benutzer-Rückmeldungen:
 */
msg_OK = 
[
	"In Ordnung.",
	"Aber gerne.",
	"Bitteschön.",
	"Klar doch!",
	"Kein Problem.",
	"Jawohl.",
	"Gerne doch."
];


// 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";

// globales Prefix für Vorlagen (Grundvorlage ausgenommen)
globalPrefix = "Bild/";
// globaler Separator
globalSep = ": ";

/* Programmablauf */

/*
 * Den Nachrichtenzähler auf irgendwas setzen
 */
msg_OK_counter = Math.floor( Math.random() * msg_OK.length );

function add_msg( obj )
{
	if( obj.innerHTML == msg_OK[msg_OK_counter] )
		msg_counter_up();
	obj.innerHTML = msg_OK[msg_OK_counter];
	msg_counter_up();
}

function msg_counter_up()
{
	msg_OK_counter++;
	if ( msg_OK_counter >= msg_OK.length )
		msg_OK_counter = 0;
}
/*
 * 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 + " ";
	var wdt;// optionale Variable für die Breite eines Eingabefeldes
	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 if ( arg.type == "select" && imgklick[element].opts[val].args[i].options != null && imgklick[element].opts[val].args[i].options[0] != null)
                {

                        out += arg.info + " <select id='"+imgklick[element].name+"_arg_" + i+"'>";
                        for ( opt=0; opt<imgklick[element].opts[val].args[i].options.length; opt++ )
                        {

                                pos =  imgklick[element].opts[val].args[i].options[opt].indexOf("=");
                                var optkey; var optval;

                                if ( pos == -1 )
                                {
                                         optkey = imgklick[element].opts[val].args[i].options[opt];
                                         optval = imgklick[element].opts[val].args[i].options[opt];
                                }
                                else
                                {
                                         optval = imgklick[element].opts[val].args[i].options[opt].substring(0,pos);
                                         optkey = imgklick[element].opts[val].args[i].options[opt].substring(pos+1);
                                }
                                var sel = "";
                                if ( optkey == imgklick[element].opts[val].args[i].pre )
                                        sel = "select='selected'"; 
                                out += "<option value='"+optval+"' "+sel+">"+optkey+"</option>";
                                
                        }
                        out += "</select>";
                }else{
			if (imgklick[element].opts[val].args[i].options[0]){wdt=imgklick[element].opts[val].args[i].options[0];}else{wdt="150px";}
			out += arg.info + " <input type='" + arg.type + "' style='width:"+wdt+"' value='"+arg.pre+"' id='"+imgklick[element].name+"_arg_" + i + "'/>&nbsp;";}
	}
	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 = "{{"+globalPrefix+imgklick[element].prefix+globalSep+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
	{
		document.getElementById(imgklick[element].name+"_button").style.color=BGcolor[1];
		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");

		add_msg( document.getElementById(imgklick[element].name+"_msg") );	
	};
}

/*
 * returnt eine Box zum Einfügen der übergeordneten Vorlage
 */
function mk_g_box ()
{
	var out = "";
	out += "<div style='border: 0px; border-bottom:1px solid gray; margin:0px; padding: 8px; padding-left:8px;'>";
	out += "<form>";
	out += "<input type='button' id='text_box_button' style='"
	if ( -1 == box.value.search(new RegExp("[{][{]"+grundvorlage.name+"(\s|\n|\r)*([|](.|\n|\r)*)?[}][}]")) ){
		out += ButtonStyle0;
	}else{
		out += ButtonStyle2;
	}
	out += "' value='Grundvorlage&nbsp;einfügen' onclick='mk_add_g();'> Ohne die geht gar nichts! ";
	out += " <span id='g_msg'></span>";
	out += "</form>";
	out += "</div>";
	return out;
}


function mk_tag_box ()
{
	var out = "";
	out += "<div style='border: 1px; margin: 0px; padding: 5px;'>";
	out += "<form>";
	out += "<table>";
	out += "<tr><td colspan='2'><small>Hier kannst du Schlüsselwörter angeben, bitte <b>durch Komma</b> trennen! Angeben kannst du z.B. Motiv, Farben, Besonderheiten, … . <b>Beachte bitte:</b> Mach die Tags kurz und knackig, z.B. <i>Kuh, Weiß, Lila, Violett</i>. Wenn du dein Bild mit <i>Eine weiß-violette Kuh</i> tagst (also ohne Kommas), wird es nur gefunden werden, wenn genau das ins Suchfeld eingegeben wird.</small></td></tr>";
	out += "</td></tr>";
	out += "<tr><td>";
	out += "<input type='button' id='tag_box_button' style='"+ButtonStyle0+"' value='Tags&nbsp;Hinzufügen' onclick='mk_add_tags();'>";
	out += "</td><td width='90%'><textarea id='tag_box' style='width:100%'></textarea></td></tr>";
	out += "</table>";
	out += " <span id='tag_msg'></span>";
	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]*)((.|\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
	{
		document.getElementById("tag_box_button").style.color=BGcolor[1];
		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"+val+"\n$2");
		add_msg(document.getElementById("tag_msg"));
	}
}

/*
 * 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+"}}";
		add_msg(document.getElementById("g_msg"));
		document.getElementById("text_box_button").style.color=BGcolor[2];
	}
	else
		alert("Wiki sagt: Ich glaube, da gibt es schon eine Grundvorlage.");
}

var box; // Globale Variable

/*
 * am Anfang alles reinladen
 */

function mkALL()
{
	// die Zeile wird im "echten" Betrieb weggelöscht
	//mk_my_page();

//	box = document.getElementById("wpUploadDescription");
mkTEXTAREA();
	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: 0px; border-bottom:1px solid gray; margin: 0px; padding: 5px;'>";
		out += "<form>";
		out += "<table>";
		out += "<tr><td width='160px'>";
		out += "<input type='button' id='"+imgklick[e].name+"_button' style='"+ButtonStyle0+"' value='"+imgklick[e].name+"&nbsp;hinzufügen' onclick='mk_add("+e+");'>";
		out += "</td><td>";
		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++ )
		{
			if ( imgklick[e].opts[i].selected == "selected" )
					sel=' selected="selected" ';
			else
					sel = '';
			out += "<option value='" + i + "'"+sel+">" + imgklick[e].opts[i].name + "</option>";
		}
		out += "</select>";
		out += " <span id='" + imgklick[e].name + "_opt'>"+create_opts( e, 0 )+"</span> ";
		out += " <span id='" + imgklick[e].name + "_msg'></span>";
		out += "</td></tr></table>";
		out += "</form>";
		out += "</div>";
	}

//-------------------------------------------------------
	out += mk_tag_box();
	document.getElementById("klicktag").innerHTML = "<div style='border:4px ridge #4264FB;' >" + out + "</div>";
};