@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/widgets/label-image/answer-choices.jsx

@@ -0,0 +1,231 @@
+// @flow
+/**
+ * Controlled list of answer choices, handles adding and removing answers.
+ */
+
+import {components, globalStyles} from "@khanacademy/perseus";
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import FormWrappedTextField from "../../components/form-wrapped-text-field.jsx";
+import Link from "../../components/link.jsx";
+
+const {colors, typography} = globalStyles;
+const {Icon} = components;
+
+type AddAnswerProps = {
+    // Callback to add new answer choice.
+    onClick: () => void,
+    ...
+};
+
+type AnswerProps = {
+    // The answer string, can be plain text or a KaTeX expression.
+    answer: string,
+    // Callback for when an answer is changed.
+    onChange: (answer: string) => void,
+    // Callback to remove answer from list of choices.
+    onRemove: () => void,
+    ...
+};
+
+type AnswerChoicesProps = {
+    // The list of possible answers in a specific order.
+    choices: $ReadOnlyArray<string>,
+    // Callback for when answers change.
+    onChange: (choices: $ReadOnlyArray<string>) => void,
+    ...
+};
+
+const addIcon = {
+    path: "M11 11V7a1 1 0 0 1 2 0v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4zm1 13C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z",
+    width: 24,
+    height: 24,
+};
+
+const removeIcon = {
+    path: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-5-9a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2H7z",
+    width: 24,
+    height: 24,
+};
+
+const DraggableGripIcon = () => (
+    <svg width="16" height="16" viewBox="0 0 16 16">
+        <filter
+            id="draggable-grip-shadow"
+            width="112.5%"
+            height="116.7%"
+            x="-6.2%"
+            y="-8.3%"
+            filterUnits="objectBoundingBox"
+        >
+            <feGaussianBlur
+                in="SourceAlpha"
+                stdDeviation=".5"
+                result="shadowBlurInner"
+            />
+
+            <feOffset in="shadowBlurInner" dy="1" result="shadowOffsetInner" />
+
+            <feComposite
+                in="shadowOffsetInner"
+                in2="SourceAlpha"
+                k2="-1"
+                k3="1"
+                operator="arithmetic"
+                result="shadowInnerInner"
+            />
+
+            <feColorMatrix
+                in="shadowInnerInner"
+                values="0 0 0 0 0.129411765 0 0 0 0 0.141176471 0 0 0 0 0.17254902 0 0 0 0.2 0"
+            />
+        </filter>
+
+        <path
+            d="M1 4a1 1 0 1 1 0-2h14a1 1 0 0 1 0 2H1zm0 10a1 1 0 0 1 0-2h14a1 1 0 0 1 0 2H1zm0-5a1 1 0 1 1 0-2h14a1 1 0 0 1 0 2H1z"
+            fill={colors.gray17}
+            filter="url(#draggable-grip-shadow)"
+        />
+    </svg>
+);
+
+/**
+ * A button link to add a new answer.
+ */
+const AddAnswer = ({onClick}: AddAnswerProps) => (
+    <Link
+        className={css(styles.addAnswer, editorStyles.addAnswer)}
+        onClick={onClick}
+    >
+        <Icon icon={addIcon} size={24} />
+        <div className={css(styles.spacer)} />
+        Add an answer choice
+    </Link>
+);
+
+/**
+ * An answer item in the choices list.
+ *
+ * TODO(michaelpolyak): Implement answer reordering, CP-117
+ */
+const Answer = ({answer, onChange, onRemove}: AnswerProps) => (
+    <li className={css(styles.answer)}>
+        <Link onClick={onRemove}>
+            <Icon icon={removeIcon} size={24} color="#D92916" />
+        </Link>
+
+        <div className={css(styles.spacer)} />
+
+        <FormWrappedTextField
+            grow={1}
+            onChange={(e) => onChange(e.target.value)}
+            value={answer}
+        />
+
+        <div className={css(styles.spacer)} />
+
+        <Link
+            style={[styles.disabled]}
+            title="Answer reordering is not implemented."
+        >
+            <DraggableGripIcon />
+        </Link>
+    </li>
+);
+
+/**
+ * The list of choices, handles adding, removing and reording of answers.
+ */
+const AnswerChoices = ({
+    choices,
+    onChange,
+}: AnswerChoicesProps): React.Element<"div"> => (
+    <div>
+        <div className={css(styles.title)}>Answer Choices</div>
+
+        <ul className={css(styles.answers)}>
+            {choices.map((answer, index) => (
+                <Answer
+                    answer={answer}
+                    // TODO(michaelpolyak): When answer reording is implemented,
+                    // key by index may not re-render correctly, CP-117
+                    key={index}
+                    // Update answer for choice.
+                    onChange={(answer) =>
+                        onChange([
+                            ...choices.slice(0, index),
+                            answer,
+                            ...choices.slice(index + 1),
+                        ])
+                    }
+                    // Remove answer from choices.
+                    onRemove={() =>
+                        onChange([
+                            ...choices.slice(0, index),
+                            ...choices.slice(index + 1),
+                        ])
+                    }
+                />
+            ))}
+        </ul>
+
+        <AddAnswer
+            // Append a new empty answer to choices.
+            onClick={() => onChange([...choices, ""])}
+        />
+    </div>
+);
+
+const styles = StyleSheet.create({
+    title: {
+        ...typography.bodyXsmallBold,
+
+        marginBottom: 6,
+
+        color: colors.gray17,
+    },
+
+    answers: {
+        marginTop: 12,
+        marginBottom: 12,
+    },
+
+    answer: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+
+        ":not(:first-child)": {
+            marginTop: 12,
+        },
+    },
+
+    addAnswer: {
+        ...typography.bodyXsmallBold,
+
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+
+        color: "#1865f2",
+    },
+
+    spacer: {
+        width: 16,
+    },
+
+    disabled: {
+        cursor: "not-allowed",
+    },
+});
+
+const editorStyles = StyleSheet.create({
+    addAnswer: {
+        ":link": {
+            color: "#1865f2",
+        },
+    },
+});
+
+export default AnswerChoices;

