sproutcore 1.4.5 → 1.5.0.pre.3

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

@@ -0,0 +1,74 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  Renders and updates the DOM representation of a radio button (a single button,
+  not the group).
+  
+  Expected Properties
+  -----------------------------------
+  
+  - isSelected
+  - isActive
+  - isMixed
+  - isEnabled
+  - title
+  
+  Optional Properties
+  -----------------------------------
+  
+  - width: an optional width of the radio button
+  - labelRenderDelegate properties
+  
+*/
+SC.BaseTheme.radioRenderDelegate = SC.RenderDelegate.create({
+  name: 'radio',
+  
+  render: function(dataSource, context) {
+    var theme = dataSource.get('theme');
+    
+    var isSelected = dataSource.get('isSelected'),
+        width = dataSource.get('width');
+    
+    context.setClass({
+      active: dataSource.get('isActive'),
+      mixed: dataSource.get('isMixed'),
+      sel: dataSource.get('isSelected'),
+      disabled: !dataSource.get('isEnabled')
+    });
+    
+    context.attr('role', 'radio');
+    context.attr('aria-checked', isSelected);
+    
+    if (width) context.css('width', width);
+    
+    context.push('<span class = "button"></span>');
+    
+    context = context.begin('span').addClass('sc-button-label');
+    theme.labelRenderDelegate.render(dataSource, context);
+    context = context.end();
+  },
+  
+  update: function(dataSource, jquery) {
+    var theme = dataSource.get('theme');
+    
+    var isSelected = dataSource.get('isSelected'), width = dataSource.get('width');
+    
+    jquery.setClass({
+      active: dataSource.get('isActive'),
+      mixed: dataSource.get('isMixed'),
+      sel: dataSource.get('isSelected'),
+      disabled: !dataSource.get('isEnabled')
+    });
+    
+    jquery.attr('aria-checked', isSelected);
+    
+    jquery.css('width', width ? width : null);
+    
+    theme.labelRenderDelegate.update(dataSource, jquery.find('.sc-button-label'));
+  }
+});

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

@@ -0,0 +1,109 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  @class
+  Renders and updates the HTML representation of a group of radio buttons.
+  
+  Expects Properties
+  -------------------------------
+  
+  - items: a collection of data sources for radioRenderDelegates
+  - layoutDirection
+  - isEnabled
+  
+  Extended API
+  --------------------------------
+  As this encompasses an entire group, it must provide a way to determine
+  which radio button is the target of an event. The indexForEvent method
+  does exactly this, and all radioGroupRenderDelegates _must_ support it.
+  
+  Also, as it would be low-performance to update any but the changed radio
+  button, there is a method to update a specific index.
+*/
+SC.BaseTheme.radioGroupRenderDelegate = SC.RenderDelegate.create({
+  name: 'radio-group',
+  
+  render: function(dataSource, context) {
+    var theme = dataSource.get('theme'),
+        name = SC.guidFor(this),
+        items = dataSource.get('items'), idx, len = items.length, item;
+    
+    
+    context.addClass(dataSource.get('layoutDirection'));
+    context.attr('role', 'radiogroup');
+    
+    for (idx = 0; idx < len; idx++) {
+      item = items[idx];
+      context = context.begin('div')
+        .addClass('radio-' + idx)
+        .attr('index', idx)
+        .addClass(theme.classNames)
+        .addClass(theme.radioRenderDelegate.name)
+        
+        // so we can identify it in event handling
+        .addClass('sc-radio-button');
+      
+      theme.radioRenderDelegate.render(item, context);
+      
+      context = context.end();
+    }
+    
+    // store the radio count so we can know when to regenerate in update
+    dataSource.get('renderState').radioCount = idx;
+  },
+  
+  update: function(dataSource, jquery) {
+    var theme = dataSource.get('theme'),
+        name = SC.guidFor(this),
+        items = dataSource.get('items'), idx, len = items.length, item;
+    
+    jquery.addClass(dataSource.get('layoutDirection'));
+    
+    if (dataSource.get('renderState').radioCount !== len) {
+      // just regenerate if the count has changed. It would be better
+      // to be intelligent, but that would also be rather complex
+      // for such a rare case.
+      var context = SC.RenderContext(jquery[0]);
+      this.render(dataSource, context);
+      context.update();
+      return;
+    }
+    
+    for (idx = 0; idx < len; idx++) {
+      item = items[idx];
+      theme.radioRenderDelegate.update(item, jquery.find('.radio-' + idx));
+    }
+  },
+  
+  /**
+    Updates the radio button at the specified index.
+    
+    @param {Object} dataSource The RenderDelegate data source.
+    @param {jQuery} jquery A jQuery instance with the DOM for this radio group.
+    @param {Number} index The index of the radio to update.
+  */
+  updateRadioAtIndex: function(dataSource, jquery, index) {
+    var item = dataSource.get('items')[index];
+    dataSource.get('theme').radioRenderDelegate.update(item, jquery.find('.radio-' + index));
+  },
+  
+  /**
+    Returns the index of the radio button that was the target of the
+    supplied event.
+    
+    @param {Object} dataSource The RenderDelegate data source.
+    @param {jQuery} jquery A jQuery instance with the DOM for this radio group.
+    @param {SC.Event SC.Touch} event The event or SC.Touch object.
+  */
+  
+  indexForEvent: function(dataSource, jquery, evt) {
+    var index = $(evt.target).closest('.sc-radio-button').attr('index');
+    if (isNaN(index)) return undefined;
+    return parseInt(index, 0);
+  }
+});

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

