@khanacademy/math-input 0.3.2 → 0.5.0

package/src/components/compute-layout-parameters.js

@@ -0,0 +1,157 @@
+/**
+ * An algorithm for computing the appropriate layout parameters for the keypad,
+ * including the size of the buttons and whether or not to render fullscreen,
+ * taking into account a number of factors including the size of the screen, the
+ * orientation of the screen, the presence of browser chrome, the presence of
+ * other exercise-related chrome, the size of the input box, the parameters that
+ * define the keypad (i.e., the number of rows, columns, and pages), and so
+ * forth.
+ *
+ * The computations herein make some strong assumptions about the sizes of
+ * various other elements and the situations under which they will be visible
+ * (e.g., browser chrome). However, this is just a heuristic--it's not crucial
+ * that our buttons are sized in a pixel-perfect manner, but rather, that we
+ * make a balanced use of space.
+ *
+ * Note that one goal of the algorithm is to avoid resizing the keypad in the
+ * face of dynamic browser chrome. In order to avoid that awkwardness, we tend
+ * to be conservative in our measurements and make things smaller than they
+ * might need to be.
+ */
+
+import {DeviceTypes, DeviceOrientations, LayoutModes} from "../consts.js";
+
+import {
+    pageIndicatorHeightPx,
+    toolbarHeightPx,
+    navigationPadWidthPx,
+    innerBorderWidthPx,
+} from "./common-style.js";
+
+const minButtonHeight = 48;
+const maxButtonSize = 64;
+const minSpaceAboveKeypad = 32;
+
+// These values are taken from an iPhone 5, but should be consistent with the
+// iPhone 4 as well. Regardless, these are meant to be representative of the
+// possible types of browser chrome that could appear in various context, rather
+// than pixel-perfect for every device.
+const safariNavBarWhenShrunk = 44;
+const safariNavBarWhenExpanded = 64;
+const safariToolbar = 44;
+
+// In mobile Safari, the browser chrome is completely hidden in landscape,
+// though a shrunken navbar and full-sized toolbar on scroll. In portrait, the
+// shrunken navbar is always visible, but expands on scroll (and the toolbar
+// appears as well).
+const maxLandscapeBrowserChrome = safariNavBarWhenShrunk + safariToolbar;
+const maxPortraitBrowserChrome =
+    safariToolbar + (safariNavBarWhenExpanded - safariNavBarWhenShrunk);
+
+// This represents the 'worst case' aspect ratio that we care about (for
+// portrait layouts). It's taken from the iPhone 4. The height is computed by
+// taking the height of the device and removing the persistent, shrunken navbar.
+// (We don't need to account for the expanded navbar, since we include the
+// difference when reserving space above the keypad.)
+const worstCaseAspectRatio = 320 / (480 - safariNavBarWhenShrunk);
+
+export const computeLayoutParameters = (
+    {numColumns, numMaxVisibleRows, numPages},
+    {pageWidthPx, pageHeightPx},
+    {deviceOrientation, deviceType},
+    {navigationPadEnabled, paginationEnabled, toolbarEnabled},
+) => {
+    // First, compute some values that will be used in multiple computations.
+    const effectiveNumColumns = paginationEnabled
+        ? numColumns
+        : numColumns * numPages;
+
+    // Then, compute the button dimensions based on the provided parameters.
+    let buttonDimensions;
+    if (deviceType === DeviceTypes.PHONE) {
+        const isLandscape = deviceOrientation === DeviceOrientations.LANDSCAPE;
+
+        // In many cases, the browser chrome will already have been factored
+        // into `pageHeightPx`. But we have no way of knowing if that's
+        // the case or not. As such, we take a conservative approach and
+        // assume that the chrome is _never_ included in `pageHeightPx`.
+        const browserChromeHeight = isLandscape
+            ? maxLandscapeBrowserChrome
+            : maxPortraitBrowserChrome;
+
+        // Count up all the space that we need to reserve on the page.
+        // Namely, we need to account for:
+        //  1. Space between the keypad and the top of the page.
+        //  2. The presence of the exercise toolbar.
+        //  3. The presence of the view pager indicator.
+        //  4. Any browser chrome that may appear later.
+        const reservedSpace =
+            minSpaceAboveKeypad +
+            browserChromeHeight +
+            (toolbarEnabled ? toolbarHeightPx : 0) +
+            (paginationEnabled ? pageIndicatorHeightPx : 0);
+
+        // Next, compute the effective width and height. We can use the page
+        // width as the effective width. For the height, though, we take
+        // another conservative measure when in portrait by assuming that
+        // the device has the worst possible aspect ratio. In other words,
+        // we ignore the device height in portrait and assume the worst.
+        // This prevents the keypad from changing size when browser chrome
+        // appears and disappears.
+        const effectiveWidth = pageWidthPx;
+        const effectiveHeight = isLandscape
+            ? pageHeightPx
+            : pageWidthPx / worstCaseAspectRatio;
+        const maxKeypadHeight = effectiveHeight - reservedSpace;
+
+        // Finally, compute the button height and width. In computing the
+        // height, accommodate for the maximum number of rows that will ever be
+        // visible (since the toggling of popovers can increase the number of
+        // visible rows).
+        const buttonHeightPx = Math.max(
+            Math.min(maxKeypadHeight / numMaxVisibleRows, maxButtonSize),
+            minButtonHeight,
+        );
+
+        let buttonWidthPx;
+        if (numPages > 1) {
+            const effectiveNumColumns = paginationEnabled
+                ? numColumns
+                : numColumns * numPages;
+            buttonWidthPx = effectiveWidth / effectiveNumColumns;
+        } else {
+            buttonWidthPx = isLandscape
+                ? maxButtonSize
+                : effectiveWidth / numColumns;
+        }
+
+        buttonDimensions = {
+            widthPx: buttonWidthPx,
+            heightPx: buttonHeightPx,
+        };
+    } else if (deviceType === DeviceTypes.TABLET) {
+        buttonDimensions = {
+            widthPx: maxButtonSize,
+            heightPx: maxButtonSize,
+        };
+    } else {
+        throw new Error("Invalid device type: " + deviceType);
+    }
+
+    // Finally, determine whether the keypad should be rendered in the
+    // fullscreen layout by determining its resultant width.
+    const numSeparators =
+        (navigationPadEnabled ? 1 : 0) +
+        (!paginationEnabled ? numPages - 1 : 0);
+    const keypadWidth =
+        effectiveNumColumns * buttonDimensions.widthPx +
+        (navigationPadEnabled ? navigationPadWidthPx : 0) +
+        numSeparators * innerBorderWidthPx;
+    return {
+        buttonDimensions,
+        layoutMode:
+            keypadWidth >= pageWidthPx
+                ? LayoutModes.FULLSCREEN
+                : LayoutModes.COMPACT,
+    };
+};

