@khanacademy/perseus 2.0.1 → 2.1.0

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/dist/index.css CHANGED
@@ -16,8 +16,6 @@ div.subhint {
16
16
  border: 1px solid #aaaaaa;
17
17
  background: #f9f9f9;
18
18
  display: none;
19
- -moz-border-radius: 4px;
20
- -webkit-border-radius: 4px;
21
19
  border-radius: 4px;
22
20
  margin-left: 20px;
23
21
  margin-right: 20px;
@@ -39,8 +37,6 @@ div.definition {
39
37
  border: 1px solid #aaaaaa;
40
38
  background: #f9f9f9;
41
39
  display: none;
42
- -moz-border-radius: 4px;
43
- -webkit-border-radius: 4px;
44
40
  border-radius: 4px;
45
41
  margin-left: 20px;
46
42
  margin-right: 20px;
@@ -152,9 +148,6 @@ body.debug .graphie { outline: 1px dashed #fdd; }
152
148
  padding-bottom: 40px;
153
149
  }
154
150
  #scratchpad div {
155
- -moz-box-sizing: border-box;
156
- -ms-box-sizing: border-box;
157
- -webkit-box-sizing: border-box;
158
151
  box-sizing: border-box;
159
152
  border: 1px solid #ccc;
160
153
  height: 100%;
@@ -232,7 +225,6 @@ body.debug .graphie { outline: 1px dashed #fdd; }
232
225
 
233
226
  #answer_area .calculator .history input {
234
227
  box-sizing: border-box;
235
- -moz-box-sizing: border-box;
236
228
  display: block;
237
229
  font: inherit;
238
230
  margin: 5px 3px 3px;
@@ -362,8 +354,6 @@ body.debug .graphie { outline: 1px dashed #fdd; }
362
354
  list-style: none;
363
355
  border: 1px solid rgba(0, 0, 0, 0.3);
364
356
  padding-left: 10px;
365
- -moz-border-radius: 5px;
366
- -webkit-border-radius: 5px;
367
357
  border-radius: 5px;
368
358
  line-height: 22px;
369
359
  margin-bottom: 3px;
@@ -407,8 +397,6 @@ var, div.graphie {
407
397
  padding: 2px 5px;
408
398
  border: 1px solid #999;
409
399
  border-radius: 4px;
410
- -webkit-border-radius: 4px;
411
- -moz-border-radius: 4px;
412
400
  float: left;
413
401
  cursor: pointer;
414
402
  color: white;
@@ -606,7 +594,7 @@ html.exercise-browser {
606
594
  top: 12px;
607
595
  padding: 0px;
608
596
  border: none;
609
- -webkit-box-shadow: none;
597
+ box-shadow: none;
610
598
  overflow: visible;
611
599
  }
612
600
 
@@ -729,9 +717,6 @@ html.exercise-browser {
729
717
 
730
718
  #timelinecontainer .simple-button {
731
719
  -webkit-user-select: none;
732
- -khtml-user-select: none;
733
- -moz-user-select: none;
734
- -o-user-select: none;
735
720
  user-select: none;
736
721
  white-space: nowrap;
737
722
  }
@@ -754,8 +739,6 @@ html.exercise-browser {
754
739
  width: 200px;
755
740
  height: 100px;
756
741
  border: 1px solid #aaa;
757
- -webkit-box-shadow: 0 0 3px #ccc;
758
- -moz-box-shadow: 0 0 3px #ccc;
759
742
  box-shadow: 0 0 3px #ccc;
760
743
  margin-left: 14px; /* to line up with other titles */
761
744
  margin-bottom: 8px;
@@ -800,8 +783,6 @@ html.exercise-browser {
800
783
  z-index: 2;
801
784
 
802
785
  box-shadow: 0 1px 2px #ccc;
803
- -moz-box-shadow: 0 1px 2px #ccc;
804
- -webkit-box-shadow: 0 1px 2px #ccc;
805
786
  }
806
787
 
807
788
  .sortable > ul {
@@ -813,8 +794,6 @@ html.exercise-browser {
813
794
  border: 1px solid #b9b9b9;
814
795
  border-bottom-color: #939393;
815
796
  border-radius: 4px;
816
- -moz-border-radius: 4px;
817
- -webkit-border-radius: 4px;
818
797
  cursor: pointer;
819
798
  margin-right: 4px;
820
799
  min-width: 65px;
@@ -823,9 +802,6 @@ html.exercise-browser {
823
802
  font-size: 1.2em;
824
803
  float: left;
825
804
  -webkit-user-select: none;
826
- -khtml-user-select: none;
827
- -moz-user-select: none;
828
- -o-user-select: none;
829
805
  user-select: none;
830
806
  }
831
807
 
@@ -844,10 +820,6 @@ html.exercise-browser {
844
820
  .sortable > ul > li:hover {
845
821
  border-color: #ffa500;
846
822
  box-shadow: 0 0 4px #c56f00;
847
- -moz-box-shadow: 0 0 4px #c56f00;
848
- -ms-box-shadow: 0 0 4px #c56f00;
849
- -o-box-shadow: 0 0 4px #c56f00;
850
- -webkit-box-shadow: 0 0 4px #c56f00;
851
823
  }
852
824
 
853
825
  .sortable > ul > li:active, .sortable > ul > li.dragging {
@@ -861,8 +833,6 @@ html.exercise-browser {
861
833
  border: 0;
862
834
  border-bottom: 0;
863
835
  box-shadow: 0 0 0;
864
- -moz-box-shadow: 0 0 0;
865
- -webkit-box-shadow: 0 0 0;
866
836
  padding-right: 0;
867
837
  }
868
838
 
@@ -895,8 +865,6 @@ html.exercise-browser {
895
865
  .qhint {
896
866
  border: 1px solid #aaaaaa;
897
867
  background: #f9f9f9;
898
- -moz-border-radius: 4px;
899
- -webkit-border-radius: 4px;
900
868
  border-radius: 4px;
901
869
  margin-right: 20px;
902
870
  margin-bottom: 20px;
@@ -2183,8 +2151,6 @@ img.zoom-img {
2183
2151
  cursor: -moz-zoom-out;
2184
2152
  }
2185
2153
  .zoom-transition {
2186
- -webkit-transition: transform 300ms ease;
2187
- -ms-transition: transform 300ms ease;
2188
2154
  transition: transform 300ms ease;
2189
2155
  }
2190
2156
  .zoom-overlay {
@@ -2214,8 +2180,6 @@ img.zoom-img {
2214
2180
  bottom: 0;
2215
2181
  background: white;
2216
2182
  opacity: 0;
2217
- -webkit-transition: opacity 300ms;
2218
- -ms-transition: opacity 300ms;
2219
2183
  transition: opacity 300ms;
2220
2184
  }
2221
2185
  .zoom-overlay-open > .zoom-backdrop {
@@ -2228,10 +2192,7 @@ img.zoom-img {
2228
2192
  margin-top: 48px;
2229
2193
  }
2230
2194
  .no-select {
2231
- -moz-user-select: -moz-none;
2232
- -khtml-user-select: none;
2233
2195
  -webkit-user-select: none;
2234
- -o-user-select: none;
2235
2196
  user-select: none;
2236
2197
  }
2237
2198
  .blank-background {
@@ -2252,10 +2213,7 @@ img.zoom-img {
2252
2213
  background: #ffffff;
2253
2214
  }
2254
2215
  .graphie {
2255
- -moz-user-select: -moz-none;
2256
- -khtml-user-select: none;
2257
2216
  -webkit-user-select: none;
2258
- -o-user-select: none;
2259
2217
  user-select: none;
2260
2218
  }
2261
2219
  .perseus-interactive,
@@ -2645,8 +2603,6 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
2645
2603
  overflow-y: hidden;
2646
2604
  }
2647
2605
  .perseus-widget-expression-old > .output > .placeholder > .error {
2648
- -webkit-border-radius: 10px;
2649
- -moz-border-radius: 10px;
2650
2606
  border-radius: 10px;
2651
2607
  background: #f7f7f7;
2652
2608
  border: 1px solid #ddd;
@@ -2941,6 +2897,7 @@ body.mobile .perseus-matrix .math-output {
2941
2897
  padding: 0 10px;
2942
2898
  cursor: pointer;
2943
2899
  position: relative;
2900
+ -webkit-user-select: none;
2944
2901
  user-select: none;
2945
2902
  width: auto;
2946
2903
  display: flex;
@@ -2988,7 +2945,6 @@ body.mobile .perseus-matrix .math-output {
2988
2945
  .orderer.layout-vertical .bank,
2989
2946
  .orderer.layout-vertical .draggable-box {
2990
2947
  box-sizing: border-box;
2991
- -moz-box-sizing: border-box;
2992
2948
  float: left;
2993
2949
  max-width: 50%;
2994
2950
  }
@@ -3095,11 +3051,7 @@ body.sat-section .perseus-widget-passage {
3095
3051
  position: absolute;
3096
3052
  }
3097
3053
  .perseus-widget-plotter span.rotate {
3098
- -moz-transform: rotate(-90deg);
3099
- -o-transform: rotate(-90deg);
3100
- -webkit-transform: rotate(-90deg);
3101
3054
  transform: rotate(-90deg);
3102
- -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
3103
3055
  }
3104
3056
  .set-from-scale-box {
3105
3057
  border: 2px solid #EEEEEE;
@@ -3192,8 +3144,6 @@ body.sat-section .perseus-widget-passage {
3192
3144
  border: 1px solid #ccc;
3193
3145
  border-bottom: 1px solid #aaa;
3194
3146
  box-shadow: 0 1px 2px #ccc;
3195
- -moz-box-shadow: 0 1px 2px #ccc;
3196
- -webkit-box-shadow: 0 1px 2px #ccc;
3197
3147
  }
3198
3148
  .draggy-boxy-thing .cards-area {
3199
3149
  position: relative;
@@ -3206,12 +3156,6 @@ body.sat-section .perseus-widget-passage {
3206
3156
  border: 1px solid #b9b9b9;
3207
3157
  border-bottom-color: #939393;
3208
3158
  border-radius: 4px;
3209
- -moz-border-radius: 4px;
3210
- -webkit-border-radius: 4px;
3211
- -webkit-user-select: none;
3212
- -khtml-user-select: none;
3213
- -moz-user-select: none;
3214
- -o-user-select: none;
3215
3159
  cursor: pointer;
3216
3160
  touch-action: none;
3217
3161
  }
@@ -3242,8 +3186,6 @@ body.sat-section .perseus-widget-passage {
3242
3186
  border: 1px solid #b9b9b9;
3243
3187
  border-bottom-color: #939393;
3244
3188
  border-radius: 4px;
3245
- -moz-border-radius: 4px;
3246
- -webkit-border-radius: 4px;
3247
3189
  height: 100%;
3248
3190
  width: 100%;
3249
3191
  z-index: -1;
@@ -3254,10 +3196,6 @@ body.sat-section .perseus-widget-passage {
3254
3196
  .draggy-boxy-thing .card:hover {
3255
3197
  border-color: #ffa500;
3256
3198
  box-shadow: 0 0 4px #c78100;
3257
- -moz-box-shadow: 0 0 4px #c78100;
3258
- -ms-box-shadow: 0 0 4px #c78100;
3259
- -o-box-shadow: 0 0 4px #c78100;
3260
- -webkit-box-shadow: 0 0 4px #c78100;
3261
3199
  }
3262
3200
  .perseus-sortable div.paragraph {
3263
3201
  margin: 0;
@@ -3359,8 +3297,6 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
3359
3297
  transition: all 0.15s;
3360
3298
  }
3361
3299
  .perseus-widget-container.widget-highlight {
3362
- -webkit-box-shadow: 0px 0px 0px 2px #ffa500;
3363
- -moz-box-shadow: 0px 0px 0px 2px #ffa500;
3364
3300
  box-shadow: 0px 0px 0px 2px #ffa500;
3365
3301
  transition: all 0.15s;
3366
3302
  }
package/dist/index.js CHANGED
@@ -10434,7 +10434,6 @@ const WrappedEllipse = function (graphie, center, radii, options) {
10434
10434
  if (options.shadow) {
10435
10435
  const filter = "drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5))";
10436
10436
  const wrapper = this.wrapper;
10437
- wrapper.style.webkitFilter = filter;
10438
10437
  wrapper.style.filter = filter;
10439
10438
 
10440
10439
  this.moveTo = function (point) {
@@ -14883,7 +14882,6 @@ ___default["default"].extend(MovablePoint$5.prototype, {
14883
14882
 
14884
14883
  if (state.shadow) {
14885
14884
  const filter = "none";
14886
- svgElem.style.webkitFilter = filter;
14887
14885
  svgElem.style.filter = filter;
14888
14886
  }
14889
14887
 
@@ -14903,7 +14901,6 @@ ___default["default"].extend(MovablePoint$5.prototype, {
14903
14901
  if (state.shadow) {
14904
14902
  const content = svgElem.getElementsByClassName("tooltip-content")[0];
14905
14903
  const filter = "drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5))";
14906
- content.style.webkitFilter = filter;
14907
14904
  content.style.filter = filter;
14908
14905
  }
14909
14906
  }
@@ -14947,7 +14944,6 @@ ___default["default"].extend(MovablePoint$5.prototype, {
14947
14944
 
14948
14945
  if (state.shadow) {
14949
14946
  const filter = "drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5))";
14950
- svgElem.style.webkitFilter = filter;
14951
14947
  svgElem.style.filter = filter;
14952
14948
  }
14953
14949
 
@@ -14962,7 +14958,6 @@ ___default["default"].extend(MovablePoint$5.prototype, {
14962
14958
  // tooltips.
14963
14959
  showTrashTooltip();
14964
14960
  const content = svgElem.getElementsByClassName("tooltip-content")[0];
14965
- content.style.webkitFilter = "none";
14966
14961
  content.style.filter = "none";
14967
14962
 
14968
14963
  this._tooltip.firstChild.addEventListener("touchstart", e => {
@@ -17491,14 +17486,8 @@ class Zoomable extends React__namespace.Component {
17491
17486
 
17492
17487
  const transitionStyle = visible ? {
17493
17488
  transitionProperty: property,
17494
- WebkitTransitionProperty: property,
17495
- msTransitionProperty: property,
17496
17489
  transitionDuration: "0.3s",
17497
- WebkitTransitionDuration: "0.3s",
17498
- msTransitionDuration: "0.3s",
17499
- transitionTimingFunction: "ease-out",
17500
- WebkitTransitionTimingfunction: "ease-out",
17501
- msTransitionTmingFunction: "ease-out"
17490
+ transitionTimingFunction: "ease-out"
17502
17491
  } : {}; // Do a fancy little slide as we fade the contents in the first time.
17503
17492
 
17504
17493
  const translateOffset = visible ? "" : " translate(0, 8px)";
@@ -17509,11 +17498,7 @@ class Zoomable extends React__namespace.Component {
17509
17498
  width: "100%",
17510
17499
  height: zoomed ? expandedHeight : compactHeight,
17511
17500
  transform: transform,
17512
- WebkitTransform: transform,
17513
- msTransform: transform,
17514
17501
  transformOrigin: "0 0",
17515
- WebkitTransformOrigin: "0 0",
17516
- msTransformOrigin: "0 0",
17517
17502
  opacity: visible ? 1 : 0,
17518
17503
  WebkitTapHighlightColor: "transparent",
17519
17504
  ...transitionStyle
@@ -20882,7 +20867,7 @@ const buttonSets = {
20882
20867
  }, i18n__namespace.doNotTranslate("\\geq")), "\\geq"];
20883
20868
  }]
20884
20869
  };
20885
- const buttonSetsType = PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(___default["default"](buttonSets).keys()));
20870
+ const buttonSetsPropType = PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(___default["default"](buttonSets).keys()));
20886
20871
 
20887
20872
  class TexButtons extends React__namespace.Component {
20888
20873
  render() {
@@ -20918,18 +20903,11 @@ class TexButtons extends React__namespace.Component {
20918
20903
 
20919
20904
  }
20920
20905
 
20921
- _defineProperty(TexButtons, "propTypes", {
20922
- sets: buttonSetsType.isRequired,
20923
- onInsert: PropTypes__default["default"].func.isRequired,
20924
- className: PropTypes__default["default"].string
20925
- });
20926
-
20927
20906
  _defineProperty(TexButtons, "buttonSets", buttonSets);
20928
20907
 
20929
- _defineProperty(TexButtons, "buttonSetsType", buttonSetsType);
20930
-
20931
- const PT = PropTypes__default["default"]; // A WYSIWYG math input that calls `onChange(LaTeX-string)`
20908
+ _defineProperty(TexButtons, "buttonSetsType", buttonSetsPropType);
20932
20909
 
20910
+ // A WYSIWYG math input that calls `onChange(LaTeX-string)`
20933
20911
  class MathInput extends React__namespace.Component {
20934
20912
  constructor() {
20935
20913
  super(...arguments);
@@ -21041,63 +21019,6 @@ class MathInput extends React__namespace.Component {
21041
21019
  });
21042
21020
  }
21043
21021
 
21044
- render() {
21045
- let className = classNames__default["default"]({
21046
- "perseus-math-input": true,
21047
- // mathquill usually adds these itself but react removes them when
21048
- // updating the component.
21049
- "mq-editable-field": true,
21050
- "mq-math-mode": true
21051
- });
21052
-
21053
- if (this.props.className) {
21054
- className = className + " " + this.props.className;
21055
- }
21056
-
21057
- let buttons = null;
21058
-
21059
- if (this._shouldShowButtons()) {
21060
- buttons = /*#__PURE__*/React__namespace.createElement(TexButtons, {
21061
- sets: this.props.buttonSets,
21062
- className: "math-input-buttons absolute",
21063
- convertDotToTimes: this.props.convertDotToTimes,
21064
- onInsert: this.insert
21065
- });
21066
- }
21067
-
21068
- return /*#__PURE__*/React__namespace.createElement("div", {
21069
- style: {
21070
- display: "inline-block"
21071
- }
21072
- }, /*#__PURE__*/React__namespace.createElement("div", {
21073
- style: {
21074
- display: "inline-block"
21075
- }
21076
- }, /*#__PURE__*/React__namespace.createElement("span", {
21077
- className: className // eslint-disable-next-line react/no-string-refs
21078
- ,
21079
- ref: "mathinput",
21080
- "aria-label": this.props.labelText,
21081
- onFocus: this.handleFocus,
21082
- onBlur: this.handleBlur
21083
- })), /*#__PURE__*/React__namespace.createElement("div", {
21084
- style: {
21085
- position: "relative"
21086
- },
21087
- onBlur: this.handleBlur
21088
- }, buttons));
21089
- } // handlers:
21090
- // keep track of two related bits of state:
21091
- // * this.state.focused - whether the buttons are currently shown
21092
- // * this.mouseDown - whether a mouse click is active that started in the
21093
- // buttons div
21094
-
21095
-
21096
- componentWillUnmount() {
21097
- window.removeEventListener("mousedown", this.handleMouseDown);
21098
- window.removeEventListener("mouseup", this.handleMouseUp);
21099
- }
21100
-
21101
21022
  componentDidMount() {
21102
21023
  window.addEventListener("mousedown", this.handleMouseDown);
21103
21024
  window.addEventListener("mouseup", this.handleMouseUp);
@@ -21186,18 +21107,64 @@ class MathInput extends React__namespace.Component {
21186
21107
  initialized = true;
21187
21108
  }
21188
21109
 
21189
- }
21110
+ componentWillUnmount() {
21111
+ window.removeEventListener("mousedown", this.handleMouseDown);
21112
+ window.removeEventListener("mouseup", this.handleMouseUp);
21113
+ } // handlers:
21114
+ // keep track of two related bits of state:
21115
+ // * this.state.focused - whether the buttons are currently shown
21116
+ // * this.mouseDown - whether a mouse click is active that started in the
21117
+ // buttons div
21190
21118
 
21191
- _defineProperty(MathInput, "propTypes", {
21192
- value: PT.string,
21193
- onChange: PT.func.isRequired,
21194
- convertDotToTimes: PT.bool,
21195
- buttonsVisible: PT.oneOf(["always", "never", "focused"]),
21196
- buttonSets: TexButtons.buttonSetsType.isRequired,
21197
- labelText: PropTypes__default["default"].string,
21198
- onFocus: PT.func,
21199
- onBlur: PT.func
21200
- });
21119
+
21120
+ render() {
21121
+ let className = classNames__default["default"]({
21122
+ "perseus-math-input": true,
21123
+ // mathquill usually adds these itself but react removes them when
21124
+ // updating the component.
21125
+ "mq-editable-field": true,
21126
+ "mq-math-mode": true
21127
+ });
21128
+
21129
+ if (this.props.className) {
21130
+ className = className + " " + this.props.className;
21131
+ }
21132
+
21133
+ let buttons = null;
21134
+
21135
+ if (this._shouldShowButtons()) {
21136
+ buttons = /*#__PURE__*/React__namespace.createElement(TexButtons, {
21137
+ sets: this.props.buttonSets,
21138
+ className: "math-input-buttons absolute",
21139
+ convertDotToTimes: this.props.convertDotToTimes,
21140
+ onInsert: this.insert
21141
+ });
21142
+ }
21143
+
21144
+ return /*#__PURE__*/React__namespace.createElement("div", {
21145
+ style: {
21146
+ display: "inline-block"
21147
+ }
21148
+ }, /*#__PURE__*/React__namespace.createElement("div", {
21149
+ style: {
21150
+ display: "inline-block"
21151
+ }
21152
+ }, /*#__PURE__*/React__namespace.createElement("span", {
21153
+ className: className // eslint-disable-next-line react/no-string-refs
21154
+ ,
21155
+ ref: "mathinput",
21156
+ "aria-label": this.props.labelText,
21157
+ onFocus: this.handleFocus,
21158
+ onBlur: this.handleBlur
21159
+ })), /*#__PURE__*/React__namespace.createElement("div", {
21160
+ style: {
21161
+ position: "relative"
21162
+ },
21163
+ onBlur: this.handleBlur
21164
+ }, buttons));
21165
+ }
21166
+
21167
+ }
21201
21168
 
21202
21169
  _defineProperty(MathInput, "defaultProps", {
21203
21170
  value: "",
@@ -21891,8 +21858,6 @@ const Tooltip = createReactClass__default["default"]({
21891
21858
  top: settings["top"],
21892
21859
  left: settings.tooltipLeft,
21893
21860
  border: "1px solid " + this.props.borderColor,
21894
- WebkitBoxShadow: "0 1px 3px " + this.props.borderColor,
21895
- MozBoxShadow: "0 1px 3px " + this.props.borderColor,
21896
21861
  boxShadow: "0 1px 3px " + this.props.borderColor,
21897
21862
  zIndex: zIndex - 1
21898
21863
  }
@@ -31984,9 +31949,7 @@ const defaultInstructionsStyle = {
31984
31949
  backgroundColor: "white",
31985
31950
  position: "absolute",
31986
31951
  zIndex: 1,
31987
- transition: "opacity .25s ease-in-out",
31988
- "-moz-transition": "opacity .25s ease-in-out",
31989
- "-webkit-transition": "opacity .25s ease-in-out"
31952
+ transition: "opacity .25s ease-in-out"
31990
31953
  };
31991
31954
  const instructionsTextStyle = {
31992
31955
  position: "relative",
@@ -43101,8 +43064,6 @@ class Simulator extends React__namespace.Component {
43101
43064
  const highlight = "0px 0px 0px 2px rgba(255, 165, 0, 1)";
43102
43065
 
43103
43066
  const highlightStyle = ___default["default"].extend({}, inputStyle, {
43104
- WebkitBoxShadow: highlight,
43105
- MozBoxShadow: highlight,
43106
43067
  boxShadow: highlight,
43107
43068
  transition: "all 0.15s"
43108
43069
  });