sproutcore 1.9.2 → 1.10.0.rc.1

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

@@ -9,57 +9,57 @@ sc_require('mixins/content_value_support');
 sc_require('system/string');
 
 /**
-  Option for controls to automatically calculate their size (should be default 
+  Option for controls to automatically calculate their size (should be default
   on controls that use renderers).
-  
+
   @type String
   @constant
 */
 SC.AUTO_CONTROL_SIZE = '__AUTO__';
 
-/** 
+/**
   Option for HUGE control size.
-  
+
   @type String
   @constant
 */
 SC.JUMBO_CONTROL_SIZE = 'sc-jumbo-size' ;
 
-/** 
+/**
   Option for HUGE control size.
-  
+
   @type String
   @constant
 */
 SC.HUGE_CONTROL_SIZE = 'sc-huge-size' ;
 
-/** 
+/**
   Option for large control size.
-  
+
   @type String
   @constant
 */
 SC.LARGE_CONTROL_SIZE = 'sc-large-size' ;
 
-/** 
+/**
   Option for standard control size.
-  
+
   @type String
   @constant
 */
 SC.REGULAR_CONTROL_SIZE = 'sc-regular-size' ;
 
-/** 
+/**
   Option for small control size.
-  
+
   @type String
   @constant
 */
 SC.SMALL_CONTROL_SIZE = 'sc-small-size' ;
 
-/** 
+/**
   Option for tiny control size
-  
+
   @type String
   @constant
 */