@@ -0,0 +1,70 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  Renders and updates the HTML representation of a segment child view within
+  SC.SegmentedView.
+*/
+SC.BaseTheme.segmentRenderDelegate = SC.Object.create({
+  name: 'segment',
+  
+  render: function(dataSource, context) {
+    var theme = dataSource.get('theme'),
+        buttonDelegate,
+        classes;
+
+    // Segment specific additions
+    classes = {
+      'sc-segment': YES,
+      'sc-first-segment': dataSource.get('isFirstSegment'),
+      'sc-middle-segment': dataSource.get('isMiddleSegment'),
+      'sc-last-segment': dataSource.get('isLastSegment'),
+      'sc-overflow-segment': dataSource.get('isOverflowSegment')
+    };
+    classes['sc-segment-' + dataSource.get('index')] = YES;
+    context.setClass(classes);
+
+    // Use the SC.ButtonView render delegate for the current theme to render the segment as a button
+    buttonDelegate = theme.buttonRenderDelegate;
+    buttonDelegate.render(dataSource, context);
+  },
+
+  update: function(dataSource, jquery) {
+    var theme = dataSource.get('theme'),
+        buttonDelegate,
+        titleMinWidth,
+        classes = {};
+
+    // Segment specific additions
+    // 1. This should be the proper way to do it, only update the classes if necessary, but SC.View will reset all the classes that we added in render!
+    // if (displayProperties.contains('index', 'isFirstSegment', 'isMiddleSegment', 'isLastSegment', 'isOverflowSegment')) {
+    //   
+    //   if (displayProperties.index) classes['sc-segment-' + displayProperties.index] = YES;
+    //   if (displayProperties.isFirstSegment) classes['sc-first-segment'] = displayProperties.isFirstSegment;
+    //   if (displayProperties.isMiddleSegment) classes['sc-middle-segment'] = displayProperties.isMiddleSegment;
+    //   if (displayProperties.isLastSegment) classes['sc-last-segment'] = displayProperties.isLastSegment;
+    //   if (displayProperties.isOverflowSegment) classes['sc-overflow-segment'] = displayProperties.isOverflowSegment;
+    //   
+    //   jquery.setClass(classes);
+    // }
+    // 2. So just re-assign them (even if unchanged)
+    classes = {
+      'sc-segment': YES,
+      'sc-first-segment': dataSource.get('isFirstSegment'),
+      'sc-middle-segment': dataSource.get('isMiddleSegment'),
+      'sc-last-segment': dataSource.get('isLastSegment'),
+      'sc-overflow-segment': dataSource.get('isOverflowSegment') || NO
+    };
+    classes['sc-segment-' + dataSource.get('index')] = YES;
+    jquery.setClass(classes);
+    
+    // Use the SC.ButtonView render delegate for the current theme to update the segment as a button
+    buttonDelegate = theme['buttonRenderDelegate'];
+    buttonDelegate.update(dataSource, jquery);
+  }
+
+});

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

@@ -0,0 +1,58 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  Renders and updates the HTML representation of SC.SegmentedView.
+*/
+SC.BaseTheme.segmentedRenderDelegate = SC.Object.create({
+  name: 'segmented',
+  
+  /*
+    We render everything external to the segments and let each segment use it's own render
+    delegate to render its contents.
+    
+    */
+  render: function(dataSource, context) {  
+    // Use text-align to align the segments
+    context.addStyle('text-align', dataSource.get('align'));
+  },
+  
+  update: function(dataSource, jquery) {
+    jquery.css('text-align', dataSource.get('align'));
+  },
+  
+  /**
+    Return the DOM elements of the segments.  This will be measured by the view to 
+    determine which segments should be overflowed.
+  */
+  segmentLayers: function(dataSource) {
+    return dataSource.$('.sc-segment');
+  },
+
+  indexForClientPosition: function(dataSource, x, y) {
+    var segmentLayers = dataSource.$('.sc-segment'), 
+        length, i,
+        segmentLayer, rect,
+        point;
+    
+    point = {x: x, y: y};
+    for (i = 0, length = segmentLayers.length; i < length; i++) {
+      segmentLayer = segmentLayers[i];
+      rect = segmentLayer.getBoundingClientRect();
+      
+      // Convert client rect into standard rect
+      rect.x = rect.left;
+      rect.y = rect.top;
+      
+      // Return the index early if found
+      if (SC.pointInRect(point, rect)) return i;
+    }
+    
+    // Default not found
+    return -1;
+  }
+});

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

