sproutcore 1.0.1046 → 1.0.1049.pre.1

data/frameworks/sproutcore/frameworks/foundation/views/field.js

@@ -2,7 +2,7 @@
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
 //            Portions ©2008-2009 Apple Inc. All rights reserved.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 sc_require('views/view') ;
@@ -34,9 +34,8 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
   */
   isTextArea: NO,
 
-
   _field_isMouseDown: NO,
-  
+
   /**
     The raw value of the field itself.  This is computed from the 'value'
     property by passing it through any validator you might have set.  This is 
@@ -46,7 +45,7 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
   */  
   fieldValue: function() {
     var value = this.get('value');
-    if (SC.typeOf(value) === SC.T_ERROR) value = value.get('value');
+    if (SC.typeOf(value) === SC.T_ERROR) value = value.get('errorValue');
     return this.fieldValueForObject(value);
   }.property('value', 'validator').cacheable(),
 
@@ -127,7 +126,11 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
     var fieldValue = this.getFieldValue();
     var value = this.objectForFieldValue(fieldValue, partialChange);
     this.setIfChanged('value', value);
-    
+
+
+    // ======= [Old code -- left here for concept reminders. Basic validation
+    // API works without it] =======
+
     // validate value if needed...
     
     // this.notifyPropertyChange('fieldValue');
