sproutcore 1.4.5 → 1.5.0.pre.3

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

@@ -0,0 +1,74 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  Renders and updates DOM representations of a checkbox (just the box,
+  not the title).
+  
+  Note: most of the actual rendering is done in CSS. The DOM element provided
+  to the checkboxRenderDelegate must have the theme class names and the
+  class name 'checkbox' (the name of the render delegate).
+  
+  Parameters
+  --------------------------
+  Expects these properties on the data source:
+  
+  - isSelected
+  - isActive
+  - isEnabled
+  - title
+  
+  Optional parameters include all parameters for the labelRenderDelegate.
+  
+*/
+SC.BaseTheme.checkboxRenderDelegate = SC.RenderDelegate.create({
+  name: 'checkbox',
+  
+  render: function(dataSource, context) {
+    var theme = dataSource.get('theme');
+    
+    var isSelected = dataSource.get('isSelected') || NO;
+    var isActive = dataSource.get('isActive');
+    var isDisabled = !dataSource.get('isEnabled');
+
+    context.attr('role', 'checkbox');
+    context.attr('aria-checked', isSelected.toString());
+    
+    context.setClass({
+      'sel': isSelected,
+      'active': isActive,
+      'disabled': isDisabled
+    });
+    
+    context.push('<span class = "button"></span>');
+    
+    context = context.begin('span').addClass('label');
+    theme.labelRenderDelegate.render(dataSource, context);
+    context = context.end();
+  },
+  
+  update: function(dataSource, jquery) {
+    var theme = dataSource.get('theme');
+    
+    var isSelected = dataSource.get('isSelected');
+    var isActive = dataSource.get('isActive');
+    var isDisabled = !dataSource.get('isEnabled');
+
+    // address accessibility
+    jquery.attr('aria-checked', isSelected.toString());
+    
+    theme.labelRenderDelegate.update(dataSource, jquery.find('span.label'));
+    
+    // add class names
+    jquery.setClass({
+      'sel': isSelected,
+      'active': isActive,
+      'disabled': isDisabled
+    });
+  }
+});
+

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

@@ -0,0 +1,24 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+// collections don't need their own rendering; however, in future, constants
+// like the row height will likely be specified on the render delegate.
+SC.BaseTheme.collectionRenderDelegate = SC.RenderDelegate.create({
+  name: 'collection',
+  
+  render: function(dataSource, context) {
+    context.setClass('focus', dataSource.get('isFirstResponder'));
+    context.setClass('disabled', !dataSource.get('isEnabled'));
+    context.setClass('active', dataSource.get('isActive'));
+  },
+  
+  update: function(dataSource, jquery) {
+    jquery.setClass('focus', dataSource.get('isFirstResponder'));
+    jquery.setClass('disabled', !dataSource.get('isEnabled'));
+    jquery.setClass('active', dataSource.get('isActive'));
+  }
+});

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

@@ -0,0 +1,41 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+SC.BaseTheme.disclosureRenderDelegate = SC.RenderDelegate.create({
+  name: 'disclosure',
+  
+  render: function(dataSource, context) {
+    var theme = dataSource.get('theme');
+    
+    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('sc-button-label');
+    theme.labelRenderDelegate.render(dataSource, context);
+    context = context.end();
+  },
+  
+  update: function(dataSource, jquery) {
+    var theme = dataSource.get('theme');
+
+    if (dataSource.get('isSelected')) jquery.addClass('sel');
+
+    jquery.find('img').setClass({
+      open: dataSource.get('isSelected'),
+      closed: !dataSource.get('isSelected'),
+      active: dataSource.get('isActive')
+    });
+    
+    theme.labelRenderDelegate.update(dataSource, jquery.find('span.sc-button-label'));
+  }
+});
+

data/lib/frameworks/sproutcore/frameworks/desktop/render_delegates/helpers/slicing.js

@@ -0,0 +1,34 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+SC.THREE_SLICE = ['left', 'middle', 'right'];
+
+SC.NINE_SLICE = [
+  'top-left', 'top', 'top-right', 
+  'left', 'middle', 'right', 
+  'bottom-left', 'bottom', 'bottom-right'
+];
+
+SC.mixin(SC.RenderDelegate.prototype, {
+  /*@scope SC.RenderDelegate.prototype*/
+  
+  /**
+    Use this to render slices that you can match in CSS. This matches with the
+    Chance @include slices directive, so that you can automatically do 
+    multi-slice images for controls.
+
+    @param {SC.Object} dataSource The data source for rendering information.
+    @param {SC.RenderContext} context the render context instance
+    @param {Slice Configuration} slices Instructions on how to slice. Can be a constant
+    like SC.THREE_SLICE or SC.NINE_SLICE, or an array of slice names.
+  */
+  includeSlices: function(dataSource, context, slices) {
+    for (var idx = 0, len = slices.length; idx < len; idx++) {
+      context.push('<div class="' + slices[idx] + '"></div>');
+    }
+  }
+});

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

