MediaWiki:Gadget-cornersAlpha.js

// copia di corners.js, verrà utilizzato per implementazione sperimentale di elemento canvas per operare sul ritaglio dell'immagine
/* le funzioni pubbliche (a cui si accede dai bottoni) sono:

mw.ritaglio.preview()
mw.ritaglio.ridimensiona()
mw.ritaglio.redrawCropArea()
mw.ritaglio.corners()
mw.ritaglio.data()
mw.ritaglio.exitCursors()
mw.ritaglio.canvas()

Tutte le altre funzioni sono interne e possono essere ridefinite come locali all'interno della funzione anonima generale.

Lo script Ritaglio crea un clone dell'immagine della pagina corrente, in piena risoluzione width=1024px, accessibile 
come elemento DOM mediante $("#imgContainer img")[0], ma poi ma lo visualizza ridimensionato via css. 
Le dimensioni originali dell'immagine in memoria per il caricamento su canvas del clip vanno lette con naturalWidth 
e naturalHeight; i parametri wTop, wLeft, wWidth e wHeight vanno ricalcolati sulle dimensioni naturali dell'immagine 
prima di essere passati al metodo drawImage di canvas.

Nella versione test il canvas avrà le dimensioni originali, in seguito si opererà su un "thumb" (un canvas rimpicciolito)
e le modifiche verranno riportate su un canvas a piena risoluzione in sottofondo.
*/
(function (mw) {
var newTemplate={};	// oggetto contenitore per iparametri template
var img={};		//  oggetto contenitore per i dati numerici dell'immagine clonata: nWidth, nHeight, ratio; img.ratio viene inizializzata
				//  in creaBox e aggiornata in mw.ritaglio.ridimensiona()
mw.ritaglio={};
var testo=[];

mw.ritaglio.canvas=function() {
		//eliminazione di eventuale canvas già presente
		$("canvas").remove();
		// calcolo parametri di drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
		img.sy = Math.round(depix($('#cornerTop').css('top'))*img.ratio);
		img.sx = Math.round(depix($('#cornerTop').css('left'))*img.ratio);
		img.swidth = Math.round((depix($('#cornerBottom').css('left')) - depix($('#cornerTop').css('left')) +20)*img.ratio);
		img.sheight = Math.round((depix($('#cornerBottom').css('top')) - depix($('#cornerTop').css('top')) +20)*img.ratio);
		img.x=0;
		img.y=0;
		img.width=img.swidth;
		img.height=img.sheight;
		console.log(["img",img.sy,img.sx,img.swidth,img.sheight,img.x,img.y,img.width,img.height].join(", "));
		$("#previewArea").css("display","none");	//oscuro la textarea
		var canvas=$("<canvas>")
			.attr("id","myCanvas")
			.attr("width",img.width+"px")
			.attr("height",img.height+"px")
			.css("border","1px dotted blue");
		canvas.insertAfter("#previewArea");
		var ctx=canvas[0].getContext("2d");
		var $img = $("#imgContainer img").eq(0).clone();
		$img[0].crossOrigin = 'Anonymous';
		ctx.drawImage($img[0],img.sx,img.sy,img.swidth,img.sheight,img.x,img.y,img.width,img.height);
		mw.imageData=ctx.getImageData(0,0,img.width,img.height);
		/*mw.imageWidth=img.width;
		mw.imageHeight=img.height;*/
		

}
/* funzioni pubbliche (chiamate da bottoni ecc) */

// legge i valori dei due corners (leggiCorners); aggiorna newTemplate; poi aggiorna testo[1]; infine aggiorna previewArea
mw.ritaglio.preview= function (opzione) {
    leggiCorners();
	aggiornaTesto1(opzione);
    $("#previewArea").val(testo[1]);
    
}

mw.ritaglio.corners= function () {

	inizializzaNewTemplate(); // nell'oggetto newTemplate vengono caricati i valori di default
	inizializzaTesto1();      // in testo si carica la selezione e si aggiorna newTemplate con eventuali valori caricati
	creaBox();                // si crea il box html sulla base di newTemplate 
	img.ratio=img.nWidth/$("#imgContainer").width(); 
    console.log(img.nWidth+" "+img.nHeight+" "+img.ratio);
	mw.ritaglio.preview();                // si allineano box, newtemplate, testo[1] e previewArea
    
}

// ridimensiona
mw.ritaglio.ridimensiona= function () {
	var nuovaWidth=prompt("Ridimensiona il valore attuale dell'immagine",$("#imgContainer").css("width"));
	// però adesso fallo..... :-)
	ratio=depix(nuovaWidth)/depix($("#imgContainer").css("width"));
	$("#imgContainer").css("width",depix($("#imgContainer").css("width"))*ratio+"px"); 
	
	$("#cornerTop").css("left",depix($("#cornerTop").css("left"))*ratio+"px"); $("#cornerTop").css("top",depix($("#cornerTop").css("top"))*ratio+"px"); $("#cornerBottom").css("top",depix($("#cornerBottom").css("top"))*ratio+"px"); $("#cornerBottom").css("left",depix($("#cornerBottom").css("left"))*ratio+"px"); 
	mw.ritaglio.preview();
	img.ratio=img.nWidth/$("#imgContainer").width(); 
    console.log(img.nWidth+" "+img.nHeight+" "+img.ratio);
	mw.ritaglio.redrawCropArea();
}

// uscita senza salvare

mw.ritaglio.exitCursors= function () {
   // delete newTemplate;
   // delete testo;
   $("#mainCropBox").remove();
}

mw.ritaglio.data= function () {
	testo[1]=$.trim($("#previewArea").val());
	scriviBox(testo.join(""));
    $(".mw-summary").val("inserito {" + "{ritaglio immagine}}");
	// delete newTemplate;
	// delete testo;
	$("#mainCropBox").remove();

}

//ridisegna il quadrato compreso tra i due angoli, in modo da tenerlo sempre allineato
mw.ritaglio.redrawCropArea =function () {
 
	$('#cropArea').css({
		top: 	$('#cornerTop').css('top'), 
		left: 	$('#cornerTop').css('left'),
		width:	( depix($('#cornerBottom').css('left')) - depix($('#cornerTop').css('left')) +20) + 'px',
		height:	( depix($('#cornerBottom').css('top')) - depix($('#cornerTop').css('top')) +20) + 'px' });
}


/* funzioni locali */
function inizializzaNewTemplate() {
	newTemplate=JSON.parse(
   '[{"0":"Ritaglio", "type":"", "file":"'+mw.config.get("wgTitle").split("/")[0]+
   '", "page":"'+mw.config.get("wgTitle").split("/")[1]+
   '", "thumb":"1024px", "width":"600px", "cclass":"", "float":"left", "display":"block", "margin-left":"1px", '+
   '"margin-right":"1px", "margin-top":"1em", "margin-bottom":"1em", "wHeight":"100px", "wWidth":"100px", '+
   '"wLeft":"20px", "wTop":"20px", "clear":"", "caption":"", "mleft":"", "indent":"", "tstyle":"", "talign":"", "alt":""}, '+
   '["0", "type", "file", "page", "thumb", "width", "cclass", "float", "display", "margin-left", "margin-right", "margin-top", '+
   '"margin-bottom", "wHeight", "wWidth", "wLeft", "wTop", "clear", "caption", "mleft", "indent", "tstyle", "talign", "alt"]]');
   }

function inizializzaTesto1() {
	testo=['','',''];
        if (mw.config.get("wgAction")=="edit" || mw.config.get("wgAction")=="submit") testo=selection();
	if (testo[1]==="") return false;
	testo[1] = testo[1].replace(/(\{\{FreedImg\/crop|\{\{Ritaglio|\{\{Crop)/gi, "{" + "{Ritaglio");
    var fi = find_stringa(testo[1], "{" + "{Ritaglio", "}}", 1, "{{");
    if (testo[1] !== fi) {testo[1]=""; return false;}
	
	// caricamento dati in newTemplate
	var tpl = parseTemplate("Ritaglio", fi);
   // aggiornamento di newTemplate con i valori letti
	for (i = 1; i < tpl[1].length; i += 1) {
      // nome del parametro
      parametro = tpl[1][i];
      newTemplate[0][parametro] = tpl[0][parametro];
     }
	 return true;
}



// trasforma una stringa tipo 200px in un numero 200
function depix (pixel) {
    return pixel.replace("px","")*1;
}
 
function leggiCorners() {
    var top = [cornerTop[0].offsetTop, cornerTop[0].offsetLeft];
    var bottom = [cornerBottom[0].offsetTop + 20, cornerBottom[0].offsetLeft + 20];
	newTemplate[0].wTop=cornerTop[0].offsetTop+"px";
	newTemplate[0].wLeft=cornerTop[0].offsetLeft+"px";
	newTemplate[0].wWidth=(bottom[1]-top[1])+"px";
	newTemplate[0].wHeight=(bottom[0]-top[0])+"px";
        newTemplate[0]["margin-right"]=(461 - bottom[1] + top[1]) / 2 + "px";
        newTemplate[0]["margin-left"]=(461 - bottom[1] + top[1]) / 2 + "px";
        newTemplate[0].width=$("#imgContainer").css("width"); // aggiungo per predisporre il redim

	}
	
function aggiornaTesto1(opzione) {
   var t = "";
   var tpl=newTemplate;
   if (typeof(opzione)==="undefined") opzione=2; // default centrato flottante
   // 1=centrato 2=centrato flottante 3=a destra 4= a sinistra
   if (opzione==1) {
      tpl[0].float="";
	  tpl[0]["margin-right"]="";
	  tpl[0]["margin-left"]="";
	  }
	if (opzione==2) {
		tpl[0].float="floating-center";
	}
	if (opzione==3) {
      tpl[0].float="right";
	  tpl[0]["margin-right"]="0em";
	  tpl[0]["margin-left"]="1em";
	  }
	if (opzione==4) {
      tpl[0].float="left";
	  tpl[0]["margin-right"]="1em";
	  tpl[0]["margin-left"]="0em";
	  }
   $.each(tpl[1], function(indice, valore) {
      if (indice !== 0 && $.trim(tpl[0][valore]) !== "") t += " | " + valore + " = " + tpl[0][valore] + "\n";
   });
   t = "{{" + tpl[0]["0"] + "\n" + t + "}}\n";
   t = t.replace(/\n\s\|\s\d*\s=\s/g, "\n | ");
   testo[1]=t;
}


function creaBox() {
   var imgSmall = $(".prp-page-image img").eq(0).clone();
   imgSmall[0].crossOrigin="Anonymous";
   // memorizzo larghezza e altezza naturali
   img.nWidth=imgSmall[0].naturalWidth;
   img.nHeight=imgSmall[0].naturalHeight;
   imgSmall.removeAttr("class").removeAttr("height").removeAttr("style").css("width", "inherit");
   var buttonTop=[depix(newTemplate[0].wTop),depix(newTemplate[0].wLeft)];
   var buttonBottom=[depix(newTemplate[0].wHeight)+buttonTop[0]-20,depix(newTemplate[0].wWidth)+buttonTop[1]-20];
   
   cornerTop = $(
      '<div id="cornerTop" style="border-left-width: 2px; border-left-style: solid; border-left-color: red; border-top-width: 2px; border-top-style: solid; border-top-color: red; position: absolute; z-index: 100; width: 20px; height: 20px; top: '+
	  buttonTop[0]    +	  'px; left: '   + 	  buttonTop[1]   +  'px;" >');
   cornerBottom = $(
      '<div id="cornerBottom" style="border-right-width: 2px; border-right-style: solid; border-right-color: red; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: red; position: absolute; z-index: 100; width: 20px; height: 20px; top: '+buttonBottom[0]+'px; left: '+buttonBottom[1]+'px;" class="ui-draggable"></div>');

//quadrato tratteggiato tra i due angoli
   cropArea = $('<div id="cropArea" style="position: absolute; border: 1px dashed black;"></div>');
   
   var mainCropBox = $(
      '<div id="mainCropBox" class="uls-menu" style="display: block; position: fixed; z-index: 9999; top: 0; left: 0; height: 100%; width: 100%; overflow: auto; border: 2px solid red; background-color:white; border-radius:7px; -webkit-border-radius:7px;">' +
      '<div class="row"><span id="mainCropBox-close" class="icon-close" onclick="exitCursors()"></span></div>'+
      '<table style="border-spacing: 0px;">' +
      '<tr>' +
      '<td>' +
      '<div style="height: 600px;overflow: auto; position:relative;">' +
      '<div id="imgContainer" style="width: '+newTemplate[0].width+';">' +
      '</div>' +
      '</div>' +
      '</td>' +
      '<td width="100%" valign="top">' +
	  '<button type="button" title="Centrato" onclick="mediaWiki.ritaglio.preview(1)" class="button"><small>Centrato</small></button>' +
	  '<button type="button" title="Centrato flottante" onclick="mediaWiki.ritaglio.preview(2)" class="button"><small>Centrato flottante</small></button>' +
	  '<button type="button" title="A destra" onclick="mediaWiki.ritaglio.preview(3)" class="button"><small>A destra</small></button>' +
	  '<button type="button" title="A sinistra" onclick="mediaWiki.ritaglio.preview(4)" class="button"><small>A sinistra</small></button>' + '<br/>' +
	  '<br /><button type="button" title="Ridimensiona" onclick="mediaWiki.ritaglio.ridimensiona()" class="button"><small>Ridimensiona</small></button>' +
       '<button type="button" title="Canvas" onclick="mediaWiki.ritaglio.canvas()" class="blue"><small>Canvas</small></button>' +
       '<button type="button" title="Chiudi e esporta i dati" onclick="mediaWiki.ritaglio.data()" class="button"><small>Esporta il template</small></button>' +
      '<button type="button" title="Chiudi senza esportare i dati" onclick="mediaWiki.ritaglio.exitCursors()" class="button"><small>Annulla</small></button>' +
      '<textarea rows="20" cols="30" style="margin-top: 2px; margin-bottom: 2px; height: 340px;" id="previewArea" wrap="hard"></textarea><br/>' +
      
      '</td>' +
      '</tr>' +
      '</table>' +
      '</div>');

   $("#mainCropBox").remove(); //rimuovi se per caso era gia' aperto
   $("body").append(mainCropBox);
   var td1 = $("#mainCropBox td div div").eq(0);
   td1.append(cornerTop).append(cornerBottom).append(cropArea).append(imgSmall);
   $("#cornerTop").draggable({
      containment: "parent",
      scroll: false,
      drag: function(event, ui) { mediaWiki.ritaglio.preview(); mediaWiki.ritaglio.redrawCropArea(); }
   });
   $("#cornerBottom").draggable({
      containment: "parent",
      scroll: false,
      drag: function(event, ui) { mediaWiki.ritaglio.preview(); mediaWiki.ritaglio.redrawCropArea(); }
   });
   
   mw.ritaglio.redrawCropArea();
}







function newRewriteTemplate(x) {
   var testo = "";
   $.each(x[1], function(indice, valore) {
      if (indice !== 0 && $.trim(x[0][valore]) !== "") testo += " | " + valore + " = " + x[0][valore] + "\n";
   });
   testo = "{{" + x[0]["0"] + "\n" + testo + "}}\n";
   testo = testo.replace(/\n\s\|\s\d*\s=\s/g, "\n | ");
   $("#previewArea").val(testo);
}
// nuova funzione per caricare da textarea un template Ritaglio o sinonimi, eseguirne il parsing, 
// aggiornare newTemplate e rappresentarlo in previewArea 

function newredim() {
   // analisi selezione
   
   testo[1] = testo[1].replace(/(\{\{FreedImg\/crop|\{\{Ritaglio|\{\{Crop)/gi, "{" + "{Ritaglio");
   if (testo[1]!== "") {
   
   }
   var fi = find_stringa(testo[1], "{" + "{Ritaglio", "}}", 1, "{{");
   if (testo[1] !== fi) {
      return "Errore: la selezione dev'essere vuota o contenere esattamente\nil template Ritaglio o sinonimo. Ripetere.";
   }
   // caricamento dati in newTemplate
   var tpl = parseTemplate("Ritaglio", fi);
   // aggiornamento di newTemplate con i valori letti
   for (i = 1; i < tpl[1].length; i += 1) {
      // nome del parametro
      parametro = tpl[1][i];
      newTemplate[0][parametro] = tpl[0][parametro];
   }
   // aggiornamento previewArea
   newRewriteTemplate(newTemplate);
   return testo;

}

// vecchia funzione per il ridimensionamento diretto del template in textarea

function redim() {
   var testo = selection();
   var fi = find_stringa(testo[1], "{" + "{FreedImg/crop", "}}", 1, "{{");
   var tpl = parseTemplate("FreedImg/crop", fi);
   var ratio = prompt("Ratio incremento/decremento (base 1):\n");
   tpl[0].width = redim1(tpl[0].width, ratio);
   tpl[0].wHeight = redim1(tpl[0].wHeight, ratio);
   tpl[0].wWidth = redim1(tpl[0].wWidth, ratio);
   tpl[0].wLeft = redim1(tpl[0].wLeft, ratio);
   tpl[0].wTop = redim1(tpl[0].wTop, ratio);
   var newTpl = rewriteTemplate(tpl);
   testo[1] = testo[1].replace(fi, newTpl);
   scriviBox(testo.join(""));
   $(".mw-summary").val("inserito {" + "{ritaglio immagine}}");
}

function redim1(testo, ratio) {
   var testoNew = (Math.round(testo.replace("px", "") * ratio)) + "px";
   return testoNew;
}


$(document).ready(function() {
   if (mw.config.get("wgCanonicalNamespace") === "Page") { //  && (mw.config.get("wgAction") === "edit" || mw.config.get("wgAction") === "submit")) {
      $("#p-tb ul").append($('<li id="t-crop"><a href="javascript:mediaWiki.ritaglio.corners()">Ritaglio delle immagini</a></li>'));
   }
});

if (mw.config.get("wgCanonicalNamespace")=="Page") {
if ( typeof $ != 'undefined' && typeof $.fn.wikiEditor != 'undefined' ) {$( function() {
    $( '#wpTextbox1' ).wikiEditor( 'addToToolbar',  {
      'section': 'advanced', 
      'group': 'format', 
      'tools': {'section': {
          label: 'Crop image', 
          type: 'button', 
          icon: '//upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Editcut.png/25px-Editcut.png', 
          action: {type: 'callback', 
            execute: function(context){mediaWiki.ritaglio.corners();} }}}});});}
}

})(mediaWiki);