sproutcore 1.9.2 → 1.10.0.rc.1

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

@@ -10,16 +10,12 @@
 // like the row height will likely be specified on the render delegate.
 SC.BaseTheme.collectionRenderDelegate = SC.RenderDelegate.create({
   className: 'collection',
-  
+
   render: function(dataSource, context) {
-    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('hasFirstResponder'));
-    jquery.setClass('disabled', !dataSource.get('isEnabled'));
     jquery.setClass('active', dataSource.get('isActive'));
   }
 });

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

@@ -8,7 +8,7 @@
 
 SC.BaseTheme.disclosureRenderDelegate = SC.RenderDelegate.create({
   className: 'disclosure',
-  
+
   render: function(dataSource, context) {
     this.addSizeClassName(dataSource, context);
 
@@ -19,22 +19,22 @@ SC.BaseTheme.disclosureRenderDelegate = SC.RenderDelegate.create({
     var labelId = SC.guidFor(dataSource) + "-label";
 
     //addressing accessibility
-    context.attr('aria-expanded', value);
-    context.attr('aria-labelledby', labelId);
+    context.setAttr('aria-expanded', value);
+    context.setAttr('aria-labelledby', labelId);
 
     if (dataSource.get('isSelected')) context.addClass('sel');
-    
+
     var state = '';
     state += dataSource.get('isSelected') ? 'open' : 'closed';
     if (dataSource.get('isActive')) state += ' active';
-    
+
     context.push('<img src = "' + SC.BLANK_IMAGE_URL + '" class = "disclosure button ' + state + '" />');
 
     context = context.begin('span').addClass(labelClassNames).id(labelId);
     theme.labelRenderDelegate.render(dataSource, context);
     context = context.end();
   },
-  
+
   update: function(dataSource, jquery) {
     this.updateSizeClassName(dataSource, jquery);
 

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

@@ -9,43 +9,52 @@
 SC.BaseTheme.imageButtonRenderDelegate = SC.RenderDelegate.create({
   className: 'image-button',
 
-  render: function(dataSource, context) {
+  render: function (dataSource, context) {
     var image = dataSource.get('image'),
-        toolTip = dataSource.get('toolTip');
+      toolTip = dataSource.get('toolTip');
 
     // render controlSize
     this.addSizeClassName(dataSource, context);
 
-    context.addClass('no-min-width');
-
     if (toolTip) {
-      context.attr('title', toolTip);
-      context.attr('alt', toolTip);
+      context.setAttr('title', toolTip);
+      context.setAttr('alt', toolTip);
     }
 
     if (image) {
-      context.push("<div class='img "+image+"'></div>");
-    } else {
-      context.push("<div class='img'></div>");
+      context.addClass(image);
+
+      // Track the image class used so that we can remove it when it changes.
+      dataSource.renderState._cachedImage = image;
     }
   },
 
-  update: function(dataSource, $) {
+  update: function (dataSource, jqElement) {
     var image, toolTip;
 
-    this.updateSizeClassName(dataSource, $);
+    this.updateSizeClassName(dataSource, jqElement);
 
     if (dataSource.didChangeFor('imageButtonRenderDelegate', 'toolTip')) {
       toolTip = dataSource.get('toolTip');
 
-      $.attr('title', toolTip);
-      $.attr('alt', toolTip);
+      jqElement.attr('title', toolTip);
+      jqElement.attr('alt', toolTip);
     }
 
-    image = dataSource.get('image');
+    if (dataSource.didChangeFor('imageButtonRenderDelegate', 'image')) {
+      image = dataSource.get('image');
+
+      // Remove the last image class
+      if (dataSource.renderState._cachedImage) {
+        jqElement.removeClass(dataSource.renderState._cachedImage);
+      }
+
+      if (image) {
+        jqElement.addClass(image);
 
-    if (image && dataSource.didChangeFor('imageButtonRenderDelegate', 'image')) {
-      $.children()[0].className = 'img '+image;
+        // Track the image class used so that we can remove it when it changes.
+        dataSource.renderState._cachedImage = image;
+      }
     }
   }
 });

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

@@ -8,7 +8,7 @@
 
 SC.BaseTheme.panelRenderDelegate = SC.RenderDelegate.create({
   className: 'panel',
-  
+
   render: function(dataSource, context) {
     context = context.begin('div').addClass('panel-background');
     this.includeSlices(dataSource, context, SC.NINE_SLICE);
@@ -17,10 +17,10 @@ SC.BaseTheme.panelRenderDelegate = SC.RenderDelegate.create({
     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);
+
+    if (ariaLabel) context.setAttr('aria-label', ariaLabel);
+    if (ariaLabelledBy) context.setAttr('aria-labelledby', ariaLabelledBy);
+    if (ariaDescribedBy) context.setAttr('aria-describedby', ariaDescribedBy);
   },
 
   update: function(dataSource, jQuery) {
@@ -28,7 +28,7 @@ SC.BaseTheme.panelRenderDelegate = SC.RenderDelegate.create({
     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/picker.js

@@ -9,35 +9,48 @@ sc_require('render_delegates/panel');
 
 SC.BaseTheme.pickerRenderDelegate = SC.RenderDelegate.create({
   className: 'picker',
-  
-  render: function(dataSource, context) {
+
+  render: function (dataSource, context) {
     var panelRenderDelegate = dataSource.get('theme').panelRenderDelegate;
 
     panelRenderDelegate.render(dataSource, context);
 
-    var preferType = dataSource.get('preferType');
-    var pointerPosition = dataSource.get('pointerPos');
-    var pointerPositionY = dataSource.get('pointerPosY');
+    var preferType = dataSource.get('preferType'),
+      pointerPosition = dataSource.get('pointerPos');
 
     if (preferType == SC.PICKER_POINTER || preferType == SC.PICKER_MENU_POINTER) {
-      context.push('<div class="sc-pointer ' + pointerPosition + '" style="margin-top: ' + pointerPositionY + 'px"></div>');
+      context.push('<div class="sc-pointer ' + pointerPosition + '"></div>');
       context.addClass(pointerPosition);
+
+      // Track the last pointerPosition used so that we can remove it when it changes.
+      dataSource.renderState._lastPointerPosition = pointerPosition;
     }
   },
-  
-  update: function(dataSource, $) {
+
+  update: function (dataSource, $) {
     var panelRenderDelegate = dataSource.get('theme').panelRenderDelegate;
+
     panelRenderDelegate.update(dataSource, $);
-    
-    var preferType = dataSource.get('preferType');
-    var pointerPosition = dataSource.get('pointerPos');
-    var pointerPositionY = dataSource.get('pointerPosY');
+
+    var preferType = dataSource.get('preferType'),
+      pointerPosition = dataSource.get('pointerPos');
 
     if (preferType == SC.PICKER_POINTER || preferType == SC.PICKER_MENU_POINTER) {
-      var el = $.find('.sc-pointer');
-      el.attr('class', "sc-pointer "+pointerPosition);
-      el.attr('style', "margin-top: "+pointerPositionY+"px");
-      $.addClass(pointerPosition);
+      var lastPointerPosition = dataSource.renderState._lastPointerPosition;
+
+      if (lastPointerPosition !== pointerPosition) {
+        var el = $.find('.sc-pointer');
+
+        // Totally overwrite the pointer class.
+        el.attr('class', "sc-pointer " + pointerPosition);
+
+        // Update the view layer class
+        $.removeClass(lastPointerPosition);
+        $.addClass(pointerPosition);
+
+        // Track the last pointerPosition used so that we can remove it when it changes.
+        dataSource.renderState._lastPointerPosition = pointerPosition;
+      }
     }
 
   }

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

@@ -11,7 +11,7 @@
  */
 SC.BaseTheme.popupButtonRenderDelegate = SC.BaseTheme.buttonRenderDelegate.create({
   render: function(dataSource, context) {
-    context.attr('aria-haspopup', 'true');
+    context.setAttr('aria-haspopup', 'true');
     sc_super();
   },
 

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

@@ -17,7 +17,6 @@ SC.BaseTheme.PROGRESS_OFFSET_RANGE = 42;
 
  - `isIndeterminate`
  - `isRunning`
- - `isEnabled`
  - `isVisibleInWindow`
  - `value`
 
@@ -46,15 +45,14 @@ SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
     }
 
     // make accessible
-    context.attr('aria-valuemax', valueMax);
-    context.attr('aria-valuemin', valueMin);
-    context.attr('aria-valuenow', valueNow);
-    context.attr('aria-valuetext', valueNow);
+    context.setAttr('aria-valuemax', valueMax);
+    context.setAttr('aria-valuemin', valueMin);
+    context.setAttr('aria-valuenow', valueNow);
+    context.setAttr('aria-valuetext', valueNow);
 
     context.setClass({
       indeterminate:isIndeterminate,
       running:dataSource.get('isRunning') && isIndeterminate,
-      disabled:!dataSource.get('isEnabled'),
       'sc-empty':(value <= 0),
       'sc-complete':(value >= 1 && !isIndeterminate)
     });
@@ -64,13 +62,13 @@ SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
     context = context.end();
 
     context = context.begin('div').addClass('content');
-    context.css('width', (value * 100) + "%");
+    context.setStyle('width', (value * 100) + "%");
     this.includeSlices(dataSource, context, SC.THREE_SLICE);
     context = context.end();
   },
 
-  update:function (dataSource, context) {
-    this.updateSizeClassName(dataSource, context);
+  update:function (dataSource, jQuery) {
+    this.updateSizeClassName(dataSource, jQuery);
 
     var theme = dataSource.get('theme'),
       value,
@@ -79,14 +77,13 @@ SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
       valueNow = dataSource.get('ariaValue'),
       isIndeterminate = dataSource.get('isIndeterminate'),
       isRunning = dataSource.get('isRunning'),
-      isEnabled = dataSource.get('isEnabled'),
       isVisibleInWindow = dataSource.get('isVisibleInWindow');
 
     // make accessible
-    context.attr('aria-valuemax', valueMax);
-    context.attr('aria-valuemin', valueMin);
-    context.attr('aria-valuenow', valueNow);
-    context.attr('aria-valuetext', valueNow);
+    jQuery.attr('aria-valuemax', valueMax);
+    jQuery.attr('aria-valuemin', valueMin);
+    jQuery.attr('aria-valuenow', valueNow);
+    jQuery.attr('aria-valuetext', valueNow);
 
     if (isIndeterminate) {
       value = 1;
@@ -94,35 +91,34 @@ SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
       value = dataSource.get('value');
     }
 
-    context.setClass({
+    jQuery.setClass({
       indeterminate:isIndeterminate,
       running:isRunning && isIndeterminate,
-      disabled:!isEnabled,
       'sc-empty':(value <= 0),
       'sc-complete':(value >= 1 && !isIndeterminate)
     });
 
-    context.find('.content').css('width', (value * 100) + "%");
+    jQuery.find('.content').css('width', (value * 100) + "%");
 
     // fallback for browsers that don't support css transitions
     if(!SC.platform.supportsCSSTransitions) {
-      if (!this._queue[context[0].id]) {
-        this._queue[context[0].id] = {
+      if (!this._queue[jQuery[0].id]) {
+        this._queue[jQuery[0].id] = {
           offset:0,
-          element:SC.$(context).find('.content .middle'),
+          element:SC.$(jQuery).find('.content .middle'),
           shouldAnimate:false
         };
       }
 
       if (isIndeterminate && isRunning && isVisibleInWindow) {
         // save offset in the queue and request animation
-        this._queue[context[0].id].shouldAnimate = true;
+        this._queue[jQuery[0].id].shouldAnimate = true;
         this.animate(dataSource);
       } else if (!isIndeterminate) {
         // Clear out our custom background-position when isIndeterminate toggles.
-        this._queue[context[0].id].element.css('background-position', '');
+        this._queue[jQuery[0].id].element.css('background-position', '');
       } else {
-        this._queue[context[0].id].shouldAnimate = false;
+        this._queue[jQuery[0].id].shouldAnimate = false;
       }
     }
   },

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

@@ -8,31 +8,30 @@
 /**
   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({
   className: 'radio',
-  
+
   render: function(dataSource, context) {
     this.addSizeClassName(dataSource, context);
 
     var theme = dataSource.get('theme');
-    
+
     var isSelected = dataSource.get('isSelected'),
         width = dataSource.get('width'),
         labelId = SC.guidFor(dataSource) + '-label';
@@ -40,17 +39,16 @@ SC.BaseTheme.radioRenderDelegate = SC.RenderDelegate.create({
     context.setClass({
       active: dataSource.get('isActive'),
       mixed: dataSource.get('isMixed'),
-      sel: dataSource.get('isSelected'),
-      disabled: !dataSource.get('isEnabled')
+      sel: dataSource.get('isSelected')
     });
 
     //accessing accessibility
-    context.attr('role', 'radio');
-    context.attr('aria-checked', isSelected);
-    context.attr('aria-labelledby', labelId);
-    context.attr('aria-disabled', dataSource.get('isEnabled') ? 'false' : 'true');
+    context.setAttr('role', 'radio');
+    context.setAttr('aria-checked', isSelected);
+    context.setAttr('aria-labelledby', labelId);
+    context.setAttr('aria-disabled', dataSource.get('isEnabled') ? 'false' : 'true');
 
-    if (width) context.css('width', width);
+    if (width) context.setStyle('width', width);
 
     context.push('<span class = "button"></span>');
 
@@ -71,8 +69,7 @@ SC.BaseTheme.radioRenderDelegate = SC.RenderDelegate.create({
     jquery.setClass({
       active: dataSource.get('isActive'),
       mixed: dataSource.get('isMixed'),
-      sel: dataSource.get('isSelected'),
-      disabled: !dataSource.get('isEnabled')
+      sel: dataSource.get('isSelected')
     });
 
     jquery.attr('aria-disabled', dataSource.get('isEnabled') ? 'false' : 'true');

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

@@ -9,68 +9,68 @@
 /**
   @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({
   className: 'radio-group',
-  
+
   render: function(dataSource, context) {
     this.addSizeClassName(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');
-    context.attr('aria-disabled', dataSource.get('isEnabled') ? 'false' : 'true');
-    
+    context.setAttr('role', 'radiogroup');
+    context.setAttr('aria-disabled', dataSource.get('isEnabled') ? 'false' : 'true');
+
     for (idx = 0; idx < len; idx++) {
       item = items[idx];
       context = context.begin('div')
         .addClass('radio-' + idx)
-        .attr('index', idx)
+        .setAttr('index', idx)
         .addClass(theme.classNames)
         .addClass(theme.radioRenderDelegate.className)
-        
+
         // 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) {
     this.updateSizeClassName(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'));
     jquery.attr('aria-disabled', dataSource.get('isEnabled') ? 'false' : 'true');
-    
+
     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
@@ -80,16 +80,16 @@ SC.BaseTheme.radioGroupRenderDelegate = SC.RenderDelegate.create({
       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.
@@ -98,16 +98,16 @@ SC.BaseTheme.radioGroupRenderDelegate = SC.RenderDelegate.create({
     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;