@@ -0,0 +1,39 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  Renders and updates the DOM representation of a slider.
+  
+  Parameters
+  -------------------------
+  Requires the following parameters:
+  
+  - value: a value from 0 to 1.
+  - frame: containing the frame in which the slider is being drawn.
+*/
+
+SC.BaseTheme.sliderRenderDelegate = SC.RenderDelegate.create({
+  
+  name: 'slider',
+  
+  render: function(dataSource, context) {
+    var blankImage = SC.BLANK_IMAGE_URL;
+    context.push('<span class="sc-inner">',
+                  '<span class="sc-leftcap"></span>',
+                  '<span class="sc-rightcap"></span>',
+                  '<img src="', blankImage, 
+                  '" class="sc-handle" style="left: ', dataSource.get('value'), '%" />',
+                  '</span>');
+  },
+  
+  update: function(dataSource, jquery) {
+    if (dataSource.didChangeFor('sliderRenderDelegate', 'value')) {
+      jquery.find(".sc-handle").css('left', dataSource.get('value') + "%");
+    }
+  }
+  
+});

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

@@ -0,0 +1,8 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+SC.BaseTheme.SourceList = SC.BaseTheme.subtheme('source-list');

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

@@ -0,0 +1,18 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+SC.BaseTheme.toolbarRenderDelegate = SC.RenderDelegate.create({
+  name: 'toolbar',
+
+  render: function(dataSource, context) {
+    // toolbar has nothing in it
+  },
+  
+  update: function() {
+    // toolbar has nothing to update
+  }
+});

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

@@ -0,0 +1,29 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+SC.BaseTheme.Well = SC.BaseTheme.subtheme('well');
+
+// the 'well'-styled container
+SC.BaseTheme.Well.containerRenderDelegate = SC.Object.create({
+  name: 'container',
+  
+  render: function(dataSource, context) {
+    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>",
+      "<div class='content-background'></div>");
+  },
+  
+  update: function() {
+
+  }
+});

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

@@ -0,0 +1,18 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+SC.BaseTheme.workspaceRenderDelegate = SC.Object.create({
+  name: 'workspace',
+  
+  render: function() {
+    // No DOM to generate -- uses CSS3 to style.
+  },
+
+  update: function() {
+    // No DOM to generate -- uses CSS3 to style.
+  }
+});

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

@@ -5,20 +5,20 @@
 // ========================================================================
 
 SC.DRAG_LINK = 0x0004; SC.DRAG_COPY = 0x0001; SC.DRAG_MOVE = 0x0002;
-SC.DRAG_NONE = 0x0000; SC.DRAG_ANY = 0x0007; // includes SC.DRAG_REORDER
+SC.DRAG_NONE = 0x0000; SC.DRAG_ANY = 0x000F; SC.DRAG_DATA = 0x0008; // includes SC.DRAG_REORDER
 SC.DRAG_AUTOSCROLL_ZONE_THICKNESS = 20;
 
 /**
   @class
   
   An instance of this object is created whenever a drag occurs.  The instance
-  manages the mouse events and coordinating with droppable targets until the
+  manages the mouse/touch 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 that triggered the drag.  This will be used
+  - *event: (req)* The mouse event/touch 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 location.
+    to the mouse/touch location.
     
     @readOnly
     @type Boolean
@@ -109,6 +109,14 @@ SC.Drag = SC.Object.extend(
     @type Boolean
   */
   ghost: YES,
