MediaWiki:Gadget-RetallaImatges.js

/* 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);