@pie-element/explicit-constructed-response 11.1.2-next.2 → 11.1.2

package/lib/index.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _piePlayerEvents = require("@pie-framework/pie-player-events");
+var _mathRendering = require("@pie-lib/math-rendering");
+var _main = _interopRequireDefault(require("./main"));
+class InlineDropdown extends HTMLElement {
+  constructor() {
+    super();
+    (0, _defineProperty2.default)(this, "_render", () => {
+      if (this._model && this._session) {
+        let elem = /*#__PURE__*/_react.default.createElement(_main.default, {
+          choices: this._model.choices,
+          disabled: this._model.disabled,
+          displayType: this._model.displayType,
+          feedback: this._model.feedback,
+          language: this._model.language,
+          markup: this._model.markup,
+          maxLengthPerChoice: this._model.maxLengthPerChoice,
+          maxLengthPerChoiceEnabled: this._model.maxLengthPerChoiceEnabled,
+          mode: this._model.mode,
+          note: this._model.note,
+          onChange: this.changeSession,
+          playerSpellCheckEnabled: this._model.playerSpellCheckEnabled,
+          prompt: this._model.prompt,
+          rationale: this._model.rationale,
+          role: this._model.role,
+          showNote: this._model.showNote,
+          teacherInstructions: this._model.teacherInstructions,
+          value: this._session.value,
+          responseAreaInputConfiguration: this._model.responseAreaInputConfiguration
+        });
+        if (!this._root) {
+          this._root = (0, _client.createRoot)(this);
+        }
+        this._root.render(elem);
+        queueMicrotask(() => {
+          (0, _mathRendering.renderMath)(this);
+        });
+      }
+    });
+    (0, _defineProperty2.default)(this, "dispatchChangedEvent", () => {
+      this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.session && !!this.session.value));
+    });
+    (0, _defineProperty2.default)(this, "changeSession", value => {
+      this.session.value = value;
+      this.dispatchChangedEvent();
+      this._render();
+    });
+    this._model = null;
+    this._session = null;
+    this._root = null;
+  }
+  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(m) {
+    this._model = m;
+    this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.session && !!this.session.value, !!this._model));
+    this.setLangAttribute();
+    this._render();
+  }
+  set session(s) {
+    this._session = s;
+    this._render();
+  }
+  get session() {
+    return this._session;
+  }
+  connectedCallback() {
+    this.setAttribute('aria-label', 'Fill in the Blank Question');
+    this.setAttribute('role', 'region');
+    this._render();
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = InlineDropdown;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_piePlayerEvents","_mathRendering","_main","InlineDropdown","HTMLElement","constructor","_defineProperty2","default","_model","_session","elem","React","createElement","Main","choices","disabled","displayType","feedback","language","markup","maxLengthPerChoice","maxLengthPerChoiceEnabled","mode","note","onChange","changeSession","playerSpellCheckEnabled","prompt","rationale","role","showNote","teacherInstructions","value","responseAreaInputConfiguration","_root","createRoot","render","queueMicrotask","renderMath","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","session","dispatchChangedEvent","_render","setLangAttribute","lang","slice","setAttribute","model","m","ModelSetEvent","s","connectedCallback","disconnectedCallback","unmount","exports"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nimport Main from './main';\n\nexport default class InlineDropdown extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n    this._root = null;\n  }\n\n  setLangAttribute() {\n    const language = this._model && typeof this._model.language ? this._model.language : '';\n    const lang = language ? language.slice(0, 2) : 'en';\n    this.setAttribute('lang', lang);\n  }\n\n  set model(m) {\n    this._model = m;\n    this.dispatchEvent(\n      new ModelSetEvent(this.tagName.toLowerCase(), this.session && !!this.session.value, !!this._model),\n    );\n    this.setLangAttribute();\n\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        choices: this._model.choices,\n        disabled: this._model.disabled,\n        displayType: this._model.displayType,\n        feedback: this._model.feedback,\n        language: this._model.language,\n        markup: this._model.markup,\n        maxLengthPerChoice: this._model.maxLengthPerChoice,\n        maxLengthPerChoiceEnabled: this._model.maxLengthPerChoiceEnabled,\n        mode: this._model.mode,\n        note: this._model.note,\n        onChange: this.changeSession,\n        playerSpellCheckEnabled: this._model.playerSpellCheckEnabled,\n        prompt: this._model.prompt,\n        rationale: this._model.rationale,\n        role: this._model.role,\n        showNote: this._model.showNote,\n        teacherInstructions: this._model.teacherInstructions,\n        value: this._session.value,\n        responseAreaInputConfiguration: this._model.responseAreaInputConfiguration,\n      });\n\n      if (!this._root) {\n        this._root = createRoot(this);\n      }\n      this._root.render(elem);\n      queueMicrotask(() => {\n        renderMath(this);\n      });\n    }\n  };\n\n  dispatchChangedEvent = () => {\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.session && !!this.session.value));\n  };\n\n  changeSession = (value) => {\n    this.session.value = value;\n    this.dispatchChangedEvent();\n    this._render();\n  };\n\n  connectedCallback() {\n    this.setAttribute('aria-label', 'Fill in the Blank Question');\n    this.setAttribute('role', 'region');\n\n    this._render();\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/main.js

@@ -0,0 +1,205 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Main = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lodashEs = require("lodash-es");
+var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
+var _maskMarkup = require("@pie-lib/mask-markup");
+var _renderUi = require("@pie-lib/render-ui");
+var _styles = require("@mui/material/styles");
+var _translator = _interopRequireDefault(require("@pie-lib/translator"));
+const {
+  translator
+} = _translator.default;
+const MainContainer = (0, _styles.styled)(_renderUi.UiLayout)(({
+  alwaysShowCorrect
+}) => ({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  ...(alwaysShowCorrect && {
+    '& *': {
+      borderColor: `${_renderUi.color.text()} !important`
+    }
+  })
+}));
+const NoteContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const CollapsibleContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const SrOnly = (0, _styles.styled)('h2')({
+  position: 'absolute',
+  left: '-10000px',
+  top: 'auto',
+  width: '1px',
+  height: '1px',
+  overflow: 'hidden'
+});
+class Main extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
+      showCorrectAnswer: this.props.alwaysShowCorrect || false
+    });
+    // if for all responses max length is 1, call onChange for each keystroke
+    (0, _defineProperty2.default)(this, "getChangeSession", maxLengthPerChoice => maxLengthPerChoice && maxLengthPerChoice.every((val, _i, arr) => val === arr[0] && val === 1) ? this.props.onChange : (0, _lodashEs.debounce)(this.props.onChange, 200, {
+      maxWait: 200
+    }));
+    (0, _defineProperty2.default)(this, "toggleShowCorrect", () => {
+      this.setState({
+        showCorrectAnswer: !this.state.showCorrectAnswer
+      });
+    });
+    (0, _defineProperty2.default)(this, "changeSession", this.getChangeSession(this.props.maxLengthPerChoice));
+    (0, _defineProperty2.default)(this, "onChange", value => {
+      this.changeSession(value);
+    });
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      maxLengthPerChoice,
+      language
+    } = this.props;
+    let {
+      note
+    } = this.props;
+    if ((0, _lodashEs.isEmpty)(nextProps.feedback)) {
+      this.setState({
+        showCorrectAnswer: false
+      });
+    }
+    if (nextProps.alwaysShowCorrect) {
+      this.setState({
+        showCorrectAnswer: true
+      });
+    }
+    if (maxLengthPerChoice && !(0, _lodashEs.isEqual)(maxLengthPerChoice, nextProps.maxLengthPerChoice)) {
+      this.changeSession = this.getChangeSession(nextProps.maxLengthPerChoice);
+    }
+
+    // check if the note is the default one for prev language and change to the default one for new language
+    // this check is necessary in order to diferanciate between default and authour defined note
+    // and only change between languages for default ones
+    if (note && language && language !== nextProps.language && note === translator.t('common:commonCorrectAnswerWithAlternates', {
+      lng: language
+    })) {
+      note = translator.t('common:commonCorrectAnswerWithAlternates', {
+        lng: nextProps.language
+      });
+    }
+  }
+  render() {
+    const {
+      showCorrectAnswer
+    } = this.state;
+    const {
+      alwaysShowCorrect,
+      animationsDisabled,
+      mode,
+      displayType,
+      role,
+      language,
+      maxLengthPerChoice,
+      maxLengthPerChoiceEnabled,
+      note,
+      playerSpellCheckEnabled,
+      prompt,
+      rationale,
+      showNote,
+      teacherInstructions,
+      responseAreaInputConfiguration,
+      model,
+      value
+    } = this.props;
+    const {
+      extraCSSRules
+    } = model || {};
+    const displayNote = (showCorrectAnswer || mode === 'view' && role === 'instructor') && showNote && note;
+    const teacherInstructionsDiv = /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      defaultClassName: "teacher-instructions",
+      prompt: teacherInstructions
+    });
+    const rationaleDiv = /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: rationale
+    });
+    const showRationale = rationale && ((0, _renderUi.hasText)(rationale) || (0, _renderUi.hasMedia)(rationale));
+    const showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
+    return /*#__PURE__*/_react.default.createElement(MainContainer, {
+      extraCSSRules: extraCSSRules,
+      alwaysShowCorrect: alwaysShowCorrect,
+      style: {
+        display: `${displayType}`
+      }
+    }, mode === 'gather' && /*#__PURE__*/_react.default.createElement(SrOnly, null, "Fill in the Blank Question"), showTeacherInstructions && /*#__PURE__*/_react.default.createElement(CollapsibleContainer, null, !animationsDisabled ? /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, teacherInstructionsDiv) : teacherInstructionsDiv), prompt && /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: prompt
+    }), !alwaysShowCorrect && mode === 'evaluate' && /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
+      show: true,
+      toggled: showCorrectAnswer,
+      onToggle: this.toggleShowCorrect,
+      language: language
+    }), /*#__PURE__*/_react.default.createElement(_maskMarkup.ConstructedResponse, (0, _extends2.default)({}, this.props, {
+      onChange: this.onChange,
+      showCorrectAnswer: showCorrectAnswer,
+      value: value,
+      maxLength: maxLengthPerChoice,
+      adjustedLimit: maxLengthPerChoiceEnabled,
+      spellCheck: playerSpellCheckEnabled,
+      pluginProps: responseAreaInputConfiguration
+    })), displayNote && /*#__PURE__*/_react.default.createElement(NoteContainer, {
+      dangerouslySetInnerHTML: {
+        __html: note
+      }
+    }), showRationale && /*#__PURE__*/_react.default.createElement(CollapsibleContainer, null, !animationsDisabled ? /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      }
+    }, rationaleDiv) : rationaleDiv));
+  }
+}
+exports.Main = Main;
+(0, _defineProperty2.default)(Main, "propTypes", {
+  alwaysShowCorrect: _propTypes.default.bool,
+  animationsDisabled: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  displayType: _propTypes.default.string,
+  feedback: _propTypes.default.object,
+  language: _propTypes.default.string,
+  markup: _propTypes.default.string,
+  maxLengthPerChoice: _propTypes.default.array,
+  maxLengthPerChoiceEnabled: _propTypes.default.bool,
+  mode: _propTypes.default.string,
+  note: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  playerSpellCheckEnabled: _propTypes.default.bool,
+  prompt: _propTypes.default.string,
+  rationale: _propTypes.default.string,
+  role: _propTypes.default.string,
+  showNote: _propTypes.default.bool,
+  teacherInstructions: _propTypes.default.string,
+  value: _propTypes.default.object,
+  responseAreaInputConfiguration: _propTypes.default.object,
+  model: _propTypes.default.object.isRequired
+});
+(0, _defineProperty2.default)(Main, "defaultProps", {
+  value: {}
+});
+var _default = exports.default = Main;
+//# sourceMappingURL=main.js.map

