Browse Source

Refactor code to avoid the huge unmaintainable GUI clutter in Main

better-rectangles
Tissevert 8 months ago
parent
commit
45ccbc0374
13 changed files with 207 additions and 142 deletions
  1. +1
    -1
      gui.css
  2. +1
    -1
      index.html
  3. +13
    -0
      src/File.js
  4. +21
    -0
      src/GUI.js
  5. +4
    -107
      src/Main.js
  6. +9
    -0
      src/Quality.js
  7. +35
    -0
      src/Scoria.js
  8. +11
    -0
      src/Toolbar/EditMode.js
  9. +48
    -0
      src/Toolbar/Page.js
  10. +31
    -0
      src/View.js
  11. +20
    -0
      src/XML.js
  12. +13
    -33
      src/XML/ALTO.js
  13. +0
    -0
      src/XML/ALTO/Element.js

+ 1
- 1
gui.css View File

@ -16,7 +16,7 @@ html, body {
width: 3.5em;
}
#exportDeletions {
#saveScoria {
cursor: pointer;
}


+ 1
- 1
index.html View File

@ -22,7 +22,7 @@
<input id="editMode" type="checkbox" name="editMode"/><label for="editMode">Éditer</label>
</span>
<span>
<a download="scories.csv" id="exportDeletions" title="Exporter la liste des suppressions">💾</a>
<a download="scories.csv" id="saveScoria" title="Exporter la liste des suppressions">💾</a>
</span>
</div>
<div id="workzone">


+ 13
- 0
src/File.js View File

@ -0,0 +1,13 @@
return {
load: load
};
function load(file) {
return function(f) {
var fileReader = new FileReader();
fileReader.addEventListener('load', function() {
f(fileReader.result);
})
fileReader.readAsText(file);
};
}

+ 21
- 0
src/GUI.js View File

@ -0,0 +1,21 @@
import printSpace from XML.ALTO.Element;
var workzone = document.getElementById('workzone');
workzone.style.width = printSpace.pxWidth + 'px';
var inputFiles = document.getElementById('inputFiles');
var fileNumber = document.getElementById('fileNumber');
var fileName = document.getElementById('fileName');
var wcThreshold = document.getElementById('wcThreshold');
var editMode = document.getElementById('editMode');
var saveScoria = document.getElementById('saveScoria');
return {
editMode: editMode,
fileName: fileName,
fileNumber: fileNumber,
inputFiles: inputFiles,
saveScoria: saveScoria,
wcThreshold: wcThreshold,
workzone: workzone
};

+ 4
- 107
src/Main.js View File

@ -1,108 +1,5 @@
import * as Element from ALTO.Element;
import * as Async from UnitJS.Async;
import ALTO;
import * as EditMode from Toolbar.EditMode;
import * as Page from Toolbar.Page;
var workzone = document.getElementById('workzone');
workzone.style.width = Element.printSpace.pxWidth + 'px';
var inputFiles = document.getElementById('inputFiles');
var fileNumber = document.getElementById('fileNumber');
var fileName = document.getElementById('fileName');
var wcThreshold = document.getElementById('wcThreshold');
var editMode = document.getElementById('editMode');
var exportDeletions = document.getElementById('exportDeletions');
var currentALTOFile = null;
var deletedWords = {};
inputFiles.addEventListener('change', function() {
fileNumber.value = 0;
syncPageNumber();
updatePageNumber();
loadCurrentFile();
});
wcThreshold.addEventListener('change', refresh);
fileNumber.addEventListener('change', updatePageNumber);
editMode.addEventListener('change', syncEditMode);
exportDeletions.addEventListener('click', doExportDeletions);
window.addEventListener('keydown', function(e) {
switch(e.keyCode) {
case 0x25: moveFile(-1); break;
case 0x27: moveFile(+1); break;
}
});
syncEditMode();
syncPageNumber();
function loadCurrentFile() {
Async.run(
Async.bind(
ALTO.load(inputFiles.files[fileNumber.value]),
Async.map(function(ALTOFile) {
currentALTOFile = ALTOFile;
refresh();
})
)
);
}
function refresh() {
ALTO.display(currentALTOFile, {
workzone: workzone,
deletedWords: deletedWords,
qualityThreshold: wcThreshold.value,
callbacks: {
wordEdit: wordEdit
}
});
}
function syncEditMode() {
workzone.className = editMode.checked ? "editMode" : "";
}
function syncPageNumber() {
fileNumber.max = inputFiles.files.length-1;
fileName.textContent = inputFiles.files[fileNumber.value].name;
}
function updatePageNumber() {
if(fileNumber.checkValidity()) {
gotoFile(fileNumber.value);
}
}
function moveFile(delta) {
var n = 1*fileNumber.value + delta;
if(n >= fileNumber.min && n <= fileNumber.max) {
fileNumber.value = n;
gotoFile(n);
}
}
function gotoFile(n) {
fileName.textContent = inputFiles.files[n].name;
loadCurrentFile();
}
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);
}
}
function doExportDeletions() {
var column = ['ID'];
for(var id in deletedWords) {
column.push(id);
}
var data = encodeURIComponent(column.join('\n'));
exportDeletions.href = 'data:text/csv,' + data;
}
EditMode.sync();
Page.syncNumber();

+ 9
- 0
src/Quality.js View File

@ -0,0 +1,9 @@
import wcThreshold from GUI;
return {
isLow: isLow
};
function isLow(quality) {
return quality < wcThreshold.value;
}

+ 35
- 0
src/Scoria.js View File

