tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

FontAxis.js (2027B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 "use strict";
      6 
      7 const {
      8  createFactory,
      9  PureComponent,
     10 } = require("resource://devtools/client/shared/vendor/react.mjs");
     11 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     12 
     13 const FontPropertyValue = createFactory(
     14  require("resource://devtools/client/inspector/fonts/components/FontPropertyValue.js")
     15 );
     16 
     17 const Types = require("resource://devtools/client/inspector/fonts/types.js");
     18 
     19 class FontAxis extends PureComponent {
     20  static get propTypes() {
     21    return {
     22      axis: PropTypes.shape(Types.fontVariationAxis),
     23      disabled: PropTypes.bool.isRequired,
     24      onChange: PropTypes.func.isRequired,
     25      value: PropTypes.number.isRequired,
     26    };
     27  }
     28 
     29  /**
     30   * Naive implementation to get increment step for variable font axis that ensures
     31   * fine grained control based on range of values between min and max.
     32   *
     33   * @param  {number} min
     34   *         Minumum value for range.
     35   * @param  {number} max
     36   *         Maximum value for range.
     37   * @return {number}
     38   *         Step value used in range input for font axis.
     39   */
     40  getAxisStep(min, max) {
     41    let step = 1;
     42    const delta = parseInt(max, 10) - parseInt(min, 10);
     43 
     44    if (delta <= 1) {
     45      step = 0.001;
     46    } else if (delta <= 10) {
     47      step = 0.01;
     48    } else if (delta <= 100) {
     49      step = 0.1;
     50    }
     51 
     52    return step;
     53  }
     54 
     55  render() {
     56    const { axis, value, onChange } = this.props;
     57 
     58    return FontPropertyValue({
     59      className: "font-control-axis",
     60      disabled: this.props.disabled,
     61      label: axis.name,
     62      min: axis.minValue,
     63      minLabel: true,
     64      max: axis.maxValue,
     65      maxLabel: true,
     66      name: axis.tag,
     67      nameLabel: true,
     68      onChange,
     69      step: this.getAxisStep(axis.minValue, axis.maxValue),
     70      value,
     71    });
     72  }
     73 }
     74 
     75 module.exports = FontAxis;