@khanacademy/math-input 0.3.2 → 0.5.0

package/src/components/velocity-tracker.js

@@ -0,0 +1,76 @@
+/**
+ * A system for tracking gesture velocity in a single dimension.
+ *
+ * Velocity is computed by smoothing linearly over the gestures that have
+ * occurred in the last 100 milliseconds.
+ */
+
+import now from "performance-now";
+
+class VelocityTracker {
+    constructor(options) {
+        this.options = {
+            velocityTimeout: 100,
+            ...options,
+        };
+        this._events = [];
+    }
+
+    /**
+     * Pushes an event with the given displacement onto the event buffer,
+     * associating it with a timestamp. Note that, as this method computes the
+     * timestamp for the event at calltime, it should be called immediately
+     * after the event occurs.
+     *
+     * @param {number} x - the cumulative displacement of the event
+     */
+    push(x) {
+        this._events.push({
+            x,
+            t: now(),
+        });
+    }
+
+    /**
+     * Compute the velocity with respect to the events that have been tracked
+     * by the system. Velocity is computed by smoothing linearly over recent
+     * displacement values.
+     *
+     * Note that, for performance reasons, a call to `getVelocity` will clear
+     * out the event buffer. As such, repeated calls will not return the same
+     * value (in particular, a second call in quick succession will return 0).
+     *
+     * @returns {number} the velocity associated with the tracker
+     */
+    getVelocity() {
+        const events = this._getEvents();
+
+        if (events.length < 2) {
+            return 0;
+        } else {
+            const current = events[events.length - 1];
+            const first = events[0];
+            const dt = current.t - first.t;
+            return (current.x - first.x) / dt;
+        }
+    }
+
+    /**
+     * Filter the tracked events to exclude any events that occurred too far in
+     * the past, and reset the event buffer.
+     *
+     * @returns {number[]} an array of displacements corresponding to events
+     *                     that occurred in the past `velocityTimeout`
+     *                     milliseconds
+     */
+    _getEvents() {
+        const threshold = now() - this.options.velocityTimeout;
+        const recentEvents = this._events.filter((event) => {
+            return event.t > threshold;
+        });
+        this._events = [];
+        return recentEvents;
+    }
+}
+
+export default VelocityTracker;

package/src/components/z-indexes.js

@@ -0,0 +1,9 @@
+// @flow
+/**
+ * This file contains all of the z-index values used throughout the math-input
+ * component and its children.
+ */
+
+export const popover = 1;
+export const echo = 2;
+export const keypad = 1060;

package/src/consts.js

@@ -0,0 +1,74 @@
+// @flow
+/**
+ * Constants that are shared between multiple files.
+ */
+
+export const KeypadTypes = {
+    FRACTION: "FRACTION",
+    EXPRESSION: "EXPRESSION",
+};
+
+export const KeyTypes = {
+    EMPTY: "EMPTY",
+    // For numerals, variables, and any other characters that themselves
+    // compose 'values'.
+    VALUE: "VALUE",
+    // For buttons that insert or adjust math in an input.
+    OPERATOR: "OPERATOR",
+    // For buttons that move the cursor in an input (including via
+    // deletion).
+    INPUT_NAVIGATION: "INPUT_NAVIGATION",
+    // For buttons that modify the broader keypad state (e.g., by changing
+    // the visible pane).
+    KEYPAD_NAVIGATION: "KEYPAD_NAVIGATION",
+    // For buttons that house multiple buttons and have no action
+    // themselves.
+    MANY: "MANY",
+    // For the echo animation that appears on press.
+    ECHO: "ECHO",
+};
+
+export const DeviceOrientations = {
+    LANDSCAPE: "LANDSCAPE",
+    PORTRAIT: "PORTRAIT",
+};
+
+export const DeviceTypes = {
+    PHONE: "PHONE",
+    TABLET: "TABLET",
+};
+
+export const LayoutModes = {
+    FULLSCREEN: "FULLSCREEN",
+    COMPACT: "COMPACT",
+};
+
+export const BorderDirections = {
+    LEFT: ("LEFT": "LEFT"),
+    BOTTOM: ("BOTTOM": "BOTTOM"),
+};
+export const BorderStyles: {|
+    [style: string]: $ReadOnlyArray<$Values<typeof BorderDirections>>,
+|} = {
+    LEFT: ["LEFT"],
+    BOTTOM: ["BOTTOM"],
+    ALL: ["LEFT", "BOTTOM"],
+    NONE: [],
+};
+
+export const IconTypes = {
+    MATH: "MATH",
+    SVG: "SVG",
+    TEXT: "TEXT",
+};
+
+export const DecimalSeparators = {
+    COMMA: "COMMA",
+    PERIOD: "PERIOD",
+};
+
+export const EchoAnimationTypes = {
+    SLIDE_AND_FADE: "SLIDE_AND_FADE",
+    FADE_ONLY: "FADE_ONLY",
+    LONG_FADE_ONLY: "LONG_FADE_ONLY",
+};

