npm - @pie-element/drag-in-the-blank - Versions diffs - 6.12.6-next.5 → 6.13.0 - Mend

@pie-element/drag-in-the-blank 6.12.6-next.5 → 6.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [6.13.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drag-in-the-blank@6.12.5...@pie-element/drag-in-the-blank@6.13.0) (2025-09-02)
+### Bug Fixes
+* update pie-lib/pie-toolbox PD-4579, PD-4430 ([277d2a6](https://github.com/pie-framework/pie-elements/commit/277d2a6bad2fc884ab9d980f71774ba9eca8dbb5))
+### Features
+* update audio completion checks only to be applied if the item has audio PD-5176 ([4c519b0](https://github.com/pie-framework/pie-elements/commit/4c519b08068328635ae2f6e9d5bdf82374a0637e))
 ## [6.12.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/drag-in-the-blank@6.12.4...@pie-element/drag-in-the-blank@6.12.5) (2025-08-15)

package/configure/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.6.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/drag-in-the-blank-configure@6.6.5...@pie-element/drag-in-the-blank-configure@6.6.6) (2025-09-02)
+### Bug Fixes
+* update pie-lib/pie-toolbox PD-4579, PD-4430 ([277d2a6](https://github.com/pie-framework/pie-elements/commit/277d2a6bad2fc884ab9d980f71774ba9eca8dbb5))
 ## [6.6.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/drag-in-the-blank-configure@6.6.4...@pie-element/drag-in-the-blank-configure@6.6.5) (2025-08-15)

package/configure/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/drag-in-the-blank-configure",
-  "version": "6.6.5",
+  "version": "6.6.6",
   "private": true,
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -8,7 +8,7 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.1",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "2.23.2",
+    "@pie-lib/pie-toolbox": "2.23.3",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",

package/controller/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.3.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/drag-in-the-blank-controller@6.3.5...@pie-element/drag-in-the-blank-controller@6.3.6) (2025-09-02)
+### Bug Fixes
+* update pie-lib/pie-toolbox PD-4579, PD-4430 ([277d2a6](https://github.com/pie-framework/pie-elements/commit/277d2a6bad2fc884ab9d980f71774ba9eca8dbb5))
 ## [6.3.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/drag-in-the-blank-controller@6.3.4...@pie-element/drag-in-the-blank-controller@6.3.5) (2025-08-15)

package/controller/package.json CHANGED Viewed

@@ -1,14 +1,14 @@
 {
   "name": "@pie-element/drag-in-the-blank-controller",
   "private": true,
-  "version": "6.3.5",
+  "version": "6.3.6",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@pie-lib/pie-toolbox": "2.23.2",
+    "@pie-lib/pie-toolbox": "2.23.3",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",
     "type-of": "^2.0.1"

package/lib/index.js CHANGED Viewed

@@ -39,13 +39,20 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var isComplete = function isComplete(session, model, audioComplete) {
+var isComplete = function isComplete(session, model, audioComplete, elementContext) {
   var _ref = model || {},
       autoplayAudioEnabled = _ref.autoplayAudioEnabled,
       completeAudioEnabled = _ref.completeAudioEnabled;
   if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {
-    return false;
+    if (elementContext) {
+      var audio = elementContext.querySelector('audio');
+      var isInsidePrompt = audio && audio.closest('#preview-prompt'); // only require audio completion if audio exists and is inside the prompt
+      if (audio && isInsidePrompt) {
+        return false;
+      }
+    }
   }
   if (!session || !session.value) {
@@ -83,7 +90,7 @@ var DragInTheBlank = /*#__PURE__*/function (_HTMLElement) {
       }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dispatchChangedEvent", function () {
-      _this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(_this.tagName.toLowerCase(), isComplete(_this._session, _this._model, _this.audioComplete)));
+      _this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(_this.tagName.toLowerCase(), isComplete(_this._session, _this._model, _this.audioComplete, (0, _assertThisInitialized2["default"])(_this))));
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeSession", function (value) {
       _this.session.value = value;
@@ -104,7 +111,7 @@ var DragInTheBlank = /*#__PURE__*/function (_HTMLElement) {
     key: "model",
     set: function set(m) {
       this._model = m;
-      this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete), !!this._model)); // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio
+      this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete, this), !!this._model)); // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio
       this._audioInitialized = false;

package/lib/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.js"],"names":["isComplete","session","model","audioComplete","autoplayAudioEnabled","completeAudioEnabled","value","Object","values","some","DragInTheBlank","_model","_session","elem","React","createElement","Main","onChange","changeSession","ReactDOM","render","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","selector","dispatchChangedEvent","_render","_audioInitialized","m","ModelSetEvent","s","info","document","id","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","observer","MutationObserver","mutationsList","forEach","mutation","type","audio","querySelector","isInsidePrompt","closest","_createAudioInfoToast","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","audioStartTime","Date","getTime","handleEnded","audioEndTime","waitTime","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","HTMLElement"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport { EnableAudioAutoplayImage } from '@pie-lib/pie-toolbox/render-ui';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport Main from './main';\n\nexport const isComplete = (session, model, audioComplete) => {\n const { autoplayAudioEnabled, completeAudioEnabled } = model \|\| {};\n\n if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {\n return false;\n }\n\n if (!session \|\| !session.value) {\n return false;\n }\n\n return Object.values(session.value \|\| {}).some((value) => !!value);\n};\n\nexport default class DragInTheBlank extends HTMLElement {\n constructor() {\n super();\n this._model = null;\n this._session = null;\n this._audioInitialized = false;\n this.audioComplete = false;\n }\n\n set model(m) {\n this._model = m;\n this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete), !!this._model));\n // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio\n this._audioInitialized = false;\n this._render();\n }\n\n set session(s) {\n this._session = s;\n this._render();\n }\n\n get session() {\n return this._session;\n }\n\n _render = () => {\n if (this._model && this._session) {\n let elem = React.createElement(Main, {\n model: this._model,\n value: this._session.value,\n onChange: this.changeSession,\n });\n\n ReactDOM.render(elem, this, () => {\n renderMath(this);\n });\n }\n };\n\n dispatchChangedEvent = () => {\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete)));\n };\n\n changeSession = (value) => {\n this.session.value = value;\n this.session.selector = 'Mouse';\n\n this.dispatchChangedEvent();\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 if (this._audioInitialized) return;\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 //timestamp when auto-played audio started playing\n this._session.audioStartTime = this._session.audioStartTime \|\| new Date().getTime();\n\n const info = this.querySelector('#play-audio-info');\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 //timestamp when auto-played audio completed playing\n this._session.audioEndTime = this._session.audioEndTime \|\| new Date().getTime();\n\n let { audioStartTime, audioEndTime, waitTime } = this._session;\n if(!waitTime && audioStartTime && audioEndTime) {\n // waitTime is elapsed time the user waited for auto-played audio to finish\n this._session.waitTime = (audioEndTime - audioStartTime);\n }\n\n this.audioComplete = true;\n this.dispatchChangedEvent();\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 // set to true to prevent multiple initializations\n this._audioInitialized = true;\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}\n"],"file":"index.js"}
1	+ {"version":3,"sources":["../src/index.js"],"names":["isComplete","session","model","audioComplete","elementContext","autoplayAudioEnabled","completeAudioEnabled","audio","querySelector","isInsidePrompt","closest","value","Object","values","some","DragInTheBlank","_model","_session","elem","React","createElement","Main","onChange","changeSession","ReactDOM","render","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","selector","dispatchChangedEvent","_render","_audioInitialized","m","ModelSetEvent","s","info","document","id","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","observer","MutationObserver","mutationsList","forEach","mutation","type","_createAudioInfoToast","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","audioStartTime","Date","getTime","handleEnded","audioEndTime","waitTime","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","HTMLElement"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport { EnableAudioAutoplayImage } from '@pie-lib/pie-toolbox/render-ui';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport Main from './main';\n\nexport const isComplete = (session, model, audioComplete, elementContext) => {\n const { autoplayAudioEnabled, completeAudioEnabled } = model \|\| {};\n\n if (autoplayAudioEnabled && completeAudioEnabled && !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 (!session \|\| !session.value) {\n return false;\n }\n\n return Object.values(session.value \|\| {}).some((value) => !!value);\n};\n\nexport default class DragInTheBlank extends HTMLElement {\n constructor() {\n super();\n this._model = null;\n this._session = null;\n this._audioInitialized = false;\n this.audioComplete = false;\n }\n\n set model(m) {\n this._model = m;\n this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete, this), !!this._model));\n // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio\n this._audioInitialized = false;\n this._render();\n }\n\n set session(s) {\n this._session = s;\n this._render();\n }\n\n get session() {\n return this._session;\n }\n\n _render = () => {\n if (this._model && this._session) {\n let elem = React.createElement(Main, {\n model: this._model,\n value: this._session.value,\n onChange: this.changeSession,\n });\n\n ReactDOM.render(elem, this, () => {\n renderMath(this);\n });\n }\n };\n\n dispatchChangedEvent = () => {\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete, this)));\n };\n\n changeSession = (value) => {\n this.session.value = value;\n this.session.selector = 'Mouse';\n\n this.dispatchChangedEvent();\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 if (this._audioInitialized) return;\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 //timestamp when auto-played audio started playing\n this._session.audioStartTime = this._session.audioStartTime \|\| new Date().getTime();\n\n const info = this.querySelector('#play-audio-info');\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 //timestamp when auto-played audio completed playing\n this._session.audioEndTime = this._session.audioEndTime \|\| new Date().getTime();\n\n let { audioStartTime, audioEndTime, waitTime } = this._session;\n if(!waitTime && audioStartTime && audioEndTime) {\n // waitTime is elapsed time the user waited for auto-played audio to finish\n this._session.waitTime = (audioEndTime - audioStartTime);\n }\n\n this.audioComplete = true;\n this.dispatchChangedEvent();\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 // set to true to prevent multiple initializations\n this._audioInitialized = true;\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}\n"],"file":"index.js"}

package/package.json CHANGED Viewed

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "6.12.6-next.5+cdce4e762",
+  "version": "6.13.0",
   "description": "",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
@@ -12,7 +12,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.23.2",
+    "@pie-lib/pie-toolbox": "2.23.3",
     "classnames": "^2.2.5",
     "lodash": "^4.17.10",
     "prop-types": "^15.6.1",
@@ -21,7 +21,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "cdce4e762f1e646e2295307d578ac15d51c554bc",
+  "gitHead": "bef1b851f70ca272ca37ee987d36750f1783781b",
   "main": "lib/index.js",
   "module": "src/index.js"
 }