sproutcore 1.8.2.1 → 1.9.0

data/lib/frameworks/sproutcore/frameworks/datetime/frameworks/core/system/datetime.js

@@ -193,6 +193,12 @@ SC.Scanner = SC.Object.extend(
   
   is true, since they are technically the same position in time.
   
+  You can also use SC.DateTime as a record attribute on a data model. 
+  
+      SC.Record.attr(SC.DateTime); // Default format is ISO8601. See `SC.DateTime.recordFormat`
+      SC.Record.attr(SC.DateTime, { format: '%d/%m/%Y' }); // Attribute stored as a string in '%d/%m/%Y' format
+      SC.Record.attr(SC.DateTime, { useUnixTime: YES }); // Attribute stored as a number in Unix time 
+   
   @extends SC.Object
   @extends SC.Freezable
   @extends SC.Copyable

data/lib/frameworks/sproutcore/frameworks/desktop/mixins/border.js

@@ -109,7 +109,9 @@ SC.Border = {
 
   /** @private */
   initMixin: function() {
-    console.warn("SC.Border is deprecated, please set border in your layout");
+    //@if(debug)
+    SC.warn("Developer Warning: SC.Border is deprecated, please set border in your layout");
+    //@endif
     this._sc_border_borderStyleDidChange();
     this._sc_border_borderDimensionsDidChange();
   },

data/lib/frameworks/sproutcore/frameworks/desktop/mixins/collection_fast_path.js

@@ -18,6 +18,7 @@ SC.CollectionFastPath = {
   //
   initMixin: function() {
     this._indexMap = {};
+    this._viewMap = {};
   },
 
   /**
@@ -340,7 +341,7 @@ SC.CollectionFastPath = {
   */
   remapItemViews: function(nowShowing) {
     // reset the view map, but keep the old for removing
-    var oldMap = this._viewMap || {},
+    var oldMap = this._viewMap,
         newMap = (this._viewMap = {}),
         indexMap = (this._indexMap = {}),
         mayExist = [],

data/lib/frameworks/sproutcore/frameworks/desktop/panes/menu.js

@@ -381,10 +381,10 @@ SC.MenuPane = SC.PickerPane.extend(
     separator.
 
     @type String
-    @default "separator"
+    @default "isSeparator"
     @commonTask Menu Item Properties
   */
-  itemSeparatorKey: 'separator',
+  itemSeparatorKey: 'isSeparator',
 
   /**
     The name of the property that contains the target for the action that is
@@ -543,7 +543,7 @@ SC.MenuPane = SC.PickerPane.extend(
   createChildViews: function() {
     var scroll, menuView, menuItemViews;
 
-    scroll = this.createChildView(SC.MenuScrollView, {
+    scroll = this._menuScrollView = this.createChildView(SC.MenuScrollView, {
       borderStyle: SC.BORDER_NONE,
       controlSize: this.get('controlSize')
     });
@@ -552,12 +552,12 @@ SC.MenuPane = SC.PickerPane.extend(
       parentViewDidResize: function() {
         this.notifyPropertyChange('frame');
       },
-      
+
       viewDidResize: function() {
-        
+
       }
     });
-    
+
     menuItemViews = this.get('menuItemViews');
     menuView.set('layout', { top: 0, left: 0, height : this.get('menuHeight')});
     menuView.replaceAllChildren(menuItemViews);
@@ -674,6 +674,17 @@ SC.MenuPane = SC.PickerPane.extend(
       height = item.get(heightKey);
       if (!height) {
         height = item.get(separatorKey) ? separatorHeight : defaultHeight;
+        //@if(debug)
+        // TODO: Remove in 1.10 and 2.0
+        // Help the developer if they were relying on the previously misleading
+        // default value of itemSeparatorKey.  We need to ensure that the change
+        // is backwards compatible with apps prior to 1.9.
+        if (separatorKey === 'isSeparator' && SC.none(item.get('isSeparator')) && item.get('separator')) {
+          SC.warn("Developer Warning: the default value of itemSeparatorKey has been changed from 'separator' to 'isSeparator' to match the documentation.  Please update your menu item properties to 'isSeparator: YES' to remove this warning.");
+          height = separatorHeight;
+          item.set('isSeparator', YES);
+        }
+        //@endif
       }
 
       propertiesHash = {
@@ -1020,6 +1031,142 @@ SC.MenuPane = SC.PickerPane.extend(
     return YES;
   },
 
+  /**
+    Selects the first enabled menu item when the home key is pressed.
+
+    @private
+   */
+  moveToBeginningOfDocument: function() {
+    var items = this.get('menuItemViews'),
+        len = items.get('length'),
+        idx = 0;
+
+    while (idx < len) {
+      if (items[idx].get('isEnabled')) {
+        this.set('currentMenuItem', items[idx]);
+        items[idx].becomeFirstResponder();
+        break;
+      }
+      ++idx;
+    }
+
+    return YES;
+  },
+
+  /**
+    Selects the last enabled menu item when the end key is pressed.
+
+    @private
+  */
+  moveToEndOfDocument: function() {
+    var items = this.get('menuItemViews'),
+        len = items.get('length'),
+        idx = len - 1;
+
+    while (idx >= 0) {
+      if (items[idx].get('isEnabled')) {
+        this.set('currentMenuItem', items[idx]);
+        items[idx].becomeFirstResponder();
+        break;
+      }
+      --idx;
+    }
+
+    return YES;
+  },
+
+  /**
+    Selects the next item one page down. If that is not enabled,
+    continues to move down until it finds an enabled item.
+
+    @private
+  */
+  pageDown: function() {
+    var currentMenuItem = this.get('currentMenuItem'),
+        item, items = this.get('menuItemViews'),
+        len = items.get('length'),
+        idx = 0,
+        foundItemIdx,
+        verticalOffset = 0,
+        verticalPageScroll;
+
+    if (this._menuScrollView && this._menuScrollView.verticalScrollerView2) {
+
+      if (currentMenuItem) {
+        idx = currentMenuItem.getPath('content.contentIndex');
+      }
+
+      foundItemIdx = idx;
+      verticalPageScroll = this._menuScrollView.get('verticalPageScroll');
+      for (idx; idx < len; idx++) {
+        item = items[idx];
+        verticalOffset += item.get('layout').height;
+
+        if (verticalOffset > verticalPageScroll) {
+          // We've gone further than an entire page scroll, so stop.
+          break;
+        } else {
+          // Only accept enabled items (which also excludes separators).
+          if (item.get('isEnabled')) { foundItemIdx = idx; }
+        }
+      }
+
+      item = items[foundItemIdx];
+      this.set('currentMenuItem', item);
+      item.becomeFirstResponder();
+    } else {
+      this.moveToEndOfDocument();
+    }
+
+    return YES;
+  },
+
+  /**
+    Selects the previous item one page up. If that is not enabled,
+    continues to move up until it finds an enabled item.
+
+    @private
+  */
+  pageUp: function() {
+    var currentMenuItem = this.get('currentMenuItem'),
+        item, items = this.get('menuItemViews'),
+        len = items.get('length'),
+        idx = len - 1,
+        foundItemIdx,
+        verticalOffset = 0,
+        verticalPageScroll;
+
+    if (this._menuScrollView && this._menuScrollView.verticalScrollerView) {
+
+      if (currentMenuItem) {
+        idx = currentMenuItem.getPath('content.contentIndex');
+      }
+
+      foundItemIdx = idx;
+      verticalPageScroll = this._menuScrollView.get('verticalPageScroll');
+      for (idx; idx >= 0; idx--) {
+        item = items[idx];
+        verticalOffset += item.get('layout').height;
+
+        if (verticalOffset > verticalPageScroll) {
+          // We've gone further than an entire page scroll, so stop.
+          break;
+        } else {
+          // Only accept enabled items (which also excludes separators).
+          if (item.get('isEnabled')) { foundItemIdx = idx; }
+        }
+      }
+
+      item = items[foundItemIdx];
+      this.set('currentMenuItem', item);
+      item.becomeFirstResponder();
+    } else {
+      this.moveToBeginningOfDocument();
+    }
+
+    return YES;
+  },
+
   insertText: function(chr, evt) {
     var timer = this._timer, keyBuffer = this._keyBuffer;
 

data/lib/frameworks/sproutcore/frameworks/desktop/panes/modal.js

@@ -9,35 +9,35 @@
 /** @class
 
   A modal pane is used to capture mouse events inside a pane that is modal.
-  You normally will not work with modal panes directly, though you may set 
-  the modalPane property to a subclass of this pane when designing custom 
+  You normally will not work with modal panes directly, though you may set
+  the modalPane property to a subclass of this pane when designing custom
   panes.
-  
+
   A modal pane is automatically appended when a pane with isModal set to
   `YES` is made visible and removed when the same pane is hidden.  The only
   purpose of the `ModalPane` is to absorb mouse events so that they cannot
   filter through to the underlying content.
-  
+
   @extends SC.Pane
   @since SproutCore 1.0
 */
 SC.ModalPane = SC.Pane.extend(
 /** @scope SC.ModalPane.prototype */{
-  
+
   /**
     @type Array
     @default ['sc-modal']
     @see SC.View#classNames
   */
   classNames: 'sc-modal',
-  
+
   /** @private */
   _openPaneCount: 0,
-  
+
   /** @private
     Called by a pane just before it appends itself.   The modal pane can
     make itself visible first if needed.
-    
+
     @param {SC.Pane} pane the pane
     @returns {SC.ModalPane} receiver
   */
@@ -53,18 +53,18 @@ SC.ModalPane = SC.Pane.extend(
         this._hideShowTextfields(_tmpPane, NO);
       }
     }
-    return this ;    
-  },  
-  
+    return this ;
+  },
+
   /** @private
     Called by a pane just after it removes itself.  The modal pane can remove
-    itself if needed.   Modal panes only remove themselves when an equal 
+    itself if needed.   Modal panes only remove themselves when an equal
     number of `paneWillAppend()` and `paneDidRemove()` calls are received.
-  
+
     @param {SC.Pane} pane the pane
     @returns {SC.ModalPane} receiver
   */
-  paneDidRemove: function(pane) { 
+  paneDidRemove: function(pane) {
     var _tmpPane;
     this._openPaneCount--;
     var panes = SC.RootResponder.responder.panes;
@@ -80,24 +80,45 @@ SC.ModalPane = SC.Pane.extend(
       if (this.get('isVisibleInWindow')) this.remove();
     }
   },
-  
-  /** @private */
+
+  /** @private
+    If `focusable` is NO all SC.TextFieldViews not belonging to the given
+    pane will have isBrowserFocusable set to NO.  If `focusable` is YES, then
+    all SC.TextFieldViews not belonging to the given pane will have
+    isBrowserFocusable set to YES, unless they previously had it set explictly
+    to NO.
+  */
   _hideShowTextfields: function(pane, focusable){
     var view;
     for(view in SC.View.views){
       view = SC.View.views[view];
       if (view!==pane && view.get('pane')===pane && view.get('isTextField')){
+        if (focusable) {
+          // Setting isBrowserFocusable back to YES. If we cached the previous
+          // value, use that instead.
+          if (view._scmp_isBrowserFocusable !== undefined) {
+            focusable = view._scmp_isBrowserFocusable;
+
+            // Clean up entirely.
+            delete view._scmp_isBrowserFocusable;
+          }
+        } else {
+          // Cache the value of isBrowserFocusable. If the text field
+          // already had isBrowserFocusable: NO, we don't want to
+          // set it back to YES.
+          view._scmp_isBrowserFocusable = view.get('isBrowserFocusable');
+        }
         view.set('isBrowserFocusable', focusable);
       }
     }
   },
-  
+
   /** @private */
   mouseDown: function(evt) {
     var owner = this.get('owner');
     if (owner && owner.modalPaneDidClick) owner.modalPaneDidClick(evt);
   },
-  
+
   /** @private */
   touchStart: function(evt) {
     this.mouseDown(evt);

data/lib/frameworks/sproutcore/frameworks/desktop/protocols/drop_target.js

@@ -137,11 +137,12 @@ SC.DropTarget = {
     @param {SC.Drag} drag The current drag object
     @param {SC.Event} evt The most recent mouse move event.  Use to get 
       location 
+    @param {DragOp} op The proposed drag operation. A drag constant
     
     @returns {DragOps} A mask of all the drag operations allowed or 
       SC.DRAG_NONE
   */
-  computeDragOperations: function(drag, evt) {
+  computeDragOperations: function(drag, evt, op) {
     return SC.DRAG_NONE;
   },
   

data/lib/frameworks/sproutcore/frameworks/desktop/render_delegates/disclosure.js

@@ -14,7 +14,7 @@ SC.BaseTheme.disclosureRenderDelegate = SC.RenderDelegate.create({
 
     var theme = dataSource.get('theme'),
         value = dataSource.get('value'),
-        title = dataSource.get('title');
+        labelClassNames = ['sc-button-label', 'sc-disclosure-label'];
 
     var labelId = SC.guidFor(dataSource) + "-label";
 
@@ -29,8 +29,8 @@ SC.BaseTheme.disclosureRenderDelegate = SC.RenderDelegate.create({
     if (dataSource.get('isActive')) state += ' active';
     
     context.push('<img src = "' + SC.BLANK_IMAGE_URL + '" class = "disclosure button ' + state + '" />');
-    
-    context = context.begin('span').addClass('sc-button-label').id(labelId);
+
+    context = context.begin('span').addClass(labelClassNames).id(labelId);
     theme.labelRenderDelegate.render(dataSource, context);
     context = context.end();
   },
@@ -39,8 +39,7 @@ SC.BaseTheme.disclosureRenderDelegate = SC.RenderDelegate.create({
     this.updateSizeClassName(dataSource, jquery);
 
     var theme = dataSource.get('theme'),
-        value = dataSource.get('value'),
-        title = dataSource.get('title');
+        value = dataSource.get('value');
 
     //addressing accessibility
     jquery.attr('aria-expanded', value);
@@ -52,8 +51,8 @@ SC.BaseTheme.disclosureRenderDelegate = SC.RenderDelegate.create({
       closed: !dataSource.get('isSelected'),
       active: dataSource.get('isActive')
     });
-    
-    theme.labelRenderDelegate.update(dataSource, jquery.find('span.sc-button-label'));
+
+    theme.labelRenderDelegate.update(dataSource, jquery.find('span.sc-disclosure-label'));
   }
 });
 

data/lib/frameworks/sproutcore/frameworks/desktop/render_delegates/progress.js

@@ -5,37 +5,42 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
+SC.BaseTheme.PROGRESS_OFFSET = 0.5;
+SC.BaseTheme.PROGRESS_OFFSET_RANGE = 42;
+
 /**
-  Renders and updates DOM representations of progress bars.
-
-  Parameters
-  --------------------------
-  Expects these properties on the data source:
-
-   - `isIndeterminate`
-   - `isRunning`
-   - `isEnabled`
-   - `value`
-
-  Theme Constants
-  -------------------------------------
-  Ace's `progressRenderDelegate`'s rendering process is not affected by
-  any theme constants.
-*/
+ Renders and updates DOM representations of progress bars.
+
+ Parameters
+ --------------------------
+ Expects these properties on the data source:
+
+ - `isIndeterminate`
+ - `isRunning`
+ - `isEnabled`
+ - `isVisibleInWindow`
+ - `value`
+
+ Theme Constants
+ -------------------------------------
+ Ace's `progressRenderDelegate`'s rendering process is not affected by
+ any theme constants.
+ */
 SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
-  className: 'progress',
+  className:'progress',
 
-  render: function(dataSource, context) {
+  render:function (dataSource, context) {
     this.addSizeClassName(dataSource, context);
 
-    var theme = dataSource.get('theme'),
-        valueMax = dataSource.get('maximum'),
-        valueMin = dataSource.get('minimum'),
-        valueNow = dataSource.get('ariaValue');
+    var isIndeterminate = dataSource.get('isIndeterminate'),
+      theme = dataSource.get('theme'),
+      valueMax = dataSource.get('maximum'),
+      valueMin = dataSource.get('minimum'),
+      valueNow = dataSource.get('ariaValue');
 
     var value;
-    if (dataSource.get('isIndeterminate')) {
-      value = 120;
+    if (isIndeterminate) {
+      value = 1;
     } else {
       value = dataSource.get('value');
     }
@@ -46,13 +51,12 @@ SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
     context.attr('aria-valuenow', valueNow);
     context.attr('aria-valuetext', valueNow);
 
-
     context.setClass({
-      indeterminate: dataSource.get('isIndeterminate'),
-      running: dataSource.get('isRunning'),
-      disabled: !dataSource.get('isEnabled'),
-      'sc-empty': (value <= 0),
-      'sc-complete': (value >= 1)
+      indeterminate:isIndeterminate,
+      running:dataSource.get('isRunning') && isIndeterminate,
+      disabled:!dataSource.get('isEnabled'),
+      'sc-empty':(value <= 0),
+      'sc-complete':(value >= 1 && !isIndeterminate)
     });
 
     context = context.begin('div').addClass('track');
@@ -65,36 +69,121 @@ SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
     context = context.end();
   },
 
-  update: function(dataSource, $) {
-    this.updateSizeClassName(dataSource, $);
+  update:function (dataSource, context) {
+    this.updateSizeClassName(dataSource, context);
 
     var theme = dataSource.get('theme'),
-        valueMax = dataSource.get('maximum'),
-        valueMin = dataSource.get('minimum'),
-        valueNow = dataSource.get('ariaValue');
+      value,
+      valueMax = dataSource.get('maximum'),
+      valueMin = dataSource.get('minimum'),
+      valueNow = dataSource.get('ariaValue'),
+      isIndeterminate = dataSource.get('isIndeterminate'),
+      isRunning = dataSource.get('isRunning'),
+      isEnabled = dataSource.get('isEnabled'),
+      isVisibleInWindow = dataSource.get('isVisibleInWindow');
 
     // make accessible
-    $.attr('aria-valuemax', valueMax);
-    $.attr('aria-valuemin', valueMin);
-    $.attr('aria-valuenow', valueNow);
-    $.attr('aria-valuetext', valueNow);
-
+    context.attr('aria-valuemax', valueMax);
+    context.attr('aria-valuemin', valueMin);
+    context.attr('aria-valuenow', valueNow);
+    context.attr('aria-valuetext', valueNow);
 
-    var value;
-    if (dataSource.get('isIndeterminate')) {
-      value = 120;
+    if (isIndeterminate) {
+      value = 1;
     } else {
       value = dataSource.get('value');
     }
 
-    $.setClass({
-      indeterminate: dataSource.get('isIndeterminate'),
-      running: dataSource.get('isRunning'),
-      disabled: !dataSource.get('isEnabled'),
-      'sc-empty': (value <= 0),
-      'sc-complete': (value >= 1)
+    context.setClass({
+      indeterminate:isIndeterminate,
+      running:isRunning && isIndeterminate,
+      disabled:!isEnabled,
+      'sc-empty':(value <= 0),
+      'sc-complete':(value >= 1 && !isIndeterminate)
     });
 
-    $.find('.content').css('width', (value * 100) + "%");
+    context.find('.content').css('width', (value * 100) + "%");
+
+    // fallback for browsers that don't support css transitions
+    if(!SC.platform.supportsCSSTransitions) {
+      if (!this._queue[context[0].id]) {
+        this._queue[context[0].id] = {
+          offset:0,
+          element:SC.$(context).find('.content .middle'),
+          shouldAnimate:false
+        };
+      }
+
+      if (isIndeterminate && isRunning && isVisibleInWindow) {
+        // save offset in the queue and request animation
+        this._queue[context[0].id].shouldAnimate = true;
+        this.animate(dataSource);
+      } else if (!isIndeterminate) {
+        // Clear out our custom background-position when isIndeterminate toggles.
+        this._queue[context[0].id].element.css('background-position', '');
+      } else {
+        this._queue[context[0].id].shouldAnimate = false;
+      }
+    }
+  },
+
+  /** @private Queue of objects to animate: { id, offset, element } */
+  _queue: {},
+
+  /** @private Catch double calls to _animate */
+  _animating: false,
+
+  /**
+    Animates the indeterminate progress view's middle background using
+    JavaScript and requestAnimationFrame().
+  */
+  animate: function (dataSource) {
+    var self = this;
+
+    // avoid invoking the animation code multiple times if more than
+    // one progress bar needs animating *and* one has already started the loop
+    if (this._animating) {
+      return;
+    }
+
+    function _animate() {
+      var offset,
+        lastOffset,
+        roundedOffset,
+        viewsToAnimate = self._queue,
+        animations = 0,
+        params;
+
+      var id;
+      for (id in viewsToAnimate) {
+        if (viewsToAnimate.hasOwnProperty(id)) {
+          params=viewsToAnimate[id];
+          if (params.shouldAnimate) {
+            self._animating = true;
+            animations++;
+            lastOffset = params.offset || 0;
+            offset = (lastOffset + SC.BaseTheme.PROGRESS_OFFSET) % SC.BaseTheme.PROGRESS_OFFSET_RANGE;
+
+            // Only update the style when the offset changes (this avoids making
+            // the browser recalculate style in each frame).
+            roundedOffset = Math.round(offset);
+            if (roundedOffset > Math.round(lastOffset)) {
+              params.element.css('background-position', roundedOffset + "px 0px");
+            }
+
+            params.offset = offset;
+          }
+        }
+      }
+
+      if (animations === 0) {
+        self._animating = false;
+      } else {
+        window.requestAnimationFrame(_animate);
+      }
+    }
+
+    // Start the animation.
+    _animate();
   }
 });