package/src/data/key-configs.js

@@ -0,0 +1,349 @@
+// @flow
+/**
+ * This file contains configuration settings for the buttons in the keypad.
+ */
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+
+import {DecimalSeparators, IconTypes, KeyTypes} from "../consts.js";
+import {decimalSeparator} from "../utils.js";
+
+import Keys from "./keys.js";
+
+export type KeyConfig = {
+    id: string,
+    type: string,
+    ariaLabel: string,
+};
+const KeyConfigs: Object = {
+    // Basic math keys.
+    [Keys.PLUS]: {
+        type: KeyTypes.OPERATOR,
+        // I18N: A label for a plus sign.
+        ariaLabel: i18n._("Plus"),
+    },
+    [Keys.MINUS]: {
+        type: KeyTypes.OPERATOR,
+        // I18N: A label for a minus sign.
+        ariaLabel: i18n._("Minus"),
+    },
+    [Keys.NEGATIVE]: {
+        type: KeyTypes.VALUE,
+        // I18N: A label for a minus sign.
+        ariaLabel: i18n._("Negative"),
+    },
+    [Keys.TIMES]: {
+        type: KeyTypes.OPERATOR,
+        // I18N: A label for a multiplication sign (represented with an 'x').
+        ariaLabel: i18n._("Multiply"),
+    },
+    [Keys.DIVIDE]: {
+        type: KeyTypes.OPERATOR,
+        // I18N: A label for a division sign.
+        ariaLabel: i18n._("Divide"),
+    },
+    [Keys.DECIMAL]: {
+        type: KeyTypes.VALUE,
+        // I18N: A label for a decimal symbol.
+        ariaLabel: i18n._("Decimal"),
+        icon:
+            decimalSeparator === DecimalSeparators.COMMA
+                ? {
+                      // TODO(charlie): Get an SVG icon for the comma, or verify with
+                      // design that the text-rendered version is acceptable.
+                      type: IconTypes.TEXT,
+                      data: ",",
+                  }
+                : {
+                      type: IconTypes.SVG,
+                      data: Keys.PERIOD,
+                  },
+    },
+    [Keys.PERCENT]: {
+        type: KeyTypes.OPERATOR,
+        // I18N: A label for a percent sign.
+        ariaLabel: i18n._("Percent"),
+    },
+    [Keys.CDOT]: {
+        type: KeyTypes.OPERATOR,
+        // I18N: A label for a multiplication sign (represented as a dot).
+        ariaLabel: i18n._("Multiply"),
+    },
+    [Keys.EQUAL]: {
+        type: KeyTypes.OPERATOR,
+        ariaLabel: i18n._("Equals sign"),
+    },
+    [Keys.NEQ]: {
+        type: KeyTypes.OPERATOR,
+        ariaLabel: i18n._("Not-equals sign"),
+    },
+    [Keys.GT]: {
+        type: KeyTypes.OPERATOR,
+        // I18N: A label for a 'greater than' sign (represented as '>').
+        ariaLabel: i18n._("Greater than sign"),
+    },
+    [Keys.LT]: {
+        type: KeyTypes.OPERATOR,
+        // I18N: A label for a 'less than' sign (represented as '<').
+        ariaLabel: i18n._("Less than sign"),
+    },
+    [Keys.GEQ]: {
+        type: KeyTypes.OPERATOR,
+        ariaLabel: i18n._("Greater than or equal to sign"),
+    },
+    [Keys.LEQ]: {
+        type: KeyTypes.OPERATOR,
+        ariaLabel: i18n._("Less than or equal to sign"),
+    },
+    // mobile native
+    [Keys.FRAC_INCLUSIVE]: {
+        type: KeyTypes.OPERATOR,
+        // I18N: A label for a button that creates a new fraction and puts the
+        // current expression in the numerator of that fraction.
+        ariaLabel: i18n._("Fraction, with current expression in numerator"),
+    },
+    // mobile native
+    [Keys.FRAC_EXCLUSIVE]: {
+        type: KeyTypes.OPERATOR,
+        // I18N: A label for a button that creates a new fraction next to the
+        // cursor.
+        ariaLabel: i18n._("Fraction, excluding the current expression"),
+    },
+    // mobile web
+    [Keys.FRAC]: {
+        type: KeyTypes.OPERATOR,
+        // I18N: A label for a button that creates a new fraction next to the
+        // cursor.
+        ariaLabel: i18n._("Fraction, excluding the current expression"),
+    },
+    [Keys.EXP]: {
+        type: KeyTypes.OPERATOR,
+        // I18N: A label for a button that will allow the user to input a custom
+        // exponent.
+        ariaLabel: i18n._("Custom exponent"),
+    },
+    [Keys.EXP_2]: {
+        type: KeyTypes.OPERATOR,
+        // I18N: A label for a button that will square (take to the second
+        // power) some math.
+        ariaLabel: i18n._("Square"),
+    },
+    [Keys.EXP_3]: {
+        type: KeyTypes.OPERATOR,
+        // I18N: A label for a button that will cube (take to the third power)
+        // some math.
+        ariaLabel: i18n._("Cube"),
+    },
+    [Keys.SQRT]: {
+        type: KeyTypes.OPERATOR,
+        ariaLabel: i18n._("Square root"),
+    },
+    [Keys.CUBE_ROOT]: {
+        type: KeyTypes.OPERATOR,
+        ariaLabel: i18n._("Cube root"),
+    },
+    [Keys.RADICAL]: {
+        type: KeyTypes.OPERATOR,
+        ariaLabel: i18n._("Radical with custom root"),
+    },
+    [Keys.LEFT_PAREN]: {
+        type: KeyTypes.OPERATOR,
+        ariaLabel: i18n._("Left parenthesis"),
+    },
+    [Keys.RIGHT_PAREN]: {
+        type: KeyTypes.OPERATOR,
+        ariaLabel: i18n._("Right parenthesis"),
+    },
+    [Keys.LN]: {
+        type: KeyTypes.OPERATOR,
+        ariaLabel: i18n._("Natural logarithm"),
+    },
+    [Keys.LOG]: {
+        type: KeyTypes.OPERATOR,
+        ariaLabel: i18n._("Logarithm with base 10"),
+    },
+    [Keys.LOG_N]: {
+        type: KeyTypes.OPERATOR,
+        ariaLabel: i18n._("Logarithm with custom base"),
+    },
+    [Keys.SIN]: {
+        type: KeyTypes.OPERATOR,
+        ariaLabel: i18n._("Sine"),
+    },
+    [Keys.COS]: {
+        type: KeyTypes.OPERATOR,
+        ariaLabel: i18n._("Cosine"),
+    },
+    [Keys.TAN]: {
+        type: KeyTypes.OPERATOR,
+        ariaLabel: i18n._("Tangent"),
+    },
+    [Keys.PI]: {
+        type: KeyTypes.VALUE,
+        ariaLabel: i18n._("Pi"),
+        icon: {
+            type: IconTypes.MATH,
+            data: "\\pi",
+        },
+    },
+    [Keys.THETA]: {
+        type: KeyTypes.VALUE,
+        ariaLabel: i18n._("Theta"),
+        icon: {
+            type: IconTypes.MATH,
+            data: "\\theta",
+        },
+    },
+    [Keys.NOOP]: {
+        type: KeyTypes.EMPTY,
+    },
+
+    // Input navigation keys.
+    [Keys.UP]: {
+        type: KeyTypes.INPUT_NAVIGATION,
+        ariaLabel: i18n._("Up arrow"),
+    },
+    [Keys.RIGHT]: {
+        type: KeyTypes.INPUT_NAVIGATION,
+        ariaLabel: i18n._("Right arrow"),
+    },
+    [Keys.DOWN]: {
+        type: KeyTypes.INPUT_NAVIGATION,
+        ariaLabel: i18n._("Down arrow"),
+    },
+    [Keys.LEFT]: {
+        type: KeyTypes.INPUT_NAVIGATION,
+        ariaLabel: i18n._("Left arrow"),
+    },
+    [Keys.JUMP_OUT_PARENTHESES]: {
+        type: KeyTypes.INPUT_NAVIGATION,
+        ariaLabel: i18n._("Navigate right out of a set of parentheses"),
+    },
+    [Keys.JUMP_OUT_EXPONENT]: {
+        type: KeyTypes.INPUT_NAVIGATION,
+        ariaLabel: i18n._("Navigate right out of an exponent"),
+    },
+    [Keys.JUMP_OUT_BASE]: {
+        type: KeyTypes.INPUT_NAVIGATION,
+        ariaLabel: i18n._("Navigate right out of a base"),
+    },
+    [Keys.JUMP_INTO_NUMERATOR]: {
+        type: KeyTypes.INPUT_NAVIGATION,
+        ariaLabel: i18n._("Navigate right into the numerator of a fraction"),
+    },
+    [Keys.JUMP_OUT_NUMERATOR]: {
+        type: KeyTypes.INPUT_NAVIGATION,
+        ariaLabel: i18n._(
+            "Navigate right out of the numerator and into the denominator",
+        ),
+    },
+    [Keys.JUMP_OUT_DENOMINATOR]: {
+        type: KeyTypes.INPUT_NAVIGATION,
+        ariaLabel: i18n._(
+            "Navigate right out of the denominator of a fraction",
+        ),
+    },
+    [Keys.BACKSPACE]: {
+        type: KeyTypes.INPUT_NAVIGATION,
+        // I18N: A label for a button that will delete some input.
+        ariaLabel: i18n._("Delete"),
+    },
+
+    // Keypad navigation keys.
+    [Keys.DISMISS]: {
+        type: KeyTypes.KEYPAD_NAVIGATION,
+        // I18N: A label for a button that will dismiss/hide a keypad.
+        ariaLabel: i18n._("Dismiss"),
+    },
+};
+
+// Add in any multi-function buttons. By default, these keys will mix in any
+// configuration settings from their default child key (i.e., the first key in
+// the `childKeyIds` array).
+// TODO(charlie): Make the multi-function button's long-press interaction
+// accessible.
+// NOTE(kevinb): This is only used in the mobile native app.
+KeyConfigs[Keys.FRAC_MULTI] = {
+    childKeyIds: [Keys.FRAC_INCLUSIVE, Keys.FRAC_EXCLUSIVE],
+};
+
+// TODO(charlie): Use the numeral color for the 'Many' key.
+KeyConfigs[Keys.MANY] = {
+    type: KeyTypes.MANY,
+    // childKeyIds will be configured by the client.
+};
+
+// Add in every numeral.
+const NUMBERS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+for (const num of NUMBERS) {
+    // TODO(charlie): Consider removing the SVG icons that we have for the
+    // numeral keys. They can be rendered just as easily with text (though that
+    // would mean that we'd be using text beyond the variable key).
+    const textRepresentation = `${num}`;
+    KeyConfigs[`NUM_${num}`] = {
+        type: KeyTypes.VALUE,
+        ariaLabel: textRepresentation,
+        icon: {
+            type: IconTypes.TEXT,
+            data: textRepresentation,
+        },
+    };
+}
+
+// Add in every variable.
+const LETTERS = [
+    "A",
+    "B",
+    "C",
+    "D",
+    "E",
+    "F",
+    "G",
+    "H",
+    "I",
+    "J",
+    "K",
+    "L",
+    "M",
+    "N",
+    "O",
+    "P",
+    "Q",
+    "R",
+    "S",
+    "T",
+    "U",
+    "V",
+    "W",
+    "X",
+    "Y",
+    "Z",
+];
+for (const letter of LETTERS) {
+    const lowerCaseVariable = letter.toLowerCase();
+    const upperCaseVariable = letter.toUpperCase();
+
+    for (const textRepresentation of [lowerCaseVariable, upperCaseVariable]) {
+        KeyConfigs[textRepresentation] = {
+            type: KeyTypes.VALUE,
+            ariaLabel: textRepresentation,
+            icon: {
+                type: IconTypes.MATH,
+                data: textRepresentation,
+            },
+        };
+    }
+}
+
+for (const key of Object.keys(KeyConfigs)) {
+    KeyConfigs[key] = {
+        id: key,
+        // Default to an SVG icon indexed by the key name.
+        icon: {
+            type: IconTypes.SVG,
+            data: key,
+        },
+        ...KeyConfigs[key],
+    };
+}
+
+export default KeyConfigs;

