sproutcore 1.7.1.beta → 1.8.0

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

@@ -268,12 +268,13 @@ SC.ScrollerView = SC.View.extend(
     var classNames = {},
         buttons = '',
         parentView = this.get('parentView'),
+        layoutDirection = this.get('layoutDirection'),
         thumbPosition, thumbLength, thumbCenterLength, thumbElement,
         value, max, scrollerLength, length, pct;
 
     // We set a class name depending on the layout direction so that we can
     // style them differently using CSS.
-    switch (this.get('layoutDirection')) {
+    switch (layoutDirection) {
       case SC.LAYOUT_VERTICAL:
         classNames['sc-vertical'] = YES;
         break;
@@ -297,37 +298,13 @@ SC.ScrollerView = SC.View.extend(
 
     // If this is the first time, generate the actual HTML
     if (firstTime) {
-      if (this.get('hasButtons')) {
-        buttons = '<div class="button-bottom"></div><div class="button-top"></div>';
-      } else {
-        buttons = '<div class="endcap"></div>';
-      }
+      context.push('<div class="track"></div>',
+                    '<div class="cap"></div>');
+      this.renderButtons(context, this.get('hasButtons'));
+      this.renderThumb(context, layoutDirection, thumbLength, thumbPosition);
 
-      switch (this.get('layoutDirection')) {
-        case SC.LAYOUT_VERTICAL:
-        context.push('<div class="track"></div>',
-                      '<div class="cap"></div>',
-                      buttons,
-                      '<div class="thumb" style="height: '+thumbLength+'px; top: ' + thumbPosition + 'px;">',
-                      '<div class="thumb-center"></div>',
-                      '<div class="thumb-top"></div>',
-                      '<div class="thumb-bottom"></div></div>');
-
-        //addressing accessibility
-        context.attr('aria-orientation', 'vertical');
-        break;
-        case SC.LAYOUT_HORIZONTAL:
-        context.push('<div class="track"></div>',
-                      '<div class="cap"></div>',
-                      buttons,
-                      '<div class="thumb" style="width: '+thumbLength+'px; left: ' + thumbPosition + 'px;">',
-                      '<div class="thumb-center"></div>',
-                      '<div class="thumb-top"></div>',
-                      '<div class="thumb-bottom"></div></div>');
-
-        //addressing accessibility
-        context.attr('aria-orientation', 'horizontal');
-      }
+      //addressing accessibility
+      context.attr('aria-orientation', 'vertical');
 
       //addressing accessibility
       context.attr('aria-valuemax', this.get('maximum'));
@@ -352,6 +329,26 @@ SC.ScrollerView = SC.View.extend(
     }
   },
 
+  renderThumb: function(context, layoutDirection, thumbLength, thumbPosition) {
+    var styleString;
+    if(layoutDirection === SC.LAYOUT_HORIZONTAL) styleString = 'width: '+thumbLength+'px; left: ' + thumbPosition + 'px;';
+    else styleString = 'height: '+thumbLength+'px; top: ' + thumbPosition + 'px;';
+
+    context.push('<div class="thumb" style="%@">'.fmt(styleString),
+                 '<div class="thumb-center"></div>',
+                 '<div class="thumb-top"></div>',
+                 '<div class="thumb-bottom"></div></div>');
+
+  },
+
+  renderButtons: function(context, hasButtons) {
+    if (hasButtons) {
+      context.push('<div class="button-bottom"></div><div class="button-top"></div>');
+    } else {
+      context.push('<div class="endcap"></div>');
+    }
+  },
+
   /** @private */
   touchScrollDidStart: function(value) {
     this.set("_touchScrollValue", value);
@@ -920,7 +917,6 @@ SC.TouchScrollerView = SC.ScrollerView.extend(
   /** @private */
   render: function(context, firstTime) {
     var classNames = [],
-        buttons = '',
         thumbPosition, thumbLength, thumbCenterLength, thumbElement,
         value, max, scrollerLength, length, pct;
 
@@ -950,36 +946,13 @@ SC.TouchScrollerView = SC.ScrollerView.extend(
 
     // If this is the first time, generate the actual HTML
     if (firstTime) {
-      if (this.get('hasButtons')) {
-        buttons = '<div class="button-bottom"></div><div class="button-top"></div>';
-      } else {
-        buttons = '<div class="endcap"></div>';
-      }
+      context.push('<div class="track"></div>'+
+                    '<div class="cap"></div>');
+      this.renderButtons(context, this.get('hasButtons'));
+      this.renderThumb(context, this.get('layoutDirection'), thumbLength);
+    }
 
-      switch (this.get('layoutDirection')) {
-        case SC.LAYOUT_VERTICAL:
-        context.push('<div class="track"></div>',
-                      '<div class="cap"></div>',
-                      buttons,
-                      '<div class="thumb">',
-                      '<div class="thumb-top"></div>',
-                      '<div class="thumb-clip">',
-                      '<div class="thumb-inner" style="-webkit-transform: translateY('+(thumbLength-1044)+'px);">',
-                      '<div class="thumb-center"></div>',
-                      '<div class="thumb-bottom"></div></div></div></div>');
-        break;
-        case SC.LAYOUT_HORIZONTAL:
-        context.push('<div class="track"></div>',
-                      '<div class="cap"></div>',
-                      buttons,
-                      '<div class="thumb">',
-                      '<div class="thumb-top"></div>',
-                      '<div class="thumb-clip">',
-                      '<div class="thumb-inner" style="-webkit-transform: translateX('+(thumbLength-1044)+'px);">',
-                      '<div class="thumb-center"></div>',
-                      '<div class="thumb-bottom"></div></div></div></div>');
-      }
-    } else {
+    else {
       // The HTML has already been generated, so all we have to do is
       // reposition and resize the thumb
 
@@ -990,6 +963,19 @@ SC.TouchScrollerView = SC.ScrollerView.extend(
 
       this.adjustThumb(thumbElement, thumbPosition, thumbLength);
     }
+  },
+
+  renderThumb: function(context, layoutDirection, thumbLength) {
+    // where is this magic number from?
+    thumbLength -= 1044;
+    layoutDirection = (layoutDirection === SC.LAYOUT_HORIZONTAL ? 'X' : 'Y');
+
+    context.push('<div class="thumb">'+
+                 '<div class="thumb-top"></div>'+
+                 '<div class="thumb-clip">'+
+                 '<div class="thumb-inner" style="-webkit-transform: translate%@(%@px);">'.fmt(layoutDirection, thumbLength)+
+                 '<div class="thumb-center"></div>'+
+                 '<div class="thumb-bottom"></div></div></div></div>');
+
   }
-  
 });

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

@@ -21,7 +21,15 @@ SC.SegmentView = SC.View.extend(SC.Control,
     @default 'tab'
     @readOnly
   */
-  ariaRole: 'tab',
+  //ariaRole: 'tab',
+  ariaRole: 'button', // workaround for <rdar://problem/10444670>; switch back to 'tab' later with <rdar://problem/10463928> (also see segmented.js)
+
+  /**
+    @type Boolean
+    @default YES
+    @readOnly
+  */
+  isSegment: YES,
 
   /**
     @type Array
@@ -58,6 +66,18 @@ SC.SegmentView = SC.View.extend(SC.Control,
   */
   isSelected: NO,
 
+  /**
+    Change the layout direction to make this a vertical segment instead of horizontal ones. 
+    Possible values:
+    
+      - SC.LAYOUT_HORIZONTAL
+      - SC.LAYOUT_VERTICAL
+    
+    @type String
+    @default SC.LAYOUT_HORIZONTAL
+  */
+  layoutDirection: SC.LAYOUT_HORIZONTAL,   
+
   /**
     @type String
     @default null
@@ -73,7 +93,7 @@ SC.SegmentView = SC.View.extend(SC.Control,
   supportFocusRing: NO,
 
   // TODO: isDefault, isCancel, value not really used by render delegate
-  displayProperties: ['icon', 'displayTitle', 'value', 'displayToolTip', 'isDefault', 'isCancel', 'width', 'isFirstSegment', 'isMiddleSegment', 'isLastSegment', 'isOverflowSegment', 'index'],
+  displayProperties: ['icon', 'displayTitle', 'value', 'displayToolTip', 'isDefault', 'isCancel', 'width', 'isSegment','isFirstSegment', 'isMiddleSegment', 'isLastSegment', 'isOverflowSegment', 'index', 'layoutDirection'],
 
   /**
     @type String

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

@@ -61,7 +61,8 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     @default 'tablist'
     @readOnly
   */
-  ariaRole: 'tablist',
+  //ariaRole: 'tablist',
+  ariaRole: 'group', // workaround for <rdar://problem/10444670>; switch back to 'tablist' later with <rdar://problem/10463928> (also see segment.js)
 
   /**
     @type Array
@@ -253,6 +254,15 @@ SC.SegmentedView = SC.View.extend(SC.Control,
   */
   itemKeyEquivalentKey: null,
 
+  /**
+    If YES, overflowing items are placed into a menu and an overflow segment is
+    added to popup that menu.
+
+    @type Boolean
+    @default YES
+  */
+  shouldHandleOverflow: YES,
+
   /**
     The title to use for the overflow segment if it appears.
 
@@ -318,14 +328,26 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       toolTip: toolTip,
       icon: icon,
       isLastSegment: YES,
-      isOverflowSegment: YES
+      isOverflowSegment: YES,
+      layoutDirection: this.get('layoutDirection'),
+      isVisible: this.get('shouldHandleOverflow')
     });
+    this.set('overflowView', overflowView);
 
     this.appendChild(overflowView);
 
     this.itemsDidChange();
   },
 
+  shouldHandleOverflowDidChange: function() {
+    if (this.get('shouldHandleOverflow')) {
+      // remeasure should show/hide it as needed
+      this.invokeLast(this.remeasure);
+    } else {
+      this.get('overflowView').set('isVisible', NO);
+    }
+  }.observes('shouldHandleOverflow'),
+
   /** @private
     Called whenever the number of items changes.  This method populates SegmentedView's childViews, taking
     care to re-use existing childViews if possible.
@@ -374,7 +396,8 @@ SC.SegmentedView = SC.View.extend(SC.Control,
         // We create a default SC.ButtonView-like object for each segment
         childView = segmentViewClass.create({
           controlSize: this.get('controlSize'),
-          localize: this.get('localize')
+          localize: this.get('localize'),
+          layoutDirection: this.get('layoutDirection')
         });
 
         // Attach the child
@@ -441,7 +464,9 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     }
 
     // Force a segment remeasure to check overflow
-    this.invokeLast(this.remeasure);
+    if (this.get('shouldHandleOverflow')) {
+      this.invokeLast(this.remeasure);
+    }
   }.observes('*items.[]'),
 
   /** @private
@@ -462,25 +487,32 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       SC.Logger.warn("Item content change was observed on item without matching segment child view.");
     }
 
-    // Reset our measurements (which depend on width or title) and adjust visible views
-    this.invokeLast(this.remeasure);
+    // Reset our measurements (which depend on width/height or title) and adjust visible views
+    if (this.get('shouldHandleOverflow')) {
+      this.invokeLast(this.remeasure);
+    }
   },
 
   /** @private
     Whenever the view resizes, we need to check to see if we're overflowing.
   */
   viewDidResize: function() {
-    var visibleWidth = this.$().width();
-
-    // Only overflow if we've gone below the minimum width required to fit all the segments
-    if (this.isOverflowing || visibleWidth <= this.cachedMinimumWidth) this.adjustOverflow();
+    var isHorizontal = this.get('layoutDirection') === SC.LAYOUT_HORIZONTAL,
+        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)) {
+	  this.adjustOverflow();
+    }
   },
 
   /** @private
     Whenever visibility changes, we need to check to see if we're overflowing.
   */
   isVisibleInWindowDidChange: function() {
-    this.invokeLast(this.remeasure);
+    if (this.get('shouldHandleOverflow')) {
+      this.invokeLast(this.remeasure);
+    }
   }.observes('isVisibleInWindow'),
 
   /** @private
@@ -488,6 +520,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     segments for overflow if necessary.
   */
   remeasure: function() {
+    if (!this.get('shouldHandleOverflow')) { return; }
     var renderDelegate = this.get('renderDelegate'),
         childViews = this.get('childViews'),
         overflowView;
@@ -501,24 +534,28 @@ SC.SegmentedView = SC.View.extend(SC.Control,
         childViews.objectAt(i).set('isVisible', YES);
       }
 
-      this.cachedWidths = renderDelegate.segmentWidths(this);
-      this.cachedOverflowWidth = renderDelegate.overflowSegmentWidth(this);
+
+      this.cachedDims = this.segmentDimensions();
+      this.cachedOverflowDim = this.overflowSegmentDim();
 
       this.adjustOverflow();
     }
   },
 
   /** @private
-    This method is called to adjust the segment views for overflow.
+    This method is called to adjust the segment views to see if we need to handle for overflow.
    */
   adjustOverflow: function() {
+    if (!this.get('shouldHandleOverflow')) { return; }
+
     var childViews = this.get('childViews'),
         childView,
         value = this.get('value'),
         overflowView = childViews.lastObject(),
-        visibleWidth = this.$().width(),             // The inner width of the div
-        curElementsWidth = 0,
-        widthToFit,
+        isHorizontal = this.get('layoutDirection') === SC.LAYOUT_HORIZONTAL,
+        visibleDim = isHorizontal ? this.$().width() : this.$().height(),  // The inner width/height of the div
+        curElementsDim = 0,
+        dimToFit,
         length, i;
 
     // This variable is useful to optimize when we are overflowing
@@ -528,15 +565,15 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     // Clear out the overflow items (these are the items not currently visible)
     this.overflowItems = [];
 
-    length = this.cachedWidths.length;
+    length = this.cachedDims.length;
     for (i=0; i < length; i++) {
       childView = childViews.objectAt(i);
-      curElementsWidth += this.cachedWidths[i];
+      curElementsDim += this.cachedDims[i];
 
       // check for an overflow (leave room for the overflow segment except for with the last segment)
-      widthToFit = (i === length - 1) ? curElementsWidth : curElementsWidth + this.cachedOverflowWidth;
+      dimToFit = (i === length - 1) ? curElementsDim : curElementsDim + this.cachedOverflowDim;
 
-      if (widthToFit > visibleWidth) {
+      if (dimToFit > visibleDim) {
         // Add the localItem to the overflowItems
         this.overflowItems.pushObject(childView.get('localItem'));
 
@@ -564,10 +601,78 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     if (this.isOverflowing) overflowView.set('isVisible', YES);
     else overflowView.set('isVisible', NO);
 
-    // Store the minimum width before overflow
-    this.cachedMinimumWidth = curElementsWidth + this.cachedOverflowWidth;
+    // Store the minimum dimension (height/width) before overflow
+    this.cachedMinimumDim = curElementsDim + this.cachedOverflowDim;
+  },
+
+  /**
+    Return the dimensions (either heights or widths depending on the layout direction) of the DOM 
+    elements of the segments.  This will be measured by the view to determine which segments should
+    be overflowed.
+
+    It ignores the last segment (the overflow segment).
+  */
+  segmentDimensions: function() {
+    var cv = this.get('childViews'),
+        v, f,
+        dims = [],
+        isHorizontal = this.get('layoutDirection') === SC.LAYOUT_HORIZONTAL;
+
+    for (var i = 0, length = cv.length; i < length - 1; i++) {
+      v = cv[i];
+      f = v.get('frame');
+      dims[i] = isHorizontal ? f.width : f.height;
+    }
+
+    return dims;
   },
 
+  /**
+    Return the dimension (height or width depending on the layout direction) over the overflow segment.
+  */
+  overflowSegmentDim: function() {
+    var cv = this.get('childViews'),
+        v, f, 
+        isHorizontal = this.get('layoutDirection') === SC.LAYOUT_HORIZONTAL;
+
+    v = cv.length && cv[cv.length - 1];
+    if (v) {
+      f = v.get('frame');
+      return isHorizontal ? f.width : f.height;
+    }
+
+    return 0;
+  },
+
+  /**
+    Return the index of the segment view that is the target of the mouse click.
+  */
+  indexForClientPosition: function(x, y) {
+    var cv = this.get('childViews'),
+        length, i,
+        v, rect,
+        point;
+
+    point = {x: x, y: y};
+    for (i = 0, length = cv.length; i < length; i++) {
+      v = cv[i];
+      
+      rect = v.get('layer').getBoundingClientRect();
+      rect = { 
+        x: rect.left, 
+        y: rect.top, 
+        width: (rect.right-rect.left), 
+        height: (rect.bottom - rect.top) 
+      };
+      
+      // Return the index early if found
+      if (SC.pointInRect(point, rect)) return i;
+    }
+
+    // Default not found
+    return -1;
+  }, 
+
   // ..........................................................
   // RENDERING/DISPLAY SUPPORT
   //
@@ -594,11 +699,25 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     event occurred.
   */
   displayItemIndexForEvent: function(evt) {
-    var renderDelegate = this.get('renderDelegate');
-
+    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 offset = SC.offset(el);
+        x = offset.x + Math.round(el.offsetWidth/2);
+        y = offset.y + Math.round(el.offsetHeight/2);
+      }
+    }
+    
     if (renderDelegate && renderDelegate.indexForClientPosition) {
-      return renderDelegate.indexForClientPosition(this, evt.clientX, evt.clientY);
+      return renderDelegate.indexForClientPosition(this, x, y);
     }
+    
+    return this.indexForClientPosition(evt.clientX, evt.clientY);
   },
 
   /** @private */
@@ -670,7 +789,6 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     if (!this.get('isEnabled')) return YES; // nothing to do
 
     index = this.displayItemIndexForEvent(evt);
-
     if (index >= 0) {
       childView = childViews.objectAt(index);
       childView.set('isActive', YES);
@@ -690,7 +808,6 @@ SC.SegmentedView = SC.View.extend(SC.Control,
         index;
 
     index = this.displayItemIndexForEvent(evt);
-
     if (this._isMouseDown && (index >= 0)) {
 
       this.triggerItemAtIndex(index);
@@ -700,9 +817,10 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       activeChildView.set('isActive', NO);
       this.activeChildView = null;
 
-      this._isMouseDown = NO;
+      
     }
-
+    
+    this._isMouseDown = NO;
     return YES;
   },
 
@@ -966,7 +1084,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       if (targetKey) {
         target = item.get ? item.get(targetKey) : item[targetKey];
       }
-      if (resp) resp.sendAction(action, target, this, this.get('pane'));
+      if (resp) resp.sendAction(action, target, this, this.get('pane'),value);
     }
 
     if(val !== undefined && (!action || this.get('selectSegmentWhenTriggeringAction'))) {
@@ -976,7 +1094,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     // if an action/target is defined on self use that also
     action =this.get('action');
     if (action && resp) {
-      resp.sendAction(action, this.get('target'), this, this.get('pane'));
+      resp.sendAction(action, this.get('target'), this, this.get('pane'),value);
     }
   },