sproutcore 1.5.0.rc.1 → 1.5.0.rc.2

data/lib/frameworks/sproutcore/frameworks/{handlebars/extensions → core_foundation/ext/handlebars}/bind.js

@@ -1,4 +1,4 @@
-sc_require('extensions');
+sc_require('ext/handlebars');
 
 /**
   Adds the `bind`, `bindAttr`, and `boundIf` helpers to Handlebars.
@@ -129,7 +129,7 @@ Handlebars.registerHelper('bindAttr', function(options) {
   // Handle classes differently, as we can bind multiple classes
   var classBindings = attrs['class'];
   if (classBindings != null) {
-    var classResults = SC.Handlebars.bindClasses(view, classBindings, dataId);
+    var classResults = SC.Handlebars.bindClasses(this, classBindings, view, dataId);
     ret.push('class="'+classResults.join(' ')+'"');
     delete attrs['class'];
   }
@@ -140,13 +140,13 @@ Handlebars.registerHelper('bindAttr', function(options) {
   // current value of the property as an attribute.
   attrKeys.forEach(function(attr) {
     var property = attrs[attr];
-    var value = view.getPath(property);
+    var value = this.getPath(property);
 
     // Add an observer to the view for when the property changes.
     // When the observer fires, find the element using the
     // unique data id and update the attribute to the new value.
-    view.addObserver(property, function observer() {
-      var result = view.getPath(property);
+    this.addObserver(property, function observer() {
+      var result = this.getPath(property);
       var elem = view.$("[data-handlebars-id='" + dataId + "']");
 
       // If we aren't able to find the element, it means the element
@@ -154,7 +154,7 @@ Handlebars.registerHelper('bindAttr', function(options) {
       // In that case, we can assume the template has been re-rendered
       // and we need to clean up the observer.
       if (elem.length === 0) {
-        view.removeObserver(property, observer);
+        this.removeObserver(property, observer);
         return;
       }
 
@@ -182,9 +182,112 @@ Handlebars.registerHelper('bindAttr', function(options) {
       // Return the current value, in the form src="foo.jpg"
       ret.push(attr+'="'+value+'"');
     }
-  });
+  }, this);
 
   // Add the unique identifier
   ret.push('data-handlebars-id="'+dataId+'"');
   return ret.join(' ');
 });
+
+/**
+  Helper that, given a space-separated string of property paths and a context,
+  returns an array of class names. Calling this method also has the side effect
+  of setting up observers at those property paths, such that if they change,
+  the correct class name will be reapplied to the DOM element.
+
+  For example, if you pass the string "fooBar", it will first look up the "fooBar"
+  value of the context. If that value is YES, it will add the "foo-bar" class
+  to the current element (i.e., the dasherized form of "fooBar"). If the value
+  is a string, it will add that string as the class. Otherwise, it will not add
+  any new class name.
+
+  @param {SC.Object} context The context from which to lookup properties
+  @param {String} classBindings A string, space-separated, of class bindings to use
+  @param {SC.View} view The view in which observers should look for the element to update
+  @param {String} id Optional id use to lookup elements
+
+  @returns {Array} An array of class names to add
+*/
+SC.Handlebars.bindClasses = function(context, classBindings, view, id) {
+  var ret = [], newClass, value, elem;
+
+  // Helper method to retrieve the property from the context and
+  // determine which class string to return, based on whether it is
+  // a Boolean or not.
+  var classStringForProperty = function(property) {
+    var val = context.getPath(property);
+
+    // If value is a Boolean and true, return the dasherized property
+    // name.
+    if (val === YES) {
+      // Normalize property path to be suitable for use
+      // as a class name. For exaple, content.foo.barBaz
+      // becomes bar-baz.
+      return property.split('.').get('lastObject').dasherize();
+
+    // If the value is not NO, undefined, or null, return the current
+    // value of the property.
+    } else if (val !== NO && val !== undefined && val !== null) {
+      return val;
+
+    // Nothing to display. Return null so that the old class is removed
+    // but no new class is added.
+    } else {
+      return null;
+    }
+  };
+
+  // For each property passed, loop through and setup
+  // an observer.
+  classBindings.split(' ').forEach(function(property) {
+
+    // Variable in which the old class value is saved. The observer function
+    // closes over this variable, so it knows which string to remove when
+    // the property changes.
+    var oldClass;
+
+    // Set up an observer on the context. If the property changes, toggle the
+    // class name.
+    var observer = function() {
+      // Get the current value of the property
+      newClass = classStringForProperty(property);
+      elem = id ? view.$("[data-handlebars-id='" + id + "']") : view.$();
+
+      // If we can't find the element anymore, a parent template has been
+      // re-rendered and we've been nuked. Remove the observer.
+      if (elem.length === 0) {
+        context.removeObserver(property, observer);
+      } else {
+        // If we had previously added a class to the element, remove it.
+        if (oldClass) {
+          elem.removeClass(oldClass);
+        }
+
+        // If necessary, add a new class. Make sure we keep track of it so
+        // it can be removed in the future.
+        if (newClass) {
+          elem.addClass(newClass);
+          oldClass = newClass;
+        } else {
+          oldClass = null;
+        }
+      }
+    };
+
+    context.addObserver(property, observer);
+
+    // We've already setup the observer; now we just need to figure out the correct
+    // behavior right now on the first pass through.
+    value = classStringForProperty(property);
+
+    if (value) {
+      ret.push(value);
+
+      // Make sure we save the current value so that it can be removed if the observer
+      // fires.
+      oldClass = value;
+    }
+  });
+
+  return ret;
+};

