sproutcore 1.10.1 → 1.10.2

data/lib/frameworks/sproutcore/frameworks/foundation/transitions/swap_fade_color_transition.js

@@ -74,6 +74,11 @@ SC.mixin(SC.ContainerView,
           }
         });
       });
+    },
+
+    /** @private */
+    buildOutFromView: function (statechart, container, content, options, exitCount) {
+      // Do nothing.
     }
 
   }

data/lib/frameworks/sproutcore/frameworks/foundation/transitions/swap_move_in_transition.js

@@ -98,6 +98,11 @@ SC.mixin(SC.ContainerView,
     didBuildOutFromView: function (container, content, options) {
       // Convert to a flexible layout (in case we never fully entered).
       content.adjust({ bottom: 0, right: 0, height: null, width: null });
+    },
+
+    /** @private */
+    buildOutFromView: function (statechart, container, content, options) {
+      // Do nothing.
     }
   }
 

data/lib/frameworks/sproutcore/frameworks/foundation/transitions/swap_reveal_transition.js

@@ -29,6 +29,45 @@ SC.mixin(SC.ContainerView,
   */
   REVEAL: {
 
+    /** @private */
+    buildInToView: function (statechart, container, content, previousStatechart, options) {
+      // This transition is unique in that we have to wait for the previous
+      // content to finish building out entirely, before we can be considered
+      // fully entered.
+      // if (previousStatechart && previousStatechart.get('content')) {
+      //   previousStatechart.addObserver('state', this, this.previousStateDidChange, statechart);
+      // }
+    },
+
+    /** @private */
+    // reverseBuildIn: function (statechart, container, content, options) {
+    //   var nextStatechart = container._currentStatechart;
+
+    //   // We were waiting for another view to remove itself previously, now
+    //   // we are going out because someone else is coming in. If that someone
+    //   // else was also going out, then we should stay put because they are
+    //   // going to reverse.
+    //   if (nextStatechart && nextStatechart.get('content')) {
+    //     nextStatechart.addObserver('state', this, this.nextStateDidChange, statechart);
+    //   }
+    // },
+
+    /** @private */
+    // previousStateDidChange: function (previousStatechart, key, alwaysNull, statechart) {
+    //   if (previousStatechart.state === 'exited') {
+    //     statechart.entered();
+
+    //     // Clean up.
+    //     previousStatechart.removeObserver('state', this, this.previousStateDidChange);
+    //   }
+    // },
+
+    /** @private */
+    didBuildInToView: function (container, content, options) {
+      // Convert to a flexible layout.
+      content.adjust({ bottom: 0, right: 0, height: null, width: null, zIndex: null });
+    },
+
     /** @private */
     willBuildOutFromView: function (container, content, options, exitCount) {
       var frame = container.get('frame'),
@@ -79,10 +118,38 @@ SC.mixin(SC.ContainerView,
       }
     },
 
+    /** @private */
+    // reverseBuildOut: function (statechart, container, content, options) {
+    //   var key, value;
+
+    //   // Cancel the animation in place.
+    //   content.cancelAnimation(SC.LayoutState.CURRENT);
+
+    //   switch (options.direction) {
+    //   case 'up':
+    //   case 'down':
+    //     key = 'top';
+    //     value = 0;
+    //     break;
+    //   default:
+    //     key = 'left';
+    //     value = 0;
+    //   }
+
+    //   content.animate(key, value, {
+    //     duration: options.duration || 0.2,
+    //     timing: options.timing || 'ease'
+    //   }, function (data) {
+    //     if (!data.isCancelled) {
+    //       statechart.entered();
+    //     }
+    //   });
+    // },
+
     /** @private */
     didBuildOutFromView: function (container, content, options) {
       // Convert to a flexible layout.
-      content.adjust({ bottom: 0, right: 0, height: null, width: null, zIndex: null });
+      content.adjust({ top: 0, left: 0, bottom: 0, right: 0, height: null, width: null, zIndex: null });
     }
 
   }

data/lib/frameworks/sproutcore/frameworks/foundation/views/container.js

@@ -279,6 +279,8 @@ SC.ContainerView = SC.View.extend(
     var contentStatecharts = this._contentStatecharts;
 
     // Exit all other remaining statecharts immediately.  This mutates the array!
+    // This allows transitions where the previous content is left in place to
+    // clean up all previous content once the new content transitions in.
     for (var i = contentStatecharts.length - 2; i >= 0; i--) {
       contentStatecharts[i].doExit(true);
     }
@@ -292,6 +294,14 @@ SC.ContainerView = SC.View.extend(
 
     // Remove the statechart.
     contentStatecharts.removeObject(statechart);
+
+    // Once all the other statecharts have exited. Indicate that the current
+    // statechart is entered. This allows transitions where the new
+    // content is left in place to update state once all previous statecharts
+    // have exited.
+    if (contentStatecharts.length === 1) {
+      contentStatecharts[0].entered();
+    }
   },
 
   /** @private
@@ -318,16 +328,26 @@ SC.ContainerView = SC.View.extend(
     // Call doExit on all current content statecharts.  Any statecharts in the
     // process of exiting may accelerate their exits.
     for (var i = contentStatecharts.length - 1; i >= 0; i--) {
-      contentStatecharts[i].doExit();
+      var found = contentStatecharts[i].doExit(false, newContent);
+
+      // If the content already belongs to a content statechart reuse that statechart.
+      if (found) {
+        newStatechart = contentStatecharts[i];
+        newStatechart.set('previousStatechart', currentStatechart);
+        newStatechart.gotoEnteringState();
+      }
     }
 
     // Add the new content statechart, which will enter automatically.
-    newStatechart = SC.ContainerContentStatechart.create({
-      container: this,
-      content: newContent,
-      previousStatechart: currentStatechart
-    });
-    contentStatecharts.pushObject(newStatechart);
+    if (!newStatechart) {
+      newStatechart = SC.ContainerContentStatechart.create({
+        container: this,
+        content: newContent,
+        previousStatechart: currentStatechart
+      });
+
+      contentStatecharts.pushObject(newStatechart);
+    }
 
     // Track the current statechart.
     this._currentStatechart = newStatechart;
@@ -336,6 +356,11 @@ SC.ContainerView = SC.View.extend(
 });
 
 
+// When in debug mode, core developers can log the container content states.
+//@if(debug)
+SC.LOG_CONTAINER_CONTENT_STATES = false;
+//@endif
+
 /** @private
   In order to support transitioning views in and out of the container view,
   each content view needs its own simple statechart.  This is required, because
@@ -385,32 +410,49 @@ SC.ContainerContentStatechart = SC.Object.extend({
   //
 
   entered: function () {
-    if (this.state === 'entering') {
-      this.gotoReadyState();
     //@if(debug)
-    } else {
-      SC.error('Developer Error: SC.ContainerView should not receive an internal entered event while not in entering state.');
+    if (SC.LOG_CONTAINER_CONTENT_STATES) {
+      var container = this.get('container'),
+        content = this.get('content');
+
+      SC.Logger.log('%@ (%@)(%@, %@) — entered callback'.fmt(this, this.state, container, content));
+    }
     //@endif
+
+    if (this.state === 'entering') {
+      this.gotoReadyState();
     }
   },
 
-  doExit: function (immediately) {
+  doExit: function (immediately, newContent) {
     if (this.state !== 'exited') {
-      this.gotoExitingState(immediately);
+      this.gotoExitingState(immediately, newContent);
     //@if(debug)
     } else {
-      SC.error('Developer Error: SC.ContainerView should not receive an internal doExit event while in exited state.');
+      throw new Error('Developer Error: SC.ContainerView should not receive an internal doExit event while in exited state.');
     //@endif
     }
+
+    // If the new content matches our own content, indicate this to the container.
+    if (this.get('content') === newContent) {
+      return true;
+    } else {
+      return false;
+    }
   },
 
   exited: function () {
-    if (this.state === 'exiting') {
-      this.gotoExitedState();
     //@if(debug)
-    } else {
-      SC.error('Developer Error: SC.ContainerView should not receive an internal exited event while not in exiting state.');
+    if (SC.LOG_CONTAINER_CONTENT_STATES) {
+      var container = this.get('container'),
+        content = this.get('content');
+
+      SC.Logger.log('%@ (%@)(%@, %@) — exited callback'.fmt(this, this.state, container, content));
+    }
     //@endif
+
+    if (this.state === 'exiting') {
+      this.gotoExitedState();
     }
   },
 
@@ -426,20 +468,38 @@ SC.ContainerContentStatechart = SC.Object.extend({
       options = container.get('transitionSwapOptions') || {},
       transitionSwap = container.get('transitionSwap');
 
-    // Assign the state.
-    this.state = 'entering';
+    //@if(debug)
+    if (SC.LOG_CONTAINER_CONTENT_STATES) {
+      SC.Logger.log('%@ (%@)(%@, %@) — Entering (Previous: %@)'.fmt(this, this.state, container, content, previousStatechart));
+    }
+    //@endif
+
+    // If currently in the exiting state, reverse to entering.
+    if (this.state === 'exiting' && transitionSwap.reverseBuildOut) {
+      transitionSwap.reverseBuildOut(this, container, content, options);
 
-    if (!!content) {
+      // Assign the state.
+      this.set('state', 'entering');
+
+      // Fast path!!
+      return;
+    } else if (content) {
       container.appendChild(content);
     }
 
+    // Assign the state.
+    this.set('state', 'entering');
+
     // Don't transition unless there is a previous statechart.
-    if (!!previousStatechart && !!content && !!transitionSwap) {
-      if (!!transitionSwap.willBuildInToView) {
+    if (previousStatechart && content && transitionSwap) {
+      if (transitionSwap.willBuildInToView) {
         transitionSwap.willBuildInToView(container, content, previousStatechart, options);
       }
-      if (!!transitionSwap.buildInToView) {
+
+      if (transitionSwap.buildInToView) {
         transitionSwap.buildInToView(this, container, content, previousStatechart, options);
+      } else {
+        this.entered();
       }
     } else {
       this.entered();
@@ -454,31 +514,39 @@ SC.ContainerContentStatechart = SC.Object.extend({
       options = container.get('transitionSwapOptions') || {},
       transitionSwap = container.get('transitionSwap');
 
-    if (!immediately && !!content && !!transitionSwap) {
-      if (this.state === 'entering') {
-        if (!!transitionSwap.buildInDidCancel) {
-          transitionSwap.buildInDidCancel(container, content, options);
-        }
-      } else if (this.state === 'exiting') {
-        if (!!transitionSwap.buildOutDidCancel) {
-          transitionSwap.buildOutDidCancel(container, content, options);
-        }
-      }
+    //@if(debug)
+    if (SC.LOG_CONTAINER_CONTENT_STATES) {
+      if (!exitCount) { exitCount = this._exitCount = 1; }
+      SC.Logger.log('%@ (%@)(%@, %@) — Exiting (x%@)'.fmt(this, this.state, container, content, this._exitCount));
+    }
+    //@endif
+
+    // If currently in the entering state, reverse to exiting.
+    if (this.state === 'entering' && transitionSwap.reverseBuildIn) {
+      transitionSwap.reverseBuildIn(this, container, content, options);
+
+      // Assign the state.
+      this.set('state', 'exiting');
+
+      // Fast path!!
+      return;
     }
 
     // Assign the state.
-    this.state = 'exiting';
+    this.set('state', 'exiting');
 
-    if (!immediately && !!content && !!transitionSwap) {
+    if (!immediately && content && transitionSwap) {
       // Re-entering the exiting state may need to accelerate the transition, pass the count to the plugin.
       if (!exitCount) { exitCount = this._exitCount = 1; }
 
-      if (!!transitionSwap.willBuildOutFromView) {
+      if (transitionSwap.willBuildOutFromView) {
         transitionSwap.willBuildOutFromView(container, content, options, exitCount);
       }
 
-      if (!!transitionSwap.buildOutFromView) {
+      if (transitionSwap.buildOutFromView) {
         transitionSwap.buildOutFromView(this, container, content, options, exitCount);
+      } else {
+        // this.exited();
       }
 
       // Increment the exit count each time doExit is called.
@@ -495,11 +563,15 @@ SC.ContainerContentStatechart = SC.Object.extend({
       options = container.get('transitionSwapOptions') || {},
       transitionSwap = container.get('transitionSwap');
 
-    if (!!content) {
-      if (transitionSwap) {
-        if (!!transitionSwap.didBuildOutFromView) {
-          transitionSwap.didBuildOutFromView(container, content, options);
-        }
+    //@if(debug)
+    if (SC.LOG_CONTAINER_CONTENT_STATES) {
+      SC.Logger.log('%@ (%@)(%@, %@) — Exited'.fmt(this, this.state, container, content));
+    }
+    //@endif
+
+    if (content) {
+      if (transitionSwap && transitionSwap.didBuildOutFromView) {
+        transitionSwap.didBuildOutFromView(container, content, options);
       }
 
       if (content.createdByParent) {
@@ -512,8 +584,11 @@ SC.ContainerContentStatechart = SC.Object.extend({
     // Send ended event to container view statechart.
     container.statechartEnded(this);
 
+    // Reset the exiting count.
+    this._exitCount = 0;
+
     // Assign the state.
-    this.state = 'exited';
+    this.set('state', 'exited');
   },
 
   // Ready
@@ -523,17 +598,21 @@ SC.ContainerContentStatechart = SC.Object.extend({
       options = container.get('transitionSwapOptions') || {},
       transitionSwap = container.get('transitionSwap');
 
-    if (content && transitionSwap) {
-      if (!!transitionSwap.didBuildInToView) {
-        transitionSwap.didBuildInToView(container, content, options);
-      }
+    //@if(debug)
+    if (SC.LOG_CONTAINER_CONTENT_STATES) {
+      SC.Logger.log('%@ (%@)(%@, %@) — Entered'.fmt(this, this.state, container, content));
+    }
+    //@endif
+
+    if (content && transitionSwap && transitionSwap.didBuildInToView) {
+      transitionSwap.didBuildInToView(container, content, options);
     }
 
     // Send ready event to container view statechart.
     container.statechartReady();
 
     // Assign the state.
-    this.state = 'ready';
+    this.set('state', 'ready');
   }
 
 });

data/lib/frameworks/sproutcore/frameworks/foundation/views/field.js

@@ -168,14 +168,22 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
     this.setFieldValue(this.get('fieldValue'));
   }.observes('fieldValue'),
 
-  /** @private
-    after the layer is created, set the field value and observe events
+  /**
+    SC.View view state callback.
+
+    After the layer is created, set the field value and begin observing
+    change events on the input field.
   */
   didCreateLayer: function() {
     this.setFieldValue(this.get('fieldValue'));
     this._addChangeEvent();
   },
 
+  /**
+    SC.View state callback.
+
+    Removes the change event from the input field.
+  */
   willDestroyLayer: function() {
     SC.Event.remove(this.$input(), 'change', this, this._field_fieldValueDidChange);
   },
@@ -200,6 +208,8 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
   // Override these primitives in your subclass as required.
 
   /**
+    SC.RootResponder event handler.
+
     Allow the browser to do its normal event handling for the mouse down
     event.  But first, set isActive to YES.
   */
@@ -209,7 +219,9 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
     return YES;
   },
 
-  /** @private
+  /**
+    SC.RootResponder event handler.
+
     Remove the active class on mouseExited if mouse is down.
   */
   mouseExited: function(evt) {
@@ -218,7 +230,9 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
     return YES;
   },
 
-  /** @private
+  /**
+    SC.RootResponder event handler.
+
     If mouse was down and we renter the button area, set the active state again.
   */
   mouseEntered: function(evt) {
@@ -227,8 +241,10 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
     return YES;
   },
 
-  /** @private
-    on mouse up, remove the isActive class and then allow the browser to do
+  /**
+    SC.RootResponder event handler.
+
+    On mouse up, remove the isActive class and then allow the browser to do
     its normal thing.
   */
   mouseUp: function(evt) {
@@ -239,7 +255,9 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
     return YES ;
   },
 
-  /** @private
+  /**
+    SC.RootResponder event handler.
+
     Simply allow keyDown & keyUp to pass through to the default web browser
     implementation.
   */
@@ -264,16 +282,22 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
     return YES;
   },
 
-  /** tied to the isEnabledInPane state */
+  /**
+    Override of SC.Responder.prototype.acceptsFirstResponder.
+
+    Tied to the `isEnabledInPane` state.
+  */
   acceptsFirstResponder: function() {
     if (SC.FOCUS_ALL_CONTROLS) { return this.get('isEnabledInPane'); }
     return NO;
   }.property('isEnabledInPane'),
 
+  /** @private */
   _addChangeEvent: function() {
     SC.Event.add(this.$input(), 'change', this, this._field_fieldValueDidChange);
   },
 
+  /** @private */
   // these methods use the validator to convert the raw field value returned
   // by your subclass into an object and visa versa.
   _field_setFieldValue: function(newValue) {
@@ -286,6 +310,7 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
     return ret ;
   },
 
+  /** @private */
   _field_getFieldValue: function() {
     var ret = this.getFieldValue() ;
     if (this.objectForFieldValue) ret = this.objectForFieldValue(ret);