sproutcore 1.9.2 → 1.10.0.rc.1

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

@@ -0,0 +1,203 @@
+// ==========================================================================
+// Project:   SproutCore
+// Copyright: @2013 7x7 Software, Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+
+SC.mixin(SC.View,
+  /** @scope SC.View */ {
+
+  /** @class
+
+    @extends SC.ViewTransitionProtocol
+    @since Version 1.10
+  */
+  SPRING_IN: {
+
+    /** @private */
+    setup: function (view, options, inPlace) {
+      var parentView = view.get('parentView'),
+        parentFrame,
+        viewFrame = view.get('borderFrame'),
+        left,
+        top;
+
+      if (inPlace) {
+        // Move from the current position.
+      } else {
+        // If there is no parentView, use the window's frame.
+        if (parentView) {
+          parentFrame = parentView.get('borderFrame');
+        } else {
+          parentFrame = SC.RootResponder.responder.currentWindowSize;
+        }
+
+        switch (options.direction) {
+        case 'left':
+          left = parentFrame.width;
+          break;
+        case 'up':
+          top = parentFrame.height;
+          break;
+        case 'down':
+          top = -viewFrame.height;
+          break;
+        default:
+          left = -viewFrame.width;
+        }
+      }
+
+      view.adjust({ centerX: null, centerY: null, bottom: null, left: left || viewFrame.x, right: null, top: top || viewFrame.y, height: viewFrame.height, width: viewFrame.width });
+    },
+
+    /** @private */
+    run: function (view, options, finalLayout, finalFrame) {
+      var layout = view.get('layout'),
+        springiness = options.springiness || 0.25,
+        spring,
+        duration,
+        frames,
+        finalValue,
+        spring1, spring2, spring3,
+        value;
+
+      switch (options.direction) {
+      case 'left':
+        finalValue = finalFrame.x;
+        value = { left: finalValue };
+        spring = (layout.left - finalValue) * springiness;
+        spring1 = { left: finalValue - spring };
+        spring2 = { left: finalValue + (spring * 0.5) };
+        spring3 = { left: finalValue - (spring * 0.25) };
+        break;
+      case 'up':
+        finalValue = finalFrame.y;
+        value = { top: finalValue };
+        spring = (layout.top - finalValue) * springiness;
+        spring1 = { top: finalValue - spring };
+        spring2 = { top: finalValue + (spring * 0.5) };
+        spring3 = { top: finalValue - (spring * 0.25) };
+        break;
+      case 'down':
+        finalValue = finalFrame.y;
+        value = { top: finalValue };
+        spring = (finalValue - layout.top) * springiness;
+        spring1 = { top: finalValue + spring };
+        spring2 = { top: finalValue - (spring * 0.5) };
+        spring3 = { top: finalValue + (spring * 0.25) };
+        break;
+      default:
+        finalValue = finalFrame.x;
+        value = { left: finalValue };
+        spring = (finalValue - layout.left) * springiness;
+        spring1 = { left: finalValue + spring };
+        spring2 = { left: finalValue - (spring * 0.5) };
+        spring3 = { left: finalValue + (spring * 0.25) };
+      }
+
+      // Split the duration evenly per frame.
+      duration = options.duration || 0.4;
+      duration = duration * 0.25;
+
+      // Define the frames.
+      frames = [
+        { value: spring1, duration: duration, timing: 'ease-out' }, // Overshoot.
+        { value: spring2, duration: duration, timing: 'ease-in-out' }, // Overshoot back.
+        { value: spring3, duration: duration, timing: 'ease-in-out' }, // Overshoot.
+        { value: value, duration: duration, timing: 'ease-in-out' } // Hit target.
+      ];
+
+      var callback = function () {
+        view.didTransitionIn();
+      };
+
+      // Animate through the frames.
+      view._animateFrames(frames, callback, options.delay || 0);
+    }
+  },
+
+  /** @class
+
+    @extends SC.ViewTransitionProtocol
+    @since Version 1.10
+  */
+  SPRING_OUT: {
+
+    /** @private */
+    setup: function (view, options) {
+      var viewFrame = view.get('borderFrame'),
+        left = viewFrame.x,
+        top = viewFrame.y,
+        height = viewFrame.height,
+        width = viewFrame.width;
+
+      view.adjust({ centerX: null, centerY: null, bottom: null, left: left, right: null, top: top, height: height, width: width });
+    },
+
+    /** @private */
+    run: function (view, options, finalLayout, finalFrame) {
+      var springiness = options.springiness || 0.25,
+        duration,
+        finalValue,
+        frames,
+        layout = view.get('layout'),
+        viewFrame = view.get('borderFrame'),
+        parentView = view.get('parentView'),
+        parentFrame,
+        spring,
+        spring1, spring2;
+
+      // If there is no parentView, use the window's frame.
+      if (parentView) {
+        parentFrame = parentView.get('borderFrame');
+      } else {
+        parentFrame = SC.RootResponder.responder.currentWindowSize;
+      }
+
+      switch (options.direction) {
+      case 'left':
+        finalValue = { left: -viewFrame.width };
+        spring = (layout.left + viewFrame.width) * springiness;
+        spring1 = { left: layout.left - (spring * 0.5) };
+        spring2 = { left: layout.left + spring };
+        break;
+      case 'up':
+        finalValue = { top: -viewFrame.height };
+        spring = (layout.top + viewFrame.height) * springiness;
+        spring1 = { top: layout.top - (spring * 0.5) };
+        spring2 = { top: layout.top + spring };
+        break;
+      case 'down':
+        finalValue = { top: parentFrame.height };
+        spring = (parentFrame.height - layout.top) * springiness;
+        spring1 = { top: layout.top + (spring * 0.5) };
+        spring2 = { top: layout.top - spring };
+        break;
+      default:
+        finalValue = { left: parentFrame.width };
+        spring = (parentFrame.width - layout.left) * springiness;
+        spring1 = { left: layout.left + (spring * 0.5) };
+        spring2 = { left: layout.left - spring };
+      }
+
+      // Split the duration evenly per frame.
+      duration = options.duration || 0.3;
+      duration = duration * 0.33;
+
+      // Define the frames.
+      frames = [
+        { value: spring1, duration: duration, timing: 'ease-in-out' },
+        { value: spring2, duration: duration, timing: 'ease-in-out' },
+        { value: finalValue, duration: duration, timing: 'ease-in' }
+      ];
+
+      var callback = function () {
+        view.didTransitionOut();
+      };
+
+      // Animate through the frames.
+      view._animateFrames(frames, callback, options.delay || 0);
+    }
+  }
+});

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

