@pie-element/multiple-choice 5.9.3-next.459 → 5.9.3-next.472

package/module/configure.js

@@ -0,0 +1,660 @@
+import {_dll_react, _dll_prop_types, _dll_material_ui__core_styles, _dll_material_ui__core, _dll_lodash, _dll_pie_lib__render_ui, _dll_debug, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.2.14/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.0.15/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.0.15/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';
+var DeleteImageEvent_1 = lib.DeleteImageEvent = DeleteImageEvent;
+class InsertImageEvent extends CustomEvent {
+  constructor(handler) {
+    super(InsertImageEvent.TYPE, {
+      bubbles: true,
+      detail: handler
+    });
+    this.handler = handler;
+  }
+}
+InsertImageEvent.TYPE = 'insert.image';
+var InsertImageEvent_1 = lib.InsertImageEvent = InsertImageEvent;
+const React$1 = _dll_react;
+const PropTypes = _dll_prop_types;
+const {color: color} = _dll_pie_lib__render_ui;
+const {withStyles: withStyles} = _dll_material_ui__core_styles;
+const {Button: Button} = _dll_material_ui__core;
+const {Tooltip: Tooltip} = _dll_material_ui__core;
+const {merge: merge} = _dll_lodash;
+const EditableHtml = _dll_pie_lib__editable_html;
+const {InputContainer: InputContainer} = _dll_pie_lib__config_ui;
+const {ChoiceConfiguration: ChoiceConfiguration} = _dll_pie_lib__config_ui;
+const {settings: settings} = _dll_pie_lib__config_ui;
+const {layout: layout} = _dll_pie_lib__config_ui;
+const {choiceUtils: utils$1} = _dll_pie_lib__config_ui;
+const _jsxFileName = "/home/circleci/repo/packages/multiple-choice/configure/src/main.jsx";
+const {Panel, toggle, radio, dropdown} = settings;
+const MAX_CHOICES = 9;
+const styles = theme => ({
+  promptHolder: {
+    width: '100%',
+    paddingBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2
+  },
+  prompt: {
+    paddingTop: theme.spacing.unit * 2,
+    width: '100%'
+  },
+  rationaleHolder: {
+    width: '70%'
+  },
+  accessibilityHolder: {
+    width: '70%'
+  },
+  rationale: {
+    paddingTop: theme.spacing.unit * 2
+  },
+  accessibility: {
+    paddingTop: theme.spacing.unit * 2
+  },
+  design: {
+    paddingTop: theme.spacing.unit * 3
+  },
+  choiceConfigurationHolder: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  choiceConfiguration: {
+    width: '100%',
+    paddingTop: theme.spacing.unit * 2,
+    paddingBottom: theme.spacing.unit * 2
+  },
+  switchElement: {
+    justifyContent: 'space-between',
+    margin: 0
+  },
+  addButton: {
+    float: 'right'
+  },
+  disableButton: {
+    cursor: 'not-allowed',
+    pointerEvents: 'all',
+    backgroundColor: color.disabled(),
+    '&:hover': {
+      backgroundColor: color.disabled()
+    },
+    '&:focus': {
+      backgroundColor: color.disabled()
+    }
+  }
+});
+const Design = withStyles(styles)(props => {
+  const {classes, model, configuration, onPromptChanged, onChoiceChanged, onRemoveChoice, onAddChoice, imageSupport, onChangeModel, onConfigurationChanged, onTeacherInstructionsChanged} = props;
+  const {prompt = {}, addChoiceButton = {}, limitChoicesNumber = {}, feedback = {}, deleteChoice = {}, choiceMode = {}, choicePrefix = {}, partialScoring = {}, lockChoiceOrder = {}, teacherInstructions = {}, studentInstructions = {}, rationale = {}, accessibility = {}, scoringType = {}, sequentialChoiceLabels = {}, settingsPanelDisabled, choicesLayout, gridColumns} = configuration || ({});
+  const {limitChoicesNumber: limitChoicesNumberModel, teacherInstructionsEnabled, rationaleEnabled, accessibilityLabelsEnabled, feedbackEnabled, promptEnabled, choices} = model || ({});
+  const nrOfColumnsAvailable = choices && choices.length ? Array.from({
+    length: choices.length
+  }, (_, i) => `${i + 1}`) : [];
+  const labelPlugins = {
+    audio: {
+      disabled: true
+    },
+    video: {
+      disabled: true
+    }
+  };
+  const toolbarOpts = {};
+  switch (model.toolbarEditorPosition) {
+    case 'top':
+      toolbarOpts.position = 'top';
+      break;
+    default:
+      toolbarOpts.position = 'bottom';
+      break;
+  }
+  const Content = React$1.createElement('div', {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 141
+    }
+  }, teacherInstructionsEnabled && React$1.createElement(InputContainer, {
+    label: teacherInstructions.label,
+    className: classes.promptHolder,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 143
+    }
+  }, React$1.createElement(EditableHtml, {
+    className: classes.prompt,
+    markup: model.teacherInstructions || '',
+    onChange: onTeacherInstructionsChanged,
+    imageSupport: imageSupport,
+    nonEmpty: false,
+    toolbarOpts: toolbarOpts,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 147
+    }
+  })), promptEnabled && React$1.createElement(InputContainer, {
+    label: prompt.label,
+    className: classes.promptHolder,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 159
+    }
+  }, React$1.createElement(EditableHtml, {
+    className: classes.prompt,
+    markup: model.prompt,
+    onChange: onPromptChanged,
+    imageSupport: imageSupport,
+    nonEmpty: false,
+    disableUnderline: true,
+    toolbarOpts: toolbarOpts,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 160
+    }
+  })), model.choices.map((choice, index) => React$1.createElement('div', {
+    key: `choice-${index}`,
+    className: classes.choiceConfigurationHolder,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 172
+    }
+  }, React$1.createElement(ChoiceConfiguration, {
+    key: index,
+    index: index + 1,
+    useLetterOrdering: model.choicePrefix === 'letters',
+    className: classes.choiceConfiguration,
+    mode: model.choiceMode,
+    data: choice,
+    defaultFeedback: {},
+    imageSupport: imageSupport,
+    onDelete: () => onRemoveChoice(index),
+    onChange: c => onChoiceChanged(index, c),
+    allowFeedBack: feedbackEnabled,
+    allowDelete: deleteChoice.settings,
+    noLabels: true,
+    toolbarOpts: toolbarOpts,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 176
+    }
+  }), rationaleEnabled && React$1.createElement(InputContainer, {
+    key: `rationale-${index}`,
+    label: rationale.label,
+    className: classes.rationaleHolder,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 193
+    }
+  }, React$1.createElement(EditableHtml, {
+    className: classes.rationale,
+    markup: choice.rationale || '',
+    onChange: c => onChoiceChanged(index, {
+      ...choice,
+      rationale: c
+    }),
+    imageSupport: imageSupport,
+    toolbarOpts: toolbarOpts,
+    pluginProps: labelPlugins,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 198
+    }
+  })), accessibilityLabelsEnabled && React$1.createElement(InputContainer, {
+    key: `accessibility-${index}`,
+    label: accessibility.label,
+    className: classes.accessibilityHolder,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 214
+    }
+  }, React$1.createElement(EditableHtml, {
+    className: classes.accessibility,
+    markup: choice.accessibility || '',
+    onChange: c => onChoiceChanged(index, {
+      ...choice,
+      accessibility: c
+    }),
+    imageSupport: imageSupport,
+    pluginProps: labelPlugins,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 219
+    }
+  })))), React$1.createElement('br', {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 235
+    }
+  }), addChoiceButton.settings && React$1.createElement(Tooltip, {
+    title: limitChoicesNumberModel && model.choices.length >= MAX_CHOICES ? `Only ${MAX_CHOICES} allowed maximum` : '',
+    classes: {
+      tooltip: classes.tooltip
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 237
+    }
+  }, React$1.createElement(Button, {
+    classes: {
+      root: limitChoicesNumberModel && model.choices.length >= MAX_CHOICES ? classes.disableButton : undefined
+    },
+    className: classes.addButton,
+    variant: "contained",
+    color: "primary",
+    onClick: onAddChoice,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 238
+    }
+  }, addChoiceButton.label)));
+  const settingsInPanel = {
+    choiceMode: choiceMode.settings && radio(choiceMode.label, ['checkbox', 'radio']),
+    'sequentialChoiceLabels.enabled': sequentialChoiceLabels.settings && toggle(sequentialChoiceLabels.label, true),
+    choicePrefix: choicePrefix.settings && radio(choicePrefix.label, ['numbers', 'letters']),
+    partialScoring: partialScoring.settings && toggle(partialScoring.label),
+    limitChoicesNumber: limitChoicesNumber.settings && toggle(limitChoicesNumber.label),
+    lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
+    feedbackEnabled: feedback.settings && toggle(feedback.label),
+    choicesLayout: choicesLayout.settings && dropdown(choicesLayout.label, ['vertical', 'grid', 'horizontal']),
+    gridColumns: choicesLayout.settings && model.choicesLayout === 'grid' && nrOfColumnsAvailable.length > 0 && dropdown(gridColumns.label, nrOfColumnsAvailable)
+  };
+  return React$1.createElement('div', {
+    className: classes.design,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 278
+    }
+  }, settingsPanelDisabled ? Content : React$1.createElement(layout.ConfigLayout, {
+    settings: React$1.createElement(Panel, {
+      model: model,
+      onChangeModel: onChangeModel,
+      configuration: configuration,
+      onChangeConfiguration: onConfigurationChanged,
+      groups: {
+        Settings: settingsInPanel,
+        Properties: {
+          teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+          studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
+          promptEnabled: prompt.settings && toggle(prompt.label),
+          rationaleEnabled: rationale.settings && toggle(rationale.label),
+          accessibilityLabelsEnabled: accessibility.settings && toggle(accessibility.label),
+          scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric'])
+        }
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 284
+      }
+    }),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 282
+    }
+  }, Content));
+});
+class Main extends React$1.Component {
+  constructor(...args) {
+    super(...args);
+    Main.prototype.__init.call(this);
+    Main.prototype.__init2.call(this);
+    Main.prototype.__init3.call(this);
+    Main.prototype.__init4.call(this);
+    Main.prototype.__init5.call(this);
+    Main.prototype.__init6.call(this);
+  }
+  static __initStatic() {
+    this.propTypes = {
+      model: PropTypes.object.isRequired,
+      disableSidePanel: PropTypes.bool,
+      onModelChanged: PropTypes.func.isRequired,
+      onConfigurationChanged: PropTypes.func.isRequired,
+      classes: PropTypes.object.isRequired,
+      imageSupport: PropTypes.shape({
+        add: PropTypes.func.isRequired,
+        delete: PropTypes.func.isRequired
+      })
+    };
+  }
+  __init() {
+    this.onRemoveChoice = index => {
+      const {model} = this.props;
+      model.choices.splice(index, 1);
+      this.props.onModelChanged(model);
+    };
+  }
+  __init2() {
+    this.onAddChoice = () => {
+      const {model} = this.props;
+      if (!model.limitChoicesNumber || model.limitChoicesNumber && model.choices.length < MAX_CHOICES) {
+        model.choices.push({
+          label: '',
+          value: utils$1.firstAvailableIndex(model.choices.map(c => c.value), 0),
+          feedback: {
+            type: 'none'
+          }
+        });
+        this.props.onModelChanged(model);
+      }
+    };
+  }
+  __init3() {
+    this.onChoiceChanged = (index, choice) => {
+      const {model} = this.props;
+      if (choice.correct && model.choiceMode === 'radio') {
+        model.choices = model.choices.map(c => {
+          return merge({}, c, {
+            correct: false
+          });
+        });
+      }
+      model.choices.splice(index, 1, choice);
+      this.props.onModelChanged(model);
+    };
+  }
+  __init4() {
+    this.onPromptChanged = prompt => {
+      this.props.onModelChanged({
+        ...this.props.model,
+        prompt
+      });
+    };
+  }
+  __init5() {
+    this.onTeacherInstructionsChanged = teacherInstructions => {
+      this.props.onModelChanged({
+        ...this.props.model,
+        teacherInstructions
+      });
+    };
+  }
+  __init6() {
+    this.onModelChanged = (model, key) => {
+      const {onModelChanged} = this.props;
+      switch (key) {
+        case 'choiceMode':
+          {
+            let value = model.choiceMode;
+            if (value === 'radio') {
+              let correctFound = false;
+              model.choices = model.choices.map(c => {
+                if (correctFound) {
+                  c.correct = false;
+                  return c;
+                }
+                if (c.correct) {
+                  correctFound = true;
+                }
+                return c;
+              });
+            }
+            onModelChanged(model, true);
+            break;
+          }
+        default:
+          onModelChanged(model);
+          break;
+      }
+    };
+  }
+  render() {
+    return React$1.createElement(Design, {
+      ...this.props,
+      onChangeModel: this.onModelChanged,
+      onRemoveChoice: this.onRemoveChoice,
+      onChoiceChanged: this.onChoiceChanged,
+      onAddChoice: this.onAddChoice,
+      onPromptChanged: this.onPromptChanged,
+      onTeacherInstructionsChanged: this.onTeacherInstructionsChanged,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 414
+      }
+    });
+  }
+}
+Main.__initStatic();
+const Styled = withStyles(styles)(Main);
+var sensibleDefaults = {
+  model: {
+    choiceMode: 'checkbox',
+    choicePrefix: 'letters',
+    choices: [],
+    prompt: 'Question Prompt goes here',
+    lockChoiceOrder: true,
+    partialScoring: true,
+    scoringType: 'auto',
+    feedbackEnabled: true,
+    promptEnabled: true,
+    rationaleEnabled: true,
+    limitChoicesNumber: true,
+    teacherInstructionsEnabled: true,
+    studentInstructionsEnabled: true,
+    toolbarEditorPosition: 'bottom',
+    choicesLayout: 'vertical',
+    gridColumns: '2'
+  },
+  configuration: {
+    choicesLayout: {
+      settings: false,
+      label: 'Choices Layout'
+    },
+    gridColumns: {
+      label: 'Grid columns'
+    },
+    answerChoiceCount: 0,
+    addChoiceButton: {
+      settings: true,
+      label: 'Add a Choice'
+    },
+    limitChoicesNumber: {
+      settings: true,
+      label: 'Limit choices to 9'
+    },
+    choiceMode: {
+      settings: true,
+      label: 'Response Type'
+    },
+    choicePrefix: {
+      settings: true,
+      label: 'Choice Labels'
+    },
+    deleteChoice: {
+      settings: true
+    },
+    feedback: {
+      settings: true,
+      label: 'Feedback'
+    },
+    prompt: {
+      settings: true,
+      label: 'Prompt'
+    },
+    lockChoiceOrder: {
+      settings: true,
+      label: 'Lock Choice Order'
+    },
+    partialScoring: {
+      settings: false,
+      label: 'Allow Partial Scoring'
+    },
+    rationale: {
+      settings: true,
+      label: 'Rationale'
+    },
+    accessibility: {
+      settings: false,
+      label: 'Accessibility Label'
+    },
+    scoringType: {
+      settings: false,
+      label: 'Scoring Type'
+    },
+    studentInstructions: {
+      settings: false,
+      label: 'Student Instructions'
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions'
+    },
+    toolbarEditorPosition: {
+      settings: false,
+      label: 'Toolbar Editor Position'
+    }
+  }
+};
+const React = _dll_react;
+const ReactDOM = _dll_react_dom;
+const debug = _dll_debug;
+const {defaults: defaults} = _dll_lodash;
+const {choiceUtils: utils} = _dll_pie_lib__config_ui;
+const log = debug('multiple-choice:configure');
+const generateFormattedChoices = (choices, choiceCount = 0) => {
+  if (!choices || choices.length === 0) {
+    let formattedChoices = [];
+    for (let i = 0; i < choiceCount; i++) {
+      formattedChoices.push({
+        value: `${i}`,
+        label: '',
+        feedback: {
+          type: 'none',
+          value: ''
+        }
+      });
+    }
+    return formattedChoices;
+  }
+  return choices;
+};
+const prepareCustomizationObject = (config, model) => {
+  const configuration = defaults(config, sensibleDefaults.configuration);
+  return {
+    configuration,
+    model: {
+      ...model,
+      choices: generateFormattedChoices(model && model.choices || [], configuration && configuration.answerChoiceCount)
+    }
+  };
+};
+class MultipleChoice extends HTMLElement {
+  static __initStatic() {
+    this.createDefaultModel = (model = {}) => {
+      const normalizedModel = utils.normalizeChoices({
+        ...sensibleDefaults.model,
+        ...model,
+        choices: generateFormattedChoices(model && model.choices || [])
+      });
+      normalizedModel.choicesLayout = model.choicesLayout || model.verticalMode === false && 'horizontal' || sensibleDefaults.model.choicesLayout;
+      return normalizedModel;
+    };
+  }
+  constructor() {
+    super();
+    this._model = MultipleChoice.createDefaultModel();
+    this._configuration = sensibleDefaults.configuration;
+    this.onModelChanged = this.onModelChanged.bind(this);
+    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
+  }
+  set model(s) {
+    this._model = MultipleChoice.createDefaultModel(s);
+    this._render();
+  }
+  set configuration(c) {
+    const info = prepareCustomizationObject(c, this._model);
+    this.onModelChanged(info.model);
+    this._configuration = info.configuration;
+    this._render();
+  }
+  set disableSidePanel(s) {
+    this._disableSidePanel = s;
+    this._render();
+  }
+  dispatchModelUpdated(reset) {
+    const resetValue = !!reset;
+    this.dispatchEvent(new ModelUpdatedEvent_1(this._model, resetValue));
+  }
+  onModelChanged(m, reset) {
+    this._model = m;
+    this._render();
+    this.dispatchModelUpdated(reset);
+  }
+  onConfigurationChanged(c) {
+    this._configuration = prepareCustomizationObject(c, this._model).configuration;
+    if (this._model) {
+      this.onModelChanged(this._model);
+    }
+    this._render();
+  }
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent_1(handler));
+  }
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent_1(src, done));
+  }
+  _render() {
+    log('_render');
+    let element = React.createElement(Styled, {
+      model: this._model,
+      configuration: this._configuration,
+      onModelChanged: this.onModelChanged,
+      onConfigurationChanged: this.onConfigurationChanged,
+      disableSidePanel: this._disableSidePanel,
+      imageSupport: {
+        add: this.insertImage.bind(this),
+        delete: this.onDeleteImage.bind(this)
+      }
+    });
+    ReactDOM.render(element, this);
+  }
+}
+MultipleChoice.__initStatic();
+export {MultipleChoice as default};