@pie-element/image-cloze-association 10.1.1-next.39 → 10.1.1-next.54

package/configure/lib/index.js

@@ -85,9 +85,13 @@ class ImageClozeAssociationConfigure extends HTMLElement {
     }
     this._root.render(element);
   }
+  connectedCallback() {
+    this._render();
+  }
   disconnectedCallback() {
     if (this._root) {
       this._root.unmount();
+      this._root = null;
     }
   }
 }

package/configure/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_pieConfigureEvents","require","_react","_interopRequireDefault","_client","_debug","_root","_defaults","log","debug","ImageClozeAssociationConfigure","HTMLElement","constructor","_model","createDefaultModel","onModelChanged","bind","_configuration","sensibleDefaults","configuration","model","s","_render","c","disableSidePanel","_disableSidePanel","dispatchModelUpdated","reset","resetValue","dispatchEvent","ModelUpdatedEvent","m","onConfigurationChanged","config","insertImage","handler","InsertImageEvent","onDeleteImage","src","done","DeleteImageEvent","insertSound","InsertSoundEvent","onDeleteSound","DeleteSoundEvent","element","React","createElement","Root","imageSupport","add","delete","uploadSoundSupport","createRoot","render","disconnectedCallback","unmount","exports","default","_defineProperty2"],"sources":["../src/index.js"],"sourcesContent":["import {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport debug from 'debug';\n\nimport Root from './root';\nimport sensibleDefaults from './defaults';\n\nconst log = debug('image-cloze-association:configure');\n\nexport default class ImageClozeAssociationConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}) => ({\n    ...sensibleDefaults.model,\n    ...model,\n  });\n\n  constructor() {\n    super();\n    this._root = null;\n    this._model = ImageClozeAssociationConfigure.createDefaultModel();\n    this.onModelChanged = this.onModelChanged.bind(this);\n    this._configuration = sensibleDefaults.configuration;\n  }\n\n  set model(s) {\n    this._model = ImageClozeAssociationConfigure.createDefaultModel(s);\n    this._render();\n  }\n\n  set configuration(c) {\n    this._configuration = c;\n    this._render();\n  }\n\n  set disableSidePanel(s) {\n    this._disableSidePanel = s;\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged(m, reset) {\n    this._model = m;\n    this.dispatchModelUpdated(reset);\n    this._render();\n  }\n\n  onConfigurationChanged(config) {\n    this._configuration = config;\n    this._render();\n  }\n\n  /**\n   *\n   * @param {done, progress, file} handler\n   */\n  insertImage(handler) {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  }\n\n  onDeleteImage(src, done) {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  }\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  _render() {\n    log('_render');\n\n    let element = React.createElement(Root, {\n      disableSidePanel: this._disableSidePanel,\n      model: this._model,\n      configuration: this._configuration,\n      onModelChanged: this.onModelChanged.bind(this),\n      onConfigurationChanged: this.onConfigurationChanged.bind(this),\n      imageSupport: {\n        add: this.insertImage.bind(this),\n        delete: this.onDeleteImage.bind(this),\n      },\n      uploadSoundSupport: {\n        add: this.insertSound.bind(this),\n        delete: this.onDeleteSound.bind(this),\n      },\n    });\n\n    if (!this._root) {\n      this._root = createRoot(this);\n    }\n    this._root.render(element);\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_pieConfigureEvents","require","_react","_interopRequireDefault","_client","_debug","_root","_defaults","log","debug","ImageClozeAssociationConfigure","HTMLElement","constructor","_model","createDefaultModel","onModelChanged","bind","_configuration","sensibleDefaults","configuration","model","s","_render","c","disableSidePanel","_disableSidePanel","dispatchModelUpdated","reset","resetValue","dispatchEvent","ModelUpdatedEvent","m","onConfigurationChanged","config","insertImage","handler","InsertImageEvent","onDeleteImage","src","done","DeleteImageEvent","insertSound","InsertSoundEvent","onDeleteSound","DeleteSoundEvent","element","React","createElement","Root","imageSupport","add","delete","uploadSoundSupport","createRoot","render","connectedCallback","disconnectedCallback","unmount","exports","default","_defineProperty2"],"sources":["../src/index.js"],"sourcesContent":["import {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport debug from 'debug';\n\nimport Root from './root';\nimport sensibleDefaults from './defaults';\n\nconst log = debug('image-cloze-association:configure');\n\nexport default class ImageClozeAssociationConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}) => ({\n    ...sensibleDefaults.model,\n    ...model,\n  });\n\n  constructor() {\n    super();\n    this._root = null;\n    this._model = ImageClozeAssociationConfigure.createDefaultModel();\n    this.onModelChanged = this.onModelChanged.bind(this);\n    this._configuration = sensibleDefaults.configuration;\n  }\n\n  set model(s) {\n    this._model = ImageClozeAssociationConfigure.createDefaultModel(s);\n    this._render();\n  }\n\n  set configuration(c) {\n    this._configuration = c;\n    this._render();\n  }\n\n  set disableSidePanel(s) {\n    this._disableSidePanel = s;\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged(m, reset) {\n    this._model = m;\n    this.dispatchModelUpdated(reset);\n    this._render();\n  }\n\n  onConfigurationChanged(config) {\n    this._configuration = config;\n    this._render();\n  }\n\n  /**\n   *\n   * @param {done, progress, file} handler\n   */\n  insertImage(handler) {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  }\n\n  onDeleteImage(src, done) {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  }\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  _render() {\n    log('_render');\n\n    let element = React.createElement(Root, {\n      disableSidePanel: this._disableSidePanel,\n      model: this._model,\n      configuration: this._configuration,\n      onModelChanged: this.onModelChanged.bind(this),\n      onConfigurationChanged: this.onConfigurationChanged.bind(this),\n      imageSupport: {\n        add: this.insertImage.bind(this),\n        delete: this.onDeleteImage.bind(this),\n      },\n      uploadSoundSupport: {\n        add: this.insertSound.bind(this),\n        delete: this.onDeleteSound.bind(this),\n      },\n    });\n\n    if (!this._root) {\n      this._root = createRoot(this);\n    }\n    this._root.render(element);\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n      this._root = null;\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/configure/package.json

@@ -12,8 +12,8 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "13.0.8",
-    "@pie-lib/editable-html-tip-tap": "2.1.6",
+    "@pie-lib/config-ui": "13.0.9",
+    "@pie-lib/editable-html-tip-tap": "2.1.7",
     "debug": "^4.1.1",
     "prop-types": "^15.8.1",
     "react": "18.3.1",

package/configure/src/index.js

@@ -106,9 +106,14 @@ export default class ImageClozeAssociationConfigure extends HTMLElement {
     this._root.render(element);
   }
 
+  connectedCallback() {
+    this._render();
+  }
+
   disconnectedCallback() {
     if (this._root) {
       this._root.unmount();
+      this._root = null;
     }
   }
 }

package/lib/index.js

@@ -197,6 +197,7 @@ class ImageClozeAssociation extends HTMLElement {
     }
     if (this._root) {
       this._root.unmount();
+      this._root = null;
     }
   }
   _render() {

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_mathRendering","_renderUi","_piePlayerEvents","_root","ImageClozeAssociation","HTMLElement","constructor","model","m","_model","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","autoplayAudioEnabled","completeAudioEnabled","completeResponses","duplicateResponses","hasUnplacedChoices","maxResponsePerZone","responseAreasToBeFilled","elementContext","audioComplete","audio","querySelector","isInsidePrompt","closest","_session","answers","Array","isArray","filledResponseAreas","Map","map","item","containerIndex","values","length","areResponseAreasFilled","allAnswersValue","answer","value","requiredAnswersPlaced","some","response","every","val","includes","session","s","updateAnswer","data","selector","SessionChangedEvent","_createAudioInfoToast","info","document","createElement","id","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","connectedCallback","observer","MutationObserver","mutationsList","forEach","mutation","type","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","handleEnded","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","disconnectedCallback","unmount","el","React","ImageClozeAssociationComponent","bind","createRoot","render","queueMicrotask","renderMath","exports","default"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { EnableAudioAutoplayImage } from '@pie-lib/render-ui';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport ImageClozeAssociationComponent from './root';\n\nexport default class ImageClozeAssociation extends HTMLElement {\n  constructor() {\n    super();\n    this._root = null;\n  }\n\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n    this._render();\n  }\n\n  isComplete() {\n    const {\n      autoplayAudioEnabled,\n      completeAudioEnabled,\n      completeResponses,\n      duplicateResponses,\n      hasUnplacedChoices,\n      maxResponsePerZone,\n      responseAreasToBeFilled,\n    } = this._model || {};\n    const elementContext = this;\n\n    // check audio completion if audio settings are enabled and audio actually exists\n    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {\n      if (elementContext) {\n        const audio = elementContext.querySelector('audio');\n        const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n        // only require audio completion if audio exists and is inside the prompt\n        if (audio && isInsidePrompt) {\n          return false;\n        }\n      }\n    }\n\n    if (!this._session || !this._session.answers) {\n      return false;\n    }\n\n    const { answers } = this._session;\n\n    if (!Array.isArray(answers)) {\n      return false;\n    }\n\n    // filter answers by containerIndex and count the ones with content\n    const filledResponseAreas = [...new Map(answers.map((item) => [item.containerIndex, item])).values()].length;\n    // check if an answer choice was added to at least as many response areas\n    // as the number of populated response areas in the correct answer\n    const areResponseAreasFilled = filledResponseAreas >= responseAreasToBeFilled;\n\n    if (maxResponsePerZone > 1) {\n      if (duplicateResponses) {\n        // an answer choice can be used multiple times\n        return areResponseAreasFilled;\n      }\n\n      // any correct answer have any unplaced answer choices (by the author)\n      if (hasUnplacedChoices) {\n        return areResponseAreasFilled;\n      }\n\n      const allAnswersValue = answers.map((answer) => answer.value);\n\n      // check if any correct answer have any unplaced answer choices (by the student)\n      const requiredAnswersPlaced = completeResponses.some((response) =>\n        response.every((val) => allAnswersValue.includes(val)),\n      );\n\n      // true - all choices (required for a correct response) were placed into a response area\n      return requiredAnswersPlaced;\n    }\n\n    return areResponseAreasFilled;\n  }\n\n  set session(s) {\n    if (s && !s.answers) {\n      s.answers = [];\n    }\n\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  updateAnswer(data) {\n    this._session.answers = data;\n    this._session.selector = 'Mouse';\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n    this._render();\n  }\n\n  _createAudioInfoToast() {\n    const info = document.createElement('div');\n    info.id = 'play-audio-info';\n\n    Object.assign(info.style, {\n      position: 'absolute',\n      top: 0,\n      width: '100%',\n      height: '100%',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      background: 'white',\n      zIndex: '1000',\n      cursor: 'pointer',\n    });\n\n    const img = document.createElement('img');\n    img.src = EnableAudioAutoplayImage;\n    img.alt = 'Click anywhere to enable audio autoplay';\n    img.width = 500;\n    img.height = 300;\n\n    info.appendChild(img);\n    return info;\n  }\n\n  connectedCallback() {\n    this._render();\n\n    // Observation:  audio in Chrome will have the autoplay attribute,\n    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n    const observer = new MutationObserver((mutationsList, observer) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          const audio = this.querySelector('audio');\n          const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n          if (!this._model) return;\n          if (!this._model.autoplayAudioEnabled) return;\n          if (audio && !isInsidePrompt) return;\n          if (!audio) return;\n\n          const info = this._createAudioInfoToast();\n          const container = this.querySelector('#main-container');\n          const enableAudio = () => {\n            if (this.querySelector('#play-audio-info')) {\n              audio.play();\n              container.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          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n          setTimeout(() => {\n            if (audio.paused && !this.querySelector('#play-audio-info')) {\n              // add info message as a toast to enable audio playback\n              container.appendChild(info);\n              document.addEventListener('click', enableAudio);\n            } else {\n              document.removeEventListener('click', enableAudio);\n            }\n          }, 500);\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\n            if (info) {\n              container.removeChild(info);\n            }\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.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n            audio.removeEventListener('ended', handleEnded);\n          };\n\n          audio.addEventListener('ended', handleEnded);\n\n          // store references to remove later\n          this._audio = audio;\n          this._handlePlaying = handlePlaying;\n          this._handleEnded = handleEnded;\n          this._enableAudio = enableAudio;\n\n          observer.disconnect();\n        }\n      });\n    });\n\n    observer.observe(this, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this._enableAudio);\n\n    if (this._audio) {\n      this._audio.removeEventListener('playing', this._handlePlaying);\n      this._audio.removeEventListener('ended', this._handleEnded);\n      this._audio = null;\n    }\n\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(ImageClozeAssociationComponent, {\n        model: this._model,\n        session: this._session,\n        updateAnswer: this.updateAnswer.bind(this),\n      });\n\n      if (!this._root) {\n        this._root = createRoot(this);\n      }\n      this._root.render(el);\n      queueMicrotask(() => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_mathRendering","_renderUi","_piePlayerEvents","_root","ImageClozeAssociation","HTMLElement","constructor","model","m","_model","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","autoplayAudioEnabled","completeAudioEnabled","completeResponses","duplicateResponses","hasUnplacedChoices","maxResponsePerZone","responseAreasToBeFilled","elementContext","audioComplete","audio","querySelector","isInsidePrompt","closest","_session","answers","Array","isArray","filledResponseAreas","Map","map","item","containerIndex","values","length","areResponseAreasFilled","allAnswersValue","answer","value","requiredAnswersPlaced","some","response","every","val","includes","session","s","updateAnswer","data","selector","SessionChangedEvent","_createAudioInfoToast","info","document","createElement","id","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","connectedCallback","observer","MutationObserver","mutationsList","forEach","mutation","type","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","handleEnded","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","disconnectedCallback","unmount","el","React","ImageClozeAssociationComponent","bind","createRoot","render","queueMicrotask","renderMath","exports","default"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { EnableAudioAutoplayImage } from '@pie-lib/render-ui';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport ImageClozeAssociationComponent from './root';\n\nexport default class ImageClozeAssociation extends HTMLElement {\n  constructor() {\n    super();\n    this._root = null;\n  }\n\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n    this._render();\n  }\n\n  isComplete() {\n    const {\n      autoplayAudioEnabled,\n      completeAudioEnabled,\n      completeResponses,\n      duplicateResponses,\n      hasUnplacedChoices,\n      maxResponsePerZone,\n      responseAreasToBeFilled,\n    } = this._model || {};\n    const elementContext = this;\n\n    // check audio completion if audio settings are enabled and audio actually exists\n    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {\n      if (elementContext) {\n        const audio = elementContext.querySelector('audio');\n        const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n        // only require audio completion if audio exists and is inside the prompt\n        if (audio && isInsidePrompt) {\n          return false;\n        }\n      }\n    }\n\n    if (!this._session || !this._session.answers) {\n      return false;\n    }\n\n    const { answers } = this._session;\n\n    if (!Array.isArray(answers)) {\n      return false;\n    }\n\n    // filter answers by containerIndex and count the ones with content\n    const filledResponseAreas = [...new Map(answers.map((item) => [item.containerIndex, item])).values()].length;\n    // check if an answer choice was added to at least as many response areas\n    // as the number of populated response areas in the correct answer\n    const areResponseAreasFilled = filledResponseAreas >= responseAreasToBeFilled;\n\n    if (maxResponsePerZone > 1) {\n      if (duplicateResponses) {\n        // an answer choice can be used multiple times\n        return areResponseAreasFilled;\n      }\n\n      // any correct answer have any unplaced answer choices (by the author)\n      if (hasUnplacedChoices) {\n        return areResponseAreasFilled;\n      }\n\n      const allAnswersValue = answers.map((answer) => answer.value);\n\n      // check if any correct answer have any unplaced answer choices (by the student)\n      const requiredAnswersPlaced = completeResponses.some((response) =>\n        response.every((val) => allAnswersValue.includes(val)),\n      );\n\n      // true - all choices (required for a correct response) were placed into a response area\n      return requiredAnswersPlaced;\n    }\n\n    return areResponseAreasFilled;\n  }\n\n  set session(s) {\n    if (s && !s.answers) {\n      s.answers = [];\n    }\n\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  updateAnswer(data) {\n    this._session.answers = data;\n    this._session.selector = 'Mouse';\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n    this._render();\n  }\n\n  _createAudioInfoToast() {\n    const info = document.createElement('div');\n    info.id = 'play-audio-info';\n\n    Object.assign(info.style, {\n      position: 'absolute',\n      top: 0,\n      width: '100%',\n      height: '100%',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      background: 'white',\n      zIndex: '1000',\n      cursor: 'pointer',\n    });\n\n    const img = document.createElement('img');\n    img.src = EnableAudioAutoplayImage;\n    img.alt = 'Click anywhere to enable audio autoplay';\n    img.width = 500;\n    img.height = 300;\n\n    info.appendChild(img);\n    return info;\n  }\n\n  connectedCallback() {\n    this._render();\n\n    // Observation:  audio in Chrome will have the autoplay attribute,\n    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n    const observer = new MutationObserver((mutationsList, observer) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          const audio = this.querySelector('audio');\n          const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n          if (!this._model) return;\n          if (!this._model.autoplayAudioEnabled) return;\n          if (audio && !isInsidePrompt) return;\n          if (!audio) return;\n\n          const info = this._createAudioInfoToast();\n          const container = this.querySelector('#main-container');\n          const enableAudio = () => {\n            if (this.querySelector('#play-audio-info')) {\n              audio.play();\n              container.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          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n          setTimeout(() => {\n            if (audio.paused && !this.querySelector('#play-audio-info')) {\n              // add info message as a toast to enable audio playback\n              container.appendChild(info);\n              document.addEventListener('click', enableAudio);\n            } else {\n              document.removeEventListener('click', enableAudio);\n            }\n          }, 500);\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\n            if (info) {\n              container.removeChild(info);\n            }\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.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n            audio.removeEventListener('ended', handleEnded);\n          };\n\n          audio.addEventListener('ended', handleEnded);\n\n          // store references to remove later\n          this._audio = audio;\n          this._handlePlaying = handlePlaying;\n          this._handleEnded = handleEnded;\n          this._enableAudio = enableAudio;\n\n          observer.disconnect();\n        }\n      });\n    });\n\n    observer.observe(this, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this._enableAudio);\n\n    if (this._audio) {\n      this._audio.removeEventListener('playing', this._handlePlaying);\n      this._audio.removeEventListener('ended', this._handleEnded);\n      this._audio = null;\n    }\n\n    if (this._root) {\n      this._root.unmount();\n      this._root = null;\n    }\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(ImageClozeAssociationComponent, {\n        model: this._model,\n        session: this._session,\n        updateAnswer: this.updateAnswer.bind(this),\n      });\n\n      if (!this._root) {\n        this._root = createRoot(this);\n      }\n      this._root.render(el);\n      queueMicrotask(() => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/image-cloze-association",
   "repository": "pie-framework/pie-elements",
-  "version": "10.1.1-next.39+8ff19496b",
+  "version": "10.1.1-next.54+a5b5d41c4",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -27,7 +27,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "8ff19496bc264eb4a2b28d731bfed4169620bf1d",
+  "gitHead": "a5b5d41c46c9e9fd43071144f013bbc4e20f90ae",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/index.js

@@ -222,6 +222,7 @@ export default class ImageClozeAssociation extends HTMLElement {
 
     if (this._root) {
       this._root.unmount();
+      this._root = null;
     }
   }