package/src/widgets/label-image/behavior.jsx

@@ -0,0 +1,92 @@
+// @flow
+/**
+ * Controlled component to display and change widget options.
+ */
+
+import {globalStyles} from "@khanacademy/perseus";
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import Checkbox from "../../components/checkbox.jsx";
+
+const {colors, typography} = globalStyles;
+
+type BehaviorProps = {
+    // Whether multiple answer choices may be selected for markers.
+    multipleAnswers: boolean,
+    // Whether to hide answer choices from user instructions.
+    hideChoicesFromInstructions: boolean,
+    // Callback for when widget options change.
+    onChange: (options: {|
+        multipleAnswers?: boolean,
+        hideChoicesFromInstructions?: boolean,
+    |}) => void,
+    ...
+};
+
+const Behavior = ({
+    multipleAnswers,
+    hideChoicesFromInstructions,
+    onChange,
+}: BehaviorProps): React.Element<"div"> => (
+    <div>
+        <div className={css(styles.title)}>Behavior</div>
+
+        <ul>
+            <li className={css(styles.option)}>
+                <Checkbox
+                    checked={multipleAnswers}
+                    onChange={() =>
+                        onChange({multipleAnswers: !multipleAnswers})
+                    }
+                />
+
+                <span className={css(styles.label)}>
+                    Allow multiple answers per marker
+                </span>
+            </li>
+
+            <li className={css(styles.option)}>
+                <Checkbox
+                    checked={hideChoicesFromInstructions}
+                    onChange={() =>
+                        onChange({
+                            hideChoicesFromInstructions:
+                                !hideChoicesFromInstructions,
+                        })
+                    }
+                />
+
+                <span className={css(styles.label)}>
+                    Do not display answer choices in instructions
+                </span>
+            </li>
+        </ul>
+    </div>
+);
+
+const styles = StyleSheet.create({
+    title: {
+        ...typography.bodyXsmallBold,
+
+        marginBottom: 6,
+
+        color: colors.gray17,
+    },
+
+    option: {
+        display: "flex",
+
+        padding: "6px 0",
+    },
+
+    label: {
+        ...typography.smallSubheadingMobile,
+
+        marginLeft: 16,
+
+        color: colors.gray17,
+    },
+});
+
+export default Behavior;

