@pie-element/multiple-choice 9.8.1-next.0 → 9.8.1-next.2

package/lib/index.js

@@ -206,23 +206,28 @@ var MultipleChoice = /*#__PURE__*/function (_HTMLElement) {
           if (mutation.type === 'childList') {
             var audio = _this2.querySelector('audio[autoplay]');
 
-            if (!audio) return; // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play
+            if (!audio) return;
 
-            if (audio.paused && !_this2.querySelector('#play-audio-info')) {
-              // add info message as a toast to enable audio playback
-              var info = _this2._createAudioInfoToast();
+            var info = _this2._createAudioInfoToast();
 
-              _this2.appendChild(info);
-
-              var enableAudio = function enableAudio() {
+            var enableAudio = function enableAudio() {
+              if (_this2.querySelector('#play-audio-info')) {
                 audio.play();
 
                 _this2.removeChild(info);
+              }
 
-                document.removeEventListener('click', enableAudio);
-              };
+              document.removeEventListener('click', enableAudio);
+            }; // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play
+
+
+            if (audio.paused && !_this2.querySelector('#play-audio-info')) {
+              // add info message as a toast to enable audio playback
+              _this2.appendChild(info);
 
               document.addEventListener('click', enableAudio);
+            } else {
+              document.removeEventListener('click', enableAudio);
             } // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
 
 

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","isComplete","session","model","audioComplete","value","choiceMode","minSelections","maxSelections","selections","length","MultipleChoice","_model","_session","_rerender","element","React","createElement","Main","onChoiceChanged","_onChange","bind","onShowCorrectToggle","setAttribute","setLangAttribute","ReactDOM","render","leading","trailing","_dispatchResponseChanged","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","_dispatchModelSet","ModelSetEvent","undefined","language","lang","slice","s","data","info","document","id","innerHTML","Object","assign","style","position","bottom","left","transform","backgroundColor","color","padding","borderRadius","boxShadow","zIndex","autoplayAudioEnabled","observer","MutationObserver","mutationsList","forEach","mutation","type","audio","querySelector","paused","_createAudioInfoToast","appendChild","enableAudio","play","removeChild","removeEventListener","addEventListener","handlePlaying","handleEnded","disconnect","observe","childList","subtree","HTMLElement"],"mappings":"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","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport debug from 'debug';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport { updateSessionValue } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = (session, model, audioComplete) => {\n  if (!audioComplete) {\n    return false;\n  }\n\n  if (!session || !session.value) {\n    return false;\n  }\n\n  const { choiceMode, minSelections = 1, maxSelections } = model || {};\n  const selections = session.value.length || 0;\n\n  if (choiceMode === 'radio') {\n    return !!selections;\n  }\n\n  if (selections < minSelections || selections > maxSelections) {\n    return false;\n  }\n\n  return true;\n};\n\nexport default class MultipleChoice extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n    this.audioComplete = false;\n\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          var element = React.createElement(Main, {\n            model: this._model,\n            session: this._session,\n            onChoiceChanged: this._onChange.bind(this),\n            onShowCorrectToggle: this.onShowCorrectToggle.bind(this),\n          });\n\n          //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender\n          this.setAttribute(\n            'aria-label',\n            this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',\n          );\n          this.setAttribute('role', 'region');\n          this.setLangAttribute();\n\n          ReactDOM.render(element, this, () => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n\n    this._dispatchResponseChanged = debounce(() => {\n      this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete)));\n    });\n\n    this._dispatchModelSet = debounce(\n      () => {\n        this.dispatchEvent(\n          new ModelSetEvent(\n            this.tagName.toLowerCase(),\n            isComplete(this._session, this._model),\n            this._model !== undefined,\n          ),\n        );\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n\n  onShowCorrectToggle() {\n    renderMath(this);\n  }\n\n  setLangAttribute() {\n    const language = this._model && typeof this._model.language ? this._model.language : '';\n    const lang = language ? language.slice(0, 2) : 'en';\n    this.setAttribute('lang', lang);\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n    this._dispatchModelSet();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  set session(s) {\n    this._session = s;\n    this._rerender();\n    //TODO: remove this session-changed should only be emit on user change\n    this._dispatchResponseChanged();\n  }\n\n  _onChange(data) {\n    updateSessionValue(this._session, this._model.choiceMode, data);\n    this._dispatchResponseChanged();\n    this._rerender();\n  }\n\n  _createAudioInfoToast() {\n    const info = document.createElement('div');\n    info.id = 'play-audio-info';\n    info.innerHTML = 'Click anywhere to enable audio autoplay. Browser restrictions require user interaction to play audio.';\n    Object.assign(info.style, {\n      position: 'fixed',\n      bottom: '20px',\n      left: '50%',\n      transform: 'translateX(-50%)',\n      backgroundColor: '#333',\n      color: '#fff',\n      padding: '10px 20px',\n      borderRadius: '5px',\n      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',\n      zIndex: '1000',\n    });\n\n    return info;\n  }\n\n  connectedCallback() {\n    this._rerender();\n\n    if (this._model && !this._model.autoplayAudioEnabled) {\n      return;\n    }\n\n    const observer = new MutationObserver((mutationsList, observer) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          const audio = this.querySelector('audio[autoplay]');\n          if (!audio) return;\n\n          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n          if (audio.paused && !this.querySelector('#play-audio-info')) {\n            // add info message as a toast to enable audio playback\n            const info = this._createAudioInfoToast();\n            this.appendChild(info);\n\n            const enableAudio = () => {\n              audio.play();\n              this.removeChild(info);\n              document.removeEventListener('click', enableAudio);\n            };\n\n            document.addEventListener('click', enableAudio);\n          }\n\n          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n          const handlePlaying = () => {\n            const info = this.querySelector('#play-audio-info');\n            if (info) {\n              this.removeChild(info);\n            }\n            audio.removeEventListener('playing', handlePlaying);\n          };\n\n          audio.addEventListener('playing', handlePlaying);\n\n          // we need to listen for the ended event to update the isComplete state\n          const handleEnded = () => {\n            this.audioComplete = true;\n            this._dispatchResponseChanged();\n            audio.removeEventListener('ended', handleEnded);\n          };\n\n          audio.addEventListener('ended', handleEnded);\n\n          observer.disconnect();\n        }\n      });\n    });\n\n    observer.observe(this, { childList: true, subtree: true });\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","isComplete","session","model","audioComplete","value","choiceMode","minSelections","maxSelections","selections","length","MultipleChoice","_model","_session","_rerender","element","React","createElement","Main","onChoiceChanged","_onChange","bind","onShowCorrectToggle","setAttribute","setLangAttribute","ReactDOM","render","leading","trailing","_dispatchResponseChanged","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","_dispatchModelSet","ModelSetEvent","undefined","language","lang","slice","s","data","info","document","id","innerHTML","Object","assign","style","position","bottom","left","transform","backgroundColor","color","padding","borderRadius","boxShadow","zIndex","autoplayAudioEnabled","observer","MutationObserver","mutationsList","forEach","mutation","type","audio","querySelector","_createAudioInfoToast","enableAudio","play","removeChild","removeEventListener","paused","appendChild","addEventListener","handlePlaying","handleEnded","disconnect","observe","childList","subtree","HTMLElement"],"mappings":"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","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport debug from 'debug';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport { updateSessionValue } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = (session, model, audioComplete) => {\n  if (!audioComplete) {\n    return false;\n  }\n\n  if (!session || !session.value) {\n    return false;\n  }\n\n  const { choiceMode, minSelections = 1, maxSelections } = model || {};\n  const selections = session.value.length || 0;\n\n  if (choiceMode === 'radio') {\n    return !!selections;\n  }\n\n  if (selections < minSelections || selections > maxSelections) {\n    return false;\n  }\n\n  return true;\n};\n\nexport default class MultipleChoice extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n    this.audioComplete = false;\n\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          var element = React.createElement(Main, {\n            model: this._model,\n            session: this._session,\n            onChoiceChanged: this._onChange.bind(this),\n            onShowCorrectToggle: this.onShowCorrectToggle.bind(this),\n          });\n\n          //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender\n          this.setAttribute(\n            'aria-label',\n            this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',\n          );\n          this.setAttribute('role', 'region');\n          this.setLangAttribute();\n\n          ReactDOM.render(element, this, () => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n\n    this._dispatchResponseChanged = debounce(() => {\n      this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete)));\n    });\n\n    this._dispatchModelSet = debounce(\n      () => {\n        this.dispatchEvent(\n          new ModelSetEvent(\n            this.tagName.toLowerCase(),\n            isComplete(this._session, this._model),\n            this._model !== undefined,\n          ),\n        );\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n\n  onShowCorrectToggle() {\n    renderMath(this);\n  }\n\n  setLangAttribute() {\n    const language = this._model && typeof this._model.language ? this._model.language : '';\n    const lang = language ? language.slice(0, 2) : 'en';\n    this.setAttribute('lang', lang);\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n    this._dispatchModelSet();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  set session(s) {\n    this._session = s;\n    this._rerender();\n    //TODO: remove this session-changed should only be emit on user change\n    this._dispatchResponseChanged();\n  }\n\n  _onChange(data) {\n    updateSessionValue(this._session, this._model.choiceMode, data);\n    this._dispatchResponseChanged();\n    this._rerender();\n  }\n\n  _createAudioInfoToast() {\n    const info = document.createElement('div');\n    info.id = 'play-audio-info';\n    info.innerHTML = 'Click anywhere to enable audio autoplay. Browser restrictions require user interaction to play audio.';\n    Object.assign(info.style, {\n      position: 'fixed',\n      bottom: '20px',\n      left: '50%',\n      transform: 'translateX(-50%)',\n      backgroundColor: '#333',\n      color: '#fff',\n      padding: '10px 20px',\n      borderRadius: '5px',\n      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',\n      zIndex: '1000',\n    });\n\n    return info;\n  }\n\n  connectedCallback() {\n    this._rerender();\n\n    if (this._model && !this._model.autoplayAudioEnabled) {\n      return;\n    }\n\n    const observer = new MutationObserver((mutationsList, observer) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          const audio = this.querySelector('audio[autoplay]');\n          if (!audio) return;\n\n          const info = this._createAudioInfoToast();\n          const enableAudio = () => {\n            if (this.querySelector('#play-audio-info')) {\n              audio.play();\n              this.removeChild(info);\n            }\n\n            document.removeEventListener('click', enableAudio);\n          };\n\n          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n          if (audio.paused && !this.querySelector('#play-audio-info')) {\n            // add info message as a toast to enable audio playback\n            this.appendChild(info);\n            document.addEventListener('click', enableAudio);\n          } else {\n            document.removeEventListener('click', enableAudio);\n          }\n\n          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n          const handlePlaying = () => {\n            const info = this.querySelector('#play-audio-info');\n            if (info) {\n              this.removeChild(info);\n            }\n            audio.removeEventListener('playing', handlePlaying);\n          };\n\n          audio.addEventListener('playing', handlePlaying);\n\n          // we need to listen for the ended event to update the isComplete state\n          const handleEnded = () => {\n            this.audioComplete = true;\n            this._dispatchResponseChanged();\n            audio.removeEventListener('ended', handleEnded);\n          };\n\n          audio.addEventListener('ended', handleEnded);\n\n          observer.disconnect();\n        }\n      });\n    });\n\n    observer.observe(this, { childList: true, subtree: true });\n  }\n}\n"],"file":"index.js"}

package/module/element.js

@@ -13177,15 +13177,19 @@ class MultipleChoice extends HTMLElement {
         if (mutation.type === 'childList') {
           const audio = this.querySelector('audio[autoplay]');
           if (!audio) return;
-          if (audio.paused && !this.querySelector('#play-audio-info')) {
-            const info = this._createAudioInfoToast();
-            this.appendChild(info);
-            const enableAudio = () => {
+          const info = this._createAudioInfoToast();
+          const enableAudio = () => {
+            if (this.querySelector('#play-audio-info')) {
               audio.play();
               this.removeChild(info);
-              document.removeEventListener('click', enableAudio);
-            };
+            }
+            document.removeEventListener('click', enableAudio);
+          };
+          if (audio.paused && !this.querySelector('#play-audio-info')) {
+            this.appendChild(info);
             document.addEventListener('click', enableAudio);
+          } else {
+            document.removeEventListener('click', enableAudio);
           }
           const handlePlaying = () => {
             const info = this.querySelector('#play-audio-info');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/multiple-choice",
   "repository": "pie-framework/pie-elements",
-  "version": "9.8.1-next.0+d1334496c",
+  "version": "9.8.1-next.2+38f4e6996",
   "publishConfig": {
     "access": "public"
   },
@@ -19,7 +19,7 @@
     "react-test-renderer": "^16.3.2",
     "react-transition-group": "^2.3.1"
   },
-  "gitHead": "d1334496cda08c2b97633fc2db0a771b6c95ed5b",
+  "gitHead": "38f4e69968e175252514fcb86f923eeb8d68d45b",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },