sproutcore 1.7.1.beta → 1.8.0

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

@@ -12,14 +12,14 @@ SC.BaseTheme.collectionRenderDelegate = SC.RenderDelegate.create({
   className: 'collection',
   
   render: function(dataSource, context) {
-    context.setClass('focus', dataSource.get('isFirstResponder'));
+    context.setClass('focus', dataSource.get('hasFirstResponder'));
     context.setClass('disabled', !dataSource.get('isEnabled'));
     context.setClass('active', dataSource.get('isActive'));
   },
   
   update: function(dataSource, jquery) {
-    jquery.setClass('focus', dataSource.get('isFirstResponder'));
+    jquery.setClass('focus', dataSource.get('hasFirstResponder'));
     jquery.setClass('disabled', !dataSource.get('isEnabled'));
     jquery.setClass('active', dataSource.get('isActive'));
   }
-});
+});

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

@@ -18,7 +18,7 @@ SC.BaseTheme.disclosureRenderDelegate = SC.RenderDelegate.create({
 
     var labelId = SC.guidFor(dataSource) + "-label";
 
-    //addresing accessibility
+    //addressing accessibility
     context.attr('aria-expanded', value);
     context.attr('aria-labelledby', labelId);
 
@@ -42,7 +42,7 @@ SC.BaseTheme.disclosureRenderDelegate = SC.RenderDelegate.create({
         value = dataSource.get('value'),
         title = dataSource.get('title');
 
-    //addresing accessibility
+    //addressing accessibility
     jquery.attr('aria-expanded', value);
 
     if (dataSource.get('isSelected')) jquery.addClass('sel');

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

@@ -42,9 +42,9 @@ SC.BaseTheme.imageButtonRenderDelegate = SC.RenderDelegate.create({
       $.attr('alt', toolTip);
     }
 
-    if (dataSource.didChangeFor('imageButtonRenderDelegate', 'image')) {
-      image = dataSource.get('image');
+    image = dataSource.get('image');
 
+    if (image && dataSource.didChangeFor('imageButtonRenderDelegate', 'image')) {
       $.children()[0].className = 'img '+image;
     }
   }

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

@@ -14,15 +14,23 @@ SC.BaseTheme.panelRenderDelegate = SC.RenderDelegate.create({
     this.includeSlices(dataSource, context, SC.NINE_SLICE);
     context = context.end();
 
-    // the label for the panel could change...
-    var ariaLabel = dataSource.get('ariaLabel');
-    context.attr('aria-label', ariaLabel || '');
+    var ariaLabel = dataSource.get('ariaLabel'),
+        ariaLabelledBy = dataSource.get('ariaLabelledBy'),
+        ariaDescribedBy = dataSource.get('ariaDescribedBy');
+    
+    if(ariaLabel) context.attr('aria-label', ariaLabel);
+    if (ariaLabelledBy) context.attr('aria-labelledby', ariaLabelledBy);
+    if (ariaDescribedBy) context.attr('aria-describedby', ariaDescribedBy);
   },
 
   update: function(dataSource, jQuery) {
     // the label for the panel could change...
-    var ariaLabel = dataSource.get('ariaLabel');
-    jQuery.attr('aria-label', ariaLabel || '');
-
+    var ariaLabel = dataSource.get('ariaLabel'),
+        ariaLabelledBy = dataSource.get('ariaLabelledBy'),
+        ariaDescribedBy = dataSource.get('ariaDescribedBy');
+    
+    if(ariaLabel) jQuery.attr('aria-label', ariaLabel);
+    if(ariaLabelledBy) jQuery.attr('aria-labelledby', ariaLabelledBy);
+    if(ariaDescribedBy) jQuery.attr('aria-describedby', ariaDescribedBy);
   }
 });

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

@@ -9,13 +9,13 @@
 /**
  * Renders and updates the HTML representation of a popup button.
  */
-SC.BaseTheme.popupButtonRenderDelegate = SC.RenderDelegate.create({
+SC.BaseTheme.popupButtonRenderDelegate = SC.BaseTheme.buttonRenderDelegate.create({
   render: function(dataSource, context) {
     context.attr('aria-haspopup', 'true');
-    dataSource.get('theme').buttonRenderDelegate.render(dataSource, context);
+    sc_super();
   },
 
   update: function(dataSource, jQuery) {
-    dataSource.get('theme').buttonRenderDelegate.update(dataSource, jQuery);
+    sc_super();
   }
 });

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

@@ -7,16 +7,16 @@
 
 /**
   Renders and updates DOM representations of progress bars.
-  
+
   Parameters
   --------------------------
   Expects these properties on the data source:
-  
+
    - `isIndeterminate`
    - `isRunning`
    - `isEnabled`
    - `value`
-  
+
   Theme Constants
   -------------------------------------
   Ace's `progressRenderDelegate`'s rendering process is not affected by
@@ -24,7 +24,7 @@
 */
 SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
   className: 'progress',
-  
+
   render: function(dataSource, context) {
     this.addSizeClassName(dataSource, context);
 
@@ -46,25 +46,25 @@ SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
     context.attr('aria-valuenow', valueNow);
     context.attr('aria-valuetext', valueNow);
 
-    
+
     context.setClass({
       indeterminate: dataSource.get('isIndeterminate'),
       running: dataSource.get('isRunning'),
       disabled: !dataSource.get('isEnabled'),
       'sc-empty': (value <= 0),
-      'sc-complete': (value >= 100)
+      'sc-complete': (value >= 1)
     });
-    
+
     context = context.begin('div').addClass('track');
     this.includeSlices(dataSource, context, SC.THREE_SLICE);
     context = context.end();
-    
+
     context = context.begin('div').addClass('content');
     context.css('width', (value * 100) + "%");
     this.includeSlices(dataSource, context, SC.THREE_SLICE);
     context = context.end();
   },
-  
+
   update: function(dataSource, $) {
     this.updateSizeClassName(dataSource, $);
 
@@ -92,9 +92,9 @@ SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
       running: dataSource.get('isRunning'),
       disabled: !dataSource.get('isEnabled'),
       'sc-empty': (value <= 0),
-      'sc-complete': (value >= 100)
+      'sc-complete': (value >= 1)
     });
-    
+
     $.find('.content').css('width', (value * 100) + "%");
   }
 });

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

@@ -23,7 +23,8 @@ SC.BaseTheme.segmentRenderDelegate = SC.RenderDelegate.create({
       'sc-first-segment': dataSource.get('isFirstSegment'),
       'sc-middle-segment': dataSource.get('isMiddleSegment'),
       'sc-last-segment': dataSource.get('isLastSegment'),
-      'sc-overflow-segment': dataSource.get('isOverflowSegment')
+      'sc-overflow-segment': dataSource.get('isOverflowSegment'),
+      'vertical': dataSource.get('layoutDirection') !== SC.LAYOUT_HORIZONTAL 
     };
 
     if (!SC.none(dataSource.get('index'))) classes['sc-segment-' + dataSource.get('index')] = YES;
@@ -37,7 +38,6 @@ SC.BaseTheme.segmentRenderDelegate = SC.RenderDelegate.create({
   update: function(dataSource, jquery) {
     var theme = dataSource.get('theme'),
         buttonDelegate,
-        titleMinWidth,
         classes = {};
 
     // Segment specific additions
@@ -45,7 +45,8 @@ SC.BaseTheme.segmentRenderDelegate = SC.RenderDelegate.create({
       '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
+      'sc-overflow-segment': dataSource.get('isOverflowSegment') || NO,
+      'vertical': dataSource.get('layoutDirection') !== SC.LAYOUT_HORIZONTAL
     };
     if (!SC.none(dataSource.get('index'))) classes['sc-segment-' + dataSource.get('index')] = YES;
     jquery.setClass(classes);

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

@@ -25,56 +25,6 @@ SC.BaseTheme.segmentedRenderDelegate = SC.RenderDelegate.create({
   update: function(dataSource, jquery) {
     this.updateSizeClassName(dataSource, jquery);
     jquery.css('text-align', dataSource.get('align'));
-  },
-
-  /**
-    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).
-  */
-  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-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
-      // Remake the rect since IE8 won't let us modify the boundingClientRect
-      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;
   }
+
 });

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

@@ -7,19 +7,19 @@
 
 /**
   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({
-  
+
   className: 'slider',
-  
+
   render: function(dataSource, context) {
     this.addSizeClassName(dataSource, context);
 
@@ -32,14 +32,14 @@ SC.BaseTheme.sliderRenderDelegate = SC.RenderDelegate.create({
     context.attr('aria-valuemax', valueMax);
     context.attr('aria-valuemin', valueMin);
     context.attr('aria-valuenow', valueNow);
-    context.attr('aria-valuetext', valueNow);
+    if(valueMin !== 0 || valueMax !== 100) context.attr('aria-valuetext', valueNow);
     context.attr('aria-orientation', 'horizontal');
 
     context = context.begin('span').addClass('track');
     this.includeSlices(dataSource, context, SC.THREE_SLICE);
     context.push(
-      '<img src="', blankImage,
-      '" class="sc-handle" style="left: ', dataSource.get('value'), '%" />',
+      '<img src="' + blankImage +
+      '" class="sc-handle" style="left: '+ dataSource.get('value') + '%" />'+
       '</span>'
     );
 
@@ -49,7 +49,7 @@ SC.BaseTheme.sliderRenderDelegate = SC.RenderDelegate.create({
 
     dataSource.get('renderState')._cachedHandle = null;
   },
-  
+
   update: function(dataSource, jquery) {
     this.updateSizeClassName(dataSource, jquery);
 
@@ -61,7 +61,7 @@ SC.BaseTheme.sliderRenderDelegate = SC.RenderDelegate.create({
     jquery.attr('aria-valuemax', valueMax);
     jquery.attr('aria-valuemin', valueMin);
     jquery.attr('aria-valuenow', valueNow);
-    jquery.attr('aria-valuetext', valueNow);
+    if(valueMin !== 0 || valueMax !== 100) jquery.attr('aria-valuetext', valueNow);
     jquery.attr('aria-orientation', 'horizontal');
 
     if (dataSource.didChangeFor('sliderRenderDelegate', 'value')) {
@@ -71,13 +71,8 @@ SC.BaseTheme.sliderRenderDelegate = SC.RenderDelegate.create({
       }
 
       var frame = dataSource.get('frame'), value = dataSource.get('value');
-      if (frame && SC.platform.supportsCSS3DTransforms) {
-        value = (value / 100) * frame.width;
-        handle[0].style.cssText = "-webkit-transform: translate3d(" + value + "px,0,0);";
-      } else {
-        handle.css('left', value + "%");
-      }
+      handle.css('left', value + "%");
     }
   }
-  
+
 });

data/lib/frameworks/sproutcore/frameworks/desktop/resources/slider.css

@@ -28,7 +28,5 @@
   	background: black;
   	border-radius:6px;
   	-moz-border-radius:6px;
-  	-webkit-transform: translate3d(0,0,0);
-  	-webkit-transition: left 0.01s ease-in-out;
   }
 }

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

@@ -335,7 +335,7 @@ SC.Drag = SC.Object.extend(
   _dragInProgress: YES,
 
   /** @private
-    Stores the initial visibililty state of the dragView so it can be restored
+    Stores the initial visibility state of the dragView so it can be restored
     after the drag
   */
   _dragViewWasVisible: null,
@@ -360,7 +360,7 @@ SC.Drag = SC.Object.extend(
 	    var dv = this._getDragView() ;
 	    var pv = dv.get('parentView') ;
 
-	    // convert to global cooridinates
+	    // convert to global coordinates
 	    var origin = pv ? pv.convertFrameToView(dv.get('frame'), null) : dv.get('frame') ;
 
 	    if (this.get('ghost')) {
@@ -885,7 +885,7 @@ SC.Drag = SC.Object.extend(
   /** @private
     Returns an array of scrollable views, sorted with nested scrollable views 
     at the top of the array.  The first time this method is called during a 
-    drag, it will reconstrut this array using the current state of scrollable 
+    drag, it will reconstruct this array using the current state of scrollable 
     views.  Afterwards it uses the cached set until the drop completes.
   */
   _scrollableViews: function() {

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

@@ -82,7 +82,7 @@ SC.UndoManager = SC.Object.extend(
   /**
     Tries to undo the last action. Fails if an undo group is currently open.
     
-    @returns {Boolean} YES if suceeded, NO otherwise.
+    @returns {Boolean} YES if succeeded, NO otherwise.
   */
   undo: function() {
     this._undoOrRedo('undoStack','isUndoing');
@@ -91,7 +91,7 @@ SC.UndoManager = SC.Object.extend(
   /**
     Tries to redo the last action. Fails if a redo group is currently open.
     
-    @returns {Boolean} YES if suceeded, NO otherwise.
+    @returns {Boolean} YES if succeeded, NO otherwise.
   */
   redo: function() {
     this._undoOrRedo('redoStack','isRedoing');
@@ -133,7 +133,7 @@ SC.UndoManager = SC.Object.extend(
   /**
     Begins a new undo groups
 
-    Whenver you start an action that you expect to need to bundle under a single
+    Whenever you start an action that you expect to need to bundle under a single
     undo action in the menu, you should begin an undo group.  This way any
     undo actions registered by other parts of the application will be
     automatically bundled into this one action.

data/lib/frameworks/sproutcore/frameworks/desktop/tests/panes/alert/ui.js

@@ -29,30 +29,30 @@ function evaluatePane(pane, message, description, caption, button1Title, button2
   ok(pane.childViews[0].childViews[1].get('isVisibleInWindow'), 'pane.div.div.isVisibleInWindow should be YES');
 
   // content
-  ok(pane.childViews[0].childViews[0].$('img'), 'pane.div.info.img existance should be YES');
+  ok(pane.childViews[0].childViews[0].$('img'), 'pane.div.info.img existence should be YES');
   ok(pane.childViews[0].childViews[0].$('img').hasClass('icon'), 'pane.div.info.img should have icon class');
   ok(pane.childViews[0].childViews[0].$('img').hasClass(iconClass), 'pane.div.info.img should have %@ class'.fmt(iconClass));
-  ok(pane.childViews[0].childViews[0].$('h1'), 'pane.div.info.h1 existance should be YES');
+  ok(pane.childViews[0].childViews[0].$('h1'), 'pane.div.info.h1 existence should be YES');
   equals(pane.childViews[0].childViews[0].$('h1').text(), 'AlertPane.message', 'pane.div.info.h1 should have title');
 
   if (description) {
-    ok(pane.childViews[0].childViews[0].$('p.description'), 'pane.div.info.description existance should be YES');
+    ok(pane.childViews[0].childViews[0].$('p.description'), 'pane.div.info.description existence should be YES');
     equals(pane.childViews[0].childViews[0].$('p.description').text(), 'AlertPane.description', 'pane.div.info.description should have description');
   } else {
     equals(pane.childViews[0].childViews[0].$('p.description').length, 0, 'pane.div.info should have 0 description');
   }
 
   if (caption) {
-    ok(pane.childViews[0].childViews[0].$('p.caption'), 'pane.div.info.caption existance should be YES');
+    ok(pane.childViews[0].childViews[0].$('p.caption'), 'pane.div.info.caption existence should be YES');
     equals(pane.childViews[0].childViews[0].$('p.caption').text(), 'AlertPane.caption', 'pane.div.info.caption should have caption');
   } else {
     equals(pane.childViews[0].childViews[0].$('p.caption').length, 0, 'pane.div.info should have 0 caption');
   }
   
   // buttons
-  ok(pane.childViews[0].childViews[1].$('div'), 'pane.div.div.div existance should be YES');
+  ok(pane.childViews[0].childViews[1].$('div'), 'pane.div.div.div existence should be YES');
   equals(pane.childViews[0].childViews[1].$('div.button').length, 2, 'pane.div.div should have 2 Buttons');
-  ok(pane.childViews[0].$('div'), 'pane.div.div existance should be YES');
+  ok(pane.childViews[0].$('div'), 'pane.div.div existence should be YES');
   
   var button1 = pane.childViews[0].childViews[1].childViews[1];
   var button2 = pane.childViews[0].childViews[1].childViews[0];
@@ -75,9 +75,9 @@ function evaluatePane(pane, message, description, caption, button1Title, button2
   }
   
   if (!themeName) themeName = 'capsule';
-  ok(button1.$().hasClass(themeName), 'pane.div.div button1 shoud have class ' + themeName);
-  ok(button2.$().hasClass(themeName), 'pane.div.div button2 shoud have class ' + themeName);
-  ok(button3.$().hasClass(themeName), 'pane.div.div button3 shoud have class ' + themeName);
+  ok(button1.$().hasClass(themeName), 'pane.div.div button1 should have class ' + themeName);
+  ok(button2.$().hasClass(themeName), 'pane.div.div button2 should have class ' + themeName);
+  ok(button3.$().hasClass(themeName), 'pane.div.div button3 should have class ' + themeName);
 }
 
 test("AlertPane.show with icon, message, description, caption and 3 buttons", function() {