@khanacademy/perseus 0.0.1 → 0.1.0

package/src/widgets/cs-program.jsx

@@ -0,0 +1,228 @@
+// @flow
+/**
+ * This widget is for embedding Khan Academy CS programs.
+ */
+
+import {StyleSheet, css} from "aphrodite";
+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 {articleMaxWidthInPx} from "../styles/constants.js";
+import Util from "../util.js";
+import {isFileProtocol} from "../util/mobile-native-utils.js";
+import {toAbsoluteUrl} from "../util/url-utils.js";
+
+import type {WidgetExports} from "../types.js";
+
+const {updateQueryString} = Util;
+
+function getUrlFromProgramID(programID) {
+    const {InitialRequestUrl} = getDependencies();
+
+    const path =
+        "/computer-programming/program/" +
+        `${programID}/embedded?embed=yes&author=no`;
+    // When loading scratchpads in our native apps, the current URL will exist
+    // as a `file://` URL. In this case, we want to reference `ka.org` instead
+    // of defaulting to what we get from `toAbsoluteUrl`.
+    if (isFileProtocol(InitialRequestUrl.protocol)) {
+        // eslint-disable-next-line static-service/require-safe-link-to
+        return `https://khanacademy.org${path}`;
+    }
+
+    return toAbsoluteUrl(path);
+}
+
+/* This renders the scratchpad in an iframe and handles validation via
+ * window.postMessage */
+class CSProgram extends React.Component<$FlowFixMe> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        programID: PropTypes.string,
+        programType: PropTypes.oneOf(["pjs", "sql", "webpage"]),
+        width: PropTypes.number,
+        height: PropTypes.number,
+        // eslint-disable-next-line react/forbid-prop-types
+        settings: PropTypes.array,
+        showEditor: PropTypes.bool,
+        showButtons: PropTypes.bool,
+        status: PropTypes.oneOf(["incomplete", "incorrect", "correct"]),
+        message: PropTypes.string,
+    };
+
+    // The widget's grading function
+    static validate(state: $FlowFixMe, rubric: $FlowFixMe): $FlowFixMe {
+        // 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!",
+        };
+    }
+
+    static defaultProps: $FlowFixMe = {
+        showEditor: false,
+        showButtons: false,
+        status: "incomplete",
+        // optional message
+        message: null,
+    };
+
+    componentDidMount() {
+        $(window).on("message", this.handleMessageEvent);
+    }
+
+    componentWillUnmount() {
+        $(window).off("message", this.handleMessageEvent);
+    }
+
+    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,
+        });
+    };
+
+    change: (...args: $ReadOnlyArray<mixed>) => $FlowFixMe = (...args) => {
+        // $FlowFixMe[incompatible-call]
+        return Changeable.change.apply(this, args);
+    };
+
+    simpleValidate: ($FlowFixMe) => $FlowFixMe = (rubric) => {
+        return CSProgram.validate(
+            {
+                status: this.props.status,
+                message: this.props.message,
+            },
+            rubric,
+        );
+    };
+
+    render(): React.Node {
+        if (!this.props.programID) {
+            return <div />;
+        }
+
+        let styleContainer = false;
+        let url = getUrlFromProgramID(this.props.programID);
+        let className;
+        const style = {
+            height: this.props.height,
+            width: "100%",
+        };
+
+        if (this.props.showEditor) {
+            url += "&editor=yes";
+            className = "perseus-scratchpad-editor";
+        } else {
+            url += `&editor=no&width=${articleMaxWidthInPx}`;
+            className = "perseus-scratchpad";
+            if (this.props.programType !== "webpage") {
+                styleContainer = true;
+            }
+        }
+
+        if (this.props.showButtons) {
+            url += "&buttons=yes";
+            // Matches templates/scratchpads/embed_script.js
+            // Toolbar height is 66, border height is 1 pixel
+            style.height += 67;
+        } else {
+            url += "&buttons=no";
+        }
+
+        // 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));
+        }
+
+        const sandboxOptions = [
+            "allow-popups",
+            "allow-same-origin",
+            "allow-scripts",
+            "allow-top-navigation",
+        ].join(" ");
+
+        // 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 (
+            <div
+                className={css(
+                    styles.widthOverride,
+                    styleContainer && styles.container,
+                )}
+            >
+                <iframe
+                    sandbox={sandboxOptions}
+                    src={url}
+                    style={style}
+                    className={className}
+                    allowFullScreen={true}
+                />
+            </div>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    // Override the inherited width from the perseus paragraph class
+    // 820 is minimum width for 420px editor and 400px canvas
+    widthOverride: {
+        width: 820,
+    },
+    container: {
+        margin: "auto",
+    },
+});
+
+export default ({
+    name: "cs-program",
+    displayName: "CS Program",
+    supportedAlignments: ["block", "full-width"],
+    widget: CSProgram,
+    hidden: true,
+}: WidgetExports<typeof CSProgram>);