@@ -0,0 +1,30 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+SC.BaseTheme.imageButtonRenderDelegate = SC.RenderDelegate.create({
+  name: 'image-button',
+  render: function(dataSource, context) {
+    var image = dataSource.get('image');
+
+    context.addClass('no-min-width');
+    if (image) {
+      context.push("<div class='img "+image+"'></div>");
+    }
+
+    else {
+      context.push("<div class='img'></div>");
+    }
+  },
+
+  update: function(dataSource, $) {
+    if (dataSource.didChangeFor('imageButtonRenderDelegate', 'image')) {
+      var image = dataSource.get('image');
+
+      $.children()[0].className = 'img '+image;
+    }
+  }
+});

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

@@ -0,0 +1,28 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  Border between the two panes of the MasterDetail.
+
+  Note that the border does NOT include any space on the sides. Space
+  on left or right sides of MasterDetail, if any, should be handled by
+  its layout.
+ */
+SC.BaseTheme.MASTER_DETAIL_DIVIDER_WIDTH = 1;
+
+SC.BaseTheme.masterDetailRenderDelegate = SC.RenderDelegate.create({
+  name: 'master-detail',
+  
+  render: function(dataSource, context) {
+    context.setClass('round-toolbars', SC.platform.touch);
+  },
+  
+  update: function(dataSource, jquery) {
+    jquery.setClass('round-toolbars', SC.platform.touch);    
+  }
+  
+});

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

@@ -0,0 +1,47 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+sc_require('render_delegates/panel');
+
+// because render delegates are instances and therefore not, currently,
+// subclassable, this is line-for-line the same render delegate as pickerRenderDelegate.
+// this is obviously not optimal.
+SC.BaseTheme.menuRenderDelegate = SC.RenderDelegate.create({
+  name: 'menu',
+  
+  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');
+
+    if (preferType == SC.PICKER_POINTER || preferType == SC.PICKER_MENU_POINTER) {
+      context.push('<div class="sc-pointer ' + pointerPosition + '" style="margin-top: ' + pointerPositionY + 'px"></div>');
+      context.addClass(pointerPosition);
+    }
+  },
+  
+  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');
+
+    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);
+    }
+
+  }
+});

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

@@ -0,0 +1,28 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+SC.BaseTheme.panelRenderDelegate = SC.RenderDelegate.create({
+  name: 'panel',
+
+  render: function(dataSource, context) {
+    context.push(
+      "<div class='middle'></div>",
+      "<div class='top-left-edge'></div>",
+      "<div class='top-edge'></div>",
+      "<div class='top-right-edge'></div>",
+      "<div class='right-edge'></div>",
+      "<div class='bottom-right-edge'></div>",
+      "<div class='bottom-edge'></div>",
+      "<div class='bottom-left-edge'></div>",
+      "<div class='left-edge'></div>"
+    );
+  },
+  
+  update: function() {
+    // We never update child views. They get to do that on their own.
+  }
+});

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

@@ -0,0 +1,43 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+sc_require('render_delegates/panel');
+
+SC.BaseTheme.pickerRenderDelegate = SC.RenderDelegate.create({
+  name: 'picker',
+  
+  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');
+
+    if (preferType == SC.PICKER_POINTER || preferType == SC.PICKER_MENU_POINTER) {
+      context.push('<div class="sc-pointer ' + pointerPosition + '" style="margin-top: ' + pointerPositionY + 'px"></div>');
+      context.addClass(pointerPosition);
+    }
+  },
+  
+  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');
+
+    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);
+    }
+
+  }
+});

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