@@ -0,0 +1,67 @@
+// ==========================================================================
+// Project:   SproutCore
+// Copyright: @2013 7x7 Software, Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+sc_require('views/container');
+
+
+SC.mixin(SC.ContainerView,
+/** @scope SC.ContainerView */ {
+
+  /** @class
+    Provides dissolve transitions for SC.ContainerView.  The new content will
+    fade in as the old content fades out of the view.
+
+    To modify the dissolve animation, you can set the following transition
+    options:
+
+      - duration {Number} the number of seconds for the animation.  Default: 0.4
+      - timing {String} the animation timing function.  Default: 'ease'
+
+    @extends SC.ViewTransitionProtocol
+    @see SC.View#animate for other timing functions.
+    @since Version 1.10
+  */
+  DISSOLVE: {
+
+    /** @private */
+    willBuildInToView: function (container, content, previousStatechart, options) {
+      content.adjust({ opacity: 0 });
+    },
+
+    /** @private */
+    buildInToView: function (statechart, container, content, previousStatechart, options) {
+      content.animate('opacity', 1, {
+        duration: options.duration || 0.4,
+        timing: options.timing || 'ease'
+      }, function (data) {
+        // We may already be in exiting state by the time we transition in.
+        if (statechart.get('state') === 'entering') {
+          statechart.entered();
+        }
+      });
+    },
+
+    /** @private */
+    buildOutFromView: function (statechart, container, content, options, exitCount) {
+      // We can call this transition repeatedly without effecting the current exit transition.
+      if (exitCount == 1) {
+        // Fade the current content at the same time.
+        content.animate('opacity', 0, {
+          duration: options.duration || 0.4,
+          timing: options.timing || 'ease'
+        }, function (data) {
+          statechart.exited();
+        });
+      }
+    },
+
+    /** @private */
+    didBuildOutFromView: function (container, content, options) {
+      // Reset the opacity in case this view is used elsewhere.
+      content.adjust({ opacity: 1 });
+    }
+
+  }
+});

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