+
+  /**
+    If NO, the source will not be copied, clone, no ghost view will get created,
+    and it won't be moved.
+
+    @type Boolean
+  */
+	sourceIsDraggable: YES,
   
   /**
     If YES, then the ghostView will slide back to its original location if 
@@ -117,15 +125,7 @@ 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.
@@ -136,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. Drop targets are 
+    updated as long as the mouse button is pressed or touch is active. Drop targets are 
     encouraged to update this property in their dragUpdated() method 
     implementations.
     
@@ -285,36 +285,46 @@ SC.Drag = SC.Object.extend(
     This will actually start the drag process. Called by SC.Drag.start().
   */
   startDrag: function() {
-    // create the ghost view
-    this._createGhostView() ;
+		if (this.get('sourceIsDraggable')) {
+	    // create the ghost view
+	    this._createGhostView() ;
+		}
     
     var evt = this.event ;
     
-    // compute the ghost offset from the original mouse location
+    // compute the ghost offset from the original start location
     
     var loc = { x: evt.pageX, y: evt.pageY } ;
     this.set('location', loc) ;
     
-    var dv = this._getDragView() ;
-    var pv = dv.get('parentView') ;
+		if (this.get('sourceIsDraggable')) {
+	    var dv = this._getDragView() ;
+	    var pv = dv.get('parentView') ;
 
-    // convert to global cooridinates
-    var origin = pv ? pv.convertFrameToView(dv.get('frame'), null) : dv.get('frame') ;
+	    // convert to global cooridinates
+	    var origin = pv ? pv.convertFrameToView(dv.get('frame'), null) : dv.get('frame') ;
 
-    if (this.get('ghost')) {
-      // Hide the dragView
-      this._dragViewWasVisible = dv.get('isVisible') ;
-      dv.set('isVisible', NO) ;
-    }
+	    if (this.get('ghost')) {
+	      // Hide the dragView
+	      this._dragViewWasVisible = dv.get('isVisible') ;
+	      dv.set('isVisible', NO) ;
+	    }
 
-    if (this.ghostActsLikeCursor) this.ghostOffset = { x: 14, y: 14 };
-    else this.ghostOffset = { x: (loc.x-origin.x), y: (loc.y-origin.y) } ;
-    
-    // position the ghost view
-    if(!this._ghostViewHidden) this._positionGhostView(evt) ;
-    
-    // notify root responder that a drag is in process
-    this.ghostView.rootResponder.dragDidStart(this) ;
+	    if (this.ghostActsLikeCursor) this.ghostOffset = { x: 14, y: 14 };
+	    else this.ghostOffset = { x: (loc.x-origin.x), y: (loc.y-origin.y) } ;
+    
+	    // 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) ;
+	    }
+		}
     
     var source = this.source ;
     if (source && source.dragDidBegin) source.dragDidBegin(this, loc) ;
@@ -341,12 +351,14 @@ SC.Drag = SC.Object.extend(
 
     if (target && target.dragExited) target.dragExited(this, this._lastMouseDraggedEvent);
 
-    this._destroyGhostView();
+		if (this.get('sourceIsDraggable')) {
+	    this._destroyGhostView();
 
-    if (this.get('ghost')) {
-      if (this._dragViewWasVisible) this._getDragView().set('isVisible', YES);
-      this._dragViewWasVisible = null;
-    }
+	    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);
@@ -358,7 +370,11 @@ SC.Drag = SC.Object.extend(
   // ..........................................
   // 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
@@ -421,9 +437,13 @@ SC.Drag = SC.Object.extend(
     if (source && source.dragDidMove) source.dragDidMove(this, loc) ;
     
     // reposition the ghostView
-    if(!this._ghostViewHidden) this._positionGhostView(evt) ;
+    if(this.get('sourceIsDraggable') && !this._ghostViewHidden) this._positionGhostView(evt) ;
   },
-  
+
+  touchesDragged: function(evt){
+    this.mouseDragged(evt);
+  },
+
   /**
     @private
     
@@ -465,14 +485,16 @@ SC.Drag = SC.Object.extend(
       }
     }
 
-    // destroy the ghost view
-    this._destroyGhostView() ;
+		if (this.get('sourceIsDraggable')) {
+	    // destroy the ghost view
+	    this._destroyGhostView() ;
 
-    if (this.get('ghost')) {
-      // Show the dragView if it was visible
-      if (this._dragViewWasVisible) this._getDragView().set('isVisible', YES) ;
-      this._dragViewWasVisible = null;
-    }
+	    if (this.get('ghost')) {
+	      // Show the dragView if it was visible
+	      if (this._dragViewWasVisible) this._getDragView().set('isVisible', YES) ;
+	      this._dragViewWasVisible = null;
+	    }	
+		}
 
     // notify the source that everything has completed
     var source = this.source ;
@@ -482,6 +504,10 @@ 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.
   */
@@ -524,7 +550,7 @@ SC.Drag = SC.Object.extend(
   },
   
   /** @private
-    Positions the ghost view underneath the mouse with the initial offset
+    Positions the ghost view underneath the mouse/touch with the initial offset
     recorded by when the drag started.
   */
   _positionGhostView: function(evt) {
@@ -669,7 +695,7 @@ SC.Drag = SC.Object.extend(
   
   /** @private
     Performs auto-scrolling for the drag.  This will only do anything if
-    the user keeps the mouse within a few pixels of one location for a little
+    the user keeps the mouse/touch within a few pixels of one location for a little
     while.
     
     Returns YES if a scroll was performed.
@@ -683,7 +709,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 must be within a scrolling hot zone
+    // - the mouse pointer or touch 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
@@ -920,4 +946,4 @@ SC.Drag.mixin(
     delete this._scrollableViews[SC.guidFor(target)] ;  
   }
   
-});
+});