Browse Source

First draft loading document and rendering the text sequentially

better-rectangles
Tissevert 8 months ago
commit
3ed43d7ee2
4 changed files with 84 additions and 0 deletions
  1. +1
    -0
      .gitignore
  2. +16
    -0
      index.html
  3. +50
    -0
      src/ALTO.js
  4. +17
    -0
      src/Main.js

+ 1
- 0
.gitignore View File

@ -0,0 +1 @@
main.js

+ 16
- 0
index.html View File

@ -0,0 +1,16 @@
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<title>Chaoui</title>
<script src="main.js"></script>
</head>
<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 type="number" min="0" max="1" step="0.01" value="0.5"/>
</div>
<div id="workzone">
</div>
</body>
</html>

+ 50
- 0
src/ALTO.js View File

@ -0,0 +1,50 @@
import * as Dom from UnitJS.Dom;
var workzone = document.getElementById('workzone');
return {
display: display,
load: load
};
function onNodes(nodeList, f) {
var result = [];
nodeList.forEach(function(node) {result.push(f(node));});
return result;
}
function display(ALTODoc) {
Dom.clear(workzone);
var textBlocksNodes = ALTODoc.querySelectorAll('Page PrintSpace TextBlock');
onNodes(textBlocksNodes, makeTextBlock).forEach(
function(e) {workzone.appendChild(e);}
);
}
function makeTextBlock(textBlock) {
var textLines = textBlock.querySelectorAll('TextLine');
return Dom.make('div', {class: "TextBlock"}, onNodes(textLines, makeTextLine));
}
function makeTextLine(textLine) {
var strings = textLine.querySelectorAll('String');
return Dom.make('p', {class: "TextLine"}, onNodes(strings, makeString));
}
function makeString(string) {
return Dom.make('span', {
class: "String",
textContent: string.getAttribute('CONTENT')
});
}
function load(file) {
return function(f) {
var fileReader = new FileReader();
fileReader.addEventListener('load', function() {
var domReader = new DOMParser();
f(domReader.parseFromString(fileReader.result, 'text/xml'));
})
fileReader.readAsText(file);
};
}

+ 17
- 0
src/Main.js View File

@ -0,0 +1,17 @@
import * as Async from UnitJS.Async;
import ALTO;
var filePicker = document.getElementById('filePicker');
var currentALTOFile = null;
filePicker.addEventListener('change', function() {
Async.run(
Async.bind(
ALTO.load(filePicker.files[0]),
Async.map(function(ALTOFile) {
currentALTOFile = ALTOFile;
ALTO.display(currentALTOFile);
})
)
);
});

Loading…
Cancel
Save