Fix tangy-prompt-box play-on-open attribute

Tangerine-Community · Feb 5, 2024 · dd32ee9 · dd32ee9
1 parent b655bd8
commit dd32ee9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/demo/tangy-radio-blocks-lists.html b/demo/tangy-radio-blocks-lists.html
@@ -109,15 +109,15 @@ <h3>tangy-radio-blocks lists demo</h3>
                             title="Item 1"
                     >
                         <template>
-                            <tangy-radio-blocks hint-text="hint hint hint" name="moving_windows_comp_02" label="What does Kofi like to do?" orientation="rows" class="" style="" required="">
+                            <tangy-radio-blocks name="moving_windows_comp_02" label="What does Kofi like to do?" orientation="rows" class="" style="" required="">
                                 <option value="0" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Tie_her_shoes.mp3">Tie her shoes</option>
                                 <option value="1" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Visit_the_city.mp3">Visit the city</option>
                                 <option value="2" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Run.mp3">Run</option>
                                 <option value="3" image="./assets/images/ms-talk2.png" sound="assets/sounds/letters_silent_rcomp_01_Get_up_early.mp3">Get up early</option>
                             </tangy-radio-blocks>
-                            <tangy-prompt-box name="moving_windows_comp_02_prompt" play-on-open="1" justify-content="flex-start">
-                                <option value="0" id="instructions" label="prompt" sound="assets/sounds/letters_moving_windows_comp_help.mp3" image="./assets/images/instructions.png"></option>
-                                <option value="1" id="help" label="insturctions" prompt-for="moving_windows_comp_02" sound="assets/sounds/letters_moving_windows_comp_02_What_does_Kofi_like_to_do.mp3" image="./assets/images/ms-talk2.png"></option>
+                            <tangy-prompt-box name="moving_windows_comp_02_prompt" play-on-open="instructions,help" justify-content="flex-end">
+                                <option value="instructions" label="prompt" sound="assets/sounds/letters_moving_windows_comp_help.mp3" image="./assets/images/instructions.png"></option>
+                                <option value="help" label="insturctions" prompt-for="moving_windows_comp_02" sound="assets/sounds/letters_moving_windows_comp_02_What_does_Kofi_like_to_do.mp3" image="./assets/images/ms-talk2.png"></option>
                             </tangy-prompt-box>
                         </template>
                     </tangy-form-item>

diff --git a/tangy-form-item.js b/tangy-form-item.js
@@ -730,8 +730,9 @@ export class TangyFormItem extends PolymerElement {
           const inputOptionName = `${tangyPrompt.name}-${item.name}`
           item.addEventListener('input-sound-triggered', this.onInputSoundTriggered.bind(this, inputOptionName));
         }
-        if (tangyPrompt.getAttribute('playOnOpen') != "") {
-          if (item.hasAttribute('sound') && item.getAttribute('sound') != '') {
+        if (tangyPrompt.hasAttribute('play-on-open')) {
+          const playOnOpenList = tangyPrompt.getAttribute('play-on-open').split(',');
+          if (playOnOpenList.includes(item.name) && item.hasAttribute('sound') && item.getAttribute('sound') != '') {
             let inputOptionName = `${tangyPrompt.name}-${item.name}`
             let playOnOpenEvent = new CustomEvent('input-sound-triggered', { detail: { sound: item.getAttribute('sound'), id: inputOptionName } } )
             item.dispatchEvent(playOnOpenEvent)
@@ -986,15 +987,17 @@ export class TangyFormItem extends PolymerElement {
 
     this.sectionPromptQueue.queue(input, event.detail.sound, eventName);
 
-    if (input.hasAttribute("prompt-for")) {
+    if (input.hasAttribute("prompt-for") && input.getAttribute("prompt-for") != '') {
       let inputName = input.getAttribute("prompt-for")
       let inputTangyPrompt = this.querySelector(`[name="${inputName}"]`)
-      inputTangyPrompt.shadowRoot.querySelectorAll('tangy-radio-block').forEach((option) => {
-        if (option.hasAttribute('sound') && option.getAttribute('sound') != '') {
-          let inputOptionName = `${inputName}-${option.name}`
-          this.sectionPromptQueue.queue(option, option.getAttribute('sound'), inputOptionName)
-        }
-      })
+      if (inputTangyPrompt) {
+        inputTangyPrompt.shadowRoot.querySelectorAll('tangy-radio-block').forEach((option) => {
+          if (option.hasAttribute('sound') && option.getAttribute('sound') != '') {
+            let inputOptionName = `${inputName}-${option.name}`
+            this.sectionPromptQueue.queue(option, option.getAttribute('sound'), inputOptionName)
+          }
+        })
+      }
     }
 
     if (this.sectionPromptQueue.prompts.length > 0) {