@pie-element/passage 5.0.2-esm.0 → 5.2.0

package/esm/configure.js

@@ -1,708 +0,0 @@
-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