From 8984c087dc5d39e9fa8f137f1c3b8aebaba7450f Mon Sep 17 00:00:00 2001
From: "Stefan@AWG" <stefan.muennich@unibas.ch>
Date: Thu, 18 Jun 2020 19:17:30 +0200
Subject: [PATCH 1/7] fix(tutorial.js): switch handling of step incrementation

This fix increments the step number of the nextStepButton to the next step number,
so the loadTutorialStep() function just has to call this step number without incrementation.
---
 js/mei-tutorials.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/js/mei-tutorials.js b/js/mei-tutorials.js
index 6d320961..648cec52 100644
--- a/js/mei-tutorials.js
+++ b/js/mei-tutorials.js
@@ -111,16 +111,19 @@ function setupTutorial(data) {
         a.innerHTML = text;
         li.appendChild(a);
         stepBox.appendChild(li);
-    
+
+    //initial step
+    var stepNum = 0 ;
+
     //start with the first step of the tutorial
-    loadTutorialStep(data,0);
+    loadTutorialStep(data,stepNum);
     
     //add listener to allow going to the next step
     document.getElementById('nextStepButton').addEventListener('click',(e) => {
         var stepNum = parseInt(e.target.getAttribute('data-stepnum'));
 
         // load next step
-        loadTutorialStep(data,stepNum + 1);   
+        loadTutorialStep(data, stepNum);
     });        
 }
 
