Merge pull request music-encoding#460 from musicEnfanthen/patch-tutor…

…ials

feat(tutorials): add mechanism to translate strings from js file

_layouts/tutorials-ES.html

@@ -86,7 +86,7 @@ <h3>Agradecimientos</h3>
                             throw new Error('Error de red al intentar recuperar  ', page.data);
                         })
                         .then(function(data) {
-                            setupTutorial(data);
+                            setupTutorial(data, "ES");
                         });
                 } catch(err) {
                     console.log('No se pueden solicitar datos: ' + err)

_tutorials-ES/103_chords/step-01/103_chords_step-01-desc.html

@@ -17,6 +17,6 @@
         </ul>
 
     <p>
-        A continuación verás tres notas renderizadas secuencialmente. Esto aún no parece un acorde; pero no te desanimes, que nos ocuparemos de esto en el siguiente paso. Por ahora, quizás quieras divertirte un rato cambiando los valores de los atributos para ver cómo influyen con el renderizado. También puedes ver consejos en el editor sobre cómo escribir el código correcto (pulsa en "show hint"). Cuando quieras, asegúrate de ingresar el código correcto en el editor y después pulsa el botón de "continuar" en la parte de abajo a la derecha.
+        A continuación verás tres notas renderizadas secuencialmente. Esto aún no parece un acorde; pero no te desanimes, que nos ocuparemos de esto en el siguiente paso. Por ahora, quizás quieras divertirte un rato cambiando los valores de los atributos para ver cómo influyen con el renderizado. También puedes ver consejos en el editor sobre cómo escribir el código correcto (pulsa en "mostrar pista"). Cuando quieras, asegúrate de ingresar el código correcto en el editor y después pulsa el botón de "continuar" en la parte de abajo a la derecha.
     </p>
 </div>

_tutorials-ES/103_chords/step-02/103_chords_step-02-desc.html

@@ -9,6 +9,6 @@
         En el editor de abajo, encierra los tres elementos <code>&lt;note&gt;</code> en un elemento <code>&lt;chord&gt;</code> (es decir, inserta la etiqueta de apertura de <code>&lt;chord&gt;</code> antes de la primera nota y la su etiqueta de cierre después de la última nota). Las tres notas sueltas ahora deberían ser renderizadas no de forma secuencial si no alineandas de forma vertical; sin embargo, al momento, las notas todavía no tienen la duración correcta. Así que elimina los atributos de duración de todas las notas y añade uno a <code>&lt;chord&gt;</code> en su lugar, siempre con el valor de una negra (<code>@dur="4"</code>).
     </p>
     <p>
-        A continuación, deberías ver el acorde renderizado. De nuevo, puedes jugar un poco con los valores de los atributos para ver cómo influyen en el renderizado. También puedes ver consejos en el editor sobre cómo escribir el código correcto (pulsa en "show hint"). Cuando quieras, asegúrate de ingresar el código correcto en el editor y después pulsa el botón de "continuar" en la parte de abajo a la derecha.
+        A continuación, deberías ver el acorde renderizado. De nuevo, puedes jugar un poco con los valores de los atributos para ver cómo influyen en el renderizado. También puedes ver consejos en el editor sobre cómo escribir el código correcto (pulsa en "mostrar pista"). Cuando quieras, asegúrate de ingresar el código correcto en el editor y después pulsa el botón de "continuar" en la parte de abajo a la derecha.
     </p>
 </div>

js/mei-tutorials.js

@@ -46,6 +46,29 @@ var editSnippetStartString = '<?edit-start?>';
 var editSnippetEndString = '<?edit-end?>';
 
 var currentStep; //this will be used as current step object
+var LANG; //this will be used to store the current language
+
+var tutorialStrings = {
+    'EN': {
+        'codeNotWellformed': 'Your code is not well-formed.',
+        'fetchOperationProblem': 'There has been a problem with the fetch operation for:',
+        'finish': 'Finish',
+        'hideHint': 'hide hint',
+        'networkError': 'Network response was not ok while trying to fetch:',
+        'renderingError': 'The current encoding cannot be rendered.',
+        'showHint': 'show hint',
+    },
+    'ES': {
+        'codeNotWellformed': 'Su código no está bien formado.',
+        'fetchOperationProblem': 'Ha habido un problema con la operación fetch para:',
+        'finish': 'Terminar',
+        'hideHint': 'ocultar pista',
+        'networkError': 'La respuesta de la red no fue correcta al intentar buscar:',
+        'renderingError': 'La codificación actual no se puede representar.',
+        'showHint': 'mostrar pista',
+    }
+};
+
 
 /****************************** 
  * Global preparations        *
@@ -83,7 +106,9 @@ setListeners();
  * @param data: The content of a tutorial's JSON file
  * This function initializes a tutorial
  */
-function setupTutorial(data) {
+function setupTutorial(data, language) {
+
+    LANG = language || 'EN';
 
     var stepCount = data.steps.length;
     var stepBox = document.getElementById('stepBox');
@@ -107,7 +132,7 @@ function setupTutorial(data) {
         li.classList.add('step-item');
         li.setAttribute('data-step-n','outro');
         var a = document.createElement('a');
-        var text = 'Finish';
+        var text = tutorialStrings[LANG]['finish'];
         a.innerHTML = text;
         li.appendChild(a);
         stepBox.appendChild(li);
@@ -202,7 +227,7 @@ function loadTutorialStep(data, stepNum) {
                   }
                   })
             .catch(function(error) {
-                   console.log('There has been a problem with the fetch operation for: ', promiseArray, error.message);
+                   console.error(tutorialStrings[LANG]['fetchOperationProblem'], promiseArray, error.message);
                    });
     }
 
@@ -213,7 +238,7 @@ function loadTutorialStep(data, stepNum) {
             document.getElementById('instruction').innerHTML = descriptionFile;
         })
         .catch(function(error) {
-            console.log('There has been a problem with the fetch operation for ', currentStep.descFile, error.message);
+            console.error(tutorialStrings[LANG]['fetchOperationProblem'], currentStep.descFile, error.message);
         });
 
 }