package/src/components/corner-decal.js

@@ -0,0 +1,56 @@
+/**
+ * A small triangular decal to sit in the corner of a parent component.
+ */
+
+import {StyleSheet} from "aphrodite";
+import PropTypes from "prop-types";
+import * as React from "react";
+
+import {View} from "../fake-react-native-web/index.js";
+
+import {offBlack} from "./common-style.js";
+
+class CornerDecal extends React.Component {
+    static propTypes = {
+        style: PropTypes.any,
+    };
+
+    render() {
+        const {style} = this.props;
+
+        const containerStyle = [
+            styles.container,
+            ...(Array.isArray(style) ? style : [style]),
+        ];
+
+        return (
+            <View style={containerStyle}>
+                <svg
+                    width={triangleSizePx}
+                    height={triangleSizePx}
+                    viewBox="4 4 8 8"
+                >
+                    <path
+                        fill={offBlack}
+                        opacity="0.3"
+                        d="M5.29289322,5.70710678 L10.2928932,10.7071068 C10.9228581,11.3370716 12,10.8909049 12,10 L12,5 C12,4.44771525 11.5522847,4 11,4 L6,4 C5.10909515,4 4.66292836,5.07714192 5.29289322,5.70710678 Z" // @Nolint
+                    />
+                </svg>
+            </View>
+        );
+    }
+}
+
+const triangleSizePx = 7;
+
+const styles = StyleSheet.create({
+    container: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        width: triangleSizePx,
+        height: triangleSizePx,
+    },
+});
+
+export default CornerDecal;

package/src/components/echo-manager.js

