sproutcore 1.4.5-java → 1.5.0-java

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

@@ -0,0 +1,100 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  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 
+  any theme constants.
+*/
+SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
+  name: 'progress',
+  
+  render: function(dataSource, context) {
+    this.addSizeClassName(dataSource, context);
+
+    var theme = dataSource.get('theme'),
+        valueMax = dataSource.get('maximum'),
+        valueMin = dataSource.get('minimum'),
+        valueNow = dataSource.get('ariaValue');
+
+    var value;
+    if (dataSource.get('isIndeterminate')) {
+      value = 120;
+    } else {
+      value = dataSource.get('value');
+    }
+
+    // make accessible
+    context.attr('aria-valuemax', valueMax);
+    context.attr('aria-valuemin', valueMin);
+    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)
+    });
+    
+    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, $);
+
+    var theme = dataSource.get('theme'),
+        valueMax = dataSource.get('maximum'),
+        valueMin = dataSource.get('minimum'),
+        valueNow = dataSource.get('ariaValue');
+
+    // make accessible
+    $.attr('aria-valuemax', valueMax);
+    $.attr('aria-valuemin', valueMin);
+    $.attr('aria-valuenow', valueNow);
+    $.attr('aria-valuetext', valueNow);
+
+
+    var value;
+    if (dataSource.get('isIndeterminate')) {
+      value = 120;
+    } else {
+      value = dataSource.get('value');
+    }
+
+    $.setClass({
+      indeterminate: dataSource.get('isIndeterminate'),
+      running: dataSource.get('isRunning'),
+      disabled: !dataSource.get('isEnabled'),
+      'sc-empty': (value <= 0),
+      'sc-complete': (value >= 100)
+    });
+    
+    $.find('.content').css('width', (value * 100) + "%");
+  }
+});

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

@@ -0,0 +1,84 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  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({
+  name: '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';
+
+    context.setClass({
+      active: dataSource.get('isActive'),
+      mixed: dataSource.get('isMixed'),
+      sel: dataSource.get('isSelected'),
+      disabled: !dataSource.get('isEnabled')
+    });
+
+    //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');
+
+    if (width) context.css('width', width);
+
+    context.push('<span class = "button"></span>');
+
+    context = context.begin('span').addClass('sc-button-label').id(labelId);
+    theme.labelRenderDelegate.render(dataSource, context);
+    context = context.end();
+  },
+
+  update: function(dataSource, jquery) {
+    this.updateSizeClassName(dataSource, jquery);
+
+    var theme = dataSource.get('theme');
+
+    var isSelected = dataSource.get('isSelected'),
+        width = dataSource.get('width'),
+        value = dataSource.get('value');
+
+    jquery.setClass({
+      active: dataSource.get('isActive'),
+      mixed: dataSource.get('isMixed'),
+      sel: dataSource.get('isSelected'),
+      disabled: !dataSource.get('isEnabled')
+    });
+
+    jquery.attr('aria-disabled', dataSource.get('isEnabled') ? 'false' : 'true');
+    jquery.attr('aria-checked', isSelected);
+    jquery.css('width', width ? width : null);
+
+    theme.labelRenderDelegate.update(dataSource, jquery.find('.sc-button-label'));
+  }
+});

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

@@ -0,0 +1,116 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+
+/**
+  @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({
+  name: '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');
+    
+    for (idx = 0; idx < len; idx++) {
+      item = items[idx];
+      context = context.begin('div')
+        .addClass('radio-' + idx)
+        .attr('index', idx)
+        .addClass(theme.classNames)
+        .addClass(theme.radioRenderDelegate.name)
+        
+        // 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
+      // for such a rare case.
+      var context = SC.RenderContext(jquery[0]);
+      this.render(dataSource, context);
+      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.
+  */
+  updateRadioAtIndex: function(dataSource, jquery, index) {
+    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;
+    return parseInt(index, 0);
+  }
+});

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

@@ -0,0 +1,58 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+
+/**
+  Renders and updates the HTML representation of a segment child view within
+  SC.SegmentedView.
+*/
+SC.BaseTheme.segmentRenderDelegate = SC.RenderDelegate.create({
+  name: 'segment',
+
+  render: function(dataSource, context) {
+    var theme = dataSource.get('theme'),
+        buttonDelegate,
+        classes;
+
+    // Segment specific additions
+    classes = {
+      'sc-first-segment': dataSource.get('isFirstSegment'),
+      'sc-middle-segment': dataSource.get('isMiddleSegment'),
+      'sc-last-segment': dataSource.get('isLastSegment'),
+      'sc-overflow-segment': dataSource.get('isOverflowSegment')
+    };
+
+    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
+    buttonDelegate = theme.buttonRenderDelegate;
+    buttonDelegate.render(dataSource, context);
+  },
+
+  update: function(dataSource, jquery) {
+    var theme = dataSource.get('theme'),
+        buttonDelegate,
+        titleMinWidth,
+        classes = {};
+
+    // Segment specific additions
+    classes = {
+      '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
+    };
+    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

@@ -0,0 +1,80 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  Renders and updates the HTML representation of SC.SegmentedView.
+*/
+SC.BaseTheme.segmentedRenderDelegate = SC.RenderDelegate.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) {
+    // Use text-align to align the segments
+    this.addSizeClassName(dataSource, context);
+    context.addStyle('text-align', dataSource.get('align'));
+  },
+
+  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

@@ -0,0 +1,81 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  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({
+  
+  name: 'slider',
+  
+  render: function(dataSource, context) {
+    this.addSizeClassName(dataSource, context);
+
+    var blankImage = SC.BLANK_IMAGE_URL,
+        valueMax    = dataSource.get('maximum'),
+        valueMin    = dataSource.get('minimum'),
+        valueNow    = dataSource.get('ariaValue');
+
+    //addressing accessibility
+    context.attr('aria-valuemax', valueMax);
+    context.attr('aria-valuemin', valueMin);
+    context.attr('aria-valuenow', valueNow);
+    context.attr('aria-valuetext', valueNow);
+    context.attr('aria-orientation', 'horizontal');
+
+    context = context.begin('span').addClass('track');
+    this.includeSlices(dataSource, context, SC.THREE_SLICE);
+    context = context.end();
+
+    context.push(
+      '<img src="', blankImage, 
+      '" class="sc-handle" style="left: ', dataSource.get('value'), '%" />',
+      '</span>'
+    );
+
+    dataSource.get('renderState')._cachedHandle = null;
+  },
+  
+  update: function(dataSource, jquery) {
+    this.updateSizeClassName(dataSource, jquery);
+
+    var valueMax    = dataSource.get('maximum'),
+        valueMin    = dataSource.get('minimum'),
+        valueNow    = dataSource.get('ariaValue');
+
+    //addressing accessibility
+    jquery.attr('aria-valuemax', valueMax);
+    jquery.attr('aria-valuemin', valueMin);
+    jquery.attr('aria-valuenow', valueNow);
+    jquery.attr('aria-valuetext', valueNow);
+    jquery.attr('aria-orientation', 'horizontal');
+
+    if (dataSource.didChangeFor('sliderRenderDelegate', 'value')) {
+      var handle = dataSource.get('renderState')._cachedHandle;
+      if (!handle) {
+        handle = dataSource.get('renderState')._cachedHandle = jquery.find('.sc-handle');
+      }
+
+      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 + "%");
+      }
+    }
+  }
+  
+});