Separate UI bindings from actual function

index.html

@@ -81,13 +81,19 @@
         <span>See debug logging in DevTools for more information.</span>
     </footer>
 
-    <script async src="js/classifier.js"></script>
-    <script async src="js/setsTypeman.js"></script>
-    <script async src="js/setsLoadSave.js"></script>
-    <script async src="js/configs.js"></script>
-    <script async src="js/canvas.js"></script>
-    <script async src="js/UI.js"></script>
-    <script async src="js/UIUpdater.js"></script>
+    <script defer src="js/canvas.js"></script>
+    <script defer src="js/classifier.js"></script>
+    <script defer src="js/classifierLoadSave.js"></script>
+    <script defer src="js/configs.js"></script>
+    <script defer src="js/configsLoadSave.js"></script>
+    <script defer src="js/resman.js"></script>
+    <script defer src="js/typeman.js"></script>
+
+    <script defer src="js/UI_canvas.js"></script>
+    <script defer src="js/UI_fileman.js"></script>
+    <script defer src="js/UI_header.js"></script>
+    <script defer src="js/UI_resman.js"></script>
+    <script defer src="js/UI_typeman.js"></script>
 
     <script defer src="js/init.js"></script>
 </body></html>

js/UI_canvas.js

@@ -0,0 +1,12 @@
+// UI_* files contain JS code for GUI elements, isolated from any actual functions
+
+document.getElementById('clearDrawingPadBtn').onclick = function() {
+    resetCanvas();
+}
+
+/* presiction used by the "Predict" button (if autoprediction is disabled) */
+document.getElementById('predictBtn').onclick = async function() {
+    predict();
+    resetCanvas();
+    document.getElementById('predictBtn').disabled = true;
+}

js/UI_fileman.js

@@ -0,0 +1,14 @@
+// UI_* files contain JS code for GUI elements, isolated from any actual functions
+
+/* wipe all data button */
+document.getElementById('filemanWipe').onclick = () => {
+    localStorage.removeItem('dataset');
+    init();
+}
+
+/* show/hide debug */
+document.getElementById('debugTogglerBtn').onclick = () => {
+    document.getElementById('debug').style.display == "none" ? Configs.showDebug = 1 : Configs.showDebug = 0;
+    saveConfigs();
+    updateUI();
+};

js/UI_header.js

@@ -0,0 +1,36 @@
+// UI_* files contain JS code for GUI elements, isolated from any actual functions
+
+/* show/hide UI blocks ("AppMode") */
+document.getElementById('appModeSwitcher').onclick = () => {
+    appModeSwitcher.checked ? Configs.currentAppMode = 1 : Configs.currentAppMode = 0;
+    saveConfigs();
+    updateUI();
+};
+document.getElementById('appModeSwitcherHandler').oncontextmenu = () => {
+    appModeSwitcher.indeterminate ? 
+        (appModeSwitcher.checked ? Configs.currentAppMode = 1 : Configs.currentAppMode = 0)
+        : Configs.currentAppMode = 2; 
+    saveConfigs();
+    updateUI();
+
+    return false; // don't show context menu
+};
+
+/* show/hide menu popup button */
+document.getElementById('filemanTogglerBtn').onclick = function() {
+    document.getElementById('fileman').style.transform != 'translateY(-115%)'
+        ? document.getElementById('fileman').style.transform = 'translateY(-115%)'
+        : document.getElementById('fileman').style.transform = 'translateY(0%)';
+}
+
+/* view mode buttons */
+document.getElementById('viewAsGridBtn').onclick = () => {
+    Configs.resultsViewMode = 1;
+    saveConfigs();
+    updateUI();
+};
+document.getElementById('viewAsListBtn').onclick = () => {
+    Configs.resultsViewMode = 0;
+    saveConfigs();
+    updateUI();
+};

js/UI_resman.js

