sproutcore 1.10.2 → 1.10.3.1

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/animation.js

@@ -291,8 +291,21 @@ SC.View.reopen(
 
     // In the case of zero duration, just adjust and call the callback.
     if (options.duration === 0) {
-      this.adjust(hash);
-      this.runAnimationCallback(options, null, NO);
+        this.adjust(hash);
+        this.runAnimationCallback(options, null, NO);
+      return this;
+    }
+
+    // In the case that the view is not in the standard visible state, don't animate.
+    if (!this.get('isVisibleInWindow')) {
+      //@if(debug)
+      SC.warn("Developer Warning: SC.View:animate() was called on %@ which is not visible in the window. The animation will be cancelled.".fmt(this));
+      //@endif
+
+      this.invokeNext(function () {
+        this.adjust(hash);
+        this.runAnimationCallback(options, null, true); // Cancelled
+      });
       return this;
     }
 
@@ -378,6 +391,7 @@ SC.View.reopen(
           pendingAnimations.centerY = options;
         }
       }
+
       if (!SC.none(pendingAnimations.width) && !SC.none(layout.centerX) && SC.none(pendingAnimations.centerX)) {
         // Don't animate less than 2px difference b/c the margin-left value won't differ.
         if (Math.abs(hash.width - this.get('layout').width) >= 2) {
@@ -389,8 +403,15 @@ SC.View.reopen(
 
       // Always run the animation asynchronously so that the original layout is guaranteed to be applied to the DOM.
       this.invokeNext('_animate');
+
+      // Route.
+      if (this.get('viewState') === SC.CoreView.ATTACHED_SHOWN) {
+        this.set('viewState', SC.CoreView.ATTACHED_SHOWN_ANIMATING);
+      }
     } else if (!optionsDidChange) {
-      this.runAnimationCallback(options, null, NO);
+      this.invokeNext(function () {
+        this.runAnimationCallback(options, null, false);
+      });
     }
 
     return this;
@@ -401,14 +422,15 @@ SC.View.reopen(
     // Check for _animateLayout.  If an invokeNext call to animate *this* occurs
     // while flushing the invokeNext queue *before* this method runs, an extra
     // call to _animate will run.  Has unit test.
-    if (this._animateLayout) {
+    var animationLayout = this._animateLayout;
+    if (animationLayout) {
       this.willRenderAnimations();
 
-      // Apply the animation layout.
-      this.set('layout', this._animateLayout);
-
-      // Clear the layout cache value.
+      // Clear the layout cache value first so that it is not present when layout changes next.
       this._animateLayout = null;
+
+      // Apply the animation layout.
+      this.set('layout', animationLayout);
     }
   },
 
@@ -484,6 +506,11 @@ SC.View.reopen(
       layout = this._animateLayout;
     }
 
+    // Route.
+    if (this.get('viewState') === SC.CoreView.ATTACHED_SHOWN_ANIMATING) {
+      this.set('viewState', SC.CoreView.ATTACHED_SHOWN);
+    }
+
     // Immediately remove the pending animations while calling the callbacks.
     for (key in pendingAnimations) {
       animation = pendingAnimations[key];
@@ -528,9 +555,8 @@ SC.View.reopen(
     immediately and the animations removed from the queue.
   */
   didRenderAnimations: function () {
-
-    // Transitions not supported
-    if (!SC.platform.supportsCSSTransitions) {
+    // Transitions not supported or the document is not visible.
+    if (!SC.platform.supportsCSSTransitions || document.hidden) {
       var pendingAnimations = this._pendingAnimations;
 
       for (var key in pendingAnimations) {
@@ -538,6 +564,11 @@ SC.View.reopen(
         this.runAnimationCallback(pendingAnimations[key], null, NO);
       }
 
+      // Route.
+      if (this.get('viewState') === SC.CoreView.ATTACHED_SHOWN_ANIMATING) {
+        this.set('viewState', SC.CoreView.ATTACHED_SHOWN);
+      }
+
       // Reset the placeholder variables now that the layout style has been applied.
       this._activeAnimations = this._pendingAnimations = null;
     }
@@ -648,9 +679,9 @@ SC.View.reopen(
     if (method) {
       // We're using invokeNext so we don't trigger any layout changes from
       // the callback until the current layout is updated.
-      this.invokeNext(function () {
+      // this.invokeNext(function () {
         method.call(target, { event: evt, view: this, isCancelled: cancelled });
-      }, this);
+      // }, this);
 
       // Always clear the method from the hash to prevent it being called
       // multiple times for animations in the group.
@@ -679,14 +710,19 @@ SC.View.reopen(
       // Remove the animation style without triggering a layout change.
       this.removeAnimationFromLayout(propertyName, YES);
 
-      // Run the callback.
-      this.runAnimationCallback(animation, evt, NO);
-
       // Clean up the internal hash.
       this._activeAnimationsLength -= 1;
       if (this._activeAnimationsLength === 0) {
+        // Route.
+        if (this.get('viewState') === SC.CoreView.ATTACHED_SHOWN_ANIMATING) {
+          this.set('viewState', SC.CoreView.ATTACHED_SHOWN);
+        }
+
         this._activeAnimations = this._prevLayout = null;
       }
+
+      // Run the callback.
+      this.runAnimationCallback(animation, evt, NO);
     }
   },
 
@@ -697,7 +733,8 @@ SC.View.reopen(
    pending and active animations.
    */
   willRenderAnimations: function () {
-    if (SC.platform.supportsCSSTransitions) {
+    // Only apply the style if supported by the platform and the document is visible.
+    if (SC.platform.supportsCSSTransitions && !document.hidden) {
       var pendingAnimations = this._pendingAnimations;
 
       if (pendingAnimations) {

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/statechart.js

@@ -8,6 +8,7 @@ SC.LOG_VIEW_STATES_STYLE = {
   0x0300: 'color: #67b7db; font-style: italic;', // UNATTACHED
   0x0301: 'color: #67b7db; font-style: italic;', // UNATTACHED_BY_PARENT
   0x03C0: 'color: #23abf5; font-style: italic;', // ATTACHED_SHOWN
+  0x03C3: 'color: #1fe7a8; font-style: italic;', // ATTACHED_SHOWN_ANIMATING
   0x03A0: 'color: #67b7db; font-style: italic;', // ATTACHED_HIDDEN
   0x03A1: 'color: #67b7db; font-style: italic;', // ATTACHED_HIDDEN_BY_PARENT
   0x03C1: 'color: #b800db; font-style: italic;', // ATTACHED_BUILDING_IN
@@ -104,6 +105,15 @@ SC.CoreView.mixin(
   */
   ATTACHED_SHOWN: 0x03C0, // 960
 
+  /**
+    The view has been created, rendered and attached, is visible in the
+    display and is being animated via a call to `animate()`.
+
+    @static
+    @constant
+  */
+  ATTACHED_SHOWN_ANIMATING: 0x03C3, // 963
+
   /**
     The view has been created, rendered and attached, but is not visible in the
     display.
@@ -235,6 +245,7 @@ SC.CoreView.reopen(
     * SC.CoreView.UNATTACHED_BY_PARENT
     * SC.CoreView.ATTACHED_SHOWING
     * SC.CoreView.ATTACHED_SHOWN
+    * SC.CoreView.ATTACHED_SHOWN_ANIMATING
     * SC.CoreView.ATTACHED_HIDING
     * SC.CoreView.ATTACHED_HIDDEN
     * SC.CoreView.ATTACHED_HIDDEN_BY_PARENT
@@ -493,6 +504,7 @@ SC.CoreView.reopen(
 
     // Improper states that have no effect, but should be discouraged.
     case SC.CoreView.ATTACHED_SHOWN:
+    case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
       //@if(debug)
       // This should be avoided, because moving the view layer without explicitly removing it first is a dangerous practice.
       SC.warn("Developer Warning: You can not attach the view, %@, to a new node without properly detaching it first.".fmt(this));
@@ -530,6 +542,7 @@ SC.CoreView.reopen(
     case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
     case SC.CoreView.ATTACHED_SHOWING:
     case SC.CoreView.ATTACHED_SHOWN:
+    case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
     case SC.CoreView.UNATTACHED_BY_PARENT:
     case SC.CoreView.ATTACHED_BUILDING_OUT:
       break;
@@ -582,6 +595,11 @@ SC.CoreView.reopen(
       immediately = true;
       break;
 
+    // Near normal case: Attached visible view that is in the middle of an animation.
+    case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
+      this.cancelAnimation();
+      break;
+
     // Near normal case: Attached showing view. We cancel the incoming animation
     // rather than swapping to a build out (difficult to get right, because we lose track of the correct final layout).
     case SC.CoreView.ATTACHED_SHOWING:
@@ -718,10 +736,17 @@ SC.CoreView.reopen(
       return true;
     case SC.CoreView.ATTACHED_BUILDING_IN:
     case SC.CoreView.ATTACHED_SHOWING:
-      if (!transitionHide) {
-        this._cancelTransition();
-      }
+      // Cancel the animation and revert to hidden.
+      this.cancelAnimation();
+      this._teardownTransition();
+      this._gotoAttachedHiddenState();
       break;
+
+    // Near normal case: Attached visible view that is in the middle of an animation.
+    case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
+      this.cancelAnimation();
+      break;
+
     case SC.CoreView.ATTACHED_SHOWN:
       break;
     default:
@@ -799,6 +824,7 @@ SC.CoreView.reopen(
     switch (state) {
     case SC.CoreView.ATTACHED_SHOWING: // FAST PATHS!
     case SC.CoreView.ATTACHED_SHOWN:
+    case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
     case SC.CoreView.ATTACHED_HIDING:
     case SC.CoreView.ATTACHED_HIDDEN:
     case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
@@ -877,9 +903,10 @@ SC.CoreView.reopen(
       break;
 
     case SC.CoreView.ATTACHED_HIDING:
-      if (!transitionShow) {
-        this._cancelTransition();
-      }
+      // Cancel the animation and revert to shown.
+      this.cancelAnimation();
+      this._teardownTransition();
+      this._gotoAttachedShownState();
       break;
 
     // Special case: Layer exists but is not attached. Queue an update to the visibility style.
@@ -892,6 +919,7 @@ SC.CoreView.reopen(
     // Invalid states that have no effect.
     case SC.CoreView.UNRENDERED: // FAST PATH!
     case SC.CoreView.ATTACHED_SHOWN: // FAST PATH!
+    case SC.CoreView.ATTACHED_SHOWN_ANIMATING:
     case SC.CoreView.ATTACHED_SHOWING: // FAST PATH!
     case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT: // FAST PATH!
     case SC.CoreView.ATTACHED_BUILDING_IN: // FAST PATH!
@@ -1173,7 +1201,7 @@ SC.CoreView.reopen(
 
   /** @private Clear building in transition. */
   _cancelTransition: function () {
-    // Cancel conflicting transitions.
+    // Cancel conflicting transitions. This causes the animation callback to fire.
     this.cancelAnimation();
     // this._teardownTransition();
   },
@@ -1603,34 +1631,43 @@ SC.CoreView.reopen(
 
   /** @private */
   _teardownTransition: function () {
-    // Reset the layout to its original value.
-    this.set('layout', this._preTransitionLayout);
-
-    // Clean up.
-    this._preTransitionLayout = null;
-    this._preTransitionFrame = null;
+    // Some transition plugins will send a didTransitionIn/Out event even
+    // if the transition was cancelled. In either case, the transition can't
+    // be cleaned up multiple times.
+    if (this._preTransitionLayout) {
+      // Reset the layout to its original value.
+      this.set('layout', this._preTransitionLayout);
+
+      // Clean up.
+      this._preTransitionLayout = null;
+      this._preTransitionFrame = null;
+    }
   },
 
   /** @private Attempts to run a transition hide, ensuring any incoming transitions are stopped in place. */
   _transitionHide: function () {
-    var state = this.get('viewState'),
-      transitionHide = this.get('transitionHide'),
-      options = this.get('transitionHideOptions') || {},
-      inPlace = false;
+    var transitionHide = this.get('transitionHide'),
+      options = this.get('transitionHideOptions') || {};
 
-    switch (state) {
-    case SC.CoreView.ATTACHED_SHOWING:
-    case SC.CoreView.ATTACHED_BUILDING_IN:
-      this.cancelAnimation(SC.LayoutState.CURRENT);
-      inPlace = true;
-      break;
-    default:
-      this._setupTransition();
+    //@if (debug)
+    if (SC.LOG_VIEW_STATES) {
+      SC.Logger.log('%c%@ — _transitionHide()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
+    //@endif
+
+    // switch (state) {
+    // case SC.CoreView.ATTACHED_SHOWING:
+    // case SC.CoreView.ATTACHED_BUILDING_IN:
+    //   this.cancelAnimation(SC.LayoutState.CURRENT);
+    //   inPlace = true;
+    //   break;
+    // default:
+    this._setupTransition();
+    // }
 
     // Set up the hiding transition.
     if (transitionHide.setup) {
-      transitionHide.setup(this, options, inPlace);
+      transitionHide.setup(this, options);
     }
 
     // Execute the hiding transition.
@@ -1686,17 +1723,21 @@ SC.CoreView.reopen(
 
   /** @private Attempts to run a transition show, ensuring any hiding transitions are stopped in place. */
   _transitionShow: function () {
-    var state = this.get('viewState'),
-      transitionShow = this.get('transitionShow'),
+    var transitionShow = this.get('transitionShow'),
       options = this.get('transitionShowOptions') || {},
       inPlace = false;
 
-    if (state === SC.CoreView.ATTACHED_HIDING) {
-      this.cancelAnimation(SC.LayoutState.CURRENT);
-      inPlace = true;
-    } else {
-      this._setupTransition();
+    //@if (debug)
+    if (SC.LOG_VIEW_STATES) {
+      SC.Logger.log('%c%@ — _transitionShow()'.fmt(this), SC.LOG_VIEW_STATES_STYLE[this.get('viewState')]);
     }
+    //@endif
+    // if (state === SC.CoreView.ATTACHED_HIDING) {
+    //   this.cancelAnimation(SC.LayoutState.CURRENT);
+    //   inPlace = true;
+    // } else {
+    this._setupTransition();
+    // }
 
     // Set up the showing transition.
     if (transitionShow.setup) {
@@ -1719,11 +1760,12 @@ SC.CoreView.reopen(
         // Route.
         var transitionIn = this.get('transitionIn');
         if (transitionIn) {
+          this._gotoAttachedBuildingInState();
+
           // this.invokeNext(function () {
             this._transitionIn();
           // });
 
-          this._gotoAttachedBuildingInState();
         } else {
           this._gotoAttachedShownState();
         }

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/select/methods.js

@@ -19,10 +19,10 @@ module("SC.SelectView",{
     //pane
     pane = SC.MainPane.create({
       objs : ["Around","The","World"],
-      objs2 : [{ title: "Around", pos: 3},
-        { title: "The", pos: 1},
-        { title: "World", pos: 2 },
-        { title: "Again", pos: 4}],
+      objs2 : [{ title: "Around", icon: 'around-icon', pos: 3},
+        { title: "The", icon: 'the-icon', pos: 1},
+        { title: "World", icon: 'world-icon', pos: 2 },
+        { title: "Again", icon: 'again-icon', pos: 4}],
       selectedValue: "World",
       isDue: YES,
       childViews: [
@@ -51,6 +51,7 @@ module("SC.SelectView",{
           valueBinding: '*owner.selectedValue',
           itemValueKey: 'title',
           itemTitleKey: 'title',
+          itemIconKey: 'icon',
           itemSortKey: 'pos'
         }),
 
@@ -81,7 +82,7 @@ module("SC.SelectView",{
 
   //teardown
   teardown: function() {
-    pane.remove() ;
+    pane.destroy() ;
     pane = view = null ;
   }
 });
@@ -156,3 +157,15 @@ test("The content of the popup should be recalculated correctly when the list of
   equals(view4.get("_itemList")[0].title, "Moving", "The list should start with new item Moving");
   equals(view3.get("_itemList")[2].title, "Again", "The list should have on the 3rd position the title Again");
 });
+
+test("Setting the value of the view should change the title & icon properties", function () {
+  equals(view4.get('value'), "World", "The view gets a default value by sort");
+  equals(view4.get('title'), "World", "The view's title should originally be");
+  equals(view4.get('icon'), "world-icon", "The view's icon should originally be");
+  SC.run(function () {
+    view4.set('value', 'Around');
+  });
+
+  equals(view4.get('title'), "Around", "The view's title should now be");
+  equals(view4.get('icon'), "around-icon", "The view's icon should now be");
+});

data/lib/frameworks/sproutcore/frameworks/desktop/views/grid.js

@@ -25,6 +25,9 @@ sc_require('views/list');
 SC.GridView = SC.ListView.extend(
 /** @scope SC.GridView.prototype */ {
 
+  /** @private */
+  _lastFrameWidth: null,
+
   /**
     @type Array
     @default ['sc-grid-view']
@@ -110,6 +113,12 @@ SC.GridView = SC.ListView.extend(
         row = Math.floor(contentIndex / itemsPerRow),
         col = contentIndex - (itemsPerRow * row);
 
+    // If the frame is not ready, then just return an empty layout.
+    // Otherwise, NaN will be entered into layout values.
+    if (frameWidth === 0 || itemsPerRow === 0) {
+      return {};
+    }
+
     return {
       left: col * columnWidth,
       top: row * rowHeight,
@@ -127,15 +136,15 @@ SC.GridView = SC.ListView.extend(
       count = (content) ? content.get('length') : 0,
       rowHeight = this.get('rowHeight') || 48,
       itemsPerRow = this.get('itemsPerRow'),
-      rows = Math.ceil(count / itemsPerRow);
+      // Check that itemsPerRow isn't 0 to prevent Infinite rows.
+      rows = itemsPerRow ? Math.ceil(count / itemsPerRow) : 0;
 
     // use this cached layout hash to avoid allocing memory...
     var ret = this._cachedLayoutHash;
     if (!ret) ret = this._cachedLayoutHash = {};
 
-    // set minHeight
-    ret.minHeight = rows * rowHeight;
-    this.set('calculatedHeight', ret.minHeight);
+    ret.height = rows * rowHeight;
+
     return ret;
   },
 
@@ -197,7 +206,7 @@ SC.GridView = SC.ListView.extend(
       top = layout.top;
       left = layout.left;
       if (dropOperation & SC.DROP_AFTER) left += layout.width;
-      height = layout.height;
+      var height = layout.height;
 
       // Adjust the position of the insertion point.
       insertionPoint.adjust({ top: top, left: left, height: height });