@@ -0,0 +1,160 @@
+/**
+ * A component that renders and animates the selection state effect effect.
+ */
+
+import PropTypes from "prop-types";
+import * as React from "react";
+import {TransitionGroup, CSSTransition} from "react-transition-group";
+
+import {KeyTypes, EchoAnimationTypes} from "../consts.js";
+import KeyConfigs from "../data/key-configs.js";
+
+import KeypadButton from "./keypad-button.js";
+import {
+    echoPropType,
+    bordersPropType,
+    boundingBoxPropType,
+    keyIdPropType,
+} from "./prop-types.js";
+import * as zIndexes from "./z-indexes.js";
+
+class Echo extends React.Component {
+    static propTypes = {
+        animationDurationMs: PropTypes.number.isRequired,
+        borders: bordersPropType,
+        id: keyIdPropType.isRequired,
+        initialBounds: boundingBoxPropType.isRequired,
+        onAnimationFinish: PropTypes.func.isRequired,
+    };
+
+    componentDidMount() {
+        // NOTE(charlie): This is somewhat unfortunate, as the component is
+        // encoding information about its own animation, of which it should be
+        // ignorant. However, there doesn't seem to be a cleaner way to make
+        // this happen, and at least here, all the animation context is
+        // colocated in this file.
+        const {animationDurationMs, onAnimationFinish} = this.props;
+        setTimeout(() => onAnimationFinish(), animationDurationMs);
+    }
+
+    render() {
+        const {borders, id, initialBounds} = this.props;
+        const {icon} = KeyConfigs[id];
+
+        const containerStyle = {
+            zIndex: zIndexes.echo,
+            position: "absolute",
+            pointerEvents: "none",
+            ...initialBounds,
+        };
+
+        // NOTE(charlie): In some browsers, Aphrodite doesn't seem to flush its
+        // styles quickly enough, so there's a flickering effect on the first
+        // animation. Thus, it's much safer to do the styles purely inline.
+        // <View> makes this difficult because some of its defaults, which are
+        // applied via StyleSheet, will override our inlines.
+        return (
+            <div style={containerStyle}>
+                <KeypadButton
+                    name={id}
+                    icon={icon}
+                    type={KeyTypes.ECHO}
+                    borders={borders}
+                />
+            </div>
+        );
+    }
+}
+
+class EchoManager extends React.Component {
+    static propTypes = {
+        echoes: PropTypes.arrayOf(echoPropType),
+        onAnimationFinish: PropTypes.func.isRequired,
+    };
+
+    _animationConfigForType = (animationType) => {
+        // NOTE(charlie): These must be kept in sync with the transition
+        // durations and classnames specified in echo.css.
+        let animationDurationMs;
+        let animationTransitionName;
+
+        switch (animationType) {
+            case EchoAnimationTypes.SLIDE_AND_FADE:
+                animationDurationMs = 400;
+                animationTransitionName = "echo-slide-and-fade";
+                break;
+
+            case EchoAnimationTypes.FADE_ONLY:
+                animationDurationMs = 300;
+                animationTransitionName = "echo-fade-only";
+                break;
+
+            case EchoAnimationTypes.LONG_FADE_ONLY:
+                animationDurationMs = 400;
+                animationTransitionName = "echo-long-fade-only";
+                break;
+
+            default:
+                throw new Error("Invalid echo animation type:", animationType);
+        }
+
+        return {
+            animationDurationMs,
+            animationTransitionName,
+        };
+    };
+
+    render() {
+        const {echoes, onAnimationFinish} = this.props;
+
+        return (
+            <span>
+                {Object.keys(EchoAnimationTypes).map((animationType) => {
+                    // Collect the relevant parameters for the animation type, and
+                    // filter for the appropriate echoes.
+                    const {animationDurationMs, animationTransitionName} =
+                        this._animationConfigForType(animationType);
+                    const echoesForType = echoes.filter((echo) => {
+                        return echo.animationType === animationType;
+                    });
+
+                    // TODO(charlie): Manage this animation with Aphrodite styles.
+                    // Right now, there's a bug in the autoprefixer that breaks CSS
+                    // transitions on mobile Safari.
+                    // See: https://github.com/Khan/aphrodite/issues/68.
+                    // As such, we have to do this with a stylesheet.
+                    return (
+                        <TransitionGroup key={animationType}>
+                            {echoesForType.map((echo) => {
+                                const {animationId} = echo;
+                                return (
+                                    <CSSTransition
+                                        classNames={animationTransitionName}
+                                        enter={true}
+                                        exit={false}
+                                        timeout={{
+                                            enter: animationDurationMs,
+                                        }}
+                                        key={animationId}
+                                    >
+                                        <Echo
+                                            animationDurationMs={
+                                                animationDurationMs
+                                            }
+                                            onAnimationFinish={() =>
+                                                onAnimationFinish(animationId)
+                                            }
+                                            {...echo}
+                                        />
+                                    </CSSTransition>
+                                );
+                            })}
+                        </TransitionGroup>
+                    );
+                })}
+            </span>
+        );
+    }
+}
+
+export default EchoManager;

package/src/components/empty-keypad-button.js

@@ -0,0 +1,49 @@
+/**
+ * A keypad button containing no symbols and triggering no actions on click.
+ */
+
+import PropTypes from "prop-types";
+import * as React from "react";
+import {connect} from "react-redux";
+
+import KeyConfigs from "../data/key-configs.js";
+
+import GestureManager from "./gesture-manager.js";
+import KeypadButton from "./keypad-button.js";
+
+class EmptyKeypadButton extends React.Component {
+    static propTypes = {
+        gestureManager: PropTypes.instanceOf(GestureManager),
+    };
+
+    render() {
+        const {gestureManager, ...rest} = this.props;
+
+        // Register touch events on the button, but don't register its DOM node
+        // or compute focus state or anything like that. We want the gesture
+        // manager to know about touch events that start on empty buttons, but
+        // we don't need it to know about their DOM nodes, as it doesn't need
+        // to focus them or trigger presses.
+        return (
+            <KeypadButton
+                onTouchStart={(evt) => gestureManager.onTouchStart(evt)}
+                onTouchEnd={(evt) => gestureManager.onTouchEnd(evt)}
+                onTouchMove={(evt) => gestureManager.onTouchMove(evt)}
+                onTouchCancel={(evt) => gestureManager.onTouchCancel(evt)}
+                {...KeyConfigs.NOOP}
+                {...rest}
+            />
+        );
+    }
+}
+
+const mapStateToProps = (state) => {
+    const {gestures} = state;
+    return {
+        gestureManager: gestures.gestureManager,
+    };
+};
+
+export default connect(mapStateToProps, null, null, {forwardRef: true})(
+    EmptyKeypadButton,
+);