@pie-element/math-templated 2.11.2-next.7000

package/docs/pie-schema.json.md

@@ -0,0 +1,37 @@
+Pie Model Object for @pie-elements/boilerplate-item-type
+
+The schema defines the following properties:
+
+# `prompt` (string, required)
+
+The user prompt/item stem
+
+# `promptEnabled` (boolean)
+
+Determines if prompt should show
+
+# `id` (string, required)
+
+Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.
+
+# `element` (string, required)
+
+The html Element tag name
+
+---
+
+# Sub Schemas
+
+The schema defines the following additional types:
+
+## `ConfigureProp` (object)
+
+Properties of the `ConfigureProp` object:
+
+### `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+### `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel

package/lib/index.js

@@ -0,0 +1,121 @@
+"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"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _piePlayerEvents = require("@pie-framework/pie-player-events");
+
+var _main = _interopRequireDefault(require("./main"));
+
+var _lodash = _interopRequireDefault(require("lodash"));
+
+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 MathTemplated = /*#__PURE__*/function (_HTMLElement) {
+  (0, _inherits2["default"])(MathTemplated, _HTMLElement);
+
+  var _super = _createSuper(MathTemplated);
+
+  function MathTemplated() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, MathTemplated);
+    _this = _super.call(this);
+    _this.sessionChangedEventCaller = _lodash["default"].debounce(function () {
+      _this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(_this.tagName.toLowerCase(), true));
+    }, 1000);
+    return _this;
+  }
+
+  (0, _createClass2["default"])(MathTemplated, [{
+    key: "model",
+    get: function get() {
+      return this._model;
+    },
+    set: function set(m) {
+      this._model = m;
+      this.render();
+      this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.isSessionComplete(), this._model !== undefined));
+    }
+  }, {
+    key: "session",
+    get: function get() {
+      return this._session;
+    },
+    set: function set(s) {
+      this._session = s;
+      this.render();
+    }
+  }, {
+    key: "isSessionComplete",
+    value: function isSessionComplete() {
+      // a method to check if student answered the question
+      return true;
+    }
+  }, {
+    key: "onSessionChange",
+    value: function onSessionChange(session) {
+      var _this2 = this;
+
+      // you can add an extra step here to validate session
+      Object.keys(session).map(function (key) {
+        _this2._session[key] = session[key];
+      });
+      this.sessionChangedEventCaller();
+      this.render();
+    }
+  }, {
+    key: "connectedCallback",
+    value: function connectedCallback() {
+      // TODO set accessibility labels
+      this.render();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$_session;
+
+      console.log('In Player Render, session.answers', (_this$_session = this._session) === null || _this$_session === void 0 ? void 0 : _this$_session.answers);
+
+      if (!this._model || !this._session) {
+        return;
+      }
+
+      if (this._model && this._session) {
+        var el = /*#__PURE__*/_react["default"].createElement(_main["default"], {
+          model: this._model,
+          session: this._session,
+          onSessionChange: this.onSessionChange.bind(this)
+        });
+
+        _reactDom["default"].render(el, this);
+      }
+    }
+  }]);
+  return MathTemplated;
+}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
+
+exports["default"] = MathTemplated;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.js"],"names":["MathTemplated","sessionChangedEventCaller","_","debounce","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","_model","m","render","ModelSetEvent","isSessionComplete","undefined","_session","s","session","Object","keys","map","key","console","log","answers","el","React","createElement","Main","model","onSessionChange","bind","ReactDOM","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEqBA,a;;;;;AACjB,2BAAc;AAAA;;AAAA;AACV;AACA,UAAKC,yBAAL,GAAiCC,mBAAEC,QAAF,CAAW,YAAM;AAC9C,YAAKC,aAAL,CAAmB,IAAIC,oCAAJ,CAAwB,MAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoD,IAApD,CAAnB;AACH,KAFgC,EAE9B,IAF8B,CAAjC;AAFU;AAKb;;;;SASD,eAAY;AACR,aAAO,KAAKC,MAAZ;AACH,K;SATD,aAAUC,CAAV,EAAa;AACT,WAAKD,MAAL,GAAcC,CAAd;AAEA,WAAKC,MAAL;AACA,WAAKN,aAAL,CAAmB,IAAIO,8BAAJ,CAAkB,KAAKL,OAAL,CAAaC,WAAb,EAAlB,EAA8C,KAAKK,iBAAL,EAA9C,EAAwE,KAAKJ,MAAL,KAAgBK,SAAxF,CAAnB;AACH;;;SAYD,eAAc;AACV,aAAO,KAAKC,QAAZ;AACH,K;SARD,aAAYC,CAAZ,EAAe;AACX,WAAKD,QAAL,GAAgBC,CAAhB;AAEA,WAAKL,MAAL;AACH;;;WAMD,6BAAoB;AAChB;AACA,aAAO,IAAP;AACH;;;WAED,yBAAgBM,OAAhB,EAAyB;AAAA;;AACrB;AACAC,MAAAA,MAAM,CAACC,IAAP,CAAYF,OAAZ,EAAqBG,GAArB,CAAyB,UAACC,GAAD,EAAS;AAC9B,QAAA,MAAI,CAACN,QAAL,CAAcM,GAAd,IAAqBJ,OAAO,CAACI,GAAD,CAA5B;AACH,OAFD;AAIA,WAAKnB,yBAAL;AACA,WAAKS,MAAL;AACH;;;WAED,6BAAoB;AAChB;AAEA,WAAKA,MAAL;AACH;;;WAED,kBAAS;AAAA;;AACLW,MAAAA,OAAO,CAACC,GAAR,CAAY,mCAAZ,oBAAiD,KAAKR,QAAtD,mDAAiD,eAAeS,OAAhE;;AAEA,UAAI,CAAC,KAAKf,MAAN,IAAgB,CAAC,KAAKM,QAA1B,EAAoC;AAChC;AACH;;AAED,UAAI,KAAKN,MAAL,IAAe,KAAKM,QAAxB,EAAkC;AAC9B,YAAMU,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACjCC,UAAAA,KAAK,EAAE,KAAKpB,MADqB;AAEjCQ,UAAAA,OAAO,EAAE,KAAKF,QAFmB;AAGjCe,UAAAA,eAAe,EAAE,KAAKA,eAAL,CAAqBC,IAArB,CAA0B,IAA1B;AAHgB,SAA1B,CAAX;;AAMAC,6BAASrB,MAAT,CAAgBc,EAAhB,EAAoB,IAApB;AACH;AACJ;;;kDAlEsCQ,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport {SessionChangedEvent, ModelSetEvent} from '@pie-framework/pie-player-events';\nimport Main from './main';\nimport _ from 'lodash';\n\nexport default class MathTemplated extends HTMLElement {\n    constructor() {\n        super();\n        this.sessionChangedEventCaller = _.debounce(() => {\n            this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), true));\n        }, 1000);\n    }\n\n    set model(m) {\n        this._model = m;\n\n        this.render();\n        this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isSessionComplete(), this._model !== undefined));\n    }\n\n    get model() {\n        return this._model;\n    }\n\n    set session(s) {\n        this._session = s;\n\n        this.render();\n    }\n\n    get session() {\n        return this._session;\n    }\n\n    isSessionComplete() {\n        // a method to check if student answered the question\n        return true;\n    }\n\n    onSessionChange(session) {\n        // you can add an extra step here to validate session\n        Object.keys(session).map((key) => {\n            this._session[key] = session[key];\n        });\n\n        this.sessionChangedEventCaller();\n        this.render();\n    }\n\n    connectedCallback() {\n        // TODO set accessibility labels\n\n        this.render();\n    }\n\n    render() {\n        console.log('In Player Render, session.answers', this._session?.answers);\n\n        if (!this._model || !this._session) {\n            return;\n        }\n\n        if (this._model && this._session) {\n            const el = React.createElement(Main, {\n                model: this._model,\n                session: this._session,\n                onSessionChange: this.onSessionChange.bind(this),\n            });\n\n            ReactDOM.render(el, this);\n        }\n    }\n}\n"],"file":"index.js"}