@@ -67,137 +67,137 @@ SC.TINY_CONTROL_SIZE = 'sc-tiny-size' ;
 
 /**
   @namespace
-  
+
   A Control is a view that also implements some basic state functionality.
   Apply this mixin to any view that you want to have standard control
   functionality including showing a selected state, enabled state, focus
   state, etc.
-  
+
   ## About Values and Content
-  
+
   Controls typically are used to represent a single value, such as a number,
   boolean or string.  The value a control is managing is typically stored in
   a "value" property.  You will typically use the value property when working
   with controls such as buttons and text fields in a form.
-  
+
   An alternative way of working with a control is to use it to manage some
   specific aspect of a content object.  For example, you might use a label
-  view control to display the "name" property of a Contact record.  This 
+  view control to display the "name" property of a Contact record.  This
   approach is often necessary when using the control as part of a collection
   view.
-  
-  You can use the content-approach to work with a control by setting the 
-  "content" and "contentValueKey" properties of the control.  The 
-  "content" property is the content object you want to manage, while the 
-  "contentValueKey" is the name of the property on the content object 
+
+  You can use the content-approach to work with a control by setting the
+  "content" and "contentValueKey" properties of the control.  The
+  "content" property is the content object you want to manage, while the
+  "contentValueKey" is the name of the property on the content object
   you want the control to display.
-  
+
   The default implementation of the Control mixin will essentially map the
-  contentValueKey of a content object to the value property of the 
+  contentValueKey of a content object to the value property of the
   control.  Thus if you are writing a custom control yourself, you can simply
   work with the value property and the content object support will come for
-  free.  Just write an observer for the value property and update your 
+  free.  Just write an observer for the value property and update your
   view accordingly.
-  
+
   If you are working with a control that needs to display multiple aspects
   of a single content object (for example showing an icon and label), then
   you can override the contentValueDidChange() method instead of observing
-  the value property.  This method will be called anytime _any_ property 
+  the value property.  This method will be called anytime _any_ property
   on the content object changes.  You should use this method to check the
-  properties you care about on the content object and update your view if 
+  properties you care about on the content object and update your view if
   anything you care about has changed.
-  
+
   ## Delegate Support
-  
-  Controls can optionally get the contentDisplayProperty from a 
-  displayDelegate, if it is set.  The displayDelegate is often used to 
+
+  Controls can optionally get the contentDisplayProperty from a
+  displayDelegate, if it is set.  The displayDelegate is often used to
   delegate common display-related configurations such as which content value
   to show.  Anytime your control is shown as part of a collection view, the
   collection view will be automatically set as its displayDelegate.
-  
+
   @since SproutCore 1.0
   @extends SC.ContentValueSupport
 */
 SC.Control = SC.mixin(SC.clone(SC.ContentValueSupport),
 /** @scope SC.Control.prototype */{
-  
+
   /**
     Walk like a duck
-    
+
     @type Boolean
     @default YES
     @readOnly
   */
   isControl: YES,
-  
-  /** 
+
+  /**
     The selected state of this control. Possible values:
-    
+
       - `YES`
       - `NO`
       - SC.MIXED_STATE.
-    
+
     @type Boolean
     @default NO
   */
   isSelected: NO,
-  
+
   /** @private */
   isSelectedBindingDefault: SC.Binding.oneWay().bool(),
-  
+
   /**
-    Set to YES when the item is currently active.  Usually this means the 
-    mouse is current pressed and hovering over the control, however the 
+    Set to YES when the item is currently active.  Usually this means the
+    mouse is current pressed and hovering over the control, however the
     specific implementation my vary depending on the control.
-    
+
     Changing this property value by default will cause the Control mixin to
     add/remove an 'active' class name to the root element.
-    
+
     @type Boolean
     @default NO
   */
   isActive: NO,
-  
+
   /** @private */
   isActiveBindingDefault: SC.Binding.oneWay().bool(),
-  
+
   /**
     The name of the property this control should display if it is part of an
     SC.FormView.
-    
-    If you add a control as part of an SC.FormView, then the form view will 
-    automatically bind the value to the property key you name here on the 
+
+    If you add a control as part of an SC.FormView, then the form view will
+    automatically bind the value to the property key you name here on the
     content object.
-    
+
     @type String
     @default null
   */
   fieldKey: null,
-  
+
   /**
     The human readable label you want shown for errors.  May be a loc string.
-    
+
     If your field fails validation, then this is the name that will be shown
-    in the error explanation.  If you do not set this property, then the 
+    in the error explanation.  If you do not set this property, then the
     fieldKey or the class name will be used to generate a human readable name.
-    
+
     @type String
     @default null
   */
   fieldLabel: null,
-  
+
   /**
     The human readable label for this control for use in error strings.  This
     property is computed dynamically using the following rules:
-    
+
     If the fieldLabel is defined, that property is localized and returned.
-    Otherwise, if the keyField is defined, try to localize using the string 
+    Otherwise, if the keyField is defined, try to localize using the string
     "ErrorLabel.{fieldKeyName}".  If a localized name cannot be found, use a
     humanized form of the fieldKey.
-    
-    Try to localize using the string "ErrorLabel.{ClassName}". Return a 
+
+    Try to localize using the string "ErrorLabel.{ClassName}". Return a
     humanized form of the class name.
-    
+
     @field
     @type String
     @observes 'fieldLabel'
@@ -206,7 +206,7 @@ SC.Control = SC.mixin(SC.clone(SC.ContentValueSupport),
   errorLabel: function() {
     var ret, fk, def, locFK;
     if (ret = this.get('fieldLabel')) return ret;
-    
+
     // if field label is not provided, compute something...
     fk = this.get('fieldKey') || this.constructor.toString();
     def = fk ? SC.String.capitalize(SC.String.humanize(fk)) : '';
@@ -215,28 +215,28 @@ SC.Control = SC.mixin(SC.clone(SC.ContentValueSupport),
   }.property('fieldLabel','fieldKey').cacheable(),
 
   /**
-    The control size.  This will set a CSS style on the element that can be 
+    The control size.  This will set a CSS style on the element that can be
     used by the current theme to vary the appearance of the control.
-    
+
     Some controls will default to SC.AUTO_CONTROL_SIZE, which will allow you
     to simply size the control, and the most appropriate control size will
     automatically be picked; be warned, though, that if you don't specify
     a height, performance will be impacted as it must be calculated; if you do
     this, a warning will be issued. If you don't care, use SC.CALCULATED_CONTROL_SIZE.
-    
+
     @type String
     @default SC.REGULAR_CONTROL_SIZE
   */
   controlSize: SC.REGULAR_CONTROL_SIZE,
-  
+
   /** @private */
-  displayProperties: ['isEnabled', 'isSelected', 'isActive', 'controlSize'],
-  
+  displayProperties: ['isSelected', 'isActive', 'controlSize'],
+
   /** @private */
   _CONTROL_TMP_CLASSNAMES: {},
-  
+
   /** @private
-    Invoke this method in your updateDisplay() method to update any basic 
+    Invoke this method in your updateDisplay() method to update any basic
     control CSS classes.
   */
   renderMixin: function(context, firstTime) {

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

@@ -12,42 +12,42 @@
 SC.ALIGN_JUSTIFY = "justify";
 
 /**
-  @namespace 
+  @namespace
 
   Normal SproutCore views are absolutely positioned--parent views have relatively
   little input on where their child views are placed.
-  
+
   This mixin makes a view layout its child views itself, flowing left-to-right
   or up-to-down, and, optionally, wrapping.
-  
+
   Child views with useAbsoluteLayout===YES will be ignored in the layout process.
   This mixin detects when child views have changed their size, and will adjust accordingly.
   It also observes child views' isVisible and calculatedWidth/Height properties, and, as a
   flowedlayout-specific extension, isHidden.
-  
+
   These properties are observed through `#js:observeChildLayout` and `#js:unobserveChildLayout`;
   you can override the method to add your own properties. To customize isVisible behavior,
   you will also want to override shouldIncludeChildInFlow.
-  
+
   This relies on the children's frames or, if specified, calculatedWidth and calculatedHeight
   properties.
-  
+
   This view mixes very well with animation. Further, it is able to automatically mix
   in to child views it manages, created or not yet created, allowing you to specify
   settings such as animation once only, and have everything "just work".
-  
+
   Like normal views, you simply specify child views--everything will "just work."
-  
+
   @since SproutCore 1.0
 */
 SC.FlowedLayout = {
   isFlowedLayout: YES,
   /**
     The direction of flow. Possible values:
-    
+
       - SC.LAYOUT_HORIZONTAL
       - SC.LAYOUT_VERTICAL
-    
+
     @type String
     @default SC.LAYOUT_HORIZONTAL
   */
@@ -55,64 +55,64 @@ SC.FlowedLayout = {
 
   /**
     Whether the view should automatically resize (to allow scrolling, for instance)
-    
+
     @type Boolean
     @default YES
   */
   autoResize: YES,
-  
+
   /**
     @type Boolean
     @default YES
   */
   shouldResizeWidth: YES,
-  
+
   /**
     @type Boolean
     @default YES
   */
   shouldResizeHeight: YES,
-  
+
   /**
     The alignment of items within rows or columns. Possible values:
-    
+
       - SC.ALIGN_LEFT
       - SC.ALIGN_CENTER
       - SC.ALIGN_RIGHT
       - SC.ALIGN_JUSTIFY
-    
+
     @type String
     @default SC.ALIGN_LEFT
   */
   align: SC.ALIGN_LEFT,
-  
+
   /**
     If YES, flowing child views are allowed to wrap to new rows or columns.
-    
+
     @type Boolean
     @default YES
   */
   canWrap: YES,
-  
+
   /**
     A set of spacings (left, top, right, bottom) for subviews. Defaults to 0s all around.
     This is the amount of space that will be before, after, above, and below the view. These
     spacings do not collapse into each other.
-    
+
     You can also set flowSpacing on any child view, or implement flowSpacingForView.
-    
+
     @type Hash
     @default `{ left: 0, bottom: 0, top: 0, right: 0 }`
   */
   defaultFlowSpacing: { left: 0, bottom: 0, top: 0, right: 0 },
-  
+
   /**
-    @property {Hash}
-    
+    @type Hash
+
     Padding around the edges of this flow layout view. This is useful for
     situations where you don't control the layout of the FlowedLayout view;
     for instance, when the view is the contentView for a SC.ScrollView.
-    
+
     @type Hash
     @default `{ left: 0, bottom: 0, top: 0, right: 0 }`
   */
@@ -120,7 +120,7 @@ SC.FlowedLayout = {
 
   /**
     @private
-    
+
     If the flowPadding somehow misses a property (one of the sides),
     we need to make sure a default value of 0 is still there.
    */
@@ -132,26 +132,26 @@ SC.FlowedLayout = {
     ret.right = padding.right || 0;
     return ret;
   }.property('flowPadding').cacheable(),
-  
+
   concatenatedProperties: ['childMixins'],
-  
+
   /** @private */
   initMixin: function() {
     this._scfl_tileOnce();
   },
-  
+
   /** @private
     Detects when the child views change.
   */
   _scfl_childViewsDidChange: function(c) {
     this._scfl_tileOnce();
   }.observes('childViews'),
-  
+
   /** @private */
   _scfl_layoutPropertyDidChange: function(childView) {
     this._scfl_tileOnce();
   }.observes('layoutDirection', 'align', 'flowPadding', 'canWrap', 'defaultFlowSpacing', 'isVisibleInWindow'),
-  
+
   /** @private
     Overridden to only update if it is a view we do not manage, or the width or height has changed
     since our last record of it.
@@ -160,9 +160,9 @@ SC.FlowedLayout = {
     // now, check if anything has changed
     var l = c._scfl_lastLayout, cl = c.get('layout'), f = c.get('frame');
     if (!l) return sc_super();
-    
+
     var same = YES;
-    
+
     // in short, if anything interfered with the layout, we need to
     // do something about it.
     if (l.left && l.left !== cl.left) same = NO;
@@ -171,22 +171,22 @@ SC.FlowedLayout = {
     else if (!l.width && !c.get('fillWidth') && f.width !== c._scfl_lastFrame.width) same = NO;
     else if (!c.get('fillHeight') && l.height && l.height !== cl.height) same = NO;
     else if (!l.height && !c.get('fillHeight') && f.height !== c._scfl_lastFrame.height) same = NO;
-    
+
     if (same) {
       return sc_super();
     }
-    
+
     // nothing has changed. This is where we do something
     this._scfl_tileOnce();
     sc_super();
   },
-  
+
   /** @private
     Sets up layout observers on child view. We observe three things:
     - isVisible
     - calculatedWidth
     - calculatedHeight
-    
+
     Actual layout changes are detected through layoutDidChangeFor.
   */
   observeChildLayout: function(c) {
@@ -203,7 +203,7 @@ SC.FlowedLayout = {
     c.addObserver('fillWidth', this, '_scfl_tileOnce');
     c.addObserver('fillHeight', this, '_scfl_tileOnce');
   },
-  
+
   /** @private
     Removes observers on child view.
   */
@@ -220,11 +220,11 @@ SC.FlowedLayout = {
     c.removeObserver('fillWidth', this, '_scfl_tileOnce');
     c.removeObserver('fillHeight', this, '_scfl_tileOnce');
   },
-  
+
   /**
     Determines whether the specified child view should be included in the flow layout.
     By default, if it has isVisible: NO or useAbsoluteLayout: YES, it will not be included.
-    
+
     @field
     @type Boolean
     @default NO
@@ -232,11 +232,11 @@ SC.FlowedLayout = {
   shouldIncludeChildInFlow: function(idx, c) {
     return c.get('isVisible') && !c.get('useAbsoluteLayout');
   },
-  
+
   /**
     Returns the flow spacings for a given view. By default, returns the view's flowSpacing,
     and if they don't exist, the defaultFlowSpacing for this view.
-    
+
     @field
     @type Hash
   */
@@ -244,7 +244,7 @@ SC.FlowedLayout = {
     var spacing = view.get('flowSpacing');
     if (SC.none(spacing)) spacing = this.get('defaultFlowSpacing');
     if (SC.none(spacing)) spacing = 0;
-    
+
     if (SC.typeOf(spacing) === SC.T_NUMBER) {
       spacing = { left: spacing, right: spacing, bottom: spacing, top: spacing };
     } else {
@@ -253,16 +253,16 @@ SC.FlowedLayout = {
       spacing['top'] = spacing['top'] || 0;
       spacing['bottom'] = spacing['bottom'] || 0;
     }
-    
+
     return spacing;
   },
-  
+
   /**
-    Returns the flow size for a given view, excluding spacing. The default version 
+    Returns the flow size for a given view, excluding spacing. The default version
     checks the view's calculatedWidth/Height, then its frame.
-    
+
     For spacers, this returns an empty size.
-    
+
     @field
     @type Hash
     @default {width: 0, height: 0}
@@ -272,7 +272,7 @@ SC.FlowedLayout = {
     layoutDirection = this.get('layoutDirection'),
     calc = {}, f = view.get('frame'), l = view.get('layout');
     view._scfl_lastFrame = f;
-    
+
     // if there is a calculated width, use that. NOTE: if calculatedWidth === 0,
     // it is invalid. This is the practice in other views.
     if (cw) {
@@ -282,7 +282,7 @@ SC.FlowedLayout = {
       // that have borders
       calc.width = l.width || f.width;
     }
-    
+
     // same for calculated height
     if (ch) {
       calc.height = ch;
@@ -303,7 +303,7 @@ SC.FlowedLayout = {
         calc.height = l.minHeight || 0;
       }
     }
-    
+
     // if it has a fillWidth/Height, clear it for later
     if (layoutDirection === SC.LAYOUT_HORIZONTAL && view.get('fillHeight')) {
       calc.height = l.minHeight || 0;
@@ -313,12 +313,12 @@ SC.FlowedLayout = {
 
     return calc;
   },
-  
+
   /** @private */
   clippingFrame: function() {
     return { left: 0, top: 0, width: this.get('calculatedWidth'), height: this.get('calculatedHeight') };
   }.property('calculatedWidth', 'calculatedHeight'),
-  
+
   /** @private */
 
   // the maximum row length when all flexible items are collapsed.
@@ -348,35 +348,35 @@ SC.FlowedLayout = {
       }
     }
   }.observes('autoResize', 'shouldResizeWidth', '_scfl_maximumCollapsedRowLength', '_scfl_totalCollapsedRowSize', 'shouldResizeHeight'),
-  
+
   /**
     @private
     Creates a plan, initializing all of the basic properties in it, but not
     doing anything further.
-    
+
     Other methods should be called to do this:
-    
+
     - _scfl_distributeChildrenIntoRows distributes children into rows.
     - _scfl_positionChildrenInRows positions the children within the rows.
       - this calls _scfl_positionChildrenInRow
     - _scfl_positionRows positions and sizes rows within the plan.
-    
+
     The plan's structure is defined inside the method.
-    
+
     Some of these methods may eventually be made public and/or delegate methods.
   */
   _scfl_createPlan: function() {
     var layoutDirection = this.get('layoutDirection'),
         flowPadding = this.get('_scfl_validFlowPadding'),
         frame = this.get('frame');
-    
+
     var isVertical = (layoutDirection === SC.LAYOUT_VERTICAL);
-    
+
     // A plan hash contains general information about the layout, and also,
     // the collection of rows.
     //
     // This method only fills out a subset of the properties in a plan.
-    // 
+    //
     var plan = {
       // The rows array starts empty. It will get filled out by the method
       // _scfl_distributeChildrenIntoRows.
@@ -389,29 +389,29 @@ SC.FlowedLayout = {
       // the total sizes of all rows when collapsed (With flex-height rows
       // at minimum size)
       totalCollapsedRowSize: 0,
-      
+
       // These properties are calculated once here, but later used by
       // the various methods.
       isVertical: layoutDirection === SC.LAYOUT_VERTICAL,
       isHorizontal: layoutDirection === SC.LAYOUT_HORIZONTAL,
-      
+
       flowPadding: flowPadding,
-      
+
       planStartPadding: flowPadding[isVertical ? 'left' : 'top'],
       planEndPadding: flowPadding[isVertical ? 'right' : 'bottom'],
-      
+
       rowStartPadding: flowPadding[isVertical ? 'top' : 'left'],
       rowEndPadding: flowPadding[isVertical ? 'bottom' : 'right'],
-      
+
       maximumRowLength: undefined, // to be calculated below
-      
+
       // if any rows need to fit to fill, this is the size to fill
       fitToPlanSize: undefined,
-      
-      
+
+
       align: this.get('align')
     };
-    
+
     if (isVertical) {
       plan.maximumRowLength = frame.height - plan.rowStartPadding - plan.rowEndPadding;
       plan.fitToPlanSize = frame.width - plan.planStartPadding - plan.planEndPadding;
@@ -419,51 +419,51 @@ SC.FlowedLayout = {
       plan.maximumRowLength = frame.width - plan.rowStartPadding - plan.rowEndPadding;
       plan.fitToPlanSize = frame.height - plan.planStartPadding - plan.planEndPadding;
     }
-    
+
     return plan;
   },
-  
+
   /** @private */
   _scfl_distributeChildrenIntoRows: function(plan) {
     var children = this.get('childViews'), child, idx, len = children.length,
         isVertical = plan.isVertical, rows = [], lastIdx;
-    
+
     lastIdx = -1; idx = 0;
     while (idx < len && idx !== lastIdx) {
       lastIdx = idx;
-      
+
       var row = {
         // always a reference to the plan
         plan: plan,
-        
+
         // the combined size of the items in the row. This is used, for instance,
         // in justification or right-alignment.
         rowLength: undefined,
-        
+
         // the size of the row. When flowing horizontally, this is the height;
         // it is the opposite dimension of rowLength. It is calculated
         // both while positioning items in the row and while positioning the rows
         // themselves.
         rowSize: undefined,
-        
+
         // whether this row should expand to fit any available space. In this case,
         // the size is the row's minimum size.
         shouldExpand: undefined,
-        
+
         // to be decided by _scfl_distributeItemsIntoRows
         items: undefined,
-        
+
         // to be decided by _scfl_positionRows
         position: undefined
       };
-      
+
       idx = this._scfl_distributeChildrenIntoRow(children, idx, row);
       rows.push(row);
     }
-    
+
     plan.rows = rows;
   },
-  
+
   /**
     @private
     Distributes as many children as possible into a single row, stating
@@ -477,7 +477,7 @@ SC.FlowedLayout = {
         newRowPending = NO,
         maxItemLength = 0,
         max = row.plan.maximumRowLength;
-    
+
     for (idx = startingAt; idx < len; idx++) {
       child = children[idx];
 
@@ -487,7 +487,7 @@ SC.FlowedLayout = {
       newRowPending = newRowPending || (items.length > 0 && child.get('startsNewRow'));
 
       if (!this.shouldIncludeChildInFlow(idx, child)) continue;
-      
+
       childSize = this.flowSizeForChild(idx, child);
       spacing = this.flowSpacingForChild(idx, child);
 
@@ -505,66 +505,66 @@ SC.FlowedLayout = {
       if ((newRowPending || (canWrap && itemOffset + itemLength > max)) && items.length > 0) {
         break;
       }
-      
+
       var item = {
         child: child,
-        
+
         itemLength: itemLength,
         maxSpacerLength: maxSpacerLength,
         itemSize: itemSize,
-        
+
         spacing: spacing,
-        
+
         // The position in the row.
         //
         // note: in one process or another, this becomes left or top.
         // but before that, it is calculated.
         position: undefined,
-        
+
         // whether this item should attempt to fill to the row's size
         fillRow: isVertical ? child.get('fillWidth') : child.get('fillHeight'),
-        
+
         // whether this item is a spacer, and thus should be resized to its itemLength
         isSpacer: child.get('isSpacer'),
-        
+
         // these will get set if necessary during the positioning code
         left: undefined, top: undefined,
         width: undefined, height: undefined
       };
 
-      
+
       items.push(item);
       itemOffset += itemLength;
       maxItemLength = Math.max(itemLength, maxItemLength);
     }
-    
+
     row.rowLength = itemOffset;
 
     // if the row cannot wrap, then the minimum size for the row (and therefore collapsed size)
     // is the same as the current row length: it consists of the minimum size of all items.
     //
-    // If the row can wrap, then the longest item will determine the size of a fully 
+    // If the row can wrap, then the longest item will determine the size of a fully
     // collapsed (one item per row) layout.
     var minRowLength = canWrap ? maxItemLength : row.rowLength;
     row.plan.maximumCollapsedRowLength = Math.max(minRowLength, row.plan.maximumCollapsedRowLength);
     row.items = items;
     return idx;
   },
-  
+
   /** @private */
   _scfl_positionChildrenInRows: function(plan) {
     var rows = plan.rows, len = rows.length, idx;
-    
+
     for (idx = 0; idx < len; idx++) {
       this._scfl_positionChildrenInRow(rows[idx]);
     }
   },
-  
+
   /**
     @private
     Positions items within a row. The items are already in the row, this just
     modifies the 'position' property.
-    
+
     This also marks a tentative size of the row, and whether it should be expanded
     to fit in any available extra space. Note the term 'size' rather than 'length'...
   */
@@ -573,20 +573,20 @@ SC.FlowedLayout = {
         spacerCount = 0, spacerSize, align = row.plan.align, shouldExpand = YES,
         leftOver = 0, noMaxWidth = NO;
 
-    // 
+    //
     // STEP ONE: DETERMINE SPACER SIZE + COUNT
-    // 
+    //
     for (idx = 0; idx < len; idx++) {
       item = items[idx];
       if (item.isSpacer) {
         spacerCount += item.child.get('spaceUnits') || 1;
       }
     }
-    
+
     // justification is like adding a spacer between every item. We'll actually account for
     // that later, but for now...
     if (align === SC.ALIGN_JUSTIFY) spacerCount += len - 1;
-    
+
     // calculate spacer size
     spacerSize = Math.max(0, row.plan.maximumRowLength - row.rowLength) / spacerCount;
 
@@ -614,7 +614,7 @@ SC.FlowedLayout = {
       spacerSize = Math.round(leftOver / spacerCount);
       leftOver = 0;
     }
-    
+
     //
     // STEP TWO: ADJUST FOR ALIGNMENT
     // Note: if there are spacers, this has no effect, because they fill all available
@@ -626,11 +626,11 @@ SC.FlowedLayout = {
     } else if (spacerCount === 0 && (align === SC.ALIGN_CENTER || align === SC.ALIGN_MIDDLE)) {
       position = (row.plan.maximumRowLength / 2) - (row.rowLength / 2);
     }
-    
+
     position += row.plan.rowStartPadding;
-    // 
+    //
     // STEP TWO: LOOP + POSITION
-    // 
+    //
     for (idx = 0; idx < len; idx++) {
       item = items[idx];
 
@@ -641,53 +641,53 @@ SC.FlowedLayout = {
       // if the item is not a fill-row item, this row has a size that all fill-row
       // items should expand to
       rowSize = Math.max(item.itemSize, rowSize);
-      
+
       item.position = position;
 
       position += item.itemLength;
-      
+
       // if justification is on, we have one more spacer
       // note that we check idx because position is used to determine the new rowLength.
       if (align === SC.ALIGN_JUSTIFY && idx < len - 1) position += spacerSize;
     }
-    
+
     row.shouldExpand = len > 0 ? shouldExpand : NO;
     row.rowLength = position - row.plan.rowStartPadding; // row length does not include padding
     row.rowSize = rowSize;
 
     row.plan.totalCollapsedRowSize += row.rowSize;
-    
+
   },
 
   /** @private */
   _scfl_positionRows: function(plan) {
     var rows = plan.rows, len = rows.length, idx, row, position,
         fillRowCount = 0, planSize = 0, fillSpace;
-    
+
     // first, we need a count of rows that need to fill, and the size they
     // are filling to (the combined size of all _other_ rows).
     for (idx = 0; idx < len; idx++) {
       if (rows[idx].shouldExpand) fillRowCount++;
       planSize += rows[idx].rowSize;
     }
-    
+
     fillSpace = plan.fitToPlanSize - planSize;
-    
+
     // now, position+size the rows
     position = plan.planStartPadding;
     for (idx = 0; idx < len; idx++) {
       row = rows[idx];
-      
+
       if (row.shouldExpand && fillSpace > 0) {
         row.rowSize += fillSpace / fillRowCount;
         fillRowCount--;
       }
-      
+
       row.position = position;
       position += row.rowSize;
     }
   },
-  
+
   /**
     @private
     Positions all of the child views according to the plan.
@@ -695,17 +695,17 @@ SC.FlowedLayout = {
   _scfl_applyPlan: function(plan) {
     var rows = plan.rows, rowIdx, rowsLen, row, longestRow = 0, totalSize = 0,
         items, itemIdx, itemsLen, item, layout, itemSize,
-        
+
         isVertical = plan.isVertical;
-    
+
     rowsLen = rows.length;
     for (rowIdx = 0; rowIdx < rowsLen; rowIdx++) {
       row = rows[rowIdx];
       longestRow = Math.max(longestRow, row.rowLength);
       totalSize += row.rowSize;
-      
+
       items = row.items; itemsLen = items.length;
-      
+
       for (itemIdx = 0; itemIdx < itemsLen; itemIdx++) {
         item = items[itemIdx];
         item.child.beginPropertyChanges();
@@ -718,20 +718,20 @@ SC.FlowedLayout = {
           width: isVertical ? itemSize : item.itemLength,
           height: isVertical ? item.itemLength : itemSize
         };
-        
+
         layout.width -= item.spacing.left + item.spacing.right;
         layout.height -= item.spacing.top + item.spacing.bottom;
-        
+
         this.applyPlanToView(item.child, layout);
         item.child._scfl_lastLayout = layout;
-        
+
         item.child.endPropertyChanges();
       }
     }
-    
+
     totalSize += plan.planStartPadding + plan.planEndPadding;
     longestRow += plan.rowStartPadding + plan.rowEndPadding;
-    
+
     this.beginPropertyChanges();
 
     this.set('calculatedHeight', isVertical ? longestRow : totalSize);
@@ -749,7 +749,7 @@ SC.FlowedLayout = {
   applyPlanToView: function(view, layout) {
     view.adjust(layout);
   },
-  
+
   /** @private */
   _scfl_tileOnce: function() {
     this.invokeLast(this._scfl_tile);
@@ -768,31 +768,31 @@ SC.FlowedLayout = {
 
     // save so it can be observed
     this.setIfChanged('numberOfRows', plan.rows.length);
-    
+
     // second, observe all children, and stop observing any children we no longer
     // should be observing.
     var previouslyObserving = this._scfl_isObserving || SC.CoreSet.create(),
         nowObserving = SC.CoreSet.create();
-    
+
     var children = this.get('childViews'), len = children.length, idx, child;
     for (idx = 0; idx < len; idx++) {
       child = children[idx];
-      
+
       if (!previouslyObserving.contains(child)) {
         this.observeChildLayout(child);
       } else {
         previouslyObserving.remove(child);
       }
-      
+
       nowObserving.add(child);
     }
-    
+
     len = previouslyObserving.length;
     for (idx = 0; idx < len; idx++) {
       this.unobserveChildLayout(previouslyObserving[idx]);
     }
   },
-  
+
   /** @private */
   _scfl_frameDidChange: function() {
     var frame = this.get("frame"), lf = this._scfl_lastFrameSize || {};
@@ -804,42 +804,42 @@ SC.FlowedLayout = {
 
     this._scfl_tileOnce();
   }.observes('frame'),
-  
+
   /** @private */
   destroyMixin: function() {
     var isObserving = this._scfl_isObserving;
     if (!isObserving) return;
-    
+
     var len = isObserving.length, idx;
     for (idx = 0; idx < len; idx++) {
       this.unobserveChildLayout(isObserving[idx]);
     }
   },
-  
+
   /** @private
     Reorders childViews so that the passed views are at the beginning in the order they are passed. Needed because childViews are laid out in the order they appear in childViews.
   */
   reorder: function(views) {
     if(!SC.typeOf(views) === SC.T_ARRAY) views = arguments;
-    
+
     var i = views.length, childViews = this.childViews, view;
-    
+
     // childViews.[] should be observed
     this.beginPropertyChanges();
-    
+
     while(i-- > 0) {
       view = views[i];
 
       if(SC.typeOf(view) === SC.T_STRING) view = this.get(view);
-      
+
       childViews.removeObject(view);
       childViews.unshiftObject(view);
     }
-    
+
     this.endPropertyChanges();
-    
+
     this._scfl_childViewsDidChange();
-    
+
     return this;
   }
 };