Forum - RE: Automatisierter Einbau von Bildern aus dem Dateiupload in den Multiple-Diashow-Skript - 3

<div class="xob_icon_cont" ><select id="ic_file" style="width:5em" 
title="File-Bausteine" ></select></div>
 
<script>	//	15.6.25
window.addEventListener('DOMContentLoaded',function() {
 
const  icf=document.getElementById("ic_file");
 
const ta=document.querySelector("#messagetext,textarea[name=nachricht],#metext,#new_text,#edit_text");
 
if(!ta){	//aus Iconbar entfernen
	icf.parentNode.parentNode.removeChild(icf.parentNode);
	return;
	}
 
const x={_v:"file_input fig"
	,vn:"Iconbar_File"
	,qsv4:"ul#fileslist input[name^='tempfiles']"
	,v_save:ta.value
	,opt:[1,"auto","500px","250px",17]
	,opt2:[1,"auto","500px","250px",17]
	,sort_folge:"-1 = absteigend; 0 = unsortiert; 1 = aufsteigend".split(";")
	,tr:",|"
	,bh:"Bildbreite/-h\u00F6he: '"
	,sl1:"[image_slid=250px]"
	,sl2:"[/image_slid]"
	}
console.log(x.vn+" 15.6.25 ")
 
x.loc_opt=localStorage.getItem(x.vn);
if(!x.loc_opt || x.loc_opt.length<5) {x.loc_opt=x.opt.join(x.tr) }
else { x.opt=x.loc_opt.split(x.tr) }
 
let chk_opt=(o)=>{
for(let i in x.opt2){
	x.opt[i]=typeof o[i] =="undefined"?x.opt2[i]:o[i];
	}
x.dbh=`\n \u2022 Diashow: Breite,H\u00F6he,index_Text: '${x.opt.slice(2).join("','")}'`;
x.sl1=`[image_slid=${x.opt[3]}]`;
} 
chk_opt(x.opt);
 
const op_lst=[
["[[File..","bitte wählen",0]
 
,["Optionen"
	,"Sortierfolge, Bildbreite und Diashow_werte durch ',' getrennt, \n\u2003(Einstellung wird gespeichert) "
	,function(op){
	let h="\n\u2022 "+x.bh+x.opt[1]
		+	"' (z.B.: 'auto', '400px|600px', 'fullsize')"; 
	let n=prompt(head_op(op)+"\u2022 Sortierfolge der eingef\u00FCgten Bilder:\n\u2003"+x.sort_folge.join("\n\u2003")+h+x.dbh, x.opt.join(","));
	if(n && n.length>5)	{
		let o=n.replace(/\s/g,"").split(",");
		chk_opt(o);
		n=o[0]||0;
		x.opt[0]=(isNaN(1*n) ||	n=="0")	? 0:(n<0?-1:1);
		x.opt[1]=(o[1]&&o[1].length>3)? o[1]:"auto";
		localStorage.setItem(x.vn,x.opt.join(x.tr))
		}
	}]
 
,["alle Bilder einfügen"
	,"hochgeladene Bilder einfügen"
	,function(op){
		read_filelist(1,op);
		}]
 
,["alle Bilder als 'Diashow' einfügen"
	,"hochgeladene Bilder einfügen,  "+x.sl1+" ... "
	,function(op){
		read_filelist(3,op);
		}]
 
,["alle Bilder als 'Diashow mit Beschriftung' einfügen"
	,"hochgeladene Bilder einfügen,  "+x.sl1+" ... "
	,function(op){
		read_filelist(4,op);
		}]
 
 ,["markierte [[File..]] in 'Diashow' wandeln"
	,"wandeln in "+x.sl1+" ... "
	,function(op){
		slideshow(op)
		}]
 
 ,["markierte [[File..]] als 'Diashow mit Nr: Beschriftung'"
	,"wandeln in "+x.sl1+" ... "
	,function(op){
		slideshow(op,"b")
		}]
 
,["alle Bilder mit Infos einfügen",
	"hochgeladene Bilder einfügen, Dateiname, (x*y)"
	,function(op){
		read_filelist(2,op);
		}]
 
 
,["Leerzeilen einfügen"
	,"zwischen ']][[File' ..."
	,function(op){
		x.v_save=ta.value;
		ta.value=ta.value.replaceAll("]][[Fil","]]\n\n[[Fil");
		}]
 
,["Filename -> kryptisch"
	,"'[[File:..äöü' ... in '...äöü' wandeln, \nletzter Filename wird nie kryptisch"
	,function(op){
		change_fn(true,op);
		}]
 
,["kryptisch -> klarer Filename"
	,"'[[File:..äöü_ß ... in '...äöü ß' wandeln"
	,function(op){
		change_fn(false,op)
		}]
 
 
,["none|auto -> fullsize"
	,"Anzeigeformat wechseln"
	,function(op){
		x.v_save=ta.value;
		ta.value=ta.value.replaceAll("|auto]]","|fullsize]]");
		}]
 
 
,["rückgängig machen"
	,"letzte Aktion rückgängig machen"
	,function(op){
		let tmp=ta.value;
		ta.value=x.v_save;
		x.v_save=tmp;
		}]
];
 
 
let analyse=function(v1){	
		let v=v1.substr(0,v1.lastIndexOf("."));	//.jpg
		let r={d:"-",name:"--"};
		r.name=char_corri(v.substr(x.opt[4])||" - ",false);
		return r;	
 
	const scrs="ScreenShot";
	let dsplit=function(v){
		return v.substr(6,2)+"."+v.substr(4,2)+"."+v.substr(0,4)+" "
			+v.substr(9,2)+":"+v.substr(11,2)+":"+v.substr(13,2)
	}
 
		if(v.substr(0,4).toLowerCase()=="img_"){
			r.d=dsplit(v.substr(4,15));
			r.name=v.substr(19)||" - ";
			}
		else if(v.substr(0,scrs.length).toLowerCase()==scrs.toLowerCase()){
			r.d=dsplit(v.substr(1+scrs.length,15));
			r.name=v.length>(scrs.length+16)? v.substr(Math.min(v.length-1, 1+scrs.length+15))
				:	scrs;
			}		
		return r;	
		}
 
let read_filelist=function(mode,op){
 
	let s="",arr=[];
	let ips=document.querySelectorAll(x.qsv4); //V3+V4
	for(let ip of ips){
			arr.push({value: ip.value
			,x: ip.nextElementSibling.value
			,y: ip.nextElementSibling.nextElementSibling.value
			,vlow: char_corri(ip.value,false).toLowerCase()
			});
			}
	if(ips.length<1){
		let d_v6=document.querySelectorAll("#imagelist .image_attachment:not(.existingfile)");
		for(let dc of d_v6){
			arr.push({value: dc.dataset.filename
			,x: dc.dataset.size_x
			,y: dc.dataset.size_y
			,vlow: dc.dataset.filename.toLowerCase()
			})
			}
		}
	let ip_sort=function(a,b){
		return (a.vlow<b.vlow?-1:(a.vlow>b.vlow?1:0))*x.opt[0];
		}
 
	if(x.opt[0]!=0) arr=arr.sort(ip_sort);
 
 console.log(x._v);
 
	for(let a of arr){
		if(mode==1){
			s+=`[[File:${a.value}|none|${x.opt[1]}]]`;
			}
		else if(mode==2){
			let v=char_corri(a.value,false);
			s+=`[[File:${a.value}|none|${x.opt[1]}]] ${v} (${a.x}*${a.y})`+"\n\n";
			}
		else if(mode==3){
			s+="\n"+x.sl1+`[[File:${a.value}|none|fullsize]]`+x.sl2;
			}
		else if(mode==4){
			let r=analyse(a.value);
			let sl1=x.sl1.replace("=","es=").replace("]",`=${r.name}]`);
			s+="\n"+sl1+`[[File:${a.value}|none|fullsize]]`+x.sl2.replace("]","es]");
			}
		}
 
	if(mode==3||mode==4) s=sls500(s);
 
	if(confirm(head_op(op)+" \u2022 Sortierfolge: "+x.sort_folge[1+1*x.opt[0]]
	+" \u2022 "+x.bh+x.opt[1]+"'"
	+(mode==3||mode==4? x.dbh:"")
	+"\n \u2022 Anzahl: "+arr.length+"")){
		x.v_save=ta.value;
		xob_insert(s);
		}
	}
 
 
let sls500=function (s){
	return `[slideshow=${x.opt[2]}]`+s+"\n[/slideshow]";
	}
 
let slideshow=function (op,b){
 
		let v=ta.value;
		let v_a=v_s="",	v_e=v;
 
		if (!document.getSelection){
			alert("= \u274C dein Browser unterst\u00FCzt diese Funktion leider nicht. =\n");
			}
		else if	(ta.selectionStart< ta.selectionEnd){
			v_a=v.substring(0,ta.selectionStart);
			v_s=v.substring(ta.selectionStart,ta.selectionEnd);
			v_e=v.substr(ta.selectionEnd);
			}
		else{
			alert("= \u274C keinen selektierten Text erkannt. =\n");
			return;
			}
 
		const m1="]]", m2="[[Fil";
	//	let arr=v_s.split(m1+m2);
		let arr=v_s.split(/\]\]\s?\[\[Fil/);
		
		if(b=="b"){
			v_s="";
			let nr=1,sl2=x.sl2.replace("]","es]");
			for (let a of arr) {	
				let r=/e:(.+?)\|/.exec(a);
				let fn=r[1]||"?";
				let sl1=x.sl1.replace("=","es=").replace("]",`=${nr++}/${arr.length}: ${analyse(fn).name}]`);
				v_s+="\n"+sl1+(a.includes(m2)?"":m2) +a.replace("\n","")+(a.includes(m1)?"":m1)+sl2;
				}
			}
		else
			v_s="\n"+x.sl1 +arr.join(m1+x.sl2+"\n"+x.sl1+m2)+x.sl2;
 
		v_s=sls500(v_s);
 
		x.v_save=ta.value;
		ta.value=v_a+ v_s +v_e;
 
		let pos=v_a.length+v_s.length;
		if (typeof(setCaretPosition)=="function") {
			setCaretPosition(ta,pos);	//V4
			}
		else if(ta.setSelectionRange){
			ta.focus();
			ta.setSelectionRange(pos,pos);
			}
}
 
function head_op(op){
	return "= "+op.text+" =  \u2753\n"+op.title+"\n\n";
	}
 
const tmpta=document.createElement("textarea");
function decode(x) {
	tmpta.innerHTML=x;
	return tmpta.value;
	}
 
let char_tab=[["ä","ä"],["ö","ö"],["ü","ü"],["ß","ß"]
,["Ä","Ä"],["Ö","Ö"],["Ü","Ãœ"]];
 
for(let c of char_tab){ c[0]=decode(c[0]); c[1]=decode(c[1]);	}
 
function change_fn(cryp,op) {
		let arr=[];
		let ips=document.querySelectorAll(x.qsv4);
		for(let i=0;i<ips.length-1;i++) {
			arr.push(decode(ips[i].value)); // letzter Filename wird nie kryptisch
			}
		const rg=/\[\[File:(.+?)\|/g;
		let r=rg.exec(ta.value);
		if (arr.length && r&&r[0]){ if(confirm(head_op(op))){
			x.v_save=ta.value;
			ta.value=ta.value.replace(rg,function(needle){
					let v=needle.substring(7,needle.length-1);
					let vc=char_corri(v,cryp);
					v=cryp?(arr.includes(vc)? vc : v) : vc;
					return needle.substr(0,7)+v+"|";
					});
				}
			}	else alert("\u274C keine [[File:....]] gefunden");
		}
 
function char_corri(s,cryp) {
	let x="";for(let cp of s)	x+=cp;
	for(let ct of char_tab){
		x=x.replaceAll( ct[cryp?0:1],ct[cryp?1:0]);
		}
	return x;
	}
 
for(let o of op_lst){
	let op=new Option(decode(o[0]));
	icf.add(op);
	op.title=decode(o[1])
	if(o[2])	op.fct=o[2];
	}
 
icf.selectedIndex=0;
 
icf.onchange=function(){
	let op=this.options[this.selectedIndex];
	if(op.fct) op.fct(op);
	this.selectedIndex=0;
	}
 
})
</script>