@pie-element/multiple-choice 11.1.0 → 11.2.0-mui-update.0

package/lib/index.js

@@ -1,133 +1,89 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isComplete = exports["default"] = void 0;
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-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.isComplete = exports.default = void 0;
 var _main = _interopRequireDefault(require("./main"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
+var _client = require("react-dom/client");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
 var _debug = _interopRequireDefault(require("debug"));
-
 var _piePlayerEvents = require("@pie-framework/pie-player-events");
-
 var _mathRendering = require("@pie-lib/math-rendering");
-
 var _renderUi = require("@pie-lib/render-ui");
-
 var _sessionUpdater = require("./session-updater");
-
-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 log = (0, _debug["default"])('pie-ui:multiple-choice');
-
-var isComplete = function isComplete(session, model, audioComplete, elementContext) {
-  var _ref = model || {},
-      autoplayAudioEnabled = _ref.autoplayAudioEnabled,
-      completeAudioEnabled = _ref.completeAudioEnabled; // check audio completion if audio settings are enabled and audio actually exists
-
-
+const log = (0, _debug.default)('pie-ui:multiple-choice');
+const isComplete = (session, model, audioComplete, elementContext) => {
+  const {
+    autoplayAudioEnabled,
+    completeAudioEnabled
+  } = model || {};
+
+  // check audio completion if audio settings are enabled and audio actually exists
   if (autoplayAudioEnabled && completeAudioEnabled && !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
+      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;
       }
     }
   }
-
   if (!session || !session.value) {
     return false;
   }
-
-  var _ref2 = model || {},
-      choiceMode = _ref2.choiceMode,
-      _ref2$minSelections = _ref2.minSelections,
-      minSelections = _ref2$minSelections === void 0 ? 1 : _ref2$minSelections,
-      maxSelections = _ref2.maxSelections;
-
-  var selections = session.value.length || 0;
-
+  const {
+    choiceMode,
+    minSelections = 1,
+    maxSelections
+  } = model || {};
+  const selections = session.value.length || 0;
   if (choiceMode === 'radio') {
     return !!selections;
   }
-
   if (selections < minSelections || selections > maxSelections) {
     return false;
   }
-
   return true;
 };
-
 exports.isComplete = isComplete;
+class MultipleChoice extends HTMLElement {
+  constructor() {
+    super();
+    this._model = null;
+    this._session = null;
+    this.audioComplete = false;
+    this._boundHandleKeyDown = this.handleKeyDown.bind(this);
+    this._keyboardEventsEnabled = false;
+    this._audioInitialized = false;
+    this._root = null;
+    this._rerender = (0, _debounce.default)(() => {
+      if (this._model && this._session) {
+        var element = /*#__PURE__*/_react.default.createElement(_main.default, {
+          model: this._model,
+          session: this._session,
+          onChoiceChanged: this._onChange.bind(this),
+          onShowCorrectToggle: this.onShowCorrectToggle.bind(this)
+        });
 
-var MultipleChoice = /*#__PURE__*/function (_HTMLElement) {
-  (0, _inherits2["default"])(MultipleChoice, _HTMLElement);
-
-  var _super = _createSuper(MultipleChoice);
-
-  function MultipleChoice() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, MultipleChoice);
-    _this = _super.call(this);
-    _this._model = null;
-    _this._session = null;
-    _this.audioComplete = false;
-    _this._boundHandleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2["default"])(_this));
-    _this._keyboardEventsEnabled = false;
-    _this._audioInitialized = false;
-    _this._rerender = (0, _debounce["default"])(function () {
-      if (_this._model && _this._session) {
-        var element = /*#__PURE__*/_react["default"].createElement(_main["default"], {
-          model: _this._model,
-          session: _this._session,
-          onChoiceChanged: _this._onChange.bind((0, _assertThisInitialized2["default"])(_this)),
-          onShowCorrectToggle: _this.onShowCorrectToggle.bind((0, _assertThisInitialized2["default"])(_this))
-        }); //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender
-
-
-        _this.setAttribute('aria-label', _this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question');
-
-        _this.setAttribute('role', 'region');
-
-        _this.setLangAttribute();
-
-        _reactDom["default"].render(element, (0, _assertThisInitialized2["default"])(_this), function () {
+        //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender
+        this.setAttribute('aria-label', this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question');
+        this.setAttribute('role', 'region');
+        this.setLangAttribute();
+        if (!this._root) {
+          this._root = (0, _client.createRoot)(this);
+        }
+        this._root.render(element);
+        queueMicrotask(() => {
           log('render complete - render math');
-          (0, _mathRendering.renderMath)((0, _assertThisInitialized2["default"])(_this));
+          (0, _mathRendering.renderMath)(this);
         });
-
-        if (_this._model.keyboardEventsEnabled === true && !_this._keyboardEventsEnabled) {
-          _this.enableKeyboardEvents();
+        if (this._model.keyboardEventsEnabled === true && !this._keyboardEventsEnabled) {
+          this.enableKeyboardEvents();
         }
       } else {
         log('skip');
@@ -136,253 +92,201 @@ var MultipleChoice = /*#__PURE__*/function (_HTMLElement) {
       leading: false,
       trailing: true
     });
-    _this._dispatchResponseChanged = (0, _debounce["default"])(function () {
-      _this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(_this.tagName.toLowerCase(), isComplete(_this._session, _this._model, _this.audioComplete, (0, _assertThisInitialized2["default"])(_this))));
+    this._dispatchResponseChanged = (0, _debounce.default)(() => {
+      this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete, this)));
     });
-    _this._dispatchModelSet = (0, _debounce["default"])(function () {
-      _this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(_this.tagName.toLowerCase(), isComplete(_this._session, _this._model, _this.audioComplete, (0, _assertThisInitialized2["default"])(_this)), _this._model !== undefined));
+    this._dispatchModelSet = (0, _debounce.default)(() => {
+      this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete, this), this._model !== undefined));
     }, 50, {
       leading: false,
       trailing: true
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(MultipleChoice, [{
-    key: "onShowCorrectToggle",
-    value: function onShowCorrectToggle() {
-      (0, _mathRendering.renderMath)(this);
-    }
-  }, {
-    key: "setLangAttribute",
-    value: function setLangAttribute() {
-      var language = this._model && (0, _typeof2["default"])(this._model.language) ? this._model.language : '';
-      var lang = language ? language.slice(0, 2) : 'en';
-      this.setAttribute('lang', lang);
-    }
-  }, {
-    key: "model",
-    set: function set(s) {
-      this._model = s;
-
-      this._rerender(); // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio
-
-
-      this._audioInitialized = false;
-
-      this._dispatchModelSet();
+  onShowCorrectToggle() {
+    (0, _mathRendering.renderMath)(this);
+  }
+  setLangAttribute() {
+    const language = this._model && typeof this._model.language ? this._model.language : '';
+    const lang = language ? language.slice(0, 2) : 'en';
+    this.setAttribute('lang', lang);
+  }
+  set model(s) {
+    this._model = s;
+    this._rerender();
+    // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio
+    this._audioInitialized = false;
+    this._dispatchModelSet();
+  }
+  get session() {
+    return this._session;
+  }
+  set session(s) {
+    this._session = s;
+    this._rerender();
+    //TODO: remove this session-changed should only be emit on user change
+    this._dispatchResponseChanged();
+  }
+  _onChange(data) {
+    (0, _sessionUpdater.updateSessionValue)(this._session, this._model.choiceMode, data);
+    this._dispatchResponseChanged();
+    this._rerender();
+  }
+  _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._rerender();
+
+    // 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);
+            }
+          }, 500);
+
+          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
+          const handlePlaying = () => {
+            (0, _sessionUpdater.updateSessionMetadata)(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 = () => {
+            (0, _sessionUpdater.updateSessionMetadata)(this._session, {
+              audioEndTime: new Date().getTime()
+            });
+            this.audioComplete = true;
+            this._dispatchResponseChanged();
+            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
+    });
+  }
+  enableKeyboardEvents() {
+    if (!this._keyboardEventsEnabled) {
+      window.addEventListener('keydown', this._boundHandleKeyDown);
+      this._keyboardEventsEnabled = true;
     }
-  }, {
-    key: "session",
-    get: function get() {
-      return this._session;
-    },
-    set: function set(s) {
-      this._session = s;
-
-      this._rerender(); //TODO: remove this session-changed should only be emit on user change
-
-
-      this._dispatchResponseChanged();
+  }
+  disconnectedCallback() {
+    if (this._keyboardEventsEnabled) {
+      window.removeEventListener('keydown', this._boundHandleKeyDown);
+      this._keyboardEventsEnabled = false;
     }
-  }, {
-    key: "_onChange",
-    value: function _onChange(data) {
-      (0, _sessionUpdater.updateSessionValue)(this._session, this._model.choiceMode, data);
-
-      this._dispatchResponseChanged();
-
-      this._rerender();
+    document.removeEventListener('click', this._enableAudio);
+    if (this._audio) {
+      this._audio.removeEventListener('playing', this._handlePlaying);
+      this._audio.removeEventListener('ended', this._handleEnded);
+      this._audio = null;
     }
-  }, {
-    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;
+    if (this._root) {
+      this._root.unmount();
     }
-  }, {
-    key: "connectedCallback",
-    value: function connectedCallback() {
-      var _this2 = this;
-
-      this._rerender(); // 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 (_this2._audioInitialized) return;
-
-            var audio = _this2.querySelector('audio');
-
-            var isInsidePrompt = audio && audio.closest('#preview-prompt');
-            if (!_this2._model) return;
-            if (!_this2._model.autoplayAudioEnabled) return;
-            if (audio && !isInsidePrompt) return;
-            if (!audio) return;
-
-            var info = _this2._createAudioInfoToast();
-
-            var container = _this2.querySelector('#main-container');
-
-            var enableAudio = function enableAudio() {
-              if (_this2.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(function () {
-              if (audio.paused && !_this2.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() {
-              (0, _sessionUpdater.updateSessionMetadata)(_this2._session, {
-                audioStartTime: new Date().getTime()
-              });
-
-              var info = _this2.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() {
-              (0, _sessionUpdater.updateSessionMetadata)(_this2._session, {
-                audioEndTime: new Date().getTime()
-              });
-              _this2.audioComplete = true;
-
-              _this2._dispatchResponseChanged();
-
-              audio.removeEventListener('ended', handleEnded);
-            };
-
-            audio.addEventListener('ended', handleEnded); // store references to remove later
-
-            _this2._audio = audio;
-            _this2._handlePlaying = handlePlaying;
-            _this2._handleEnded = handleEnded;
-            _this2._enableAudio = enableAudio; // set to true to prevent multiple initializations
+  }
 
-            _this2._audioInitialized = true;
-            observer.disconnect();
-          }
-        });
-      });
-      observer.observe(this, {
-        childList: true,
-        subtree: true
-      });
+  /**
+   * Handles global keyboard events for selecting or toggling multiple-choice answers.
+   * Maps keys (1-9, 0, a-j, A-J) to choices and updates the session state accordingly.
+   * Ensures valid key presses toggle or select the appropriate choice based on the model.
+   */
+  handleKeyDown(event) {
+    if (!this._model || !this._session) {
+      return;
     }
-  }, {
-    key: "enableKeyboardEvents",
-    value: function enableKeyboardEvents() {
-      if (!this._keyboardEventsEnabled) {
-        window.addEventListener('keydown', this._boundHandleKeyDown);
-        this._keyboardEventsEnabled = true;
-      }
+    const {
+      mode
+    } = this._model;
+    if (mode !== 'gather') {
+      return;
     }
-  }, {
-    key: "disconnectedCallback",
-    value: function disconnectedCallback() {
-      if (this._keyboardEventsEnabled) {
-        window.removeEventListener('keydown', this._boundHandleKeyDown);
-        this._keyboardEventsEnabled = false;
-      }
-
-      document.removeEventListener('click', this._enableAudio);
-
-      if (this._audio) {
-        this._audio.removeEventListener('playing', this._handlePlaying);
-
-        this._audio.removeEventListener('ended', this._handleEnded);
-
-        this._audio = null;
-      }
+    const keyToIndex = key => {
+      const numOffset = key >= '1' && key <= '9' ? key - '1' : key === '0' ? 9 : -1;
+      const letterOffset = /^[a-jA-J]$/.test(key) ? key.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0) : -1;
+      return numOffset >= 0 ? numOffset : letterOffset;
+    };
+    const choiceIndex = keyToIndex(event.key);
+    if (choiceIndex === undefined || choiceIndex <= -1 || choiceIndex >= this._model.choices?.length) {
+      return;
     }
-    /**
-     * Handles global keyboard events for selecting or toggling multiple-choice answers.
-     * Maps keys (1-9, 0, a-j, A-J) to choices and updates the session state accordingly.
-     * Ensures valid key presses toggle or select the appropriate choice based on the model.
-     */
-
-  }, {
-    key: "handleKeyDown",
-    value: function handleKeyDown(event) {
-      var _this$_model$choices;
-
-      if (!this._model || !this._session) {
-        return;
-      }
-
-      var mode = this._model.mode;
-
-      if (mode !== 'gather') {
-        return;
-      }
-
-      var keyToIndex = function keyToIndex(key) {
-        var numOffset = key >= '1' && key <= '9' ? key - '1' : key === '0' ? 9 : -1;
-        var letterOffset = /^[a-jA-J]$/.test(key) ? key.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0) : -1;
-        return numOffset >= 0 ? numOffset : letterOffset;
-      };
-
-      var choiceIndex = keyToIndex(event.key);
-
-      if (choiceIndex === undefined || choiceIndex <= -1 || choiceIndex >= ((_this$_model$choices = this._model.choices) === null || _this$_model$choices === void 0 ? void 0 : _this$_model$choices.length)) {
-        return;
-      }
-
-      var currentValue = this._session.value || [];
-      var choiceId = this._model.choices[choiceIndex].value;
-      var newValue = {
-        value: choiceId,
-        selected: !currentValue.includes(choiceId),
-        selector: 'Keyboard'
-      };
-
-      this._onChange(newValue);
-    }
-  }]);
-  return MultipleChoice;
-}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
-
-exports["default"] = MultipleChoice;
+    const currentValue = this._session.value || [];
+    const choiceId = this._model.choices[choiceIndex].value;
+    const newValue = {
+      value: choiceId,
+      selected: !currentValue.includes(choiceId),
+      selector: 'Keyboard'
+    };
+    this._onChange(newValue);
+  }
+}
+exports.default = MultipleChoice;
 //# sourceMappingURL=index.js.map