@pie-element/extended-text-entry 6.6.0-ps.2 → 6.6.2

package/module/element.js

@@ -1,261 +0,0 @@
-import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_debug, _dll_lodash, _dll_pie_lib__render_ui, _dll_classnames, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.2.2/module/index.js";
-import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.0.3/module/index.js";
-import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.5/module/index.js";
-const React$1 = _dll_react;
-const PropTypes = _dll_prop_types;
-const {Typography: Typography} = _dll_material_ui__core;
-const {withStyles: withStyles} = _dll_material_ui__core_styles;
-const debug$1 = _dll_debug;
-const {debounce: debounce} = _dll_lodash;
-const {color: color} = _dll_pie_lib__render_ui;
-const {Feedback: Feedback} = _dll_pie_lib__render_ui;
-const {Collapsible: Collapsible} = _dll_pie_lib__render_ui;
-const classNames = _dll_classnames;
-const EditableHTML = _dll_pie_lib__editable_html;
-const {renderMath: renderMath} = _dll_pie_lib__math_rendering;
-const _jsxFileName = "/home/ede/dev/github/pie-framework/pie-elements/packages/extended-text-entry/src/main.jsx";
-const log$1 = debug$1('@pie-ui:extended-text-entry');
-const style = theme => ({
-  main: {
-    backgroundColor: color.background(),
-    color: color.text()
-  },
-  prompt: {
-    width: '100%',
-    color: color.text(),
-    marginBottom: theme.spacing.unit * 2,
-    fontSize: 'inherit'
-  }
-});
-class Main extends React$1.Component {
-  constructor(...args) {
-    super(...args);
-    Main.prototype.__init.call(this);
-  }
-  static __initStatic() {
-    this.propTypes = {
-      onChange: PropTypes.func.isRequired,
-      model: PropTypes.object,
-      classes: PropTypes.object.isRequired,
-      session: PropTypes.shape({
-        value: PropTypes.string
-      }).isRequired
-    };
-  }
-  componentDidUpdate() {
-    if (this.containerRef) {
-      renderMath(this.containerRef);
-    }
-  }
-  __init() {
-    this.changeSession = debounce(this.props.onChange, 1500);
-  }
-  render() {
-    const {model, classes, session} = this.props;
-    const {dimensions, disabled, feedback, teacherInstructions, mathInput, animationsDisabled} = model;
-    const {value} = session;
-    const {width, height} = dimensions || ({});
-    const maxHeight = '40vh';
-    log$1('[render] disabled? ', disabled);
-    const teacherInstructionsDiv = React$1.createElement('div', {
-      className: "teacher-instructions",
-      dangerouslySetInnerHTML: {
-        __html: teacherInstructions
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 53
-      }
-    });
-    return React$1.createElement('div', {
-      className: classes.main,
-      ref: ref => {
-        this.containerRef = ref;
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 59
-      }
-    }, teacherInstructions && React$1.createElement('div', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 67
-      }
-    }, !animationsDisabled ? React$1.createElement(Collapsible, {
-      labels: {
-        hidden: 'Show Teacher Instructions',
-        visible: 'Hide Teacher Instructions'
-      },
-      className: classes.collapsible,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 69
-      }
-    }, teacherInstructionsDiv) : teacherInstructionsDiv, React$1.createElement('br', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 76
-      }
-    })), model.prompt && React$1.createElement(Typography, {
-      className: classNames(classes.prompt, 'prompt'),
-      dangerouslySetInnerHTML: {
-        __html: model.prompt
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 81
-      }
-    }), React$1.createElement(EditableHTML, {
-      onChange: this.changeSession,
-      markup: value || '',
-      width: width && width.toString(),
-      minHeight: height && height.toString(),
-      maxHeight: maxHeight,
-      disabled: disabled,
-      highlightShape: true,
-      pluginProps: {
-        math: {
-          disabled: !mathInput,
-          customKeys: this.props.model.customKeys,
-          keypadMode: this.props.model.equationEditor,
-          controlledKeypadMode: false
-        },
-        video: {
-          disabled: true
-        },
-        audio: {
-          disabled: true
-        }
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 86
-      }
-    }), feedback && React$1.createElement('div', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 110
-      }
-    }, React$1.createElement('br', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 111
-      }
-    }), React$1.createElement(Feedback, {
-      correctness: "correct",
-      feedback: feedback,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 112
-      }
-    })));
-  }
-}
-Main.__initStatic();
-var Main$1 = withStyles(style)(Main);
-var lib = {};
-Object.defineProperty(lib, "__esModule", {
-  value: true
-});
-class ModelSetEvent extends CustomEvent {
-  constructor(component, complete, hasModel) {
-    super(ModelSetEvent.TYPE, {
-      bubbles: true,
-      composed: true,
-      detail: {
-        complete,
-        component,
-        hasModel
-      }
-    });
-    this.component = component;
-    this.complete = complete;
-  }
-}
-ModelSetEvent.TYPE = 'model-set';
-var ModelSetEvent_1 = lib.ModelSetEvent = ModelSetEvent;
-class SessionChangedEvent extends CustomEvent {
-  constructor(component, complete) {
-    super(SessionChangedEvent.TYPE, {
-      bubbles: true,
-      composed: true,
-      detail: {
-        complete,
-        component
-      }
-    });
-    this.component = component;
-    this.complete = complete;
-  }
-}
-SessionChangedEvent.TYPE = 'session-changed';
-var SessionChangedEvent_1 = lib.SessionChangedEvent = SessionChangedEvent;
-const React = _dll_react;
-const ReactDOM = _dll_react_dom;
-const debug = _dll_debug;
-const log = debug('@pie-ui:extended-text-entry');
-const domParser = typeof window !== undefined ? new DOMParser() : {
-  parseFromString: v => v
-};
-function textContent(value) {
-  if (typeof value !== 'string') {
-    return undefined;
-  }
-  try {
-    const document = domParser.parseFromString(value, 'text/html');
-    const textContent = document.body.textContent;
-    return textContent;
-  } catch (err) {
-    log('tried to parse as dom and failed', value);
-    return value;
-  }
-}
-function isComplete(value) {
-  const tc = textContent(value);
-  const out = tc !== undefined && tc.length > 0;
-  return out;
-}
-class RootExtendedTextEntry extends HTMLElement {
-  constructor() {
-    super();
-    this._model = null;
-    this._session = null;
-  }
-  set model(m) {
-    this._model = m;
-    this.dispatchEvent(new ModelSetEvent_1(this.tagName.toLowerCase(), false, !!this._model));
-    this.render();
-  }
-  set session(s) {
-    this._session = s;
-    this.render();
-  }
-  handleChange(value) {
-    this._session.value = value;
-    this.dispatchEvent(new SessionChangedEvent_1(this.tagName.toLowerCase(), isComplete(value)));
-  }
-  connectedCallback() {
-    this.render();
-  }
-  render() {
-    if (this._model && this._session) {
-      let elem = React.createElement(Main$1, {
-        model: this._model,
-        session: this._session,
-        onChange: this.handleChange.bind(this)
-      });
-      ReactDOM.render(elem, this);
-    }
-  }
-}
-export {RootExtendedTextEntry as default, isComplete, textContent};

