@pie-element/categorize 11.3.4-next.0 → 12.0.0-beta.0

package/lib/index.js

@@ -1,337 +1,316 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
-
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
+var _client = require("react-dom/client");
 var _mathRendering = require("@pie-lib/math-rendering");
-
 var _renderUi = require("@pie-lib/render-ui");
-
 var _piePlayerEvents = require("@pie-framework/pie-player-events");
-
 var _categorize = _interopRequireDefault(require("./categorize"));
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-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 Categorize = /*#__PURE__*/function (_HTMLElement) {
-  (0, _inherits2["default"])(Categorize, _HTMLElement);
-
-  var _super = _createSuper(Categorize);
-
-  function Categorize() {
-    (0, _classCallCheck2["default"])(this, Categorize);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2["default"])(Categorize, [{
-    key: "model",
-    set: function set(m) {
-      this._model = m;
-      this.eliminateBlindAnswersFromSession();
-      this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model)); // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio
-
-      this._audioInitialized = false;
-      this.render();
-    }
-  }, {
-    key: "isComplete",
-    value: function isComplete() {
-      var _ref = this._model || {},
-          autoplayAudioEnabled = _ref.autoplayAudioEnabled,
-          choices = _ref.choices,
-          completeAudioEnabled = _ref.completeAudioEnabled,
-          hasUnplacedChoices = _ref.hasUnplacedChoices,
-          possibleResponses = _ref.possibleResponses,
-          responseAreasToBeFilled = _ref.responseAreasToBeFilled;
-
-      var elementContext = this; // check audio completion if audio settings are enabled and audio actually exists
-
-      if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {
-        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;
-          }
+class Categorize extends HTMLElement {
+  constructor() {
+    super();
+    (0, _defineProperty2.default)(this, "_scheduleMathRender", () => {
+      if (this._mathRenderPending) return;
+      this._mathRenderPending = true;
+      requestAnimationFrame(() => {
+        if (this._mathObserver && !this._mathObserverPaused) {
+          this._mathObserver.disconnect();
         }
-      }
-
-      if (!this._session || !this._session.answers) {
-        return false;
-      }
-
-      var answers = this._session.answers;
-
-      if (!Array.isArray(answers)) {
-        return false;
-      } // filter answers by category and count the ones with content
-
-
-      var filledResponseAreas = answers.filter(function (answer) {
-        return answer.choices.length;
-      }).length; // check if an answer choice was added to at least as many response areas
-      // as the number of populated response areas in the correct answer
-
-      var areResponseAreasFilled = filledResponseAreas >= responseAreasToBeFilled; // check if multiple placements are allowed
-
-      var duplicatesAllowed = (choices || []).some(function (choice) {
-        return choice.categoryCount === 0;
+        (0, _mathRendering.renderMath)(this);
+        this._mathRenderPending = false;
+        setTimeout(() => {
+          if (this._mathObserver && !this._mathObserverPaused) {
+            this._mathObserver.observe(this, {
+              childList: true,
+              subtree: true,
+              characterData: false
+            });
+          }
+        }, 50);
       });
-
-      if (duplicatesAllowed) {
-        // an answer choice can be used multiple times
-        return areResponseAreasFilled;
-      } // any correct answer have any unplaced answer choices (by the author)
-
-
-      if (hasUnplacedChoices) {
-        return areResponseAreasFilled;
+    });
+    (0, _defineProperty2.default)(this, "pauseMathObserver", () => {
+      if (this._mathObserver) {
+        this._mathObserver.disconnect();
+        this._mathObserverPaused = true;
       }
-
-      var allAnswersIds = answers.map(function (answer) {
-        return answer.choices;
-      }).flat(); // check if any correct answer have any unplaced answer choices (by the student)
-
-      var requiredAnswersPlaced = (possibleResponses || []).some(function (response) {
-        return response.every(function (val) {
-          return allAnswersIds.includes(val);
-        });
-      }); // true - all choices (required for a correct response) were placed into a response area
-
-      return requiredAnswersPlaced;
-    }
-  }, {
-    key: "session",
-    get: function get() {
-      return this._session;
-    },
-    set: function set(s) {
-      if (s && !s.answers) {
-        s.answers = [];
+    });
+    (0, _defineProperty2.default)(this, "resumeMathObserver", () => {
+      if (this._mathObserverPaused) {
+        this._mathObserverPaused = false;
+        if (this._mathObserver) {
+          this._mathObserver.observe(this, {
+            childList: true,
+            subtree: true,
+            characterData: false
+          });
+        }
       }
-
-      this._session = s;
-      this.render();
+    });
+    this._root = null;
+    this._mathObserver = null;
+    this._mathRenderPending = false;
+  }
+  _initMathObserver() {
+    if (this._mathObserver) return;
+    this._mathObserver = new MutationObserver(() => {
+      this._scheduleMathRender();
+    });
+    this._mathObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      characterData: false
+    });
+  }
+  _disconnectMathObserver() {
+    if (this._mathObserver) {
+      this._mathObserver.disconnect();
+      this._mathObserver = null;
     }
-  }, {
-    key: "eliminateBlindAnswersFromSession",
-    value: function eliminateBlindAnswersFromSession() {
-      var _ref2 = this._session || {},
-          _ref2$answers = _ref2.answers,
-          answers = _ref2$answers === void 0 ? [] : _ref2$answers;
-
-      var _ref3 = this._model || {},
-          _ref3$choices = _ref3.choices,
-          choices = _ref3$choices === void 0 ? [] : _ref3$choices;
-
-      var mappedChoices = choices.map(function (c) {
-        return c.id;
-      }) || [];
-      var filteredAnswers = answers.map(function (answer) {
-        var answerChoices = (answer === null || answer === void 0 ? void 0 : answer.choices) || [];
-        answer.choices = answerChoices.filter(function (c) {
-          return mappedChoices.includes(c);
-        });
-        return answer;
-      });
-
-      if (filteredAnswers.length > 0) {
-        this.changeAnswers(filteredAnswers);
+  }
+  set model(m) {
+    this._model = m;
+    this.eliminateBlindAnswersFromSession();
+    this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
+    // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio
+    this._audioInitialized = false;
+    this.render();
+  }
+  isComplete() {
+    const {
+      autoplayAudioEnabled,
+      choices,
+      completeAudioEnabled,
+      hasUnplacedChoices,
+      possibleResponses,
+      responseAreasToBeFilled
+    } = this._model || {};
+    const elementContext = this;
+
+    // check audio completion if audio settings are enabled and audio actually exists
+    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {
+      if (elementContext) {
+        const audio = elementContext.querySelector('audio');
+        const isInsidePrompt = audio && audio.closest('#preview-prompt');
+
+        // only require audio completion if audio exists and is inside the prompt
+        if (audio && isInsidePrompt) {
+          return false;
+        }
       }
     }
-  }, {
-    key: "changeAnswers",
-    value: function changeAnswers(answers) {
-      this._session.answers = answers;
-      this._session.selector = 'Mouse';
-      this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
-      this.render();
+    if (!this._session || !this._session.answers) {
+      return false;
     }
-  }, {
-    key: "onShowCorrectToggle",
-    value: function onShowCorrectToggle() {
-      (0, _mathRendering.renderMath)(this);
+    const {
+      answers
+    } = this._session;
+    if (!Array.isArray(answers)) {
+      return false;
     }
-  }, {
-    key: "_createAudioInfoToast",
-    value: function _createAudioInfoToast() {
-      var info = document.createElement('div');
-      info.id = 'play-audio-info';
-      Object.assign(info.style, {
-        position: 'absolute',
-        top: 0,
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        background: 'white',
-        zIndex: '1000',
-        cursor: 'pointer'
-      });
-      var img = document.createElement('img');
-      img.src = _renderUi.EnableAudioAutoplayImage;
-      img.alt = 'Click anywhere to enable audio autoplay';
-      img.width = 500;
-      img.height = 300;
-      info.appendChild(img);
-      return info;
-    }
-  }, {
-    key: "connectedCallback",
-    value: function connectedCallback() {
-      var _this = this;
-
-      // Observation:  audio in Chrome will have the autoplay attribute,
-      // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio
-      // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox
-      var observer = new MutationObserver(function (mutationsList, observer) {
-        mutationsList.forEach(function (mutation) {
-          if (mutation.type === 'childList') {
-            if (_this._audioInitialized) return;
 
-            var audio = _this.querySelector('audio');
-
-            var isInsidePrompt = audio && audio.closest('#preview-prompt');
-            if (!_this._model) return;
-            if (!_this._model.autoplayAudioEnabled) return;
-            if (audio && !isInsidePrompt) return;
-            if (!audio) return;
-
-            var info = _this._createAudioInfoToast();
+    // filter answers by category and count the ones with content
+    const filledResponseAreas = answers.filter(answer => answer.choices.length).length;
+    // check if an answer choice was added to at least as many response areas
+    // as the number of populated response areas in the correct answer
+    const areResponseAreasFilled = filledResponseAreas >= responseAreasToBeFilled;
+    // check if multiple placements are allowed
+    const duplicatesAllowed = (choices || []).some(choice => choice.categoryCount === 0);
+    if (duplicatesAllowed) {
+      // an answer choice can be used multiple times
+      return areResponseAreasFilled;
+    }
 
-            var container = _this.querySelector('#main-container');
+    // any correct answer have any unplaced answer choices (by the author)
+    if (hasUnplacedChoices) {
+      return areResponseAreasFilled;
+    }
+    const allAnswersIds = answers.map(answer => answer.choices).flat();
 
-            var enableAudio = function enableAudio() {
-              if (_this.querySelector('#play-audio-info')) {
-                audio.play();
-                container.removeChild(info);
-              }
+    // check if any correct answer have any unplaced answer choices (by the student)
+    const requiredAnswersPlaced = (possibleResponses || []).some(response => response.every(val => allAnswersIds.includes(val)));
 
+    // true - all choices (required for a correct response) were placed into a response area
+    return requiredAnswersPlaced;
+  }
+  set session(s) {
+    if (s && !s.answers) {
+      s.answers = [];
+    }
+    this._session = s;
+    this.render();
+  }
+  get session() {
+    return this._session;
+  }
+  eliminateBlindAnswersFromSession() {
+    const {
+      answers = []
+    } = this._session || {};
+    const {
+      choices = []
+    } = this._model || {};
+    const mappedChoices = choices.map(c => c.id) || [];
+    const filteredAnswers = answers.map(answer => {
+      const answerChoices = answer?.choices || [];
+      answer.choices = answerChoices.filter(c => mappedChoices.includes(c));
+      return answer;
+    });
+    if (filteredAnswers.length > 0) {
+      this.changeAnswers(filteredAnswers);
+    }
+  }
+  changeAnswers(answers) {
+    this._session.answers = answers;
+    this._session.selector = 'Mouse';
+    this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
+    this.render();
+  }
+  onShowCorrectToggle() {
+    (0, _mathRendering.renderMath)(this);
+  }
+  _createAudioInfoToast() {
+    const info = document.createElement('div');
+    info.id = 'play-audio-info';
+    Object.assign(info.style, {
+      position: 'absolute',
+      top: 0,
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      background: 'white',
+      zIndex: '1000',
+      cursor: 'pointer'
+    });
+    const img = document.createElement('img');
+    img.src = _renderUi.EnableAudioAutoplayImage;
+    img.alt = 'Click anywhere to enable audio autoplay';
+    img.width = 500;
+    img.height = 300;
+    info.appendChild(img);
+    return info;
+  }
+  connectedCallback() {
+    this._initMathObserver();
+
+    // Observation:  audio in Chrome will have the autoplay attribute,
+    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio
+    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox
+    const observer = new MutationObserver((mutationsList, observer) => {
+      mutationsList.forEach(mutation => {
+        if (mutation.type === 'childList') {
+          if (this._audioInitialized) return;
+          const audio = this.querySelector('audio');
+          const isInsidePrompt = audio && audio.closest('#preview-prompt');
+          if (!this._model) return;
+          if (!this._model.autoplayAudioEnabled) return;
+          if (audio && !isInsidePrompt) return;
+          if (!audio) return;
+          const info = this._createAudioInfoToast();
+          const container = this.querySelector('#main-container');
+          const enableAudio = () => {
+            if (this.querySelector('#play-audio-info')) {
+              audio.play();
+              container.removeChild(info);
+            }
+            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
+          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked
+          setTimeout(() => {
+            if (audio.paused && !this.querySelector('#play-audio-info')) {
+              // add info message as a toast to enable audio playback
+              container.appendChild(info);
+              document.addEventListener('click', enableAudio);
+            } else {
               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
-            // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked
-
-
-            setTimeout(function () {
-              if (audio.paused && !_this.querySelector('#play-audio-info')) {
-                // add info message as a toast to enable audio playback
-                container.appendChild(info);
-                document.addEventListener('click', enableAudio);
-              } else {
-                document.removeEventListener('click', enableAudio);
-              }
-            }, 500); // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
-
-            var handlePlaying = function handlePlaying() {
-              //timestamp when auto-played audio started playing
-              _this._session.audioStartTime = _this._session.audioStartTime || new Date().getTime();
-
-              var info = _this.querySelector('#play-audio-info');
-
-              if (info) {
-                container.removeChild(info);
-              }
-
-              audio.removeEventListener('playing', handlePlaying);
-            };
-
-            audio.addEventListener('playing', handlePlaying); // we need to listen for the ended event to update the isComplete state
-
-            var handleEnded = function handleEnded() {
-              //timestamp when auto-played audio completed playing
-              _this._session.audioEndTime = _this._session.audioEndTime || new Date().getTime();
-              var _this$_session = _this._session,
-                  audioStartTime = _this$_session.audioStartTime,
-                  audioEndTime = _this$_session.audioEndTime,
-                  waitTime = _this$_session.waitTime;
-
-              if (!waitTime && audioStartTime && audioEndTime) {
-                // waitTime is elapsed time the user waited for auto-played audio to finish
-                _this._session.waitTime = audioEndTime - audioStartTime;
-              }
-
-              _this.audioComplete = true;
-
-              _this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(_this.tagName.toLowerCase(), _this.isComplete()));
-
-              audio.removeEventListener('ended', handleEnded);
-            };
-
-            audio.addEventListener('ended', handleEnded); // store references to remove later
-
-            _this._audio = audio;
-            _this._handlePlaying = handlePlaying;
-            _this._handleEnded = handleEnded;
-            _this._enableAudio = enableAudio; // set to true to prevent multiple initializations
-
-            _this._audioInitialized = true;
-            observer.disconnect();
-          }
-        });
-      });
-      observer.observe(this, {
-        childList: true,
-        subtree: true
+            }
+          }, 500);
+
+          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
+          const handlePlaying = () => {
+            //timestamp when auto-played audio started playing
+            this._session.audioStartTime = this._session.audioStartTime || new Date().getTime();
+            const info = this.querySelector('#play-audio-info');
+            if (info) {
+              container.removeChild(info);
+            }
+            audio.removeEventListener('playing', handlePlaying);
+          };
+          audio.addEventListener('playing', handlePlaying);
+
+          // we need to listen for the ended event to update the isComplete state
+          const handleEnded = () => {
+            //timestamp when auto-played audio completed playing
+            this._session.audioEndTime = this._session.audioEndTime || new Date().getTime();
+            let {
+              audioStartTime,
+              audioEndTime,
+              waitTime
+            } = this._session;
+            if (!waitTime && audioStartTime && audioEndTime) {
+              // waitTime is elapsed time the user waited for auto-played audio to finish
+              this._session.waitTime = audioEndTime - audioStartTime;
+            }
+            this.audioComplete = true;
+            this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
+            audio.removeEventListener('ended', handleEnded);
+          };
+          audio.addEventListener('ended', handleEnded);
+
+          // store references to remove later
+          this._audio = audio;
+          this._handlePlaying = handlePlaying;
+          this._handleEnded = handleEnded;
+          this._enableAudio = enableAudio;
+          // set to true to prevent multiple initializations
+          this._audioInitialized = true;
+          observer.disconnect();
+        }
       });
+    });
+    observer.observe(this, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this._disconnectMathObserver();
+    document.removeEventListener('click', this._enableAudio);
+    if (this._audio) {
+      this._audio.removeEventListener('playing', this._handlePlaying);
+      this._audio.removeEventListener('ended', this._handleEnded);
+      this._audio = null;
     }
-  }, {
-    key: "disconnectedCallback",
-    value: function disconnectedCallback() {
-      document.removeEventListener('click', this._enableAudio);
-
-      if (this._audio) {
-        this._audio.removeEventListener('playing', this._handlePlaying);
-
-        this._audio.removeEventListener('ended', this._handleEnded);
-
-        this._audio = null;
-      }
+    if (this._root) {
+      this._root.unmount();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      if (this._model && this._session) {
-        var el = /*#__PURE__*/_react["default"].createElement(_categorize["default"], {
-          model: this._model,
-          session: this._session,
-          onAnswersChange: this.changeAnswers.bind(this),
-          onShowCorrectToggle: this.onShowCorrectToggle.bind(this)
-        });
-
-        _reactDom["default"].render(el, this, function () {
-          (0, _mathRendering.renderMath)(_this2);
-        });
+  }
+  render() {
+    if (this._model && this._session) {
+      const el = /*#__PURE__*/_react.default.createElement(_categorize.default, {
+        model: this._model,
+        session: this._session,
+        onAnswersChange: this.changeAnswers.bind(this),
+        onShowCorrectToggle: this.onShowCorrectToggle.bind(this),
+        pauseMathObserver: this.pauseMathObserver,
+        resumeMathObserver: this.resumeMathObserver
+      });
+      if (!this._root) {
+        this._root = (0, _client.createRoot)(this);
       }
+      this._root.render(el);
     }
-  }]);
-  return Categorize;
-}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
-
-exports["default"] = Categorize;
+  }
+}
+exports.default = Categorize;
 //# sourceMappingURL=index.js.map