@pie-element/ebsr 7.0.13 → 7.0.17

package/module/configure.js

@@ -0,0 +1,464 @@
+import {_dll_react, _dll_prop_types, _dll_material_ui__core_styles, _dll_lodash, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.4.1/module/index.js";
+import MultipleChoiceConfigure from '@pie-element/multiple-choice/configure/lib';
+import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.0.24/module/index.js";
+var lib = {};
+Object.defineProperty(lib, "__esModule", {
+  value: true
+});
+class ModelUpdatedEvent extends CustomEvent {
+  constructor(update, reset = false) {
+    super(ModelUpdatedEvent.TYPE, {
+      bubbles: true,
+      detail: {
+        update,
+        reset
+      }
+    });
+    this.update = update;
+    this.reset = reset;
+  }
+}
+ModelUpdatedEvent.TYPE = 'model.updated';
+var ModelUpdatedEvent_1 = lib.ModelUpdatedEvent = ModelUpdatedEvent;
+class DeleteImageEvent extends CustomEvent {
+  constructor(src, done) {
+    super(DeleteImageEvent.TYPE, {
+      bubbles: true,
+      detail: {
+        src,
+        done
+      }
+    });
+    this.src = src;
+    this.done = done;
+  }
+}
+DeleteImageEvent.TYPE = 'delete.image';
+lib.DeleteImageEvent = DeleteImageEvent;
+class InsertImageEvent extends CustomEvent {
+  constructor(handler) {
+    super(InsertImageEvent.TYPE, {
+      bubbles: true,
+      detail: handler
+    });
+    this.handler = handler;
+  }
+}
+InsertImageEvent.TYPE = 'insert.image';
+lib.InsertImageEvent = InsertImageEvent;
+const React$1 = _dll_react;
+const PropTypes = _dll_prop_types;
+const {withStyles: withStyles} = _dll_material_ui__core_styles;
+const {cloneDeep: cloneDeep$1} = _dll_lodash;
+const {settings: settings} = _dll_pie_lib__config_ui;
+const {layout: layout} = _dll_pie_lib__config_ui;
+const _jsxFileName = "/home/circleci/repo/packages/ebsr/configure/src/main.jsx";
+const {Panel, toggle, radio, dropdown} = settings;
+const styles = theme => ({
+  design: {
+    paddingTop: theme.spacing.unit * 3
+  },
+  part: {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '16px 0 32px'
+  }
+});
+class Main extends React$1.Component {
+  constructor(...args) {
+    super(...args);
+    Main.prototype.__init.call(this);
+    Main.prototype.__init2.call(this);
+  }
+  static __initStatic() {
+    this.propTypes = {
+      classes: PropTypes.object,
+      configuration: PropTypes.object,
+      model: PropTypes.object,
+      onModelChanged: PropTypes.func,
+      onConfigurationChanged: PropTypes.func
+    };
+  }
+  __init() {
+    this.removeExtraChoices = choices => {
+      let correctFound = false;
+      return (choices || []).map(choice => {
+        if (correctFound) {
+          choice.correct = false;
+          return choice;
+        }
+        if (choice.correct) {
+          correctFound = true;
+        }
+        return choice;
+      });
+    };
+  }
+  __init2() {
+    this.onModelChanged = (model, key) => {
+      const {onModelChanged} = this.props;
+      if (key === 'partA.choiceMode' && model.partA.choiceMode === 'radio') {
+        model.partA.choices = this.removeExtraChoices(model.partA.choices);
+        return onModelChanged(model, true);
+      }
+      if (key === 'partB.choiceMode' && model.partB.choiceMode === 'radio') {
+        model.partB.choices = this.removeExtraChoices(model.partB.choices);
+        return onModelChanged(model, true);
+      }
+      return onModelChanged(model);
+    };
+  }
+  render() {
+    const {classes, model, configuration, onConfigurationChanged} = this.props;
+    const {partLabelType, partA: modelPartA, partB: modelPartB} = model;
+    const {partA, partB, partialScoring, scoringType, ...generalConfiguration} = configuration;
+    const {feedback: feedbackA = {}, choiceMode: choiceModeA = {}, choicePrefix: choicePrefixA = {}, lockChoiceOrder: lockChoiceOrderA = {}, prompt: promptA = {}, teacherInstructions: teacherInstructionsA = {}, studentInstructions: studentInstructionsA = {}, choicesLayout: choicesLayoutA = {}, gridColumns: gridColumnsA = {}, rationale: rationaleA = {}} = partA || ({});
+    const {feedback: feedbackB = {}, choiceMode: choiceModeB = {}, choicePrefix: choicePrefixB = {}, lockChoiceOrder: lockChoiceOrderB = {}, prompt: promptB = {}, teacherInstructions: teacherInstructionsB = {}, studentInstructions: studentInstructionsB = {}, choicesLayout: choicesLayoutB = {}, gridColumns: gridColumnsB = {}, rationale: rationaleB = {}} = partB || ({});
+    const type = partLabelType || 'Numbers';
+    const typeIsNumber = type === 'Numbers';
+    const firstPart = `Part ${typeIsNumber ? '1' : 'A'}`;
+    const secondPart = `Part ${typeIsNumber ? '2' : 'B'}`;
+    const nrOfColumnsAvailable = {
+      partA: modelPartA.choices && modelPartA.choices.length ? Array.from({
+        length: modelPartA.choices.length
+      }, (_, i) => `${i + 1}`) : [],
+      partB: modelPartB.choices && modelPartB.choices.length ? Array.from({
+        length: modelPartB.choices.length
+      }, (_, i) => `${i + 1}`) : []
+    };
+    return React$1.createElement('div', {
+      className: classes.design,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 109
+      }
+    }, React$1.createElement(layout.ConfigLayout, {
+      settings: React$1.createElement(Panel, {
+        model: model,
+        onChangeModel: this.onModelChanged,
+        configuration: configuration,
+        onChangeConfiguration: onConfigurationChanged,
+        groups: {
+          'Settings for both': {
+            partLabels: generalConfiguration.partLabels.settings && toggle(generalConfiguration.partLabels.label),
+            partLabelType: model.partLabels && dropdown('', ['Numbers', 'Letters']),
+            partialScoring: partialScoring.settings && toggle(partialScoring.label),
+            scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric'])
+          },
+          [`Settings ${firstPart}`]: {
+            'partA.choiceMode': choiceModeA.settings && radio(choiceModeA.label, ['checkbox', 'radio']),
+            'partA.choicePrefix': choicePrefixA.settings && radio(choicePrefixA.label, ['numbers', 'letters']),
+            'partA.lockChoiceOrder': lockChoiceOrderA.settings && toggle(lockChoiceOrderA.label),
+            'partA.choicesLayout': choicesLayoutA.settings && dropdown(choicesLayoutA.label, ['vertical', 'grid', 'horizontal']),
+            'partA.gridColumns': choicesLayoutA.settings && modelPartA.choicesLayout === 'grid' && nrOfColumnsAvailable.partA.length > 0 && dropdown(gridColumnsA.label, nrOfColumnsAvailable.partA)
+          },
+          [`Properties ${firstPart}`]: {
+            'partA.feedbackEnabled': feedbackA.settings && toggle(feedbackA.label),
+            'partA.promptEnabled': promptA.settings && toggle(promptA.label),
+            'partA.teacherInstructionsEnabled': teacherInstructionsA.settings && toggle(teacherInstructionsA.label),
+            'partA.studentInstructionsEnabled': studentInstructionsA.settings && toggle(studentInstructionsA.label),
+            'partA.rationaleEnabled': rationaleA.settings && toggle(rationaleA.label)
+          },
+          [`Settings ${secondPart}`]: {
+            'partB.choiceMode': choiceModeB.settings && radio(choiceModeB.label, ['checkbox', 'radio']),
+            'partB.choicePrefix': choicePrefixB.settings && radio(choicePrefixB.label, ['numbers', 'letters']),
+            'partB.lockChoiceOrder': lockChoiceOrderB.settings && toggle(lockChoiceOrderB.label),
+            'partB.choicesLayout': choicesLayoutB.settings && dropdown(choicesLayoutB.label, ['vertical', 'grid', 'horizontal']),
+            'partB.gridColumns': choicesLayoutB.settings && modelPartB.choicesLayout === 'grid' && nrOfColumnsAvailable.partB.length > 0 && dropdown(gridColumnsB.label, nrOfColumnsAvailable.partB)
+          },
+          [`Properties ${secondPart}`]: {
+            'partB.feedbackEnabled': feedbackB.settings && toggle(feedbackB.label),
+            'partB.promptEnabled': promptB.settings && toggle(promptB.label),
+            'partB.teacherInstructionsEnabled': teacherInstructionsB.settings && toggle(teacherInstructionsB.label),
+            'partB.studentInstructionsEnabled': studentInstructionsB.settings && toggle(studentInstructionsB.label),
+            'partB.rationaleEnabled': rationaleB.settings && toggle(rationaleB.label)
+          }
+        },
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 112
+        }
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 110
+      }
+    }, React$1.createElement('div', {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 195
+      }
+    }, React$1.createElement('div', {
+      className: classes.part,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 196
+      }
+    }, model.partLabels && React$1.createElement('p', {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 197
+      }
+    }, firstPart), React$1.createElement('ebsr-multiple-choice-configure', {
+      id: "A",
+      key: "partA",
+      ref: ref => {
+        if (ref) {
+          this.partA = ref;
+          this.partA._model = cloneDeep$1(this.props.model.partA);
+          this.partA.configuration = {
+            ...partA,
+            ...generalConfiguration
+          };
+        }
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 198
+      }
+    })), React$1.createElement('div', {
+      className: classes.part,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 215
+      }
+    }, model.partLabels && React$1.createElement('p', {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 216
+      }
+    }, secondPart), React$1.createElement('ebsr-multiple-choice-configure', {
+      id: "B",
+      key: "partB",
+      ref: ref => {
+        if (ref) {
+          this.partB = ref;
+          this.partB._model = cloneDeep$1(this.props.model.partB);
+          this.partB.configuration = {
+            ...partB,
+            ...generalConfiguration
+          };
+        }
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 217
+      }
+    })))));
+  }
+}
+Main.__initStatic();
+const Styled = withStyles(styles)(Main);
+const {cloneDeep: cloneDeep} = _dll_lodash;
+const defaultConfig = {
+  addChoiceButton: {
+    settings: true,
+    label: 'Add a Choice'
+  },
+  choiceMode: {
+    settings: true,
+    label: 'Response Type'
+  },
+  choicePrefix: {
+    settings: true,
+    label: 'Choice Labels'
+  },
+  deleteChoice: {
+    settings: true
+  },
+  feedback: {
+    settings: true,
+    label: 'Feedback'
+  },
+  lockChoiceOrder: {
+    settings: true,
+    label: 'Lock Choice Order'
+  },
+  prompt: {
+    settings: true,
+    label: 'Prompt'
+  },
+  rationale: {
+    settings: true,
+    label: 'Rationale'
+  },
+  studentInstructions: {
+    settings: false,
+    label: 'Student Instructions'
+  },
+  teacherInstructions: {
+    settings: true,
+    label: 'Teacher Instructions'
+  },
+  choicesLayout: {
+    settings: false,
+    label: 'Choices Layout'
+  },
+  gridColumns: {
+    label: 'Grid columns'
+  }
+};
+const partModel = base => ({
+  choiceMode: 'radio',
+  choices: [],
+  choicePrefix: 'numbers',
+  prompt: 'Prompt',
+  rationaleEnabled: true,
+  feedbackEnabled: true,
+  promptEnabled: true,
+  teacherInstructions: '',
+  rationale: '',
+  teacherInstructionsEnabled: true,
+  studentInstructionsEnabled: true,
+  choicesLayout: 'vertical',
+  gridColumns: '2',
+  ...base
+});
+var sensibleDefaults = {
+  model: {
+    partLabels: true,
+    partLabelType: 'Letters',
+    partialScoring: false,
+    partA: partModel({
+      prompt: 'Prompt A'
+    }),
+    partB: partModel({
+      prompt: 'Prompt B'
+    })
+  },
+  configuration: {
+    partialScoring: {
+      label: 'Allow Partial Scoring',
+      settings: false
+    },
+    scoringType: {
+      settings: false,
+      label: 'Scoring Type'
+    },
+    partA: cloneDeep(defaultConfig),
+    partB: cloneDeep(defaultConfig),
+    partLabels: {
+      settings: true,
+      label: 'Part Labels'
+    },
+    settingsPanelDisabled: true
+  }
+};
+const React = _dll_react;
+const ReactDOM = _dll_react_dom;
+const {defaults: defaults} = _dll_lodash;
+const MODEL_UPDATED = ModelUpdatedEvent_1.TYPE;
+const MC_TAG_NAME = 'ebsr-multiple-choice-configure';
+class EbsrMCConfigure extends MultipleChoiceConfigure {}
+const defineMultipleChoice = () => {
+  if (!customElements.get(MC_TAG_NAME)) {
+    customElements.define(MC_TAG_NAME, EbsrMCConfigure);
+  }
+};
+defineMultipleChoice();
+const prepareCustomizationObject = (config, model) => {
+  const configuration = defaults(config, sensibleDefaults.configuration);
+  configuration.settingsPanelDisabled = true;
+  return {
+    configuration,
+    model
+  };
+};
+const {model: modelDefault} = sensibleDefaults || ({});
+class EbsrConfigure extends HTMLElement {
+  static __initStatic() {
+    this.createDefaultModel = ({partA = {}, partB = {}, ...model} = {}, defaults = modelDefault) => ({
+      ...defaults,
+      ...model,
+      partA: {
+        ...defaults.partA,
+        ...partA,
+        choicesLayout: partA.choicesLayout || partA.verticalMode === false && 'horizontal' || defaults.partA.choicesLayout
+      },
+      partB: {
+        ...defaults.partB,
+        ...partB,
+        choicesLayout: partB.choicesLayout || partB.verticalMode === false && 'horizontal' || defaults.partB.choicesLayout
+      }
+    });
+  }
+  constructor() {
+    super();
+    EbsrConfigure.prototype.__init.call(this);
+    EbsrConfigure.prototype.__init2.call(this);
+    this._model = EbsrConfigure.createDefaultModel();
+    this._configuration = sensibleDefaults.configuration;
+    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
+  }
+  set model(m) {
+    this._model = EbsrConfigure.createDefaultModel(m, this._model);
+    this._render();
+  }
+  dispatchModelUpdated(reset) {
+    const resetValue = !!reset;
+    this.dispatchEvent(new ModelUpdatedEvent_1(this._model, resetValue));
+  }
+  __init() {
+    this.onModelChanged = (m, reset) => {
+      this._model = EbsrConfigure.createDefaultModel(m, this._model);
+      this.dispatchModelUpdated(reset);
+      this._render();
+    };
+  }
+  set configuration(c) {
+    const info = prepareCustomizationObject(c, this._model);
+    this._configuration = info.configuration;
+    this._render();
+  }
+  onConfigurationChanged(c) {
+    this._configuration = prepareCustomizationObject(c, this._model).configuration;
+    if (this._model) {
+      this.onModelChanged(this._model);
+    }
+    this._render();
+  }
+  __init2() {
+    this.onModelUpdated = e => {
+      if (e.target === this) {
+        return;
+      }
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      const id = e.target && e.target.getAttribute('id');
+      if (id) {
+        if (e.update) {
+          this._model[`part${id}`] = e.update;
+        }
+        this.dispatchEvent(new ModelUpdatedEvent_1(this._model));
+      }
+    };
+  }
+  connectedCallback() {
+    this.addEventListener(MODEL_UPDATED, this.onModelUpdated);
+    this._render();
+  }
+  disconnectedCallback() {
+    this.removeEventListener(MODEL_UPDATED, this.onModelUpdated);
+  }
+  _render() {
+    let element = React.createElement(Styled, {
+      model: this._model,
+      configuration: this._configuration,
+      onModelChanged: this.onModelChanged,
+      onConfigurationChanged: this.onConfigurationChanged
+    });
+    ReactDOM.render(element, this);
+  }
+}
+EbsrConfigure.__initStatic();
+export {EbsrConfigure as default};