@ -0,0 +1,35 @@
import saveScoria from GUI;
saveScoria.addEventListener('click', save);
var scoriae = {};
return {
isScoria: isScoria,
save: save,
toggleWord: toggleWord
};
function isScoria(wordId) {
return scoriae[wordId] || false;
}
function toggleWord(e) {
if(editMode.checked) {
var wordId = e.target.id;
if(scoriae[wordId]) {
delete scoriae[wordId];
} else {
scoriae[wordId] = true;
}
e.target.classList.toggle('deleted');
}
}
function save() {
var column = ['ID'];
for(var id in scoriae) {
column.push(id);
}
var data = encodeURIComponent(column.join('\n'));
saveScoria.href = 'data:text/csv,' + data;
}

+ 11
- 0
src/Toolbar/EditMode.js View File

@ -0,0 +1,11 @@
import {editMode, workzone} from GUI;
editMode.addEventListener('change', sync);
return {
sync: sync
};
function sync() {
workzone.className = editMode.checked ? "editMode" : "";
}

+ 48
- 0
src/Toolbar/Page.js View File

@ -0,0 +1,48 @@
import * as GUI from GUI;
import View;
GUI.inputFiles.addEventListener('change', function() {
GUI.fileNumber.value = 0;
syncNumber();
updateNumber();
View.loadCurrentFile();
});
GUI.fileNumber.addEventListener('change', updateNumber);
window.addEventListener('keydown', function(e) {
switch(e.keyCode) {
case 0x25: moveFile(-1); break;
case 0x27: moveFile(+1); break;
}
});
return {
syncNumber: syncNumber
}
function syncNumber() {
if(GUI.inputFiles.files.length > 0) {
GUI.fileNumber.max = GUI.inputFiles.files.length-1;
GUI.fileName.textContent = GUI.inputFiles.files[GUI.fileNumber.value].name;
} else {
GUI.fileNumber.max = 0;
}
}
function updateNumber() {
if(GUI.fileNumber.checkValidity()) {
gotoFile(GUI.fileNumber.value);
}
}
function moveFile(delta) {
var n = 1*GUI.fileNumber.value + delta;
if(n >= GUI.fileNumber.min && n <= GUI.fileNumber.max) {
GUI.fileNumber.value = n;
gotoFile(n);
}
}
function gotoFile(n) {
GUI.fileName.textContent = GUI.inputFiles.files[n].name;
View.loadCurrentFile();
}

+ 31
- 0
src/View.js View File

@ -0,0 +1,31 @@
import * as ALTO from XML.ALTO;
import File;
import GUI;
import * as Async from UnitJS.Async;
import XML;
var currentALTOFile = null;
wcThreshold.addEventListener('change', refresh);
return {
loadCurrentFile: loadCurrentFile
};
function loadCurrentFile() {
Async.run(
Async.bind(
File.load(inputFiles.files[GUI.fileNumber.value]),
Async.map(XML.parse),
Async.map(function(ALTOFile) {
currentALTOFile = ALTOFile;
refresh();
})
)
);
}
function refresh() {
if(currentALTOFile != undefined) {
ALTO.display(currentALTOFile);
}
}

+ 20
- 0
src/XML.js View File

@ -0,0 +1,20 @@
return {
appendTo: appendTo,
onNodes: onNodes,
parse: parse
}
function appendTo(element) {
return function(e) {element.appendChild(e);};
}
function onNodes(nodeList, f) {
var result = [];
nodeList.forEach(function(node) {result.push(f(node));});
return result;
}
function parse(input) {
var domReader = new DOMParser();
return domReader.parseFromString(input, 'text/xml');
}

src/ALTO.js → src/XML/ALTO.js View File

@ -1,34 +1,25 @@
import * as Element from ALTO.Element;
import * as Element from XML.ALTO.Element;
import {isScoria, toggleWord} from Scoria;
import Quality;
import workzone from GUI;
import * as Dom from UnitJS.Dom;
import {appendTo, onNodes} from XML;
return {
display: display,
load: load
};
function onNodes(nodeList, f) {
var result = [];
nodeList.forEach(function(node) {result.push(f(node));});
return result;
}
function appendTo(element) {
return function(e) {element.appendChild(e);};
}
function ifPush(test, elem) {
return function(t) {
return test ? t.concat(elem) : t;
}
return function(t) {return test ? t.concat(elem) : t;};
}
function display(ALTODoc, gui) {
function display(ALTODoc) {
var printSpace = Element.make(ALTODoc.querySelector('Page PrintSpace'));
Element.setPrintSpace(printSpace);
gui.workzone.style.height = Element.printSpace.pxHeight + 'px';
Dom.clear(gui.workzone);
workzone.style.height = Element.printSpace.pxHeight + 'px';
Dom.clear(workzone);
onNodes(printSpace.get('TextBlock'), makeTextBlock(printSpace))
.forEach(appendTo(gui.workzone));
.forEach(appendTo(workzone));
function makeTextBlock(parentElement) {
return function(textBlock) {
@ -59,10 +50,10 @@ function display(ALTODoc, gui) {
var wc = string.getAttribute('WC');
var id = string.getAttribute('ID');
var dom = Dom.make('span', {
class: ifPush(wc < gui.qualityThreshold, "lowQuality")(
ifPush(gui.deletedWords[id], "deleted")(["String"])
class: ifPush(Quality.isLow(wc), "lowQuality")(
ifPush(isScoria(id), "deleted")(["String"])
),
onClick: gui.callbacks.wordEdit,
onClick: toggleWord,
id: id,
textContent: string.getAttribute('CONTENT')
});
@ -70,14 +61,3 @@ function display(ALTODoc, gui) {
};
}
}
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);
};
}

src/ALTO/Element.js → src/XML/ALTO/Element.js View File


Loading…
Cancel
Save