sproutcore 1.10.3.1 → 1.11.0.rc1

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

@@ -46,7 +46,7 @@ sc_require('views/segment');
 SC.SegmentedView = SC.View.extend(SC.Control,
 /** @scope SC.SegmentedView.prototype */ {
 
-  /**
+  /** @private
     @ field
     @type Boolean
     @default YES
@@ -56,7 +56,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     return NO;
   }.property('isEnabledInPane').cacheable(),
 
-  /**
+  /** @private
     @type String
     @default 'tablist'
     @readOnly
@@ -64,7 +64,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
   //ariaRole: 'tablist',
   ariaRole: 'group', // workaround for <rdar://problem/10444670>; switch back to 'tablist' later with <rdar://problem/10463928> (also see segment.js)
 
-  /**
+  /** @private
     @type Array
     @default ['sc-segmented-view']
     @see SC.View#classNames
@@ -296,6 +296,22 @@ SC.SegmentedView = SC.View.extend(SC.Control,
   */
   segmentViewClass: SC.SegmentView,
 
+  /**
+    Set to YES if you would like your SegmentedView to size itself based on its
+    visible segments. Useful if you're using SegmentedView in a flowed context
+    (for example if its parent view has `childViewLayout: SC.View.HORIZONTAL_STACK`).
+
+    The view will not auto-resize unless you define an initial value for the layout
+    property which will be auto-resized (i.e. `width` when in the default horizontal
+    orientation). This is to prevent the view from inappropriately adding width to a
+    flexible (`{ left: 0, right: 0 }`) layout.
+
+    Has no effect if `shouldHandleOverflow` is NO.
+
+    @type Boolean
+    @default NO
+   */
+  shouldAutoResize: NO,
 
   /** @private
     The following properties are used to map items to child views. Item keys
@@ -356,17 +372,17 @@ SC.SegmentedView = SC.View.extend(SC.Control,
   */
   itemsDidChange: function () {
     var items = this.get('items') || [],
-      localItem,                        // Used to avoid altering the original items
-      previousItem,
-      childViews = this.get('childViews'),
-      childView,
-      overflowView = childViews.lastObject(),
-      value = this.get('value'),        // The value can change if items that were once selected are removed
-      isSelected,
-      itemKeys = this.get('itemKeys'),
-      itemKey,
-      segmentViewClass = this.get('segmentViewClass'),
-      i, j;
+        localItem,                        // Used to avoid altering the original items
+        previousItem,
+        childViews = this.get('childViews'),
+        childView,
+        overflowView = this.get('overflowView'),
+        value = this.get('value'),        // The value can change if items that were once selected are removed
+        isSelected,
+        itemKeys = this.get('itemKeys'),
+        itemKey,
+        segmentViewClass = this.get('segmentViewClass'),
+        i, j;
 
     // Update childViews
     if (childViews.get('length') - 1 > items.get('length')) {   // We've lost segments (ie. childViews)
@@ -523,7 +539,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       visibleDim = isHorizontal ? this.$().width() : this.$().height();
 
     // Only overflow if we've gone below the minimum dimension required to fit all the segments
-    if (this.get('shouldHandleOverflow') && (this.isOverflowing || visibleDim <= this.cachedMinimumDim)) {
+    if (this.get('shouldHandleOverflow') && (this.get('isOverflowing') || visibleDim <= this.cachedMinimumDim)) {
       this.invokeLast(this.remeasure);
     }
   },
@@ -549,7 +565,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
 
     if (this.get('isVisibleInWindow')) {
       // Make all the views visible so that they can be measured
-      overflowView = childViews.lastObject();
+      overflowView = this.get('overflowView');
       overflowView.set('isVisible', YES);
 
       for (var i = childViews.get('length') - 1; i >= 0; i--) {
@@ -572,15 +588,24 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     var childViews = this.get('childViews'),
         childView,
         value = this.get('value'),
-        overflowView = childViews.lastObject(),
+        overflowView = this.get('overflowView'),
         isHorizontal = this.get('layoutDirection') === SC.LAYOUT_HORIZONTAL,
+        layoutProperty = isHorizontal ? 'width' : 'height',
         visibleDim = isHorizontal ? this.$().width() : this.$().height(),  // The inner width/height of the div
         curElementsDim = 0,
-        dimToFit,
-        length, i;
+        dimToFit, length, i,
+        isOverflowing = NO,
+        wantsAutoResize = this.get('shouldAutoResize'),
+        canAutoResize = !SC.none(this.getPath('layout.%@'.fmt(layoutProperty))),
+        willAutoResize = wantsAutoResize && canAutoResize;
+
+    // If child views and cachedDims lengths are out of sync here, it means adjustOverflow
+    // got called in between itemsDidChange and remeasure. Since we know that the remeasure is
+    // scheduled, just return and let the remeasure + adjustOverflow happen later.
+    if (childViews.get('length') !== this.cachedDims.length + 1) { return; }
 
     // This variable is useful to optimize when we are overflowing
-    this.isOverflowing = NO;
+    isOverflowing = NO;
     overflowView.set('isSelected', NO);
 
     // Clear out the overflow items (these are the items not currently visible)
@@ -591,16 +616,18 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       childView = childViews.objectAt(i);
       curElementsDim += this.cachedDims[i];
 
-      // check for an overflow (leave room for the overflow segment except for with the last segment)
-      dimToFit = (i === length - 1) ? curElementsDim : curElementsDim + this.cachedOverflowDim;
+      // Check and see if this item kicks us over into overflow.
+      if (!isOverflowing && !willAutoResize) {
+        // (don't leave room for the overflow segment on the last item)
+        dimToFit = (i === length - 1) ? curElementsDim : curElementsDim + this.cachedOverflowDim;
+        if (dimToFit > visibleDim) isOverflowing = YES;
+      }
 
-      if (dimToFit > visibleDim) {
+      // Update the view depending on overflow state.
+      if (isOverflowing) {
         // Add the localItem to the overflowItems
         this.overflowItems.pushObject(childView.get('localItem'));
 
-        // Record that we're now overflowing
-        this.isOverflowing = YES;
-
         childView.set('isVisible', NO);
 
         // If the first item is already overflowed, make the overflowView first segment
@@ -618,9 +645,16 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       }
     }
 
-    // Show/hide the overflow view if we have overflowed
-    if (this.isOverflowing) overflowView.set('isVisible', YES);
-    else overflowView.set('isVisible', NO);
+    // Show/hide the overflow view as needed.
+    overflowView.set('isVisible', isOverflowing);
+
+    // Set the overflowing property.
+    this.setIfChanged('isOverflowing', isOverflowing);
+
+    // Autosize if needed.
+    if (willAutoResize) {
+      this.adjust(layoutProperty, this.isOverflowing ? this.cachedMinimumDim : curElementsDim);
+    }
 
     // Store the minimum dimension (height/width) before overflow
     this.cachedMinimumDim = curElementsDim + this.cachedOverflowDim;
@@ -674,7 +708,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
         v, rect,
         point;
 
-    point = {x: x, y: y};
+    point = { x: x, y: y };
     for (i = 0, length = cv.length; i < length; i++) {
       v = cv[i];
 
@@ -720,25 +754,33 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     event occurred.
   */
   displayItemIndexForEvent: function (evt) {
-    var renderDelegate = this.get('renderDelegate');
-    var x = evt.clientX;
-    var y = evt.clientY;
-
-    // Accessibility workaround: <rdar://problem/10467360> WebKit sends all event coords as 0,0 for all AXPress-triggered events
-    if (x === 0 && y === 0) {
-      var el = evt.target;
-      if (el) {
+    var el = evt.target,
+        x = evt.clientX,
+        y = evt.clientY,
+        ret = -1;
+
+    if (el && el !== this.get('layer')) {
+      // Accessibility workaround: WebKit sends all event coords as 0,0 for all AXPress-triggered events.
+      // For example, triggering an element with VoiceOver in OS X.
+      // Note: by ensuring that the event target wasn't our own layer, we avoid the situation where an
+      // actual mouse clicked at 0,0 and hit only our layer.
+      if (x === 0 && y === 0) {
         var offset = SC.offset(el);
+
+        // Generate point coordinates in the middle of the target element.
         x = offset.x + Math.round(el.offsetWidth / 2);
         y = offset.y + Math.round(el.offsetHeight / 2);
       }
-    }
 
-    if (renderDelegate && renderDelegate.indexForClientPosition) {
-      return renderDelegate.indexForClientPosition(this, x, y);
+      var renderDelegate = this.get('renderDelegate');
+      if (renderDelegate && renderDelegate.indexForClientPosition) {
+        ret = renderDelegate.indexForClientPosition(this, x, y);
+      } else {
+        ret = this.indexForClientPosition(x, y);
+      }
     }
 
-    return this.indexForClientPosition(evt.clientX, evt.clientY);
+    return ret;
   },
 
   /** @private */
@@ -802,12 +844,15 @@ SC.SegmentedView = SC.View.extend(SC.Control,
 
   /** @private */
   mouseDown: function (evt) {
+    // Fast path, reject secondary clicks.
+    if (evt.which !== 1) return false;
+
     var childViews = this.get('childViews'),
         childView,
         overflowIndex = childViews.get('length') - 1,
         index;
 
-    if (!this.get('isEnabledInPane')) return YES; // nothing to do
+    if (!this.get('isEnabledInPane')) return YES; // nothing to do // TODO: return NO?
 
     index = this.displayItemIndexForEvent(evt);
     if (index >= 0) {
@@ -818,9 +863,13 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       // if mouse was pressed on the overflow segment, popup the menu
       if (index === overflowIndex) this.showOverflowMenu();
       else this._isMouseDown = YES;
-    }
 
-    return YES;
+      return YES;
+    }
+    // If this event originated outside of a segment, pass the event along up.
+    else {
+      return NO;
+    }
   },
 
   /** @private */
@@ -1128,11 +1177,19 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     Presents the popup menu containing overflowed segments.
   */
   showOverflowMenu: function () {
-    var childViews = this.get('childViews'),
+    var self = this,
+        childViews = this.get('childViews'),
+        itemValueKey = this.get('itemValueKey'),
+        itemLayerIdKey = this.get('itemLayerIdKey'),
         overflowItems = this.overflowItems,
         overflowItemsLength,
         startIndex,
-        isArray, value;
+        isArray,
+        value,
+        item,
+        layerId,
+        layer,
+        overflowElement;
 
     // Check the currently selected item if it is in overflowItems
     overflowItemsLength = overflowItems.get('length');
@@ -1141,8 +1198,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     value = this.get('value');
     isArray = SC.isArray(value);
     for (var i = 0; i < overflowItemsLength; i++) {
-      var item = overflowItems.objectAt(i),
-          itemValueKey = this.get('itemValueKey');
+      item = overflowItems.objectAt(i);
 
       if (isArray ? value.indexOf(item.get(itemValueKey)) >= 0 : value === item.get(itemValueKey)) {
         item.set('isChecked', YES);
@@ -1152,11 +1208,17 @@ SC.SegmentedView = SC.View.extend(SC.Control,
 
       // Track the matching segment index
       item.set('index', startIndex + i);
+
+      // Add '-overflow-menu-item' to the existing layer id (if set),
+      // and use that as the layer id on the menu. This prevents the original
+      // segment from being removed when the menu closes.
+      layerId = item.get(itemLayerIdKey);
+      if (layerId) {
+        item.set('overflowLayerId', layerId + '-overflow-menu-item');
+      }
     }
 
     // TODO: we can't pass a shortcut key to the menu, because it isn't a property of SegmentedView (yet?)
-    var self = this;
-
     var menu = SC.MenuPane.create({
       layout: { width: 200 },
       items: overflowItems,
@@ -1165,6 +1227,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       itemIsEnabledKey: this.get('itemIsEnabledKey'),
       itemKeyEquivalentKey: this.get('itemKeyEquivalentKey'),
       itemCheckboxKey: 'isChecked',
+      itemLayerIdKey: 'overflowLayerId',
 
       // We need to be able to update our overflow segment even if the user clicks outside of the menu.  Since
       // there is no callback method or observable property when the menu closes, override modalPaneDidClick().
@@ -1179,8 +1242,8 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       }
     });
 
-    var layer = this.get('layer');
-    var overflowElement = layer.childNodes[layer.childNodes.length - 1];
+    layer = this.get('layer');
+    overflowElement = layer.childNodes[layer.childNodes.length - 1];
     menu.popup(overflowElement);
 
     menu.addObserver("selectedItem", this, 'selectOverflowItem');
@@ -1194,7 +1257,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
         overflowItemsLength,
         childViews = this.get('childViews'),
         overflowIndex = Infinity,
-        overflowView = childViews.lastObject(),
+        overflowView = this.get('overflowView'),
         childView;
 
     // The index where childViews are all overflowed

data/lib/frameworks/sproutcore/frameworks/desktop/views/select.js

@@ -553,9 +553,10 @@ SC.SelectView = SC.ButtonView.extend(
 
       idx += 1;
 
-      this.set('_itemList', itemList);
     }, this );
 
+    this.set('_itemList', itemList);
+
     var value = this.get('value');
     if (SC.none(value)) {
       if (SC.none(emptyName)) {
@@ -798,6 +799,9 @@ SC.SelectView = SC.ButtonView.extend(
     Holding down the button should display the menu pane.
   */
   mouseDown: function (evt) {
+    // Fast path, reject secondary clicks.
+    if (evt.which !== 1) return false;
+
     if (!this.get('isEnabledInPane')) return YES; // handled event, but do nothing
     this.set('isActive', YES);
     this._isMouseDown = YES;
@@ -872,18 +876,20 @@ SC.SelectView = SC.ButtonView.extend(
 
   /**
     @private
-    Pressing the Up or Down arrow key should display the menu pane
+    Pressing the Up or Down arrow key should display the menu pane. Pressing escape should
+    resign first responder.
   */
-  interpretKeyEvents: function (event) {
-    if (event) {
-      if ((event.keyCode === 38 || event.keyCode === 40)) {
-        this._action();
-      }
-      else if (event.keyCode === 27) {
-        this.resignFirstResponder();
-      }
-    }
-    return sc_super();
+  moveUp: function(evt) {
+    this._action();
+    return YES;
+  },
+  /** @private */
+  moveDown: function(evt) {
+    this._action();
+    return YES;
+  },
+  cancel: function(evt) {
+    this.resignFirstResponder();
   },
 
   /** @private

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

@@ -7,25 +7,23 @@
 
 /** @class
 
-  A SliderView shows a horizontal slider control that you can use to set
-  variable values.
+  SliderView displays a horizontal slider control that you can use to choose
+  from a spectrum (or a sequence) of values.
 
-  You can use a slider view much like you would any other control.  Simply
-  set the value or content/contentValueKey to whatever value you want to
-  display.  You can also set the maximumValue and minValue properties to
-  determine the mapping of the control to its children.
+  The property `value` holds the slider's current value. You can set the
+  `minimum`, `maximum` and `step` properties as well.
 
   @extends SC.View
   @extends SC.Control
   @since SproutCore 1.0
-  @test in progress
 */
 SC.SliderView = SC.View.extend(SC.Control,
 /** @scope SC.SliderView.prototype */ {
 
+  /** @private */
   classNames: 'sc-slider-view',
 
-  /**
+  /** @private
     The WAI-ARIA role for slider view. This property's value should not be
     changed.
 
@@ -34,21 +32,22 @@ SC.SliderView = SC.View.extend(SC.Control,
   ariaRole: 'slider',
 
   /**
-    Bind this to the current value of the progress bar.  Note that by default
-    an empty value will disable the progress bar and a multiple value too make
-    it indeterminate.
+    The current value of the slider.
   */
   value: 0.50,
   valueBindingDefault: SC.Binding.single().notEmpty(),
 
   /**
-    The minimum value of the progress.
+    The minimum value of the slider.
+
+    @type {Number}
+    @default 0
   */
   minimum: 0,
   minimumBindingDefault: SC.Binding.single().notEmpty(),
 
   /**
-    Optionally specify the key used to extract the minimum progress value
+    Optionally specify the key used to extract the minimum slider value
     from the content object.  If this is set to null then the minimum value
     will not be derived from the content object.
 
@@ -57,13 +56,16 @@ SC.SliderView = SC.View.extend(SC.Control,
   contentMinimumKey: null,
 
   /**
-    The maximum value of the progress bar.
+    The maximum value of the slider bar.
+
+    @type {Number}
+    @default 1
   */
-  maximum: 1.0,
+  maximum: 1,
   maximumBindingDefault: SC.Binding.single().notEmpty(),
 
   /**
-    Optionally specify the key used to extract the maximum progress value
+    Optionally specify the key used to extract the maximum slider value
     from the content object.  If this is set to null then the maximum value
     will not be derived from the content object.
 
@@ -75,16 +77,39 @@ SC.SliderView = SC.View.extend(SC.Control,
     Optionally set to the minimum step size allowed.
 
     All values will be rounded to this step size when displayed.
+
+    @type {Number}
+    @default 0.1
   */
   step: 0.1,
 
+  /*
+    When set to true, this draws and positions an element for each step, giving
+    your theme the opportunity to show a mark at each step.
+
+    @type {Boolean}
+    @default {false}
+  */
+  markSteps: false,
+
+  /*
+    When set to true, this view handles mouse-wheel scroll events by changing the
+    value. Set to false to prevent a slider in a scroll view from hijacking scroll
+    events mid-scroll, for example.
+
+    @type {Boolean}
+    @default {true}
+  */
+  updateOnScroll: true,
+
   // ..........................................................
-  // INTERNAL PROPERTIES
+  // INTERNAL
   //
 
-  displayProperties: ['displayValue', 'ariaValue', 'minimum', 'maximum', 'step', 'frame'],
+  /* @private The full list includes min, max, and stepPositions, but those are redundant with displayValue. */
+  displayProperties: ['displayValue', 'markSteps'],
 
-  /**
+  /** @private
    @property
    The raw, unchanged value to be provided to screen readers and the like.
   */
@@ -92,14 +117,74 @@ SC.SliderView = SC.View.extend(SC.Control,
     return this.get('value');
   }.property('value').cacheable(),
 
-  // The name of the render delegate which is creating and maintaining
-  // the DOM associated with instances of this view
+  /* @private
+    The name of the render delegate which is creating and maintaining
+    the DOM associated with instances of this view.
+  */
   renderDelegateName: 'sliderRenderDelegate',
 
+  /*
+    The value, converted to a percent out of 100 between maximum and minimum.
+
+    @property
+    @readonly
+  */
   displayValue: function() {
+    return this._displayValueForValue(this.get('value'));
+  }.property('value', 'minimum', 'maximum', 'step').cacheable(),
+
+  /*
+    If a nonzero step is specified, this property contains an array of each step's value between
+    min and max (inclusive).
+
+    @property
+    @readonly
+    @type {Array|null}
+  */
+  steps: function() {
+    var step = this.get('step');
+    // FAST PATH: No step.
+    if (!step) return null;
+    var min = this.get('minimum'),
+      max = this.get('maximum'),
+      cur = min,
+      ret = [];
+    while (cur < max) {
+      ret.push(cur);
+      cur += step;
+      cur = Math.round(cur / step) * step;
+    }
+    ret.push(max);
+    return ret;
+  }.property('minimum', 'maximum', 'step').cacheable(),
+
+  /*
+    If a nonzero step is specified, this property contains an array of each step's position,
+    expressed as a fraction between 0 and 1 (inclusive). You can use these values to generate
+    and position labels for each step, for example.
+
+    @property
+    @readonly
+    @type {Array|null}
+  */
+  stepPositions: function() {
+    var steps = this.get('steps');
+    // FAST PATH: No steps.
+    if (!steps) return null;
+    var min = steps[0],
+      max = steps[steps.length - 1],
+      ret = [],
+      len = steps.length, i;
+    for (i = 0; i < len; i++) {
+      ret[i] = Math.round((steps[i] - min) / (max - min) * 1000) / 1000;
+    }
+    return ret;
+  }.property('steps').cacheable(),
+
+  // Given a particular value, returns the percentage value.
+  _displayValueForValue: function(value) {
     var min = this.get('minimum'),
         max = this.get('maximum'),
-        value = this.get('value'),
         step = this.get('step');
 
     // determine the constrained value.  Must fit within min & max
@@ -111,54 +196,95 @@ SC.SliderView = SC.View.extend(SC.Control,
     }
 
     // determine the percent across
-    if(value!==0) value = Math.floor((value - min) / (max - min) * 100);
+    value = Math.round((value - min) / (max - min) * 100);
 
     return value;
-  }.property('value', 'minimum', 'maximum', 'step').cacheable(),
+  },
 
+  /** @private Clears the mouse just down flag. */
+  _sc_clearMouseJustDown: function () {
+    this._sc_isMouseJustDown = NO;
+  },
+
+  /** @private Flag used to track when the mouse is pressed. */
   _isMouseDown: NO,
 
+  /** @private Flag used to track when mouse was just down so that mousewheel events firing as the finger is lifted don't shoot the slider over. */
+  _sc_isMouseJustDown: NO,
+
+  /** @private Timer used to track time immediately after a mouse up event. */
+  _sc_clearMouseJustDownTimer: null,
+
+  /* @private */
   mouseDown: function(evt) {
+    // Fast path, reject secondary clicks.
+    if (evt.which && evt.which !== 1) return false;
+
     if (!this.get('isEnabledInPane')) return YES; // nothing to do...
     this.set('isActive', YES);
     this._isMouseDown = YES ;
+
+    // Clear existing mouse just down timer.
+    if (this._sc_clearMouseJustDownTimer) {
+      this._sc_clearMouseJustDownTimer.invalidate();
+      this._sc_clearMouseJustDownTimer = null;
+    }
+
+    this._sc_isMouseJustDown = NO;
+
     return this._triggerHandle(evt, YES);
   },
 
-  // mouseDragged uses same technique as mouseDown.
+  /* @private mouseDragged uses same technique as mouseDown. */
   mouseDragged: function(evt) {
     return this._isMouseDown ? this._triggerHandle(evt) : YES;
   },
 
-  // remove active class
+  /* @private remove active class */
   mouseUp: function(evt) {
     if (this._isMouseDown) this.set('isActive', NO);
     var ret = this._isMouseDown ? this._triggerHandle(evt) : YES ;
     this._isMouseDown = NO;
+
+    // To avoid annoying jitter from Magic Mouse (which sends mousewheel events while trying
+    // to lift your finger after a drag), ignore mousewheel events for a small period of time.
+    this._sc_isMouseJustDown = YES;
+    this._sc_clearMouseJustDownTimer = this.invokeLater(this._sc_clearMouseJustDown, 250);
+
     return ret ;
   },
 
+  /* @private */
   mouseWheel: function(evt) {
-    if (!this.get('isEnabledInPane')) return YES;
+    if (!this.get('isEnabledInPane')) return NO;
+    if (!this.get('updateOnScroll')) return NO;
+
+    // If the Magic Mouse is pressed, it still sends mousewheel events rapidly, we don't want errant wheel
+    // events to move the slider.
+    if (this._isMouseDown || this._sc_isMouseJustDown) return NO;
+
     var min = this.get('minimum'),
         max = this.get('maximum'),
-        step = this.get('step'),
-        newVal = this.get('value')+((evt.wheelDeltaX+evt.wheelDeltaY)*step),
-        value = Math.round(newVal / step) * step ;
+        step = this.get('step') || ((max - min) / 20),
+        newVal = this.get('value') + ((evt.wheelDeltaX+evt.wheelDeltaY)*step),
+        value = Math.round(newVal / step) * step;
     if (newVal< min) this.setIfChanged('value', min);
     else if (newVal> max) this.setIfChanged('value', max);
     else this.setIfChanged('value', newVal);
     return YES ;
   },
 
+  /* @private */
   touchStart: function(evt){
     return this.mouseDown(evt);
   },
 
+  /* @private */
   touchEnd: function(evt){
     return this.mouseUp(evt);
   },
 
+  /* @private */
   touchesDragged: function(evt){
     return this.mouseDragged(evt);
   },
@@ -199,7 +325,7 @@ SC.SliderView = SC.View.extend(SC.Control,
 
     // convert to value using minimum/maximum then constrain to steps
     loc = min + ((max-min)*loc);
-    if (step !== 0) loc = Math.round(loc / step) * step ;
+    if (!SC.none(step) && step !== 0) loc = Math.round(loc / step) * step ;
 
     // if changes by more than a rounding amount, set v.
     if (Math.abs(v-loc)>=0.01) {
@@ -209,12 +335,13 @@ SC.SliderView = SC.View.extend(SC.Control,
     return YES ;
   },
 
-  /** tied to the isEnabledInPane state */
+  /** @private tied to the isEnabledInPane state */
   acceptsFirstResponder: function() {
     if (SC.FOCUS_ALL_CONTROLS) { return this.get('isEnabledInPane'); }
     return NO;
   }.property('isEnabledInPane'),
 
+  /* @private TODO: Update to use interpretKeyEvents. */
   keyDown: function(evt) {
      // handle tab key
      if (evt.which === 9 || evt.keyCode === 9) {
@@ -229,7 +356,7 @@ SC.SliderView = SC.View.extend(SC.Control,
           size = max-min, val=0, calculateStep, current=this.get('value');
 
        if (evt.which === 37 || evt.which === 38 || evt.which === 34 ){
-         if(step === 0){
+         if (SC.none(step) || step === 0) {
            if(size<100){
              val = current-1;
            }else{
@@ -242,7 +369,7 @@ SC.SliderView = SC.View.extend(SC.Control,
          }
        }
        if (evt.which === 39 || evt.which === 40 || evt.which === 33 ){
-           if(step === 0){
+           if (SC.none(step) || step === 0) {
               if(size<100){
                 val = current + 2;
               }else{
@@ -268,6 +395,7 @@ SC.SliderView = SC.View.extend(SC.Control,
      return YES;
    },
 
+  /* @private */
    contentKeys: {
      'contentValueKey': 'value',
      'contentMinimumKey': 'minimum',