@@ -0,0 +1,175 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+SC.BaseTheme.PROGRESS_ANIMATED_BACKGROUND_MATRIX = [];
+SC.BaseTheme.PROGRESS_OFFSET_RANGE = 24;
+
+/**
+  @class
+  Renders and updates DOM representations of progress bars.
+  
+  Parameters
+  --------------------------
+  Expects these properties on the data source:
+  
+  - isIndeterminate
+  - isRunning
+  - isEnabled
+  - value (from 0 to 1)
+  
+  There are a few other properties supported for backwards-compatibility
+  with certain ProgressView implementations; these ProgressViews should
+  be updated to match the new API. These properties will trigger deprecation
+  warnings.
+  
+  Theme Constants
+  -------------------------------------
+  Note that, unlike render delegate parameters, which are mostly standardized,
+  the theme constants can vary by the theme and the theme's method of rendering
+  the control.
+  
+  - PROGRESS_ANIMATED_BACKGROUND_MATRIX: Set to the matrix used for 
+    background image position for animation. 
+    [1st image y-location, offset, total number of images]
+  
+  - PROGRESS_OFFSET_RANGE: The value of the progress inner offset range. 
+    Should be the same as width of image. Default it to 24.
+  
+*/
+SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
+  render: function(dataSource, context) {
+    var theme = dataSource.get('theme');
+    
+    var inner, animatedBackground, value = dataSource.get('value') * 100, 
+        cssString, backPosition,
+        isIndeterminate = dataSource.get('isIndeterminate'),
+        isRunning = dataSource.get('isRunning'),
+        isEnabled = dataSource.get('isEnabled'),
+        offsetRange = theme.PROGRESS_OFFSET_RANGE,
+        offset = (isIndeterminate && isRunning) ? 
+                (Math.floor(Date.now()/75)%offsetRange-offsetRange) : 0;
+      
+    // offsetRange from dataSource only supported for backwards-compatibility
+    if (dataSource.get('offsetRange')) {
+      if (!this._hasGivenOffsetRangeDeprecationWarning) {
+        console.warn(
+          "The 'offsetRange' property for progressRenderDelegate is deprecated. " +
+          "Please override the value on your theme, instead, by setting " +
+          "its PROGRESS_OFFSET_RANGE property."
+        );
+      }
+      this._hasGivenOffsetRangeDeprecationWarning = YES;
+      
+      offsetRange = dataSource.get('offsetRange');
+    }
+  
+    var classNames = {
+      'sc-indeterminate': isIndeterminate,
+      'sc-empty': (value <= 0),
+      'sc-complete': (value >= 100)
+    };
+    
+    // compute value for setting the width of the inner progress
+    if (!isEnabled) {
+      value = "0%" ;
+    } else if (isIndeterminate) {
+      value = "120%";
+    } else {
+      value = value + "%";
+    }
+    
+    var classString = this._createClassNameString(classNames);
+    context.push('<div class="sc-inner ', classString, '" style="width: ', 
+                  value, ';left: ', offset, 'px;">',
+                  '<div class="sc-inner-head">','</div>',
+                  '<div class="sc-inner-tail"></div></div>',
+                  '<div class="sc-outer-head"></div>',
+                  '<div class="sc-outer-tail"></div>');
+  },
+  
+  update: function(dataSource, $) {
+    
+    var theme = dataSource.get('theme');
+    
+    var inner, value, cssString, backPosition,
+        animatedBackground = theme.PROGRESS_ANIMATED_BACKGROUND_MATRIX,
+        isIndeterminate = dataSource.get('isIndeterminate'),
+        isRunning = dataSource.get('isRunning'),
+        isEnabled = dataSource.get('isEnabled'),
+        offsetRange = dataSource.get('offsetRange'),
+        offset = (isIndeterminate && isRunning) ? 
+                (Math.floor(Date.now()/75)%offsetRange-offsetRange) : 0;
+  
+    // compute value for setting the width of the inner progress
+    if (!isEnabled) {
+      value = "0%" ;
+    } else if (isIndeterminate) {
+      value = "120%";
+    } else {
+      value = (dataSource.get('value') * 100) + "%";
+    }
+
+    var classNames = {
+      'sc-indeterminate': isIndeterminate,
+      'sc-empty': (value <= 0),
+      'sc-complete': (value >= 100)
+    };
+    
+    
+    
+    $.setClass(classNames);
+    inner = $.find('.sc-inner');
+    
+    // animatedBackground from dataSource only supported for backwards-compatibility
+    if (dataSource.get('animatedBackgroundMatrix')) {
+      if (!this._hasGivenAnimatedBackgroundDeprecationWarning) {
+        console.warn(
+          "The 'animatedBackgroundMatrix' property for progressRenderDelegate " +
+          "is deprecated. Please override the value on your theme by setting " +
+          "its PROGRESS_ANIMATED_BACKGROUND_MATRIX property."
+        );
+      }
+      
+      this._hasGivenAnimatedBackgroundDeprecationWarning = YES;
+      
+      animatedBackground = dataSource.get('animatedBackgroundMatrix');
+    }
+    
+    if (!animatedBackground) {
+      animatedBackground = theme.PROGRESS_ANIMATED_BACKGROUND_MATRIX;
+    }
+    
+    cssString = "width: "+value+"; ";
+    cssString = cssString + "left: "+offset+"px; ";
+    if (animatedBackground.length === 3 ) {
+      inner.css('backgroundPosition', '0px -'+ 
+              (animatedBackground[0] + 
+              animatedBackground[1]*this._currentBackground)+'px');
+      if(this._currentBackground===animatedBackground[2]-1
+         || this._currentBackground===0){
+        this._nextBackground *= -1;
+      }
+      this._currentBackground += this._nextBackground;
+      
+      cssString = cssString + "backgroundPosition: "+backPosition+"px; ";
+      //Instead of using css() set attr for faster perf.
+      inner.attr('style', cssString);
+    }else{
+      inner.attr('style', cssString);
+    }
+  },
+  
+  
+  _createClassNameString: function(classNames) {
+    var classNameArray = [], key;
+    for(key in classNames) {
+      if(!classNames.hasOwnProperty(key)) continue;
+      if(classNames[key]) classNameArray.push(key);
+    }
+    return classNameArray.join(" ");
+  }
+});