sproutcore 1.0.1049.pre.2 → 1.4.0.rc

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

@@ -65,13 +65,30 @@ SC.PanelPane = SC.Pane.extend({
   */
   contentView: null,
   contentViewBindingDefault: SC.Binding.single(),
+
+  /**
+    Replaces any child views with the passed new content.  
     
-  createRenderer: function() {
-    return this.get("theme").panel();
-  },
-  
-  updateRenderer: function() {
+    This method is automatically called whenever your contentView property 
+    changes.  You can override it if you want to provide some behavior other
+    than the default.
     
+    @param {SC.View} newContent the new panel view or null.
+    @returns {void}
+  */
+  
+  render: function(context, firstTime) {
+    if (context.needsContent) {
+      this.renderChildViews(context, firstTime) ;
+      context.push("<div class='top-left-edge'></div>",
+       "<div class='top-edge'></div>",
+       "<div class='top-right-edge'></div>",
+       "<div class='right-edge'></div>",
+       "<div class='bottom-right-edge'></div>",
+       "<div class='bottom-edge'></div>",
+       "<div class='bottom-left-edge'></div>",
+       "<div class='left-edge'></div>");
+    }
   },
   
   replaceContent: function(newContent) {

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

@@ -133,6 +133,13 @@ SC.PickerPane = SC.PalettePane.extend({
     @property {Object}
   */
   anchorElement: null,
+
+  /**
+    anchor rect calculated by computeAnchorRect from init popup
+
+    @property {Hash}
+  */
+  anchorCached: null,
   
   /**
     popular customized picker position rule
@@ -172,7 +179,10 @@ SC.PickerPane = SC.PalettePane.extend({
     @returns {SC.PickerPane} receiver
   */
   popup: function(anchorViewOrElement, preferType, preferMatrix, pointerOffset) {
-    var anchor = anchorViewOrElement.isView ? anchorViewOrElement.get('layer') : anchorViewOrElement;
+    var anchor;
+    if(anchorViewOrElement){
+      anchor = anchorViewOrElement.isView ? anchorViewOrElement.get('layer') : anchorViewOrElement;
+    }
     this.beginPropertyChanges();
     this.set('anchorElement',anchor) ;
     if (preferType) this.set('preferType',preferType) ;
@@ -189,8 +199,9 @@ SC.PickerPane = SC.PalettePane.extend({
     then call fitPositionToScreen to get final position. If anchor is missing, 
     fallback to center.
   */  
-  positionPane: function() {
-    var anchor       = this.get('anchorElement'),
+  positionPane: function(useAnchorCached) {
+    var useAnchorCached = useAnchorCached && this.get('anchorCached'),
+        anchor       = useAnchorCached ? this.get('anchorCached') : this.get('anchorElement'),
         preferType   = this.get('preferType'),
         preferMatrix = this.get('preferMatrix'),
         layout       = this.get('layout'),
@@ -201,7 +212,10 @@ SC.PickerPane = SC.PalettePane.extend({
     // If that is not possible, fitPositionToScreen will take care of that for 
     // other alternative and fallback position.
     if (anchor) {
-      anchor = this.computeAnchorRect(anchor);
+      if(!useAnchorCached) {
+        anchor = this.computeAnchorRect(anchor);
+        this.set('anchorCached', anchor) ;
+      }
       if(anchor.x ===0 && anchor.y ===0) return ;
       origin = SC.cloneRect(anchor);
 
@@ -246,7 +260,6 @@ SC.PickerPane = SC.PalettePane.extend({
   computeAnchorRect: function(anchor) {
     var bounding, ret, cq,
         wsize = SC.RootResponder.responder.computeWindowSize();
-
     // Some browsers natively implement getBoundingClientRect, so if it's
     // available we'll use it for speed.
     if (anchor.getBoundingClientRect) {
@@ -263,7 +276,7 @@ SC.PickerPane = SC.PalettePane.extend({
       // if we didnt get the frame dimensions the do the calculations
       // based on an element
       if(ret.width===undefined || ret.height===undefined){
-        cq    = SC.$(anchor);
+        cq = SC.$(anchor);
         ret.width = cq.outerWidth();
         ret.height = cq.outerHeight();
       }
@@ -276,6 +289,13 @@ 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){
+      ret.x+=window.scrollX;
+      ret.y+=window.scrollY;
+    }else if(SC.browser.msie && (document.documentElement.scrollTop>0 || document.documentElement.scrollLeft>0)){
+      ret.x+=document.documentElement.scrollLeft;
+      ret.y+=document.documentElement.scrollTop;
+    }
     return ret ;
   },
 
@@ -286,9 +306,9 @@ SC.PickerPane = SC.PalettePane.extend({
     // get window rect.
     //if(this._prefPosX && this._prefPosY)
     
-    var wsize = SC.RootResponder.responder.computeWindowSize() ;
-
-    var wret = { x: 0, y: 0, width: wsize.width, height: wsize.height } ;
+    var wsize = SC.RootResponder.responder.computeWindowSize(),
+        wret = { x: 0, y: 0, width: wsize.width, height: wsize.height } ;
+        
     picker.x = preferredPosition.x ; picker.y = preferredPosition.y ;
 
     if(this.preferType) {
@@ -318,6 +338,7 @@ SC.PickerPane = SC.PalettePane.extend({
       picker = this.fitPositionToScreenDefault(wret, picker, anchor) ;
     }
     this.displayDidChange();
+    this._hideOverflow();
     return picker ;
   },
 
@@ -437,7 +458,7 @@ SC.PickerPane = SC.PalettePane.extend({
   fitPositionToScreenPointer: function(w, f, a) {
     var offset = [this.pointerOffset[0], this.pointerOffset[1],
                   this.pointerOffset[2], this.pointerOffset[3]];
-
+                  
     // initiate perfect positions matrix
     // 4 perfect positions: right > left > top > bottom
     // 2 coordinates: x, y
@@ -520,7 +541,7 @@ SC.PickerPane = SC.PalettePane.extend({
     }
     return f ;    
   },
-
+  
   /** @private
     This method will set up pointerOffset and preferMatrix according to type
     and size if not provided explicitly.
@@ -628,8 +649,29 @@ SC.PickerPane = SC.PalettePane.extend({
   */
   windowSizeDidChange: function(oldSize, newSize) {
     this.positionPane();
-  }
+  },
+  
+  
+  remove: function(){
+    this._showOverflow();
+    return sc_super();
+  },
+  
+  _hideOverflow: function(){
+    var body = SC.$(document.body),
+        main = SC.$('.sc-main'),
+        minWidth = parseInt(main.css('minWidth'),0),
+        minHeight = parseInt(main.css('minHeight'),0),
+        windowSize = SC.RootResponder.responder.get('currentWindowSize');
+    if(windowSize.width>=minWidth && windowSize.height>=minHeight){
+      body.css('overflow', 'hidden');           
+    }
+  },
 
+  _showOverflow: function(){
+    var body = SC.$(document.body);
+    body.css('overflow', 'visible');     
+  }
 });
 
 /**

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

@@ -188,7 +188,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
 
     The button theme will be popup
   */
-  controlStyle: 'popup',
+  theme: 'popup',
 
   /**
     Render method gets triggered when these properties change
@@ -223,9 +223,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
   SELECT_BUTTON_SPRITE_WIDTH: 28,
 
   /**
-    Binds the button's selection state to the menu's visibility.
-
-    @private
+    Binds the select button's active state to the visibility of its menu.
   */
   isActiveBinding: '*menu.isVisibleInWindow',
 
@@ -285,6 +283,12 @@ SC.SelectButtonView = SC.ButtonView.extend(
     @default YES
   */
   supportFocusRing: YES,
+  
+  /**
+    Disable context menu.
+  */
+  isContextMenuEnabled: NO,
+  
 
   /**
     Left Alignment based on the size of the button
@@ -477,11 +481,12 @@ SC.SelectButtonView = SC.ButtonView.extend(
     var buttonLabel, menuWidth, scrollWidth, lastMenuWidth, offsetWidth,
       items, elementOffsetWidth, largestMenuWidth, item, element, idx,
       value, itemList, menuControlSize, menuHeightPadding, customView,
-      customMenuView, menu, itemsLength, dummyMenuItemView, menuItemViewEscapeHTML;
+      customMenuView, menu, itemsLength, dummyMenuItemView, 
+      menuItemViewEscapeHTML, menuWidthOffset, body;
 
     buttonLabel = this.$('.sc-button-label')[0] ;
 
-    var menuWidthOffset = SC.SelectButtonView.MENU_WIDTH_OFFSET ;
+    menuWidthOffset = SC.SelectButtonView.MENU_WIDTH_OFFSET ;
     if(!this.get('isDefaultPosition')) {
       switch (this.get('controlSize')) {
         case SC.TINY_CONTROL_SIZE:
@@ -518,13 +523,14 @@ SC.SelectButtonView = SC.ButtonView.extend(
 
     items = this.get('itemList') ;
 
-    var customViewClassName = this.get('customViewClassName') ;
-    var customViewMenuOffsetWidth = this.get('customViewMenuOffsetWidth') ;
-    var className = 'sc-view sc-pane sc-panel sc-palette sc-picker sc-menu select-button sc-scroll-view sc-menu-scroll-view sc-container-view menuContainer sc-button-view sc-menu-item sc-regular-size' ;
+    var customViewClassName = this.get('customViewClassName'),
+        customViewMenuOffsetWidth = this.get('customViewMenuOffsetWidth'),
+        className = 'sc-view sc-pane sc-panel sc-palette sc-picker sc-menu select-button sc-scroll-view sc-menu-scroll-view sc-container-view menuContainer sc-button-view sc-menu-item sc-regular-size' ;
     className = customViewClassName ? (className + ' ' + customViewClassName) : className ;
 
     dummyMenuItemView = (this.get('customView') || SC.MenuItemView).create(); 
     menuItemViewEscapeHTML = dummyMenuItemView.get('escapeHTML') ;
+    var body = document.body;
     for (idx = 0, itemsLength = items.length; idx < itemsLength; ++idx) {
       //getting the width of largest menu item
       item = items.objectAt(idx) ;
@@ -532,13 +538,13 @@ SC.SelectButtonView = SC.ButtonView.extend(
       element.style.cssText = 'top:-10000px; left: -10000px;  position: absolute;' ;
       element.className = className ;
       element.innerHTML = menuItemViewEscapeHTML ? SC.RenderContext.escapeHTML(item.title) : item.title ;
-      document.body.appendChild(element) ;
+      body.appendChild(element) ;
       elementOffsetWidth = element.offsetWidth + customViewMenuOffsetWidth;
 
       if (!largestMenuWidth || (elementOffsetWidth > largestMenuWidth)) {
         largestMenuWidth = elementOffsetWidth ;
       }
-      document.body.removeChild(element) ;
+      body.removeChild(element) ;
     }
     largestMenuWidth = (largestMenuWidth > lastMenuWidth) ?
                       largestMenuWidth: lastMenuWidth ;
@@ -573,7 +579,26 @@ SC.SelectButtonView = SC.ButtonView.extend(
       itemHeightKey: 'height',
       layout: { width: largestMenuWidth },
       controlSize: menuControlSize,
-      itemWidth: lastMenuWidth
+      itemWidth: lastMenuWidth,
+
+      /**
+        PerformKeyEquivalent, for handling tab and shift + tab
+        Prevents the focus going to next fields when menu is open and you tab
+
+        @param {String} keystring
+        @param {SC.Event} evt
+        @returns {Boolean}  YES if handled
+      */
+
+      performKeyEquivalent: function( keystring, evt ) {
+        switch (keystring) {
+          case 'tab':
+          case 'shift_tab':
+            return YES ;
+          default:
+            return sc_super() ;
+        }
+      }
     }) ;
 
     // no menu to toggle... bail...
@@ -635,8 +660,8 @@ SC.SelectButtonView = SC.ButtonView.extend(
     }
 
     var preferMatrixAttributeTop = controlSizeTuning ,
-      itemIdx = this.get('itemIdx') ,
-      leftAlign = this.get('leftAlign'), defPreferMatrix, tempPreferMatrix ;
+        itemIdx = this.get('itemIdx') ,
+        leftAlign = this.get('leftAlign'), defPreferMatrix, tempPreferMatrix ;
 
     if(this.get('isDefaultPosition')) {
       defPreferMatrix = [1, 0, 3] ;
@@ -739,7 +764,6 @@ SC.SelectButtonView = SC.ButtonView.extend(
 
     // Reset state.
     this._isMouseDown = NO;
-    this.set('isActive', NO);
     return YES;
   },
 
@@ -760,7 +784,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
       return YES;
     }
     else {
-      arguments.callee.base.apply(this,arguments);
+      return sc_super();
     }
   },
 
@@ -778,7 +802,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
         this.resignFirstResponder() ;
       }
     }
-    return arguments.callee.base.apply(this,arguments);
+    return sc_super();
   },
 
   /** Function overridden - tied to the isEnabled state */
@@ -792,7 +816,10 @@ SC.SelectButtonView = SC.ButtonView.extend(
   */
   _button_isSelectedDidChange: function() {
 
-  }.observes('isSelected')
+  }.observes('isSelected'),
+  
+  didAppendToDocument: function() {
+  }
 
 }) ;
 

data/lib/frameworks/sproutcore/frameworks/desktop/system/drag.js

@@ -12,13 +12,13 @@ SC.DRAG_AUTOSCROLL_ZONE_THICKNESS = 20;
   @class
   
   An instance of this object is created whenever a drag occurs.  The instance
-  manages the mouse/touch events and coordinating with droppable targets until the
+  manages the mouse events and coordinating with droppable targets until the
   user releases the mouse button. 
   
   To initiate a drag, you should call SC.Drag.start() with the options below
   specified in a hash. Pass the ones you need to get the drag you want:  
   
-  - *event: (req)* The mouse event/touch that triggered the drag.  This will be used
+  - *event: (req)* The mouse event that triggered the drag.  This will be used
     to position the element.
   
   - *source: (req)* The drag source object that should be consulted during 
@@ -80,7 +80,7 @@ SC.Drag = SC.Object.extend(
   
   /**
     If YES, then the ghostView will acts like a cursor and attach directly
-    to the mouse/touch location.
+    to the mouse location.
     
     @readOnly
     @type Boolean
@@ -117,7 +117,15 @@ SC.Drag = SC.Object.extend(
     @type Boolean
   */
   slideBack: YES,
-
+  
+  /**
+    The original mouse down event.
+    
+    @readOnly
+    @type SC.Event
+  */
+  mouseDownEvent: null,
+  
   /**
     The origin to slide back to in the coordinate of the dragView's 
     containerView.
@@ -128,7 +136,7 @@ SC.Drag = SC.Object.extend(
   
   /**
     The current location of the mouse pointer in window coordinates. This is 
-    updated as long as the mouse button is pressed or touch is active. Drop targets are 
+    updated as long as the mouse button is pressed. Drop targets are 
     encouraged to update this property in their dragUpdated() method 
     implementations.
     
@@ -282,7 +290,7 @@ SC.Drag = SC.Object.extend(
     
     var evt = this.event ;
     
-    // compute the ghost offset from the original start location
+    // compute the ghost offset from the original mouse location
     
     var loc = { x: evt.pageX, y: evt.pageY } ;
     this.set('location', loc) ;
@@ -305,14 +313,8 @@ SC.Drag = SC.Object.extend(
     // position the ghost view
     if(!this._ghostViewHidden) this._positionGhostView(evt) ;
     
-    if (evt.makeTouchResponder) {
-      // Should use invokeLater if I can figure it out
-      var self = this;
-      SC.Timer.schedule({ target: evt, action: function(){ if (!evt.hasEnded) evt.makeTouchResponder(self, YES); }, interval: 1 });
-    } else {
-      // notify root responder that a drag is in process
-      this.ghostView.rootResponder.dragDidStart(this, evt) ;
-    }
+    // notify root responder that a drag is in process
+    this.ghostView.rootResponder.dragDidStart(this) ;
     
     var source = this.source ;
     if (source && source.dragDidBegin) source.dragDidBegin(this, loc) ;
@@ -323,15 +325,40 @@ SC.Drag = SC.Object.extend(
       ary[idx].tryToPerform('dragStarted', this, evt) ;
     }
   },
+
+  /** @private
+    Cancel the drag operation.
+
+    This notifies the data source that the drag ended and removes the
+    ghost view, but does not notify the drop target of a drop.
+
+    This is called by RootResponder's keyup method when the user presses
+    escape and a drag is in progress.
+  */
+  cancelDrag: function() {
+    var target = this._lastTarget,
+        loc = this.get('location');
+
+    if (target && target.dragExited) target.dragExited(this, this._lastMouseDraggedEvent);
+
+    this._destroyGhostView();
+
+    if (this.get('ghost')) {
+      if (this._dragViewWasVisible) this._getDragView().set('isVisible', YES);
+      this._dragViewWasVisible = null;
+    }
+
+    var source = this.source;
+    if (source && source.dragDidEnd) source.dragDidEnd(this, loc, SC.DRAG_NONE);
+
+    this._lastTarget = null;
+    this._dragInProgress = NO;
+  },
   
   // ..........................................
   // PRIVATE PROPERTIES AND METHODS
   //
-
-  touchStart: function(evt) {
-    return YES;
-  },
-
+  
   /** @private
     This method is called repeatedly during a mouse drag.  It updates the
     position of the ghost image, then it looks for a current drop target and
@@ -343,10 +370,11 @@ SC.Drag = SC.Object.extend(
     if (!scrolled && (evt.pageX === loc.x) && (evt.pageY === loc.y)) {
       return ; // quickly ignore duplicate calls
     } 
-    
+
     // save the new location to avoid duplicate mouseDragged event processing
     loc = { x: evt.pageX, y: evt.pageY };
     this.set('location', loc) ;
+    this._lastMouseDraggedEvent = evt;
     
     // STEP 1: Determine the deepest drop target that allows an operation.
     // if the drop target selected the last time this method was called 
@@ -395,11 +423,7 @@ SC.Drag = SC.Object.extend(
     // reposition the ghostView
     if(!this._ghostViewHidden) this._positionGhostView(evt) ;
   },
-
-  touchesDragged: function(evt){
-    this.mouseDragged(evt);
-  },
-
+  
   /**
     @private
     
@@ -458,10 +482,6 @@ SC.Drag = SC.Object.extend(
     this._dragInProgress = NO ; // required by autoscroll (invoked by a timer)
   },
 
-  touchEnd: function(evt){
-    this.mouseUp(evt);
-  },
-
   /** @private
     Returns the dragView. If it is not set, the source is returned.
   */
@@ -504,7 +524,7 @@ SC.Drag = SC.Object.extend(
   },
   
   /** @private
-    Positions the ghost view underneath the mouse/touch with the initial offset
+    Positions the ghost view underneath the mouse with the initial offset
     recorded by when the drag started.
   */
   _positionGhostView: function(evt) {
@@ -649,7 +669,7 @@ SC.Drag = SC.Object.extend(
   
   /** @private
     Performs auto-scrolling for the drag.  This will only do anything if
-    the user keeps the mouse/touch within a few pixels of one location for a little
+    the user keeps the mouse within a few pixels of one location for a little
     while.
     
     Returns YES if a scroll was performed.
@@ -663,7 +683,7 @@ SC.Drag = SC.Object.extend(
     // STEP 1: Find the first view that we can actually scroll.  This view 
     // must be:
     // - scrollable
-    // - the mouse pointer or touch must be within a scrolling hot zone
+    // - the mouse pointer must be within a scrolling hot zone
     // - there must be room left to scroll in that direction. 
     
     // NOTE: an event is passed only when called from mouseDragged