/**
* 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);
};