sproutcore 1.5.0.pre.3 → 1.5.0.pre.4

data/lib/frameworks/sproutcore/frameworks/desktop/english.lproj/segmented.css

@@ -3,59 +3,60 @@
   white-space: nowrap;
 }
 
-.sc-segment:active, .sc-segment:focus {
-	outline: none;
+.sc-segment-view:active, .sc-segment-view:focus {
+  outline: none;
 }
 
-.sc-segment img.icon {
-	position: relative;
-	vertical-align: middle;
-	top: -2px;
-	margin-right: 2px;
-	height: 16px;
-	width: 16px;
+.sc-segment-view img.icon {
+  position: relative;
+  vertical-align: middle;
+  top: -2px;
+  margin-right: 2px;
+  height: 16px;
+  width: 16px;
 }
 
 /* @group Layout */
 
-.sc-segmented-view .sc-segment {
-	display: inline-block;
-	top: 0;
-	height: 22px;
-	line-height: 22px;
-	border-right: 1px #555 solid;
-	text-shadow: #b0b0b0 0px 1px 0px;
-	text-decoration: none ;
-	color: black ;
-	text-align: center;
+.sc-segmented-view .sc-segment-view {
+  position: relative;
+  display: inline-block;
+  top: 0;
+  height: 22px;
+  line-height: 22px;
+  border-right: 1px #555 solid;
+  text-shadow: #b0b0b0 0px 1px 0px;
+  text-decoration: none ;
+  color: black ;
+  text-align: center;
 }
 
 .sc-segmented-view .sc-button-inner {
-	display: block;
-	min-width: 20px;
-	min-height: 22px;
+  display: block;
+  min-width: 20px;
+  min-height: 22px;
 }
 
-.sc-segmented-view .sc-segment.sc-first-segment {
-	padding-left: 10px;
+.sc-segmented-view .sc-segment-view.sc-first-segment {
+  padding-left: 10px;
 }
 
 
-.sc-segmented-view .sc-segment.sc-first-segment .sc-button-inner {
-	padding-right: 10px;
+.sc-segmented-view .sc-segment-view.sc-first-segment .sc-button-inner {
+  padding-right: 10px;
 }
-.sc-segmented-view .sc-segment.sc-middle-segment .sc-button-inner {
-	padding-left: 10px;
-	padding-right: 10px;
-  
+.sc-segmented-view .sc-segment-view.sc-middle-segment .sc-button-inner {
+  padding-left: 10px;
+  padding-right: 10px;
+
 }
-.sc-segmented-view .sc-segment.sc-last-segment .sc-button-inner {
-	padding-left: 10px;
+.sc-segmented-view .sc-segment-view.sc-last-segment .sc-button-inner {
+  padding-left: 10px;
 }
 
-.sc-segmented-view .sc-segment.sc-last-segment {
-	padding-right: 10px;
-	border:none;
+.sc-segmented-view .sc-segment-view.sc-last-segment {
+  padding-right: 10px;
+  border:none;
 }
 
 /* @end */
@@ -64,67 +65,67 @@
 
 /* NORMAL */
 
-.sc-segmented-view .sc-segment .sc-button-inner {
- 	background: #DDDDDD;
+.sc-segmented-view .sc-segment-view .sc-button-inner {
+  background: #DDDDDD;
 }
 
-.sc-segmented-view .sc-segment.sc-last-segment {
- 	background: #DDDDDD;
+.sc-segmented-view .sc-segment-view.sc-last-segment {
+  background: #DDDDDD;
 }
 
-.sc-segmented-view .sc-segment.sc-first-segment {
-	background: #DDDDDD;
+.sc-segmented-view .sc-segment-view.sc-first-segment {
+  background: #DDDDDD;
 }
 
 
 /* SELECTED */
-.sc-segmented-view .sc-segment.active .sc-button-inner,
-.sc-segmented-view .sc-segment.sel .sc-button-inner {
-	background: #999999;
-	text-shadow: #909090 0px 1px 0px;
+.sc-segmented-view .sc-segment-view.active .sc-button-inner,
+.sc-segmented-view .sc-segment-view.sel .sc-button-inner {
+  background: #999999;
+  text-shadow: #909090 0px 1px 0px;
 }
 
-.sc-segmented-view .sc-segment.sc-last-segment.sel,
-.sc-segmented-view .sc-segment.sc-last-segment.active {
-	background: #999999;
+.sc-segmented-view .sc-segment-view.sc-last-segment.sel,
+.sc-segmented-view .sc-segment-view.sc-last-segment.active {
+  background: #999999;
 }
 
-.sc-segmented-view .sc-segment.sc-first-segment.sel,
-.sc-segmented-view .sc-segment.sc-first-segment.active {
-	background: #999999;
+.sc-segmented-view .sc-segment-view.sc-first-segment.sel,
+.sc-segmented-view .sc-segment-view.sc-first-segment.active {
+  background: #999999;
 }
 
 /* DISABLED */
 
-.sc-segmented-view .sc-segment.disabled .sc-button-inner,
-.sc-segmented-view.disabled .sc-segment .sc-button-inner {
-	background: #FFFFFF;
-	color: #999;
+.sc-segmented-view .sc-segment-view.disabled .sc-button-inner,
+.sc-segmented-view.disabled .sc-segment-view .sc-button-inner {
+  background: #FFFFFF;
+  color: #999;
 }
 
-.sc-segmented-view .sc-segment.sc-last-segment.disabled,
-.sc-segmented-view.disabled .sc-segment.sc-last-segment {
-	background: #FFFFFF;
+.sc-segmented-view .sc-segment-view.sc-last-segment.disabled,
+.sc-segmented-view.disabled .sc-segment-view.sc-last-segment {
+  background: #FFFFFF;
 }
 
-.sc-segmented-view .sc-segment.sc-first-segment.disabled,
-.sc-segmented-view.disabled .sc-segment.sc-first-segment {
-	background: #FFFFFF;
+.sc-segmented-view .sc-segment-view.sc-first-segment.disabled,
+.sc-segmented-view.disabled .sc-segment-view.sc-first-segment {
+  background: #FFFFFF;
 }
 
-.sc-segmented-view .sc-segment.sel .sc-button-inner.disabled,
-.sc-segmented-view.disabled .sc-segment.sel .sc-button-inner {
-	background: #FFFFFF;
+.sc-segmented-view .sc-segment-view.sel .sc-button-inner.disabled,
+.sc-segmented-view.disabled .sc-segment-view.sel .sc-button-inner {
+  background: #FFFFFF;
 }
 
-.sc-segmented-view .sc-segment.sc-last-segment.sel.disabled,
-.sc-segmented-view.disabled .sc-segment.sc-last-segment.sel {
-	background: #FFFFFF;
+.sc-segmented-view .sc-segment-view.sc-last-segment.sel.disabled,
+.sc-segmented-view.disabled .sc-segment-view.sc-last-segment.sel {
+  background: #FFFFFF;
 }
 
-.sc-segmented-view .sc-segment.sc-first-segment.sel.disabled,
-.sc-segmented-view.disabled .sc-segment.sc-first-segment.sel {
-	background: #FFFFFF;
+.sc-segmented-view .sc-segment-view.sc-first-segment.sel.disabled,
+.sc-segmented-view.disabled .sc-segment-view.sc-first-segment.sel {
+  background: #FFFFFF;
 }
 /* @end */
 

data/lib/frameworks/sproutcore/frameworks/desktop/mixins/collection_row_delegate.js

@@ -55,8 +55,16 @@ SC.CollectionRowDelegate = {
     @property
     @type Number
   */
-  rowHeight: function() {
-    return this.get('itemHeight') + this.get('rowPadding') * 2;
+  rowHeight: function(key, value) {
+    var rowPadding = this.get('rowPadding');
+    var itemHeight = this.get('itemHeight');
+
+    if (value !== undefined) {
+      this.set('itemHeight', value-rowPadding*2);
+      return value;
+    }
+
+    return itemHeight + rowPadding * 2;
   }.property('itemHeight', 'rowPadding'),
 
   /**

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

@@ -10,8 +10,7 @@
   SC.SegmentedView.
 */
 SC.BaseTheme.segmentRenderDelegate = SC.Object.create({
-  name: 'segment',
-  
+
   render: function(dataSource, context) {
     var theme = dataSource.get('theme'),
         buttonDelegate,
@@ -19,13 +18,12 @@ SC.BaseTheme.segmentRenderDelegate = SC.Object.create({
 
     // 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;
+    if (!SC.none(dataSource.get('index'))) 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
@@ -40,28 +38,15 @@ SC.BaseTheme.segmentRenderDelegate = SC.Object.create({
         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;
+    if (!SC.none(dataSource.get('index'))) 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

@@ -9,49 +9,68 @@
   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) {  
+  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 
+    Return the widths 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).
   */
-  segmentLayers: function(dataSource) {
-    return dataSource.$('.sc-segment');
+  segmentWidths: function(dataSource) {
+    var elements = dataSource.$('.sc-segment-view'),
+        el,
+        widths = [];
+
+    for (var i = 0, length = elements.length; i < length - 1; i++) {
+      el = elements[i];
+      widths[i] = el.getBoundingClientRect().width;
+    }
+
+    return widths;
+  },
+
+  overflowSegmentWidth: function(dataSource) {
+    var elements = dataSource.$('.sc-segment-view'),
+        el;
+
+    el = elements[elements.length - 1];
+
+    return el.getBoundingClientRect().width;
   },
 
   indexForClientPosition: function(dataSource, x, y) {
-    var segmentLayers = dataSource.$('.sc-segment'), 
+    var segmentLayers = dataSource.$('.sc-segment-view'),
         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/system/drag.js

@@ -8,6 +8,31 @@ SC.DRAG_LINK = 0x0004; SC.DRAG_COPY = 0x0001; SC.DRAG_MOVE = 0x0002;
 SC.DRAG_NONE = 0x0000; SC.DRAG_ANY = 0x000F; SC.DRAG_DATA = 0x0008; // includes SC.DRAG_REORDER
 SC.DRAG_AUTOSCROLL_ZONE_THICKNESS = 20;
 
+// Add draggable and scrollable support to SC.View
+SC.View.reopen(
+  /** @scope SC.View.prototype */ {
+
+  init: function(original) {
+    original();
+
+    // register for drags
+    if (this.get('isDropTarget')) { SC.Drag.addDropTarget(this) ; }
+
+    // register scroll views for autoscroll during drags
+    if (this.get('isScrollable')) { SC.Drag.addScrollableView(this) ; }
+  }.enhance(),
+
+  destroy: function(original) {
+    // unregister for drags
+    if (this.get('isDropTarget')) { SC.Drag.removeDropTarget(this) ; }
+
+    // unregister for autoscroll during drags
+    if (this.get('isScrollable')) { SC.Drag.removeScrollableView(this) ; }
+
+    return original();
+  }.enhance()
+});
+
 /**
   @class
   

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/date_field/ui.js

@@ -70,7 +70,7 @@ pane.verifyEmpty = function verifyEmpty(view, expectedHint) {
   var layer = view.$();
   
   ok(!layer.hasClass('not-empty'), 'layer should not have not-empty class');
-  if(SC.browser.safari) equals(input.val(), '', 'input should have empty value');
+  if(SC.browser.webkit) equals(input.val(), '', 'input should have empty value');
   else equals(input.val(), expectedHint, 'input should have empty value');
   
   if (expectedHint) {

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

@@ -8,7 +8,8 @@
 /*global module test htmlbody ok equals same stop start */
 
 var iconURL= "http://www.freeiconsweb.com/Icons/16x16_people_icons/People_046.gif";
-var pane, view, elem, rect1, rect2, rect3;
+var pane, view;
+
 module("SC.SegmentedView", {
   setup: function() {
     SC.RunLoop.begin();
@@ -22,118 +23,39 @@ module("SC.SegmentedView", {
           itemTitleKey: 'value',
           itemValueKey: 'value',
           itemIconKey: 'icon',
+          itemActionKey: 'action',
           value: "Item1 Item3".w(),
           allowsEmptySelection: NO,
-          layout: { height: 25 } 
+          layout: { height: 25, width: 400 }
         })]
     });
     pane.append(); // make sure there is a layer...
     SC.RunLoop.end();
-    
+
     view = pane.childViews[0];
-    
-    var boundingRect = function(segment){
-      var r;
-      if (segment.getBoundingClientRect) {
-        r = segment.getBoundingClientRect();
-      }else{
-        r = {};
-        var ret   = SC.viewportOffset(segment); // get x & y
-        var cq = SC.$(segment);
-        r.top = ret.y;
-        r.left = ret.x;
-        r.bottom = ret.y + cq.outerHeight();
-        r.right = ret.x + cq.outerWidth();
-      }
-      
-      return r;
-    };
-    
-    
-    elem = view.get('layer').childNodes[0];
-    rect1 = boundingRect(elem);
-    elem = view.get('layer').childNodes[1];
-    rect2 = boundingRect(elem);
-    elem = view.get('layer').childNodes[2];
-    rect3 = boundingRect(elem);
-    
-    
-  }, 
-  
+  },
+
   teardown: function() {
     pane.remove();
-    pane = view = elem = rect1 = rect2 = rect3 = null ;
+    pane = view = null ;
   }
 });
 
 test("Check that properties are mapped correctly", function() {
-    view.triggerItemAtIndex(1);
-    SC.RunLoop.begin();
-    view.set('isEnabled', YES);
-    SC.RunLoop.end();
-    equals(view.get('value'), "Item2", "the second item should be selected.");
-    var items=view.displayItems();
-    equals(items[0].title, "Item1", 'Computed properties should match');
-    equals(items[0].value, "Item1", 'Computed properties should match');
-    equals(items[0].isEnabled, true, 'Computed properties should match');
-    equals(items[0].icon, iconURL, 'Computed properties should match');
-    equals(items[0].width, null, 'Computed properties should match');
-    equals(items[0].toolTip, null, 'Computed properties should match');
-    equals(items[0].index, 0, 'Computed properties should match');
-    
-    var firstItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { clientX: rect1.left + 1, clientY: rect1.top + 1 });
-    view.mouseDown(firstItemEvent);
-    equals(view._isMouseDown, YES, 'mousedown');
-    equals(view.get('activeIndex'), 0, '');
-    
- });
-
-
-
- test("Check that mouse actions work", function() {
-   view.triggerItemAtIndex(1);
-   SC.RunLoop.begin();
-   view.set('isEnabled', YES);
-   SC.RunLoop.end();
-   
-   // Test Mouse Down
-   // it now gets the item by the position, so we have to pass a position
-   var firstItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { clientX: rect1.left + 1, clientY: rect1.top + 1 });
-   view.mouseDown(firstItemEvent);
-   
-   equals(view._isMouseDown, YES, 'Mouse down flag on mousedown should be ');
-   equals(view.get('activeIndex'), 0, 'The active item is the first segment.');
-   
-   // Test Mouse Up
-   elem = view.get('layer').childNodes[1];
-      
-   view.mouseUp(firstItemEvent);
-   equals(view._isMouseDown, NO, 'Mouse down flag on mouseup should be ');
-   equals(view.get('activeIndex'), -1, 'There shouldnt be any active item');
-   
-   // Test third item
-   elem = view.get('layer').childNodes[2];
-   var thirdItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { clientX: rect3.left + 1, client: rect3.top + 1 });
-   
-   // mouse down and move
-   view.mouseDown(thirdItemEvent);
-   view.mouseMoved(thirdItemEvent);
-   equals(view._isMouseDown, YES, 'Mouse down flag on mousemoved should be ');
-   equals(view.get('activeIndex'), 2, 'The active item is the third segment.');
-   
-   // try moving mouse while mouse down
-   var secondItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { clientX: rect2.left + 1, clientY: rect2.top + 1 });
-   view.mouseMoved(secondItemEvent);
-   equals(view._isMouseDown, YES, 'Mouse down flag on mousemoved should be ');
-   equals(view.get('activeIndex'), 1, 'The active item should have changed to the second segment.');
-   
-   // and check that mouse out cancels.
-   var noItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { clientX: rect1.left - 5, clientY: rect1.top - 5 });
-
-   view.mouseExited(noItemEvent);
-   equals(view._isMouseDown, YES, 'Mouse down flag on mouseout should still be ');
-   equals(view.get('activeIndex'), -1, 'The active item is no longer specified.');
-   
-  });
-
-
+  view.triggerItemAtIndex(1);
+
+  SC.RunLoop.begin();
+  view.set('isEnabled', YES);
+  SC.RunLoop.end();
+
+  equals(view.get('value'), "Item2", "the second item should be selected.");
+
+  var childViews = view.get('childViews');
+  equals(childViews[0].title, "Item1", 'Computed properties should match');
+  equals(childViews[0].value, "Item1", 'Computed properties should match');
+  equals(childViews[0].isEnabled, true, 'Computed properties should match');
+  equals(childViews[0].icon, iconURL, 'Computed properties should match');
+  equals(childViews[0].width, null, 'Computed properties should match');
+  equals(childViews[0].toolTip, null, 'Computed properties should match');
+  equals(childViews[0].index, 0, 'Computed properties should match');
+});