File size: 4,814 Bytes
92da9af |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
"use strict";
const ReferenceInput = document.querySelector('#reference');
const PredictionInput = document.querySelector('#prediction');
const ReferenceMaxLengthCount = document.querySelector("#counter_ref");
const PredictionMaxLengthCount = document.querySelector("#counter_pred");
const areaNormalShadow = "0 0 10px var(--white-main)";
const areaSuccessShadow = "0 0 10px green";
const areaErrorShadow = "0 0 10px red";
const areaPlaceHolderMsgError = "Only raw text format (.txt) are valid, please retry.";
const referencePlaceHolder = "Drag & Drop or Paste the expected transcription...";
const predictionPlaceHolder = "Drag & Drop or Paste the transcription produced by the model you wish to evaluate...";
const LIMIT_CHAR_SIZE = 7000;
// Global loop to add event listener on inputs (textarea)
[ReferenceInput, PredictionInput].forEach(item => {
item.addEventListener('drop', event => {
dropHandler(event);
});
item.addEventListener('keydown', function () {
limitText(item, chooseCorectCounter(item.id), LIMIT_CHAR_SIZE);
})
item.addEventListener('keyup', function () {
limitText(item, chooseCorectCounter(item.id), LIMIT_CHAR_SIZE);
})
item.addEventListener('input', function () {
AreaStateShadow(item, 'normal');
AreaPlaceHolderState(item, item.id, 'normal')
if (item.value !== "") {
AreaStateShadow(item, 'success');
}
});
})
function chooseCorectCounter(id){
return (id === "reference") ? ReferenceMaxLengthCount : PredictionMaxLengthCount
}
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
limitCount.value = limitNum - limitField.value.length;
} else {
limitCount.value = limitNum - limitField.value.length;
}
}
/**
* Change border shadow color in relation to input
* @param {element} element Input element where border shadow change
* @param {string} type Output level desire
* @return {undefined}
*/
function AreaStateShadow(element, type) {
element.style["boxShadow"] = areaNormalShadow;
if (type === 'error') {
element.style["boxShadow"] = areaErrorShadow;
}
if (type === 'success') {
element.style["boxShadow"] = areaSuccessShadow;
}
}
/**
* Change placeholder message in input in relation to input
* @param {element} element Input element where placeholder change
* @param {string} id ID of input element (textarea)
* @param {string} type Output level desire
* @return {undefined}
*/
function AreaPlaceHolderState(element, id, type = 'normal') {
if (type === 'normal') {
if (id === 'reference') {
element.placeholder = referencePlaceHolder;
}
if (id === 'prediction') {
element.placeholder = predictionPlaceHolder;
}
}
if (type === 'error') {
element.value = '';
element.placeholder = areaPlaceHolderMsgError;
}
}
/**
* Handle text file drag and drop on text area and set said text area with file content
* @param {Event} event Handle drag and drop event
* @return {undefined}
*/
function dropHandler(event) {
// Prevent file from being opened by web browser (default behavior)
event.preventDefault();
// Get drop zone id
let dropId = event.target.id;
let textArea = document.getElementById(dropId);
// Initiating new FileReader object
const reader = new FileReader();
// Get content information from input event
let dropEvent = event.dataTransfer.items;
let dropEventMimetype = dropEvent[0].type;
let dropEventFormat = dropEvent[0].kind;
// Create EventListener for setting text area value
reader.addEventListener("load", (e) => {
// Set text area value with text file content
// Reinitialise text area when a new file is dropped
// TODO: When text file ends with an empty line, event adds an additional empty line in text area after drop.
// TODO: Text verification needs to be coded
// Otherwise, when text file has only one line, no new line is added to text area
textArea.value = e.target.result;
limitText(textArea, chooseCorectCounter(textArea.id), LIMIT_CHAR_SIZE);
}, false);
// Use dataTransfer for interacting with file
if (dropEvent) {
if (dropEventFormat === 'file' && dropEventMimetype === 'text/plain') {
let file = dropEvent[0].getAsFile();
reader.readAsText(file);
AreaStateShadow(textArea, 'success')
AreaPlaceHolderState(textArea, dropId, 'normal')
} else {
AreaStateShadow(textArea, 'error')
AreaPlaceHolderState(textArea, dropId, 'error')
}
}
}
|