@@ -0,0 +1,15 @@
+// UI_* files contain JS code for GUI elements, isolated from any actual functions
+
+/* autoprediction toggler */
+document.getElementById('autopreditionToggler').onclick = () => {
+    autopreditionToggler.checked ? Configs.useAutoprediction = 1 : Configs.useAutoprediction = 0;
+    saveConfigs();
+    updateUI();
+};
+
+/* autotrain toggler */
+document.getElementById('autotrainToggler').onclick = () => {
+    autotrainToggler.checked ? Configs.useAutotrain = 1 : Configs.useAutotrain = 0;
+    saveConfigs();
+    updateUI();
+};

js/UI_typeman.js

@@ -0,0 +1,13 @@
+// UI_* files contain JS code for GUI elements, isolated from any actual functions
+
+/* typeman input validation */
+document.getElementById('addTypeInput').onchange = () => addTypeInputValidate();
+document.getElementById('addTypeInput').onpaste = () => addTypeInputValidate();
+document.getElementById('addTypeInput').oninput = () => addTypeInputValidate();
+
+/* add class button using input name */
+document.getElementById('addTypeBtn').onclick = () => createClassBtn(
+    document.getElementById('addTypeInput').value.trim().replace(/ /g, '-') );
+
+/* class removal mode button */
+document.getElementById('removalModeTogglerBtn').onclick = () => toggleClassRemover();

js/canvas.js

@@ -82,8 +82,4 @@ function resetCanvas() {
           isInteracted = false;
           document.getElementById('predictBtn').disabled = true;
     }
-}
-
-document.getElementById('clearDrawingPadBtn').onclick = function() {
-    resetCanvas();
 }

js/classifier.js

@@ -39,8 +39,6 @@ async function predict() {
     }
 }
 
-
-
 /* results data formatter (remove zero-probs and sort by most probable) */
 function formatResultData(raw) {
     rawKeys = Object.keys(raw.confidences);
@@ -86,24 +84,6 @@ function addExample(cls) {
 
 
 
-/* create buttons for all the result options */
-function outputResult(data) {
-    document.getElementById('resman').innerHTML = '';
-    for (let i in data) {
-        let newResultButton = document.createElement("button");
-        newResultButton.classList.add( data[i][0] );
-        newResultButton.title = data[i][0];
-        newResultButton.innerHTML = (`<big>${data[i][0]}</big><small>${(data[i][1]*100) + '%'}</small>`);
-
-        newResultButton.setAttribute('onclick', 'resultBtnOnSelect(this);');
-        newResultButton.setAttribute('oncontextmenu', 'quickCopy(this);');
-
-        document.getElementById('resman').appendChild(newResultButton);
-    }
-}
-
-
-
 /* update KNN neighboors quantity coefficient */
 function updateKNNCoefficient() {
     let cValues = Object.values(classifier.getClassExampleCount());

js/setsLoadSave.js → js/classifierLoadSave.js

@@ -1,8 +1,3 @@
-function saveSets() {
-    let datasetJSON = JSON.stringify( Object.entries(classifier.getClassifierDataset()).map(([label, data])=>[label, Array.from(data.dataSync()), data.shape]) );
-    localStorage.setItem('dataset', datasetJSON);
-}
-
 function loadSets() {
     if (localStorage.getItem('dataset') != null) {
         let datasetJSON = localStorage.getItem('dataset');
@@ -34,9 +29,13 @@ function loadSets() {
         typeman.innerHTML = '<h3>Nothing to train!&#13;Please&nbsp;add one or more examples you want to begin with.</h3>';
     }
 }
-
 function setsImporter(dataset) {
     for (i in dataset) {
         createClassBtn(i);
     }
-}
+}
+
+function saveSets() {
+    let datasetJSON = JSON.stringify( Object.entries(classifier.getClassifierDataset()).map(([label, data])=>[label, Array.from(data.dataSync()), data.shape]) );
+    localStorage.setItem('dataset', datasetJSON);
+}