@khanacademy/perseus 0.0.1 → 0.2.1

package/src/widgets/group.jsx

@@ -0,0 +1,213 @@
+/* eslint-disable react/sort-comp */
+// @flow
+import classNames from "classnames";
+import * as React from "react";
+import _ from "underscore";
+
+import {linterContextDefault} from "../gorgon/proptypes.js";
+import * as Changeable from "../mixins/changeable.jsx";
+import {ApiOptions} from "../perseus-api.jsx";
+import Renderer from "../renderer.jsx";
+
+import type {PerseusGroupWidgetOptions} from "../perseus-types.js";
+import type {
+    FocusPath,
+    PerseusScore,
+    WidgetExports,
+    WidgetProps,
+} from "../types.js";
+
+type Rubric = PerseusGroupWidgetOptions;
+type RenderProps = PerseusGroupWidgetOptions; // exports has no 'transform'
+type Props = WidgetProps<RenderProps, Rubric>;
+type DefaultProps = {|
+    content: Props["content"],
+    widgets: Props["widgets"],
+    images: Props["images"],
+    linterContext: Props["linterContext"],
+|};
+
+class Group extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        content: "",
+        widgets: {},
+        images: {},
+        linterContext: linterContextDefault,
+    };
+
+    componentDidMount() {
+        // TODO(marcia): See comment in render method about our cyclical
+        // numbering scheme. We force another render so that we can annotate
+        // the group with the correct number.
+        this.forceUpdate();
+    }
+
+    render(): React.Node {
+        const apiOptions = _.extend(
+            {},
+            ApiOptions.defaults,
+            this.props.apiOptions,
+            {
+                // Api Rewriting to support correct onFocus/onBlur
+                // events for the mobile API
+                onFocusChange: (newFocus, oldFocus) => {
+                    if (oldFocus) {
+                        this.props.onBlur(oldFocus);
+                    }
+                    if (newFocus) {
+                        this.props.onFocus(newFocus);
+                    }
+                },
+            },
+        );
+
+        // Allow a problem number annotation to be added.
+        // This is cyclical and should probably be reconsidered. In order to
+        // render the annotation ("Question 3 of 10"), we call findWidgets to
+        // figure out our index in the list of all fellow group widgets. On
+        // first render, though, we don't exist yet in this list, and so we
+        // give ourselves number -1. To combat this, we forceUpdate in
+        // componentDidMount so that we can number ourselves properly. But,
+        // really we should have a more unidirectional flow. TODO(marcia): fix.
+        const number = _.indexOf(this.props.findWidgets("group"), this);
+        const problemNumComponent = this.props.apiOptions.groupAnnotator(
+            number,
+            this.props.widgetId,
+        );
+
+        // This is a little strange because the id of the widget that actually
+        // changed is going to be lost in favor of the group widget's id. The
+        // widgets prop also wasn't actually changed, and this only serves to
+        // alert our renderer (our parent) of the fact that some interaction
+        // has occurred.
+        const onInteractWithWidget = (id) => {
+            // eslint-disable-next-line react/no-string-refs
+            if (this.refs.renderer) {
+                // eslint-disable-next-line react/no-string-refs
+                this.change("widgets", this.refs.renderer.props.widgets);
+            }
+        };
+
+        // eslint-disable-next-line react/no-string-refs
+        const score = this.refs.renderer && this.refs.renderer.score();
+        const isValid = score && score.type !== "invalid";
+        const isInvalid = score && score.type === "invalid";
+
+        // TODO(mdr): Widgets inside this Renderer are not discoverable through
+        //     the parent Renderer's `findWidgets` function.
+        return (
+            <div
+                className={classNames({
+                    "perseus-group": true,
+                    "perseus-group-valid-answer": isValid,
+                    "perseus-group-invalid-answer": isInvalid,
+                })}
+            >
+                {problemNumComponent}
+                {/**
+                 * We're passing a bunch of extra props to Renderer here that it
+                 * doesn't need.  We should replace {...this.props} with the individual
+                 * props that are needed.
+                 * TODO(FEI-4034): Only pass what the Renderer expects.
+                 */}
+                {/* $FlowFixMe[prop-missing] */}
+                {/* $FlowFixMe[incompatible-type] */}
+                <Renderer
+                    {...this.props}
+                    // eslint-disable-next-line react/no-string-refs
+                    ref="renderer"
+                    apiOptions={apiOptions}
+                    findExternalWidgets={this.props.findWidgets}
+                    reviewMode={!!this.props.reviewModeRubric}
+                    onInteractWithWidget={onInteractWithWidget}
+                    linterContext={this.props.linterContext}
+                />
+                {/* $FlowFixMe[prop-missing] */}
+                {this.props.icon && (
+                    <div className="group-icon">{this.props.icon}</div>
+                )}
+            </div>
+        );
+    }
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    getUserInput: () => $FlowFixMe = () => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.renderer.getUserInput();
+    };
+
+    getSerializedState: () => $FlowFixMe = () => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.renderer.getSerializedState();
+    };
+
+    restoreSerializedState: ($FlowFixMe, $FlowFixMe) => $FlowFixMe = (
+        state,
+        callback,
+    ) => {
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.renderer.restoreSerializedState(state, callback);
+        // Tell our renderer that we have no props to change
+        // (all our changes were in state):
+        return null;
+    };
+
+    simpleValidate: (Rubric) => PerseusScore = (rubric) => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.renderer.score();
+    };
+
+    // Mobile API:
+    getInputPaths: () => $ReadOnlyArray<FocusPath> = () => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.renderer.getInputPaths();
+    };
+
+    setInputValue: (FocusPath, string, $FlowFixMe) => void = (
+        path,
+        newValue,
+        cb,
+    ) => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.renderer.setInputValue(path, newValue, cb);
+    };
+
+    focus: () => ?boolean = () => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.renderer.focus();
+    };
+
+    focusInputPath: (FocusPath) => void = (path) => {
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.renderer.focusPath(path);
+    };
+
+    blurInputPath: (FocusPath) => void = (path) => {
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.renderer.blurPath(path);
+    };
+
+    showRationalesForCurrentlySelectedChoices: () => void = () => {
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.renderer.showRationalesForCurrentlySelectedChoices();
+    };
+}
+
+const traverseChildWidgets = function (
+    props: $FlowFixMe,
+    traverseRenderer: $FlowFixMe,
+): $FlowFixMe {
+    return _.extend({}, props, traverseRenderer(props));
+};
+
+export default ({
+    name: "group",
+    displayName: "Group (SAT only)",
+    widget: Group,
+    traverseChildWidgets: traverseChildWidgets,
+    hidden: false,
+    isLintable: true,
+}: WidgetExports<typeof Group>);

