@khanacademy/math-input 0.4.1 → 0.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/README.md +1 -1
- package/{build/math-input.css → dist/es/index.css} +0 -150
- package/dist/es/index.js +7798 -0
- package/dist/es/index.js.map +1 -0
- package/dist/index.css +586 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +7768 -0
- package/dist/index.js.flow +2 -0
- package/dist/index.js.map +1 -0
- package/dist/strings.js +71 -0
- package/index.html +20 -0
- package/less/echo.less +56 -0
- package/less/main.less +5 -0
- package/less/overrides.less +129 -0
- package/less/popover.less +22 -0
- package/less/tabbar.less +6 -0
- package/package.json +60 -89
- package/src/actions/index.js +57 -0
- package/src/components/__tests__/gesture-state-machine_test.js +437 -0
- package/src/components/__tests__/node-manager_test.js +89 -0
- package/src/components/__tests__/two-page-keypad_test.js +42 -0
- package/src/components/app.js +73 -0
- package/src/components/common-style.js +47 -0
- package/src/components/compute-layout-parameters.js +157 -0
- package/src/components/corner-decal.js +56 -0
- package/src/components/echo-manager.js +160 -0
- package/src/components/empty-keypad-button.js +49 -0
- package/src/components/expression-keypad.js +323 -0
- package/src/components/fraction-keypad.js +176 -0
- package/src/components/gesture-manager.js +226 -0
- package/src/components/gesture-state-machine.js +283 -0
- package/src/components/icon.js +74 -0
- package/src/components/iconography/arrow.js +22 -0
- package/src/components/iconography/backspace.js +29 -0
- package/src/components/iconography/cdot.js +29 -0
- package/src/components/iconography/cos.js +30 -0
- package/src/components/iconography/cube-root.js +36 -0
- package/src/components/iconography/dismiss.js +25 -0
- package/src/components/iconography/divide.js +34 -0
- package/src/components/iconography/down.js +16 -0
- package/src/components/iconography/equal.js +33 -0
- package/src/components/iconography/exp-2.js +29 -0
- package/src/components/iconography/exp-3.js +29 -0
- package/src/components/iconography/exp.js +29 -0
- package/src/components/iconography/frac.js +44 -0
- package/src/components/iconography/geq.js +33 -0
- package/src/components/iconography/gt.js +33 -0
- package/src/components/iconography/index.js +45 -0
- package/src/components/iconography/jump-into-numerator.js +41 -0
- package/src/components/iconography/jump-out-base.js +30 -0
- package/src/components/iconography/jump-out-denominator.js +41 -0
- package/src/components/iconography/jump-out-exponent.js +30 -0
- package/src/components/iconography/jump-out-numerator.js +41 -0
- package/src/components/iconography/jump-out-parentheses.js +33 -0
- package/src/components/iconography/left-paren.js +33 -0
- package/src/components/iconography/left.js +16 -0
- package/src/components/iconography/leq.js +33 -0
- package/src/components/iconography/ln.js +29 -0
- package/src/components/iconography/log-n.js +29 -0
- package/src/components/iconography/log.js +29 -0
- package/src/components/iconography/lt.js +33 -0
- package/src/components/iconography/minus.js +32 -0
- package/src/components/iconography/neq.js +33 -0
- package/src/components/iconography/parens.js +33 -0
- package/src/components/iconography/percent.js +49 -0
- package/src/components/iconography/period.js +26 -0
- package/src/components/iconography/plus.js +32 -0
- package/src/components/iconography/radical.js +36 -0
- package/src/components/iconography/right-paren.js +33 -0
- package/src/components/iconography/right.js +16 -0
- package/src/components/iconography/sin.js +30 -0
- package/src/components/iconography/sqrt.js +32 -0
- package/src/components/iconography/tan.js +30 -0
- package/src/components/iconography/times.js +33 -0
- package/src/components/iconography/up.js +16 -0
- package/src/components/input/__tests__/context-tracking_test.js +177 -0
- package/src/components/input/__tests__/math-wrapper.jsx +33 -0
- package/src/components/input/__tests__/mathquill_test.js +747 -0
- package/src/components/input/cursor-contexts.js +29 -0
- package/src/components/input/cursor-handle.js +137 -0
- package/src/components/input/drag-listener.js +75 -0
- package/src/components/input/math-input.js +924 -0
- package/src/components/input/math-wrapper.js +959 -0
- package/src/components/input/scroll-into-view.js +72 -0
- package/src/components/keypad/button-assets.js +492 -0
- package/src/components/keypad/button.js +106 -0
- package/src/components/keypad/button.stories.js +29 -0
- package/src/components/keypad/index.js +64 -0
- package/src/components/keypad/keypad-page-items.js +106 -0
- package/src/components/keypad/keypad-pages.stories.js +32 -0
- package/src/components/keypad/keypad.stories.js +35 -0
- package/src/components/keypad/numeric-input-page.js +100 -0
- package/src/components/keypad/pre-algebra-page.js +98 -0
- package/src/components/keypad/trigonometry-page.js +90 -0
- package/src/components/keypad-button.js +366 -0
- package/src/components/keypad-container.js +303 -0
- package/src/components/keypad.js +154 -0
- package/src/components/many-keypad-button.js +44 -0
- package/src/components/math-icon.js +65 -0
- package/src/components/multi-symbol-grid.js +182 -0
- package/src/components/multi-symbol-popover.js +59 -0
- package/src/components/navigation-pad.js +139 -0
- package/src/components/node-manager.js +129 -0
- package/src/components/popover-manager.js +76 -0
- package/src/components/popover-state-machine.js +173 -0
- package/src/components/prop-types.js +82 -0
- package/src/components/provided-keypad.js +103 -0
- package/src/components/styles.js +38 -0
- package/src/components/svg-icon.js +25 -0
- package/src/components/tabbar/__tests__/tabbar_test.js +65 -0
- package/src/components/tabbar/icons.js +69 -0
- package/src/components/tabbar/item.js +138 -0
- package/src/components/tabbar/tabbar.js +61 -0
- package/src/components/tabbar/tabbar.stories.js +60 -0
- package/src/components/tabbar/types.js +3 -0
- package/src/components/text-icon.js +52 -0
- package/src/components/touchable-keypad-button.js +146 -0
- package/src/components/two-page-keypad.js +99 -0
- package/src/components/velocity-tracker.js +76 -0
- package/src/components/z-indexes.js +9 -0
- package/src/consts.js +74 -0
- package/src/data/key-configs.js +349 -0
- package/src/data/keys.js +72 -0
- package/src/demo.js +8 -0
- package/src/fake-react-native-web/index.js +12 -0
- package/src/fake-react-native-web/text.js +56 -0
- package/src/fake-react-native-web/view.js +91 -0
- package/src/index.js +14 -0
- package/src/native-app.js +84 -0
- package/src/store/index.js +505 -0
- package/src/utils.js +18 -0
- package/tools/svg-to-react/convert.py +111 -0
- package/tools/svg-to-react/icons/math-keypad-icon-0.svg +32 -0
- package/tools/svg-to-react/icons/math-keypad-icon-1.svg +32 -0
- package/tools/svg-to-react/icons/math-keypad-icon-2.svg +32 -0
- package/tools/svg-to-react/icons/math-keypad-icon-3.svg +32 -0
- package/tools/svg-to-react/icons/math-keypad-icon-4.svg +32 -0
- package/tools/svg-to-react/icons/math-keypad-icon-5.svg +32 -0
- package/tools/svg-to-react/icons/math-keypad-icon-6.svg +32 -0
- package/tools/svg-to-react/icons/math-keypad-icon-7.svg +32 -0
- package/tools/svg-to-react/icons/math-keypad-icon-8.svg +32 -0
- package/tools/svg-to-react/icons/math-keypad-icon-9.svg +32 -0
- package/tools/svg-to-react/icons/math-keypad-icon-addition.svg +34 -0
- package/tools/svg-to-react/icons/math-keypad-icon-cos.svg +38 -0
- package/tools/svg-to-react/icons/math-keypad-icon-delete.svg +36 -0
- package/tools/svg-to-react/icons/math-keypad-icon-dismiss.svg +36 -0
- package/tools/svg-to-react/icons/math-keypad-icon-division.svg +36 -0
- package/tools/svg-to-react/icons/math-keypad-icon-equals-not.svg +50 -0
- package/tools/svg-to-react/icons/math-keypad-icon-equals.svg +48 -0
- package/tools/svg-to-react/icons/math-keypad-icon-exponent-2.svg +38 -0
- package/tools/svg-to-react/icons/math-keypad-icon-exponent-3.svg +38 -0
- package/tools/svg-to-react/icons/math-keypad-icon-exponent.svg +38 -0
- package/tools/svg-to-react/icons/math-keypad-icon-fraction.svg +42 -0
- package/tools/svg-to-react/icons/math-keypad-icon-greater-than.svg +46 -0
- package/tools/svg-to-react/icons/math-keypad-icon-jump-out-base.svg +44 -0
- package/tools/svg-to-react/icons/math-keypad-icon-jump-out-denominator.svg +48 -0
- package/tools/svg-to-react/icons/math-keypad-icon-jump-out-exponent.svg +44 -0
- package/tools/svg-to-react/icons/math-keypad-icon-jump-out-parentheses.svg +44 -0
- package/tools/svg-to-react/icons/math-keypad-icon-less-than.svg +46 -0
- package/tools/svg-to-react/icons/math-keypad-icon-log-10.svg +36 -0
- package/tools/svg-to-react/icons/math-keypad-icon-log-e.svg +36 -0
- package/tools/svg-to-react/icons/math-keypad-icon-log.svg +38 -0
- package/tools/svg-to-react/icons/math-keypad-icon-multiplication-cross.svg +40 -0
- package/tools/svg-to-react/icons/math-keypad-icon-multiplication-dot.svg +38 -0
- package/tools/svg-to-react/icons/math-keypad-icon-percent.svg +42 -0
- package/tools/svg-to-react/icons/math-keypad-icon-radical-2.svg +36 -0
- package/tools/svg-to-react/icons/math-keypad-icon-radical-3.svg +38 -0
- package/tools/svg-to-react/icons/math-keypad-icon-radical.svg +38 -0
- package/tools/svg-to-react/icons/math-keypad-icon-radix-character.svg +32 -0
- package/tools/svg-to-react/icons/math-keypad-icon-sin.svg +38 -0
- package/tools/svg-to-react/icons/math-keypad-icon-subtraction.svg +32 -0
- package/tools/svg-to-react/icons/math-keypad-icon-tan.svg +38 -0
- package/tools/svg-to-react/symbol_map.py +41 -0
- package/LICENSE.txt +0 -21
- package/build/math-input.js +0 -1
package/dist/strings.js
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
// @noflow
|
|
2
|
+
/**
|
|
3
|
+
* WARNING: This is an autogenerated file. Do not edit by hand.
|
|
4
|
+
* To regenerate, run: yarn extract-strings.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
module.exports = [
|
|
8
|
+
i18n._("Cosine", {}),
|
|
9
|
+
// I18N: A label for a button that will cube (take to the third power)
|
|
10
|
+
i18n._("Cube", {}),
|
|
11
|
+
i18n._("Cube root", {}),
|
|
12
|
+
// I18N: A label for a button that will allow the user to input a custom
|
|
13
|
+
i18n._("Custom exponent", {}),
|
|
14
|
+
// I18N: A label for a decimal symbol.
|
|
15
|
+
i18n._("Decimal", {}),
|
|
16
|
+
// I18N: A label for a button that will delete some input.
|
|
17
|
+
i18n._("Delete", {}),
|
|
18
|
+
// I18N: A label for a button that will dismiss/hide a keypad.
|
|
19
|
+
i18n._("Dismiss", {}),
|
|
20
|
+
// I18N: A label for a division sign.
|
|
21
|
+
i18n._("Divide", {}),
|
|
22
|
+
i18n._("Down arrow", {}),
|
|
23
|
+
i18n._("Equals sign", {}),
|
|
24
|
+
// I18N: A label for a button that creates a new fraction next to the
|
|
25
|
+
// I18N: A label for a button that creates a new fraction next to the
|
|
26
|
+
i18n._("Fraction, excluding the current expression", {}),
|
|
27
|
+
// I18N: A label for a button that creates a new fraction and puts the
|
|
28
|
+
i18n._("Fraction, with current expression in numerator", {}),
|
|
29
|
+
i18n._("Greater than or equal to sign", {}),
|
|
30
|
+
// I18N: A label for a 'greater than' sign (represented as '>').
|
|
31
|
+
i18n._("Greater than sign", {}),
|
|
32
|
+
i18n._("Left arrow", {}),
|
|
33
|
+
i18n._("Left parenthesis", {}),
|
|
34
|
+
i18n._("Less than or equal to sign", {}),
|
|
35
|
+
// I18N: A label for a 'less than' sign (represented as '<').
|
|
36
|
+
i18n._("Less than sign", {}),
|
|
37
|
+
i18n._("Logarithm with base 10", {}),
|
|
38
|
+
i18n._("Logarithm with custom base", {}),
|
|
39
|
+
i18n._("Math input box", {}),
|
|
40
|
+
// I18N: A label for a minus sign.
|
|
41
|
+
i18n._("Minus", {}),
|
|
42
|
+
// I18N: A label for a multiplication sign (represented with an 'x').
|
|
43
|
+
// I18N: A label for a multiplication sign (represented as a dot).
|
|
44
|
+
i18n._("Multiply", {}),
|
|
45
|
+
i18n._("Natural logarithm", {}),
|
|
46
|
+
i18n._("Navigate right into the numerator of a fraction", {}),
|
|
47
|
+
i18n._("Navigate right out of a base", {}),
|
|
48
|
+
i18n._("Navigate right out of a set of parentheses", {}),
|
|
49
|
+
i18n._("Navigate right out of an exponent", {}),
|
|
50
|
+
i18n._("Navigate right out of the denominator of a fraction", {}),
|
|
51
|
+
i18n._("Navigate right out of the numerator and into the denominator", {}),
|
|
52
|
+
// I18N: A label for a minus sign.
|
|
53
|
+
i18n._("Negative", {}),
|
|
54
|
+
i18n._("Not-equals sign", {}),
|
|
55
|
+
// I18N: A label for a percent sign.
|
|
56
|
+
i18n._("Percent", {}),
|
|
57
|
+
i18n._("Pi", {}),
|
|
58
|
+
// I18N: A label for a plus sign.
|
|
59
|
+
i18n._("Plus", {}),
|
|
60
|
+
i18n._("Radical with custom root", {}),
|
|
61
|
+
i18n._("Right arrow", {}),
|
|
62
|
+
i18n._("Right parenthesis", {}),
|
|
63
|
+
i18n._("Sine", {}),
|
|
64
|
+
// I18N: A label for a button that will square (take to the second
|
|
65
|
+
i18n._("Square", {}),
|
|
66
|
+
i18n._("Square root", {}),
|
|
67
|
+
i18n._("Tangent", {}),
|
|
68
|
+
i18n._("Tap with one or two fingers to open keyboard", {}),
|
|
69
|
+
i18n._("Theta", {}),
|
|
70
|
+
i18n._("Up arrow", {}),
|
|
71
|
+
];
|
package/index.html
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
|
+
<title>Math Input</title>
|
|
8
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
|
|
9
|
+
<style>
|
|
10
|
+
body {
|
|
11
|
+
margin: 0;
|
|
12
|
+
}
|
|
13
|
+
</style>
|
|
14
|
+
</head>
|
|
15
|
+
|
|
16
|
+
<body>
|
|
17
|
+
<div id="root"></div>
|
|
18
|
+
</body>
|
|
19
|
+
|
|
20
|
+
</html>
|
package/less/echo.less
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Styles for managing the popover animations.
|
|
3
|
+
*
|
|
4
|
+
* Ideally, we'd be generating these styles with Aphrodite (along with
|
|
5
|
+
* CSSTransitionGroup's support for custom classnames), but the generated
|
|
6
|
+
* styles have issues on mobile Safari.
|
|
7
|
+
* See: https://github.com/Khan/aphrodite/issues/68.
|
|
8
|
+
*
|
|
9
|
+
* If the animation durations change, the corresponding values in
|
|
10
|
+
* echo-manager.js must change as well.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
// Variant A: Slide and fade.
|
|
14
|
+
|
|
15
|
+
.echo-slide-and-fade-enter {
|
|
16
|
+
opacity: 1 !important;
|
|
17
|
+
transform: translate3d(0, 0, 0) !important;
|
|
18
|
+
|
|
19
|
+
&.echo-slide-and-fade-enter-active {
|
|
20
|
+
opacity: 0 !important;
|
|
21
|
+
transform: translate3d(0, -33%, 0) !important;
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* TODO(charlie): These times are intentionally different, which means
|
|
25
|
+
* that the animation really "ends" after 400ms
|
|
26
|
+
* cubic-bezier(1, 0, 0.9, 1) (since the opacity goes to 0), even though
|
|
27
|
+
* the transform doesn't complete. There's probably a way to achieve the
|
|
28
|
+
* same effect by manipulating the transform's Bezier curve and total
|
|
29
|
+
* displacement.
|
|
30
|
+
*/
|
|
31
|
+
transition: transform 800ms cubic-bezier(0, 1, 0.25, 1),
|
|
32
|
+
opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Variant B: Fade, but don't slide.
|
|
37
|
+
|
|
38
|
+
.echo-fade-only-enter {
|
|
39
|
+
opacity: 1 !important;
|
|
40
|
+
|
|
41
|
+
&.echo-fade-only-enter-active {
|
|
42
|
+
opacity: 0 !important;
|
|
43
|
+
transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// Variant C: Fade for a longer duration, but again, don't slide.
|
|
48
|
+
|
|
49
|
+
.echo-long-fade-only-enter {
|
|
50
|
+
opacity: 1 !important;
|
|
51
|
+
|
|
52
|
+
&.echo-long-fade-only-enter-active {
|
|
53
|
+
opacity: 0 !important;
|
|
54
|
+
transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
|
|
55
|
+
}
|
|
56
|
+
}
|
package/less/main.less
ADDED
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
@wonderBlocksBlue: #1865f2;
|
|
2
|
+
@offBlack16: rgba(33, 36, 44, 0.16);
|
|
3
|
+
|
|
4
|
+
@cursorWidth: 2px;
|
|
5
|
+
@cursorMargin: -1px;
|
|
6
|
+
@emptyBlockBorderRadius: 1px;
|
|
7
|
+
@emptyBlockPadding: 4px;
|
|
8
|
+
|
|
9
|
+
// NOTE(charlie): The 500ms animation length perfectly matches MathQuill's own
|
|
10
|
+
// frequency for toggling the application of the .mq-blink class. If we were to
|
|
11
|
+
// change this animation length at all, we'd need to modify MathQuill as well.
|
|
12
|
+
@cursorAnimationDuration: 500ms;
|
|
13
|
+
|
|
14
|
+
.keypad-input {
|
|
15
|
+
outline: none !important;
|
|
16
|
+
|
|
17
|
+
.mq-editable-field {
|
|
18
|
+
.mq-root-block {
|
|
19
|
+
overflow-x: scroll;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.mq-cursor:not(:only-child),
|
|
23
|
+
.mq-root-block.mq-hasCursor > .mq-cursor:only-child {
|
|
24
|
+
/* HACK(charlie): Magic numbers to properly size and position the vertical
|
|
25
|
+
cursor, which is visible whenever the cursor is not alone in its parent,
|
|
26
|
+
with the exception that it's also visible when the entire input is
|
|
27
|
+
empty. */
|
|
28
|
+
height: 20px !important;
|
|
29
|
+
width: @cursorWidth;
|
|
30
|
+
margin-top: -5px !important;
|
|
31
|
+
vertical-align: middle !important;
|
|
32
|
+
border-radius: 1px !important;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.mq-cursor {
|
|
36
|
+
border-left: @cursorWidth solid @wonderBlocksBlue !important;
|
|
37
|
+
|
|
38
|
+
margin-left: @cursorMargin !important;
|
|
39
|
+
margin-right: @cursorMargin !important;
|
|
40
|
+
|
|
41
|
+
// Fade the cursor out, overriding MathQuill's default behavior.
|
|
42
|
+
opacity: 1 !important;
|
|
43
|
+
transition: opacity @cursorAnimationDuration ease-out !important;
|
|
44
|
+
visibility: visible !important;
|
|
45
|
+
|
|
46
|
+
&.mq-blink {
|
|
47
|
+
// And fade the cursor back in.
|
|
48
|
+
opacity: 0 !important;
|
|
49
|
+
transition: opacity @cursorAnimationDuration ease-in !important;
|
|
50
|
+
visibility: visible !important;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.mq-non-leaf .mq-cursor:only-child {
|
|
55
|
+
// Set the cursor to a grey rectangle, rather than a vertical line.
|
|
56
|
+
border: @cursorWidth solid !important;
|
|
57
|
+
border-color: @wonderBlocksBlue !important;
|
|
58
|
+
border-radius: @emptyBlockBorderRadius;
|
|
59
|
+
opacity: 1 !important;
|
|
60
|
+
padding: 0 @emptyBlockPadding 0 @emptyBlockPadding;
|
|
61
|
+
transition: border-color @cursorAnimationDuration ease-out !important;
|
|
62
|
+
|
|
63
|
+
&.mq-blink {
|
|
64
|
+
// And animate it between blue and gray.
|
|
65
|
+
border-color: @wonderBlocksBlue !important;
|
|
66
|
+
opacity: 1 !important;
|
|
67
|
+
transition: border-color @cursorAnimationDuration ease-in !important;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.mq-empty {
|
|
73
|
+
background: transparent !important;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// Adds empty block styling to elements with .mq-hasCursor but without a
|
|
77
|
+
// cursor element (this happens where the cursor is when the math input
|
|
78
|
+
// loses focus).
|
|
79
|
+
.mq-empty:not(.mq-root-block):after,
|
|
80
|
+
.mq-hasCursor:empty:not(.mq-root-block):after {
|
|
81
|
+
border: @cursorWidth solid @offBlack16;
|
|
82
|
+
border-radius: @emptyBlockBorderRadius;
|
|
83
|
+
// Hides the 'c' content added by MathQuill to measure the width.
|
|
84
|
+
color: transparent;
|
|
85
|
+
display: inline-block;
|
|
86
|
+
margin-left: @cursorMargin;
|
|
87
|
+
margin-right: @cursorMargin;
|
|
88
|
+
padding: 0 @emptyBlockPadding 0 @emptyBlockPadding;
|
|
89
|
+
visibility: visible !important;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.mq-selection .mq-empty:not(.mq-root-block):after {
|
|
93
|
+
border-color: white;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.mq-hasCursor:empty:not(.mq-root-block):after {
|
|
97
|
+
// Place a 'c' inside for sizing the cursor (for the case explained
|
|
98
|
+
// above); normally, MathQuill already does this for .mq-cursor.
|
|
99
|
+
content: 'c';
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.mq-math-mode .mq-selection,
|
|
103
|
+
.mq-editable-field .mq-selection {
|
|
104
|
+
.mq-non-leaf {
|
|
105
|
+
background: @wonderBlocksBlue !important;
|
|
106
|
+
border-color: white !important;
|
|
107
|
+
color: white !important;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.mq-scaled {
|
|
111
|
+
background: transparent !important;
|
|
112
|
+
border-color: transparent !important;
|
|
113
|
+
color: white !important;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.mq-selection {
|
|
118
|
+
background: @wonderBlocksBlue !important;
|
|
119
|
+
border-color: white !important;
|
|
120
|
+
color: white !important;
|
|
121
|
+
display: inline-block !important;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// The keypad sets its own color styles for KaTeX elements that are rendered in
|
|
126
|
+
// its keys, so prevent any external styling.
|
|
127
|
+
.keypad-container .katex {
|
|
128
|
+
color: inherit !important;
|
|
129
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Styles for managing the popover animations.
|
|
3
|
+
*
|
|
4
|
+
* Ideally, we'd be generating these styles with Aphrodite (along with
|
|
5
|
+
* CSSTransitionGroup's support for custom classnames), but the generated
|
|
6
|
+
* styles have issues on mobile Safari.
|
|
7
|
+
* See: https://github.com/Khan/aphrodite/issues/68.
|
|
8
|
+
*
|
|
9
|
+
* If the animation durations change, the corresponding values in
|
|
10
|
+
* popover-manager.js must change as well.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
@animationDuration: 200ms;
|
|
14
|
+
|
|
15
|
+
.popover-enter {
|
|
16
|
+
opacity: 0 !important;
|
|
17
|
+
|
|
18
|
+
&.popover-enter-active {
|
|
19
|
+
opacity: 1 !important;
|
|
20
|
+
transition: opacity @animationDuration ease-out !important;
|
|
21
|
+
}
|
|
22
|
+
}
|
package/less/tabbar.less
ADDED
package/package.json
CHANGED
|
@@ -1,91 +1,62 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
"
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
"
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
"
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
"
|
|
62
|
-
"less-loader": "^5.0.0",
|
|
63
|
-
"less-plugin-autoprefix": "^1.5.1",
|
|
64
|
-
"less-plugin-clean-css": "^1.5.1",
|
|
65
|
-
"mini-css-extract-plugin": "^0.9.0",
|
|
66
|
-
"prettier": "^1.19.1",
|
|
67
|
-
"react": "^16.8.0",
|
|
68
|
-
"react-dom": "^16.8.0",
|
|
69
|
-
"terser-webpack-plugin": "^4.2.3",
|
|
70
|
-
"webpack": "^4.32.2",
|
|
71
|
-
"webpack-cli": "^3.3.2",
|
|
72
|
-
"webpack-dev-server": "^3.4.1"
|
|
73
|
-
},
|
|
74
|
-
"peerDependencies": {
|
|
75
|
-
"@khanacademy/wonder-blocks-clickable": "^2.2.0",
|
|
76
|
-
"@khanacademy/wonder-blocks-color": "^1.1.19",
|
|
77
|
-
"@khanacademy/wonder-blocks-core": "^3.2.0",
|
|
78
|
-
"aphrodite": "^1.1.0",
|
|
79
|
-
"jquery": "^2.1.1",
|
|
80
|
-
"katex": "^0.11.1",
|
|
81
|
-
"mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992",
|
|
82
|
-
"prop-types": "15.6.1",
|
|
83
|
-
"react": "^16.8.0",
|
|
84
|
-
"react-dom": "^16.8.0",
|
|
85
|
-
"react-redux": "^7.2.6",
|
|
86
|
-
"react-router": "^5.2.1",
|
|
87
|
-
"react-router-dom": "^5.3.0",
|
|
88
|
-
"react-transition-group": "^4.4.1",
|
|
89
|
-
"redux": "^4.0.0"
|
|
90
|
-
}
|
|
2
|
+
"name": "@khanacademy/math-input",
|
|
3
|
+
"description": "Khan Academy's new expression editor for the mobile web.",
|
|
4
|
+
"author": "Khan Academy",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"version": "0.5.2",
|
|
7
|
+
"publishConfig": {
|
|
8
|
+
"access": "public"
|
|
9
|
+
},
|
|
10
|
+
"repository": {
|
|
11
|
+
"type": "git",
|
|
12
|
+
"url": "https://github.com/Khan/math-input.git"
|
|
13
|
+
},
|
|
14
|
+
"bugs": {
|
|
15
|
+
"url": "https://github.com/Khan/perseus/issues"
|
|
16
|
+
},
|
|
17
|
+
"module": "dist/es/index.js",
|
|
18
|
+
"main": "dist/index.js",
|
|
19
|
+
"source": "src/index.js",
|
|
20
|
+
"scripts": {},
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"performance-now": "^0.2.0"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"@khanacademy/wonder-blocks-clickable": "^2.2.0",
|
|
26
|
+
"@khanacademy/wonder-blocks-color": "^1.1.19",
|
|
27
|
+
"@khanacademy/wonder-blocks-core": "^3.2.0",
|
|
28
|
+
"@khanacademy/wonder-blocks-i18n": "^1.2.3",
|
|
29
|
+
"aphrodite": "^1.1.0",
|
|
30
|
+
"jquery": "^2.1.1",
|
|
31
|
+
"katex": "^0.11.1",
|
|
32
|
+
"mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992",
|
|
33
|
+
"perseus-build-settings": "^0.0.2",
|
|
34
|
+
"prop-types": "15.6.1",
|
|
35
|
+
"react": "^16.8.0",
|
|
36
|
+
"react-dom": "^16.8.0",
|
|
37
|
+
"react-redux": "^7.2.6",
|
|
38
|
+
"react-router": "^5.2.1",
|
|
39
|
+
"react-router-dom": "^5.3.0",
|
|
40
|
+
"react-transition-group": "^4.4.1",
|
|
41
|
+
"redux": "^4.0.0"
|
|
42
|
+
},
|
|
43
|
+
"peerDependencies": {
|
|
44
|
+
"@khanacademy/wonder-blocks-clickable": "^2.2.0",
|
|
45
|
+
"@khanacademy/wonder-blocks-color": "^1.1.19",
|
|
46
|
+
"@khanacademy/wonder-blocks-core": "^3.2.0",
|
|
47
|
+
"@khanacademy/wonder-blocks-i18n": "^1.2.3",
|
|
48
|
+
"aphrodite": "^1.1.0",
|
|
49
|
+
"jquery": "^2.1.1",
|
|
50
|
+
"katex": "^0.11.1",
|
|
51
|
+
"mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992",
|
|
52
|
+
"prop-types": "15.6.1",
|
|
53
|
+
"react": "^16.8.0",
|
|
54
|
+
"react-dom": "^16.8.0",
|
|
55
|
+
"react-redux": "^7.2.6",
|
|
56
|
+
"react-router": "^5.2.1",
|
|
57
|
+
"react-router-dom": "^5.3.0",
|
|
58
|
+
"react-transition-group": "^4.4.1",
|
|
59
|
+
"redux": "^4.0.0"
|
|
60
|
+
},
|
|
61
|
+
"keywords": []
|
|
91
62
|
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
// naming convention: verb + noun
|
|
2
|
+
// the noun should be one of the other properties in the object that's
|
|
3
|
+
// being dispatched
|
|
4
|
+
|
|
5
|
+
export const dismissKeypad = () => {
|
|
6
|
+
return {
|
|
7
|
+
type: "DismissKeypad",
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export const activateKeypad = () => {
|
|
12
|
+
return {
|
|
13
|
+
type: "ActivateKeypad",
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Configure the keypad with the provided configuration parameters.
|
|
19
|
+
*
|
|
20
|
+
* See: `prop-types.js#keypadConfigurationPropType`.
|
|
21
|
+
*/
|
|
22
|
+
export const configureKeypad = (configuration) => {
|
|
23
|
+
return {
|
|
24
|
+
type: "ConfigureKeypad",
|
|
25
|
+
configuration,
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export const setPageSize = (pageWidthPx, pageHeightPx) => {
|
|
30
|
+
return {
|
|
31
|
+
type: "SetPageSize",
|
|
32
|
+
pageWidthPx,
|
|
33
|
+
pageHeightPx,
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export const removeEcho = (animationId) => {
|
|
38
|
+
return {
|
|
39
|
+
type: "RemoveEcho",
|
|
40
|
+
animationId,
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
// Input-related actions.
|
|
45
|
+
export const setKeyHandler = (keyHandler) => {
|
|
46
|
+
return {
|
|
47
|
+
type: "SetKeyHandler",
|
|
48
|
+
keyHandler,
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
export const setCursor = (cursor) => {
|
|
53
|
+
return {
|
|
54
|
+
type: "SetCursor",
|
|
55
|
+
cursor,
|
|
56
|
+
};
|
|
57
|
+
};
|