package/src/widgets/definition.jsx

@@ -0,0 +1,141 @@
+// @flow
+
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import Tooltip from "@khanacademy/wonder-blocks-tooltip";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import {ApiOptions} from "../perseus-api.jsx";
+import Renderer from "../renderer.jsx";
+
+import type {
+    PerseusRenderer,
+    PerseusDefinitionWidgetOptions,
+} from "../perseus-types.js";
+import type {
+    APIOptionsWithDefaults,
+    PerseusScore,
+    WidgetExports,
+    WidgetProps,
+} from "../types.js";
+
+type DefinitionContentProps = {|
+    apiOptions: APIOptionsWithDefaults,
+    content: string,
+    trackInteraction: () => mixed,
+    widgets: PerseusRenderer["widgets"],
+|};
+
+class DefinitionContent extends React.Component<DefinitionContentProps> {
+    static propTypes = {
+        apiOptions: ApiOptions.propTypes,
+        content: PropTypes.string,
+        trackInteraction: PropTypes.func.isRequired,
+        widgets: PropTypes.objectOf(PropTypes.any),
+    };
+
+    componentDidMount() {
+        this.props.trackInteraction();
+    }
+
+    render(): React.Node {
+        return (
+            <View style={styles.tooltipBody}>
+                <Renderer
+                    apiOptions={this.props.apiOptions}
+                    content={this.props.content}
+                    widgets={this.props.widgets}
+                />
+            </View>
+        );
+    }
+}
+
+type RenderProps = PerseusDefinitionWidgetOptions; // transform = _.identity
+
+type Rubric = PerseusDefinitionWidgetOptions;
+
+type UserInput = Empty;
+
+type DefinitionProps = {|
+    ...WidgetProps<RenderProps, Rubric>,
+    widgets: PerseusRenderer["widgets"],
+|};
+
+class Definition extends React.Component<DefinitionProps> {
+    static defaultProps: $FlowFixMe = {
+        togglePrompt: "define me",
+        definition: "definition goes here",
+    };
+
+    static validate(userInput: UserInput, rubric: Rubric): PerseusScore {
+        return {
+            type: "points",
+            earned: 0,
+            total: 0,
+            message: null,
+        };
+    }
+
+    getUserInput: () => UserInput = () => {
+        return {};
+    };
+
+    simpleValidate: (Rubric) => PerseusScore = (rubric) => {
+        return Definition.validate(this.getUserInput(), rubric);
+    };
+
+    render(): React.Node {
+        const content = (
+            <DefinitionContent
+                apiOptions={this.props.apiOptions}
+                content={this.props.definition}
+                key={this.props.definition}
+                trackInteraction={this.props.trackInteraction}
+                widgets={this.props.widgets}
+            />
+        );
+
+        return (
+            // $FlowFixMe[incompatible-type]: content prop
+            <Tooltip content={content} placement="top">
+                <span className="perseus-widget-definition">
+                    <View style={styles.definitionLink}>
+                        {this.props.togglePrompt}
+                    </View>
+                </span>
+            </Tooltip>
+        );
+    }
+}
+
+const styles = {
+    tooltipBody: {
+        color: Color.offBlack,
+        display: "block",
+        fontSize: 20,
+        fontWeight: 500,
+        lineHeight: "30px",
+        margin: Spacing.xSmall_8,
+    },
+
+    definitionLink: {
+        borderBottom: `dashed 1px ${Color.blue}`,
+        color: Color.blue,
+        cursor: "pointer",
+        display: "inline-block",
+        textDecoration: "none",
+    },
+};
+
+export default ({
+    name: "definition",
+    displayName: "Definition",
+    accessible: true,
+    defaultAlignment: "inline",
+    widget: Definition,
+    transform: _.identity,
+}: WidgetExports<typeof Definition>);

