MediaWiki:Gadget-hOCR.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.
// 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>'));});