@pie-element/passage 5.0.1-next.0 → 5.0.2-esm.0

package/esm/configure.js

@@ -0,0 +1,708 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ModelUpdatedEvent, InsertImageEvent, DeleteImageEvent, InsertSoundEvent, DeleteSoundEvent } from '@pie-framework/pie-configure-events';
+import PropTypes from 'prop-types';
+import { InputContainer, layout, settings } from '@pie-lib/config-ui';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import { Button } from '@material-ui/core';
+import RemoveCircleIcon from '@material-ui/icons/RemoveCircle';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogActions from '@material-ui/core/DialogActions';
+import EditableHtml, { ALL_PLUGINS } from '@pie-lib/editable-html';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+const RemoveAddButton = ({
+  classes,
+  label,
+  type: _type = 'add',
+  onClick
+}) => {
+  const Tag = _type === 'add' ? AddCircleIcon : RemoveCircleIcon;
+  return /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    size: "small",
+    className: classes.root,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Tag, {
+    fontSize: 'small',
+    color: 'primary',
+    className: classes.icon
+  }), label);
+};
+const PassageButton = withStyles(theme => ({
+  root: {
+    textDecoration: 'underline',
+    '&:hover': {
+      textDecoration: 'underline',
+      backgroundColor: 'transparent'
+    }
+  },
+  label: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  icon: {
+    marginRight: theme.spacing.unit / 2
+  }
+}))(RemoveAddButton);
+const ConfimationDialog = ({
+  content,
+  cancel,
+  title,
+  ok,
+  open,
+  onOk,
+  onCancel
+}) => /*#__PURE__*/React.createElement(Dialog, {
+  open: open
+}, /*#__PURE__*/React.createElement(DialogTitle, null, title), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(DialogContentText, null, content)), /*#__PURE__*/React.createElement(DialogActions, null, onOk && /*#__PURE__*/React.createElement(Button, {
+  onClick: onOk,
+  color: "primary"
+}, ok), onCancel && /*#__PURE__*/React.createElement(Button, {
+  onClick: onCancel,
+  color: "primary"
+}, cancel)));
+ConfimationDialog.propTypes = {
+  content: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  cancel: PropTypes.string.isRequired,
+  ok: PropTypes.string.isRequired,
+  open: PropTypes.bool.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onOk: PropTypes.func.isRequired
+};
+
+class PassageComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleChange = (fieldName, value) => {
+      const {
+        model,
+        onModelChanged,
+        passageIndex
+      } = this.props;
+
+      if (!model.passages || passageIndex < 0 || passageIndex >= model.passages.length) {
+        return;
+      }
+
+      const updatedPassages = [...model.passages];
+      updatedPassages[passageIndex] = _extends({}, updatedPassages[passageIndex], {
+        [fieldName]: value
+      });
+      onModelChanged(_extends({}, model, {
+        passages: updatedPassages
+      }));
+    };
+  }
+
+  render() {
+    const {
+      model,
+      classes,
+      configuration,
+      imageSupport,
+      passageIndex,
+      uploadSoundSupport
+    } = this.props;
+    const {
+      maxImageWidth = {},
+      maxImageHeight = {},
+      mathMlOptions = {},
+      baseInputConfiguration = {},
+      teacherInstructions = {},
+      title = {},
+      subtitle = {},
+      text = {},
+      author = {}
+    } = configuration || {};
+    const {
+      errors = {},
+      passages = [],
+      teacherInstructionsEnabled,
+      titleEnabled,
+      subtitleEnabled,
+      authorEnabled,
+      textEnabled
+    } = model || {};
+    const {
+      passages: passagesErrors
+    } = errors || {};
+    const {
+      teacherInstructions: teacherInstructionsError,
+      title: titleError,
+      subtitle: subtitleError,
+      author: authorError,
+      text: textError
+    } = passagesErrors && passagesErrors[passageIndex] || {};
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+
+    const getPluginProps = customConfiguration => _extends({}, baseInputConfiguration, customConfiguration);
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, teacherInstructionsEnabled && /*#__PURE__*/React.createElement(InputContainer, {
+      label: teacherInstructions.label,
+      className: classes.inputContainer
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      activePlugins: ALL_PLUGINS,
+      markup: passages[passageIndex].teacherInstructions || '',
+      onChange: value => this.handleChange('teacherInstructions', value),
+      nonEmpty: false,
+      error: teacherInstructionsError,
+      maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+      mathMlOptions: mathMlOptions,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      pluginProps: getPluginProps(teacherInstructions == null ? void 0 : teacherInstructions.inputConfiguration)
+    }), teacherInstructionsError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, teacherInstructionsError)), titleEnabled && /*#__PURE__*/React.createElement(InputContainer, {
+      label: title.label,
+      className: classes.inputContainer
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      activePlugins: ALL_PLUGINS,
+      markup: passages[passageIndex].title || '',
+      onChange: value => this.handleChange('title', value),
+      nonEmpty: false,
+      error: titleError,
+      mathMlOptions: mathMlOptions,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      pluginProps: getPluginProps(title == null ? void 0 : title.inputConfiguration)
+    }), titleError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, titleError)), subtitleEnabled && /*#__PURE__*/React.createElement(InputContainer, {
+      label: subtitle.label,
+      className: classes.inputContainer
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      activePlugins: ALL_PLUGINS,
+      markup: passages[passageIndex].subtitle || '',
+      onChange: value => this.handleChange('subtitle', value),
+      nonEmpty: false,
+      error: subtitleError,
+      mathMlOptions: mathMlOptions,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      pluginProps: getPluginProps(subtitle == null ? void 0 : subtitle.inputConfiguration)
+    }), subtitleError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, subtitleError)), authorEnabled && /*#__PURE__*/React.createElement(InputContainer, {
+      label: author.label,
+      className: classes.inputContainer
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      activePlugins: ALL_PLUGINS,
+      markup: passages[passageIndex].author || '',
+      onChange: value => this.handleChange('author', value),
+      nonEmpty: false,
+      error: authorError,
+      mathMlOptions: mathMlOptions,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      pluginProps: getPluginProps(author == null ? void 0 : author.inputConfiguration)
+    }), authorError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, authorError)), textEnabled && /*#__PURE__*/React.createElement(InputContainer, {
+      label: text.label,
+      className: classes.inputContainer
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      activePlugins: ALL_PLUGINS,
+      markup: passages[passageIndex].text || '',
+      onChange: value => this.handleChange('text', value),
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      nonEmpty: false,
+      error: textError,
+      maxImageWidth: maxImageWidth && maxImageWidth.text || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.text || defaultImageMaxHeight,
+      mathMlOptions: mathMlOptions,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      pluginProps: getPluginProps(text == null ? void 0 : text.inputConfiguration)
+    }), textError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, textError)));
+  }
+
+}
+PassageComponent.propTypes = {
+  classes: PropTypes.object,
+  onModelChanged: PropTypes.func.isRequired,
+  model: PropTypes.object.isRequired,
+  configuration: PropTypes.object.isRequired,
+  imageSupport: PropTypes.object.isRequired,
+  passageIndex: PropTypes.number.isRequired,
+  uploadSoundSupport: PropTypes.object.isRequired
+};
+PassageComponent.defaultProps = {
+  passageIndex: 0
+};
+var Passage = withStyles(theme => ({
+  inputContainer: {
+    paddingTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2,
+    width: '100%'
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingTop: theme.spacing.unit
+  }
+}))(PassageComponent);
+
+const {
+  Panel,
+  toggle,
+  dropdown
+} = settings;
+class Main extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.getInnerText = html => (html || '').replaceAll(/<[^>]*>/g, '');
+
+    this.onDelete = (model, indexToRemove, onModelChanged) => {
+      let updatedPassages = model.passages;
+      updatedPassages.splice(indexToRemove, 1);
+      onModelChanged(_extends({}, model, {
+        passages: updatedPassages
+      }));
+      this.setState({
+        showConfirmationDialog: false,
+        indexToRemove: -1
+      });
+    };
+
+    this.removeAdditionalPassage = indexToRemove => {
+      const {
+        model = {},
+        onModelChanged
+      } = this.props;
+      const {
+        passages = []
+      } = model;
+      const {
+        teacherInstructions = '',
+        title = '',
+        subtitle = '',
+        author = '',
+        text = ''
+      } = passages[indexToRemove];
+
+      if (this.getInnerText(teacherInstructions).trim() || this.getInnerText(title).trim() || this.getInnerText(subtitle).trim() || this.getInnerText(author).trim() || this.getInnerText(text).trim()) {
+        this.setState({
+          showConfirmationDialog: true,
+          indexToRemove
+        });
+      } else {
+        this.onDelete(model, indexToRemove, onModelChanged);
+      }
+    };
+
+    this.addAdditionalPassage = () => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const updatedPassages = [...model.passages, {
+        teacherInstructions: '',
+        title: '',
+        subtitle: '',
+        author: '',
+        text: ''
+      }];
+      onModelChanged(_extends({}, model, {
+        passages: updatedPassages
+      }));
+    };
+
+    this.state = {
+      showConfirmationDialog: false,
+      indexToRemove: -1
+    };
+  }
+
+  render() {
+    const {
+      classes,
+      model,
+      configuration,
+      imageSupport,
+      onConfigurationChanged,
+      onModelChanged,
+      uploadSoundSupport
+    } = this.props;
+    const {
+      settingsPanelDisabled,
+      language = {},
+      languageChoices = {},
+      teacherInstructions = {},
+      title = {},
+      subtitle = {},
+      text = {},
+      author = {},
+      additionalPassage = {}
+    } = configuration || {};
+    const {
+      extraCSSRules,
+      passages
+    } = model || {};
+    const panelSettings = {
+      titleEnabled: title && title.settings && toggle(title.label),
+      subtitleEnabled: subtitle && subtitle.settings && toggle(subtitle.label),
+      authorEnabled: author && author.settings && toggle(author.label),
+      textEnabled: text && text.settings && toggle(text.label),
+      'additionalPassage.enabled': additionalPassage && additionalPassage.settings && toggle(additionalPassage.label, true)
+    };
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions && teacherInstructions.settings && toggle(teacherInstructions.label),
+      'language.enabled': language && language.settings && toggle(language.label, true),
+      language: language && language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
+    };
+    const confirmationDialogContent = `${additionalPassage.label} will be deleted`;
+    const {
+      indexToRemove,
+      showConfirmationDialog
+    } = this.state;
+    return /*#__PURE__*/React.createElement(layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/React.createElement(Panel, {
+        model: model,
+        configuration: configuration,
+        onChangeModel: model => onModelChanged(model),
+        onChangeConfiguration: config => onConfigurationChanged(config),
+        groups: {
+          Settings: panelSettings,
+          Properties: panelProperties
+        }
+      })
+    }, passages.map((passage, passageIndex) => /*#__PURE__*/React.createElement(React.Fragment, {
+      key: passageIndex
+    }, passageIndex > 0 && /*#__PURE__*/React.createElement(Typography, {
+      variant: "h5",
+      className: classes.additionalPassageHeading
+    }, additionalPassage.label), /*#__PURE__*/React.createElement(Passage, {
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      model: model,
+      configuration: configuration,
+      passageIndex: passageIndex,
+      onModelChanged: onModelChanged
+    }), passageIndex > 0 && additionalPassage.enabled && /*#__PURE__*/React.createElement(PassageButton, {
+      type: 'remove',
+      label: `Remove ${additionalPassage.label}`,
+      onClick: () => this.removeAdditionalPassage(passageIndex)
+    }), passageIndex === 0 && additionalPassage.enabled && passages.length < 2 && /*#__PURE__*/React.createElement(PassageButton, {
+      label: `Add ${additionalPassage.label}`,
+      onClick: this.addAdditionalPassage
+    }))), /*#__PURE__*/React.createElement(ConfimationDialog, {
+      open: showConfirmationDialog,
+      title: 'Warning',
+      content: confirmationDialogContent,
+      cancel: 'Cancel',
+      ok: 'Ok',
+      onCancel: () => this.setState({
+        showConfirmationDialog: false
+      }),
+      onOk: () => this.onDelete(model, indexToRemove, onModelChanged)
+    }));
+  }
+
+}
+Main.propTypes = {
+  onModelChanged: PropTypes.func.isRequired,
+  onConfigurationChanged: PropTypes.func,
+  model: PropTypes.object.isRequired,
+  configuration: PropTypes.object.isRequired,
+  imageSupport: PropTypes.object.isRequired,
+  uploadSoundSupport: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired
+};
+var Main$1 = withStyles(theme => ({
+  additionalPassageHeading: {
+    paddingTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2
+  }
+}))(Main);
+
+// TODO: also update '../../controller/src/defaults.js' and '../../src/print.js' when updating defaults
+var defaultValues = {
+  model: {
+    authorEnabled: true,
+    passages: [{
+      teacherInstructions: '',
+      title: '',
+      subtitle: '',
+      author: '',
+      text: ''
+    }],
+    subtitleEnabled: true,
+    teacherInstructionsEnabled: true,
+    textEnabled: true,
+    titleEnabled: true
+  },
+  configuration: {
+    baseInputConfiguration: {
+      audio: {
+        disabled: false
+      },
+      video: {
+        disabled: false
+      },
+      image: {
+        disabled: false
+      },
+      h3: {
+        disabled: true
+      },
+      blockquote: {
+        disabled: true
+      },
+      textAlign: {
+        disabled: true
+      },
+      showParagraphs: {
+        disabled: false
+      },
+      separateParagraphs: {
+        disabled: true
+      }
+    },
+    settingsPanelDisabled: false,
+    title: {
+      settings: true,
+      label: 'Title',
+      inputConfiguration: {
+        audio: {
+          disabled: true
+        },
+        video: {
+          disabled: true
+        },
+        image: {
+          disabled: true
+        },
+        textAlign: {
+          disabled: false
+        }
+      },
+      required: true
+    },
+    subtitle: {
+      settings: true,
+      label: 'Subtitle',
+      inputConfiguration: {
+        audio: {
+          disabled: true
+        },
+        video: {
+          disabled: true
+        },
+        image: {
+          disabled: true
+        },
+        textAlign: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    author: {
+      settings: true,
+      label: 'Author',
+      inputConfiguration: {
+        audio: {
+          disabled: true
+        },
+        video: {
+          disabled: true
+        },
+        image: {
+          disabled: true
+        }
+      },
+      required: false
+    },
+    text: {
+      settings: true,
+      label: 'Text',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        },
+        h3: {
+          disabled: false
+        },
+        blockquote: {
+          disabled: false
+        },
+        textAlign: {
+          disabled: false
+        }
+      },
+      required: true
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    maxImageWidth: {
+      teacherInstructions: 300,
+      text: 300
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      text: 300
+    },
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false
+    },
+    language: {
+      settings: false,
+      label: 'Specify Language',
+      enabled: false
+    },
+    languageChoices: {
+      label: 'Language Choices',
+      options: []
+    },
+    additionalPassage: {
+      settings: true,
+      label: 'Additional Passage',
+      enabled: false
+    }
+  }
+};
+
+class PassageConfigure extends HTMLElement {
+  constructor() {
+    super();
+    this._model = PassageConfigure.createDefaultModel();
+    this._configuration = defaultValues.configuration;
+  }
+
+  set model(m) {
+    this._model = PassageConfigure.createDefaultModel(m);
+    this.render();
+  }
+
+  set configuration(c) {
+    this._configuration = c;
+    this.render();
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  modelChanged(m) {
+    this._model = m;
+    this.dispatchEvent(new ModelUpdatedEvent(this._model), true);
+    this.render();
+  }
+
+  onConfigurationChanged(c) {
+    this._configuration = c;
+    this.render();
+  }
+
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent(handler));
+  }
+
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent(src, done));
+  }
+
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
+  render() {
+    if (this._model) {
+      const el = /*#__PURE__*/React.createElement(Main$1, {
+        model: this._model,
+        configuration: this._configuration,
+        onModelChanged: this.modelChanged.bind(this),
+        onConfigurationChanged: this.onConfigurationChanged.bind(this),
+        imageSupport: {
+          add: this.insertImage.bind(this),
+          delete: this.onDeleteImage.bind(this)
+        },
+        uploadSoundSupport: {
+          add: this.insertSound.bind(this),
+          delete: this.onDeleteSound.bind(this)
+        }
+      });
+      ReactDOM.render(el, this);
+    }
+  }
+
+}
+
+PassageConfigure.createDefaultModel = (model = {}) => _extends({}, defaultValues.model, model);
+
+export { PassageConfigure as default };
+//# sourceMappingURL=configure.js.map