@pie-element/ebsr 9.12.1 → 9.12.2-next.18

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/drag/placeholder.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import grey from '@material-ui/core/colors/grey';
+
+export const PlaceHolder = (props) => {
+  const { children, classes, className, isOver, type, grid, disabled, choiceBoard } = props;
+  const names = classNames(
+    classes.placeholder,
+    disabled && classes.disabled,
+    isOver && classes.over,
+    classes[type],
+    className,
+  );
+
+  const style = {};
+
+  if (grid && grid.columns) {
+    style.gridTemplateColumns = `repeat(${grid.columns}, 1fr)`;
+  }
+  if (grid && grid.rows) {
+    const repeatValue = grid.rowsRepeatValue || '1fr';
+
+    style.gridTemplateRows = `repeat(${grid.rows}, ${repeatValue})`;
+  }
+
+  return (
+    <div style={style} className={choiceBoard ? classes.board : names}>
+      {children}
+    </div>
+  );
+};
+
+PlaceHolder.propTypes = {
+  classes: PropTypes.object.isRequired,
+  choiceBoard: PropTypes.bool,
+  grid: PropTypes.shape({
+    columns: PropTypes.number,
+    rows: PropTypes.number,
+    // if a different value then 1fr is wanted
+    rowsRepeatValue: PropTypes.string,
+  }),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  className: PropTypes.string,
+  isOver: PropTypes.bool,
+  index: PropTypes.number,
+  type: PropTypes.string,
+  disabled: PropTypes.bool,
+};
+
+const styles = (theme) => ({
+  placeholder: {
+    width: '100%',
+    height: '100%',
+    background: theme.palette.grey[200],
+    border: '1px solid #D1D1D1',
+    transition: 'background-color 200ms linear, border-color 200ms linear',
+    boxSizing: 'border-box',
+    display: 'grid',
+    gridRowGap: `${theme.spacing.unit}px`,
+    gridColumnGap: `${theme.spacing.unit}px`,
+    padding: theme.spacing.unit * 1,
+  },
+  disabled: {
+    boxShadow: 'none',
+    background: theme.palette.background.paper,
+  },
+  over: {
+    border: `1px solid ${grey[500]}`,
+    backgroundColor: `${grey[300]}`,
+  },
+  board: {
+    border: '1px solid #D1D1D1',
+    padding: theme.spacing.unit,
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    minHeight: '200px',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    touchAction: 'none',
+  },
+});
+
+export default withStyles(styles)(PlaceHolder);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/drag/preview-component.jsx

