JS Cleanup

validation/jinja2/validation/_base.html

@@ -13,8 +13,11 @@
 <script>
 const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
 </script>
+      <script src="{{ static('helpers.js') }}"></script>
       <script src="{{ static('index.js') }}"></script>
       <script src="{{ static('menu.js') }}"></script>
+      <script src="{{ static('editSegment.js') }}"></script>
+      <script src="{{ static('toggleWrongWordDiv.js') }}"></script>
       <title>{% block title %} Maskwacîs Recordings Validation {% endblock title %}</title>
   {% endblock head %}
 

validation/jinja2/validation/_menu.html

@@ -20,9 +20,9 @@
     <ul id="options-menu" class="menu__options menu__options--list menu__options--right">
         {% if auth %}
             {% if request.COOKIES['macron'] == 'off' %}
-                <li onclick="showMacron('on')"><a href="#" class="menu__options-link">Show ê with circumflex</a></li>
+                <li data-cy="show-flex-button"><a href="#" class="menu__options-link">Show ê with circumflex</a></li>
             {% else %}
-                <li  onclick="showMacron('off')"><a href="#" class="menu__options-link">Show e without circumflex</a></li>
+                <li data-cy="no-flex-button"><a href="#" class="menu__options-link">Show e without circumflex</a></li>
             {% endif %}
             <li><a href="/logout" id="logout-link" class="logout-link">Logout</a></li>
 

validation/jinja2/validation/_wrong_buttons.html

@@ -17,16 +17,17 @@
 
 {% macro button_col(recording, csrf_token, request) %}
 
-    <button class="button {{ 'button--neutral-solid' if recording.wrong_speaker else 'button--neutral' }} wrong-speaker-button" data-cy="wrong-button" data-toggle="modal" data-target="#{{ recording.id }}-modal" data-rec-id={{ recording.id }}>Wrong Speaker</button>
-    <button class="button {{ 'button--neutral-solid' if recording.wrong_word else 'button--neutral' }} wrong-word-button" data-cy="wrong-button" data-rec-id={{ recording.id }} onclick="showWrongWordDiv('{{ recording.id }}')">Wrong Word</button>
+    <button class="button {{ 'button--neutral-solid' if recording.wrong_speaker else 'button--neutral' }} wrong-speaker-button" data-cy="wrong-speaker-button" data-toggle="modal" data-target="#{{ recording.id }}-modal" data-rec-id={{ recording.id }}>Wrong Speaker</button>
+    <button class="button {{ 'button--neutral-solid' if recording.wrong_word else 'button--neutral' }} wrong-word-button" data-cy="wrong-word-button" data-rec-id={{ recording.id }}>Wrong Word</button>
+
     <div class="menu__none rec-wrong-word" data-rec-id={{ recording.id }}>
         <form id="{{ recording.id }}-wrong-word" method="POST" action="/api/save_wrong_word/{{ recording.id }}">
             <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
             <input type="hidden" name="referrer" value="{{ request.build_absolute_uri() }}">
             What word is being spoken?
             <input type="text" id="wrong_word" name="wrong_word">
             <input form="{{ recording.id }}-wrong-word" type="submit" value="Save" class="button button--success button--small save-wrong-word" data-rec-id={{ recording.id }}>
-            <input type="button" class="button button--fail button--small" value="Cancel" data-rec-id={{ recording.id }})" onclick="hideWrongWordDiv('{{ recording.id }}')">
+            <input type="button" class="button button--fail button--small" value="Cancel" data-cy="cancel-wrong-word-button" data-rec-id={{ recording.id }})">
         </form>
     </div>
 

validation/jinja2/validation/segment_details.html

@@ -1,42 +1,3 @@
-<script>
-    function showDiv(name) {
-        document.getElementById('edit').style.display = "block";
-        document.getElementById('id_cree').focus()
-
-        const translation = document.getElementById(name + '-translation').innerHTML;
-
-        document.getElementById('id_cree').value = name;
-        document.getElementById('id_translation').value = translation;
-    }
-
-    function showDivAccept(name, translation, analysis) {
-        document.getElementById('edit').style.display = "block";
-        document.getElementById('id_cree').focus()
-
-        document.getElementById('id_cree').value = name;
-        document.getElementById('id_translation').value = translation;
-        document.getElementById('id_analysis').value = analysis;
-    }
-
-    function hideDiv() {
-        document.getElementById('edit').style.display = "none";
-    }
-
-    function revert(transcription, translation, analysis) {
-        document.getElementById('edit').style.display = "block";
-        document.getElementById('id_cree').focus()
-
-        document.getElementById('id_cree').value = transcription;
-        document.getElementById('id_translation').value = translation;
-        document.getElementById('id_analysis').value = analysis;
-    }
-
-    function goBack() {
-        window.history.back()
-    }
-
-
-</script>
 
 {% extends 'validation/_base.html' %}
 {% import 'validation/_macros.html' as macros %}
