Move play-on-open attr to tangy-radio-block

Tangerine-Community · Feb 14, 2024 · 2f9c036 · 2f9c036
1 parent 7b54f1b
commit 2f9c036
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 24 deletions.
diff --git a/demo/tangy-radio-blocks-lists.html b/demo/tangy-radio-blocks-lists.html
@@ -115,8 +115,8 @@ <h3>tangy-radio-blocks lists demo</h3>
                                 <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="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>
+                            <tangy-prompt-box name="moving_windows_comp_02_prompt" justify-content="flex-end">
+                                <option value="instructions" label="prompt" play-on-open="on" 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>

diff --git a/input/tangy-prompt-box.js b/input/tangy-prompt-box.js
@@ -64,11 +64,6 @@ class TangyPrmoptBox extends TangyRadioBlocks {
       value: 'flex-end',
       reflectToAttribute: true
     }
-    properties.playOnOpen = {
-      type: String,
-      value: "",
-      reflectToAttribute: true
-    }
     return properties;
   }
 

diff --git a/input/tangy-radio-block.js b/input/tangy-radio-block.js
@@ -105,6 +105,11 @@ export class TangyRadioBlock extends TangyInputBase {
         type: String,
         value: '',
         reflectToAttribute: true
+      },
+      playOnOpen: {
+        type: String,
+        value: '',
+        reflectToAttribute: true
       }
     }
   }

diff --git a/input/tangy-radio-blocks.js b/input/tangy-radio-blocks.js
@@ -283,6 +283,9 @@ export class TangyRadioBlocks extends TangyInputBase {
       if (option.hasAttribute('sound')) {
         button.setAttribute('sound', option.getAttribute('sound'))
       }
+      if (option.hasAttribute('play-on-open')) {
+        button.setAttribute('play-on-open', option.getAttribute('play-on-open'))
+      }
       if (option.hasAttribute('prompt-for')) {
         button.setAttribute('prompt-for', option.getAttribute('prompt-for'))
       }

diff --git a/tangy-form-item.js b/tangy-form-item.js
@@ -725,17 +725,16 @@ export class TangyFormItem extends PolymerElement {
 
     this.querySelectorAll('tangy-prompt-box').forEach((tangyPrompt) => {
       // add event listeners for clicks
-      tangyPrompt.shadowRoot.querySelectorAll('tangy-radio-block').forEach((item) => {
-        if (item.sound) {
-          const inputOptionName = `${tangyPrompt.name}-${item.name}`
-          item.addEventListener('input-sound-triggered', this.onInputSoundTriggered.bind(this, inputOptionName));
-        }
-        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)
+      tangyPrompt.shadowRoot.querySelectorAll('tangy-radio-block').forEach((block) => {
+
+        if (block.hasAttribute('sound') && block.getAttribute('sound') != '') {
+          const inputOptionName = `${tangyPrompt.name}-${block.name}`
+          block.addEventListener('input-sound-triggered', this.onInputSoundTriggered.bind(this, inputOptionName));
+
+          if (block.hasAttribute('play-on-open') && block.getAttribute('play-on-open') == "on") {
+            let inputOptionName = `${tangyPrompt.name}-${block.name}`
+            let playOnOpenEvent = new CustomEvent('input-sound-triggered', { detail: { sound: block.getAttribute('sound'), id: inputOptionName } } )
+            block.dispatchEvent(playOnOpenEvent)
           }
         }
       })

diff --git a/util/tangy-prompt-utils.js b/util/tangy-prompt-utils.js
@@ -66,7 +66,6 @@ export class TangyPromptUtils {
         thisSound.play()
         duration = (thisSound.duration) * 1000;
         durationTotal += duration
-        console.log(`Play ${thisSound.eleId} Loop: ${duration}`)
         if (thisSound.eleId.length != 1) {
             this.showDuration(thisSound.eleId)
         } else {
@@ -90,7 +89,6 @@ onSoundEnded(event) {
 }
 
 showDuration(id) {
-    console.log('showDuration', id)
     let prompt = this.prompts.find(input => input.id == id);
     let input = prompt.input;
     if (input) {
@@ -125,12 +123,11 @@ showOptionDuration(id) {
             x.style.boxSizing = 'border-box';
         })
 
-        const siblings = input.getRootNode().host.shadowRoot.querySelectorAll('tangy-radio-block') || [];
         try {
+            const siblings = input.getRootNode().host.shadowRoot.querySelectorAll('tangy-radio-block') || [];
             //the rest of the elements on this input
             siblings.forEach(x => x.style.opacity = '0.5')
         } catch (e) {
-            console.warn('No document to show options.')
         }
     }
 };
@@ -139,15 +136,14 @@ hideOptionDuration(id) {
     let prompt = this.prompts.find(prompt => prompt.id == id);
     let input = prompt.input;
     if (input) {
-        const siblings = input.getRootNode().host.shadowRoot.querySelectorAll('tangy-radio-block') || [];
         try {
+            const siblings = input.getRootNode().host.shadowRoot.querySelectorAll('tangy-radio-block') || [];
             siblings.forEach(x => {
                 x.style.borderColor = 'transparent';
                 x.style.border = 'none'
                 x.style.opacity = '1';
             })
         } catch (e) {
-            console.warn('No document to hide options.')
         }
     }
 };