@khanacademy/perseus 0.0.1 → 0.2.1

package/src/styles/widgets/sortable.less

@@ -0,0 +1,127 @@
+.draggy-boxy-thing-hover (@color: #ffa500) {
+    border-color: @color;
+    @darker: darken(@color, 11%);
+    box-shadow: 0 0 4px @darker;
+    -moz-box-shadow: 0 0 4px @darker;
+    -ms-box-shadow: 0 0 4px @darker;
+    -o-box-shadow: 0 0 4px @darker;
+    -webkit-box-shadow: 0 0 4px @darker;
+}
+
+.draggy-boxy-thing {
+    .draggable-box,
+    .cards-area {
+        background: #eee;
+        border: 1px solid #ccc;
+        border-bottom: 1px solid #aaa;
+
+        box-shadow: 0 1px 2px #ccc;
+        -moz-box-shadow: 0 1px 2px #ccc;
+        -webkit-box-shadow: 0 1px 2px #ccc;
+    }
+
+    // TODO(jack): Make this work for the orderer too.
+    // Right now don't do this for the orderer because it uses
+    // more complicated positioning that this would break
+    .cards-area {
+        .above-scratchpad;
+    }
+
+    .card {
+        .perseus-interactive;
+
+        background-color: #fff;
+        border: 1px solid #b9b9b9;
+        border-bottom-color: #939393;
+        border-radius: 4px;
+        -moz-border-radius: 4px;
+        -webkit-border-radius: 4px;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -o-user-select: none;
+        cursor: pointer;
+        touch-action: none;
+
+        &.placeholder {
+            background:#ddd;
+            border: 1px solid #ccc;
+        }
+
+        &.drag-hint {
+            background: none;
+            border: 1px dashed #aaa;
+            cursor: auto;
+
+            &:hover {
+                border-color: #aaa;
+                box-shadow: none;
+            }
+        }
+
+        &.dragging {
+            background-color: #ffedcd;
+            opacity: 0.8;
+            filter: opacity(0.8);
+        }
+
+        &.stack {
+            z-index: auto;
+            &:after {
+                content: " ";
+                background-color: #fff;
+                border: 1px solid #b9b9b9;
+                border-bottom-color: #939393;
+                border-radius: 4px;
+                -moz-border-radius: 4px;
+                -webkit-border-radius: 4px;
+                height: 100%;
+                width: 100%;
+                z-index: -1;
+                top: 1px;
+                left: 1px;
+                position: absolute;
+            }
+        }
+
+        &:hover {
+            .draggy-boxy-thing-hover();
+        }
+    }
+}
+
+// TODO(benkomalo): ideally all of these would be removed as all of the other
+// sortable styles have been moved to inline styles using Aphrodite. However,
+// these are all hacky styles that reach down into descendents in ways that
+// they probably shouldn't, so Aphrodite doesn't support it. This will require
+// a larger refactoring to wire down options to nested `Renderer`s so they can
+// have their styling modified.
+.perseus-sortable {
+    div.paragraph {
+        margin: 0;
+    }
+
+    .perseus-sortable-draggable {
+        &:before {
+            // Vertical-align, part 1
+            content: "";
+            display: inline-block;
+            height: 100%;
+            vertical-align: middle;
+        }
+
+        & > div {
+            // Vertical-align, part 2
+            display: inline-block;
+            font-size: 14px;
+            max-width: 100%;
+            vertical-align: middle;
+        }
+    }
+
+    .perseus-sortable-draggable-unpadded {
+        img {
+            vertical-align: bottom;
+        }
+    }
+}

package/src/styles/widgets/table.less

@@ -0,0 +1,56 @@
+// Extra specifity is needed to counteract generic tables
+.framework-perseus table.perseus-widget-table-of-values.non-markdown {
+    text-align: left;
+    margin: 20px auto;
+    border-collapse: collapse;
+
+    tr {
+        height: 23px;
+    }
+
+    th, td {
+        border: 2px solid black;
+        border-width: 0 2px;
+
+        &:first-child {
+            border-left: 0;
+        }
+
+        &:last-child {
+            border-right: 0;
+        }
+    }
+
+    th {
+        font-weight: normal;
+        padding: 5px;
+        width: 80px;
+        text-align: left;
+        border-bottom: 2px solid black;
+        .paragraph {
+            margin: 0;
+        }
+    }
+
+    td {
+        padding: 0px 5px;
+    }
+
+    tbody tr:first-child td {
+        padding-top: 5px;
+    }
+}
+.framework-perseus table.perseus-widget-table-of-values input,
+#answer_area table.perseus-widget-table-of-values input {
+    // NOTE(charlie): This should be kept in-sync with the "width: 80" in
+    // table.jsx.
+    width: 80px;
+}
+
+body.mobile {
+    .framework-perseus table.perseus-widget-table-of-values.non-markdown {
+        td {
+            padding: 5px;
+        }
+    }
+}

