User:Alex brollo/imagemap.js

// copia di Gadget-corners.js in via di adattamento come generatore di imagemap
// Original file: [[:it:MediaWiki:Gadget-imagemap.js]] by User:Alex brollo
newTag={};
testo='';
 
function imgmap() {
 
	creaBox();                // si crea il box html  
	preview();                // si allineano box,  testo e previewArea
}
 
 
function updateImagemap() {
	leggiCorners();
	var riga="rect "+newTag.absTop[1]+" "+newTag.absTop[0]+" "+newTag.absBottom[1]+" "+newTag.absBottom[0]+" [[#top|didascalia]]\n";
	testo=$("#previewArea").val().replace("</imagemap>",riga+"</imagemap>");
	$("#previewArea").val(testo);
}
 
 
 
// legge i valori dei due corners (leggiCorners);  infine aggiorna previewArea
function preview(opzione) {
    leggiCorners();
 
}
 
 
function leggiCorners() {
    newTag.top = [cornerTop[0].offsetTop, cornerTop[0].offsetLeft];
    newTag.bottom = [cornerBottom[0].offsetTop + 20, cornerBottom[0].offsetLeft + 20];
	newTag.fattore=$("#imgContainer img").data("file-width")*1.0/$("#imgContainer img").width();
    newTag.absTop=[Math.round(newTag.top[0]*newTag.fattore),Math.round(newTag.top[1]*newTag.fattore)];
    newTag.absBottom=[Math.round(newTag.bottom[0]*newTag.fattore),Math.round(newTag.bottom[1]*newTag.fattore)];
	}
 
function depix(pixel) {
    return pixel.replace("px","")*1;
}
 
//ridisegna il quadrato compreso tra i due angoli, in modo da tenerlo sempre allineato
function redrawCropArea() {
 
	$('#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' });
}
function creaBox() {
   imgOrig=$(".pagetext img").eq(0);
   imgSmall = imgOrig.clone();
   var imgCode="File:"+decodeURIComponent(imgOrig.attr("src").split("/")[8]).replace(/_/g," ")+"|"+"center"+"|"+imgOrig.width()+"px";
 
   imgSmall.removeAttr("class").removeAttr("height").removeAttr("style").css("width", "inherit");
   var buttonTop=[0,0];
   var buttonBottom=[100,100];
 
   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: 0px; left: 200px; height: 600px; width: 900px; 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:600px">' +
      '</div>' +
      '</div>' +
      '</td>' +
      '<td width="300px">' +
	  '<button type="button" title="Cattura" onclick="updateImagemap()" class="blue"><small>Cattura</small></button>' +
	        '<button type="button" title="Chiudi e esporta i dati" onclick="data()" class="blue"><small>Esporta il template</small></button>' +
      '<button type="button" title="Chiudi senza esportare i dati" onclick="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) { preview(); redrawCropArea(); }
   });
   $("#cornerBottom").draggable({
      containment: "parent",
      scroll: false,
      drag: function(event, ui) { preview(); redrawCropArea(); }
   });
   testo="<imagemap>\n"+imgCode+"\n</imagemap>";
   $("#previewArea").val(testo);
   redrawCropArea();
}
 
// ridimensiona
function ridimensiona() {
	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"); 
	preview();
	redrawCropArea();
}
 
// uscita senza salvare
 
function exitCursors() {

   $("#mainCropBox").remove();
}
 
function data() {
	testo=$.trim($("#previewArea").val());
	scriviBox(testo.join(""));
    $(".mw-summary").val("inserito {{ritaglio immagine}}");
	$("#mainCropBox").remove();
 
}
 
mw.loader.using( 'jquery.ui', function () {
 $(document).ready(function() {
   if (wgCanonicalNamespace === "Page") { //  && (wgAction === "edit" || wgAction === "submit")) {
      $("#p-tb ul").append($('<li id="t-crop"><a href="javascript:imgmap()">Imagemap</a></li>'));
   }
});
} );