Implement steps() timing function editor

src/extensions/default/InlineTimingFunctionEditor/TimingFunctionEditor.js → src/extensions/default/InlineTimingFunctionEditor/BezierCurveEditor.js

@@ -29,7 +29,6 @@ define(function (require, exports, module) {
 
     var EditorManager   = brackets.getModule("editor/EditorManager"),
         KeyEvent        = brackets.getModule("utils/KeyEvent"),
-        StringUtils     = brackets.getModule("utils/StringUtils"),
         Strings         = brackets.getModule("strings");
 
     var TimingFunctionUtils            = require("TimingFunctionUtils"),
@@ -493,21 +492,25 @@ define(function (require, exports, module) {
 
             bezierEditor._commitTimingFunction();
             bezierEditor._updateCanvas();
+            return true;
+
+        } else if (code === KeyEvent.DOM_VK_ESCAPE) {
+            return true;
         }
 
         return false;
     }
 
 
     /**
-     * Constructor for TimingFunctionEditor Object. This control may be used standalone
+     * 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 TimingFunctionEditor($parent, bezierCurve, callback) {
+    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);
@@ -547,7 +550,7 @@ define(function (require, exports, module) {
     /**
      * Destructor called by InlineTimingFunctionEditor.onClosed()
      */
-    TimingFunctionEditor.prototype.destroy = function () {
+    BezierCurveEditor.prototype.destroy = function () {
 
         this.P1.bezierEditor = this.P2.bezierEditor = this.curve.bezierEditor = null;
 
@@ -567,40 +570,29 @@ define(function (require, exports, module) {
     };
 
 
-    /** Returns the root DOM node of the TimingFunctionEditor UI */
-    TimingFunctionEditor.prototype.getRootElement = function () {
+    /** Returns the root DOM node of the BezierCurveEditor UI */
+    BezierCurveEditor.prototype.getRootElement = function () {
         return this.$element;
     };
 
     /**
      * Default focus needs to go somewhere, so give it to P1
      */
-    TimingFunctionEditor.prototype.focus = function () {
+    BezierCurveEditor.prototype.focus = function () {
         this.P1.focus();
         return true;
     };
 
     /**
-     * Normalize the given bezierCurve string.
-     *
-     * @param {string} bezierCurve The bezierCurve to be corrected.
-     * @return {string} a normalized bezierCurve string.
-     */
-    TimingFunctionEditor.prototype._normalizeTimingFunctionString = function (bezierCurve) {
-        return bezierCurve.toLowerCase();
-    };
-
-    /**
-     * Sets _bezierCurve based on a string input, and updates the doc
+     * Generates cubic-bezier function based on coords, and updates the doc
      */
-    TimingFunctionEditor.prototype._commitTimingFunction = function () {
+    BezierCurveEditor.prototype._commitTimingFunction = function () {
         var bezierCurveVal = "cubic-bezier(" +
             this._cubicBezierCoords[0] + ", " +
             this._cubicBezierCoords[1] + ", " +
             this._cubicBezierCoords[2] + ", " +
             this._cubicBezierCoords[3] + ")";
         this._callback(bezierCurveVal);
-        this._bezierCurve = bezierCurveVal;
     };
 
     /**
@@ -610,7 +602,7 @@ define(function (require, exports, module) {
      * @param {RegExp.match} match Matches returned from cubicBezierMatch()
      * @return {Array.number[4]}
      */
-    TimingFunctionEditor.prototype._getCubicBezierCoords = function (match) {
+    BezierCurveEditor.prototype._getCubicBezierCoords = function (match) {
 
         if (match[0].match(/^cubic-bezier/)) {
             // cubic-bezier()
@@ -640,7 +632,7 @@ define(function (require, exports, module) {
      *
      * @return {left: number, top: number, width: number, height: number}
      */
-    TimingFunctionEditor.prototype._getCurveBoundingBox = function () {
+    BezierCurveEditor.prototype._getCurveBoundingBox = function () {
         var $canvas = this.$element.find(".curve"),
             canvasOffset = $canvas.offset();
 
@@ -655,7 +647,7 @@ define(function (require, exports, module) {
     /**
      * Update <canvas> after a change
      */
-    TimingFunctionEditor.prototype._updateCanvas = function () {
+    BezierCurveEditor.prototype._updateCanvas = function () {
         // collect data, build model
         if (this._cubicBezierCoords) {
             this.bezierCanvas.bezier = window.bezier = new CubicBezier(this._cubicBezierCoords);
@@ -680,11 +672,11 @@ define(function (require, exports, module) {
      *
      * @param {!RegExpMatch} bezierCurve  RegExp match object of updated bezierCurve
      */
-    TimingFunctionEditor.prototype.handleExternalUpdate = function (bezierCurve) {
+    BezierCurveEditor.prototype.handleExternalUpdate = function (bezierCurve) {
         this._cubicBezierCoords = this._getCubicBezierCoords(bezierCurve);
         this._updateCanvas();
     };
 
 
-    exports.TimingFunctionEditor = TimingFunctionEditor;
+    exports.BezierCurveEditor = BezierCurveEditor;
 });

src/extensions/default/InlineTimingFunctionEditor/BezierCurveEditorTemplate.html

@@ -1,4 +1,4 @@
-<div tabindex="-1" class="timing-function-editor">
+<div tabindex="-1" class="bezier-curve-editor">
     <div class="cubic-bezier">
         <div class="coordinate-plane">
             <span   class="control-point P0"></span>
@@ -7,5 +7,8 @@
             <span   class="control-point P3"></span>
             <canvas height="299" width="150" class="curve"></canvas>
         </div>
+        <div class="info">
+            <p>{{{BEZIER_EDITOR_INFO}}}</p>
+        </div>
     </div>
 </div>

src/extensions/default/InlineTimingFunctionEditor/InlineTimingFunctionEditor.js

@@ -28,15 +28,16 @@ define(function (require, exports, module) {
     "use strict";
 
     var InlineWidget         = brackets.getModule("editor/InlineWidget").InlineWidget,
-        TimingFunctionEditor = require("TimingFunctionEditor").TimingFunctionEditor,
+        BezierCurveEditor    = require("BezierCurveEditor").BezierCurveEditor,
+        StepEditor           = require("StepEditor").StepEditor,
         TimingFunctionUtils  = require("TimingFunctionUtils");
 
 
     /** @type {number} Global var used to provide a unique ID for each timingFunction editor instance's _origin field. */
     var lastOriginId = 1;
 
     /**
-     * Constructor for inline widget containing a TimingFunctionEditor control
+     * Constructor for inline widget containing a BezierCurveEditor control
      *
      * @param {!RegExpMatch} timingFunction  RegExp match object of initially selected timingFunction
      * @param {!CodeMirror.Bookmark} startBookmark
@@ -60,7 +61,7 @@ define(function (require, exports, module) {
     InlineTimingFunctionEditor.prototype.constructor = InlineTimingFunctionEditor;
     InlineTimingFunctionEditor.prototype.parentClass = InlineWidget.prototype;
 
-    /** @type {!TimingFunctionEditor} TimingFunctionEditor instance */
+    /** @type {!BezierCurveEditor} BezierCurveEditor instance */
     InlineTimingFunctionEditor.prototype.timingFunctionEditor = null;
 
     /** @type {!string} Current value of the timing function editor control */
@@ -120,7 +121,7 @@ define(function (require, exports, module) {
         // instead of two bookmarks to track the range. (In our current old version of
         // CodeMirror v2, markText() isn't robust enough for this case.)
         var line = this.hostEditor.document.getLine(start.line),
-            matches = TimingFunctionUtils.bezierCurveMatch(line.substr(start.ch), true);
+            matches = TimingFunctionUtils.timingFunctionMatch(line.substr(start.ch), true);
 
         // No longer have a match
         if (!matches) {
@@ -152,7 +153,7 @@ define(function (require, exports, module) {
      * @param {!string} timingFunctionString
      */
     InlineTimingFunctionEditor.prototype._handleTimingFunctionChange = function (timingFunctionString) {
-        var timingFunctionMatch = TimingFunctionUtils.bezierCurveMatch(timingFunctionString, true);
+        var timingFunctionMatch = TimingFunctionUtils.timingFunctionMatch(timingFunctionString, true);
         if (timingFunctionMatch !== this._timingFunction) {
             var range = this.getCurrentRange();
             if (!range) {
@@ -182,9 +183,14 @@ define(function (require, exports, module) {
     InlineTimingFunctionEditor.prototype.load = function (hostEditor) {
         InlineTimingFunctionEditor.prototype.parentClass.load.apply(this, arguments);
 
-        // Create timing function editor control
-        var swatchInfo = null;
-        this.timingFunctionEditor = new TimingFunctionEditor(this.$htmlContent, this._timingFunction, this._handleTimingFunctionChange, swatchInfo);
+        // Create appropriate timing function editor control
+        if (this._timingFunction.isBezier) {
+            this.timingFunctionEditor = new BezierCurveEditor(this.$htmlContent, this._timingFunction, this._handleTimingFunctionChange);
+        } else if (this._timingFunction.isStep) {
+            this.timingFunctionEditor = new StepEditor(this.$htmlContent, this._timingFunction, this._handleTimingFunctionChange);
+        } else {
+            window.console.log("InlineTimingFunctionEditor.load tried to load an unkown timing function type");
+        }
     };
 
     /**

src/extensions/default/InlineTimingFunctionEditor/Localized.css

@@ -1,15 +1,17 @@
-.timing-function-editor .coordinate-plane:after {
+.bezier-curve-editor .coordinate-plane:after,
+.step-editor .coordinate-plane:after {
     content: '{{INLINE_TIMING_EDITOR_TIME}}';
 }
 
-.timing-function-editor .coordinate-plane:hover:before {
+.bezier-curve-editor .coordinate-plane:hover:before {
     content: '{{INLINE_TIMING_EDITOR_PROGRESSION}} (' attr(data-progression) '%)';
 }
 
-.timing-function-editor .coordinate-plane:before {
+.bezier-curve-editor .coordinate-plane:before,
+.step-editor .coordinate-plane:before {
     content: '{{INLINE_TIMING_EDITOR_PROGRESSION}}';
 }
 
-.timing-function-editor .coordinate-plane:hover:after {
+.bezier-curve-editor .coordinate-plane:hover:after {
     content: '{{INLINE_TIMING_EDITOR_TIME}} (' attr(data-time) '%)';
 }