sproutcore 1.7.1.beta → 1.8.0

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

@@ -12,7 +12,7 @@ sc_require('panes/palette');
   default: initiated just below the anchor.
            shift x, y to optimized picker visibility and make sure top-left corner is always visible.
   menu :   same as default rule +
-           default(1,4,3) or custom offset below the anchor for default location to fine tunned visual alignment +
+           default(1,4,3) or custom offset below the anchor for default location to fine tuned visual alignment +
            enforce min left(7px)/right(8px) padding to the window
   fixed :  default(1,4,3) or custom offset below the anchor for default location to cope with specific anchor and skip fitPositionToScreen
   pointer :take default [0,1,2,3,2] or custom matrix to choose one of four perfect pointer positions.Ex:
@@ -347,6 +347,19 @@ SC.PickerPane = SC.PalettePane.extend(
   */
   removeAction: null,
 
+
+  /**
+    Disable repositioning as the window or size changes. It stays in the original
+    popup position.
+
+    @type Boolean
+    @default NO
+  */
+  repositionOnWindowResize: YES,
+
+  _anchorView: null,
+  _anchorHTMLElement: null,
+
   /**
     Displays a new picker pane.
 
@@ -357,12 +370,15 @@ SC.PickerPane = SC.PalettePane.extend(
     @returns {SC.PickerPane} receiver
   */
   popup: function(anchorViewOrElement, preferType, preferMatrix, pointerOffset) {
-    var anchor;
     if(anchorViewOrElement){
-      anchor = anchorViewOrElement.isView ? anchorViewOrElement.get('layer') : anchorViewOrElement;
+      if (anchorViewOrElement.isView) {
+        this._anchorView = anchorViewOrElement;
+        this._setupScrollObservers(anchorViewOrElement);
+      } else {
+        this._anchorHTMLElement = anchorViewOrElement;
+      }
     }
     this.beginPropertyChanges();
-    this.set('anchorElement',anchor) ;
     if (preferType) this.set('preferType',preferType) ;
     if (preferMatrix) this.set('preferMatrix',preferMatrix) ;
     if (pointerOffset) this.set('pointerOffset',pointerOffset) ;
@@ -435,7 +451,7 @@ SC.PickerPane = SC.PalettePane.extend(
 
   /** @private
     This method will return ret (x, y, width, height) from a rectangular element
-    Notice: temp hack for calculating visiable anchor height by counting height
+    Notice: temp hack for calculating visible anchor height by counting height
     up to window bottom only. We do have 'clippingFrame' supported from view.
     But since our anchor can be element, we use this solution for now.
   */
@@ -455,7 +471,7 @@ SC.PickerPane = SC.PalettePane.extend(
         height: bounding.height
       };
       // If width and height are undefined this means we are in IE or FF<3.5
-      // if we didnt get the frame dimensions the do the calculations
+      // if we did not get the frame dimensions the do the calculations
       // based on an element
       if(ret.width===undefined || ret.height===undefined){
         cq = SC.$(anchor);
@@ -471,10 +487,10 @@ SC.PickerPane = SC.PalettePane.extend(
       ret.height = cq.outerHeight();
     }
     ret.height = (wsize.height-ret.y) < ret.height ? (wsize.height-ret.y) : ret.height;
-    if(!SC.browser.msie && window.scrollX>0 || window.scrollY>0){
+    if(!SC.browser.isIE && window.scrollX>0 || window.scrollY>0){
       ret.x+=window.scrollX;
       ret.y+=window.scrollY;
-    }else if(SC.browser.msie && (document.documentElement.scrollTop>0 || document.documentElement.scrollLeft>0)){
+    }else if(SC.browser.isIE && (document.documentElement.scrollTop>0 || document.documentElement.scrollLeft>0)){
       ret.x+=document.documentElement.scrollLeft;
       ret.y+=document.documentElement.scrollTop;
     }
@@ -491,6 +507,19 @@ SC.PickerPane = SC.PalettePane.extend(
     var wsize = SC.RootResponder.responder.computeWindowSize(),
         wret = { x: 0, y: 0, width: wsize.width, height: wsize.height } ;
 
+    // if window size is smaller than the minimum size of app, use minimum size.
+    var mainPane = SC.RootResponder.responder.mainPane;
+    if (mainPane) {
+      var minWidth = mainPane.layout.minWidth,
+          minHeight = mainPane.layout.minHeight;
+      if (minWidth && wret.width < minWidth) {
+        wret.width = mainPane.layout.minWidth;
+      }
+      if (minHeight && wret.height < minHeight) {
+        wret.height = mainPane.layout.minHeight;
+      }
+    }
+
     picker.x = preferredPosition.x ; picker.y = preferredPosition.y ;
 
     if(this.preferType) {
@@ -771,9 +800,9 @@ SC.PickerPane = SC.PalettePane.extend(
       }
     }
 
-    // set up preferMatrix according to type if not provided excplicitly:
+    // set up preferMatrix according to type if not provided explicitly:
     // take default [0,1,2,3,2] for picker, [3,0,1,2,3] for menu picker if
-    // custom matrix not provided excplicitly
+    // custom matrix not provided explicitly
     if(!this.preferMatrix || this.preferMatrix.length !== 5) {
       // menu-picker default re-position rule :
       // perfect bottom (3) > perfect right (0) > perfect left (1) > perfect top (2)
@@ -781,7 +810,7 @@ SC.PickerPane = SC.PalettePane.extend(
       // picker default re-position rule :
       // perfect right (0) > perfect left (1) > perfect top (2) > perfect bottom (3)
       // fallback to perfect top (2)
-      this.set('preferMatrix', this.get('preferType') == SC.PICKER_MENU_POINTER ? [3,0,1,2,3] : [0,1,2,3,2]) ;
+      this.set('preferMatrix', this.get('preferType') === SC.PICKER_MENU_POINTER ? [3,2,1,0,3] : [0,1,2,3,2]) ;
     }
   },
 
@@ -835,17 +864,45 @@ SC.PickerPane = SC.PalettePane.extend(
     Invoked by the root responder. Re-position picker whenever the window resizes.
   */
   windowSizeDidChange: function(oldSize, newSize) {
-    this.positionPane();
+    if (this.repositionOnWindowResize) this.positionPane();
   },
 
   remove: function(){
-    if(this.get('isVisibleInWindow') && this.get('isPaneAttached')) this._showOverflow();
+    if(this.get('isVisibleInWindow') && this.get('isPaneAttached')) this._withdrawOverflowRequest();
+    this._removeScrollObservers();
     return sc_super();
   },
 
+  /** Figure out what is the anchor element */
+  anchorElement: function(key, value) {
+    var anchorView;
+
+    if (value === undefined) {
+      // Getting the value.
+      anchorView = this._anchorView;
+      return anchorView ? anchorView.get('layer') : this._anchorHTMLElement;
+    }
+    else {
+      // Setting the value.
+      if (!value) {
+        throw "You must set 'anchorElement' to either a view or a DOM element";
+      }
+      else if (value.isView) {
+        this._anchorView        = value;
+        this._anchorHTMLElement = null;
+      }
+      else {
+        this._anchorView        = null;
+        this._anchorHTMLElement = value;
+      }
+    }
+  }.property('layer').cacheable(),
+
+
+
   /** @private
     Internal method to hide the overflow on the body to make sure we don't
-    show scrollbars when the picker has shadows, as it's really anoying.
+    show scrollbars when the picker has shadows, as it's really annoying.
   */
   _hideOverflow: function(){
     var body = SC.$(document.body),
@@ -854,23 +911,63 @@ SC.PickerPane = SC.PalettePane.extend(
         minHeight = parseInt(main.css('minHeight'),0),
         windowSize = SC.RootResponder.responder.get('currentWindowSize');
     if(windowSize.width>=minWidth && windowSize.height>=minHeight){
-      SC.PICKERS_OPEN++;
-      //console.log(this.toString()+" "+SC.PICKERS_OPEN);
-      if(SC.PICKERS_OPEN > 0) body.css('overflow', 'hidden');
+      SC.bodyOverflowArbitrator.requestHidden(this);
     }
   },
 
   /** @private
     Internal method to show the overflow on the body to make sure we don't
-    show scrollbars when the picker has shadows, as it's really anoying.
+    show scrollbars when the picker has shadows, as it's really annoying.
+  */
+  _withdrawOverflowRequest: function(){
+    SC.bodyOverflowArbitrator.withdrawRequest(this);
+  },
+
+  /** @private
+    Detect if view is inside a scroll view. Do this by traversing parent view
+    hierarchy until you hit a scroll view or main pane.
+  */
+  _getScrollViewOfView: function(view) {
+    var curLevel = view;
+    while (YES) {
+      if (!curLevel) {
+        return null;
+      }
+      if (curLevel.isScrollable) {
+        return curLevel;
+      }
+      curLevel = curLevel.get('parentView');
+    }
+  },
+
+  /** @private
+    If anchor view is in a scroll view, setup observers on scroll offsets.
   */
-  _showOverflow: function(){
-    var body = SC.$(document.body);
-    if(SC.PICKERS_OPEN > 0) {
-      SC.PICKERS_OPEN--;
-     // console.log(this.toString()+" "+SC.PICKERS_OPEN);
+  _setupScrollObservers: function(anchorView) {
+    var scrollView = this._getScrollViewOfView(anchorView);
+    if (scrollView) {
+      scrollView.addObserver('horizontalScrollOffset', this, this._scrollOffsetDidChange);
+      scrollView.addObserver('verticalScrollOffset', this, this._scrollOffsetDidChange);
+      this._scrollView = scrollView;
     }
-    if(SC.PICKERS_OPEN === 0) body.css('overflow', 'visible');
+  },
+
+  /** @private
+    Teardown observers setup in _setupScrollObservers.
+  */
+  _removeScrollObservers: function() {
+    var scrollView = this._scrollView;
+    if (scrollView) {
+      scrollView.removeObserver('horizontalScrollOffset', this, this._scrollOffsetDidChange);
+      scrollView.removeObserver('verticalScrollOffset', this, this._scrollOffsetDidChange);
+    }
+  },
+
+  /** @private
+    Reposition pane whenever scroll offsets change.
+  */
+  _scrollOffsetDidChange: function() {
+    this.positionPane();
   }
 });
 
@@ -878,10 +975,6 @@ SC.PickerPane = SC.PalettePane.extend(
   Default metrics for the different control sizes.
 */
 
-// Counter to track how many pickers are open. This help us to now when to
-// show/hide the body overflow.
-SC.PICKERS_OPEN = 0;
-
 /**
   @static
 */

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

@@ -9,7 +9,7 @@ sc_require('panes/panel');
 
 /**
   @class
-  
+
   Displays a modal sheet pane that animates from the top of the viewport.
 
   The default way to use the sheet pane is to simply add it to your page like this:
@@ -31,7 +31,7 @@ sc_require('panes/panel');
 */
 SC.SheetPane = SC.PanelPane.extend(
 /** @scope SC.SheetPane.prototype */{
-  
+
   /**
     @type Array
     @default ['sc-sheet']
@@ -52,17 +52,17 @@ SC.SheetPane = SC.PanelPane.extend(
     @default 200
   */
   transitionDuration: 200,
-  
+
   _state: 'NO_VIEW', // no view
-  
+
   /** @private */
   init: function() {
     sc_super();
-    
+
     if (SC.Animatable) {
       SC.SheetPane.ANIMATABLE_AVAILABLE = YES;
       this.mixin(SC.Animatable);
-      
+
       if (!this.transitions) this.transitions = {};
       if (!this.transitions.top) {
         // transitionDuration = 200 seems to be too fast when using Animatable
@@ -94,7 +94,7 @@ SC.SheetPane = SC.PanelPane.extend(
     this.adjust(layout);
     this.updateLayout();
     if (this.enableAnimation) this.enableAnimation();
-    
+
     return sc_super();
   },
 
@@ -168,16 +168,16 @@ SC.SheetPane = SC.PanelPane.extend(
         centerX: 0,
         left: null
       });
-      if(SC.browser.mozilla) this.parentViewDidChange();
+      if(SC.browser.isMozilla) this.parentViewDidChange();
     } else {
       var layout = this.get('layout');
       if (!SC.SheetPane.ANIMATABLE_AVAILABLE) this.adjust('top', -1*layout.height);
     }
-    
+
     this._state = SC.SheetPane.READY;
     this.updateLayout();
   },
-  
+
   /** @private
     Needed because of the runLoop and that it is animated...
     must lose focus because will break if selection is change
@@ -194,10 +194,10 @@ SC.SheetPane = SC.PanelPane.extend(
 
     var now = Date.now();
     var pct = (now-this._start)/(this._end-this._start),
-        target = this, dir = this._direction, layout = this.get('layout'), 
+        target = this, dir = this._direction, layout = this.get('layout'),
         newLayout, adjust;
     if (pct<0) pct = 0;
-    
+
     // If we are done...
     if (pct>=1) {
       this._complete();
@@ -223,9 +223,9 @@ SC.SheetPane = SC.PanelPane.extend(
 
 SC.SheetPane.mixin(
 /** @scope SC.SheetPane */ {
-  
+
   ANIMATABLE_AVAILABLE: NO,
-  
+
   // states for view animation
   NO_VIEW: 'NO_VIEW',
   ANIMATING: 'ANIMATING',
@@ -233,5 +233,5 @@ SC.SheetPane.mixin(
 
   SLIDE_DOWN: 'SLIDEDOWN',
   SLIDE_UP: 'SLIDEUP'
-  
+
 });

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

@@ -10,7 +10,7 @@ sc_require('system/drag') ;
 /**
   @namespace
 
-  This procol implements a dynamic data source for a drag operation. You can
+  This protocol implements a dynamic data source for a drag operation. You can
   return a set of allowed data types and then the method will be used to 
   actually get data in that format when requested.
 */

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

@@ -35,7 +35,7 @@ sc_require('system/drag');
   once during every drag session. computeDragOperations, if called at all, may be 
   called more than once before the dragEntered method is called. Once dragEntered 
   is called, you are at guaranteed that both dragUpdated and dragExited will be 
-  called at some point, followed by either dragEnded or additonal 
+  called at some point, followed by either dragEnded or additional 
   computeDragOperation calls.
 */
 SC.DropTarget = {
@@ -167,7 +167,7 @@ SC.DropTarget = {
   /**
     Called to actually perform the drag operation.
     
-    Overide this method to actually perform the drag operation.  This method
+    Override this method to actually perform the drag operation.  This method
     is only called if you returned `YES` in `acceptDragOperation()`. 
     
     Return the operation that was actually performed or `SC.DRAG_NONE` if the 

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

@@ -26,7 +26,7 @@ SC.ResponderProtocol = {
   //
   
   /**
-    Called when the mouse is pressed. You must return `YES` to recieve
+    Called when the mouse is pressed. You must return `YES` to receive
     mouseDragged and mouseUp in the future.
     
     @param evt {SC.Event} the mousedown event
@@ -118,7 +118,7 @@ SC.ResponderProtocol = {
     
     @param charCode {String} the character code
     @param evt {SC.Event} the keydown event
-    @returns {Boolean} YES if you handled th emethod; NO otherwise
+    @returns {Boolean} YES if you handled the method; NO otherwise
   */
   performKeyEquivalent: function(charCode, evt) { return false; },
   

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

@@ -17,22 +17,22 @@ SC.BaseTheme.buttonRenderDelegate = SC.RenderDelegate.create({
   //
   'sc-small-size': {
     height: 18,
-    autoResizePadding: 15
+    autoResizePadding: { width: 15, height: 0 }
   },
 
   'sc-regular-size': {
     height: 24,
-    autoResizePadding: 20
+    autoResizePadding: { width: 20, height: 0 }
   },
 
   'sc-huge-size': {
     height: 30,
-    autoResizePadding: 30
+    autoResizePadding: { width: 30, height: 0 }
   },
 
   'sc-jumbo-size': {
     height: 44,
-    autoResizePadding: 50
+    autoResizePadding: { width: 50, height: 0 }
   },
 
 
@@ -48,17 +48,20 @@ SC.BaseTheme.buttonRenderDelegate = SC.RenderDelegate.create({
   */
   render: function(dataSource, context) {
     this.addSizeClassName(dataSource, context);
-
+    
     var labelContent,
         toolTip     = dataSource.get('toolTip'),
         isSelected  = dataSource.get('isSelected') || NO,
         isActive    = dataSource.get('isActive') || NO,
+        isDefault   = dataSource.get('isDefault') || NO,
+        isCancel    = dataSource.get('isCancel') || NO,
+        isToggle    = (dataSource.get('buttonBehavior') === SC.TOGGLE_BEHAVIOR),
         labelId     = SC.guidFor(dataSource) + '-label';
 
     context.setClass({
-      'icon': !!dataSource.get('icon') || NO,
-      'def': dataSource.get('isDefault'),
-      'cancel': dataSource.get('isCancel'),
+      'icon': !!dataSource.get('icon'),
+      'def':  isDefault,
+      'cancel': isCancel && !isDefault,
       'active': isActive,
       'sel': isSelected
     });
@@ -67,11 +70,15 @@ SC.BaseTheme.buttonRenderDelegate = SC.RenderDelegate.create({
       context.attr('title', toolTip);
       context.attr('alt', toolTip);
     }
-
+    
     this.includeSlices(dataSource, context, SC.THREE_SLICE);
-
     // accessibility
-    context.attr('aria-pressed', isActive.toString());
+    if(dataSource.get('isSegment')){
+      context.attr('aria-selected', isSelected.toString());
+    }else if(isToggle) {
+      context.attr('aria-pressed', isActive.toString());
+    } 
+    
     context.attr('aria-labelledby', labelId);
 
     // Create the inner label element that contains the text and, optionally,
@@ -95,18 +102,35 @@ SC.BaseTheme.buttonRenderDelegate = SC.RenderDelegate.create({
     @param {SC.RenderContext} jquery the jQuery object representing the HTML representation of the button
   */
   update: function(dataSource, jquery) {
+    var isToggle = (dataSource.get('buttonBehavior')===SC.TOGGLE_BEHAVIOR);
+    
     this.updateSizeClassName(dataSource, jquery);
 
     if (dataSource.get('isActive')) {
       jquery.addClass('active');
     }
 
-    jquery.attr('aria-pressed', dataSource.get('isActive').toString());
 
-    jquery.setClass('icon', !!dataSource.get('icon') || NO);
-    jquery.setClass('def', dataSource.get('isDefault') || NO);
-    jquery.setClass('cancel', dataSource.get('isCancel') || NO);
+    var isDefault = dataSource.get('isDefault'),
+        isCancel = dataSource.get('isCancel');if(dataSource.get('isSegment')){
+      jquery.attr('aria-selected', dataSource.get('isSelected').toString());
+    }else if(isToggle){
+      jquery.attr('aria-pressed', dataSource.get('isActive').toString());
+    }
+    
+    jquery.attr('title', dataSource.get('toolTip'));
+
+    jquery.setClass('icon', !!dataSource.get('icon'));
+    jquery.setClass('def', !!isDefault);
+    jquery.setClass('cancel', !!isCancel && !isDefault);
 
     dataSource.get('theme').labelRenderDelegate.update(dataSource, jquery.find('label'));
+  },
+  
+  /**
+    Returns the layer to be used for auto resizing.
+  */
+  getRenderedAutoResizeLayer: function(dataSource, jq) {
+    return jq.find('.sc-button-label')[0];
   }
 });