@@ -0,0 +1,81 @@
+// ==========================================================================
+// Project:   SproutCore
+// Copyright: @2013 7x7 Software, Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+sc_require('views/container');
+
+
+SC.mixin(SC.ContainerView,
+/** @scope SC.ContainerView */ {
+
+ /** @class
+    Provides fade through color transitions to SC.ContainerView.  The old
+    content will fade out to a color and the new content will then fade in.
+
+    To modify the fade through color animation, you can set the following
+    transition options:
+
+      - color {String} any valid CSS Color.  Default: 'black'
+      - duration {Number} the number of seconds for the animation.  Default: 0.4
+      - timing {String} the animation timing function.  Default: 'ease'
+
+    @extends SC.ViewTransitionProtocol
+    @see SC.View#animate for other timing functions.
+    @since Version 1.10
+  */
+  FADE_COLOR: {
+
+    /** @private */
+    willBuildInToView: function (container, content, previousStatechart, options) {
+      var color,
+        colorView;
+
+      content.adjust({ opacity: 0 });
+
+      // Create a color view to fade through.
+      color = SC.Color.from(options.color || 'black');
+      colorView = SC.View.create({
+        layout: { opacity: 0, zIndex: 1 },
+        render: function (context) {
+          context.addStyle('background-color', color.get('cssText'));
+        }
+      });
+      container.appendChild(colorView);
+    },
+
+    /** @private */
+    buildInToView: function (statechart, container, content, previousStatechart, options) {
+      var childViews = container.get('childViews'),
+        colorView;
+
+      colorView = childViews.objectAt(childViews.get('length') - 1);
+
+      // Fade the color in (uses half the total duration)
+      colorView.animate('opacity', 1, {
+        duration: options.duration * 0.5 || 0.4,
+        timing: options.timing || 'ease-in'
+      }, function () {
+        // Show new content, then fade the color out.
+        content.adjust('opacity', 1);
+
+        colorView.animate('opacity', 0, {
+          duration: options.duration * 0.5 || 0.4,
+          timing: options.timing || 'ease-in'
+        }, function (data) {
+          // It's best to clean up the colorView here rather than try to find it again on teardown,
+          // since multiple color views could be added.
+          container.removeChild(this);
+          this.destroy();
+
+          // We may already be in exiting state by the time we transition in.
+          if (statechart.get('state') === 'entering') {
+            statechart.entered();
+          }
+        });
+      });
+    }
+
+  }
+
+});

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

@@ -0,0 +1,104 @@
+// ==========================================================================
+// Project:   SproutCore
+// Copyright: @2013 7x7 Software, Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+sc_require('views/container');
+
+
+SC.mixin(SC.ContainerView,
+/** @scope SC.ContainerView */ {
+
+   /** @class
+    Provides move in transitions to SC.ContainerView.  The new content will
+    move in over top of the old content.
+
+    To modify the move in animation, you can set the following transition
+    options:
+
+      - direction {String} the direction to move new content in.  Default: 'left'.
+        ** 'left' - moves new content from the right to the left
+        ** 'right' - moves new content from the left to the right
+        ** 'up' - moves new content from the bottom to the top
+        ** 'down' - moves new content from the top to the bottom
+      - duration {Number} the number of seconds for the animation.  Default: 0.4
+      - timing {String} the animation timing function.  Default: 'ease'
+
+    @extends SC.ViewTransitionProtocol
+    @see SC.View#animate for other timing functions.
+    @since Version 1.10
+  */
+  MOVE_IN: {
+
+    /** @private */
+    willBuildInToView: function (container, content, previousStatechart, options) {
+      var frame = container.get('frame'),
+        left,
+        top,
+        height,
+        width;
+
+      height = frame.height;
+      width = frame.width;
+
+      switch (options.direction) {
+      case 'right':
+        left = -width;
+        break;
+      case 'up':
+        top = height;
+        break;
+      case 'down':
+        top = -height;
+        break;
+      default:
+        left = width;
+      }
+
+      content.adjust({ bottom: null, left: left || 0, right: null, top: top || 0, height: height, width: width });
+    },
+
+    /** @private */
+    buildInToView: function (statechart, container, content, previousStatechart, options) {
+      var key,
+        value;
+
+      switch (options.direction) {
+      case 'right':
+        key = 'left';
+        break;
+      case 'up':
+        key = 'top';
+        break;
+      case 'down':
+        key = 'top';
+        break;
+      default:
+        key = 'left';
+      }
+
+      content.animate(key, 0, {
+        duration: options.duration || 0.4,
+        timing: options.timing || 'ease'
+      }, function (data) {
+        // We may already be in exiting state by the time we transition in.
+        if (statechart.get('state') === 'entering') {
+          statechart.entered();
+        }
+      });
+    },
+
+    /** @private */
+    didBuildInToView: function (container, content, options) {
+      // Convert to a flexible layout.
+      content.adjust({ bottom: 0, right: 0, height: null, width: null });
+    },
+
+    /** @private */
+    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 });
+    }
+  }
+
+});