data/lib/frameworks/sproutcore/frameworks/{handlebars/extensions → core_foundation/ext/handlebars}/collection.js

@@ -1,4 +1,4 @@
-sc_require('extensions');
+sc_require('ext/handlebars');
 
 Handlebars.registerHelper('collection', function(path, options) {
   var fn = options.fn;
@@ -27,15 +27,18 @@ Handlebars.registerHelper('collection', function(path, options) {
   }
 
   if(fn) {
+    var extensions = {
+      itemViewTemplate: fn,
+      inverseTemplate: inverse,
+      itemViewOptions: itemHash
+    };
+
     if(collectionClass.isClass) {
-      collectionObject = collectionClass.create();
+      collectionObject = collectionClass.extend(extensions);
     } else {
+      SC.mixin(collectionClass, extensions);
       collectionObject = collectionClass;
     }
-
-    collectionObject.itemViewTemplate = fn;
-    collectionObject.inverseTemplate = inverse;
-    collectionObject.itemViewOptions = itemHash;
   }
 
   options.fn = function() { return ""; };
@@ -44,7 +47,7 @@ Handlebars.registerHelper('collection', function(path, options) {
 });
 
 Handlebars.registerHelper('each', function(path, options) {
-  options.hash.content = SC.getPath(this, path);
+  options.hash.contentBinding = SC.Binding.from('*'+path, this);
   options.hash.itemContextProperty = 'content';
   return Handlebars.helpers.collection.call(this, null, options);
 });

data/lib/frameworks/sproutcore/frameworks/{handlebars/extensions → core_foundation/ext/handlebars}/localization.js

@@ -1,4 +1,4 @@
-sc_require('extensions');
+sc_require('ext/handlebars');
 
 Handlebars.registerHelper('loc', function(property) {
   return property.loc();

data/lib/frameworks/sproutcore/frameworks/{handlebars/extensions → core_foundation/ext/handlebars}/view.js

@@ -1,4 +1,4 @@
-sc_require('extensions');
+sc_require('ext/handlebars');
 
 SC.Handlebars.ViewHelper = SC.Object.create({
   helper: function(thisContext, path, options) {
@@ -28,6 +28,8 @@ SC.Handlebars.ViewHelper = SC.Object.create({
       if (!newView) { throw "Unable to find view at path '" + path + "'"; }
     }
 
+    if (hash.id) { hash.layerId = hash.id; }
+
     var contextOptions = {
       'id': hash.id,
       'class': hash['class'],
@@ -81,7 +83,7 @@ SC.Handlebars.ViewHelper = SC.Object.create({
 
     var classBindings = options.classBinding;
     if (classBindings) {
-      SC.Handlebars.bindClasses(childView, classBindings).forEach(function(className) {
+      SC.Handlebars.bindClasses(childView, classBindings, childView).forEach(function(className) {
         context.setClass(className, YES);
       });
     }

data/lib/frameworks/sproutcore/frameworks/{handlebars/extensions.js → core_foundation/ext/handlebars.js}

@@ -1,5 +1,3 @@
-sc_require("handlebars");
-
 /**
   Prepares the Handlebars templating library for use inside SproutCore's view
   system.
@@ -73,58 +71,3 @@ Handlebars.registerHelper('helperMissing', function(path, options) {
   error = "%@ Handlebars error: Could not find property '%@' on object %@.";
   throw error.fmt(options.data.view, path, this);
 });
-
-/**
-  Determines the classes to add based on an array of bindings (provided as strings),
-  as well as adding observers to make sure the classes are up-to-date.
-
-  @param {SC.View} view The view at add the classes to
-  @param {String} classBindings A string, space-separated, of class bindings to use
-  @param {String|Number} id Optional id to scope the observers/jQuery element to
-  @returns {Array} An array of class names to add
-*/
-SC.Handlebars.bindClasses = function(view, classBindings, id) {
-  if (!view._classObservers) view._classObservers = {};
-  id = id || '_default';
-  var classObservers = view._classObservers[id],
-      ret = [];
-
-  // Teardown any existing observers on the view.
-  if (classObservers) {
-    for (var prop in classObservers) {
-      if (classObservers.hasOwnProperty(prop)) {
-        view.removeObserver(prop, classObservers[prop]);
-      }
-    }
-  }
-
-  classObservers = view._classObservers[id] = {};
-
-  // For each property passed, loop through and setup
-  // an observer.
-  classBindings.split(' ').forEach(function(property) {
-    // Normalize property path to be suitable for use
-    // as a class name. For exaple, content.foo.barBaz
-    // becomes bar-baz.
-
-    var dasherizedProperty = property.split('.').get('lastObject').dasherize();
-
-    // Set up an observer on the view. If the bound property
-    // changes, toggle the class name
-    var observer = (classObservers[property] = function() {
-      var shouldDisplay = view.getPath(property);
-      var elem = id !== '_default' ? view.$("[data-handlebars-id='" + id + "']") : view.$();
-
-      if (elem.length === 0) {
-        view.removeObserver(property, observer);
-      } else {
-        elem.toggleClass(dasherizedProperty, shouldDisplay);
-      }
-    });
-
-    view.addObserver(property, observer);
-    if (view.getPath(property)) ret.push(dasherizedProperty);
-  });
-
-  return ret;
-};

data/lib/frameworks/sproutcore/frameworks/core_foundation/ext/object.js

@@ -15,9 +15,7 @@ SC.mixin(SC.Object.prototype, /** @scope SC.Object.prototype */ {
     invoke a method after a period of time.  The method should have the
     signature:
 
-    {{{
-      methodName: function(timer)
-    }}}
+        methodName: function(timer)
 
     If you would prefer to pass your own parameters instead, you can instead
     call invokeLater() directly on the function object itself.

data/lib/frameworks/sproutcore/frameworks/core_foundation/mixins/template_helpers/text_field_support.js

@@ -33,6 +33,17 @@ SC.TextFieldSupport = /** @scope SC.TextFieldSupport.prototype */{
     this.tryToPerform('blur', event);
   },
 
+  /** @private
+    Make sure our input value is synced with any bindings.
+    In some cases, such as auto-filling, a value can get
+    changed without an event firing. We could do this
+    on focusOut, but blur can potentially get called
+    after other events.
+  */
+  willLoseFirstResponder: function() {
+    this.notifyPropertyChange('value');
+  },
+
   keyUp: function(event) {
     if (event.keyCode === 13) {
       return this.tryToPerform('insertNewline', event);

data/lib/frameworks/sproutcore/frameworks/core_foundation/panes/main.js

@@ -17,9 +17,7 @@ sc_require('panes/pane');
   will also make itself key automatically.  The default way to use the main 
   pane is to simply add it to your page like this:
   
-  {{{
-    SC.MainPane.create().append();
-  }}}
+      SC.MainPane.create().append();
   
   This will cause your root view to display.  The default layout for a 
   MainPane is to cover the entire document window and to resize with the 

data/lib/frameworks/sproutcore/frameworks/core_foundation/panes/pane.js

@@ -29,10 +29,8 @@ SC.MIXED_STATE = '__MIXED__' ;
   To make a pane visible, you need to add it to your HTML document.  The
   simplest way to do this is to call the append() method:
 
-  {{{
-     myPane = SC.Pane.create();
-     myPane.append(); // adds the pane to the document
-  }}}
+      myPane = SC.Pane.create();
+      myPane.append(); // adds the pane to the document
 
   This will insert your pane into the end of your HTML document body, causing
   it to display on screen.  It will also register your pane with the

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

@@ -7,25 +7,23 @@
 
 /** @class
 
-  The root object for a SproutCore application.  Usually you will create a 
+  The root object for a SproutCore application.  Usually you will create a
   single SC.Application instance as your root namespace.  SC.Application is
   required if you intend to use SC.Responder to route events.
-  
-  h2. Example
-  
-  {{{
-    Contacts = SC.Application.create({
-      store: SC.Store.create(SC.Record.fixtures),
-      
-      // add other useful properties here
-    });
-  }}}
-
-  h2. Sending Events
-  
+
+  ## Example
+
+      Contacts = SC.Application.create({
+        store: SC.Store.create(SC.Record.fixtures),
+
+        // add other useful properties here
+      });
+
+  ## Sending Events
+
   You can send actions and events down an application-level responder chain
-  by 
-  
+  by
+
   @extends SC.ResponderContext
   @since SproutCore 1.0
 */

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

@@ -12,41 +12,35 @@
   builder yourself, but you will often use instances of the Builder object to
   configure parts of the UI such as menus and views.
   
-  h1. Anatomy of a Builder
+  # Anatomy of a Builder
   
   You can create a new Builder much like you would any other class in 
   SproutCore.  For example, you could create a new CoreQuery-type object with
   the following:
   
-  {{{
-    SC.$ = SC.Builder.create({
-      // methods you can call go here.
-    });
-  }}}
+      SC.$ = SC.Builder.create({
+        // methods you can call go here.
+      });
   
   Unlike most classes in SproutCore, Builder objects are actually functions 
   that you can call to create new instances.  In the example above, to use 
   the builder, you must call it like a function:
   
-  {{{
-    buildit = SC.$();
-  }}}
+      buildit = SC.$();
   
   If you define an init() method on a builder, it will be invoked wheneve the
   builder is called as a function, including any passed params.  Your init()
   method MUST return this, unlike regular SC objects.  i.e.
   
-  {{{
-    SC.$ = SC.Builder.create({
-      init: function(args) { 
-        this.args = SC.A(args);
-        return this;
-      }
-    });
-    
-    buildit = SC.$('a', 'b');
-    buildit.args => ['a','b']
-  }}}
+      SC.$ = SC.Builder.create({
+        init: function(args) { 
+          this.args = SC.A(args);
+          return this;
+        }
+      });
+      
+      buildit = SC.$('a', 'b');
+      buildit.args => ['a','b']
   
   In addition to defining a function like this, all builder objects also have
   an 'fn' property that contains a hash of all of the helper methods defined
@@ -54,16 +48,14 @@
   addition "plugins" for the builder by simply adding new methods to the
   fn property.
   
-  h1. Writing Builder Functions
+  # Writing Builder Functions
   
-  All builders share a few things in comming:
+  All builders share a few things in common:
   
-  - when a new builder is created, it's init() method will be called.  The default version of this method simply copies the passed parameters into the builder as content, but you can override this with anything you want.
+   * when a new builder is created, it's init() method will be called.  The default version of this method simply copies the passed parameters into the builder as content, but you can override this with anything you want.
+   * the content the builder works on is stored as indexed properties (i.e. 0,1,2,3, like an array).  The builder should also have a length property if you want it treated like an array.
+   *- Builders also maintain a stack of previous builder instances which you can pop off at any time.
   
-  - the content the builder works on is stored as indexed properties (i.e. 0,1,2,3, like an array).  The builder should also have a length property if you want it treated like an array.
-    
-  - Builders also maintain a stack of previous builder instances which you can pop off at any time.
-    
   To get content back out of a builder once you are ready with it, you can
   call the method done().  This will return an array or a single object, if 
   the builder only works on a single item.
@@ -71,16 +63,16 @@
   You should write your methods using the getEach() iterator to work on your
   member objects.  All builders implement SC.Enumerable in the fn() method.
 
-  CoreQuery = SC.Builder.create({
-    ...
-  }) ;
-  
-  CoreQuery = new SC.Builder(properties) {
-    
-  } ;
-
-  CoreQuery2 = CoreQuery.extend() {
-  }
+      CoreQuery = SC.Builder.create({
+        ...
+      }) ;
+      
+      CoreQuery = new SC.Builder(properties) {
+        ...
+      } ;
+      
+      CoreQuery2 = CoreQuery.extend() {
+      }
   
   @constructor
 */

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

@@ -79,7 +79,7 @@ SC.Event = function(originalEvent) {
   
   // Normalize wheel delta values for mousewheel events
   if (this.type === 'mousewheel' || this.type === 'DOMMouseScroll' || this.type === 'MozMousePixelScroll') {
-    var deltaMultiplier = 1,
+    var deltaMultiplier = SC.Event.MOUSE_WHEEL_MULTIPLIER,
         version = parseFloat(SC.browser.version);
 
     // normalize wheelDelta, wheelDeltaX, & wheelDeltaY for Safari
@@ -88,23 +88,10 @@ SC.Event = function(originalEvent) {
       this.wheelDeltaY = 0-(originalEvent.wheelDeltaY||0);
       this.wheelDeltaX = 0-(originalEvent.wheelDeltaX||0);
 
-      // Check Chrome first since it also responds to safari
-      if (!SC.browser.chrome) {
-        // Scrolling in Safari 5.0.1, which is huge for some reason
-        if (version >= 533.17 && version <= 533.19) {
-          deltaMultiplier = 0.004;
-
-        // Scrolling in Safari 5.0
-        } else if (version < 533 || version >= 534) {
-          deltaMultiplier = 40;
-        }
-      }
-
     // normalize wheelDelta for Firefox
     // note that we multiple the delta on FF to make it's acceleration more 
     // natural.
     } else if (!SC.none(originalEvent.detail) && SC.browser.mozilla) {
-      deltaMultiplier = 10;
       if (originalEvent.axis && (originalEvent.axis === originalEvent.HORIZONTAL_AXIS)) {
         this.wheelDeltaX = originalEvent.detail;
         this.wheelDeltaY = this.wheelDelta = 0;
@@ -119,6 +106,15 @@ SC.Event = function(originalEvent) {
       this.wheelDeltaX = 0 ;
     }
 
+    // we have a value over the limit and it wasn't caught when we generated MOUSE_WHEEL_MULTIPLIER
+    // this will happen as new Webkit-based browsers are released and we haven't covered them off
+    // in our browser detection. It'll scroll too quickly the first time, but we might as well learn
+    // and change our handling for the next scroll
+    if (this.wheelDelta > SC.Event.MOUSE_WHEEL_DELTA_LIMIT && !SC.Event._MOUSE_WHEEL_LIMIT_INVALIDATED) {
+      deltaMultiplier = SC.Event.MOUSE_WHEEL_MULTIPLIER = 0.004;
+      SC.Event._MOUSE_WHEEL_LIMIT_INVALIDATED = YES;
+    }
+
     this.wheelDelta *= deltaMultiplier;
     this.wheelDeltaX *= deltaMultiplier;
     this.wheelDeltaY *= deltaMultiplier;
@@ -129,6 +125,64 @@ SC.Event = function(originalEvent) {
 
 SC.mixin(SC.Event, /** @scope SC.Event */ {
 
+  /**
+    We need this because some browsers deliver different values
+    for mouse wheel deltas. Once the first mouse wheel event has
+    been run, this value will get set. Because we don't know the
+    maximum or minimum value ahead of time, if the event's delta
+    exceeds `SC.Event.MOUSE_WHEEL_DELTA_LIMIT`, this value can be
+    invalidated and changed during a later event.
+
+    @field
+    @type Number
+    @default 1
+  */
+  MOUSE_WHEEL_MULTIPLIER: (function() {
+    var deltaMultiplier = 1,
+        version = parseFloat(SC.browser.version),
+        didChange = NO;
+
+    if (SC.browser.webkit) {
+      // Check Chrome first since it also responds to safari
+      if (!SC.browser.chrome) {
+        // Scrolling in Safari 5.0.1, which is huge for some reason
+        if (version >= 533.17 && version <= 533.20) {
+          deltaMultiplier = 0.004;
+          didChange = YES;
+        // Scrolling in Safari 5.0
+        } else if (version < 533 || version >= 534) {
+          deltaMultiplier = 40;
+          didChange = YES;
+        }
+      }
+    } else if (SC.browser.mozilla) {
+      deltaMultiplier = 10;
+      didChange = YES;
+    }
+
+    if (didChange) { SC.Event._MOUSE_WHEEL_LIMIT_INVALIDATED = YES; }
+
+    return deltaMultiplier;
+  })(),
+
+  /**
+    This represents the limit in the delta before a different multiplier
+    will be applied. Because we can't generated an accurate mouse
+    wheel event ahead of time, and browsers deliver differing values
+    for mouse wheel deltas, this is necessary to ensure that
+    browsers that scale their values largely are dealt with correctly
+    in the future.
+
+    @type Number
+    @default 1000
+  */
+  MOUSE_WHEEL_DELTA_LIMIT: 1000,
+
+  /** @private
+    We only want to invalidate once
+  */
+  _MOUSE_WHEEL_LIMIT_INVALIDATED: NO,
+
   /** 
     Standard method to create a new event.  Pass the native browser event you
     wish to wrap if needed.
@@ -387,7 +441,7 @@ SC.mixin(SC.Event, /** @scope SC.Event */ {
     Trigger an event execution immediately.  You can use this method to 
     simulate arbitrary events on arbitary elements.
 
-    h2. Limitations
+    ## Limitations
     
     Note that although this is based on the jQuery implementation, it is 
     much simpler.  Notably namespaced events are not supported and you cannot
@@ -396,11 +450,9 @@ SC.mixin(SC.Event, /** @scope SC.Event */ {
     If you need more advanced event handling, consider the SC.Responder 
     functionality provided by SproutCore or use your favorite DOM library.
 
-    h2. Example
+    ## Example
     
-    {{{
-      SC.Event.trigger(view.get('layer'), 'mousedown');
-    }}}
+        SC.Event.trigger(view.get('layer'), 'mousedown');
     
     @param elem {Element} the target element
     @param eventType {String} the event type

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

@@ -15,21 +15,17 @@
   languages and saved at SC.Locale.current.  This locale is used for 
   localization, etc.
   
-  h2. Creating a new locale
+  ## Creating a new locale
   
   You can create a locale by simply extending the SC.Locale class and adding
   it to the locales hash:
   
-  {{{
-    SC.Locale.locales['en'] = SC.Locale.extend({ .. config .. }) ;
-  }}}
+      SC.Locale.locales['en'] = SC.Locale.extend({ .. config .. }) ;
   
   Alternatively, you could choose to base your locale on another locale by
   extending that locale:
   
-  {{{
-    SC.Locale.locales['en-US'] = SC.Locale.locales['en'].extend({ ... }) ;
-  }}}
+      SC.Locale.locales['en-US'] = SC.Locale.locales['en'].extend({ ... }) ;
   
   Note that if you do not define your own strings property, then your locale
   will inherit any strings added to the parent locale.  Otherwise you must

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

@@ -23,13 +23,11 @@ SC.Page = SC.Object.extend(
     to use the owner object as a target, (as well as other objects
     accessible through the owner object). E.g.
     
-    {{{
-      myButton: SC.ButtonView.design({
-        title: 'Click me',
-        target: SC.outlet('page.owner'),
-        action: 'buttonClicked'
-      })
-    }}}
+        myButton: SC.ButtonView.design({
+          title: 'Click me',
+          target: SC.outlet('page.owner'),
+          action: 'buttonClicked'
+        })
     
     Usually, you'll set 'owner' to the object defined in core.js.
   */