package/module/index.html

@@ -1,21 +0,0 @@
-
-  <!doctype html>
-  <html>
-    <head>
-      <title>@pie-element/extended-text-entry@6.6.0</title>
-      <script
-        type="module"
-        src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>
-     
-      <link
-        href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
-        rel="stylesheet"
-      />
-      <style>
-        html, body {
-          font-family: 'Roboto', sans-serif;
-        }
-      </style>
-      <script type="module" src="./demo.js"></script> 
-    </head>
-  </html>

package/module/manifest.json

@@ -1,18 +0,0 @@
-{
-  "name": "@pie-element/extended-text-entry",
-  "version": "6.6.0",
-  "modules": [
-    {
-      "name": "@pie-lib/shared-module",
-      "version": "^1.2.2"
-    },
-    {
-      "name": "@pie-lib/math-rendering-module",
-      "version": "^1.0.5"
-    },
-    {
-      "name": "@pie-lib/editable-html-module",
-      "version": "^1.0.3"
-    }
-  ]
-}

package/module/print-demo.js

@@ -1,74 +0,0 @@
-import PrintElement from './print.js';
-
-var generate = {};
-
-generate.model = (id, element) => ({
-  id,
-  element,
-  customKeys: [
-    '\\square'
-  ],
-  feedback: { type: 'default', default: 'this is default feedback' },
-  prompt: 'This is the question prompt',
-  promptEnabled: true,
-  mathInput: true,
-  toolbarEditorPosition: 'bottom',
-});
-
-const { model } = generate;
-var config = {
-  elements: {
-    'extended-text-entry': '../..'
-  },
-  models: [model('1', 'extended-text-entry')]
-};
-
-// new init - just shows off print!
-
-const init = async () => {
-  console.log('define the element...');
-  await Promise.all(
-    config.models.map(async (m) => {
-      try {
-        const printTag = `${m.element}-print`;
-        if (customElements.get(printTag)) {
-          return true;
-        } else {
-          customElements.define(printTag, PrintElement);
-          await customElements.whenDefined(printTag);
-          return true;
-        }
-      } catch (e) {
-        return false;
-      }
-    })
-  );
-
-  console.log('now apply the model...');
-  config.models.forEach((m) => {
-    const printTag = `${m.element}-print`;
-    const h3s = document.createElement('h3');
-    h3s.textContent = 'student mode';
-    document.body.appendChild(h3s);
-    const de = document.createElement(printTag);
-    document.body.appendChild(de);
-    de.options = {};
-    de.model = m;
-
-    const h3 = document.createElement('h3');
-    h3.textContent = 'instructor mode';
-    document.body.appendChild(h3);
-    const instr = document.createElement(printTag);
-    document.body.appendChild(instr);
-    instr.options = { mode: 'instructor' };
-    instr.model = JSON.parse(JSON.stringify(m));
-  });
-};
-
-init()
-  .then(() => {
-    console.log('ready');
-  })
-  .catch((e) => {
-    console.error(e);
-  });