@@ -165,7 +168,7 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
   */
   _field_valueDidChange: function() {
     this.setFieldValue(this.get('fieldValue'));
-  }.observes('value'),
+  }.observes('fieldValue'),
 
   /** @private
     after the layer is created, set the field value and observe events
@@ -174,13 +177,13 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
     this.setFieldValue(this.get('fieldValue'));
     SC.Event.add(this.$input(), 'change', this, this._field_fieldValueDidChange) ;
   },
-  
+
   /** @private
     after the layer is append to the doc, set the field value and observe events
     only for textarea.
   */
   didAppendToDocument: function() {
-    if(this.get('isTextArea')){
+    if (this.get('isTextArea')) {
       this.setFieldValue(this.get('fieldValue'));
       SC.Event.add(this.$input(), 'change', this, this._field_fieldValueDidChange) ;
     }
@@ -189,27 +192,10 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
   willDestroyLayer: function() {
     SC.Event.remove(this.$input(), 'change', this, this._field_fieldValueDidChange); 
   },
-
-  /** @private
-    when the layer is updated, go ahead and call render like normal.  this 
-    will allow normal CSS class + style updates.  by then also update field
-    value manually.
-    
-    Most subclasses should not regenerate their contents unless necessary.
-  */
-  updateLayer: function() {
-    sc_super();
-    
-    // only change field value if it has changed from the last time we 
-    // set it.  This allows the browser-native field value to change without
-    // this method interfering with it.
-    //var fieldValue = this.get('fieldValue');
-    //this.setFieldValue(fieldValue);
-  },
   
   // ACTIONS
   // You generally do not need to override these but they may be used.
-  
+
   /**
     Called to perform validation on the field just before the form 
     is submitted.  If you have a validator attached, this will get the
@@ -275,7 +261,7 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
     // handle tab key
     if (evt.which === 9) {
       var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
-      if(view) view.becomeFirstResponder();
+      if (view) view.becomeFirstResponder();
       else evt.allowDefault();
       return YES ; // handled
     }
@@ -311,18 +297,7 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
   willLoseKeyResponderTo: function(responder) {
     if (this._isFocused) this._isFocused = NO ;
   },
-  
-  
-  // called whenever the value is set on the object.  Will set the value
-  // on the field if the value is changed.
-  // valueDidChange: function() {
-  //   var value = this.get('value') ;
-  //   var isError = SC.typeOf(value) === SC.T_ERROR ;
-  //   if (!isError && (value !== this._field_getFieldValue())) {
-  //     this._field_setFieldValue(value) ;
-  //   } 
-  // }.observes('value'),
-  
+    
   // these methods use the validator to convert the raw field value returned
   // by your subclass into an object and visa versa.
   _field_setFieldValue: function(newValue) {
@@ -337,10 +312,9 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
   
   _field_getFieldValue: function() {
     var ret = this.getFieldValue() ;
-    if (this.objectForFieldValue) ret=this.objectForFieldValue(ret);
+    if (this.objectForFieldValue) ret = this.objectForFieldValue(ret);
     return ret ;
   }
   
-}) ;
-
+});
 

data/frameworks/sproutcore/frameworks/foundation/views/image.js

@@ -2,7 +2,7 @@
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
 //            Portions ©2008-2009 Apple Inc. All rights reserved.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 sc_require('views/view') ;

data/frameworks/sproutcore/frameworks/foundation/views/label.js

@@ -2,16 +2,12 @@
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
 //            Portions ©2008-2009 Apple Inc. All rights reserved.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 sc_require('views/view') ;
 sc_require('mixins/control') ;
 
-SC.ALIGN_LEFT = 'left';
-SC.ALIGN_RIGHT = 'right';
-SC.ALIGN_CENTER = 'center';
-
 SC.REGULAR_WEIGHT = 'normal';
 SC.BOLD_WEIGHT = 'bold';
 
@@ -116,12 +112,15 @@ SC.LabelView = SC.View.extend(SC.Control,
     @field
   */
   displayValue: function() {
-    var value = this.get('value') ;
+    var value, formatter;
+    
+    value = this.get('value') ;
     
     // 1. apply the formatter
-    var formatter = this.getDelegateProperty('formatter', this.displayDelegate) ;
+    formatter = this.getDelegateProperty('formatter', this.displayDelegate) ;
     if (formatter) {
-      var formattedValue = (SC.typeOf(formatter) === SC.T_FUNCTION) ? formatter(value, this) : formatter.fieldValueForObject(value, this) ;
+      var formattedValue = (SC.typeOf(formatter) === SC.T_FUNCTION) ? 
+          formatter(value, this) : formatter.fieldValueForObject(value, this) ;
       if (!SC.none(formattedValue)) value = formattedValue ;
     }
     
@@ -129,7 +128,7 @@ SC.LabelView = SC.View.extend(SC.Control,
     // join with commas.
     if (SC.typeOf(value) === SC.T_ARRAY) {
       var ary = [];
-      for(var idx=0;idx<value.get('length');idx++) {
+      for(var idx=0, idxLen = value.get('length'); idx< idxLen;idx++) {
         var x = value.objectAt(idx) ;
         if (!SC.none(x) && x.toString) x = x.toString() ;
         ary.push(x) ;
@@ -149,6 +148,20 @@ SC.LabelView = SC.View.extend(SC.Control,
     return value ;
   }.property('value', 'localize', 'formatter', 'escapeHTML').cacheable(),
   
+  
+  /**
+    [RO] The hint value that will actually be displayed.
+    
+    This property is dynamically computed by applying localization 
+    and other normalization utilities.
+    
+  */
+  hintValue: function() {
+    var hintVal = this.get('hint');
+    if (this.get('escapeHTML')) hintVal = SC.RenderContext.escapeHTML(hintVal);
+    return hintVal ;
+  }.property('hint', 'escapeHTML').cacheable(),
+  
   /**
     Enables editing using the inline editor.
   */
@@ -190,10 +203,10 @@ SC.LabelView = SC.View.extend(SC.Control,
     if (this.get('isEditing')) return YES ;
     if (!this.get('isEditable')) return NO ;
 
-    var el = this.$();
-    var value = this.get('value') || '' ;
-    var f = SC.viewportOffset(el[0]) ;
-    var frameTemp = this.convertFrameFromView(this.get('frame'), null) ;
+    var el = this.$(),
+        value = this.get('value') || '',
+        f = SC.viewportOffset(el[0]),
+        frameTemp = this.convertFrameFromView(this.get('frame'), null) ;
     f.width=frameTemp.width;
     f.height=frameTemp.height;
     
@@ -229,6 +242,13 @@ SC.LabelView = SC.View.extend(SC.Control,
     return SC.InlineTextFieldView.commitEditing() ;
   },
 
+  /** @private
+    Allow editing.
+  */
+  inlineEditorShouldBeginEditing: function(inlineEditor) {
+    return YES ;
+  },
+  
   /** @private
     Set editing to true so edits will no longer be allowed.
   */
@@ -240,10 +260,18 @@ SC.LabelView = SC.View.extend(SC.Control,
     Hide the label view while the inline editor covers it.
   */
   inlineEditorDidBeginEditing: function(inlineEditor) {
-    this._oldOpacity = this.$().css('opacity') ;
-    this.$().css('opacity', 0.0);
+    var layer = this.$();
+    this._oldOpacity = layer.css('opacity') ;
+    layer.css('opacity', 0.0);
   },
-
+  
+  /** @private
+    Delegate method defaults to the isEditable property
+  */
+  inlineEditorShouldBeginEditing: function(){
+    return this.get('isEditable');
+  },
+  
   /** @private
     Could check with a validator someday...
   */
@@ -265,37 +293,19 @@ SC.LabelView = SC.View.extend(SC.Control,
   
   _TEMPORARY_CLASS_HASH: {},
   
-  render: function(context, firstTime) {
-    var value = this.get('displayValue'),
-        icon = this.get('icon'),
-        hint = this.get('hint');
-    
-    // add icon if needed
-    if (icon) {
-      var url = (icon.indexOf('/')>=0) ? icon : SC.BLANK_IMAGE_URL;
-      var className = (url === icon) ? '' : icon ;
-      icon = '<img src="%@" alt="" class="icon %@" />'.fmt(url, className) ;
-      context.push(icon);
-    }
-    
-    // if there is a hint set and no value, render the hint
-    // otherwise, render the value
-    if (hint && (!value || value === '')) {
-      context.push('<span class="sc-hint">', hint, '</span>');
-    } else { 
-      context.push(value);
-    }
-    
-    // and setup alignment and font-weight on styles
-    context.addStyle('text-align',  this.get('textAlign'))
-           .addStyle('font-weight', this.get('fontWeight'));
-           
-    var classes = this._TEMPORARY_CLASS_HASH;
-    classes.icon = !!this.get('icon');
-    context.setClass(classes);
-           
-    // if we are editing, set the opacity to 0
-    if (this.get('isEditing')) context.addStyle('opacity', 0.0);
-  }
+  createRenderer: function(t) {
+    return t.label();
+  },
   
+  updateRenderer: function(r) {
+    r.attr({
+      "value": this.get("displayValue"),
+      "icon": this.get("icon"),
+      "hint": this.get("hint"),
+      "escapeHTML": this.get("escapeHTML"),
+      "isEditing": this.get("isEditing"),
+      "textAlign": this.get("textAlign"),
+      "fontWeight": this.get("fontWeight")
+    });
+  }  
 });

data/frameworks/sproutcore/frameworks/foundation/views/text_field.js

@@ -2,7 +2,7 @@
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
 //            Portions ©2008-2009 Apple Inc. All rights reserved.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 sc_require('views/field') ;
@@ -29,6 +29,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   // PROPERTIES
   //
 
+  applyImmediately: YES,
+
   /**
     If YES, the field will hide its text from display. The default value is NO.
   */
@@ -44,12 +46,40 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   /**
     The hint to display while the field is not active.  Can be a loc key.
   */
-  hint: null,
+  hint: '',
 
   /**
     If YES then the text field is currently editing.
   */
   isEditing: NO,
+  
+  hintON:YES,
+  
+  /**
+    If you set this property to false the tab key won't trigger its default 
+    behavior (tabbing to the next field).
+  */
+  defaultTabbingEnabled:YES,
+  
+  /**
+    Enabled context menu for textfields.
+  */
+  isContextMenuEnabled: YES,
+
+  /**
+    If true, every change to the text in the text field updates 'value'.
+    If false, 'value' is only updated when commitEditing() is called (this
+    is called automatically when the text field loses focus), or whenever
+    the return key is pressed while editing the field.
+  */
+  continuouslyUpdatesValue: YES,
+
+  /**
+    If no, will not allow transform or validation errors (SC.Error objects)
+    to be passed to 'value'.  Upon focus lost, the text field will revert
+    to its previous value.
+  */
+  allowsErrorAsValue: YES,
 
   /**
     An optional view instance, or view class reference, which will be visible
@@ -96,15 +126,33 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   */
   rightAccessoryView: null,
   
+  
+  /**
+    This property will enable disable HTML5 spell checking if available on the 
+    browser. As of today Safari 4+, Chrome 3+ and Firefox 3+ support it  
+  */
+    
+  spellCheckEnabled: YES,
+  
+  maxLength: 5096,
+  
+  
   _isFocused: NO,
-
+  
+  
+  init:function(){
+    var hintStatus = this.get('hintON'),
+        val = this.get('value');
+    if(!val || val && val.length===0) this.set('hintON', YES);
+    else this.set('hintON', NO);
+    return sc_super();
+  },
 
   /** isEditable maps to isEnabled with a TextField. */
   isEditable: function() {
     return this.get('isEnabled') ;
   }.property('isEnabled').cacheable(),
 
-
   /**
     The current selection of the text field, returned as an SC.TextSelection
     object.
@@ -182,29 +230,19 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
       }
 
       if (element) {
-        var setStart, setEnd ;
-
-        // In IE8, input elements don't have hasOwnProperty() defined.  Also,
-        // in Firefox 3.5, trying to get the selectionStart / selectionEnd
-        // properties at certain times can cause exceptions.
-        if ('selectionStart' in element) {
-         element.selectionStart = value.get('start') ;
-         setStart = YES ;
+        if (element.setSelectionRange) {
+          element.setSelectionRange(value.get('start'), value.get('end')) ;
         }
-        if ('selectionEnd' in element) {
-         element.selectionEnd = value.get('end') ;
-         setEnd = YES ;
-        }
-
-        // Support Internet Explorer.
-        if (!setStart  ||  !setEnd) {
-         range = element.createTextRange() ;
-         start = value.get('start') ;
-         range.move('character', start) ;
-         range.moveEnd('character', value.get('end') - start) ;
-         range.select() ;
+        else {
+          // Support Internet Explorer.
+          range = element.createTextRange() ;
+          start = value.get('start') ;
+          range.move('character', start) ;
+          range.moveEnd('character', value.get('end') - start) ;
+          range.select() ;
         }
       }
+      return value;
     }
 
     // Implementation note:
@@ -214,24 +252,21 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     // whenever the field's value changes.
   }.property('fieldValue').cacheable(),
 
-
-
   // ..........................................................
   // INTERNAL SUPPORT
   //
 
   displayProperties: 'hint fieldValue isEditing leftAccessoryView rightAccessoryView isTextArea'.w(),
 
-
   createChildViews: function() {
-    this.accessoryViewObserver() ;
+    sc_super();
+    this.accessoryViewObserver();
   },
 
   acceptsFirstResponder: function() {
     return this.get('isEnabled');
   }.property('isEnabled'),
 
-
   accessoryViewObserver: function() {
     var classNames,
         viewProperties = ['leftAccessoryView', 'rightAccessoryView'],
@@ -278,7 +313,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
           classNames = accessoryView.get('classNames') ;
           var className = 'sc-text-field-accessory-view' ;
           if (classNames.indexOf(className) < 0) {
+            classNames = SC.clone(classNames);
             classNames.push(className) ;
+            accessoryView.set('classNames', classNames);
           }
 
           // Actually add the view to our hierarchy and cache a reference.
@@ -289,7 +326,6 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   }.observes('leftAccessoryView', 'rightAccessoryView'),
 
-
   layoutChildViewsIfNeeded: function(isVisible) {
     // For the right accessory view, adjust the positioning such that the view
     // is right-justified, unless 'right' is specified.
@@ -310,24 +346,17 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
         }
       }
     }
-
     sc_super() ;
   },
 
-
   render: function(context, firstTime) {
     sc_super() ;
-
-    var disabled = this.get('isEnabled') ? '' : 'disabled="disabled"',
-        name = SC.guidFor(this),
-        type = this.get('isPassword') ? 'password' : 'text',
-        v, accessoryViewWidths, leftAdjustment, rightAdjustment;
-
-    if (this.get('isTextArea')) context.addClass('text-area');
+    var v, accessoryViewWidths, leftAdjustment, rightAdjustment;
 
     // always have at least an empty string
     v = this.get('fieldValue');
     if (SC.none(v)) v = '';
+    v = String(v);
 
     // update layer classes always
     context.setClass('not-empty', v.length > 0);
@@ -344,11 +373,10 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     if (leftAdjustment)  leftAdjustment  += 'px' ;
     if (rightAdjustment) rightAdjustment += 'px' ;
 
-    this._renderField(context, firstTime, v, leftAdjustment, rightAdjustment) ;
+   this._renderField(context, firstTime, v, leftAdjustment, rightAdjustment) ;
     if(SC.browser.mozilla) this.invokeLast(this._applyFirefoxCursorFix);
   },
 
-
   /**
     If isTextArea is changed (this might happen in inlineeditor constantly)
     force the field render to render like the firsttime to avoid writing extra
@@ -364,9 +392,15 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     // TODO:  The cleanest thing might be to create a sub- rendering context
     //        here, but currently SC.RenderContext will render sibling
     //        contexts as parent/child.
+
     var hint = this.get('hint'), disabled, name, adjustmentStyle, type, 
-        hintElements, element, paddingElementStyle;
+        hintElements, element, paddingElementStyle, fieldClassNames,
+        spellCheckEnabled=this.get('spellCheckEnabled'), spellCheckString,
+        maxLength = this.get('maxLength');
+        
+    context.setClass('text-area', this.get('isTextArea'));
     
+    spellCheckString = spellCheckEnabled ? ' spellcheck="true"' : ' spellcheck="false"';
     if (firstTime || this._forceRenderFirstTime) {
       this._forceRenderFirstTime = NO;
       disabled = this.get('isEnabled') ? '' : 'disabled="disabled"' ;
@@ -383,28 +417,51 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
         if (rightAdjustment) adjustmentStyle += 'right: ' + rightAdjustment + ';' ;
         adjustmentStyle += '"' ;
       }
-      context.push('<span class="padding" %@>'.fmt(adjustmentStyle));
+      context.push('<span class="padding" '+adjustmentStyle+'>');
+                  
+      value = this.get('escapeHTML')?SC.RenderContext.escapeHTML(value):value;
+      if(!this.get('_supportsPlaceHolder') && (!value || (value && value.length===0))) {
+        value = this.get('hint');
+        context.setClass('sc-hint', YES);
+      } 
       
-      // Render the hint.
-      context.push('<span class="sc-hint">', hint, '</span>') ;
+      //for gecko pre 1.9 vertical aligment is completely broken so we need
+      //different styling.
+      fieldClassNames = (SC.browser.mozilla &&
+                          (parseFloat(SC.browser.mozilla)<1.9 || 
+                          SC.browser.mozilla.match(/1\.9\.0|1\.9\.1/))) ?
+                          "field oldGecko": "field";
       
       // Render the input/textarea field itself, and close off the padding.
       if (this.get('isTextArea')) {
-        context.push('<textarea name="', name, '" ', disabled, '>', value, '</textarea></span>') ;
+        context.push('<textarea class="',fieldClassNames,'" name="', name, 
+                      '" ', disabled, ' placeholder="',hint, '"',
+                      spellCheckString,' maxlength="', maxLength, '">', 
+                      value, '</textarea></span>') ;
       }
       else {
         type = this.get('isPassword') ? 'password' : 'text' ;
-        context.push('<input type="', type,'" name="', name, '" ', disabled, ' value="', value,'"/></span>') ;
+        context.push('<input class="',fieldClassNames,'" type="', type,
+                      '" name="', name, '" ', disabled, ' value="', value,
+                      '" placeholder="',hint,'"', spellCheckString, 
+                      ' maxlength="', maxLength, '" /></span>') ;
       }
 
     }
     else {
-      // If this is not first time rendering, update the hint itself since we
-      // can't just blow away the text field like we might most other controls
-      hintElements = this.$('.sc-hint') ;
-      if (hint !== this._textField_currentHint) {
-        this._textField_currentHint = hint ;
-        hintElements.text(hint) ;
+      if(!this.get('_supportsPlaceHolder')){
+        var val = this.get('value');
+        if((!val || (val && val.length===0))){
+          if(this.get('hintON') && !this.get('isFirstResponder')){
+            //console.log('hint on render');
+            context.setClass('sc-hint', YES);
+            this.$input().val(hint);
+          }else{
+            // console.log('removing hint on render');
+            context.setClass('sc-hint', NO);
+            this.$input().val('');
+          }
+        }
       }
       
       // Enable/disable the actual input/textarea as appropriate.
@@ -440,7 +497,6 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   },
 
-
   _getAccessoryViewWidths: function() {
     var widths = {},
         accessoryViewPositions = ['left', 'right'],
@@ -449,18 +505,27 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     for (i = 0;  i < numberOfAccessoryViewPositions;  i++) {
       position = accessoryViewPositions[i];
       accessoryView = this.get(position + 'AccessoryView');
-      if (accessoryView  &&  accessoryView.get) {
-        frame = accessoryView.get('frame');
-        if (frame) {
-          width = frame.width;
-          if (width) {
-            // Also account for the accessory view's inset.
-            layout = accessoryView.get('layout');
-            if (layout) {
-              offset = layout[position];
-              width += offset;
+      if (accessoryView) {
+        // need acessoryView as an instance, not class...
+        if (accessoryView.isClass) {
+          accessoryView = accessoryView.create({
+            layoutView: this
+          });
+        }
+        // sanity check
+        if (accessoryView.get) {
+          frame = accessoryView.get('frame');
+          if (frame) {
+            width = frame.width;
+            if (width) {
+              // Also account for the accessory view's inset.
+              layout = accessoryView.get('layout');
+              if (layout) {
+                offset = layout[position];
+                width += offset;
+              }
+              widths[position] = width;
             }
-            widths[position] = width;
           }
         }
       }
@@ -468,32 +533,49 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     return widths;
   },
 
-
   // ..........................................................
   // HANDLE NATIVE CONTROL EVENTS
   //
 
   didCreateLayer: function() {
-    if(!this.get('isTextArea')){
-      sc_super(); 
-      this._addTextAreaEvents();
-    } 
-  },
-  
-  
-  didAppendToDocument: function() {
-    // Turns out that in safari and firefox you can attach events to a textarea
-    // only if it has been appended to the DOM or if you did did it during
-    // loading time. For input tags is the other way around. I tested in all
-    // browsers and if I add the event for input tag before being visible it works
-    // fine, and if I add the event after the textarea is visible then the 
-    // textarea works. In IE works fine both ways.
-    if(this.get('isTextArea')){
-      sc_super();
+    sc_super(); 
+    // For some strange reason if we add focus/blur events to textarea
+    // inmediately they won't work. However if I add them at the end of the
+    // runLoop it works fine.
+    if(!this.get('_supportsPlaceHolder') && this.get('hintON')){
+      var currentValue = this.$input().val();
+      if(!currentValue || (currentValue && currentValue.length===0)){
+        // console.log('hint on didcreatelayer');
+        this.$input().val(this.get('hint'));
+      }
+    }
+    if(this.get('isTextArea')) {
+      this.invokeLast(this._addTextAreaEvents);
+    }
+    else {
       this._addTextAreaEvents();
+      
+      // In Firefox, for input fields only (that is, not textarea elements),
+      // if the cursor is at the end of the field, the "down" key will not
+      // result in a "keypress" event for the document (only for the input
+      // element), although it will be bubbled up in other contexts.  Since
+      // SproutCore's event dispatching requires the document to see the
+      // event, we'll manually forward the event along.
+      if (SC.browser.mozilla) {
+        var input = this.$input();
+        SC.Event.add(input, 'keypress', this, this._firefox_dispatch_keypress);
+      }
     }
   },
   
+  
+  /** 
+    Adds all the textarea events. This functions is called by didCreateLayer
+    at different moments depending if it is a textarea or not. Appending 
+    events to text areas is not reliable unless the element is already added 
+    to the DOM.
+    
+  */
   _addTextAreaEvents: function() {
     var input = this.$input();
     SC.Event.add(input, 'focus', this, this._textField_fieldDidFocus);
@@ -511,33 +593,80 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   },
 
+
+  /**
+    Removes all the events attached to the textfield
+  */
+  
   willDestroyLayer: function() {
     sc_super();
 
     var input = this.$input();
-    SC.Event.remove(input, 'focus', this, this._textField_fieldDidFocus);
-    SC.Event.remove(input, 'blur',  this, this._textField_fieldDidBlur);
-    SC.Event.remove(input, 'select',  this, this._textField_selectionDidChange);
+    SC.Event.remove(input, 'focus',  this, this._textField_fieldDidFocus);
+    SC.Event.remove(input, 'blur',   this, this._textField_fieldDidBlur);
+    SC.Event.remove(input, 'select', this, this._textField_selectionDidChange);
+    SC.Event.remove(input, 'focus',  this, this._firefox_dispatch_keypress);
   },
+  
+  /**
+    This function is called by the event when the textfield gets focus
+  */
 
   _textField_fieldDidFocus: function(evt) {
     SC.RunLoop.begin();
-    this.fieldDidFocus();
+    this.set('focused',YES);
+    this.fieldDidFocus(evt);
+    var val = this.get('value');
+    if(!this.get('_supportsPlaceHolder') && ((!val) || (val && val.length===0))){
+      // console.log('turn off hint');
+      this.set('hintON', NO);
+    }
     SC.RunLoop.end();
   },
 
+  /**
+    This function is called by the event when the textfield blurs
+  */
+
   _textField_fieldDidBlur: function(evt) {
     SC.RunLoop.begin();
-    this.fieldDidBlur();
+    this.set('focused',NO);
+    // passing the original event here instead that was potentially set from
+    // loosing the responder on the inline text editor so that we can
+    // use it for the delegate to end editing
+    this.fieldDidBlur(this._origEvent);
+    var val = this.get('value');
+    if(!this.get('_supportsPlaceHolder') && ((!val) || (val && val.length===0))){
+      // console.log('turn on hint');
+      this.set('hintON', YES);
+    }
     SC.RunLoop.end();
   },
   
   fieldDidFocus: function(evt) {
-    this.beginEditing();
+    this.beginEditing(evt);
+    
+    // handle touch intercept
+    if (this.getPath("pane.usingTouchIntercept")) {
+      this.get("pane").hideTouchIntercept();
+    }
+  },
+  
+  fieldDidBlur: function(evt) {
+    this.commitEditing(evt);
+    
+    // handle touch intercept
+    if (this.getPath("pane.usingTouchIntercept")) {
+      this.get("pane").showTouchIntercept();
+    }
   },
   
-  fieldDidBlur: function() {
-    this.commitEditing();
+  _field_fieldValueDidChange: function(evt) {
+    if(this.get('focused')){
+      SC.RunLoop.begin();
+      this.fieldValueDidChange(NO);
+      SC.RunLoop.end();  
+    }
   },
 
   /**
@@ -545,6 +674,12 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   */
   _topOffsetForFirefoxCursorFix: 3,
 
+
+  /**
+    Mozilla had this bug until firefox 3.5 or gecko 1.8 They rewrote input text
+    and textareas and now they work better. But we have to keep this for older
+    versions.
+  */
   _applyFirefoxCursorFix: function() {
     // Be extremely careful changing this code.  !!!!!!!! 
     // Contact me if you need to change or improve the code. After several 
@@ -554,10 +689,13 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     // to fix the cursor at any position. As of FF 3.5.3 mozilla hasn't fixed this 
     // bug, even though related bugs that I've found on their database appear
     // as fixed.  
+    
+    // UPDATE: Things seem to be working on FF3.6 therefore we are disabling the
+    // hack for the latest versions of FF.
     // 
     // Juan Pinzon
     
-    if (SC.browser.mozilla) {
+    if (parseFloat(SC.browser.mozilla)<1.9 && !this.get('useStaticLayout')) {
       var top, left, width, height, p, layer, element, textfield;
       
       // I'm caching in didCreateLayer this elements to improve perf
@@ -568,7 +706,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
         p = SC.$(layer).offset() ;
       
         // this is to take into account an styling issue.
-        if(element[0].tagName.toLowerCase()==="input") {
+        // this is counterproductive in FF >= 3.6
+        if(SC.browser.compareVersion(1,9,2) < 0 && 
+           element[0].tagName.toLowerCase()==="input") {
           top = p.top+this._topOffsetForFirefoxCursorFix; 
         }
         else top = p.top;
@@ -586,11 +726,32 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   },
   
   
+  /**
+    In Firefox, as of 3.6 -- including 3.0 and 3.5 -- for input fields only
+    (that is, not textarea elements), if the cursor is at the end of the
+    field, the "down" key will not result in a "keypress" event for the
+    document (only for the input element), although it will be bubbled up in
+    other contexts.  Since SproutCore's event dispatching requires the
+    document to see the event, we'll manually forward the event along.
+  */
+  _firefox_dispatch_keypress: function(evt) {
+    var selection = this.get('selection'),
+        value     = this.get('value'),
+        valueLen  = value ? value.length : 0,
+        responder;
+    
+    if (!selection  ||  ((selection.get('length') === 0  &&  (selection.get('start') === 0)  ||  selection.get('end') === valueLen))) {
+      responder = SC.RootResponder.responder;
+      responder.keypress.call(responder, evt);
+      evt.stopPropagation();
+    }
+  },
+  
+  
   _textField_selectionDidChange: function() {
     this.notifyPropertyChange('selection');
   },
 
-
   // ..........................................................
   // FIRST RESPONDER SUPPORT
   //
@@ -602,12 +763,13 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   /** @private */
   willBecomeKeyResponderFrom: function(keyView) {
     if(this.get('isVisibleInWindow')) {
-      this.$input()[0].focus();
-      
+      var inp = this.$input()[0];
+      try{ 
+        if(inp) inp.focus(); 
+      } 
+      catch(e){}
       if(!this._txtFieldMouseDown){
-        if(SC.browser.mozilla) this.invokeOnce(this._selectRootElement) ;
-        else if(SC.browser.safari) this.invokeLater(this._selectRootElement, 1) ; 
-        else this._selectRootElement();
+        this.invokeLast(this._selectRootElement) ;
       }
     }
   },
@@ -619,14 +781,19 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   // In IE, you can't modify functions on DOM elements so we need to wrap the
   // call to select() like this.
   _selectRootElement: function() {
-    this.$input()[0].select() ;
+    // make sure input element still exists, as a redraw could have remove it
+    // already
+    var inputElem = this.$input()[0];
+    if(inputElem) inputElem.select() ;
+    else this._textField_selectionDidChange();
   },
 
   // when we lose first responder, blur the text field if needed and show
   // the hint text if needed.
   /** @private */
   didLoseKeyResponderTo: function(keyView) {
-    this.$input()[0].blur() ;
+    var el = this.$input()[0];
+    if (el) el.blur();
   },
 
   parentViewDidResize: function() {
@@ -636,25 +803,27 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     sc_super();
   },
 
-
   /** @private
     Simply allow keyDown & keyUp to pass through to the default web browser
     implementation.
   */
   keyDown: function(evt) {
-    // handle return and escape.  this way they can be passed on to the
+    // Handle return and escape.  this way they can be passed on to the
     // responder chain.
-    if ((evt.which === 13) && !this.get('isTextArea')) return NO ;
-    if (evt.which === 27) return NO ;
+    // If the event is triggered by a return while entering IME input,
+    // don't got through this path.
+    var which = evt.which;
+    if ((which === 13 && !evt.isIMEInput) && !this.get('isTextArea')) return NO ;
+    if (which === 27) return NO ;
 
     // handle tab key
-    if (evt.which === 9) {
+    if (evt.which === 9 && this.get('defaultTabbingEnabled')) {
       var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
-      if(view) view.becomeFirstResponder();
+      if (view) view.becomeFirstResponder();
       else evt.allowDefault();
       return YES ; // handled
     }
-
+ 
     // validate keyDown...
     if (this.performValidateKeyDown(evt)) {
       this._isKeyDown = YES ;
@@ -662,37 +831,35 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     } else {
       evt.stop();
     }
-
+    
+    if (this.get('applyImmediately')) {
+      // We need this invokeLater as we need to get the value of the field
+      // once the event has been processed. I tried with invokeLast , but
+      // I guess the field doesn't repaint until js execution finishes and 
+      // therefore the field value doesn't update if we don't give it a break.
+      this.invokeLater(this.fieldValueDidChange,1); // notify change
+    }
     return YES;
   },
 
   keyUp: function(evt) {
-    
+    if(SC.browser.mozilla && evt.keyCode===13) this.fieldValueDidChange(); 
     // The caret/selection could have moved.  In some browsers, though, the
     // element's values won't be updated until after this event is finished
     // processing.
     this.notifyPropertyChange('selection');
-
-    if (this._isKeyDown) {
-      this.invokeLater(this.fieldValueDidChange, 1, YES); // notify change
-    }
     this._isKeyDown = NO;
     evt.allowDefault();
-
     return YES;
   },
 
   mouseDown: function(evt) {
+    var fieldValue = this.get('fieldValue'); // use 'fieldValue' since we want actual text
     this._txtFieldMouseDown=YES;
     if (!this.get('isEnabled')) {
       evt.stop();
       return YES;
-    } else if((this.value && this.value.length===0) || !this.value) {
-      this.$input()[0].focus();
-      return YES;
     } else {
-      // This fixes the double click issue in firefox
-      if(SC.browser.mozilla) this.$input()[0].focus();
       return sc_super();
     }
   },
@@ -703,25 +870,46 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     // element's values won't be updated until after this event is finished
     // processing.
     this.notifyPropertyChange('selection');
-
+    
     if (!this.get('isEnabled')) {
       evt.stop();
       return YES;
-    } else if((this.value && this.value.length===0) || !this.value) {
-      if(SC.browser.msie<8){
-        this.invokeLater(this.focusIE7, 1);
-      }else{
-        this.$input()[0].focus();
-      }
-      return YES;
-    } else return sc_super();
+    } 
+    return sc_super();
   },
-
-  focusIE7: function (){
-    this.$input()[0].focus();
+  
+  /**
+    Adds mouse wheel support for textareas.
+  */
+  mouseWheel: function(evt) {
+    evt.allowDefault();
+    return YES;
   },
 
+  /*
+    Allows text selection in IE. We block the IE only event selectStart to 
+    block text selection in all other views.
+  */
   selectStart: function(evt) {
     return YES;
-  }
-}) ;
+  },
+  
+  
+  /**
+    This function is to notify if the browser supports the placeholder attribute
+    or not. Currently is disabled as in webkit there is a bug where the color 
+    of the placeholder doesn't refresh all the time.
+  */
+  _supportsPlaceHolder: function(){
+    return SC.browser.safari && !this.get('isTextArea');
+  }.property('isTextArea').cacheable(),
+  
+  
+  valueObserver: function(){
+    // console.log('value observer');
+    var val = this.get('value');
+    if (val && val.length>0) this.set('hintON', NO);
+    else this.set('hintON', YES);
+  }.observes('value')
+  
+});