MediaWiki:Gadget-imagemap.js

(function (mw) { 
// copia di Gadget-corners.js in via di adattamento come generatore di imagemap

var testoImgmap='';
var newTag={};
mw.imagemap=function () {
	
	creaBoxImgMap();                // si crea il box html  
	preview();                // si allineano box,  testo e previewArea
}

function depix(pixel) {
    return pixel.replace("px","")*1;
}

mw.updateImagemap= function () {
	leggiCorners();
	var riga="rect "+newTag.absTop[1]+" "+newTag.absTop[0]+" "+newTag.absBottom[1]+" "+newTag.absBottom[0]+" [[#top|didascalia]]\n";
	testoImgmap=$("#previewArea").val().replace("desc none\n}}",riga+"desc none\n}}");
	$("#previewArea").val(testoImgmap);
}

 
 
// 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)];
	}
 


//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 creaBoxImgMap() {
   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="mediaWiki.updateImagemap()" class="blue"><small>Cattura</small></button>' +
	        '<button type="button" title="Chiudi e esporta i dati" onclick="mediaWiki.data()" class="blue"><small>Esporta il template</small></button>' +
      '<button type="button" title="Chiudi senza esportare i dati" onclick="mediaWiki.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(); }
   });
   testoImgmap="{{#tag:Imagemap|\n"+imgCode.replace(/\|/g,"{{!}}")+"\ndesc none\n}}";
   $("#previewArea").val(testoImgmap);
   redrawCropArea();
}
   
 

 
// uscita senza salvare
 
mw.exitCursors=function () {
   // delete newTemplate;
   // delete testo;
   $("#mainCropBox").remove();
}
 
mw.data= function () {
	testoImgmap=$.trim($("#previewArea").val());
	scriviBox(testoImgmap+"\n"+leggiBox());
    $(".mw-summary").val("inserito {{ritaglio immagine}}");
	// delete newTemplate;
	// delete testo;
	$("#mainCropBox").remove();
 
}
 
 
$(document).ready(function() {
   if (mw.config.get("wgCanonicalNamespace") === "Page" || mw.config.get("wgNamespaceNumber") === 2 || mw.config.get("wgPageName")==="Wikisource:Pagina_delle_prove") { //  && (mw.config.get("wgAction") === "edit" || mw.config.get("wgAction") === "submit")) {
      $("#p-tb ul").append($('<li id="t-crop"><a href="javascript:mediaWiki.imagemap()">Imagemap</a></li>'));
   }
});
})(mediaWiki);