Merge pull request #7248 from SAPlayer/inline-timing-function-editor-fadeout-fix

[BezierEditor] Fix fadeout issue

Author: redmunds

src/extensions/default/InlineTimingFunctionEditor/BezierCurveEditor.js

@@ -530,13 +530,14 @@ define(function (require, exports, module) {
         // current cubic-bezier() function params
         this._cubicBezierCoords = this._getCubicBezierCoords(bezierCurve);
 
-        this.hint = $(".hint", this.$element);
+        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, true, bezierCurve.originalString, "cubic-bezier(" + this._cubicBezierCoords.join(", ") + ")");
+            TimingFunctionUtils.showHideHint(this.hint, true, bezierCurve.originalString, "cubic-bezier(" + this._cubicBezierCoords.join(", ") + ")");
         } else {
-            TimingFunctionUtils.showHideHint(this, false);
+            TimingFunctionUtils.showHideHint(this.hint, false);
         }
 
         this.P1 = this.$element.find(".P1")[0];
@@ -611,7 +612,7 @@ define(function (require, exports, module) {
             this._cubicBezierCoords[2] + ", " +
             this._cubicBezierCoords[3] + ")";
         this._callback(bezierCurveVal);
-        TimingFunctionUtils.showHideHint(this, false);
+        TimingFunctionUtils.showHideHint(this.hint, false);
     };
 
     /**
@@ -697,9 +698,9 @@ define(function (require, exports, module) {
         // 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, true, bezierCurve.originalString, "cubic-bezier(" + this._cubicBezierCoords.join(", ") + ")");
+            TimingFunctionUtils.showHideHint(this.hint, true, bezierCurve.originalString, "cubic-bezier(" + this._cubicBezierCoords.join(", ") + ")");
         } else {
-            TimingFunctionUtils.showHideHint(this, false);
+            TimingFunctionUtils.showHideHint(this.hint, false);
         }
     };
 

src/extensions/default/InlineTimingFunctionEditor/StepEditor.js

@@ -310,13 +310,14 @@ define(function (require, exports, module) {
         // current step function params
         this._stepParams = this._getStepParams(stepMatch);
 
-        this.hint = $(".hint", this.$element);
+        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, true, stepMatch.originalString, "steps(" + this._stepParams.count.toString() + ", " + this._stepParams.timing + ")");
+            TimingFunctionUtils.showHideHint(this.hint, true, stepMatch.originalString, "steps(" + this._stepParams.count.toString() + ", " + this._stepParams.timing + ")");
         } else {
-            TimingFunctionUtils.showHideHint(this, false);
+            TimingFunctionUtils.showHideHint(this.hint, false);
         }
 
         this.canvas = this.$element.find(".steps")[0];
@@ -364,7 +365,7 @@ define(function (require, exports, module) {
             this._stepParams.count.toString() + ", " +
             this._stepParams.timing + ")";
         this._callback(stepFuncVal);
-        TimingFunctionUtils.showHideHint(this, false);
+        TimingFunctionUtils.showHideHint(this.hint, false);
     };
 
     /**
@@ -436,9 +437,9 @@ define(function (require, exports, module) {
         // 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, true, stepMatch.originalString, "steps(" + this._stepParams.count.toString() + ", " + this._stepParams.timing + ")");
+            TimingFunctionUtils.showHideHint(this.hint, true, stepMatch.originalString, "steps(" + this._stepParams.count.toString() + ", " + this._stepParams.timing + ")");
         } else {
-            TimingFunctionUtils.showHideHint(this, false);
+            TimingFunctionUtils.showHideHint(this.hint, false);
         }
     };
 

src/extensions/default/InlineTimingFunctionEditor/TimingFunctionUtils.js

@@ -248,31 +248,34 @@ define(function (require, exports, module) {
     /**
      * Show, hide or update the hint text
      * 
-     * @param {(BezierCurveEditor|StepEditor)} editor BezierCurveEditor or StepsEditor where the hint should be changed
+     * @param {object} hint Editor.hint object of the current InlineTimingFunctionEditor
      * @param {boolean} show Whether the hint should be shown or hidden
      * @param {string=} documentCode The invalid code from the document (can be omitted when hiding)
      * @param {string=} editorCode The valid code that is shown in the Inline Editor (can be omitted when hiding)
      */
-    function showHideHint(editor, show, documentCode, editorCode) {
-        if (!editor.hint) {
+    function showHideHint(hint, show, documentCode, editorCode) {
+        if (!hint || !hint.elem) {
             return;
         }
 
-        $(editor.hint[0]).removeClass("fadeout");
         if (show) {
-            editor.hintShown = true;
-            editor.hint.html(StringUtils.format(Strings.INLINE_TIMING_EDITOR_INVALID, documentCode, editorCode));
-            editor.hint.css("display", "block");
-        } else if (editor.hintShown) {
-            editor.hintShown = false;
-            AnimationUtils.animateUsingClass(editor.hint[0], "fadeout")
+            hint.shown = true;
+            hint.animationInProgress = false;
+            hint.elem.removeClass("fadeout");
+            hint.elem.html(StringUtils.format(Strings.INLINE_TIMING_EDITOR_INVALID, documentCode, editorCode));
+            hint.elem.css("display", "block");
+        } else if (hint.shown) {
+            hint.animationInProgress = true;
+            AnimationUtils.animateUsingClass(hint.elem[0], "fadeout")
                 .done(function () {
-                    if (!editor.hintShown) {
-                        editor.hint.css("display", "none");
+                    if (hint.animationInProgress) { // do this only if the animation was not cancelled
+                        hint.elem.hide();
                     }
+                    hint.shown = false;
+                    hint.animationInProgress = false;
                 });
         } else {
-            editor.hint.css("display", "none");
+            hint.elem.hide();
         }
     }