package/module/print.html

@@ -1,18 +0,0 @@
-
-  <!doctype html>
-  <html>
-    <head>
-      <title>@pie-element/extended-text-entry@6.6.0</title>
-      <link
-        href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
-        rel="stylesheet"
-      />
-      <style>
-        html, body {
-          font-family: 'Roboto', sans-serif;
-        }
-      </style>
-      <script type="module" src="./print-demo.js"></script> 
-    </head>
-    <body></body>
-  </html>

package/module/print.js

@@ -1,225 +0,0 @@
-import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_debug, _dll_lodash, _dll_pie_lib__render_ui, _dll_classnames, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.2.2/module/index.js";
-import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.5/module/index.js";
-import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.0.3/module/index.js";
-const React$1 = _dll_react;
-const PropTypes = _dll_prop_types;
-const {Typography: Typography} = _dll_material_ui__core;
-const {withStyles: withStyles} = _dll_material_ui__core_styles;
-const debug$1 = _dll_debug;
-const {debounce: debounce$1} = _dll_lodash;
-const {color: color} = _dll_pie_lib__render_ui;
-const {Feedback: Feedback} = _dll_pie_lib__render_ui;
-const {Collapsible: Collapsible} = _dll_pie_lib__render_ui;
-const classNames = _dll_classnames;
-const EditableHTML = _dll_pie_lib__editable_html;
-const {renderMath: renderMath$1} = _dll_pie_lib__math_rendering;
-const _jsxFileName = "/home/ede/dev/github/pie-framework/pie-elements/packages/extended-text-entry/src/main.jsx";
-const log$1 = debug$1('@pie-ui:extended-text-entry');
-const style = theme => ({
-  main: {
-    backgroundColor: color.background(),
-    color: color.text()
-  },
-  prompt: {
-    width: '100%',
-    color: color.text(),
-    marginBottom: theme.spacing.unit * 2,
-    fontSize: 'inherit'
-  }
-});
-class Main extends React$1.Component {
-  constructor(...args) {
-    super(...args);
-    Main.prototype.__init.call(this);
-  }
-  static __initStatic() {
-    this.propTypes = {
-      onChange: PropTypes.func.isRequired,
-      model: PropTypes.object,
-      classes: PropTypes.object.isRequired,
-      session: PropTypes.shape({
-        value: PropTypes.string
-      }).isRequired
-    };
-  }
-  componentDidUpdate() {
-    if (this.containerRef) {
-      renderMath$1(this.containerRef);
-    }
-  }
-  __init() {
-    this.changeSession = debounce$1(this.props.onChange, 1500);
-  }
-  render() {
-    const {model, classes, session} = this.props;
-    const {dimensions, disabled, feedback, teacherInstructions, mathInput, animationsDisabled} = model;
-    const {value} = session;
-    const {width, height} = dimensions || ({});
-    const maxHeight = '40vh';
-    log$1('[render] disabled? ', disabled);
-    const teacherInstructionsDiv = React$1.createElement('div', {
-      className: "teacher-instructions",
-      dangerouslySetInnerHTML: {
-        __html: teacherInstructions
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 53
-      }
-    });
-    return React$1.createElement('div', {
-      className: classes.main,
-      ref: ref => {
-        this.containerRef = ref;
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 59
-      }
-    }, teacherInstructions && React$1.createElement('div', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 67
-      }
-    }, !animationsDisabled ? React$1.createElement(Collapsible, {
-      labels: {
-        hidden: 'Show Teacher Instructions',
-        visible: 'Hide Teacher Instructions'
-      },
-      className: classes.collapsible,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 69
-      }
-    }, teacherInstructionsDiv) : teacherInstructionsDiv, React$1.createElement('br', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 76
-      }
-    })), model.prompt && React$1.createElement(Typography, {
-      className: classNames(classes.prompt, 'prompt'),
-      dangerouslySetInnerHTML: {
-        __html: model.prompt
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 81
-      }
-    }), React$1.createElement(EditableHTML, {
-      onChange: this.changeSession,
-      markup: value || '',
-      width: width && width.toString(),
-      minHeight: height && height.toString(),
-      maxHeight: maxHeight,
-      disabled: disabled,
-      highlightShape: true,
-      pluginProps: {
-        math: {
-          disabled: !mathInput,
-          customKeys: this.props.model.customKeys,
-          keypadMode: this.props.model.equationEditor,
-          controlledKeypadMode: false
-        },
-        video: {
-          disabled: true
-        },
-        audio: {
-          disabled: true
-        }
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 86
-      }
-    }), feedback && React$1.createElement('div', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 110
-      }
-    }, React$1.createElement('br', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 111
-      }
-    }), React$1.createElement(Feedback, {
-      correctness: "correct",
-      feedback: feedback,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 112
-      }
-    })));
-  }
-}
-Main.__initStatic();
-var Main$1 = withStyles(style)(Main);
-const React = _dll_react;
-const ReactDOM = _dll_react_dom;
-const {debounce: debounce} = _dll_lodash;
-const debug = _dll_debug;
-const {renderMath: renderMath} = _dll_pie_lib__math_rendering;
-const log = debug('pie-element:extended-text-entry:print');
-const preparePrintModel = (model, opts) => {
-  const instr = opts.mode === 'instructor';
-  model.teacherInstructions = instr ? model.teacherInstructions : undefined;
-  model.showTeacherInstructions = instr;
-  model.mode = instr ? 'evaluate' : model.mode;
-  const defaultDimensions = {
-    height: 100,
-    width: 500
-  };
-  model.dimensions = {
-    ...defaultDimensions,
-    ...model.dimensions
-  };
-  model.disabled = true;
-  model.feedback = undefined;
-  model.animationsDisabled = true;
-  return model;
-};
-class ExtendedTextEntryPrint extends HTMLElement {
-  constructor() {
-    super();
-    this._options = null;
-    this._model = null;
-    this._session = [];
-    this._rerender = debounce(() => {
-      if (this._model && this._session) {
-        const printModel = preparePrintModel(this._model, this._options);
-        const element = this._options && React.createElement(Main$1, {
-          model: printModel,
-          session: {},
-          onChange: () => {}
-        });
-        ReactDOM.render(element, this, () => {
-          log('render complete - render math');
-          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() {}
-}
-export {ExtendedTextEntryPrint as default};