package/lib/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","names":["_react","_interopRequireDefault","require","_propTypes","_lodashEs","_correctAnswerToggle","_maskMarkup","_renderUi","_styles","_translator","translator","Translator","MainContainer","styled","UiLayout","alwaysShowCorrect","color","text","backgroundColor","background","borderColor","NoteContainer","theme","marginBottom","spacing","CollapsibleContainer","SrOnly","position","left","top","width","height","overflow","Main","React","Component","constructor","args","_defineProperty2","default","showCorrectAnswer","props","maxLengthPerChoice","every","val","_i","arr","onChange","debounce","maxWait","setState","state","getChangeSession","value","changeSession","UNSAFE_componentWillReceiveProps","nextProps","language","note","isEmpty","feedback","isEqual","t","lng","render","animationsDisabled","mode","displayType","role","maxLengthPerChoiceEnabled","playerSpellCheckEnabled","prompt","rationale","showNote","teacherInstructions","responseAreaInputConfiguration","model","extraCSSRules","displayNote","teacherInstructionsDiv","createElement","PreviewPrompt","defaultClassName","rationaleDiv","showRationale","hasText","hasMedia","showTeacherInstructions","style","display","Collapsible","labels","hidden","visible","show","toggled","onToggle","toggleShowCorrect","ConstructedResponse","_extends2","maxLength","adjustedLimit","spellCheck","pluginProps","dangerouslySetInnerHTML","__html","exports","PropTypes","bool","disabled","string","object","markup","array","func","isRequired","_default"],"sources":["../src/main.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty, isEqual, debounce } from 'lodash-es';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { ConstructedResponse } from '@pie-lib/mask-markup';\nimport { color, Collapsible, hasText, hasMedia, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';\nimport { styled } from '@mui/material/styles';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\n\nconst MainContainer = styled(UiLayout)(({ alwaysShowCorrect }) => ({\n  color: color.text(),\n  backgroundColor: color.background(),\n  ...(alwaysShowCorrect && {\n    '& *': {\n      borderColor: `${color.text()} !important`,\n    },\n  }),\n}));\n\nconst NoteContainer = styled('div')(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\n\nconst CollapsibleContainer = styled('div')(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\n\nconst SrOnly = styled('h2')({\n  position: 'absolute',\n  left: '-10000px',\n  top: 'auto',\n  width: '1px',\n  height: '1px',\n  overflow: 'hidden',\n});\n\nexport class Main extends React.Component {\n  static propTypes = {\n    alwaysShowCorrect: PropTypes.bool,\n    animationsDisabled: PropTypes.bool,\n    disabled: PropTypes.bool,\n    displayType: PropTypes.string,\n    feedback: PropTypes.object,\n    language: PropTypes.string,\n    markup: PropTypes.string,\n    maxLengthPerChoice: PropTypes.array,\n    maxLengthPerChoiceEnabled: PropTypes.bool,\n    mode: PropTypes.string,\n    note: PropTypes.string,\n    onChange: PropTypes.func,\n    playerSpellCheckEnabled: PropTypes.bool,\n    prompt: PropTypes.string,\n    rationale: PropTypes.string,\n    role: PropTypes.string,\n    showNote: PropTypes.bool,\n    teacherInstructions: PropTypes.string,\n    value: PropTypes.object,\n    responseAreaInputConfiguration: PropTypes.object,\n    model: PropTypes.object.isRequired,\n  };\n\n  static defaultProps = {\n    value: {},\n  };\n\n  state = {\n    showCorrectAnswer: this.props.alwaysShowCorrect || false,\n  };\n\n  // if for all responses max length is 1, call onChange for each keystroke\n  getChangeSession = (maxLengthPerChoice) =>\n    maxLengthPerChoice && maxLengthPerChoice.every((val, _i, arr) => val === arr[0] && val === 1)\n      ? this.props.onChange\n      : debounce(this.props.onChange, 200, { maxWait: 200 });\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    const { maxLengthPerChoice, language } = this.props;\n    let { note } = this.props;\n\n    if (isEmpty(nextProps.feedback)) {\n      this.setState({ showCorrectAnswer: false });\n    }\n\n    if (nextProps.alwaysShowCorrect) {\n      this.setState({ showCorrectAnswer: true });\n    }\n\n    if (maxLengthPerChoice && !isEqual(maxLengthPerChoice, nextProps.maxLengthPerChoice)) {\n      this.changeSession = this.getChangeSession(nextProps.maxLengthPerChoice);\n    }\n\n    // check if the note is the default one for prev language and change to the default one for new language\n    // this check is necessary in order to diferanciate between default and authour defined note\n    // and only change between languages for default ones\n    if (\n      note &&\n      language &&\n      language !== nextProps.language &&\n      note === translator.t('common:commonCorrectAnswerWithAlternates', { lng: language })\n    ) {\n      note = translator.t('common:commonCorrectAnswerWithAlternates', { lng: nextProps.language });\n    }\n  }\n\n  toggleShowCorrect = () => {\n    this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });\n  };\n\n  changeSession = this.getChangeSession(this.props.maxLengthPerChoice);\n\n  onChange = (value) => {\n    this.changeSession(value);\n  };\n\n  render() {\n    const { showCorrectAnswer } = this.state;\n    const {\n      alwaysShowCorrect,\n      animationsDisabled,\n      mode,\n      displayType,\n      role,\n      language,\n      maxLengthPerChoice,\n      maxLengthPerChoiceEnabled,\n      note,\n      playerSpellCheckEnabled,\n      prompt,\n      rationale,\n      showNote,\n      teacherInstructions,\n      responseAreaInputConfiguration,\n      model,\n      value,\n    } = this.props;\n\n    const { extraCSSRules } = model || {};\n    const displayNote = (showCorrectAnswer || (mode === 'view' && role === 'instructor')) && showNote && note;\n\n    const teacherInstructionsDiv = (\n      <PreviewPrompt defaultClassName=\"teacher-instructions\" prompt={teacherInstructions} />\n    );\n\n    const rationaleDiv = <PreviewPrompt prompt={rationale} />;\n\n    const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));\n    const showTeacherInstructions =\n      teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));\n\n    return (\n      <MainContainer\n        extraCSSRules={extraCSSRules}\n        alwaysShowCorrect={alwaysShowCorrect}\n        style={{ display: `${displayType}` }}\n      >\n        {mode === 'gather' && <SrOnly>Fill in the Blank Question</SrOnly>}\n\n        {showTeacherInstructions && (\n          <CollapsibleContainer>\n            {!animationsDisabled ? (\n              <Collapsible labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}>\n                {teacherInstructionsDiv}\n              </Collapsible>\n            ) : (\n              teacherInstructionsDiv\n            )}\n          </CollapsibleContainer>\n        )}\n\n        {prompt && <PreviewPrompt prompt={prompt} />}\n\n        {!alwaysShowCorrect && mode === 'evaluate' && (\n          <CorrectAnswerToggle\n            show\n            toggled={showCorrectAnswer}\n            onToggle={this.toggleShowCorrect}\n            language={language}\n          />\n        )}\n\n        <ConstructedResponse\n          {...this.props}\n          onChange={this.onChange}\n          showCorrectAnswer={showCorrectAnswer}\n          value={value}\n          maxLength={maxLengthPerChoice}\n          adjustedLimit={maxLengthPerChoiceEnabled}\n          spellCheck={playerSpellCheckEnabled}\n          pluginProps={responseAreaInputConfiguration}\n        />\n\n        {displayNote && <NoteContainer dangerouslySetInnerHTML={{ __html: note }} />}\n\n        {showRationale && (\n          <CollapsibleContainer>\n            {!animationsDisabled ? (\n              <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>{rationaleDiv}</Collapsible>\n            ) : (\n              rationaleDiv\n            )}\n          </CollapsibleContainer>\n        )}\n      </MainContainer>\n    );\n  }\n}\n\nexport default Main;\n"],"mappings":"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","ignoreList":[]}

package/lib/print.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _lodashEs = require("lodash-es");
+var _main = _interopRequireDefault(require("./main"));
+var _mathRendering = require("@pie-lib/math-rendering");
+var _debug = _interopRequireDefault(require("debug"));
+const log = (0, _debug.default)('pie-element:explicit-constructed-response:print');
+const preparePrintModel = (model, opts) => {
+  const isInstructor = opts.role === 'instructor';
+  model.prompt = model.promptEnabled !== false ? model.prompt : undefined;
+  model.teacherInstructions = isInstructor && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined;
+  model.rationale = isInstructor && model.rationaleEnabled !== false ? model.rationale : undefined;
+  model.alwaysShowCorrect = isInstructor;
+  model.mode = isInstructor ? 'evaluate' : model.mode;
+  model.disabled = true;
+  model.animationsDisabled = true;
+  return model;
+};
+class ExplicitConstructedResponsePrint extends HTMLElement {
+  constructor() {
+    super();
+    this._options = null;
+    this._model = null;
+    this._session = [];
+    this._root = null;
+    this._rerender = (0, _lodashEs.debounce)(() => {
+      if (this._model && this._session) {
+        const printModel = preparePrintModel(this._model, this._options);
+        const element = this._options && /*#__PURE__*/_react.default.createElement(_main.default, {
+          ...printModel,
+          onChange: () => {}
+        });
+        if (!this._root) {
+          this._root = (0, _client.createRoot)(this);
+        }
+        this._root.render(element);
+        queueMicrotask(() => {
+          log('render complete - render math');
+          (0, _mathRendering.renderMath)(this);
+        });
+      } else {
+        log('skip');
+      }
+    }, 50, {
+      leading: false,
+      trailing: true
+    });
+  }
+  set options(o) {
+    this._options = o;
+  }
+  set model(s) {
+    this._model = s;
+    this._rerender();
+  }
+  connectedCallback() {}
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = ExplicitConstructedResponsePrint;
+//# sourceMappingURL=print.js.map

package/lib/print.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"print.js","names":["_react","_interopRequireDefault","require","_client","_lodashEs","_main","_mathRendering","_debug","log","debug","preparePrintModel","model","opts","isInstructor","role","prompt","promptEnabled","undefined","teacherInstructions","teacherInstructionsEnabled","rationale","rationaleEnabled","alwaysShowCorrect","mode","disabled","animationsDisabled","ExplicitConstructedResponsePrint","HTMLElement","constructor","_options","_model","_session","_root","_rerender","debounce","printModel","element","React","createElement","Main","onChange","createRoot","render","queueMicrotask","renderMath","leading","trailing","options","o","s","connectedCallback","disconnectedCallback","unmount","exports","default"],"sources":["../src/print.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { debounce } from 'lodash-es';\nimport Main from './main';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\n\nconst log = debug('pie-element:explicit-constructed-response:print');\n\nconst preparePrintModel = (model, opts) => {\n  const isInstructor = opts.role === 'instructor';\n\n  model.prompt = model.promptEnabled !== false ? model.prompt : undefined;\n  model.teacherInstructions =\n    isInstructor && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined;\n  model.rationale = isInstructor && model.rationaleEnabled !== false ? model.rationale : undefined;\n  model.alwaysShowCorrect = isInstructor;\n  model.mode = isInstructor ? 'evaluate' : model.mode;\n  model.disabled = true;\n  model.animationsDisabled = true;\n\n  return model;\n};\n\nexport default class ExplicitConstructedResponsePrint extends HTMLElement {\n  constructor() {\n    super();\n    this._options = null;\n    this._model = null;\n    this._session = [];\n    this._root = null;\n\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          const printModel = preparePrintModel(this._model, this._options);\n\n          const element =\n            this._options &&\n            React.createElement(Main, {\n              ...printModel,\n              onChange: () => {},\n            });\n\n          if (!this._root) {\n            this._root = createRoot(this);\n          }\n          this._root.render(element);\n          queueMicrotask(() => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n\n  set options(o) {\n    this._options = o;\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}