MediaWiki:Gadget-hOCR.js

// Attiva un edit parola per parola
function spanP() {
	var hh=false;
        if ($("#ocreditor").length == 0) {
		var t = leggiBox();
		// se il testo è hOCR hh=true altrimenti hh=false
		var hh = (t.indexOf("ocrx_word") != -1 && t.indexOf("ocr_page") != -1);
		// salvo box edit 
		$("#outDiv").data("editbox", t);
		if (hh == false) {
			// splitto t nelle righe di testo
			t = t.split("\n");
			// azzero il contatore parole
			var nspan = 1;
			// per ciascuna riga .....
			for (i = 0; i < t.length; i += 1) {
				// splitto sugli spazi ottenendo la lista delle parole
				t[i] = t[i].split(" ");
				// per ogni parola della riga....
				for (j = 0; j < t[i].length; j += 1)
				// incapsulo la parola in uno span con id="parola"+contatore e aggiorno contatore
				{
					t[i][j] = "<span id='parola" + nspan + "'>" + t[i][j] + "</span>";
					nspan += 1;
				}
				// ricostruiscro la riga
				t[i] = t[i].join(" ");
			}
			// ricostruisco il testo aggiungendo alla fine un br + acapo e circoscrivo il tutto in un tag p
			t = "<p>" + t.join("<br />\n") + "</p>";
			// salvo provvisoriamente in editbox
			scriviBox(t);
		}
		// chiamo envir() che trasforma la pagina in editor html per parola
		envir(hh);

		// trucco insertTags perchè operi sul form
		insertTags = function (tagOpen, tagClose, sampleText) {
			var el = document.getElementById("spanForm");
			el.pre = el.value.substring(0, el.selectionStart);
			el.post = el.value.substring(el.selectionEnd);
			el.sel = el.value.substring(el.selectionStart, el.selectionEnd);
			el.value = el.pre + tagOpen + el.sel + tagClose + el.post;

		}
		// assegno a ogni span la chamata alla funzione test(this)
		// editor modifica l'html provvisorio nella divisione id="ocreditor"
		if (hh) {
			$(".ocrx_word").attr("onclick", "editaParola(this)");
		} else {
			$("#ocreditor span").attr("onclick", "editaParola(this)");
		}
	} else {
		t = $("#ocreditor br").remove();
		if ($(".ocrx_word").length>0) {
                      $("#spanActive").remove();
                      scriviBox($("#ocreditor").html());
                      }
		else {scriviBox($("#ocreditor").text());}
		$("#ocreditor").remove();
		$("#prp_header, #prp_footer, #wpTextbox1").css("display", "block");
		$("#wpSave, #wpPreview, #wpDiff").css("display", "inline");
		$("#wpSave").attr("accesskey","s");
		$("#wpPreview").attr("accesskey","p");
		// risistemo insertTags perchè operi su editbox
		insertTags = function (tagOpen, tagClose, sampleText) {
			var el = document.getElementById("wpTextbox1");
			el.pre = el.value.substring(0, el.selectionStart);
			el.post = el.value.substring(el.selectionEnd);
			el.sel = el.value.substring(el.selectionStart, el.selectionEnd);
			el.value = el.pre + tagOpen + el.sel + tagClose + el.post;

		}

	}

}
// funzione edit parola par parola
function editaParola(span) {
	//memorizzo posizione cursore nel testo
	var offset = window.getSelection().anchorOffset;
	//window.alert(sel.anchorNode.textContent);
	// se esiste un form salvo la parola, poi lo chiudo
	$("#spanForm").next().click();
	$("#spanActive").remove();
	// memorizzo l'id dello span attivo
	spanId = span.id;

	// evidenzio il testo con un bordo rosso punteggiato
	$(span).css("border", "1px dotted red");

	// se esiste per errore una div di edit la elimino
	//$("#spanActive").remove();

	// creo la div id="spanActive" di edit e la pongo sopra lo span attivo
	var box = $("<div id='spanActive'></div>").css({
		"position": "absolute",
		"border": "1px dotted blue",
		"background-color": "white",
		"z-index": "2000",
		"top": (span.offsetTop - document.getElementById("ocreditor").scrollTop - 30) + "px",
		"left": (span.offsetLeft - document.getElementById("ocreditor").scrollLeft) + "px"
	});

	// aggiungo box alla div principale di edit
	$("#ocreditor").append(box);

	// predispongo un elemento input e pongo la parola attiva come valore
	var inputField = $("<input id='spanForm' maxlength='100' size='20' name='span' />").attr("value", span.innerText);

	// predispongo il bottone salva e gli assegno il codice salvataggio edit + chiusura
	var buttonSalva = $("<button type='button' >Salva</button>").attr('onclick', '$("#"+spanId).text($("#spanForm").val());$("#spanActive").remove()');

	// predispongo il bottone esci e gli assegno il codice di chiusura
	var buttonEsci = $("<button type='button' '>Esci</button>").attr('onclick', '$("#spanActive").remove()');

	// affianco all'elemento id i due bottoni salva ed esci
	$("#spanActive").append(inputField).append(buttonSalva).append(buttonEsci);
	// porto il focus sul campo input
	$("#spanForm")[0].selectionStart = offset;
	$("#spanForm")[0].selectionEnd = offset;
        var bbox=$("#"+spanId).parents(".ocr_line").attr("title").split(" ");
        scroll(document.getElementById("visualizzaLinea"),bbox[1],bbox[2],bbox[3],bbox[4])
       
}