@@ -45,11 +6,13 @@
 <div class="table-responsive">
 
     <div>
-        <button class="button button--success button--back" onclick='goBack()'>Back</button>
+        <button data-cy="back-button" class="button button--success button--back">Back</button>
         {% if auth %}
-            <button data-cy="edit-button" class="button button--fail button--right button--edit"
-                onclick="showDiv('{{ segment_name }}')"
-                class="button button--fail button--right">
+            <button
+                    data-cy="edit-button"
+                    data-segment-name="{{ segment_name }}"
+                    class="button button--fail button--right button--edit"
+            >
                     Edit
             </button>
         {% endif %}
@@ -123,7 +86,14 @@
               <td>
                   {% set transl = suggestions[suggestion]["matches"][0]["translations"] %}
                   {% set analysis = suggestions[suggestion]["matches"][0]["analysis"] %}
-                  <input type="button" class="button button--success" value="Accept" onclick="showDivAccept('{{ suggestion }}', '{{ transl }}', '{{ analysis }}')" />
+                  <input
+                          type="button"
+                          data-cy="accept-button"
+                          class="button button--success"
+                          value="Accept"
+                          data-transcription="{{ suggestion }}"
+                          data-translation="{{ transl }}"
+                          data-analysis="{{ analysis }}" />
               </td>
               {% endif %}
             {% endif %}
@@ -137,7 +107,14 @@
             <td>
                 {% set transl = match["translations"] %}
                 {% set analysis = match["analysis"] %}
-                <input type="button" class="button button--success" value="Accept" onclick="showDivAccept('{{ suggestion }}', '{{ transl }}', '{{ analysis }}')" />
+                <input
+                        type="button"
+                        class="button button--success"
+                        value="Accept"
+                        data-cy="accept-button"
+                        data-transcription="{{ suggestion }}"
+                        data-translation="{{ transl }}"
+                        data-analysis="{{ analysis }}"/>
             </td>
           </tr>
             {% endif %}
@@ -168,7 +145,15 @@ <h4>Revision History:</h4>
           <td data-cy="revision-analysis">{{ revision.analysis }} </td>
           {% if auth %}
           <td>
-            <input type="button" class="button button--fail" value="Revert" onclick="revert('{{ revision.transcription }}', '{{ revision.translation }}', '{{ revision.analysis }}')" />
+            <input
+                    type="button"
+                    class="button button--fail"
+                    value="Revert"
+                    data-cy="revert-button"
+                    data-transcription="{{ revision.transcription }}"
+                    data-translation="{{ revision.translation }}"
+                    data-analysis="{{ revision.analysis }}"
+            />
         </td>
         {% endif %}
 

validation/jinja2/validation/segment_edit.html

@@ -4,6 +4,6 @@ <h5>Edit Segment</h5>
     <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
     {{ form }}
     <input data-cy="save-button" type="submit" class="button button--success" value="Save">
-    <input data-cy="cancel-button" type="button" class="button button--fail" onclick="hideDiv()" value="Cancel">
+    <input data-cy="cancel-button" type="button" class="button button--fail" value="Cancel">
 </form>
-</div>
+</div>

validation/static/editSegment.js

@@ -0,0 +1,46 @@
+"use strict";
+
+document.addEventListener('DOMContentLoaded', () => {
+    for (let button of document.querySelectorAll('[data-segment-name]')) {
+        button.addEventListener("click", async (e) => {
+            showDiv()
+            const name = e.target.dataset.segmentName
+            const translation = document.getElementById(name + '-translation').innerHTML;
+
+            document.getElementById('id_cree').value = name;
+            document.getElementById('id_translation').value = translation;
+        })
+    }
+
+    for (let button of document.querySelectorAll('[data-cy="accept-button"], [data-cy="revert-button"]')) {
+        button.addEventListener("click", async(e) => {
+            showDiv()
+
+            const transcription = e.target.dataset.transcription
+            const translation = e.target.dataset.translation
+            const analysis = e.target.dataset.analysis
+
+            document.getElementById('id_cree').value = transcription;
+            document.getElementById('id_translation').value = translation;
+            document.getElementById('id_analysis').value = analysis;
+        })
+    }
+
+    for (let button of document.querySelectorAll('[data-cy="cancel-button"]')) {
+        button.addEventListener("click", async(e) => {
+            document.getElementById('edit').style.display = "none";
+        })
+    }
+
+    for (let button of document.querySelectorAll('[data-cy="back-button"]')) {
+        button.addEventListener("click", async(e) => {
+            window.history.back()
+        })
+    }
+})
+
+
+function showDiv() {
+    document.getElementById('edit').style.display = "block";
+    document.getElementById('id_cree').focus()
+}

