@pie-element/categorize 9.12.1-next.0 → 9.12.1-next.4

package/configure/package.json

@@ -12,7 +12,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.11.0",
+    "@pie-lib/pie-toolbox": "2.13.0",
     "classnames": "^2.2.5",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",

package/controller/package.json

@@ -2,7 +2,7 @@
   "name": "@pie-element/categorize-controller",
   "private": true,
   "dependencies": {
-    "@pie-lib/pie-toolbox": "2.11.0",
+    "@pie-lib/pie-toolbox": "2.13.0",
     "lodash": "^4.17.15"
   },
   "version": "7.7.4",

package/lib/index.js

@@ -25,6 +25,8 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _mathRendering = require("@pie-lib/pie-toolbox/math-rendering");
 
+var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+
 var _piePlayerEvents = require("@pie-framework/pie-player-events");
 
 var _categorize = _interopRequireDefault(require("./categorize"));
@@ -140,10 +142,11 @@ var Categorize = /*#__PURE__*/function (_HTMLElement) {
         justifyContent: 'center',
         alignItems: 'center',
         background: 'white',
-        zIndex: '1000'
+        zIndex: '1000',
+        cursor: 'pointer'
       });
       var img = document.createElement('img');
-      img.src = 'https://student.assessment.renaissance.com/ce/quizenginecap/assets/img/playAppsSel.gif';
+      img.src = _renderUi.EnableAudioAutoplayImage;
       img.alt = 'Click anywhere to enable audio autoplay';
       img.width = 500;
       img.height = 300;

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["Categorize","m","_model","eliminateBlindAnswersFromSession","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","render","autoplayAudioEnabled","completeAudioEnabled","audioComplete","_session","answers","Array","isArray","some","answer","choices","length","s","mappedChoices","map","c","id","filteredAnswers","answerChoices","filter","includes","changeAnswers","selector","SessionChangedEvent","info","document","createElement","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","img","src","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","el","React","CategorizeComponent","model","session","onAnswersChange","bind","onShowCorrectToggle","ReactDOM","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 { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';\nimport CategorizeComponent from './categorize';\n\nexport default class Categorize extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.eliminateBlindAnswersFromSession();\n    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n    this.render();\n  }\n\n  isComplete() {\n    const { autoplayAudioEnabled, completeAudioEnabled } =this._model || {};\n\n    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {\n      return false;\n    }\n\n    if (!this._session || !this._session.answers) {\n      return false;\n    }\n\n    if (!Array.isArray(this._session.answers)) {\n      return false;\n    }\n\n    return this._session.answers.some((answer) => answer.choices && answer.choices.length > 0);\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  eliminateBlindAnswersFromSession() {\n    const { answers = [] } = this._session || {};\n    const { choices = [] } = this._model || {};\n\n    const mappedChoices = choices.map((c) => c.id) || [];\n    const filteredAnswers = answers.map((answer) => {\n      const answerChoices = answer?.choices || [];\n      answer.choices = answerChoices.filter((c) => mappedChoices.includes(c));\n\n      return answer;\n    });\n\n    if (filteredAnswers.length > 0) {\n      this.changeAnswers(filteredAnswers);\n    }\n  }\n\n  changeAnswers(answers) {\n    this._session.answers = answers;\n    this._session.selector = 'Mouse';\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n    this.render();\n  }\n\n  onShowCorrectToggle() {\n    renderMath(this);\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    });\n\n    const img = document.createElement('img');\n    img.src = 'https://student.assessment.renaissance.com/ce/quizenginecap/assets/img/playAppsSel.gif';\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\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            //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.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\n  render() {\n    if (this._model && this._session) {\n      const el = React.createElement(CategorizeComponent, {\n        model: this._model,\n        session: this._session,\n        onAnswersChange: this.changeAnswers.bind(this),\n        onShowCorrectToggle: this.onShowCorrectToggle.bind(this),\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["Categorize","m","_model","eliminateBlindAnswersFromSession","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","render","autoplayAudioEnabled","completeAudioEnabled","audioComplete","_session","answers","Array","isArray","some","answer","choices","length","s","mappedChoices","map","c","id","filteredAnswers","answerChoices","filter","includes","changeAnswers","selector","SessionChangedEvent","info","document","createElement","Object","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","el","React","CategorizeComponent","model","session","onAnswersChange","bind","onShowCorrectToggle","ReactDOM","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 { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';\nimport CategorizeComponent from './categorize';\n\nexport default class Categorize extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.eliminateBlindAnswersFromSession();\n    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n    this.render();\n  }\n\n  isComplete() {\n    const { autoplayAudioEnabled, completeAudioEnabled } =this._model || {};\n\n    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {\n      return false;\n    }\n\n    if (!this._session || !this._session.answers) {\n      return false;\n    }\n\n    if (!Array.isArray(this._session.answers)) {\n      return false;\n    }\n\n    return this._session.answers.some((answer) => answer.choices && answer.choices.length > 0);\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  eliminateBlindAnswersFromSession() {\n    const { answers = [] } = this._session || {};\n    const { choices = [] } = this._model || {};\n\n    const mappedChoices = choices.map((c) => c.id) || [];\n    const filteredAnswers = answers.map((answer) => {\n      const answerChoices = answer?.choices || [];\n      answer.choices = answerChoices.filter((c) => mappedChoices.includes(c));\n\n      return answer;\n    });\n\n    if (filteredAnswers.length > 0) {\n      this.changeAnswers(filteredAnswers);\n    }\n  }\n\n  changeAnswers(answers) {\n    this._session.answers = answers;\n    this._session.selector = 'Mouse';\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n    this.render();\n  }\n\n  onShowCorrectToggle() {\n    renderMath(this);\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\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            //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.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\n  render() {\n    if (this._model && this._session) {\n      const el = React.createElement(CategorizeComponent, {\n        model: this._model,\n        session: this._session,\n        onAnswersChange: this.changeAnswers.bind(this),\n        onShowCorrectToggle: this.onShowCorrectToggle.bind(this),\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}

package/package.json

@@ -4,14 +4,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "9.12.1-next.0+8364834e8",
+  "version": "9.12.1-next.4+8e42a788f",
   "description": "",
   "author": "pie framework developers",
   "license": "ISC",
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.11.0",
+    "@pie-lib/pie-toolbox": "2.13.0",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "lodash": "^4.17.15",
@@ -20,7 +20,7 @@
     "react-dnd": "^14.0.5",
     "react-dom": "^16.8.1"
   },
-  "gitHead": "8364834e8dfe238958b0f54f5f216d443344bd21",
+  "gitHead": "8e42a788fed4639a4755b9087c2ca9059584b989",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },