Changeset 35265 for main/trunk/model-interfaces-dev

Timestamp:

2021-08-09T10:44:46+12:00 (3 years ago)

Author:

davidb

Message:

Add transcription remove button

Location:

main/trunk/model-interfaces-dev/atea

Files:

• js/asr/asr-controller.js (modified) (5 diffs)
• style/asr.css (modified) (1 diff)
• transform/pages/asr.xsl (modified) (2 diffs)

main/trunk/model-interfaces-dev/atea/js/asr/asr-controller.js

@@ -122 +122 @@
 function insertTranscription(transcription)
 {
-    // Insert a new transcription row
+    // Create a new transcription row
     /** @type {HTMLLIElement} */
     const clone = TRANSCRIPTION_TEMPLATE.content.firstElementChild.cloneNode(true);
 
-    // TODO: Give all children of the node the fileName data item.
-    clone.dataset.fileName = transcription.file_name;
-
     const fileNameElement = clone.querySelector(".transcription__file-name");
     fileNameElement.textContent = transcription.file_name;
 
     // Hook up the remove button
-    /** @type {HTMLButtonElement[]} */
-    const removeButton = clone.querySelectorAll("transcription__remove-button");
-    removeButton.forEach
-    (
-        button =>
-        {
-            button.onclick = function() {
-
-            }
-        }
-    );
-    
-    // Get the metadata list and template
-    /** @type {HTMLUListElement} */
-    const metadataList = clone.querySelector(".metadata-list");
-
+    /** @type {HTMLButtonElement} */
+    const removeButton = clone.querySelector(".transcription__remove-button");
+    removeButton.onclick = onDeleteTranscription;
+
+    loadAudioFile(transcription.file_name);
+    
     // Prepare the audio slider
-    loadAudioFile(transcription.file_name);
-
     /** @type {HTMLInputElement} */
     const audioSlider = clone.querySelector(".audio-slider");
     audioSlider.max = TRANSCRIPTION_AUDIO_ELEMENT.duration;
     audioSlider.step = 0.01;
+
+    // Get the metadata list
+    /** @type {HTMLUListElement} */
+    const metadataList = clone.querySelector(".metadata-list");
     
     // Insert metadata rows
     for (const metadata of transcription.metadata) {
-        metadataList.appendChild(buildMetadataNode(metadata, transcription.file_name));
-    }
+        metadataList.appendChild(buildMetadataNode(metadata));
+    }
+
+    // Set the filename data property on every element in the clone's DOM node
+    recurseAddData(clone, "file-name", transcription.file_name);
     
     TRANSCRIPTIONS_LIST.appendChild(clone);
@@ -175 +167 @@
  * @returns {Node} The constructed DOM node.
  */
-function buildMetadataNode(metadata, fileName)
+function buildMetadataNode(metadata)
 {
     const metadataClone = metadataTemplate.content.firstElementChild.cloneNode(true);
@@ -184 +176 @@
     /** @type {HTMLButtonElement} */
     const button = metadataClone.querySelector("button");
-    
-    button.dataset.fileName = fileName;
+
     button.onclick = function(e)
     {
@@ -229 +220 @@
 }
 
+/**
+ * Removes a transcription from the DOM.
+ * 
+ * @param {MouseEvent} ev The mouse click event.
+ */
+function onDeleteTranscription(ev)
+{
+    const fileName = ev.target.dataset.fileName;
+    const child = document.querySelector(`.transcription__container[data-file-name='${fileName}']`);
+
+    TRANSCRIPTIONS_LIST.removeChild(child);
+    cachedAudioFileList.delete(fileName);
+}
+
+/**
+ * Recurses through the entire tree of a parent and adds the given data attribute.
+ * 
+ * @param {HTMLElement} parent The parent node.
+ * @param {String} dataElementname The name of the data element. Must use hyphen notation, rather than camel case.
+ * @param {String} value The value of the data element.
+ */
+function recurseAddData(parent, dataElementName, value)
+{
+    parent.setAttribute("data-" + dataElementName, value);
+
+    for (const child of parent.children) {
+        recurseAddData(child, dataElementName, value);
+    }
+}
+
 /** @type {HTMLTemplateElement} */
 const errorTemplate = document.querySelector("#errorTemplate");
@@ -261 +282 @@
 });
 
-// whenever we hover over a menu item that has a submenu
 $('.tooltip-parent').on('mouseover', function() {
     var $menuItem = $(this),

main/trunk/model-interfaces-dev/atea/style/asr.css

@@ -61 +61 @@
     border-radius: 50%;
     padding: 0.2em;
+    cursor: pointer;
 
     -webkit-transition-duration: 0.2s;

main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl

@@ -51 +51 @@
             <div class="audio-slider__container">
                 <button type="button" class="btn-fab btn-fab-small">
-                    <span class="material-icons">&#xE037;</span>
+                    <span class="material-icons">&#xE037;</span> <!-- play_arrow -->
                 </button>
                 <input type="range" min="0" value="0" class="audio-slider__range" />
@@ -73 +73 @@
                         <div class="transcription__header">
                             <button class="btn-fab transcription__play-button" type="button">
-                                <span class="material-icons">&#xE037;</span>
+                                <span class="material-icons">&#xE037;</span> <!-- play_arrow -->
                             </button>
                             <button class="btn-fab transcription__remove-button" type="button">
-                                <span class="material-icons">&#xE872;</span>
+                                <span class="material-icons">&#xE872;</span> <!-- delete -->
                             </button>
                             <p class="transcription__file-name"></p>