sproutit-sproutcore 1.0.20090721145236 → 1.0.20090721145251

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

@@ -0,0 +1,271 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+
+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';
+
+/**
+  @class
+  
+  Displays a static string of text.
+  
+  You use a label view anytime you need to display a static string of text 
+  or to display text that may need to be edited using only an inline control.
+  
+  @extends SC.View
+  @extends SC.Control
+  @extends SC.InlineEditorDelegate
+  @since SproutCore 1.0
+*/
+SC.LabelView = SC.View.extend(SC.Control,
+/** @scope SC.LabelView.prototype */ {
+
+  classNames: ['sc-label-view'],
+
+  /**
+    Specify the font weight for this.  You may pass SC.REGULAR_WEIGHT, or SC.BOLD_WEIGHT.
+  */
+  fontWeight: SC.REGULAR_WEIGHT,
+  
+  /**
+    If true, value will be escaped to avoid scripting attacks.
+    
+    This is a default value that can be overridden by the
+    settings on the owner view.
+  */
+  escapeHTML: true,
+  escapeHTMLBindingDefault: SC.Binding.oneWay().bool(),
+
+  /**
+    If true, then the value will be localized.
+    
+    This is a default default that can be overidden by the
+    settings in the owner view.
+  */
+  localize: false,
+  localizeBindingDefault: SC.Binding.oneWay().bool(),
+  
+  /**
+    Set this to a validator or to a function and the value
+    will be passed through it before being set.
+    
+    This is a default default that can be overidden by the
+    settings in the owner view.
+  */
+  formatter: null,
+
+  /** 
+    The value of the label.
+    
+    You may also set the value using a content object and a contentValueKey.
+    
+    @field {String}
+  */
+  value: '',
+  
+  /**
+    An optional icon to display to the left of the label.  Set this value
+    to either a CSS class name (for spriting) or an image URL.
+  */
+  icon: null,
+  
+  /**
+    Set the alignment of the label view.
+  */
+  textAlign: SC.ALIGN_LEFT,
+  
+  /**
+    [RO] The value that will actually be displayed.
+    
+    This property is dynamically computed by applying localization, 
+    string conversion and other normalization utilities.
+    
+    @field
+  */
+  displayValue: function() {
+    var value = this.get('value') ;
+    
+    // 1. apply the formatter
+    var formatter = this.getDelegateProperty('formatter', this.displayDelegate) ;
+    if (formatter) {
+      var formattedValue = (SC.typeOf(formatter) === SC.T_FUNCTION) ? formatter(value, this) : formatter.fieldValueForObject(value, this) ;
+      if (!SC.none(formattedValue)) value = formattedValue ;
+    }
+    
+    // 2. If the returned value is an array, convert items to strings and 
+    // join with commas.
+    if (SC.typeOf(value) === SC.T_ARRAY) {
+      var ary = [];
+      for(var idx=0;idx<value.get('length');idx++) {
+        var x = value.objectAt(idx) ;
+        if (!SC.none(x) && x.toString) x = x.toString() ;
+        ary.push(x) ;
+      }
+      value = ary.join(',') ;
+    }
+    
+    // 3. If value is not a string, convert to string. (handles 0)
+    if (!SC.none(value) && value.toString) value = value.toString() ;
+    
+    // 4. Localize
+    if (value && this.getDelegateProperty('localize', this.displayDelegate)) value = value.loc() ;
+
+    // 5. escapeHTML if needed
+    if (this.get('escapeHTML')) value = SC.RenderContext.escapeHTML(value);
+    
+    return value ;
+  }.property('value', 'localize', 'formatter', 'escapeHTML').cacheable(),
+  
+  /**
+    Enables editing using the inline editor.
+  */
+  isEditable: NO,
+  isEditableBindingDefault: SC.Binding.bool(),
+
+  /**
+    YES if currently editing label view.
+  */
+  isEditing: NO,
+  
+  /**
+    Validator to use during inline editing.
+    
+    If you have set isEditing to YES, then any validator you set on this
+    property will be used when the label view is put into edit mode.
+    
+    @type {SC.Validator}
+  */
+  validator: null,
+
+  /**
+    Event dispatcher callback.
+    If isEditable is set to true, opens the inline text editor view.
+
+    @param {DOMMouseEvent} evt DOM event
+    
+  */
+  doubleClick: function( evt ) { return this.beginEditing(); },
+  
+  
+  /**
+    Opens the inline text editor (closing it if it was already open for 
+    another view).
+    
+    @return {Boolean} YES if did begin editing
+  */
+  beginEditing: function() {
+    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) ;
+    f.width=frameTemp.width;
+    f.height=frameTemp.height;
+    SC.InlineTextFieldView.beginEditing({
+      frame: f,
+      delegate: this,
+      exampleElement: el,
+      value: value, 
+      multiline: NO, 
+      isCollection: NO,
+      validator: this.get('validator')
+    });
+  },
+  
+  /**
+    Cancels the current inline editor and then exits editor. 
+    
+    @return {Boolean} NO if the editor could not exit.
+  */
+  discardEditing: function() {
+    if (!this.get('isEditing')) return YES ;
+    return SC.InlineTextFieldView.discardEditing() ;
+  },
+  
+  /**
+    Commits current inline editor and then exits editor.
+    
+    @return {Boolean} NO if the editor could not exit
+  */
+  commitEditing: function() {
+    if (!this.get('isEditing')) return YES ;
+    return SC.InlineTextFieldView.commitEditing() ;
+  },
+
+  /** @private
+    Set editing to true so edits will no longer be allowed.
+  */
+  inlineEditorWillBeginEditing: function(inlineEditor) {
+    this.set('isEditing', YES);
+  },
+
+  /** @private 
+    Hide the label view while the inline editor covers it.
+  */
+  inlineEditorDidBeginEditing: function(inlineEditor) {
+    this._oldOpacity = this.$().css('opacity') ;
+    this.$().css('opacity', 0.0);
+  },
+
+  /** @private
+    Could check with a validator someday...
+  */
+  inlineEditorShouldEndEditing: function(inlineEditor, finalValue) {
+    return YES ;
+  },
+
+  /** @private
+    Update the field value and make it visible again.
+  */
+  inlineEditorDidEndEditing: function(inlineEditor, finalValue) {
+    this.setIfChanged('value', finalValue) ;
+    this.$().css('opacity', this._oldOpacity);
+    this._oldOpacity = null ;
+    this.set('isEditing', NO) ;
+  },
+
+  displayProperties: 'displayValue textAlign fontWeight icon'.w(),
+  
+  _TEMPORARY_CLASS_HASH: {},
+  
+  render: function(context, firstTime) {
+    var value = this.get('displayValue');
+    var icon = this.get('icon') ;
+    
+    // add icon if needed
+    if (icon) {
+      var url = (icon.indexOf('/')>=0) ? icon : static_url('blank');
+      var className = (url === icon) ? '' : icon ;
+      icon = '<img src="%@" alt="" class="icon %@" />'.fmt(url, className) ;
+      context.push(icon);
+    }
+    
+    // add display value
+    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);
+  }
+  
+});

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