package/src/data/keys.js

@@ -0,0 +1,72 @@
+// @flow
+/**
+ * This file contains constants for keypad buttons that aren't single
+ * alphanumeric characters.
+ */
+
+// TODO(charlie): There's duplication between this file and key-configs.js.
+// We should clean it up by removing this file and requiring clients to use the
+// `id` field on the key configurations.
+const Keys = {
+    PLUS: "PLUS",
+    MINUS: "MINUS",
+    NEGATIVE: "NEGATIVE",
+    TIMES: "TIMES",
+    DIVIDE: "DIVIDE",
+    DECIMAL: "DECIMAL",
+    PERIOD: "PERIOD",
+    PERCENT: "PERCENT",
+    CDOT: "CDOT",
+    EQUAL: "EQUAL",
+    NEQ: "NEQ",
+    GT: "GT",
+    LT: "LT",
+    GEQ: "GEQ",
+    LEQ: "LEQ",
+    FRAC_INCLUSIVE: "FRAC_INCLUSIVE", // mobile native only
+    FRAC_EXCLUSIVE: "FRAC_EXCLUSIVE", // mobile native only
+    FRAC: "FRAC",
+    EXP: "EXP",
+    EXP_2: "EXP_2",
+    EXP_3: "EXP_3",
+    SQRT: "SQRT",
+    CUBE_ROOT: "CUBE_ROOT",
+    RADICAL: "RADICAL",
+    LEFT_PAREN: "LEFT_PAREN",
+    RIGHT_PAREN: "RIGHT_PAREN",
+    LN: "LN",
+    LOG: "LOG",
+    LOG_N: "LOG_N",
+    SIN: "SIN",
+    COS: "COS",
+    TAN: "TAN",
+
+    // TODO(charlie): Add in additional Greek letters.
+    PI: "PI",
+    THETA: "THETA",
+
+    UP: "UP",
+    RIGHT: "RIGHT",
+    DOWN: "DOWN",
+    LEFT: "LEFT",
+    BACKSPACE: "BACKSPACE",
+    DISMISS: "DISMISS",
+
+    JUMP_OUT_PARENTHESES: "JUMP_OUT_PARENTHESES",
+    JUMP_OUT_EXPONENT: "JUMP_OUT_EXPONENT",
+    JUMP_OUT_BASE: "JUMP_OUT_BASE",
+    JUMP_INTO_NUMERATOR: "JUMP_INTO_NUMERATOR",
+    JUMP_OUT_NUMERATOR: "JUMP_OUT_NUMERATOR",
+    JUMP_OUT_DENOMINATOR: "JUMP_OUT_DENOMINATOR",
+
+    NOOP: "NOOP",
+
+    // Multi-functional keys.
+    FRAC_MULTI: "FRAC_MULTI", // mobile native only
+
+    // A custom key that captures an arbitrary number of symbols but has no
+    // 'default' symbol or action.
+    MANY: "MANY",
+};
+
+export default Keys;

