MediaWiki:Gadget-RetallaImatges.js
Nota: Després de publicar, possiblement necessitareu refrescar la memòria cau del vostre navegador per a veure'n els canvis.
- Firefox / Safari: Premeu Majús i alhora cliqueu el botó Actualitzar, o pressioneu Ctrl+F5 o Ctrl+R (⌘+R en un Mac)
- Google Chrome: Premeu Ctrl+Majús+R (⌘+Shift+R en un Mac)
- Internet Explorer / Edge: Premeu Ctrl i alhora cliqueu a Actualitza o pressioneu Ctrl+F5
- Opera: Premeu Ctrl-F5.
/* Adaptat de it:MediaWiki:Gadget-corners.js i altres javscripts de Alex brollo */
mw.loader.load("jquery.ui");
(function (mw) {
newTemplate={};
testo=[];
mw.ritaglio={};
function selection(area) {
if (area == undefined) {
if (mw.config.get("wgCanonicalNamespace") === "Page") area = 1;
else area = 0;
}
var txtarea = $('textarea')[area];
var txt = $(txtarea).val();
var s = [];
s[0] = txt.substring(0, txtarea.selectionStart);
s[1] = txt.substring(txtarea.selectionStart, txtarea.selectionEnd);
s[2] = txt.substring(txtarea.selectionEnd);
if (s[1].lastIndexOf(" ") == s[1].length - 1) {
s[1] = s[1].substring(0, s[1].length - 1);
s[2] = " " + s[2];
}
return s;
}
function scriviBox(testo, area, ss, se) {
if (area === undefined || area === "") {
if (mw.config.get("wgCanonicalNamespace") === "Page") {
area = 1;
} else {
area = 0;
}
}
$('textarea')[area].value = testo;
console.log("area:", area);
if (ss != undefined && se != undefined) {
$('textarea')[area].selectionStart = ss;
$('textarea')[area].selectionEnd = se;
}
}
// legge i valori dei due corners (leggiCorners); aggiorna newTemplate; poi aggiorna testo[1]; infine aggiorna previewArea
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"]=(421 - bottom[1] + top[1]) / 2 + "px";
newTemplate[0]["margin-left"]=(421 - 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==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;
}
mw.ritaglio.preview= function (opzione) {
leggiCorners();
aggiornaTesto1(opzione);
$("#previewArea").val(testo[1]);
}
//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
}
function inizializzaNewTemplate() {
newTemplate=JSON.parse(
'[{"0":"RetallaImatge", "type":"", "file":"'+mw.config.get("wgTitle").split("/")[0]+
'", "page":"'+mw.config.get("wgTitle").split("/")[1]+
'", "thumb":"600px", "width":"600px", "cclass":"", "float":"left", "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", "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(/(\{\{RetallaImatge|\{\{Ritaglio|\{\{Crop)/gi, "{{RetallaImatge");
var fi = find_stringa(testo[1], "{{RetallaImatge", "}}", 1, "{{");
if (testo[1] !== fi) {testo[1]=""; return false;}
// caricamento dati in newTemplate
var tpl = parseTemplate("RetallaImatge", 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;
}
//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() {
var imgSmall = $(".prp-page-image img").eq(0).clone();
imgSmall.removeAttr("class").removeAttr("height").removeAttr("style").css("width", "inherit");
//imgSmall.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; ">' +
'<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="Centrat" onclick="mediaWiki.ritaglio.preview(1)" class="blue"><small>Centrat</small></button>' +
'<button type="button" title="Centrat flotant" onclick="mediaWiki.ritaglio.preview(2)" class="blue"><small>Centrat flotant</small></button>' + '<br/>' +
'<button type="button" title="Dreta" onclick="mediaWiki.ritaglio.preview(3)" class="blue"><small>Dreta</small></button>' +
'<button type="button" title="Esquerra" onclick="mediaWiki.ritaglio.preview(4)" class="blue"><small>Esquerra</small></button>' + '<br/>' +
'<br /><button type="button" title="Redimensiona" onclick="mediaWiki.ritaglio.ridimensiona()" class="blue"><small>Redimensiona</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="Afegeix el codi a la caixa d´edició" onclick="mediaWiki.ritaglio.data()" class="blue"><small>Insereix plantilla</small></button>' +
'<button type="button" title="Cancel·la" onclick="mediaWiki.ritaglio.exitCursors()" class="button"><small>Cancel·la</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(); redrawCropArea(); }
});
$("#cornerBottom").draggable({
containment: "parent",
scroll: false,
drag: function(event, ui) { mediaWiki.ritaglio.preview(); redrawCropArea(); }
});
redrawCropArea();
}
// ridimensiona
//function ridimensiona() {
mw.ritaglio.ridimensiona= function () {
var nuovaWidth=prompt("Especifica les noves dimensions de la imatge",$("#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() {
mw.ritaglio.exitCursors= function () {
$("#mainCropBox").remove();
}
//function data() {
mw.ritaglio.data= function () {
testo[1]=$.trim($("#previewArea").val());
scriviBox(testo.join(""));
// delete newTemplate;
// delete testo;
$("#mainCropBox").remove();
}
// vecchia funzione per il ridimensionamento diretto del template in textarea
function redim() {
var testo = selection();
var fi = find_stringa(testo[1], "{{RetallaImatge", "}}", 1, "{{");
var tpl = parseTemplate("RetallaImatge", 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(""));
}
function redim1(testo, ratio) {
var testo = (Math.round(testo.replace("px", "") * ratio)) + "px";
return testo;
}
$(document).ready(function() {
if (mw.config.get("wgCanonicalNamespace") === "Page") { // && (wgAction === "edit" || wgAction === "submit")) {
$("#p-tb ul").append($('<li id="t-crop"><a href="javascript:mediaWiki.ritaglio.corners()">Retalla imatge</a></li>'));
}
});
})(mediaWiki);