sproutcore 1.9.2 → 1.10.0.rc.1

data/lib/frameworks/sproutcore/frameworks/foundation/mixins/gesturable.js

@@ -107,7 +107,7 @@ SC.Gesturable = {
       
       // if it was not found, well, that's an error.
       if (!g) {
-        throw "Could not find gesture named '" + gestures[idx] + "' on view.";
+        throw new Error("Could not find gesture named '" + gestures[idx] + "' on view.");
       }
       
       // if it is a class, instantiate (it really ought to be a class...)

data/lib/frameworks/sproutcore/frameworks/foundation/mixins/inline_editable.js

@@ -191,7 +191,7 @@ SC.InlineEditable = {
     @params {SC.InlineEditor} the editor for the view
     @params {Object} the initial value of the editor
   */
-  inlineEditorWillCommmitEditing: function(editor, value, editable) {
+  inlineEditorWillCommitEditing: function(editor, value, editable) {
     if(this.inlineEditorWillEndEditing) this.inlineEditorWillEndEditing(editor, value);
   },
 

data/lib/frameworks/sproutcore/frameworks/foundation/mixins/inner_frame.js

@@ -27,7 +27,7 @@ SC.FILL = "fill";
   @type String
   @constant
 */
-SC.FILL_PROPORTIONALLY = "fillProportionally";
+SC.FILL_PROPORTIONALLY = SC.BEST_FILL = "best-fill";
 
 /**
   Stretch/shrink the shape to fit the frame while maintaining aspect ratio, such that the
@@ -36,7 +36,7 @@ SC.FILL_PROPORTIONALLY = "fillProportionally";
   @type String
   @constant
 */
-SC.BEST_FIT = "fitBest";
+SC.BEST_FIT = "best-fit";
 
 /**
   Shrink the shape to fit the frame while maintaining aspect ratio, such that
@@ -46,7 +46,7 @@ SC.BEST_FIT = "fitBest";
   @type String
   @constant
 */
-SC.BEST_FIT_DOWN_ONLY = "fitBestDown";
+SC.BEST_FIT_DOWN_ONLY = "best-fit-down";
 
 /**
   @namespace
@@ -103,7 +103,7 @@ SC.InnerFrame = {
     scaleY = destHeight / sourceHeight;
 
     switch (scale) {
-      case SC.FILL_PROPORTIONALLY:
+      case SC.BEST_FILL:
         scale = scaleX > scaleY ? scaleX : scaleY;
         break;
       case SC.BEST_FIT:
@@ -121,7 +121,7 @@ SC.InnerFrame = {
         break;
       default: // Number
         if (isNaN(window.parseFloat(scale)) || (window.parseFloat(scale) <= 0)) {
-          SC.Logger.warn("SC.InnerFrame: The scale '%@' was not understood.  Scale must be one of SC.FILL, SC.FILL_PROPORTIONALLY, SC.BEST_FIT, SC.BEST_FIT_DOWN_ONLY or a positive number greater than 0.00.".fmt(scale));
+          SC.Logger.warn("SC.InnerFrame: The scale '%@' was not understood.  Scale must be one of SC.FILL, SC.BEST_FILL, SC.BEST_FIT, SC.BEST_FIT_DOWN_ONLY or a positive number greater than 0.00.".fmt(scale));
 
           // Don't attempt to scale or offset the image
           return result;
@@ -168,9 +168,11 @@ SC.InnerFrame = {
         result.y = destHeight - sourceHeight;
         break;
       default: // SC.ALIGN_CENTER || SC.ALIGN_MIDDLE
+        //@if(debug)
         if (align !== SC.ALIGN_CENTER && align !== SC.ALIGN_MIDDLE) {
           SC.Logger.warn("SC.InnerFrame: The align '%@' was not understood.  Align must be one of SC.ALIGN_CENTER/SC.ALIGN_MIDDLE, SC.ALIGN_LEFT, SC.ALIGN_RIGHT, SC.ALIGN_TOP, SC.ALIGN_BOTTOM, SC.ALIGN_TOP_LEFT, SC.ALIGN_TOP_RIGHT, SC.ALIGN_BOTTOM_LEFT or SC.ALIGN_BOTTOM_RIGHT.".fmt(align));
         }
+        //@endif
         result.x = (destWidth / 2) - (sourceWidth / 2);
         result.y = (destHeight / 2) - (sourceHeight / 2);
     }
@@ -180,10 +182,10 @@ SC.InnerFrame = {
 
   /**
     Determines how the shape will scale to fit within its containing space. Possible values:
-    
+
       - SC.SCALE_NONE
       - SC.FILL
-      - SC.FILL_PROPORTIONALLY
+      - SC.BEST_FILL
       - SC.BEST_FIT
       - SC.BEST_FIT_DOWN_ONLY
 
@@ -191,4 +193,4 @@ SC.InnerFrame = {
     @default SC.FILL
   */
   scale: SC.FILL
-};
+};

data/lib/frameworks/sproutcore/frameworks/foundation/mixins/static_layout.js

@@ -6,70 +6,77 @@
 // ==========================================================================
 
 /**
-  @namespace 
+  @namespace
 
-  SC.StaticLayout is now built in to SC.View.  You do not need to 
+  SC.StaticLayout is now built in to SC.View.  You do not need to
   apply this mixin to use static layout.  Just set useStaticLayout to YES.
-  
-  
-  
+
+
+
   Normally, SproutCore views use absolute positioning to display themselves
-  on the screen.  While this is both the fastest and most efficient way to 
+  on the screen.  While this is both the fastest and most efficient way to
   display content in the web browser, sometimes your user interface might need
   to take advantage of the more advanced "flow" layout offered by the browser
   when you use static and relative positioning.
-  
-  This mixin can be added to a view class to enable the use of any kind of 
+
+  This mixin can be added to a view class to enable the use of any kind of
   static and relative browser positioning.  In exchange for using static
   layout, you will lose a few features that are normally available on a view
-  class such as the 'frame' and 'clippingFrame' properties as well as 
+  class such as the 'frame' and 'clippingFrame' properties as well as
   notifications when your view or parentView are resized.
-  
+
   Normally, if you are allowing the browser to manage the size and positioning
   of your view, these feature will not be useful to your code anyway.
-  
+
   ## Using StaticLayout
-  
+
   To enable static layout on your view, just include this mixin on the view.
-  SproutCore's builtin views that are capable of being used in static 
-  layouts already incorporate this mixin.  Then set the "useStaticLayout" 
+  SproutCore's builtin views that are capable of being used in static
+  layouts already incorporate this mixin.  Then set the "useStaticLayout"
   property on your view class to YES.
-  
-  You can then use CSS or the render() method on your view to setup the 
+
+  You can then use CSS or the render() method on your view to setup the
   positioning on your view using any browser layout mechanism you want.
-  
+
   ## Example
-  
+
       // JavaScript
-    
+
       MyApp.CommentView = SC.View.extend(SC.StaticLayout, {
-    
+
         classNames: ['comment-view'],
-      
+
         useStaticLayout: YES,
 
         ...
       });
-    
+
       // CSS
-    
+
       .comment-view {
         display: block;
         position: relative;
       }
-  
+
+  @deprecated Version 1.10
   @since SproutCore 1.0
 */
 SC.StaticLayout = {
-  
+
   /**
-    Walk like a duck.  Used to determine that this mixin has been applied.  
+    Walk like a duck.  Used to determine that this mixin has been applied.
     Note that a view that hasStaticLayout still may not actually use static
     layout unless useStaticLayout is also set to YES.
-    
+
     @type Boolean
     @default YES
   */
-  hasStaticLayout: YES
-  
+  hasStaticLayout: YES,
+
+  initMixin: function () {
+    //@if(debug)
+    SC.warn("The SC.StaticLayout mixin code is included in SC.View directly now and the mixin has been deprecated.  Please do not mix it into your views.");
+    //@endif
+  }
+
 };

data/lib/frameworks/sproutcore/frameworks/foundation/private/tree_item_observer.js

@@ -248,7 +248,7 @@ SC.TreeItemObserver = SC.Object.extend(SC.Array, SC.CollectionContent, {
     // adjust the start location based on branches, possibly passing on to an
     // observer.
     if (this.get('isHeaderVisible')) cur--; // exclude my own header item
-    if (cur < 0) throw "Tree Item cannot replace itself";
+    if (cur < 0) throw new Error("Tree Item cannot replace itself");
 
     // remove branch lengths.  If the adjusted start location lands inside of
     // another branch, then just let that observer handle it.
@@ -295,10 +295,10 @@ SC.TreeItemObserver = SC.Object.extend(SC.Array, SC.CollectionContent, {
     // ok, now that we are adjusted, get the children and forward the replace
     // call on.  if there are no children, bad news...
     var children = this.get('children');
-    if (!children) throw "cannot replace() tree item with no children";
+    if (!children) throw new Error("cannot replace() tree item with no children");
 
     if ((amt < 0) || (max>children.get('length'))) {
-      throw "replace() range must lie within a single tree item";
+      throw new Error("replace() range must lie within a single tree item");
     }
 
     children.replace(cur, amt, objects, operation);
@@ -688,7 +688,7 @@ SC.TreeItemObserver = SC.Object.extend(SC.Array, SC.CollectionContent, {
     // begin all properties on item if there is one.  This will allow us to
     // track important property changes.
     var item = this.get('item');
-    if (!item) throw "SC.TreeItemObserver.item cannot be null";
+    if (!item) throw new Error("SC.TreeItemObserver.item cannot be null");
 
     item.addObserver('*', this, this._itemPropertyDidChange);
     this._itemPropertyDidChange(item, '*');

data/lib/frameworks/sproutcore/frameworks/foundation/protocols/swap_transition_protocol.js

@@ -0,0 +1,150 @@
+// ==========================================================================
+// Project:   SproutCore
+// Copyright: @2013 7x7 Software, Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+
+/** @namespace
+  This protocol defines the allowable transition plugin methods.
+
+  SC.ContainerView uses transition plugins to setup, execute and cleanup the
+  swapping between views and expects the given transition plugin object
+  to implement the methods in this protocol.
+*/
+SC.SwapTransitionProtocol = {
+
+  /**
+    This optional method is called to set up the entrance transition.
+
+    Use this method to adjust the layout of the container and new content so
+    that it may be properly animated.  For example, you may need to adjust the
+    content from a flexible layout (i.e. { left: 0, top: 0, right: 0, bottom: 0 })
+    to a fixed layout (i.e. { left: 0, top: 0, width: 100, height: 200 })
+    so that it can be moved.
+
+    @param {SC.ContainerView} container The SC.ContainerView using this plugin.
+    @param {SC.View} content The new view added to the container.
+    @param {SC.View} previousStatechart The current content statechart in the container.
+    @param {Object} options Options to modify the transition.
+  */
+  willBuildInToView: function (container, content, previousStatechart, options) {},
+
+  /**
+    This optional method is called to transition the new content in.
+
+    When the transition completes, the function must call the entered()
+    method on the statechart.
+
+    @param {SC.ContainerContentStatechart} statechart The statechart for the content view.
+    @param {SC.ContainerView} container The SC.ContainerView using this plugin.
+    @param {SC.View} content The new view added to the container.
+    @param {SC.View} previousStatechart The current content statechart in the container.
+    @param {Object} options Options to modify the transition.
+  */
+  buildInToView: function (statechart, container, content, previousStatechart, options) {},
+
+  /**
+    This optional method is called to cancel an active entrance transition.
+
+    Use this method to stop the animation and immediately clean up the views.
+
+    @param {SC.ContainerView} container The SC.ContainerView using this plugin.
+    @param {SC.View} content The new view in the container, which is still transitioning in.
+    @param {Object} options Options to modify the transition.
+  */
+  buildInDidCancel:  function (container, content, options) {},
+
+  /**
+    This optional method is called to clean up the entrance the transition.
+
+    Use this method to adjust the layout of the container and new content after
+    the transition completes.  For example, you may need to adjust the layout
+    from a fixed layout (i.e. { left: 0, top: 0, width: 100, height: 200 })
+    to a flexible layout (i.e. { left: 0, top: 0, right: 0, bottom: 0 }).
+
+    @param {SC.ContainerView} container The SC.ContainerView using this plugin.
+    @param {SC.View} content The new view added to the container.
+    @param {Object} options Options that were used to modify the transition.
+  */
+  didBuildInToView: function (container, content, options) {},
+
+  /**
+    This optional method is called to set up the exit transition.
+
+    Use this method to adjust the layout of the container and new content so
+    that it may be properly animated.  For example, you may need to adjust the
+    content from a flexible layout (i.e. { left: 0, top: 0, right: 0, bottom: 0 })
+    to a fixed layout (i.e. { left: 0, top: 0, width: 100, height: 200 })
+    so that it can be moved.
+
+    @param {SC.ContainerView} container The SC.ContainerView using this plugin.
+    @param {SC.View} content The old view being removed from the container.
+    @param {Object} options Options to modify the transition.
+  */
+  willBuildOutFromView: function (container, content, options) {},
+
+  /**
+    This optional method is called to transition the old content out.
+
+    When the transition completes, the function must call the exited()
+    method on the statechart.
+
+    Note that a view may be repeatedly built out before it has completed.  In
+    order to accelerate the build out transition, the exitCount parameter will
+    be incremented each time buildOutFromView is called.  The initial value
+    will always be 1.
+
+    @param {SC.ContainerContentStatechart} statechart The statechart for the content view.
+    @param {SC.ContainerView} container The SC.ContainerView using this plugin.
+    @param {SC.View} content The old view being removed from the container.
+    @param {Object} options Options to modify the transition.
+    @param {Number} exitCount The number of times the content is being built out.
+  */
+  buildOutFromView: function (statechart, container, content, options, exitCount) {},
+
+  /**
+    This optional method is called to cancel an active exit transition.
+
+    Use this method to stop the animation and immediately clean up the views.
+
+    @param {SC.ContainerView} container The SC.ContainerView using this plugin.
+    @param {SC.View} content The old view being removed from the container, which is still transitioning out.
+    @param {Object} options Options to modify the transition.
+  */
+  buildOutDidCancel: function (container, content, options) {},
+
+  /**
+    This optional method is called to clean up the entrance the transition.
+
+    Use this method to adjust the layout of the container and new content after
+    the transition completes.  For example, you may need to adjust the layout
+    from a fixed layout (i.e. { left: 0, top: 0, width: 100, height: 200 })
+    to a flexible layout (i.e. { left: 0, top: 0, right: 0, bottom: 0 }).
+
+    @param {SC.ContainerView} container The SC.ContainerView using this plugin.
+    @param {SC.View} content The new view added to the container.
+    @param {Object} options Options that were used to modify the transition.
+  */
+  didBuildOutFromView: function (container, content, options) {},
+
+  /**
+    This optional method is called to adjust the clippingFrame during the
+    transition.
+
+    Because some childViews are altered by the clippingFrame of their parent
+    views (notably collection views), we may need to provide a modified
+    clipping frame while the transition is in process.
+
+    For example, a push transition should double the regular clippingFrame
+    of the container to fit both the new and current content while the
+    transition is in progress.
+
+    @param {SC.ContainerView} container The SC.ContainerView using this plugin.
+    @param {Object} clippingFrame The current clippingFrame of the container.
+    @param {Object} options Options used to modify the transition.
+    @returns clippingFrame
+  */
+  transitionClippingFrame: function (container, clippingFrame, options) {}
+
+};

data/lib/frameworks/sproutcore/frameworks/foundation/render_delegates/canvas_image.js

@@ -32,7 +32,7 @@ sc_require('render_delegates/render_delegate');
           property. One of
             - SC.SCALE_NONE
             - SC.FILL
-            - SC.FILL_PROPORTIONALLY
+            - SC.BEST_FILL
             - SC.BEST_FIT
             - SC.BEST_FIT_DOWN_ONLY
             - percentage {Number}
@@ -57,15 +57,23 @@ SC.BaseTheme.canvasImageRenderDelegate = SC.RenderDelegate.create({
     We don't have an element yet, so we do the minimal necessary setup
     here.
   */
-  render: function(dataSource, context) {
+  render: function (dataSource, context) {
     var width = dataSource.get('width') || 0,
-        height = dataSource.get('height') || 0;
+        height = dataSource.get('height') || 0,
+        type = dataSource.get('type') || SC.IMAGE_TYPE_URL,
+        value = dataSource.get('value');
+
+    // Support for CSS sprites (TODO: Remove this)
+    if (value && type === SC.IMAGE_TYPE_CSS_CLASS) {
+      context.addClass(value);
+      dataSource.renderState._last_class = value;
+    }
 
-    context.attr('width', width);
-    context.attr('height', height);
+    context.setAttr('width', width);
+    context.setAttr('height', height);
   },
 
-  update: function(dataSource, jquery) {
+  update: function (dataSource, jquery) {
     var elem = jquery[0],
         image = dataSource.get('image'),
         frame = dataSource.get('frame'),
@@ -74,38 +82,55 @@ SC.BaseTheme.canvasImageRenderDelegate = SC.RenderDelegate.create({
         innerFrame = dataSource.get('innerFrame'),
         backgroundColor = dataSource.get('backgroundColor'),
         renderState = dataSource.get('renderState'),
-        context;
+        context,
+        lastClass = dataSource.renderState._last_class,
+        type = dataSource.get('type') || SC.IMAGE_TYPE_URL,
+        value = dataSource.get('value');
+
+    // Support for CSS sprites (TODO: Remove this)
+    if (lastClass) jquery.removeClass(lastClass);
+    if (value && type === SC.IMAGE_TYPE_CSS_CLASS) {
+      jquery.addClass(value);
+      dataSource.renderState._last_class = value;
+
+      // Clear the context in case there was a URL previously
+      if (elem && elem.getContext) {
+        context = elem.getContext('2d');
+        context.clearRect(0, 0, frameWidth, frameHeight);
+      }
+    } else {
 
-    // We only care about specific values, check specifically for what matters
-    var innerFrameDidChange = ![innerFrame.x, innerFrame.y, innerFrame.width, innerFrame.height].isEqual(renderState._lastInnerFrameValues),
-        elemSizeDidChange = ![elem.width, elem.height].isEqual(renderState._lastElemSizeValues),
-        backgroundDidChange = dataSource.didChangeFor('canvasImageRenderDelegate', 'backgroundColor'),
-        imageDidChange = dataSource.didChangeFor('canvasImageRenderDelegate', 'image') || (image && image.complete) !== renderState._lastImageComplete;
+      // We only care about specific values, check specifically for what matters
+      var innerFrameDidChange = ![innerFrame.x, innerFrame.y, innerFrame.width, innerFrame.height].isEqual(renderState._lastInnerFrameValues),
+          elemSizeDidChange = ![elem.width, elem.height].isEqual(renderState._lastElemSizeValues),
+          backgroundDidChange = dataSource.didChangeFor('canvasImageRenderDelegate', 'backgroundColor'),
+          imageDidChange = dataSource.didChangeFor('canvasImageRenderDelegate', 'image') || (image && image.complete) !== renderState._lastImageComplete;
 
-    if (elemSizeDidChange || innerFrameDidChange || backgroundDidChange || imageDidChange) {
+      if (elemSizeDidChange || innerFrameDidChange || backgroundDidChange || imageDidChange) {
 
-      if (elem && elem.getContext) {
-        elem.height = frameHeight;
-        elem.width = frameWidth;
+        if (elem && elem.getContext) {
+          elem.height = frameHeight;
+          elem.width = frameWidth;
 
-        context = elem.getContext('2d');
+          context = elem.getContext('2d');
 
-        context.clearRect(0, 0, frameWidth, frameHeight);
+          context.clearRect(0, 0, frameWidth, frameHeight);
 
-        if (backgroundColor) {
-          context.fillStyle = backgroundColor;
-          context.fillRect(0, 0, frameWidth, frameHeight);
-        }
+          if (backgroundColor) {
+            context.fillStyle = backgroundColor;
+            context.fillRect(0, 0, frameWidth, frameHeight);
+          }
 
-        if (image && image.complete) {
-          context.drawImage(image, Math.floor(innerFrame.x), Math.floor(innerFrame.y), Math.floor(innerFrame.width), Math.floor(innerFrame.height));
+          if (image && image.complete) {
+            context.drawImage(image, Math.floor(innerFrame.x), Math.floor(innerFrame.y), Math.floor(innerFrame.width), Math.floor(innerFrame.height));
+          }
         }
-      }
 
-      // Update caches
-      renderState._lastInnerFrameValues = [innerFrame.x, innerFrame.y, innerFrame.width, innerFrame.height];
-      renderState._lastElemSizeValues = [elem.width, elem.height];
-      renderState._lastImageComplete = image && image.complete;
+        // Update caches
+        renderState._lastInnerFrameValues = [innerFrame.x, innerFrame.y, innerFrame.width, innerFrame.height];
+        renderState._lastElemSizeValues = [elem.width, elem.height];
+        renderState._lastImageComplete = image && image.complete;
+      }
     }
   }