@@ -289,12 +314,12 @@ function handleEditorChanges(file) {
         // check if parsed xmlDoc is wellformed
         wellformed = (xmlDoc.activeElement && xmlDoc.activeElement.localName && xmlDoc.activeElement.localName === 'parsererror') ? false : true;
     } catch (error) {
-        console.log('parserError: ' + error);
+        console.error('parserError: ' + error);
     }
 
     if (!wellformed) {
-        console.log('not well-formed');
-        displayWarning('Your code is not well-formed.');
+        console.warn(tutorialStrings[LANG]['codeNotWellformed']);
+        displayWarning(tutorialStrings[LANG]['codeNotWellformed']);
         document.getElementById('rendering').innerHTML = '';
 
 
@@ -309,7 +334,7 @@ function handleEditorChanges(file) {
             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);
+                console.error('error resolving xpath: "' + currentStep.xpaths[i].rule + '"' + error);
                 isValid = false;
                 break;
             }
@@ -400,7 +425,7 @@ function showFinalPage(data) {
 
         })
         .catch(function(error) {
-            console.log('There has been a problem to load finale page: ' + error.message);
+            console.error(tutorialStrings[LANG]['fetchOperationProblem'], data.end, error.message);
         });
 
 }
@@ -425,12 +450,12 @@ function renderVerovio(validationString) {
         svg = vrvToolkit.renderData(validationString, {});
         error = false;
     } catch (error) {
-        console.log('error rendering verovio: ' + error);
+        console.error('error rendering verovio: ' + error);
     }
 
     if (error) {
         // display message
-        document.getElementById('rendering').innerHTML = 'The current encoding cannot be rendered.';
+        document.getElementById('rendering').innerHTML = tutorialStrings[LANG]['renderingError'];
     } else {
         // display svg
         document.getElementById('rendering').innerHTML = svg;
@@ -541,15 +566,15 @@ function activateStepListItem(data,stepNum) {
             oldStep.classList.remove('active');
         }
     } catch(err) {
-        console.log('No active step so far: ' + err);
+        console.error('No active step so far: ' + err);
     }
 
     //highlight current step bullet as active
     try {
         var stepLi = document.querySelector('li.step-item[data-step-n="' + stepNum + '"]');
         stepLi.classList.add('active');   
     } catch(err) {
-        console.log('something went wrong: ' + err)
+        console.error('Something went wrong: ' + err)
     }
 }
 
@@ -564,7 +589,7 @@ function fetchFile(file) {
             if(response.ok) {
                 return response.text();
             }
-            throw new Error('Network response was not ok while trying to fetch ', file);
+            throw new Error(tutorialStrings[LANG]['networkError'], file);
         })
 }
 
@@ -652,10 +677,12 @@ function toggleHint() {
     // read current values
     const hintStyle = document.getElementById('hints');
     var hintMessage = document.getElementById('btn-toggleHint').innerText;
+    var hideHint = tutorialStrings[LANG]['hideHint'];
+    var showHint = tutorialStrings[LANG]['showHint'];
 
     // toggle values
     hintStyle.style.display = hintStyle.style.display === 'none' ? 'block' : 'none';
-    hintMessage = hintMessage === 'hide hint' ? 'show hint' : 'hide hint';
+    hintMessage = hintMessage === hideHint ? showHint : hideHint;
 
     // set new values
     document.getElementById('btn-toggleHint').innerText = hintMessage;