Create basic framework for animating fields on disposal

* Create basic framework for animating fields on disposal

* disposeAnimation* instead of disposeAnimate*

* Fix owner_, hideandClearDom logic in WidgetDiv.hide

Author: tmickel

core/widgetdiv.js

@@ -48,11 +48,36 @@ Blockly.WidgetDiv.owner_ = null;
 
 /**
  * Optional cleanup function set by whichever object uses the widget.
+ * This is called as soon as a dispose is desired. If the dispose should
+ * be animated, the animation should start on the call of dispose_.
  * @type {Function}
  * @private
  */
 Blockly.WidgetDiv.dispose_ = null;
 
+/**
+ * Optional function called at the end of a dispose animation.
+ * Set by whichever object is using the widget.
+ * @type {Function}
+ * @private
+ */
+Blockly.WidgetDiv.disposeAnimationFinished_ = null;
+
+/**
+ * Timer ID for the dispose animation.
+ * @type {number}
+ * @private
+ */
+Blockly.WidgetDiv.disposeAnimationTimer_ = null;
+
+/**
+ * Length of time in seconds for the dispose animation.
+ * @type {number}
+ * @private
+ */
+Blockly.WidgetDiv.disposeAnimationTimerLength_ = 0;
+
+
 /**
  * Create the widget div and inject it onto the page.
  */
@@ -69,13 +94,20 @@ Blockly.WidgetDiv.createDom = function() {
  * Initialize and display the widget div.  Close the old one if needed.
  * @param {!Object} newOwner The object that will be using this container.
  * @param {boolean} rtl Right-to-left (true) or left-to-right (false).
- * @param {Function} dispose Optional cleanup function to be run when the widget
- *   is closed.
+ * @param {Function=} opt_dispose Optional cleanup function to be run when the widget
+ *   is closed. If the dispose is animated, this function must start the animation.
+ * @param {Function=} opt_disposeAnimationFinished Optional cleanup function to be run
+ *   when the widget is done animating and must disappear.
+ * @param {number=} opt_disposeAnimationTimerLength Length of animation time in seconds
+     if a dispose animation is provided.
  */
-Blockly.WidgetDiv.show = function(newOwner, rtl, dispose) {
+Blockly.WidgetDiv.show = function(newOwner, rtl, opt_dispose,
+    opt_disposeAnimationFinished, opt_disposeAnimationTimerLength) {
   Blockly.WidgetDiv.hide();
   Blockly.WidgetDiv.owner_ = newOwner;
-  Blockly.WidgetDiv.dispose_ = dispose;
+  Blockly.WidgetDiv.dispose_ = opt_dispose;
+  Blockly.WidgetDiv.disposeAnimationFinished_ = opt_disposeAnimationFinished;
+  Blockly.WidgetDiv.disposeAnimationTimerLength_ = opt_disposeAnimationTimerLength;
   // Temporarily move the widget to the top of the screen so that it does not
   // cause a scrollbar jump in Firefox when displayed.
   var xy = goog.style.getViewportPageOffset(document);
@@ -89,19 +121,49 @@ Blockly.WidgetDiv.show = function(newOwner, rtl, dispose) {
  * Destroy the widget and hide the div.
  */
 Blockly.WidgetDiv.hide = function() {
-  if (Blockly.WidgetDiv.owner_) {
+  if (Blockly.WidgetDiv.disposeAnimationTimer_) {
+    // An animation timer is set already.
+    // This happens when a previous widget was animating out,
+    // but Blockly is hiding the widget to create a new one.
+    // So, short-circuit the animation and clear the timer.
+    window.clearTimeout(Blockly.WidgetDiv.disposeAnimationTimer_);
+    Blockly.WidgetDiv.disposeAnimationFinished_ && Blockly.WidgetDiv.disposeAnimationFinished_();
+    Blockly.WidgetDiv.disposeAnimationFinished_ = null;
+    Blockly.WidgetDiv.disposeAnimationTimer_ = null;
     Blockly.WidgetDiv.owner_ = null;
-    Blockly.WidgetDiv.DIV.style.display = 'none';
-    Blockly.WidgetDiv.DIV.style.left = '';
-    Blockly.WidgetDiv.DIV.style.top = '';
-    Blockly.WidgetDiv.DIV.style.height = '';
+    Blockly.WidgetDiv.hideAndClearDom_();
+  } else if (Blockly.WidgetDiv.isVisible()) {
+    // No animation timer set, but the widget is visible
+    // Start animation out (or immediately hide)
     Blockly.WidgetDiv.dispose_ && Blockly.WidgetDiv.dispose_();
     Blockly.WidgetDiv.dispose_ = null;
-    goog.dom.removeChildren(Blockly.WidgetDiv.DIV);
+    // If we want to animate out, set the appropriate timer for final dispose.
+    if (Blockly.WidgetDiv.disposeAnimationFinished_) {
+      Blockly.WidgetDiv.disposeAnimationTimer_ = window.setTimeout(
+        Blockly.WidgetDiv.hide, // Come back to hide and take the first branch.
+        Blockly.WidgetDiv.disposeAnimationTimerLength_ * 1000
+      );
+    } else {
+      // No timer provided - auto-hide the DOM now.
+      Blockly.WidgetDiv.owner_ = null;
+      Blockly.WidgetDiv.hideAndClearDom_();
+    }
     Blockly.Events.setGroup(false);
   }
 };
 
+/**
+ * Hide all DOM for the WidgetDiv, and clear its children.
+ * @private
+ */
+Blockly.WidgetDiv.hideAndClearDom_ = function() {
+  Blockly.WidgetDiv.DIV.style.display = 'none';
+  Blockly.WidgetDiv.DIV.style.left = '';
+  Blockly.WidgetDiv.DIV.style.top = '';
+  Blockly.WidgetDiv.DIV.style.height = '';
+  goog.dom.removeChildren(Blockly.WidgetDiv.DIV);
+};
+
 /**
  * Is the container visible?
  * @return {boolean} True if visible.