MediaWiki:Gadget-imagemap.js
Nota: dopo aver pubblicato, potrebbe essere necessario pulire la cache del proprio browser per vedere i cambiamenti.
- Firefox / Safari: tieni premuto il tasto delle maiuscole Shift e fai clic su Ricarica, oppure premi Ctrl-F5 o Ctrl-R (⌘-R su Mac)
- Google Chrome: premi Ctrl-Shift-R (⌘-Shift-R su un Mac)
- Internet Explorer / Edge: tieni premuto il tasto Ctrl e fai clic su Aggiorna, oppure premi Ctrl-F5
- Opera: premi Ctrl-F5.
(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);