kami-app / static /js /dragAndDropFunc.min.js
lterriel's picture
new structure
92da9af
"use strict";const ReferenceInput=document.querySelector("#reference"),PredictionInput=document.querySelector("#prediction"),ReferenceMaxLengthCount=document.querySelector("#counter_ref"),PredictionMaxLengthCount=document.querySelector("#counter_pred"),areaNormalShadow="0 0 10px var(--white-main)",areaSuccessShadow="0 0 10px green",areaErrorShadow="0 0 10px red",areaPlaceHolderMsgError="Only raw text format (.txt) are valid, please retry.",referencePlaceHolder="Drag & Drop or Paste the expected transcription...",predictionPlaceHolder="Drag & Drop or Paste the transcription produced by the model you wish to evaluate...",LIMIT_CHAR_SIZE=7e3;function chooseCorectCounter(e){return"reference"===e?ReferenceMaxLengthCount:PredictionMaxLengthCount}function limitText(e,r,t){e.value.length>t&&(e.value=e.value.substring(0,t)),r.value=t-e.value.length}function AreaStateShadow(e,r){e.style.boxShadow=areaNormalShadow,"error"===r&&(e.style.boxShadow=areaErrorShadow),"success"===r&&(e.style.boxShadow=areaSuccessShadow)}function AreaPlaceHolderState(e,r,t="normal"){"normal"===t&&("reference"===r&&(e.placeholder=referencePlaceHolder),"prediction"===r&&(e.placeholder=predictionPlaceHolder)),"error"===t&&(e.value="",e.placeholder=areaPlaceHolderMsgError)}function dropHandler(e){e.preventDefault();var r=e.target.id;let t=document.getElementById(r);const a=new FileReader;let o=e.dataTransfer.items;var n=o[0].type,e=o[0].kind;a.addEventListener("load",e=>{t.value=e.target.result,limitText(t,chooseCorectCounter(t.id),LIMIT_CHAR_SIZE)},!1),o&&("file"===e&&"text/plain"===n?(n=o[0].getAsFile(),a.readAsText(n),AreaStateShadow(t,"success"),AreaPlaceHolderState(t,r,"normal")):(AreaStateShadow(t,"error"),AreaPlaceHolderState(t,r,"error")))}[ReferenceInput,PredictionInput].forEach(e=>{e.addEventListener("drop",e=>{dropHandler(e)}),e.addEventListener("keydown",function(){limitText(e,chooseCorectCounter(e.id),LIMIT_CHAR_SIZE)}),e.addEventListener("keyup",function(){limitText(e,chooseCorectCounter(e.id),LIMIT_CHAR_SIZE)}),e.addEventListener("input",function(){AreaStateShadow(e,"normal"),AreaPlaceHolderState(e,e.id,"normal"),""!==e.value&&AreaStateShadow(e,"success")})});