src/third_party/specimenTools/lib/widgets/TypeTester.js
/**
     * TypeTester provides interfaces that help to test the current webfont.
     * See the CurrentWebFont widget.
     *
     * The interfaces provided are:
     *
     * - Dynamic slider inputs for controlling linear css attributes of the
     *      TypeTester
     *      Use the CSS-class configured at `sliderControlsClass` on a host
     *      element for the range input element.
     *      Provide a data-target-property on the input to specify the css
     *      attribute it should affect; Further, the following data attributes
     *      can be set on the container for customizing the slider, each including
     *      the css attribute the slider controls, e.g. to customize a slider
     *      for font-size:
     *              `data-min-font-size`
     *              `data-max-font-size`
     *              `data-value-font-size`
     *              `data-unit-font-size`
     *              `data-step-font-size`
     * - Dynamic element displaying the current font size:
     *      Use the CSS-class configured at `tester__label` as well as a
     *      data-target-property with the value of the css value this label
     *      corresponds to. The `element.textContent` of elements matching this
     *      class will be set to the current value of the TypeTester widget.
     * - Switches to deactivate OpenType-Features that are activated by default.
     *      Use the CSS-class configured at `defaultFeaturesControlsClass`
     *      to have a de-/activating button appended to the host element
     *      for each OpenType Feature that is active by default.
     *      Initial button state is active.
     * - Switches to activate OpenType-Features that are optional.
     *      Use the CSS-class configured at `optionalFeaturesControlsClass`
     *      to have a de-/activating button appended to the host element
     *      for each OpenType Feature that is optional.
     *      Initial button state is inactive.
     * - An element that receives the settings made by the elements described above.
     *      Use the CSS-class configured at `contentContainerClass` to have
     *      the element.style set to the fontSize and fontFeatureSettings
     *      made by the control elements of this widget.
     *
     *      To use the current font on this element, see the CurrentWebFont
     *      widget.
     *      To enable the users typing text themselves use either the DOM
     *      attribute `contenteditable=True` or use a `<textarea>` element.
     *
     */
TypeTester provides interfaces that help to test the current webfont.
See the CurrentWebFont widget.

The interfaces provided are.

- Dynamic slider inputs for controlling linear css attributes of the
TypeTester
Use the CSS-class configured at `sliderControlsClass` on a host
element for the range input element.
Provide a data-target-property on the input to specify the css
attribute it should affect; Further, the following data attributes
can be set on the container for customizing the slider, each including
the css attribute the slider controls, e.g.

To use the current font on this element, see the CurrentWebFont
widget.
To enable the users typing text themselves use either the DOM
attribute `contenteditable=True` or use a `` element.
TypeTester provides interfaces that help to test the current webfont . See the CurrentWebFont widget . The interfaces provided are . - Dynamic slider inputs for controlling linear css attributes of the TypeTester Use the CSS - class configured at ` sliderControlsClass ` on a host element for the range input element . Provide a data - target - property on the input to specify the css attribute it should affect ; Further the following data attributes can be set on the container for customizing the slider each including the css attribute the slider controls e . g . To use the current font on this element see the CurrentWebFont widget . To enable the users typing text themselves use either the DOM attribute ` contenteditable = True ` or use a ` ` element .
function TypeTester(container, pubSub, fontsData, options) {
        Parent.call(this, options);
        this._container = container;
        this._pubSub = pubSub;
        this._fontsData = fontsData;
        this._pubSub.subscribe('activateFont', this._onActivateFont.bind(this));
        this._contentContainers = this._getByClass(this._options.contentContainerClass);
        this._controls = {
            features: {
                containers: Object.create(null)
              , active: Object.create(null)
              , buttons: null
              , tags: null
            }
        };
        this._activeFeatures = Object.create(null);
        this._values = Object.create(null);
        this.__sliderInputHandler = this._sliderInputHandler.bind(this);
        this._initControls();
        this._applyValues();
    }
function TypeTester ( container , pubSub , fontsData , options ) { Parent . call ( this , options ) ; this . _container = container ; this . _pubSub = pubSub ; this . _fontsData = fontsData ; this . _pubSub . subscribe ( 'activateFont' , this . _onActivateFont . bind ( this ) ) ; this . _contentContainers = this . _getByClass ( this . _options . contentContainerClass ) ; this . _controls = { features : { containers : Object . create ( null ) , active : Object . create ( null ) , buttons : null , tags : null } } ; this . _activeFeatures = Object . create ( null ) ; this . _values = Object . create ( null ) ; this . __sliderInputHandler = this . _sliderInputHandler . bind ( this ) ; this . _initControls ( ) ; this . _applyValues ( ) ; }
TypeTester provides interfaces that help to test the current webfont.
TypeTester provides interfaces that help to test the current webfont .