@@ -152,7 +155,7 @@ function loadTutorialStep(data, stepNum) {
     document.getElementById('fullFileTitle').innerHTML = step.xmlFile;
     
     //activate current item
-    activateStepListItem(data,stepNum);
+    activateStepListItem(data, stepNum);
     
     //decide if XML editor is needed on this page, and if it needs to be prefilled
     var requiresEditor = (typeof step.xmlFile !== 'undefined' && step.xmlFile !== '') && typeof step.xpaths !== 'undefined' && step.xpaths.length > 0;
@@ -163,7 +166,7 @@ function loadTutorialStep(data, stepNum) {
     var nextStepButton = document.getElementById('nextStepButton');
     
     //update nextStepButton to allow proceeding. listener is set in setupTutorial() 
-    nextStepButton.setAttribute('data-stepnum',stepNum);
+    nextStepButton.setAttribute('data-next-stepnum',stepNum + 1);
     
     //show editor only when needed, allow to proceed without interaction
     if(!requiresEditor) {

From 749ab5f6750acb72cb5becc3d1ad89d852c8f860 Mon Sep 17 00:00:00 2001
From: "Stefan@AWG" <stefan.muennich@unibas.ch>
Date: Thu, 18 Jun 2020 19:18:34 +0200
Subject: [PATCH 2/7] doc(tutorials.html): add some doc for the editor div

---
 _layouts/tutorials.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/_layouts/tutorials.html b/_layouts/tutorials.html
index 6aa0d8fe..8c21431b 100644
--- a/_layouts/tutorials.html
+++ b/_layouts/tutorials.html
@@ -26,7 +26,9 @@ <h3>MEI Editor
                     <button id="btn-toggleHint" class="btn btn-link float-right disabled" title="trick or cheat">show hint</button>
                 </h3>
                 <div id="editorBox">
-                    <div id="editor"></div>
+                    <div id="editor">
+                        <!-- editor content goes in here -->
+                    </div>
                 </div>
 
                 <div id="hints" style="display: none;">

From 244caf90c29502f61bd4f37eb2e9fa5badd24115 Mon Sep 17 00:00:00 2001
From: "Stefan@AWG" <stefan.muennich@unibas.ch>
Date: Thu, 18 Jun 2020 19:22:19 +0200
Subject: [PATCH 3/7] refactor(tutorials.js): use currentStep instead of step
 inside loadTutorialStep() function

---
 js/mei-tutorials.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/js/mei-tutorials.js b/js/mei-tutorials.js
index 648cec52..838537c5 100644
--- a/js/mei-tutorials.js
+++ b/js/mei-tutorials.js
@@ -151,15 +151,15 @@ function loadTutorialStep(data, stepNum) {
     currentStep = step;
     
     //adds heading as provided, falls back to plain step numbers
-    document.getElementById('stepLabel').innerHTML = (typeof step.label !== 'undefined' && step.label !== '') ? step.label : 'Step ' + (stepNum + 1);
-    document.getElementById('fullFileTitle').innerHTML = step.xmlFile;
+    document.getElementById('stepLabel').innerHTML = (typeof currentStep.label !== 'undefined' && currentStep.label !== '') ? currentStep.label : 'Step ' + (stepNum + 1);
+    document.getElementById('fullFileTitle').innerHTML = currentStep.xmlFile;
     
     //activate current item
     activateStepListItem(data, stepNum);
     
     //decide if XML editor is needed on this page, and if it needs to be prefilled
-    var requiresEditor = (typeof step.xmlFile !== 'undefined' && step.xmlFile !== '') && typeof step.xpaths !== 'undefined' && step.xpaths.length > 0;
-    var requiresPrefill = (typeof step.prefillFile !== 'undefined' && step.prefillFile !== '');
+    var requiresEditor = (typeof currentStep.xmlFile !== 'undefined' && currentStep.xmlFile !== '') && typeof currentStep.xpaths !== 'undefined' && currentStep.xpaths.length > 0;
+    var requiresPrefill = (typeof currentStep.prefillFile !== 'undefined' && currentStep.prefillFile !== '');
     
     //get relevant elements on page
     var editorContainer = document.getElementById('editorContainer');
@@ -176,9 +176,9 @@ function loadTutorialStep(data, stepNum) {
         editorContainer.style.display = 'block';
         
         //fetch XML file
-        var xmlPromise = fetchFile(step.xmlFile);
+        var xmlPromise = fetchFile(currentStep.xmlFile);
         // fetch prefill file (if existing, otherwise return promise of empty string)
-        var prefillPromise = (requiresPrefill) ? fetchFile(step.prefillFile) : new Promise(function(resolve) { resolve(''); });
+        var prefillPromise = (requiresPrefill) ? fetchFile(currentStep.prefillFile) : new Promise(function(resolve) { resolve(''); });
         // array of the promises to be resolved
         var promiseArray = [xmlPromise, prefillPromise];
         
@@ -202,13 +202,13 @@ function loadTutorialStep(data, stepNum) {
     }
     
     //gets the description of the current step
-    fetchFile(step.descFile)
+    fetchFile(currentStep.descFile)
         .then(function(descriptionFile) {
             // update instruction section
             document.getElementById('instruction').innerHTML = descriptionFile;
         })
         .catch(function(error) {
-            console.log('There has been a problem with the fetch operation for ', step.descFile, error.message);
+            console.log('There has been a problem with the fetch operation for ', currentStep.descFile, error.message);
         });
     
 }

From 1715a0f48b9945a66c77df0385c2cee28d1952aa Mon Sep 17 00:00:00 2001
From: "Stefan@AWG" <stefan.muennich@unibas.ch>
Date: Thu, 18 Jun 2020 19:28:13 +0200
Subject: [PATCH 4/7] refactor(tutorials.js): simplify handleEditorChanges()
 function

This change moves the changeListener for the ACE editor from the handle EditorChanges() function
to the loadTutorialStep() function. Thus it avoids the necessity to stop change propagation and recursive call.
It also removes some unnecessary parameters from handleEditorChanges() as well as it simplifies the mechanism
to disallow/allow download and/or continuation with next step.
---
 js/mei-tutorials.js | 192 ++++++++++++++++++++++----------------------
 1 file changed, 94 insertions(+), 98 deletions(-)

diff --git a/js/mei-tutorials.js b/js/mei-tutorials.js
index 838537c5..8ddcaf84 100644
--- a/js/mei-tutorials.js
+++ b/js/mei-tutorials.js
@@ -240,124 +240,120 @@ function setupEditor(data, stepNum, xmlString, requiresPrefill, prefillString) {
     // adjust size of editor box
     resizeEditor(step.editorLines);
     
-    // check for editor changes by user input
-    handleEditorChanges(data, stepNum, step, file);
+    // watch out for editor changes by user input
+    editor.session.on('change', function changeListener(delta) {
+        // delta.start, delta.end, delta.lines, delta.action
+
+        handleEditorChanges(file);
+    });
 }
 
 /* 
  * function handleEditorChanges
  */
-function handleEditorChanges(data, stepNum, step, file) {
+function handleEditorChanges(file) {
     
     var parser = new DOMParser();
     var xmlDoc;
     
     var isValid = false;
     var wellformed = false;
+    var renderAnyway = false;
     
     var editValue = '';
     var validationString = '';
-    
-    // watch out for changes by user input
-    editor.session.on('change', function changeListener(delta) {
-        // delta.start, delta.end, delta.lines, delta.action
-        
-        // clean up hints and rendering
-        cleanUpHelpers();
-        
-        // get user input
-        editValue = editor.getSession().getValue();
-        
-        // update validation string
-        validationString = file.start + editValue + file.end;
-        
-        // try to parse validation string into xmlDoc
-        try {
-            xmlDoc = parser.parseFromString(validationString, "text/xml");
-            
-            // check if parsed xmlDoc is wellformed
-            wellformed = (xmlDoc.activeElement && xmlDoc.activeElement.localName && xmlDoc.activeElement.localName === 'parsererror') ? false : true;
-        } catch (error) {
-            console.log('parserError: ' + error);
-        }
-        
-        if (!wellformed) {
-            console.log('not well-formed');
-            displayWarning('Your code is not well-formed.');
-            document.getElementById('rendering').innerHTML = '';
-
-            // do not allow download or continuation until file is wellformed
-            disallowDownload();
-            blockNextStep();
-        } else {
-            isValid = true;
-            var renderAnyway = true;
-            
-            for (var i = 0; i < currentStep.xpaths.length; i++) {
-        
-                var xpathResult;
-        
-                try {
-                    xpathResult = xmlDoc.evaluate(currentStep.xpaths[i].rule, xmlDoc, nsResolver, XPathResult.BOOLEAN_TYPE, null);
-                } catch (error) {
-                    console.log('error resolving xpath: "' + currentStep.xpaths[i].rule + '"' + error);
-                    isValid = false;
-                    break;
+
+
+    // clean up hints and rendering
+    cleanUpHelpers();
+
+    // do not allow download or continuation until file is wellformed and valid
+    disallowDownload();
+    blockNextStep();
+
+    // get user input
+    editValue = editor.getSession().getValue();
+
+    // update validation string
+    validationString = file.start + editValue + file.end;
+
+    // try to parse validation string into xmlDoc
+    try {
+        xmlDoc = parser.parseFromString(validationString, "text/xml");
+
+        // check if parsed xmlDoc is wellformed
+        wellformed = (xmlDoc.activeElement && xmlDoc.activeElement.localName && xmlDoc.activeElement.localName === 'parsererror') ? false : true;
+    } catch (error) {
+        console.log('parserError: ' + error);
+    }
+
+    if (!wellformed) {
+        console.log('not well-formed');
+        displayWarning('Your code is not well-formed.');
+        document.getElementById('rendering').innerHTML = '';
+
+
+    } else {
+        isValid = true;
+        renderAnyway = true;
+
+        for (var i = 0; i < currentStep.xpaths.length; i++) {
+
+            var xpathResult;
+
+            try {
+                xpathResult = xmlDoc.evaluate(currentStep.xpaths[i].rule, xmlDoc, nsResolver, XPathResult.BOOLEAN_TYPE, null);
+            } catch (error) {
+                console.log('error resolving xpath: "' + currentStep.xpaths[i].rule + '"' + error);
+                isValid = false;
+                break;
+            }
+
+            if (!xpathResult.booleanValue) {
+
+                isValid = false;
+
+                if (!currentStep.xpaths[i].renderanyway) {
+                    renderAnyway = false;
                 }
-        
-                if (!xpathResult.booleanValue) {
-        
-                    isValid = false;
-        
-                    if (!currentStep.xpaths[i].renderanyway) {
-                        renderAnyway = false;
-                    }
-        
-                    // if there is no warning, let the user play without interruptions
-                    if (typeof currentStep.xpaths[i].hint !== 'undefined' && currentStep.xpaths[i].hint !== '') {
-                        var text = currentStep.xpaths[i].hint;
-                        displayWarning(text);
-                        text = '';
-                    }
-                    break;
+
+                // if there is no warning, let the user play without interruptions
+                if (typeof currentStep.xpaths[i].hint !== 'undefined' && currentStep.xpaths[i].hint !== '') {
+                    var text = currentStep.xpaths[i].hint;
+                    displayWarning(text);
+                    text = '';
                 }
+                break;
             }
-        
-            // stop change propagation to prevent infinite loop
-            editor.session.off('change', changeListener);
-        
-            // render if things are valid or renderable
-            if(isValid || renderAnyway) {
-                renderVerovio(validationString);
-                
-                //if it's renderable, allow to download
-                allowDownload();
-                
-                //copy current state into full-file editor
-                fullFileEditor.setValue(validationString);
-                fullFileEditor.clearSelection();
-                
-                //make full file available for download
-                var downloadStr = 'data:text/xml;charset=utf-8,' + encodeURIComponent(validationString);
-                var downloadBtn = document.getElementById('fullFileDownloadBtn');
-                downloadBtn.setAttribute('href', downloadStr);
-                downloadBtn.setAttribute('download', currentStep.xmlFile);
-            }
-        
-            //decide if user may continue or not
-            if (!isValid) {
-                blockNextStep();
-                disallowDownload();
-            } else {
-                allowNextStep();
-            }
-            
-            // continue to listen for changes
-            handleEditorChanges(data, stepNum, currentStep, file);
         }
-    });
+    }
+
+    // render if things are valid or renderable
+    if (isValid || renderAnyway) {
+        renderVerovio(validationString);
+
+        //copy current state into full-file editor
+        fullFileEditor.session.setValue(validationString);
+        fullFileEditor.clearSelection();
+
+        //make full file available for download
+        var downloadStr = 'data:text/xml;charset=utf-8,' + encodeURIComponent(validationString);
+        var downloadBtn = document.getElementById('fullFileDownloadBtn');
+        downloadBtn.setAttribute('href', downloadStr);
+        downloadBtn.setAttribute('download', currentStep.xmlFile);
+
+        //if it's renderable & everything is set up, allow to download
+        allowDownload();
+    }
+
+    //decide if user may continue or not
+    if (isValid) {
+        allowNextStep();
+    }
+
 }
 
+
 /* 
  * function showFinalPage
  * @param data: Content of the tutorial's JSON file

From d059c88689da83b31e7c2c0c75ef4bb36adc8782 Mon Sep 17 00:00:00 2001
From: "Stefan@AWG" <stefan.muennich@unibas.ch>
Date: Thu, 18 Jun 2020 19:43:05 +0200
Subject: [PATCH 5/7] fix(tutorials.js): improve error message when encoding
 cannot be rendered
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As mentioned by @KristinaRichts and @krHERO ,
the current error message when an encoding cannot be rendered in the tutorials
was misleading ("Please adjust your encoding …").
---
 js/mei-tutorials.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/mei-tutorials.js b/js/mei-tutorials.js
index 8ddcaf84..bb1f343b 100644
--- a/js/mei-tutorials.js
+++ b/js/mei-tutorials.js
@@ -425,7 +425,7 @@ function renderVerovio(validationString) {
     
     if (error) {
         // display message
-        document.getElementById('rendering').innerHTML = 'please adjust encoding to enable rendering';
+        document.getElementById('rendering').innerHTML = 'The current encoding cannot be rendered.';
     } else {
         // display svg
         document.getElementById('rendering').innerHTML = svg;

From 4410a4318365862ea17d4e78d232820ebc812dcd Mon Sep 17 00:00:00 2001
From: "Stefan@AWG" <stefan.muennich@unibas.ch>
Date: Thu, 18 Jun 2020 20:00:07 +0200
Subject: [PATCH 6/7] debug(tutorials.js): log out any NaN calls to console

This change adds a console log for any NaN values to improve debugging of #136.
---
 js/mei-tutorials.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/js/mei-tutorials.js b/js/mei-tutorials.js
index bb1f343b..8e717db4 100644
--- a/js/mei-tutorials.js
+++ b/js/mei-tutorials.js
@@ -116,13 +116,18 @@ function setupTutorial(data) {
     var stepNum = 0 ;
 
     //start with the first step of the tutorial
-    loadTutorialStep(data,stepNum);
+    loadTutorialStep(data, stepNum);
     
     //add listener to allow going to the next step
     document.getElementById('nextStepButton').addEventListener('click',(e) => {
-        var stepNum = parseInt(e.target.getAttribute('data-stepnum'));
+        stepNum = parseInt(e.target.getAttribute('data-next-stepnum'), 10);
 
-        // load next step
+        //catch any non numbers
+        if (isNaN(stepNum)) {
+            console.log('error getting next step number: ', stepNum, 'for event: ', e);
+        }
+
+        //load next step
         loadTutorialStep(data, stepNum);
     });        
 }

From 2ddf1afd4d45e5e1205cea666757bf2d854b5148 Mon Sep 17 00:00:00 2001
From: "Stefan@AWG" <stefan.muennich@unibas.ch>
Date: Thu, 18 Jun 2020 20:00:50 +0200
Subject: [PATCH 7/7] refactor(tutorials.js): change order of function calls at
 the beginning of loadTutorialStep

---
 js/mei-tutorials.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/mei-tutorials.js b/js/mei-tutorials.js
index 8e717db4..f630e6de 100644
--- a/js/mei-tutorials.js
+++ b/js/mei-tutorials.js
@@ -141,15 +141,15 @@ function loadTutorialStep(data, stepNum) {
     
     console.log('\nloading step ' + stepNum + ', maximum step is ' + data.steps.length);
     
-    // do not allow download or continuation before tutorial is set up
-    disallowDownload();
-    blockNextStep();
-    
     //if all steps are passed, move on to the final page, and skip rest of function
     if(stepNum >= data.steps.length) {
         showFinalPage(data);
         return true;
     }
+
+    // do not allow download or continuation before tutorial is set up
+    disallowDownload();
+    blockNextStep();
     
     //retrieve step object from data
     var step = data.steps[stepNum];