sproutcore 1.5.0 → 1.6.0.beta.1

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/platform.js

@@ -37,8 +37,8 @@ SC.platform = SC.Object.create({
 
   /*
     NOTES
-      - A development version of Chrome 9 incorrectly reported supporting touch
-      - Android is assumed to support touch, but incorrectly reports that it does not
+     - A development version of Chrome 9 incorrectly reported supporting touch
+     - Android is assumed to support touch, but incorrectly reports that it does not
   */
   /**
     YES if the current device supports touch events, NO otherwise.

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/render_context.js

@@ -259,40 +259,7 @@ SC.RenderContext = SC.Builder.create(/** SC.RenderContext.fn */ {
     @returns {DOMElement} the element
   */
   element: function() {
-    if (this._elem) return this._elem;
-
-    // create factory div if needed
-    var K       = SC.RenderContext,
-        factory = K.factory,
-        ret, child;
-
-    if (!factory) {
-      factory = K.factory = document.createElement('div');
-    }
-    factory.innerHTML = this.join();
-
-    // In IE something weird happens when reusing the same element.
-    // After setting innerHTML, the innerHTML of the element in the previous
-    // view turns blank.  It seems that there is something weird with their
-    // garbage  collection algorithm. I tried just removing the nodes after
-    // keeping a  reference to the first child, but it didn't work.  I ended
-    // up cloning the first child.
-    if (SC.browser.msie) {
-      if (factory.innerHTML.length > 0) {
-        child = factory.firstChild.cloneNode(true);
-        factory.innerHTML = '';
-      }
-      else {
-        child = null;
-      }
-    }
-    else {
-      // Faster path (avoiding the unnecessary node clone) for non-IE
-      // browsers.
-      child = factory.firstChild;
-    }
-
-    return child ;
+    return this._elem ? this._elem : SC.$(this.join())[0]
   },
 
   /**

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/root_responder.js

@@ -18,7 +18,7 @@ SC.CAPTURE_BACKSPACE_KEY = NO ;
   RootResponder directly.  Instead you will work with Pane objects, which
   register themselves with the RootResponder as needed to receive events.
 
-  h1. RootResponder and Platforms
+  ## RootResponder and Platforms
 
   RootResponder contains core functionality common among the different web
   platforms. You will likely be working with a subclass of RootResponder that
@@ -27,24 +27,24 @@ SC.CAPTURE_BACKSPACE_KEY = NO ;
   The correct instance of RootResponder is detected at runtime and loaded
   transparently.
 
-  h1. Event Types
+  ## Event Types
 
   RootResponders can route four types of events:
 
-  - Direct events, such as mouse and touch events.  These are routed to the
-    nearest view managing the target DOM elment. RootResponder also handles
-    multitouch events so that they are delegated to the correct views.
-  - Keyboard events. These are sent to the keyPane, which will then send the
-    event to the current firstResponder and up the responder chain.
-  - Resize events. When the viewport resizes, these events will be sent to all
-    panes.
-  - Keyboard shortcuts. Shortcuts are sent to the keyPane first, which
-    will go down its view hierarchy. Then they go to the mainPane, which will
-    go down its view hierarchy.
-  - Actions. Actions are generic messages that your application can send in
-    response to user action or other events. You can either specify an
-    explicit target, or allow the action to traverse the hierarchy until a
-    view is found that handles it.
+   - Direct events, such as mouse and touch events.  These are routed to the
+     nearest view managing the target DOM elment. RootResponder also handles
+     multitouch events so that they are delegated to the correct views.
+   - Keyboard events. These are sent to the keyPane, which will then send the
+     event to the current firstResponder and up the responder chain.
+   - Resize events. When the viewport resizes, these events will be sent to all
+     panes.
+   - Keyboard shortcuts. Shortcuts are sent to the keyPane first, which
+     will go down its view hierarchy. Then they go to the mainPane, which will
+     go down its view hierarchy.
+   - Actions. Actions are generic messages that your application can send in
+     response to user action or other events. You can either specify an
+     explicit target, or allow the action to traverse the hierarchy until a
+     view is found that handles it.
 */
 SC.RootResponder = SC.Object.extend({
 
@@ -406,7 +406,7 @@ SC.RootResponder = SC.Object.extend({
     the action name you pass to this method.  Set 'target' to null to search
     the responder chain.
 
-    IMPORTANT: This method's API and implementation will likely change
+    **IMPORTANT**: This method's API and implementation will likely change
     significantly after SproutCore 1.0 to match the version found in
     SC.ResponderContext.
 
@@ -959,7 +959,8 @@ SC.RootResponder = SC.Object.extend({
     for instance, prevent scrolling in a ScrollView, you need to make sure to transfer control
     back to the previous responder:
 
-    if (Math.abs(touch.pageY - touch.startY) > this.MAX_SWIPE) touch.restoreLastTouchResponder();
+        if (Math.abs(touch.pageY - touch.startY) > this.MAX_SWIPE)
+          touch.restoreLastTouchResponder();
 
     You don't call makeTouchResponder on RootResponder directly. Instead, it gets called for you
     when you return YES to captureTouch or touchStart.
@@ -968,14 +969,19 @@ SC.RootResponder = SC.Object.extend({
     a button view inside a ScrollView: if the touch moves too much, the button should give control back
     to the scroll view.
 
-    if (Math.abs(touch.pageX - touch.startX) > 4) {
-      if (touch.nextTouchResponder) touch.makeTouchResponder(touch.nextTouchResponder);
-    }
+        if (Math.abs(touch.pageX - touch.startX) > 4) {
+          if (touch.nextTouchResponder)
+            touch.makeTouchResponder(touch.nextTouchResponder);
+        }
 
     This will give control back to the containing view. Maybe you only want to do it if it is a ScrollView?
 
-    if (Math.abs(touch.pageX - touch.startX) > 4 && touch.nextTouchResponder && touch.nextTouchResponder.isScrollable)
-      touch.makeTouchResponder(touch.nextTouchResponder);
+        if (
+          Math.abs(touch.pageX - touch.startX) > 4 &&
+          touch.nextTouchResponder &&
+          touch.nextTouchResponder.isScrollable
+        )
+          touch.makeTouchResponder(touch.nextTouchResponder);
 
     Possible gotcha: while you can do touch.nextTouchResponder, the responders are not chained in a linked list like
     normal responders, because each touch has its own responder stack. To navigate through the stack (or, though

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/sparse_array.js

@@ -73,10 +73,12 @@ SC.SparseArray = SC.Object.extend(SC.Observable, SC.Enumerable, SC.Array,
     @returns {SC.SparseArray} receiver
   */
   provideLength: function(length) {
+    var oldLength;
     if (SC.none(length)) this._sa_content = null ;
     if (length !== this._length) {
+      oldLength = this._length;
       this._length = length ;
-      if (this._requestingLength <= 0) this.enumerableContentDidChange() ;
+      if (this._requestingLength <= 0) { this.arrayContentDidChange(0, oldLength||0, length||0) ; }
     }
     return this ;
   },
@@ -256,7 +258,7 @@ SC.SparseArray = SC.Object.extend(SC.Observable, SC.Enumerable, SC.Array,
     if (!content) content = this._sa_content = [] ;
     var start = range.start, len = range.length;
     while(--len >= 0) content[start+len] = array.objectAt(len);
-    if (this._requestingIndex <= 0) this.enumerableContentDidChange(range.start, range.length);
+    if (this._requestingIndex <= 0) this.arrayContentDidChange(range.start, range.length, range.length);
     return this ;
   },
 
@@ -299,7 +301,7 @@ SC.SparseArray = SC.Object.extend(SC.Observable, SC.Enumerable, SC.Array,
         while (--loc>=start) content[loc] = undefined;
       }
     }    
-    this.enumerableContentDidChange(range.start, range.length) ; // notify
+    this.arrayContentDidChange(range.start, range.length, range.length) ; // notify
     return this ;
   },
 
@@ -376,9 +378,11 @@ SC.SparseArray = SC.Object.extend(SC.Observable, SC.Enumerable, SC.Array,
     @returns {SC.SparseArray} receiver
   */
   reset: function() {
+    var oldLength;
     this._sa_content = null ;
+    oldLength = this._length;
     this._length = null ;
-    this.enumerableContentDidChange() ;
+    this.arrayContentDidChange(0, oldLength, 0);
     this.invokeDelegateMethod(this.delegate, 'sparseArrayDidReset', this);
     return this ;
   }

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/string.js

@@ -32,13 +32,12 @@ SC.mixin(SC.String, {
   /**
     Capitalizes a string.
 
-    h2. Examples
+    ## Examples
 
-    | *Input String* | *Output String* |
-    | my favorite items | My favorite items |
-    | css-class-name | Css-class-name |
-    | action_name | Action_name |
-    | innerHTML | InnerHTML |
+        capitalize('my favorite items') // 'My favorite items'
+        capitalize('css-class-name')    // 'Css-class-name'
+        capitalize('action_name')       // 'Action_name'
+        capitalize('innerHTML')         // 'InnerHTML'
 
     @return {String} capitalized string
   */
@@ -50,13 +49,12 @@ SC.mixin(SC.String, {
     Camelizes a string.  This will take any words separated by spaces, dashes
     or underscores and convert them into camelCase.
 
-    h2. Examples
+    ## Examples
 
-    | *Input String* | *Output String* |
-    | my favorite items | myFavoriteItems |
-    | css-class-name | cssClassName |
-    | action_name | actionName |
-    | innerHTML | innerHTML |
+        camelize('my favorite items') // 'myFavoriteItems'
+        camelize('css-class-name')    // 'cssClassName'
+        camelize('action_name')       // 'actionName'
+        camelize('innerHTML')         // 'innerHTML'
 
     @returns {String} camelized string
   */
@@ -74,13 +72,12 @@ SC.mixin(SC.String, {
   /**
     Converts a camelized string into all lower case separated by underscores.
 
-    h2. Examples
+    ## Examples
 
-    | *Input String* | *Output String* |
-    | my favorite items | my favorite items |
-    | css-class-name | css-class-name |
-    | action_name | action_name |
-    | innerHTML | inner_html |
+    decamelize('my favorite items') // 'my favorite items'
+    decamelize('css-class-name')    // 'css-class-name'
+    decamelize('action_name')       // 'action_name'
+    decamelize('innerHTML')         // 'inner_html'
 
     @returns {String} the decamelized string.
   */
@@ -92,13 +89,13 @@ SC.mixin(SC.String, {
     Converts a camelized string or a string with spaces or underscores into
     a string with components separated by dashes.
 
-    h2. Examples
+    ## Examples
 
     | *Input String* | *Output String* |
-    | my favorite items | my-favorite-items |
-    | css-class-name | css-class-name |
-    | action_name | action-name |
-    | innerHTML | inner-html |
+    dasherize('my favorite items') // 'my-favorite-items'
+    dasherize('css-class-name')    // 'css-class-name'
+    dasherize('action_name')       // 'action-name'
+    dasherize('innerHTML')         // 'inner-html'
 
     @returns {String} the dasherized string.
   */

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/system/sparse_array.js

@@ -199,3 +199,58 @@ SC.ArraySuite.generate("SC.SparseArray", {
     return SC.SparseArray.create({ delegate: del });
   }
 });
+
+test("should notify enumerable property", function() {
+    var arr = SC.SparseArray.create();
+    var count = 0;
+    function counter() {
+        count++;
+    }
+
+    arr.provideLength(1);
+    arr.addObserver('[]', this, counter);
+    arr.provideObjectAtIndex(0, 'one');
+    equals(count, 1, "observer should have fired once");
+});
+
+test("should notify range observers", function() {
+    var arr = SC.SparseArray.create();
+    var count = 0;
+    function counter(arr, objects, key, indexes) {
+        count++;
+    }
+
+    arr.provideLength(4);
+    var is = SC.IndexSet.create(0,1).add(2,1);
+    arr.addRangeObserver(is, this, counter);
+    arr.provideObjectAtIndex(0, 'one');
+    arr.provideObjectAtIndex(1, 'two');
+    arr.provideObjectAtIndex(2, 'three');
+    arr.provideObjectAtIndex(3, 'four');
+    equals(2, count, "observer should have fired twice");
+});
+
+test("test updating SparseArray length via delegate", function() {
+    var delegate = SC.Object.create({
+        arrlen: null,
+        sparseArrayDidRequestLength: function(arr) {
+            arr.provideLength(this.arrlen);
+        }
+    });
+
+    var arr = SC.SparseArray.create({delegate: delegate});
+    delegate.arrlen = 5;
+    equals(arr.get('length'), 5)
+    arr.provideLength(null);
+    delegate.arrlen = 50;
+    equals(arr.get('length'), 50)
+});
+
+test("test updating SparseArray length explictly", function() {
+    var arr = SC.SparseArray.create();
+    arr.provideLength(5);
+    equals(arr.get('length'), 5)
+    arr.provideLength(50);
+    equals(arr.get('length'), 50)
+});
+

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/template/collection.js

@@ -4,6 +4,8 @@
 //            ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
+/*globals TemplateTests */
+
 module("SC.TemplateCollectionView");
 
 TemplateTests = {};
@@ -24,7 +26,7 @@ test("creating a collection view works", function() {
   var ulCollectionView  = CollectionView.create({ tagName: "ul" });
   var olCollectionView  = CollectionView.create({ tagName: "ol" });
   var dlCollectionView  = CollectionView.create({ tagName: "dl", itemView: DefinitionTermChildView });
-  var customTagCollectionView = CollectionView.create({ tagName: "p" })
+  var customTagCollectionView = CollectionView.create({ tagName: "p" });
   
   defaultCollectionView.createLayer();
   ulCollectionView.createLayer();
@@ -48,6 +50,22 @@ test("creating a collection view works", function() {
   equals(customTagCollectionView.$('div').length, 1, "Child view was rendered");
 });
 
+test("not passing a block to the collection helper creates a collection", function() {
+  TemplateTests.CollectionTestView = SC.TemplateCollectionView.create({
+    content: ['foo', 'bar', 'baz'],
+    itemView: SC.TemplateView.design({
+      template: SC.Handlebars.compile('<aside></aside>')
+    })
+  });
+
+  var view = SC.TemplateView.create({
+    template: SC.Handlebars.compile('{{collection "TemplateTests.CollectionTestView"}}')
+  });
+
+  view.createLayer();
+  equals(view.$('aside').length, 3, 'one aside element is created for each content item');
+});
+
 test("passing a block to the collection helper sets it as the template for example views", function() {
   TemplateTests.CollectionTestView = SC.TemplateCollectionView.create({
     content: ['foo', 'bar', 'baz']
@@ -138,6 +156,36 @@ test("should give its item views the classBinding specified by itemClassBinding"
   equals(view.$('ul li.is-baz').length, 2, "removes class when property changes");
 });
 
+test("should pass item* property when created with a block", function() {
+  TemplateTests.CollectionTestView = SC.TemplateCollectionView.create({
+    content: ['foo', 'bar', 'baz']
+  });
+  var view = SC.TemplateView.create({
+    template: SC.Handlebars.compile('{{#collection TemplateTests.CollectionTestView itemFoo="bar"}}baz{{/collection}}')
+  });
+  view.createLayer();
+
+  var childViews = view.getPath('childViews.firstObject.childViews');
+  childViews.forEach(function(childView, index) {
+    equals(childView.get('foo'), 'bar', "Child view #%@ has correct value for property set in template".fmt(index));
+  });
+});
+
+test("should pass item* property when created without a block", function() {
+  TemplateTests.CollectionTestView = SC.TemplateCollectionView.create({
+    content: ['foo', 'bar', 'baz']
+  });
+  var view = SC.TemplateView.create({
+    template: SC.Handlebars.compile('{{collection TemplateTests.CollectionTestView itemFoo="bar"}}')
+  });
+  view.createLayer();
+
+  var childViews = view.getPath('childViews.firstObject.childViews');
+  childViews.forEach(function(childView, index) {
+    equals(childView.get('foo'), 'bar', "Child view #%@ has correct value for property set in template".fmt(index));
+  });
+});
+
 test("should work inside a bound {{#if}}", function() {
   var testData = [SC.Object.create({ isBaz: false }), SC.Object.create({ isBaz: true }), SC.Object.create({ isBaz: true })];
   TemplateTests.ifTestCollectionView = SC.TemplateCollectionView.extend({

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/template/handlebars.js

@@ -494,7 +494,7 @@ test("Should insert a localized string if the {{loc}} helper is used", function(
     'Brazil': 'Brasilia'
   });
 
-  templates = SC.Object.create({
+  var templates = SC.Object.create({
     'loc': SC.Handlebars.compile('<h1>Country: {{loc "Brazil"}}')
   });
 
@@ -776,6 +776,24 @@ test("should be able to bind view class names to properties", function() {
   });
 
   equals(view.$('.is-done').length, 0, "removes class name if bound property is set to false");
+
+  // There is a bug that if the view becomes first responder, its class bindings get wiped out.
+  // This test illustrates the bug, by adding the view to a pane and making it firstResponder
+
+  var pane = SC.MainPane.design();
+  pane = pane.create().append();
+
+  SC.run(function() {
+    pane.appendChild(view);
+  });
+
+  TemplateTests.classBindingView.becomeFirstResponder();
+
+  SC.run(function() {
+    TemplateTests.classBindingView.set('isDone', YES);
+  });
+
+  equals(view.$('.is-done').length, 1, "dasherizes property and sets class name after becoming first responder");
 });
 
 test("should be able to bind element attributes using {{bindAttr}}", function() {

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/template_collection.js

@@ -80,6 +80,8 @@ SC.TemplateCollectionView = SC.TemplateView.extend({
 
     if (this.get('tagName') === 'ul' || this.get('tagName') === 'ol') {
       extensions.tagName = 'li';
+    } else if (this.get('tagName') === 'table' || this.get('tagName') === 'thead' || this.get('tagName') === 'tbody') {
+      extensions.tagName = 'tr';
     }
 
     return itemView.extend(extensions);

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

@@ -35,9 +35,10 @@ SC.View.reopen(
 
     Takes a key, value and either a duration, or a hash of options.
     The options hash has the following parameters
-      - duration: Duration of animation in seconds
-      - callback: Callback method to run when animation completes
-      - timing: Animation timing function
+
+     - duration: Duration of animation in seconds
+     - callback: Callback method to run when animation completes
+     - timing: Animation timing function
 
     @param {String|Hash} key
     @param {Object} value

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

@@ -196,6 +196,7 @@ SC.View.reopen(
      - borderRight: right border
      - borderBottom: bottom border
      - borderLeft: bottom left
+     - zIndex: position above or below other views
 
     Note that you can only use certain combinations to set layout.  For
     example, you may set left/right or left/width, but not left/width/right,

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

@@ -856,7 +856,7 @@ SC.CoreView.reopen(
     @property {Array}
     @readOnly
   */
-  displayProperties: ['isFirstResponder'],
+  displayProperties: [],
 
   // .......................................................
   // SC.RESPONDER SUPPORT
@@ -882,11 +882,12 @@ SC.CoreView.reopen(
 
   /** @private
     Setup a view, but do not finish waking it up.
-    - configure childViews
-    - Determine the view's theme
-    - Fetch a render delegate from the theme, if necessary
-    - register the view with the global views hash, which is used for event
-      dispatch
+
+     - configure childViews
+     - Determine the view's theme
+     - Fetch a render delegate from the theme, if necessary
+     - register the view with the global views hash, which is used for event
+       dispatch
   */
   init: function() {
     var parentView = this.get('parentView'),
@@ -1466,48 +1467,42 @@ SC.CoreView.unload = function() {
 
   Base class for managing a view.  Views provide two functions:
 
-  1. They translate state and events into drawing instructions for the
+   1. They translate state and events into drawing instructions for the
      web browser and
-
-  2. They act as first responders for incoming keyboard, mouse, and
+   2. They act as first responders for incoming keyboard, mouse, and
      touch events.
 
-  h2. View Initialization
+  ## View Initialization
 
   When a view is setup, there are several methods you can override that
   will be called at different times depending on how your view is created.
   Here is a guide to which method you want to override and when:
 
-  - *init:* override this method for any general object setup (such as
-    observers, starting timers and animations, etc) that you need to happen
-    everytime the view is created, regardless of whether or not its layer
-    exists yet.
-
-  - *render:* override this method to generate or update your HTML to reflect
-    the current state of your view.  This method is called both when your view
-    is first created and later anytime it needs to be updated.
-
-  - *didCreateLayer:* the render() method is used to generate new HTML.
-    Override this method to perform any additional setup on the DOM you might
-    need to do after creating the view.  For example, if you need to listen
-    for events.
-
-  - *willDestroyLayer:* if you implement didCreateLayer() to setup event
-    listeners, you should implement this method as well to remove the same
-    just before the DOM for your view is destroyed.
-
-  - *updateLayer:* Normally, when a view needs to update its content, it will
-    re-render the view using the render() method.  If you would like to
-    override this behavior with your own custom updating code, you can
-    replace updateLayer() with your own implementation instead.
-
-  - *didAppendToDocument:* in theory all DOM setup could be done
-    in didCreateLayer() as you already have a DOM element instantiated.
-    However there is cases where the element has to be first appended to the
-    Document because there is either a bug on the browser or you are using
-    plugins which objects are not instantiated until you actually append the
-    element to the DOM. This will allow you to do things like registering
-    DOM events on flash or quicktime objects.
+   - `init` -- override this method for any general object setup (such as
+     observers, starting timers and animations, etc) that you need to happen
+     everytime the view is created, regardless of whether or not its layer
+     exists yet.
+   - `render` -- override this method to generate or update your HTML to reflect
+     the current state of your view.  This method is called both when your view
+     is first created and later anytime it needs to be updated.
+   - `didCreateLayer` -- the render() method is used to generate new HTML.
+     Override this method to perform any additional setup on the DOM you might
+     need to do after creating the view.  For example, if you need to listen
+     for events.
+   - `willDestroyLayer` -- if you implement didCreateLayer() to setup event
+     listeners, you should implement this method as well to remove the same
+     just before the DOM for your view is destroyed.
+   - `updateLayer` -- Normally, when a view needs to update its content, it will
+     re-render the view using the render() method.  If you would like to
+     override this behavior with your own custom updating code, you can
+     replace updateLayer() with your own implementation instead.
+   - `didAppendToDocument` -- in theory all DOM setup could be done
+     in didCreateLayer() as you already have a DOM element instantiated.
+     However there is cases where the element has to be first appended to the
+     Document because there is either a bug on the browser or you are using
+     plugins which objects are not instantiated until you actually append the
+     element to the DOM. This will allow you to do things like registering
+     DOM events on flash or quicktime objects.
 
   @extends SC.Responder
   @extends SC.DelegateSupport
@@ -1515,7 +1510,9 @@ SC.CoreView.unload = function() {
 
 */
 SC.View = SC.CoreView.extend(/** @scope SC.View.prototype */{
-  classNames: ['sc-view']
+  classNames: ['sc-view'],
+  
+  displayProperties: ['isFirstResponder']
 });
 
 //unload views for IE, trying to collect memory.