package/src/widgets/dropdown.jsx

@@ -0,0 +1,143 @@
+/* eslint-disable react/sort-comp */
+// @flow
+import {SingleSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import _ from "underscore";
+
+import {ApiOptions} from "../perseus-api.jsx";
+
+import type {PerseusDropdownWidgetOptions} from "../perseus-types.js";
+import type {PerseusScore, WidgetExports, WidgetProps} from "../types.js";
+
+type Rubric = PerseusDropdownWidgetOptions;
+
+type UserInput = {|value: number|};
+
+type Props = {|
+    ...WidgetProps<RenderProps, Rubric>,
+    selected: number,
+|};
+
+type DefaultProps = {|
+    choices: Props["choices"],
+    selected: Props["selected"],
+    placeholder: Props["placeholder"],
+    apiOptions: Props["apiOptions"],
+|};
+
+class Dropdown extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        choices: [],
+        selected: 0,
+        placeholder: "",
+        apiOptions: ApiOptions.defaults,
+    };
+
+    static validate(userInput: UserInput, rubric: Rubric): PerseusScore {
+        const selected = userInput.value;
+        if (selected === 0) {
+            return {
+                type: "invalid",
+                message: null,
+            };
+        }
+        const correct = rubric.choices[selected - 1].correct;
+        return {
+            type: "points",
+            earned: correct ? 1 : 0,
+            total: 1,
+            message: null,
+        };
+    }
+
+    render(): React.Node {
+        const children = [
+            <OptionItem
+                key="placeholder"
+                value="0"
+                disabled
+                label={this.props.placeholder}
+            />,
+            ...this.props.choices.map((choice, i) => (
+                <OptionItem
+                    key={String(i + 1)}
+                    value={String(i + 1)}
+                    label={choice}
+                />
+            )),
+        ];
+
+        return (
+            <div
+                // NOTE(jared): These are required to prevent weird behavior
+                // When there's a dropdown in a zoomable table.
+                onClick={(e) => {
+                    e.stopPropagation();
+                }}
+                onTouchStart={(e) => {
+                    e.stopPropagation();
+                }}
+            >
+                {/* $FlowFixMe[prop-missing]: placeholder is missing */}
+                <SingleSelect
+                    onChange={(value) => this._handleChange(parseInt(value))}
+                    selectedValue={String(this.props.selected)}
+                    disabled={this.props.apiOptions.readOnly}
+                >
+                    {children}
+                </SingleSelect>
+            </div>
+        );
+    }
+
+    focus: () => boolean = () => {
+        // TODO(LP-10797): This focus() call doesn't do anything because our
+        // root element is a <div> and that cannot be focused without a
+        // tabIndex.
+        // $FlowFixMe[incompatible-use]
+        // $FlowFixMe[prop-missing]
+        ReactDOM.findDOMNode(this).focus();
+        return true;
+    };
+
+    _handleChangeEvent: (SyntheticInputEvent<>) => void = (e) => {
+        this._handleChange(parseInt(e.target.value));
+    };
+
+    _handleChange: (number) => void = (selected) => {
+        this.props.trackInteraction();
+        this.props.onChange({selected: selected});
+    };
+
+    getUserInput: () => UserInput = () => {
+        return {value: this.props.selected};
+    };
+
+    simpleValidate: (Rubric) => PerseusScore = (rubric) => {
+        return Dropdown.validate(this.getUserInput(), rubric);
+    };
+}
+
+type RenderProps = {|
+    placeholder: string,
+    choices: $ReadOnlyArray<string>,
+|};
+
+const optionsTransform: (PerseusDropdownWidgetOptions) => RenderProps = (
+    widgetOptions,
+) => {
+    return {
+        placeholder: widgetOptions.placeholder,
+        choices: _.map(widgetOptions.choices, (choice) => choice.content),
+    };
+};
+
+export default ({
+    name: "dropdown",
+    displayName: "Drop down",
+    defaultAlignment: "inline-block",
+    accessible: true,
+    widget: Dropdown,
+    transform: optionsTransform,
+}: WidgetExports<typeof Dropdown>);