Implement manual word curation

8 months ago · c8a1b6b96e
--- a/gui.css
+++ b/gui.css
@ -8,6 +8,10 @@ html, body {
 	border-bottom: 1px solid #ccc;
 }

 #thresholdInput {
 	width: 3.5em;
 }

 #workzone {
 	padding: 1em;
 	background: #fffdf5;
@ -18,15 +22,28 @@ html, body {
 	transform: translateX(-50%);
 }

 #workzone.editMode .String {
 	cursor: crosshair;
 }

 #workzone.editMode .String.deleted {
 	cursor: not-allowed;
 }

 #workzone * {
 	position: absolute;
 }

 #workzone p {
 	font-size: 0.99em;
 	font-size: 0.9em;
 	margin: 0;
 }

 .String.lowQuality {
 	background: #a4ddfd;
 }

 .String.deleted {
 	text-decoration: line-through;
 	opacity: 0.5;
 }
--- a/index.html
+++ b/index.html
@ -9,7 +9,8 @@
 	<body>
 		<div id="toolbar">
 			<label for="inputFile">Charger un fichier ALTO</label><input id="filePicker" type="file" name="inputFile" accept="text/xml,.xml"/>
 			<label for="wcThreshold">Seuil de qualité</label><input id="thresholdInput" type="number" min="0" max="1" step="0.01" value="0.5"/>
 			<label for="wcThreshold">Seuil de qualité</label><input id="thresholdInput" name="wcThreshold" type="number" min="0" max="1" step="0.01" value="0.5"/>
 			<input id="editMode" type="checkbox" name="setEditMode"/><label for="setEditMode">Éditer</label>
 		</div>
 		<div id="workzone">
 		</div>
--- a/src/ALTO.js
+++ b/src/ALTO.js
@ -1,8 +1,6 @@
 import * as Element from ALTO.Element;
 import * as Dom from UnitJS.Dom;

 var workzone = document.getElementById('workzone');
 workzone.style.width = Element.printSpace.pxWidth + 'px';

 return {
 	display: display,
@ -19,13 +17,19 @@ function appendTo(element) {
 	return function(e) {element.appendChild(e);};
 }

 function display(ALTODoc, thresholdInput) {
 function ifPush(test, elem) {
 	return function(t) {
 		return test ? t.concat(elem) : t;
 	}
 }

 function display(ALTODoc, gui) {
 	var printSpace = Element.make(ALTODoc.querySelector('Page PrintSpace'));
 	Element.setPrintSpace(printSpace);
 	workzone.style.height = Element.printSpace.pxHeight + 'px';
 	Dom.clear(workzone);
 	gui.workzone.style.height = Element.printSpace.pxHeight + 'px';
 	Dom.clear(gui.workzone);
 	onNodes(printSpace.get('TextBlock'), makeTextBlock(printSpace))
 		.forEach(appendTo(workzone));
 		.forEach(appendTo(gui.workzone));

 	function makeTextBlock(parentElement) {
 		return function(textBlock) {
@ -54,9 +58,13 @@ function display(ALTODoc, thresholdInput) {
 	function makeString(parentElement) {
 		return function(string) {
 			var wc = string.getAttribute('WC');
 			var id = string.getAttribute('ID');
 			var dom = Dom.make('span', {
 				class: (wc < thresholdInput.value ? ["lowQuality"] : []).concat("String"),
 				id: string.getAttribute('ID'),
 				class: ifPush(wc < gui.qualityThreshold, "lowQuality")(
 					ifPush(gui.deletedWords[id], "deleted")(["String"])
 				),
 				onClick: gui.callbacks.wordEdit,
 				id: id,
 				textContent: string.getAttribute('CONTENT')
 			});
 			return Element.make(string, dom, parentElement).dom();
--- a/src/Main.js
+++ b/src/Main.js
@ -1,9 +1,14 @@
 import * as Element from ALTO.Element;
 import * as Async from UnitJS.Async;
 import ALTO;

 var workzone = document.getElementById('workzone');
 workzone.style.width = Element.printSpace.pxWidth + 'px';
 var filePicker = document.getElementById('filePicker');
 var thresholdInput = document.getElementById('thresholdInput');
 var editMode = document.getElementById('editMode');
 var currentALTOFile = null;
 var deletedWords = {};

 filePicker.addEventListener('change', function() {
 	Async.run(
@ -18,7 +23,33 @@ filePicker.addEventListener('change', function() {
 });

 thresholdInput.addEventListener('change', refresh);
 syncEditMode();
 editMode.addEventListener('change', syncEditMode);

 function refresh() {
 	ALTO.display(currentALTOFile, thresholdInput);
 	ALTO.display(currentALTOFile, {
 		workzone: workzone,
 		deletedWords: deletedWords,
 		qualityThreshold: thresholdInput.value,
 		callbacks: {
 			wordEdit: wordEdit
 		}
 	});
 }

 function syncEditMode() {
 	workzone.className = editMode.checked ? "editMode" : "";
 }

 function wordEdit(e) {
 	if(editMode.checked) {
 		var wordId = e.target.id;
 		if(deletedWords[wordId]) {
 			delete deletedWords[wordId];
 		} else {
 			deletedWords[wordId] = true;
 		}
 		e.target.classList.toggle('deleted');
 		console.log(deletedWords);
 	}
 }