@@ -0,0 +1,149 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { usePreview } from 'react-dnd-multi-backend';
+import { PreviewPrompt, color } from '../render-ui';
+import { renderMath } from '../math-rendering-accessible';
+
+const styles = {
+  maskBlank: {
+    border: '1px solid black',
+    color: 'black',
+    minWidth: '90px',
+    minHeight: '32px',
+    height: 'auto',
+    maxWidth: '374px',
+    display: 'flex',
+    padding: '4px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '16px',
+  },
+  ica: {
+    backgroundColor: color.background(),
+    border: `1px solid ${color.primary()}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '28px',
+    padding: '0 3px',
+    marginLeft: 2,
+    marginTop: 2,
+    width: 'fit-content',
+  },
+  categorize: {
+    color: color.text(),
+    backgroundColor: color.background(),
+    padding: '16px',
+    borderRadius: '4px',
+    border: '1px solid',
+  },
+  matchList: {
+    color: color.text(),
+    backgroundColor: color.background(),
+    padding: '10px',
+    boxSizing: 'border-box',
+    border: '1px solid #D1D1D1',
+  },
+  placementOrdering: {
+    padding: '10px',
+    boxSizing: 'border-box',
+    border: '1px solid #D1D1D1',
+    backgroundColor: color.background(),
+  },
+};
+
+const getPrompt = (itemType, item) => {
+  switch (itemType) {
+    // DRAG-IN-THE-BLANK
+    case 'MaskBlank':
+      return item?.choice?.value;
+    // IMAGE-CLOZE-ASSOCIATION
+    case 'react-dnd-response':
+      return item?.value;
+    // MATCH-LIST
+    case 'Answer':
+      return item?.value;
+    // PLACEMENT-ORDERING
+    case 'Tile':
+      return item?.value;
+    default:
+      return item?.itemType === 'categorize' ? item?.value : undefined;
+  }
+};
+
+const getCustomStyle = (itemType, item, touchPosition, style) => {
+  const transform = `translate(${touchPosition.x}px, ${touchPosition.y}px)`;
+  const top = style?.top || 0;
+  const left = style?.left || 0;
+  const position = style?.position || 'fixed';
+
+  return {
+    position,
+    top,
+    left,
+    transform,
+    ...(itemType === 'MaskBlank' ? styles.maskBlank : {}),
+    ...(item?.itemType === 'categorize' ? styles.categorize : {}),
+    ...(itemType === 'Answer' ? styles.matchList : {}),
+    ...(itemType === 'Tile' ? styles.placementOrdering : {}),
+    ...(itemType === 'react-dnd-response' ? styles.ica : {}),
+  };
+};
+
+const PreviewComponent = () => {
+  const preview = usePreview();
+  const { itemType, item, style, display } = preview;
+  const [touchPosition, setTouchPosition] = useState({ x: 0, y: 0 });
+  const [zoomLevel, setZoomLevel] = useState(1);
+
+  const handleTouchMove = useCallback(
+    (event) => {
+      if (event.touches.length > 0) {
+        const touch = event.touches[0];
+        setTouchPosition({
+          x: touch.clientX / zoomLevel,
+          y: touch.clientY / zoomLevel,
+        });
+      }
+    },
+    [zoomLevel],
+  );
+
+  const root = useRef(null);
+
+  useEffect(() => {
+    if (display && root.current) {
+      renderMath(root.current);
+
+      // Adjusted for precise zoom level calculation in Online Testing, targeting the specific class pattern .asmt-zoomable.asmt-zoom-NR .asmt-question .padding
+      const zoomAffectedElement = document.querySelector('.padding') || document.body;
+
+      setZoomLevel(parseFloat(getComputedStyle(zoomAffectedElement).zoom) || 1);
+    }
+  }, [display, item?.choice?.value, item?.value, itemType, item]);
+
+  useEffect(() => {
+    const touchMoveListener = (event) => handleTouchMove(event);
+    if (display) {
+      window.addEventListener('touchmove', touchMoveListener);
+    }
+    return () => {
+      window.removeEventListener('touchmove', touchMoveListener);
+    };
+  }, [display, handleTouchMove]);
+
+  if (!display) {
+    return null;
+  }
+
+  const customStyle = getCustomStyle(itemType, item, touchPosition, style);
+
+  const prompt = getPrompt(itemType, item);
+
+  return (
+    <div ref={root} style={customStyle}>
+      <PreviewPrompt className="label" prompt={prompt} tagName="span" />
+    </div>
+  );
+};
+
+export default PreviewComponent;

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/drag/swap.js

@@ -0,0 +1,14 @@
+import cloneDeep from 'lodash/cloneDeep';
+
+export default (arr, fromIndex, toIndex) => {
+  if (!arr || arr.length <= 1 || fromIndex === undefined || toIndex === undefined) {
+    throw new Error(`swap requires a non-empty array, fromIndex, toIndex: ${arr}, ${fromIndex} ${toIndex}`);
+  }
+
+  const update = cloneDeep(arr);
+  const tmp = arr[toIndex];
+  update[toIndex] = update[fromIndex];
+  update[fromIndex] = tmp;
+
+  return update;
+};

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/drag/uid-context.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const { Consumer, Provider } = React.createContext(-1);
+
+export { Provider, Consumer };
+
+export const generateId = () => (Math.random() * 1000001).toFixed(0);
+
+export const withUid = (Component) => {
+  const Wrapped = (props) => <Consumer>{(uid) => <Component {...props} uid={uid} />}</Consumer>;
+
+  return Wrapped;
+};

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/drag/with-drag-context.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import MultiBackend, { TouchTransition } from 'react-dnd-multi-backend';
+import { DndProvider } from 'react-dnd';
+import { TouchBackend } from 'react-dnd-touch-backend';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+import PreviewComponent from './preview-component';
+
+const backends = [
+  { backend: HTML5Backend },
+  {
+    backend: TouchBackend,
+    options: { enableMouseEvents: true, enableTouchEvents: true },
+    preview: true,
+    transition: TouchTransition,
+    skipDispatchOnTransition: true,
+  },
+];
+
+export default (Component) => (props) => (
+  <DndProvider backend={MultiBackend} options={{ backends }} context={window}>
+    <Component {...props} />
+    <PreviewComponent />
+  </DndProvider>
+);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/block-tags.js

@@ -0,0 +1,19 @@
+/**
+ * Tags to blocks.
+ *
+ * @type {Object}
+ */
+
+export const BLOCK_TAGS = {
+  div: 'div',
+  span: 'span',
+  p: 'paragraph',
+  blockquote: 'quote',
+  pre: 'code',
+  h1: 'heading-one',
+  h2: 'heading-two',
+  h3: 'heading-three',
+  h4: 'heading-four',
+  h5: 'heading-five',
+  h6: 'heading-six',
+};