// estrae il testo da una pagina hORC, suddividendolo nei paragrafi separati da riga vuota

function paragraphRetrieve() {
	testo = [];
	$.each($(".ocr_par"), function (index, value) {
		testo.push($(this).text());
	});
	return testo.join("\n\n");
}

// aggiunge a tutti gli span .ocrx_word un onclick() che chiama una funzione test(this) (passa l'elemento DOM span)

function addOnclick() {
	$(".ocrx_word").attr("onclick", "test(this)");
}

// funzione scroll - sposta la visualizzazione della pagina nelle div di visualizzazione (solo hOCR edtor)
function scroll(element,x, y, x1, y1) {//element=document.getElementById("visualizzaLinea");
	
		larghIm = $("#visualizzaLinea img").width();
		larghOrig=/bbox \d+ \d+ \d+ \d+/.exec($(".ocr_page").attr("title"))[0].split(" ")[3];
	
	// adattamento coordinate
	var fattore = larghIm / larghOrig;
	x = Math.round(x * fattore);
	y = Math.round(y * fattore);
	x1 = Math.round(x1 * fattore);
	y1 = Math.round(y1 * fattore);
	// ridimensionamento div per adattarlo alla parola
	$(element).css("width", x1 - x);
	$(element).css("height", y1 - y);
	// spostamento dell'mmagine per centrare la div
	element.scrollLeft = x;
	element.scrollTop = y;
}

// prepara la finestra di editing per l'editor hOCR
function envir(hh) {
	// nasconde la toolbar (provvisorio)
	$("#wikiEditor-ui-toolbar").css("display", "none");

	// nasconde tutti i campi textarea 
	$("#prp_header, #prp_footer, #wpTextbox1").css("display", "none");

	// nasconde il bottone salva e scollega Alt-S
	$("#wpSave, #wpPreview, #wpDiff").removeAttr("accesskey").css("display", "none");


	// crea una div contentore
	$("#pr_container").parent().css("width", "500px");

	// appende una div id="ocreditor" nella colonna a sinistra
	($("<div id='ocreditor' style='width:100%; height:700px; overflow:auto;'></div>")).insertBefore($("#prp_header"))

	// modifico la visualizzazione immagine
	$("#pr_container").parent().css("width", "100%").css("height", "700px");
	$("#pr_container").css("width", "100%").css("height", "100%");

	// carica nel contenitore toolbox trasformato in html
	$(leggiBox()).appendTo("#ocreditor");

	// parte di codice hOCR-specifica
	$(".ocr_line").append($("<br>"));
	// cattura immagine pagina
	var immPagina = $("#ProofReadImage")[0].src;
	//creazione div linea
	$("<div id='visualizzaLinea'></div>").css({
		"position": "fixed",
		"z-index": "1500",
		"top": "0",
		"left": "0",
		"height": "70px",
		"background-color": "white",
		"border": "1px dotted red",
		"overflow": "hidden"
	}).appendTo($("body"));
        if (hh==false) { $("#visualizzaLinea").resizable().draggable().css("overflow","auto").css("height","60px");}
	/* // creazione div parola 
	$("<div id='visualizzaParola'></div>").css({
		"position": "fixed",
		"z-index": "1500",
		"top": "30",
		"left": "0",
		"width": "10%",
		"height": "70px",
		"background-color": "white",
		"border": "1px dotted red",
		"overflow": "auto"
	}).appendTo($("body"));
        */
	// aggiungo una copia dell'immagine ProogReadImage a ciascuna div
	$("#visualizzaLinea").append($("<img />").attr("src", $("#ProofReadImage")[0].src));
	// $("#visualizzaParola").append($("<img />").attr("src", $("#ProofReadImage")[0].src));
}

function hocr2djvu() {
   var x=leggiBox()
     .replace(/\n[ ]+/g ,"\n")
     .replace(/ \n/g,"\n")
     .replace(/\n/g,"")
     .replace(/\<\/p\>/g, "</p>\n\n")
     .replace(/\<\/span\>\<span class=['"]ocr_line['"]/g,"</span>\n<span class='ocr_line'");
   scriviBox($.trim($(x).text()));
}
// creo i due pulsanti hOCR e spanP (disattivo per ora hOCR)
// $(document).ready(button("hocr2djvu", "hocr2djvu"));
$(document).ready(function() {if ((mw.config.get("wgAction")=="edit" || mw.config.get("wgAction")=="submit") && mw.config.get("wgCanonicalNamespace")=="Pagina") $("#p-namespaces ul").append($('<li id="spanP"><span><a href="#" title="Chiama/chiude editor spanP"  onclick="javascript:spanP()">spanP</a></span></li>'));});