src/extensions/default/InlineTimingFunctionEditor/StepEditor.js
function StepEditor($parent, stepMatch, callback) {
        // Create the DOM structure, filling in localized strings via Mustache
        this.$element = $(Mustache.render(StepEditorTemplate, Strings));
        $parent.append(this.$element);

        this._callback = callback;

        // current step function params
        this._stepParams = this._getStepParams(stepMatch);

        this.hint = {};
        this.hint.elem = $(".hint", this.$element);
        // If function was auto-corrected, then originalString holds the original function,
        // and an informational message needs to be shown
        if (stepMatch.originalString) {
            TimingFunctionUtils.showHideHint(this.hint, true, stepMatch.originalString, "steps(" + this._stepParams.count.toString() + ", " + this._stepParams.timing + ")");
        } else {
            TimingFunctionUtils.showHideHint(this.hint, false);
        }

        this.canvas = this.$element.find(".steps")[0];

        this.canvas.stepEditor = this;

        // Padding (3rd param)is scaled, so 0.1 translates to 15px
        // Note that this is rendered inside canvas CSS "content"
        // (i.e. this does not map to CSS padding)
        this.stepCanvas = new StepCanvas(this.canvas, null, [0.1]);

        // redraw canvas
        this._updateCanvas();

        $(this.canvas).on("keydown", _canvasKeyDown);
    }
function StepEditor($parent, stepMatch, callback) {
        // Create the DOM structure, filling in localized strings via Mustache
        this.$element = $(Mustache.render(StepEditorTemplate, Strings));
        $parent.append(this.$element);

        this._callback = callback;

        // current step function params
        this._stepParams = this._getStepParams(stepMatch);

        this.hint = {};
        this.hint.elem = $(".hint", this.$element);
        // If function was auto-corrected, then originalString holds the original function,
        // and an informational message needs to be shown
        if (stepMatch.originalString) {
            TimingFunctionUtils.showHideHint(this.hint, true, stepMatch.originalString, "steps(" + this._stepParams.count.toString() + ", " + this._stepParams.timing + ")");
        } else {
            TimingFunctionUtils.showHideHint(this.hint, false);
        }

        this.canvas = this.$element.find(".steps")[0];

        this.canvas.stepEditor = this;

        // Padding (3rd param)is scaled, so 0.1 translates to 15px
        // Note that this is rendered inside canvas CSS "content"
        // (i.e. this does not map to CSS padding)
        this.stepCanvas = new StepCanvas(this.canvas, null, [0.1]);

        // redraw canvas
        this._updateCanvas();

        $(this.canvas).on("keydown", _canvasKeyDown);
    }
function StepEditor ( $parent , stepMatch , callback ) { // Create the DOM structure, filling in localized strings via Mustache this . $element = $ ( Mustache . render ( StepEditorTemplate , Strings ) ) ; $parent . append ( this . $element ) ; this . _callback = callback ; // current step function params this . _stepParams = this . _getStepParams ( stepMatch ) ; this . hint = { } ; this . hint . elem = $ ( ".hint" , this . $element ) ; // If function was auto-corrected, then originalString holds the original function, // and an informational message needs to be shown if ( stepMatch . originalString ) { TimingFunctionUtils . showHideHint ( this . hint , true , stepMatch . originalString , "steps(" + this . _stepParams . count . toString ( ) + ", " + this . _stepParams . timing + ")" ) ; } else { TimingFunctionUtils . showHideHint ( this . hint , false ) ; } this . canvas = this . $element . find ( ".steps" ) [ 0 ] ; this . canvas . stepEditor = this ; // Padding (3rd param)is scaled, so 0.1 translates to 15px // Note that this is rendered inside canvas CSS "content" // (i.e. this does not map to CSS padding) this . stepCanvas = new StepCanvas ( this . canvas , null , [ 0.1 ] ) ; // redraw canvas this . _updateCanvas ( ) ; $ ( this . canvas ) . on ( "keydown" , _canvasKeyDown ) ; }
Constructor for StepEditor Object. This control may be used standalone
or within an InlineTimingFunctionEditor inline widget.

@param {!jQuery} $parent  DOM node into which to append the root of the step editor UI
@param {!RegExpMatch} stepMatch  RegExp match object of initially selected step function
@param {!function(string)} callback  Called whenever selected step function changes
Constructor for StepEditor Object . This control may be used standalone or within an InlineTimingFunctionEditor inline widget .