validation/static/helpers.js

@@ -0,0 +1,22 @@
+"use strict";
+
+// Helper functions that are needed across multiple JS files
+
+
+function getElementByPhraseId(className, phraseId) {
+    const elements =  document.getElementsByClassName(className);
+    for (let e of elements) {
+        if (e.dataset.phraseId === phraseId) {
+           return e
+        }
+    }
+}
+
+function getElementByRecordingId(className, recordingId) {
+    const elements =  document.getElementsByClassName(className);
+    for (let e of elements) {
+        if (e.dataset.recId === recordingId) {
+           return e
+        }
+    }
+}

validation/static/index.js

@@ -102,31 +102,3 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 })
-
-function showWrongWordDiv(recordingId) {
-    const wrongWordDiv = getElementByRecordingId("rec-wrong-word", recordingId);
-    wrongWordDiv.classList.replace("menu__none", "menu__block");
-}
-
-function hideWrongWordDiv(recordingId) {
-    const wrongWordDiv = getElementByRecordingId("rec-wrong-word", recordingId);
-    wrongWordDiv.classList.replace("menu__block", "menu__none");
-}
-
-function getElementByPhraseId(className, phraseId) {
-    const elements =  document.getElementsByClassName(className);
-    for (let e of elements) {
-        if (e.dataset.phraseId === phraseId) {
-           return e
-        }
-    }
-}
-
-function getElementByRecordingId(className, recordingId) {
-    const elements =  document.getElementsByClassName(className);
-    for (let e of elements) {
-        if (e.dataset.recId === recordingId) {
-           return e
-        }
-    }
-}

validation/static/menu.js

@@ -1,17 +1,21 @@
 "use strict";
 
-function showMenu() {
-    let menu = document.getElementById("options-menu");
-    if (menu.classList.contains("menu__none")) {
-        menu.classList.remove("menu__none");
-        menu.classList.add("menu__block");
-    } else {
-        menu.classList.add("menu__none");
-        menu.classList.remove("menu__block");
+document.addEventListener("DOMContentLoaded", () => {
+    for (let link of document.querySelectorAll('[data-cy="show-flex-button"]')) {
+        link.addEventListener("click", () => {
+            showCircumflex("on");
+        })
     }
-}
 
-function showMacron(option) {
+    for (let link of document.querySelectorAll('[data-cy="no-flex-button"]')) {
+        link.addEventListener("click", () => {
+            showCircumflex("off");
+        })
+    }
+})
+
+
+function showCircumflex(option) {
     document.cookie = "macron=" + option + "; SameSite=Lax;"
     let menu = document.getElementById("options-menu");
     menu.classList.add("menu__none");

validation/static/toggleWrongWordDiv.js

@@ -0,0 +1,28 @@
+"use strict";
+
+document.addEventListener("DOMContentLoaded", () => {
+    for (let button of document.querySelectorAll('[data-cy="wrong-word-button"]')) {
+        button.addEventListener("click", async (e) => {
+            const recordingId = e.target.dataset.recId;
+            showWrongWordDiv(recordingId);
+        })
+    }
+
+    for (let button of document.querySelectorAll('[data-cy="cancel-wrong-word-button"]')) {
+        button.addEventListener("click", async (e) => {
+            const recordingId = e.target.dataset.recId;
+            hideWrongWordDiv(recordingId);
+        })
+    }
+});
+
+
+function showWrongWordDiv(recordingId) {
+    const wrongWordDiv = getElementByRecordingId("rec-wrong-word", recordingId);
+    wrongWordDiv.classList.replace("menu__none", "menu__block");
+}
+
+function hideWrongWordDiv(recordingId) {
+    const wrongWordDiv = getElementByRecordingId("rec-wrong-word", recordingId);
+    wrongWordDiv.classList.replace("menu__block", "menu__none");
+}