package/src/styles/widgets/transformer.less

@@ -0,0 +1,28 @@
+.perseus-widget-transformer {
+    .highlighted-tool-button {
+        text-shadow: 1px 1px rgba(0, 0, 0, 0.25);
+    }
+    > .graphie-container {
+        margin-bottom: 10px;
+        position: relative;
+        overflow: hidden;
+
+        > img, > .unresponsive-svg-image {
+            position: absolute;
+            // Preserves background image alignment (if image is a graph,
+            // it can extend up and to the right to allow for axis labels)
+            bottom: 0;
+            left: 0;
+        }
+    }
+    .transformer-undo-button {
+        float: right;
+    }
+    .perseus-transformation-list {
+        input {
+            width: 40px;
+        }
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+}

package/src/styles/widgets/unit.less

@@ -0,0 +1,14 @@
+.old-unit-input input, .unit-editor-canonical {
+    border: 1px solid #a4a4a4;
+    border-radius: 5px;
+    // box-sizing: border-box;
+    font-size: 14px;
+    // margin-bottom: 5px;
+    // max-width: 240px;
+    padding: 6px;
+    // width: 100%;
+}
+
+.unit-editor > div {
+    margin: 5px 0;
+}

package/src/tex-wrangler.js

@@ -0,0 +1,176 @@
+// @flow
+/*
+ * In this file, an `expression` is some portion of valid TeX enclosed in
+ * curly brackets.
+ */
+
+/*
+ * Find the index at which an expression ends, i.e., has an unmatched
+ * closing curly bracket. This method assumes that we start with a non-open
+ * bracket character and end when we've seen more left than right brackets
+ * (rather than assuming that we start with a bracket character and wait for
+ * bracket equality).
+ */
+function findEndpoint(tex, currentIndex) {
+    let bracketDepth = 0;
+
+    for (let i = currentIndex, len = tex.length; i < len; i++) {
+        const c = tex[i];
+
+        if (c === "{") {
+            bracketDepth++;
+        } else if (c === "}") {
+            bracketDepth--;
+        }
+
+        if (bracketDepth < 0) {
+            return i;
+        }
+    }
+    // If we never see unbalanced curly brackets, default to the
+    // entire string
+    return tex.length;
+}
+
+/*
+ * Parses an individual set of curly brackets into TeX.
+ */
+function parseNextExpression(tex, currentIndex, handler) {
+    // Find the first '{' and grab subsequent TeX
+    // Ex) tex: '{3}{7}', and we want the '3'
+    const openBracketIndex = tex.indexOf("{", currentIndex);
+    const nextExpIndex = openBracketIndex + 1;
+
+    // Truncate to only contain remaining TeX
+    const endpoint = findEndpoint(tex, nextExpIndex);
+    const expressionTeX = tex.substring(nextExpIndex, endpoint);
+    const parsedExp = walkTex(expressionTeX, handler);
+
+    return {
+        endpoint: endpoint,
+        expression: parsedExp,
+    };
+}
+
+function getNextFracIndex(tex, currentIndex) {
+    const dfrac = "\\dfrac";
+    const frac = "\\frac";
+
+    const nextFrac = tex.indexOf(frac, currentIndex);
+    const nextDFrac = tex.indexOf(dfrac, currentIndex);
+
+    if (nextFrac > -1 && nextDFrac > -1) {
+        return Math.min(nextFrac, nextDFrac);
+    }
+    if (nextFrac > -1) {
+        return nextFrac;
+    }
+    if (nextDFrac > -1) {
+        return nextDFrac;
+    }
+    return -1;
+}
+
+function walkTex(tex: string, handler): string {
+    if (!tex) {
+        return "";
+    }
+
+    // Ex) tex: '2 \dfrac {3}{7}'
+    let parsedString = "";
+    let currentIndex = 0;
+    let nextFrac = getNextFracIndex(tex, currentIndex);
+
+    // For each \dfrac, find the two expressions (wrapped in {}) and recur
+    while (nextFrac > -1) {
+        // Gather first fragment, preceding \dfrac
+        // Ex) parsedString: '2 '
+        parsedString += tex.substring(currentIndex, nextFrac);
+
+        // Remove everything preceding \dfrac, which has been parsed
+        currentIndex = nextFrac;
+
+        // Parse first expression and move index past it
+        // Ex) firstParsedExpression.expression: '3'
+        const firstParsedExpression = parseNextExpression(
+            tex,
+            currentIndex,
+            handler,
+        );
+        currentIndex = firstParsedExpression.endpoint + 1;
+
+        // Parse second expression
+        // Ex) secondParsedExpression.expression: '7'
+        const secondParsedExpression = parseNextExpression(
+            tex,
+            currentIndex,
+            handler,
+        );
+        currentIndex = secondParsedExpression.endpoint + 1;
+
+        // Add expressions to running total of parsed expressions
+        if (parsedString.length) {
+            parsedString += " ";
+        }
+
+        // Apply a custom handler based on the parsed subexpressions
+        parsedString += handler(
+            firstParsedExpression.expression,
+            secondParsedExpression.expression,
+        );
+
+        // Find next DFrac, relative to currentIndex
+        nextFrac = getNextFracIndex(tex, currentIndex);
+    }
+
+    // Add remaining TeX, which is \dfrac-free
+    parsedString += tex.slice(currentIndex);
+
+    return parsedString;
+}
+
+/*
+ * Modify a TeX expression, returning another TeX expression. The resulting
+ * expression will have its innermost fractions stubbed out with \fracs
+ * (as opposed to \dfracs). All other content will remain untouched.
+ */
+function modifyTex(tex: string): string {
+    function isNestedFraction(tex) {
+        return tex.indexOf("\\frac") > -1 || tex.indexOf("\\dfrac") > -1;
+    }
+    const handler = function (exp1, exp2) {
+        let prefix;
+        if (isNestedFraction(exp1) || isNestedFraction(exp2)) {
+            prefix = "\\dfrac";
+        } else {
+            prefix = "\\frac";
+        }
+        return prefix + " {" + exp1 + "}{" + exp2 + "}";
+    };
+    return walkTex(tex, handler);
+}
+
+/*
+ * Parse a TeX expression into something interpretable by input-number.
+ * The process is concerned with: (1) parsing fractions, i.e., \dfracs; and
+ * (2) removing backslash-escaping from certain characters (right now, only
+ * percent signs).
+ *
+ * The basic algorithm for handling \dfracs splits on \dfracs and then recurs
+ * on the subsequent "expressions", i.e., the {} pairs that follow \dfrac. The
+ * recursion is to allow for nested \dfrac elements.
+ *
+ * Backslash-escapes are removed with a simple search-and-replace.
+ */
+function parseTex(tex: string): string {
+    const handler = function (exp1, exp2) {
+        return exp1 + "/" + exp2;
+    };
+    const texWithoutFracs = walkTex(tex, handler);
+    return texWithoutFracs.replace("\\%", "%");
+}
+
+export default {
+    parseTex,
+    modifyTex,
+};

package/src/traversal.jsx

@@ -0,0 +1,141 @@
+// @flow
+/**
+ * Traverses a {content, widgets, images} renderer props object,
+ * such as `itemData.question`
+ *
+ * This traversal is deep and handles some widget prop upgrades
+ * (TODO(aria): Handle minor prop upgrades :) )
+ *
+ * This is the right way to traverse itemData.
+ *
+ * NOTE: We should not expose this on the perseus API yet. Instead,
+ * build the traversal method you want inside perseus, and use this
+ * from that. We might eventually expose this, but I'd like to be
+ * more confident in the interface provided first.
+ */
+
+import _ from "underscore";
+
+// TODO(aria): Pull this out of interactive2 / replace with new _.mapObject
+import objective_ from "./interactive2/objective_.js";
+import * as Widgets from "./widgets.js";
+
+const noop = function () {};
+
+const deepCallbackFor = function (
+    contentCallback: ($FlowFixMe) => void,
+    widgetCallback: (widgetInfo: $FlowFixMe, widgetId: string) => $FlowFixMe,
+    optionsCallback: ($FlowFixMe) => void,
+) {
+    const deepCallback = function (widgetInfo, widgetId) {
+        // This doesn't modify the widget info if the widget info
+        // is at a later version than is supported, which is important
+        // for our latestVersion test below.
+        const upgradedWidgetInfo =
+            Widgets.upgradeWidgetInfoToLatestVersion(widgetInfo);
+        const latestVersion = Widgets.getVersion(upgradedWidgetInfo.type);
+
+        // Only traverse our children if we can understand this version
+        // of the widget props.
+        // TODO(aria): This will break if the traversal code assumes that
+        // any props that usually get defaulted in are present. That is,
+        // it can fail on minor version upgrades.
+        // For this reason, and because the upgrade code doesn't handle
+        // minor versions correctly (it doesn't report anything useful
+        // about what minor version a widget is actually at, since it
+        // doesn't have meaning in the context of upgrades), we
+        // just check the major version here.
+        // TODO(aria): This is seriously quirky and would be unpleasant
+        // to think about while writing traverseChildWidgets code. Please
+        // make all of this a little tighter.
+        // I think once we use react class defaultProps instead of relying
+        // on getDefaultProps, this will become easier.
+        let newWidgetInfo;
+        if (
+            latestVersion &&
+            upgradedWidgetInfo.version?.major === latestVersion.major
+        ) {
+            newWidgetInfo = Widgets.traverseChildWidgets(
+                upgradedWidgetInfo,
+                (rendererOptions) => {
+                    return traverseRenderer(
+                        rendererOptions,
+                        contentCallback,
+                        // so that we traverse grandchildren, too:
+                        deepCallback,
+                        optionsCallback,
+                    );
+                },
+            );
+        } else {
+            newWidgetInfo = upgradedWidgetInfo;
+        }
+
+        const userWidgetInfo = widgetCallback(newWidgetInfo, widgetId);
+        if (userWidgetInfo !== undefined) {
+            return userWidgetInfo;
+        }
+        return newWidgetInfo;
+    };
+    return deepCallback;
+};
+
+const traverseRenderer = function (
+    rendererOptions,
+    contentCallback: ($FlowFixMe) => void,
+    deepWidgetCallback: (
+        widgetInfo: $FlowFixMe,
+        widgetId: string,
+    ) => $FlowFixMe,
+    optionsCallback: ($FlowFixMe) => void,
+) {
+    let newContent = rendererOptions.content;
+    if (rendererOptions.content != null) {
+        const modifiedContent = contentCallback(rendererOptions.content);
+        if (modifiedContent !== undefined) {
+            newContent = modifiedContent;
+        }
+    }
+
+    const newWidgets = objective_.mapObject(
+        rendererOptions.widgets || {},
+        function (widgetInfo, widgetId) {
+            // Widgets without info or a type are empty widgets, and
+            // should always be renderable. It's also annoying to write
+            // checks for this everywhere, so we just filter them out once and
+            // for all!
+            if (widgetInfo == null || widgetInfo.type == null) {
+                return widgetInfo;
+            }
+            return deepWidgetCallback(widgetInfo, widgetId);
+        },
+    );
+
+    const newOptions = _.extend({}, rendererOptions, {
+        content: newContent,
+        widgets: newWidgets,
+    });
+    const userOptions = optionsCallback(newOptions);
+    if (userOptions !== undefined) {
+        return userOptions;
+    }
+    return newOptions;
+};
+
+export const traverse = function (
+    rendererOptions: $FlowFixMe,
+    contentCallback?: ?($FlowFixMe) => $FlowFixMe,
+    widgetCallback?: ?(widgetInfo: $FlowFixMe, widgetId: string) => $FlowFixMe,
+    optionsCallback?: ($FlowFixMe) => void,
+): $FlowFixMe {
+    contentCallback = contentCallback || noop;
+    widgetCallback = widgetCallback || noop;
+    optionsCallback = optionsCallback || noop;
+
+    return traverseRenderer(
+        rendererOptions,
+        contentCallback,
+        deepCallbackFor(contentCallback, widgetCallback, optionsCallback),
+        optionsCallback,
+    );
+};