Kamel:Kameloid/Vorlagen/Test.js
aus Kamelopedia, der wüsten Enzyklopädie
Hinweis: Leere nach dem Speichern den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Internet Explorer: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
- Opera: Extras → Internetspuren löschen … → Individuelle Auswahl → Den kompletten Cache löschen
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 === */ var box; // Globale Variable /* * 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, "<" ); txt = txt.replace(/[>]/g, ">" ); txt = txt.replace( /<br *\/? *>/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 + "<br/>"; 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 += "<br/>" + 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 += "<br/>" + 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 + "'/> ";} } 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 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 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."); } /* * am Anfang alles reinladen */ function mkALL() { // box = document.getElementById("wpUploadDescription"); mkTEXTAREA(); if ( ! box || box == null ) { // 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); } if ( ! box || box == null ) { return; } 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+" 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>"; };
