/** * 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 */ 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); }
BezierCurveEditor.prototype.handleExternalUpdate = function (bezierCurve) { this._cubicBezierCoords = this._getCubicBezierCoords(bezierCurve); this._updateCanvas(); // If function was auto-corrected, then originalString holds the original function, // and an informational message needs to be shown if (bezierCurve.originalString) { TimingFunctionUtils.showHideHint(this.hint, true, bezierCurve.originalString, "cubic-bezier(" + this._cubicBezierCoords.join(", ") + ")"); } else { TimingFunctionUtils.showHideHint(this.hint, false); } };
StepEditor.prototype.handleExternalUpdate = function (stepMatch) { this._stepParams = this._getStepParams(stepMatch); this._updateCanvas(); // 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); } };
StepEditor.prototype._commitTimingFunction = function () { var stepFuncVal = "steps(" + this._stepParams.count.toString() + ", " + this._stepParams.timing + ")"; this._callback(stepFuncVal); TimingFunctionUtils.showHideHint(this.hint, false); };
/** * Constructor for BezierCurveEditor 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 bezier curve editor UI * @param {!RegExpMatch} bezierCurve RegExp match object of initially selected bezierCurve * @param {!function(string)} callback Called whenever selected bezierCurve changes */ function BezierCurveEditor($parent, bezierCurve, callback) { // Create the DOM structure, filling in localized strings via Mustache this.$element = $(Mustache.render(BezierCurveEditorTemplate, Strings)); $parent.append(this.$element); this._callback = callback; this.dragElement = null; // current cubic-bezier() function params this._cubicBezierCoords = this._getCubicBezierCoords(bezierCurve); 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 (bezierCurve.originalString) { TimingFunctionUtils.showHideHint(this.hint, true, bezierCurve.originalString, "cubic-bezier(" + this._cubicBezierCoords.join(", ") + ")"); } else { TimingFunctionUtils.showHideHint(this.hint, false); } this.P1 = this.$element.find(".P1")[0]; this.P2 = this.$element.find(".P2")[0]; this.curve = this.$element.find(".curve")[0]; this.P1.bezierEditor = this.P2.bezierEditor = this.curve.bezierEditor = this; this.bezierCanvas = new BezierCanvas(this.curve, null, [0, 0]); // redraw canvas this._updateCanvas(); $(this.curve) .on("click", _curveClick) .on("mousemove", _curveMouseMove); $(this.P1) .on("mousemove", _pointMouseMove) .on("mousedown", _pointMouseDown) .on("mouseup", _pointMouseUp) .on("keydown", _pointKeyDown); $(this.P2) .on("mousemove", _pointMouseMove) .on("mousedown", _pointMouseDown) .on("mouseup", _pointMouseUp) .on("keydown", _pointKeyDown); }
BezierCurveEditor.prototype._commitTimingFunction = function () { var bezierCurveVal = "cubic-bezier(" + this._cubicBezierCoords[0] + ", " + this._cubicBezierCoords[1] + ", " + this._cubicBezierCoords[2] + ", " + this._cubicBezierCoords[3] + ")"; this._callback(bezierCurveVal); TimingFunctionUtils.showHideHint(this.hint, false); };