MediaWiki:Gadget-corners.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) {
var newTemplate={};
var testo=[];
mw.ritaglio={};
// ex function corners()
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
preview(); // si allineano box, newtemplate, testo[1] e previewArea
}
// 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]);
}
// 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");
preview();
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();
}
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;
}
//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' });
}
function creaBox() {
var imgSmall = $(".prp-page-image img").eq(0).clone();
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: 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: '+newTemplate[0].width+';">' +
'</div>' +
'</div>' +
'</td>' +
'<td width="300px">' +
'<button type="button" title="Centrato" onclick="mediaWiki.ritaglio.preview(1)" class="blue"><small>Centrato</small></button>' +
'<button type="button" title="Centrato flottante" onclick="mediaWiki.ritaglio.preview(2)" class="blue"><small>Centrato flottante</small></button>' + '<br/>' +
'<button type="button" title="A destra" onclick="mediaWiki.ritaglio.preview(3)" class="blue"><small>A destra</small></button>' +
'<button type="button" title="A sinistra" onclick="mediaWiki.ritaglio.preview(4)" class="blue"><small>A sinistra</small></button>' + '<br/>' +
'<br /><button type="button" title="Ridimensiona" onclick="mediaWiki.ritaglio.ridimensiona()" class="blue"><small>Ridimensiona</small></button>' +
'<textarea rows="20" cols="30" style="margin-top: 2px; margin-bottom: 2px; height: 340px;" id="previewArea" wrap="hard"></textarea><br/>' +
'<button type="button" title="Chiudi e esporta i dati" onclick="mediaWiki.ritaglio.data()" class="blue"><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>' +
'</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(); }
});
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);