sproutcore 1.4.5-java → 1.5.0-java

data/lib/frameworks/sproutcore/frameworks/desktop/views/select_field.js

@@ -1,8 +1,10 @@
-// ========================================================================
-// SproutCore -- JavaScript Application Framework
-// Copyright ©2006-2011, Strobe Inc. and contributors.
-// Portions copyright ©2008 Apple Inc.  All rights reserved.
-// ========================================================================
+// ==========================================================================
+// 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
@@ -20,15 +22,47 @@
 SC.SelectFieldView = SC.FieldView.extend(
 /** @scope SC.SelectFieldView.prototype */ {
 
+  /**
+    @type Array
+    @default ['objects','nameKey','valueKey','isEnabled']
+    @see SC.View#displayProperties
+  */
+  displayProperties: ['objects','nameKey','valueKey','isEnabled'],
+
+  /**
+    Reflects the value of `isEnabled`.
+    
+    @field
+    @type Boolean
+    @default YES
+  */
+  acceptsFirstResponder: function() {
+    return this.get('isEnabled');
+  }.property('isEnabled'),
+
+  /**
+    @type String
+    @default 'select'
+    @see SC.View#tagName
+  */
   tagName: 'select',
+  
+  /**
+    @type Array
+    @default ['sc-select-field-view']
+    @see SC.View#classNames
+  */
   classNames: ['sc-select-field-view'],
  
   /**
     An array of items that will form the menu you want to show.
+    
+    @type Array
+    @default []
   */ 
   objects: [],
   
-  /**
+  /** @private
     Binding default for an array of objects
   */ 
   objectsBindingDefault: SC.Binding.multiple(),
@@ -37,13 +71,19 @@ SC.SelectFieldView = SC.FieldView.extend(
     If you set this to a non-null value, then the name shown for each 
     menu item will be pulled from the object using the named property.
     if this is null, the collection objects themselves will be used.
+    
+    @type String
+    @default null
   */
   nameKey: null,
 
   /**
-   If you set this to a non-null value, then the value of this key will
-   be used to sort the objects.  If this is not set, then nameKey will
-   be used.
+    If you set this to a non-null value, then the value of this key will
+    be used to sort the objects.  If this is not set, then nameKey will
+    be used.
+
+    @type String
+    @default null
   */ 
   sortKey: null,
 
@@ -51,20 +91,29 @@ SC.SelectFieldView = SC.FieldView.extend(
      Set this to a non-null value to use a key from the passed set of objects
      as the value for the options popup.  If you don't set this, then the
      objects themselves will be used as the value.
+
+     @type String
+     @default null
   */ 
   valueKey: null,
 
   /**
     set this to non-null to place an empty option at the top of the menu.   
+    
+    @type String
+    @default null
   */
   emptyName: null,
 
   /**
     if true, the empty name will be localized.
+    
+    @type Boolean
+    @default NO
   */
-  localize: false,
+  localize: NO,
   
-  /**
+  /** @private
     if true, it means that the nameKey, valueKey or objects changed
   */
   cpDidChange: YES,
@@ -72,11 +121,12 @@ SC.SelectFieldView = SC.FieldView.extend(
   /**
     if true, it means that no sorting will occur, objects will appear 
     in the same order as in the array
+    
+    @type Boolean
+    @default NO
   */
   disableSort: NO,
   
-  
-  
   /**
     override this to change the enabled/disabled state of menu items as they
     are built.  Return false if you want the menu item to be disabled.
@@ -86,7 +136,7 @@ SC.SelectFieldView = SC.FieldView.extend(
     @returns YES if the item should be enabled, NO otherwise
   */  
   validateMenuItem: function(itemValue, itemName) {
-    return true ;
+    return YES;
   },
 
   /**
@@ -113,6 +163,7 @@ SC.SelectFieldView = SC.FieldView.extend(
     return objects ;
   },
 
+  /** @private */
   render: function(context, firstTime) {
     if (this.get('cpDidChange')) {
       this.set('cpDidChange', NO);
@@ -143,7 +194,7 @@ SC.SelectFieldView = SC.FieldView.extend(
       
         var emptyName = this.get('emptyName') ;
         if (emptyName) {
-          if (shouldLocalize) emptyName = emptyName.loc() ;
+          if (shouldLocalize) emptyName = SC.String.loc(emptyName);
           if(firstTime){
             context.push('<option value="***">'+emptyName+'</option>',
                           '<option disabled="disabled"></option>') ;
@@ -167,7 +218,7 @@ SC.SelectFieldView = SC.FieldView.extend(
           // localize name if specified.
           if(shouldLocalize)
           {
-            name = name.loc();
+            name = SC.String.loc(name);
           }
    
           // get the value using the valueKey or the object if no valueKey.
@@ -178,7 +229,7 @@ SC.SelectFieldView = SC.FieldView.extend(
           if (!emptyName && index === 0 && fieldValue === '***') {
             this.set('value', value);
           }
-          if (value) value = (SC.guidFor(value)) ? SC.guidFor(value) : value.toString() ;
+          if (value !== null && value !== undefined) value = (SC.guidFor(value)) ? SC.guidFor(value) : value.toString() ;
    
           // render HTML
           var disable = (this.validateMenuItem && this.validateMenuItem(value, name)) ? '' : 'disabled="disabled" ' ;
@@ -212,45 +263,53 @@ SC.SelectFieldView = SC.FieldView.extend(
       this.$().attr('disabled', this.get('isEnabled') ? null : 'disabled');
     }
   },
-  
-  displayProperties: ['objects','nameKey','valueKey','isEnabled'],
 
+  /** @private */
   _objectsObserver: function() {
     this.set('cpDidChange', YES);
   }.observes('objects'),
 
+  /** @private */
   _objectArrayObserver: function() {
     this.set('cpDidChange', YES);
     this.propertyDidChange('objects');
   }.observes('*objects.[]'),
     
+  /** @private */
   _nameKeyObserver: function() {
     this.set('cpDidChange', YES);
   }.observes('nameKey'),
    
+  /** @private */
   _valueKeyObserver: function() {
     this.set('cpDidChange', YES);
   }.observes('valueKey'),
-    
-  acceptsFirstResponder: function() {
-    return this.get('isEnabled');
-  }.property('isEnabled'),
    
   // .......................................
   // PRIVATE
   //
    
+  /** @private */
   $input: function() { return this.$(); },
    
-  /* @private */
+  /** @private */
   mouseDown: function(evt) {
-    
     if (!this.get('isEnabled')) {
       evt.stop();
       return YES;
     } else return sc_super();
   },
    
+  /** @private */
+  touchStart: function(evt) {
+    return this.mouseDown(evt);
+  },
+  
+  /** @private */
+  touchEnd: function(evt) {
+    return this.mouseUp(evt);
+  },
+
   // when fetching the raw value, convert back to an object if needed...
   /** @private */
   getFieldValue: function() {
@@ -273,12 +332,12 @@ SC.SelectFieldView = SC.FieldView.extend(
       
       while(!found && (--loc >= 0)) {
         object = objects.objectAt? objects.objectAt(loc) : objects[loc] ;
-        if (!object) continue; // null means placeholder; just skip
+        if (object === null || object === undefined) continue; // null means placeholder; just skip
       
         // get value using valueKey if there is one or use object
         // map to _guid or toString.
         if (valueKey) object = (object.get) ? object.get(valueKey) : object[valueKey] ;
-        var ov = (object) ? (SC.guidFor(object) ? SC.guidFor(object) : object.toString()) : null ;
+        var ov = (object !== null && object !== undefined) ? (SC.guidFor(object) ? SC.guidFor(object) : object.toString()) : null ;
       
         // use this object value if it matches.
         if (value == ov) found = object ;
@@ -288,49 +347,49 @@ SC.SelectFieldView = SC.FieldView.extend(
     return (valueKey || found) ? found : value;
   },
   
+  /** @private */
   setFieldValue: function(newValue) {
     if (SC.none(newValue)) { 
       newValue = '***' ; 
     } else {
-      newValue = ((newValue) ? (SC.guidFor(newValue) ? SC.guidFor(newValue) : newValue.toString()) : null );
+      newValue = ((newValue !== null && newValue !== undefined) ? (SC.guidFor(newValue) ? SC.guidFor(newValue) : newValue.toString()) : null );
     }
     this.$input().val(newValue);
     return this ;
   },
   
-  
-  
- 
-  
+  /** @private */
   fieldDidFocus: function() {
     var isFocused = this.get('isFocused');
     if (!isFocused) this.set('isFocused', true);
   },
 
+  /** @private */
   fieldDidBlur: function() {
     var isFocused = this.get('isFocused');
     if (isFocused) this.set('isFocused', false);
   },
-
-
   
+  /** @private */
   _isFocusedObserver: function() {
     this.$().setClass('focus', this.get('isFocused'));
   }.observes('isFocused'),
 
+  /** @private */
   didCreateLayer: function() {
     var input = this.$input();
     if (this.get('isEnabled') === false) this.$()[0].disabled = true;
     SC.Event.add(input, 'blur', this, this.fieldDidBlur);
     SC.Event.add(input, 'focus',this, this.fieldDidFocus);
-    return sc_super();
+    SC.Event.add(input, 'change',this, this._field_fieldValueDidChange);
   },
   
+  /** @private */
   willDestroyLayer: function() {
     var input = this.$input();
     SC.Event.remove(input, 'focus', this, this.fieldDidFocus);
     SC.Event.remove(input, 'blur', this, this.fieldDidBlur);
-    return sc_super();
+    SC.Event.remove(input, 'change',this, this._field_fieldValueDidChange);
   }
- 
+
 });

data/lib/frameworks/sproutcore/frameworks/desktop/views/separator.js

@@ -1,8 +1,10 @@
-// ========================================================================
-// SproutCore -- JavaScript Application Framework
-// Copyright ©2006-2011, Strobe Inc. and contributors.
-// Portions copyright ©2008 Apple Inc.  All rights reserved.
-// ========================================================================
+// ==========================================================================
+// 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
@@ -16,21 +18,35 @@
 SC.SeparatorView = SC.View.extend(
 /** @scope SC.SeparatorView.prototype */ {
 
+  /**
+    @type Array
+    @default ['sc-separator-view']
+    @see SC.View#classNames
+  */
   classNames: ['sc-separator-view'],
+  
+  /**
+    @type String
+    @default 'span'
+    @see SC.View#tagName
+  */
   tagName: 'span',
 
   /** 
-    Select the direction of the separator line.  Must be one of SC.LAYOUT_VERTICAL or SC.LAYOUT_HORIZONTAL.
+    Select the direction of the separator line. Possible values:
     
-    @property {String}
+      - SC.LAYOUT_VERTICAL
+      - SC.LAYOUT_HORIZONTAL
+    
+    @type String
+    @default SC.LAYOUT_HORIZONTAL
   */
   layoutDirection: SC.LAYOUT_HORIZONTAL,
 
+  /** @private */
   render: function(context, firstTime) {
     if(firstTime) context.push('<span></span>');
-	  context.addClass(this.get('layoutDirection'));
+    context.addClass(this.get('layoutDirection'));
   }
 
-
-
 });

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

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
@@ -24,14 +24,15 @@ SC.SliderView = SC.View.extend(SC.Control,
 /** @scope SC.SliderView.prototype */ {
   
   classNames: 'sc-slider-view',
-  
-  /** 
-    The DOM element that displays the handle.  This element will have its
-    top-left corner updated to reflect the current state of the slider.  Use
-    margin-offsets to properly position your handle over this location.
+
+  /**
+    The WAI-ARIA role for slider view. This property's value should not be
+    changed.
+
+    @property {String}
   */
-  handleSelector: 'img.sc-handle',
-  
+  ariaRole: 'slider',
+
   /**
     Bind this to the current value of the progress bar.  Note that by default 
     an empty value will disable the progress bar and a multiple value too make 
@@ -81,11 +82,21 @@ SC.SliderView = SC.View.extend(SC.Control,
   // INTERNAL PROPERTIES
   // 
   
-  displayProperties: 'value minimum maximum'.w(),
+  displayProperties: ['displayValue', 'ariaValue', 'minimum', 'maximum', 'step', 'frame'],
+
+  /**
+   @property
+   The raw, unchanged value to be provided to screen readers and the like.
+  */
+  ariaValue: function() {
+    return this.get('value');
+  }.property('value').cacheable(),
+
+  // The name of the render delegate which is creating and maintaining
+  // the DOM associated with instances of this view
+  renderDelegateName: 'sliderRenderDelegate',
   
-  render: function(context, firstTime) {
-    sc_super();
-    
+  displayValue: function() {
     var min = this.get('minimum'),
         max = this.get('maximum'),
         value = this.get('value'),
@@ -102,20 +113,8 @@ SC.SliderView = SC.View.extend(SC.Control,
     // determine the percent across
     if(value!==0) value = Math.floor((value - min) / (max - min) * 100);
     
-    if(firstTime) {
-      var blankImage = SC.BLANK_IMAGE_URL;
-      context.push('<span class="sc-inner">',
-                    '<span class="sc-leftcap"></span>',
-                    '<span class="sc-rightcap"></span>',
-                    '<img src="', blankImage, 
-                    '" class="sc-handle" style="left: ', value, '%" />',
-                    '</span>');
-    }
-    else {
-      this.$(this.get('handleSelector')).css('left', value + "%");
-    }
-    
-  },
+    return value;
+  }.property('value', 'minimum', 'maximum', 'step').cacheable(),
   
   _isMouseDown: NO,
   
@@ -123,7 +122,7 @@ SC.SliderView = SC.View.extend(SC.Control,
     if (!this.get('isEnabled')) return YES; // nothing to do...
     this.set('isActive', YES);
     this._isMouseDown = YES ;
-    return this._triggerHandle(evt, true);
+    return this._triggerHandle(evt, YES);
   },
   
   // mouseDragged uses same technique as mouseDown.
@@ -170,7 +169,7 @@ SC.SliderView = SC.View.extend(SC.Control,
   */
   _triggerHandle: function(evt, firstEvent) {
     var width = this.get('frame').width,
-        min = this.get('minimum'), max=this.get('maximum'),  
+        min = this.get('minimum'), max=this.get('maximum'),
         step = this.get('step'), v=this.get('value'), loc;
         
     if(firstEvent){    
@@ -180,26 +179,40 @@ SC.SliderView = SC.View.extend(SC.Control,
       loc = evt.pageX-this._evtDiff;
     }
     
-    // constrain loc to 8px on either side (left to allow knob overhang)
-    loc = Math.max(Math.min(loc,width-8), 8) - 8;
-    width -= 16 ; // reduce by margin
-    
     // convert to percentage
-    loc = loc / width ;
+    loc = Math.max(0, Math.min(loc / width, 1));
+    
+    // if the location is NOT in the general vicinity of the slider, we assume
+    // that the mouse pointer or touch is in the center of where the knob should be.
+    // otherwise, if we are starting, we need to do extra to add an offset
+    if (firstEvent) {
+      var value = this.get("value");
+      value = (value - min) / (max - min);
+      
+      // if the value and the loc are within 16px
+      if (Math.abs(value * width - loc * width) < 16) this._offset = value - loc;
+      else this._offset = 0;
+    }
     
+    // add offset and constrain
+    loc = Math.max(0, Math.min(loc + this._offset, 1));
+
     // convert to value using minimum/maximum then constrain to steps
     loc = min + ((max-min)*loc);
     if (step !== 0) loc = Math.round(loc / step) * step ;
-
+    
     // if changes by more than a rounding amount, set v.
-    if (Math.abs(v-loc)>=0.01) this.set('value', loc); // adjust 
+    if (Math.abs(v-loc)>=0.01) {
+      this.set('value', loc); // adjust 
+    }
+    
     return YES ;
   },
   
   /** tied to the isEnabled state */
   acceptsFirstResponder: function() {
-    if(!SC.SAFARI_FOCUS_BEHAVIOR) return this.get('isEnabled');
-    else return NO;
+    if (SC.FOCUS_ALL_CONTROLS) { return this.get('isEnabled'); }
+    return NO;
   }.property('isEnabled'),
   
   willBecomeKeyResponderFrom: function(keyView) {
@@ -208,7 +221,7 @@ SC.SliderView = SC.View.extend(SC.Control,
       this._isFocused = YES ;
       this.becomeFirstResponder();
       if (this.get('isVisibleInWindow')) {
-        this.$()[0].focus();
+        this.$().focus();
       }
     }
   },
@@ -220,7 +233,7 @@ SC.SliderView = SC.View.extend(SC.Control,
   keyDown: function(evt) {
 
      // handle tab key
-     if (evt.which === 9) {
+     if (evt.which === 9 || evt.keyCode === 9) {
        var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
        if(view) view.becomeFirstResponder();
        else evt.allowDefault();