package/src/widgets/label-image/marker.jsx

@@ -0,0 +1,292 @@
+/* eslint-disable react/no-unsafe */
+// @flow
+/**
+ * Controlled editor image marker on the question image.
+ *
+ * Allows to select which label choices are the answers for each marker, using
+ * the dropdown component.
+ */
+
+import {globalConstants, globalStyles} from "@khanacademy/perseus";
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import Option, {OptionGroup} from "../../components/dropdown-option.jsx";
+import FormWrappedTextField from "../../components/form-wrapped-text-field.jsx";
+
+import type {MarkerType} from "@khanacademy/perseus";
+
+const {colors, borderRadius} = globalStyles;
+
+type MarkerProps = {|
+    ...MarkerType,
+
+    // The list of possible answer choices.
+    choices: $ReadOnlyArray<string>,
+
+    // Callback for when any of the marker props are changed.
+    onChange: (marker: MarkerType) => void,
+
+    // Callback to remove marker from the question image.
+    onRemove: () => void,
+|};
+
+type MarkerState = {|
+    // Whether answer choices dropdown is shown, controlled by the user clicking
+    // on the marker icon.
+    showDropdown: boolean,
+|};
+
+export default class Marker extends React.Component<MarkerProps, MarkerState> {
+    _marker: ?HTMLElement;
+
+    constructor(props: MarkerProps) {
+        super(props);
+
+        this.state = {
+            showDropdown: false,
+        };
+    }
+
+    componentDidMount() {
+        document.addEventListener("click", this.handleClick, true);
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps: MarkerProps) {
+        const {answers} = this.props;
+
+        // Exclude those answers that are no longer present in choices.
+        const filteredAnswers = answers.filter((answer) =>
+            nextProps.choices.includes(answer),
+        );
+
+        if (JSON.stringify(answers) !== JSON.stringify(filteredAnswers)) {
+            // Update marker on the next frame when these props take affect.
+            // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
+            // eslint-disable-next-line no-restricted-syntax
+            setTimeout(() => this.updateMarker({answers: filteredAnswers}));
+        }
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener("click", this.handleClick, true);
+    }
+
+    openDropdown() {
+        this.setState({showDropdown: true});
+    }
+
+    updateMarker(props: any) {
+        const {answers, label, onChange, x, y} = this.props;
+
+        onChange({
+            answers,
+            label,
+            x,
+            y,
+            // Overwrite with updated prop(s).
+            ...props,
+        });
+    }
+
+    handleClick: (e: MouseEvent) => void = (e: MouseEvent) => {
+        const {showDropdown} = this.state;
+
+        if (this._marker === e.target) {
+            this.setState({showDropdown: !showDropdown});
+        } else if (showDropdown) {
+            // Close dropdown if click event was registered anywhere outside it.
+            if (this._marker && !this._marker.contains((e.target: any))) {
+                // Ensure other listeners are not triggered on click event that
+                // closes the dropdown. A specific case this addresses is when
+                // user clicks on question image to close dropdown, a new marker
+                // will be created, this is bad for usability.
+                e.stopPropagation();
+
+                this.setState({showDropdown: false});
+            }
+        }
+    };
+
+    handleLabelChange: (e: SyntheticInputEvent<>) => void = (e) => {
+        this.updateMarker({label: e.target.value});
+    };
+
+    handleSelectAnswer: (toggleAnswer: string) => void = (
+        toggleAnswer: string,
+    ) => {
+        let {answers} = this.props;
+
+        if (answers.includes(toggleAnswer)) {
+            answers = answers.filter((answer) => answer !== toggleAnswer);
+        } else {
+            answers = [...answers, toggleAnswer];
+        }
+
+        this.updateMarker({answers});
+    };
+
+    render(): React.Element<"div"> {
+        const {answers, choices, label, onRemove, x, y} = this.props;
+
+        const {showDropdown} = this.state;
+
+        return (
+            <div
+                className={css(
+                    styles.marker,
+                    answers.length > 0 && styles.markerWithAnswers,
+                    showDropdown && styles.markerSelected,
+                )}
+                ref={(node) => (this._marker = node)}
+                style={{
+                    left: `${x}%`,
+                    top: `${y}%`,
+                }}
+                title={
+                    "Click to select marker answers or to delete marker. " +
+                    "Repositioning marker is not implemented."
+                }
+            >
+                {showDropdown && (
+                    <div>
+                        <div
+                            className={css(
+                                styles.dropdownBody,
+                                styles.dropdownPositionWithArrow,
+                            )}
+                        >
+                            <Option value="" onClick={() => onRemove()}>
+                                Delete marker
+                            </Option>
+
+                            <hr className={css(styles.dividerHorizontal)} />
+
+                            <OptionGroup
+                                onSelected={this.handleSelectAnswer}
+                                // TODO(WB-1096): make selectedValues immutable in wonder-blocks
+                                // $FlowFixMe[incompatible-type]
+                                selectedValues={answers}
+                            >
+                                {choices.map((choice) => (
+                                    <Option key={choice} value={choice}>
+                                        {choice}
+                                    </Option>
+                                ))}
+                            </OptionGroup>
+
+                            <div className={css(styles.labelContainer)}>
+                                <FormWrappedTextField
+                                    placeholder="ARIA label (for screen readers)"
+                                    onChange={this.handleLabelChange}
+                                    value={label}
+                                    width="100%"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    marker: {
+        position: "absolute",
+
+        boxSizing: "content-box",
+
+        width: 16,
+        height: 16,
+        marginLeft: -8,
+        marginTop: -8,
+
+        cursor: "pointer",
+
+        background:
+            "linear-gradient(to bottom, rgba(33, 36, 44, 0.2), rgba(33, 36, 44, 0.5))",
+
+        border: "solid 2px #ffffff",
+        borderRadius: 16,
+
+        boxShadow: "0 2px 10px 0 rgba(33, 36, 44, 0.1)",
+    },
+
+    markerSelected: {
+        width: 28,
+        height: 28,
+        marginLeft: -12,
+        marginTop: -12,
+
+        border: "none",
+        borderRadius: 28,
+
+        // Render selected marker border as inset.
+        "::before": {
+            content: "''",
+            display: "block",
+
+            width: 20,
+            height: 20,
+            marginLeft: 2,
+            marginTop: 2,
+
+            border: "solid 2px #ffffff",
+            borderRadius: 20,
+        },
+    },
+
+    markerWithAnswers: {
+        background: "#1865f2",
+    },
+
+    dropdownPositionWithArrow: {
+        // Position dropdown to the top right of the marker.
+        left: 46,
+        bottom: -12,
+
+        // With an arrow pointing left towards the marker.
+        "::before": {
+            content: "''",
+            display: "block",
+            position: "absolute",
+
+            width: 0,
+            height: 0,
+            left: -16,
+            bottom: 8,
+
+            borderRight: `solid 16px ${colors.gray98}`,
+            borderTop: "solid 16px transparent",
+            borderBottom: "solid 16px transparent",
+        },
+    },
+
+    labelContainer: {
+        padding: 4,
+    },
+
+    dividerHorizontal: {
+        height: 0,
+        margin: 0,
+
+        border: `solid ${colors.gray85}`,
+        borderWidth: "0 0 1px",
+
+        boxShadow: "none",
+    },
+
+    // TODO (josh): This should probably be its own component, rather than
+    // sharing styles this way.
+    dropdownBody: {
+        position: "absolute",
+        border: "solid 1px rgba(0, 0, 0, 0.1)",
+        zIndex: globalConstants.zindexDropdown,
+        color: colors.gray17,
+        backgroundColor: colors.gray98,
+        borderRadius: borderRadius,
+        maxHeight: 320,
+        cursor: "pointer",
+    },
+});