Utente:Ricordisamoa/cornersAlpha.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)
- Edge: tieni premuto il tasto Ctrl e fai clic su Aggiorna, oppure premi Ctrl-F5.
// 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);
}
/* 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":"'+wgTitle.split("/")[0]+
'", "page":"'+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 (wgAction=="edit" || 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 (wgCanonicalNamespace === "Page") { // && (wgAction === "edit" || wgAction === "submit")) {
$("#p-tb ul").append($('<li id="t-crop"><a href="javascript:mediaWiki.ritaglio.corners()">Ritaglio delle immagini</a></li>'));
}
});
if (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);