package/src/widgets/iframe.jsx

@@ -0,0 +1,198 @@
+/* eslint-disable react/forbid-prop-types, react/sort-comp */
+// @flow
+/**
+ * This is an iframe widget. It is used for rendering an iframe that
+ *  then communicates its state via window.postMessage
+ * This is useful for embedding arbitrary visualizations/simulations with
+ *  completed conditions, such as the mazes and games in Algorithms.
+ * It's particularly well suited for embedding our ProcessingJS programs,
+ *  but could also be used for embedding viz's hosted elsewhere.
+ */
+
+import $ from "jquery";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import {getDependencies} from "../dependencies.js";
+import * as Changeable from "../mixins/changeable.jsx";
+import WidgetJsonifyDeprecated from "../mixins/widget-jsonify-deprecated.jsx";
+import Util from "../util.js";
+
+import type {WidgetExports} from "../types.js";
+
+const {updateQueryString} = Util;
+
+/* This renders the iframe and handles validation via window.postMessage */
+class Iframe extends React.Component<$FlowFixMe> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        url: PropTypes.string,
+        settings: PropTypes.array,
+        status: PropTypes.oneOf(["incomplete", "incorrect", "correct"]),
+        message: PropTypes.string,
+        allowFullScreen: PropTypes.bool,
+        allowTopNavigation: PropTypes.bool,
+    };
+
+    static defaultProps: $FlowFixMe = {
+        status: "incomplete",
+        // optional message
+        message: null,
+        allowFullScreen: false,
+        allowTopNavigation: false,
+    };
+
+    getUserInput: () => $FlowFixMe = () => {
+        return WidgetJsonifyDeprecated.getUserInput.call(this);
+    };
+
+    handleMessageEvent: ($FlowFixMe) => void = (e) => {
+        // We receive data from the iframe that contains {passed: true/false}
+        //  and use that to set the status
+        // It could also contain an optional message
+        let data = {};
+        try {
+            data = JSON.parse(e.originalEvent.data);
+        } catch (err) {
+            return;
+        }
+
+        if (_.isUndefined(data.testsPassed)) {
+            return;
+        }
+
+        const status = data.testsPassed ? "correct" : "incorrect";
+        this.change({
+            status: status,
+            message: data.message,
+        });
+    };
+
+    componentDidMount() {
+        $(window).on("message", this.handleMessageEvent);
+    }
+
+    componentWillUnmount() {
+        $(window).off("message", this.handleMessageEvent);
+    }
+
+    render(): React.Node {
+        const style = {
+            width: String(this.props.width),
+            height: String(this.props.height),
+        };
+
+        const {InitialRequestUrl} = getDependencies();
+
+        // Add "px" to unitless numbers
+        Object.entries(style).forEach(([key, value]) => {
+            // $FlowFixMe[incompatible-use]
+            if (!value.endsWith("%") && !value.endsWith("px")) {
+                // $FlowFixMe[unclear-addition]
+                style[key] = value + "px";
+            }
+        });
+
+        let url = this.props.url;
+
+        // If the URL doesnt start with http, it must be a program ID
+        if (url && url.length && url.indexOf("http") !== 0) {
+            url =
+                "https://www.khanacademy.org/computer-programming/program/" +
+                url +
+                "/embedded?buttons=no&embed=yes&editor=no&author=no";
+            url = updateQueryString(url, "width", this.props.width);
+            url = updateQueryString(url, "height", this.props.height);
+            // Origin is used by output.js in deciding to send messages
+            url = updateQueryString(url, "origin", InitialRequestUrl.origin);
+        }
+
+        // Turn array of [{name: "", value: ""}] into object
+        if (this.props.settings) {
+            const settings = {};
+            _.each(this.props.settings, function (setting) {
+                if (setting.name && setting.value) {
+                    settings[setting.name] = setting.value;
+                }
+            });
+            // This becomes available to programs as Program.settings()
+            url = updateQueryString(url, "settings", JSON.stringify(settings));
+        }
+
+        let sandboxProperties = "allow-same-origin allow-scripts";
+        // TODO(scottgrant): This line is an intentional hack to retain the
+        // allow-top-navigation sandbox property. Once our LearnStorm articles
+        // have this value checked and published, this line should be removed
+        // and replaced with the conditional check below that is commented out.
+        // We don't want to break LearnStorm badges, so this will be a two-part
+        // deploy.
+        sandboxProperties += " allow-top-navigation";
+        // if (this.props.allowTopNavigation === true) {
+        //     sandboxProperties += " allow-top-navigation";
+        // }
+
+        // We sandbox the iframe so that we whitelist only the functionality
+        //  that we need. This makes it a bit safer in case some content
+        //  creator "went wild".
+        // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
+        return (
+            <iframe
+                sandbox={sandboxProperties}
+                style={style}
+                src={url}
+                allowFullScreen={this.props.allowFullScreen}
+            />
+        );
+    }
+
+    change: (...args: $ReadOnlyArray<mixed>) => $FlowFixMe = (...args) => {
+        // $FlowFixMe[incompatible-call]
+        return Changeable.change.apply(this, args);
+    };
+
+    simpleValidate: ($FlowFixMe) => $FlowFixMe = (rubric) => {
+        // $FlowFixMe[prop-missing]
+        return Iframe.validate(this.getUserInput(), rubric);
+    };
+}
+
+/**
+ * This is the widget's grading function
+ */
+_.extend(Iframe, {
+    validate: function (state, rubric) {
+        // The iframe can tell us whether it's correct or incorrect,
+        //  and pass an optional message
+        if (state.status === "correct") {
+            return {
+                type: "points",
+                earned: 1,
+                total: 1,
+                message: state.message || null,
+            };
+        }
+        if (state.status === "incorrect") {
+            return {
+                type: "points",
+                earned: 0,
+                total: 1,
+                message: state.message || null,
+            };
+        }
+        return {
+            type: "invalid",
+            message: "Keep going, you're not there yet!",
+        };
+    },
+});
+
+export default ({
+    name: "iframe",
+    displayName: "Iframe",
+    widget: Iframe,
+    // Let's not expose it to all content creators yet
+    hidden: true,
+}: WidgetExports<typeof Iframe>);