package/src/demo.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import ReactDOM from "react-dom";
+
+import App from "./components/app.js";
+
+import "../less/main.less";
+
+ReactDOM.render(<App />, document.getElementById("root"));

package/src/fake-react-native-web/index.js

@@ -0,0 +1,12 @@
+// @flow
+/**
+ * This file exports components View and Text which wrap <div> and <span>.
+ * We do this so that someday in the future we can use these components with
+ * React Native.
+ *
+ * Inspired by https://github.com/necolas/react-native-web. We use aphrodite
+ * StyleSheets instead.
+ */
+
+export {default as Text} from "./text.js";
+export {default as View} from "./view.js";

package/src/fake-react-native-web/text.js

@@ -0,0 +1,56 @@
+// @flow
+
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import type {CSSProperties} from "aphrodite";
+
+type Props = {|
+    children: React.Node,
+    // The `dynamicStyle` prop is provided for animating dynamic
+    // properties, as creating Aphrodite StyleSheets in animation loops is
+    // expensive. `dynamicStyle` should be a raw style object, rather than
+    // a StyleSheet.
+    dynamicStyle?: CSSProperties,
+    numberOfLines?: number,
+    style?: CSSProperties,
+|};
+
+class Text extends React.Component<Props> {
+    render(): React.Element<"span"> {
+        const {numberOfLines, style} = this.props;
+
+        const className = css(
+            styles.initial,
+            ...(Array.isArray(style) ? style : [style]),
+            numberOfLines === 1 && styles.singleLineStyle,
+        );
+
+        return (
+            <span className={className} style={this.props.dynamicStyle}>
+                {this.props.children}
+            </span>
+        );
+    }
+}
+
+// https://github.com/necolas/react-native-web/blob/master/src/components/Text/index.js
+const styles = StyleSheet.create({
+    initial: {
+        color: "inherit",
+        display: "inline",
+        font: "inherit",
+        margin: 0,
+        padding: 0,
+        textDecorationLine: "none",
+        wordWrap: "break-word",
+    },
+    singleLineStyle: {
+        maxWidth: "100%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+});
+
+export default Text;