@@ -0,0 +1,257 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+
+
+sc_require('views/field') ;
+/**
+  @class
+  
+  A text field is an input element with type "text".  This view adds support
+  for hinted values, etc.
+  
+  @extends SC.FieldView
+  @extends SC.Editable
+  @author Charles Jolley
+*/
+SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
+/** @scope SC.TextFieldView.prototype */ {
+  
+  tagName: 'label',
+  classNames: ['sc-text-field-view'],
+  
+  // ..........................................................
+  // PROPERTIES
+  // 
+  
+  /**
+    If YES, the field will hide its text from display. The default value is NO.
+  */
+  isPassword: NO,
+  
+  /**
+    The hint to display while the field is not active.  Can be a loc key.
+  */  
+  hint: null,
+  
+  /**
+    If YES then the text field is currently editing. 
+  */
+  isEditing: NO,
+
+  
+  /** isEditable maps to isEnabled with a TextField. */
+  isEditable: function() {
+    return this.get('isEnabled') ;
+  }.property('isEnabled').cacheable(),
+    
+  // ..........................................................
+  // INTERNAL SUPPORT
+  // 
+  
+  displayProperties: 'hint fieldValue isEditing'.w(),
+  
+  render: function(context, firstTime) {
+    
+    var disabled = this.get('isEnabled') ? '' : 'disabled="disabled"';
+    var name = SC.guidFor(this);
+    var hint = this.get('hint');
+    var type = this.get('isPassword') ? 'password' : 'text';
+
+    // always have at least an empty string
+    var v = this.get('fieldValue');
+    if (SC.none(v)) v = ''; 
+    
+    // update layer classes always
+    context.setClass('not-empty', v.length>0);
+    
+    if (firstTime) {
+      context.push('<span class="sc-hint">', hint, '</span>');
+      if(this.get('isTextArea')){
+          context.push('<textarea name="%@" %@ value="%@"></textarea>'.fmt(name, disabled, v));
+      }else{
+        context.push('<input type="%@" name="%@" %@ value="%@"></input>'.fmt(type, name, disabled, v));
+      }
+    // 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
+    } else {
+      if (hint !== this._textField_currentHint) {
+        this._textField_currentHint = hint ;
+        this.$('.sc-hint').text(hint);
+      }  
+      if(!this.get('isEnabled')){
+        this.$field()[0].disabled='true';
+      }else{
+        this.$field()[0].disabled=null;
+      }
+              
+    }
+  },
+
+  // more efficient input
+  $field: function() { 
+    if(this.get('isTextArea')){
+      return this.$('textarea'); 
+    }else{
+      return this.$('input');
+    }
+  },
+  
+  // ..........................................................
+  // HANDLE NATIVE CONTROL EVENTS
+  // 
+  
+  didCreateLayer: function() {
+    sc_super();
+
+    var input = this.$field();
+    SC.Event.add(input, 'focus', this, this._textField_fieldDidFocus);
+    SC.Event.add(input, 'blur',  this, this._textField_fieldDidBlur);
+  },
+  
+  willDestroyLayer: function() {
+    sc_super();
+    
+    var input = this.$field();
+    SC.Event.remove(input, 'focus', this, this._textField_fieldDidFocus);
+    SC.Event.remove(input, 'blur',  this, this._textField_fieldDidBlur);
+  },
+  
+  _textField_fieldDidFocus: function(evt) {
+    SC.RunLoop.begin();
+    this.fieldDidFocus();
+    SC.RunLoop.end();
+  },
+
+  _textField_fieldDidBlur: function(evt) {
+    SC.RunLoop.begin();
+    this.fieldDidBlur();
+    SC.RunLoop.end();
+  },
+  
+  fieldDidFocus: function(evt) {
+    if (!this._isFocused) {
+      this._isFocused = YES ;
+      this._applyFirefoxCursorFix();
+      this.beginEditing();
+    }
+  },
+  
+  fieldDidBlur: function() {
+    if (this._isFocused) {
+      this._isFocused = NO ;
+      this._removeFirefoxCursorFix();
+      this.commitEditing();
+    }
+  },
+
+  _applyFirefoxCursorFix: function() {
+    if (SC.browser.mozilla) {
+      var layer = this.get('layer');
+      var p = SC.viewportOffset(this.get('layer')) ;
+      var top    = p.y, 
+          left   = p.x, 
+          width  = layer.offsetWidth, 
+          height = layer.offsetHeight ;
+          
+      top -= 2; 
+      left -= 2;  
+      
+      var style = 'position: fixed; top: %@px; left: %@px; width: %@px; height: %@px;'.fmt(top, left, width, height) ;
+      this.$field().attr('style', style) ;
+    }
+  },
+
+  _removeFirefoxCursorFix: function() {
+    if (SC.browser.mozilla) this.$field().attr('style', '') ;
+  },
+  
+  /** tied to the isEnabled state */
+  acceptsFirstResponder: function() {
+    return this.get('isEnabled');
+  }.property('isEnabled'),
+    
+  // ..........................................................
+  // FIRST RESPONDER SUPPORT
+  // 
+  // When we become first responder, make sure the field gets focus and
+  // the hint value is hidden if needed.
+
+  // when we become first responder, focus the text field if needed and
+  // hide the hint text.
+  /** @private */
+  willBecomeKeyResponderFrom: function(keyView) {
+    // focus the text field.
+    if (!this._isFocused) {
+      this._isFocused = YES ;
+      if (this.get('isVisibleInWindow')) {
+        this.$field().get(0).focus();
+        this.invokeOnce(this._selectRootElement) ;
+      }
+    }
+  },
+  
+  // In IE, you can't modify functions on DOM elements so we need to wrap the 
+  // call to select() like this.
+  _selectRootElement: function() {
+    this.$field()[0].select() ;
+  },
+  
+  // when we lose first responder, blur the text field if needed and show
+  // the hint text if needed.
+  /** @private */
+  didLoseKeyResponderTo: function(keyView) {
+    if (this._isFocused) {
+      this._isFocused = NO ;
+      this.$field().get(0).blur() ;
+    } else {
+      this.fieldValueDidChange() ;
+    }
+  },
+  
+  _isFocused: false,
+  
+  /** @private
+    Simply allow keyDown & keyUp to pass through to the default web browser
+    implementation.
+  */
+  keyDown: function(evt) { 
+    
+    // validate keyDown...
+    if (this.performValidateKeyDown(evt)) {
+      this._isKeyDown = YES ;
+      evt.allowDefault(); 
+    } else {
+      evt.stop();
+    }
+    
+    return YES; 
+  },
+  
+  keyUp: function(evt) { 
+    if (this._isKeyDown) {
+      this.invokeLater(this.fieldValueDidChange, 1, YES); // notify change
+    }
+    this._isKeyDown = NO;
+    evt.allowDefault(); 
+    return YES; 
+  },
+  
+  mouseDown: function(evt) {
+    if (!this.get('isEnabled')) {
+      evt.stop();
+      return YES;
+    } else return sc_super();
+  },
+
+  mouseUp: function(evt) {
+    if (!this.get('isEnabled')) {
+      evt.stop();
+      return YES;
+    } else return sc_super();
+  }
+  
+}) ;