sproutcore 0.9.0

data/frameworks/sproutcore/views/select_field.js

@@ -0,0 +1,272 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/field') ;
+
+// SelectFieldView displays browser-native popup menu.  To use this view,
+// you should either bake into the HTML the preset list of options, or 
+// you can set the -objects property to an array of items to show.  The
+// value is current value of the select.
+SC.SelectFieldView = SC.FieldView.extend({
+
+ emptyElement: '<select></select>',
+ 
+ // set this property to an array of items that will form the menu
+ // you want to show.
+ objects: null,
+
+ // 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.
+ 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.
+ sortKey: null,
+
+ // 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.
+ valueKey: null,
+
+ // set this to non-null to place an empty option at the top of the menu.   
+ emptyName: null,
+
+ // if true, the empty name will be localized.
+ localize: false,
+
+ // 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.
+ validateMenuItem: function(itemValue, itemName) {
+   return true ;
+ },
+
+ // override this method to implement your own sorting of the menu. By
+ // default, menu items are sorted using the value shown.
+ sortObjects: function(objects) {
+   var nameKey = this.get('sortKey') || this.get('nameKey') ;
+   objects = objects.sort(function(a,b) {
+     if (nameKey) {
+       a = (a.get) ? a.get(nameKey) : a[nameKey] ;
+       b = (b.get) ? b.get(nameKey) : b[nameKey] ;
+     }
+     return (a<b) ? -1 : ((a>b) ? 1 : 0) ;
+   }) ;
+
+   return objects ;
+ },
+
+ // call this method to rebuild the menu manually.  Normally you should not
+ // need to do this since the menu will be rebuilt as its data changes.
+ rebuildMenu: function() {
+   this._rebuildMenu() ;
+ },
+ 
+ 
+ mouseDown: function(e)
+ {
+   e._stopWhenHandled = false;
+   return false;
+ },
+ 
+ 
+ // .......................................
+ // PRIVATE
+ //
+
+ // when fetching the raw value, convert back to an object if needed...
+ getFieldValue: function() {
+   var value = this.rootElement.value ; // get raw value...
+   var valueKey = this.get('valueKey') ;
+   var objects = this.get('objects') ;
+   
+   // Handle empty selection.
+   if (value == '***') {
+     value = null ;
+
+   // If no value key was set and there are objects then match back to an
+   // object.
+   } else if (value && objects) {
+     objects = Array.from(objects) ;
+     var loc = objects.length ;
+     var found = null ; // matching object goes here.
+     while(!found && (--loc >= 0)) {
+       var object = objects[loc] ;
+       
+       // 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] ;
+       ov = (object) ? ((object._guid) ? object._guid : object.toString()) : null ;
+       
+       // use this object value if it matches.
+       if (value == ov) found = object ;
+     }
+   }
+   
+   return value ;
+ },
+
+ // when setting the raw value, convert from object...
+ setFieldValue: function(nv) {
+   if (nv) {
+     nv = (nv._guid) ? nv._guid : nv.toString() ;
+   } else {
+     nv = "***" ;
+   }
+   if (this.rootElement.value != nv) this.rootElement.value = nv ;
+ },
+ 
+ // this method is called anytime the objects property or any of its member
+ // objects change.
+ _rebuildMenu: function() {     
+   // get list of objects.
+   var nameKey = this.get('nameKey') ;
+   var valueKey = this.get('valueKey') ;
+   var objects = this.get('objects') ;
+   var fieldValue = this.get('value') ;
+
+   // convert fieldValue to guid, if it is an object.
+   if (!valueKey && fieldValue) fieldValue = fieldValue._guid ;
+   if ((fieldValue == null) || (fieldValue == '')) fieldValue = '***' ;
+
+   if (objects) {
+     objects = Array.from(objects) ; // make array.
+     objects = this.sortObjects(objects) ; // sort'em.
+     var html = [] ;       
+ 
+     var emptyName = this.get('emptyName') ;
+     if (emptyName) {
+       if (this.get('localize')) emptyName = emptyName.loc() ;
+       html.push('<option value="***">%@</option>'.fmt(emptyName)) ;
+       html.push('<option disabled="disabled"></option>') ;
+     }
+ 
+     // generate option elements.
+     objects.each(function(object) {
+       if (object) {
+         
+         // either get the name from the object or convert object to string.
+         var name = (nameKey) ? ((object.get) ? object.get(nameKey) : object[nameKey]) : object.toString() ;
+
+         // get the value using the valueKey or the object if no valueKey.
+         // then convert to a string or use _guid if one of available.
+         var value = (valueKey) ? ((object.get) ? object.get(valueKey) : object[valueKey]) : object ;
+         if (value) value = (value._guid) ? value._guid : value.toString() ;
+         
+         // render HTML
+         var disable = (this.validateMenuItem && this.validateMenuItem(value, name)) ? '' : 'disabled="disabled" ' ;
+         html.push('<option %@value="%@">%@</option>'.fmt(disable,value,name)) ;
+     
+       // null value means separator.
+       } else {
+         html.push('<option disabled="disabled"></option>') ;
+       }
+     }.bind(this) );
+ 
+     // replace the contents of this HTML element.
+     this.update(html.join(""));
+     this.rootElement.value = fieldValue ;
+ 
+   } else {
+     this.set('value',null);
+   }
+ },
+
+ // object changes to the objects array of objects if possible.
+ _objectsObserver: function() {
+   if (!this._boundObserver) {
+     this._boundObserver = this._objectsItemObserver.bind(this) ;
+   }
+
+   if (this.didChangeFor('_objO','objects','nameKey','valueKey')) {
+     var loc ;
+     var objects = Array.from(this.get('objects')) ;
+     var func = this._boundObserver ;
+     
+     // stop observing old objects.
+     if (this._objects) {
+       loc = this._objects.length ;
+       while(--loc >= 0) {
+         var object = this._objects[loc] ;
+         if (object && object.removeObserver) {
+           if (this._nameKey && this._valueKey) {
+             object.removeObserver(this._nameKey, func) ;
+             object.removeObserver(this._valueKey, func) ;
+           } else {
+             object.removeObserver('*', func) ;
+           } // if (this._nameKey)
+         } // if (object &&...)
+       } // while(--loc)
+     } // if (this._objects)
+
+     // start observing new objects.
+     this._objects = objects ;
+     this._nameKey = this.get('nameKey') ;
+     this._valueKey = this.get('valueKey') ;
+     
+     if (this._objects) {
+       loc = this._objects.length ;
+       while(--loc >= 0) {
+         var object = this._objects[loc] ;
+         if (object && object.addObserver) {
+           if (this._nameKey && this._valueKey) {
+             object.addObserver(this._nameKey, func) ;
+             object.addObserver(this._valueKey, func) ;
+           } else {
+             object.addObserver('*', func) ;
+           } // if (this._nameKey)
+         } // if (object &&...)
+       } // while(--loc)
+     } // if (this._objects)
+  
+    this._rebuildMenu() ;
+   } // if (this.didChangeFor...)
+ }.observes('objects','nameKey','valueKey'),
+
+ // this is invoked anytime an item we are interested in in the menu changes
+ // rebuild the menu when this happens, but only one time.
+ _objectsItemObserver: function(item, key, value) {
+    if (item.didChangeFor(this._guid, key)) {
+      console.log('rebuildMenu') ;
+      this._rebuildMenu() ;
+    }
+ },
+
+
+
+  _fieldDidFocus: function()
+  {
+    var isFocused = this.get('isFocused');
+    if (!isFocused) this.set('isFocused', true);
+  },
+  _fieldDidBlur: function()
+  {
+    var isFocused = this.get('isFocused');
+    if (isFocused) this.set('isFocused', false);
+  },
+  _isFocusedObserver: function()
+  {
+    var isFocused = this.get('isFocused');
+    this.setClassName('focus', isFocused);
+  }.observes('isFocused'),
+
+
+  init: function()
+  {
+    arguments.callee.base.call(this);
+    this._rebuildMenu();
+    
+    var changeListener = this.fieldValueDidChange.bind(this,false);
+    Element.observe(this.rootElement, 'change', changeListener);
+
+    var focusListener = this._fieldDidFocus.bindAsEventListener(this);
+    Element.observe(this.rootElement, 'focus', focusListener);
+
+    var blurListener = this._fieldDidBlur.bindAsEventListener(this);
+    Element.observe(this.rootElement, 'blur', blurListener);
+  }
+ 
+});

data/frameworks/sproutcore/views/spinner.js

@@ -0,0 +1,11 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+
+// A SpinnerView can be used to show state when loading.
+SC.SpinnerView = SC.View.extend({
+  isVisibleBindingDefault: SC.Binding.Not
+}) ;

data/frameworks/sproutcore/views/tab.js

@@ -0,0 +1,126 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+require('views/container') ;
+
+/** @class
+
+  To use a TabView, just declare the views and buttons you want to manage
+  as outlets.  Then set the "nowShowing" property to the name of view.
+
+  View names comes from either the name of the view property or from the
+  view's 'tabId' property, if it has one.  Declare tabs by adding properties 
+  ending in 'Tab' and buttons ending in 'Button'
+  
+  @extends SC.ContainerView
+*/
+SC.TabView = SC.ContainerView.extend(
+  /** @scope SC.TabView.prototype */
+  {
+
+  /** 
+    set the tabId here that you to display minus the "Tab".  
+    
+    @type String
+  */  
+  nowShowing: '',
+  
+  /**
+    instantiate tabs lazily as they are accessed.
+    
+    If set to true, tabs will be instanted from the SC.page object when they
+    are first accessed.  If your tabs have complex content, using lazy tabs 
+    can dramatically improve page load performance.
+  
+    @type Boolean
+  */
+  lazyTabs: false,
+  
+  
+  // ...................................
+  // INTERNAL
+  //
+  
+  /** @private */
+  init: function() {
+    arguments.callee.base.call(this) ;
+    
+    // find outlets and build list of tabs and buttons.
+    var tabs = {} ;
+    var buttons = {} ;
+    var view = this ;
+    var loc = (this.outlets) ? this.outlets.length : 0 ;
+    while(--loc >= 0) {
+      var outlet = this.outlets[loc] ;
+      // look for outlets ending in 'Tab'
+      if (outlet.slice(outlet.length-3,outlet.length) == "Tab") { 
+        var key = outlet.slice(0,-3) ; // remove 'Tab' 
+        var tab = view.get(outlet) ; // find tab view
+        var button = view.get(key + 'Button') ; // find button view (opt)
+        if (tab) {
+          // the key is either computed from the property name or from tabId.
+          var tabId = tab.get('tabId') || key ;
+          tabs[tabId] = tab ;
+          if (button) buttons[tabId] = button ;          
+          
+          // also remove the tab from its parent view.
+          if (tab.removeFromParent) tab.removeFromParent() ;
+          
+        } // if (tab)
+      } // if (outlet.slice)
+    } // while
+    
+    this._tabs = tabs; this._buttons = buttons ;
+    this.nowShowingObserver() ; // swap in/out the appropriate views.
+  },
+
+  /** @private
+      swaps the views in and out. 
+  */
+  nowShowingObserver: function() {
+    var nowShowing = this.get('nowShowing') ;
+    if (nowShowing == this._oldNowShowing) return ; // nothing to do.
+    this._oldNowShowing = nowShowing ;
+    for(var tabId in this._tabs) {
+      var tab = this._tabs[tabId] ;
+      var button = this._buttons[tabId] ;
+      if (tabId == nowShowing) {
+        if (button) button.set('isSelected',true) ;
+      } else { 
+        if (tab) tab.set('isVisible',false) ;
+        if (button) button.set('isSelected',false) ;
+      }      
+    }
+    
+    var visibleTab = this._tabs[nowShowing] ;
+    
+    if (!visibleTab && this.get('lazyTabs')) {
+      this._tabs[nowShowing] = visibleTab = SC.page.get('%@Tab'.fmt(nowShowing)) ;
+    }
+    
+    this.set('content',visibleTab) ;
+    if (visibleTab) { visibleTab.set('isVisible',true); }
+    
+  }.observes('nowShowing'),
+  
+  /**
+    Used by SC.FormView to find child fields.
+    
+    The TabView removes its child views from the hierarchy on startup, which 
+    can prevent a view such as SC.FormView, that search their children for 
+    configuration information from working properly.  To work around this 
+    problem, SC.FormView and other views will use this method to get the child
+    views they should search instead of looking at childNodes directly.
+  
+    Note that if you use lazy tabs, form fields will not work because the tabs
+    are not instantiated until they are accessed.
+  */  
+  childNodesForFormField: function() {
+    return Object.values(this._tabs || {}) ;
+  }
+  
+}) ;
+

data/frameworks/sproutcore/views/text_field.js

@@ -0,0 +1,179 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/field') ;
+
+// A text field is an input element with type "text".  This view adds support
+// for hinted values, etc.
+SC.TextFieldView = SC.FieldView.extend({
+  
+  emptyElement: '<input type="text" value="" />',
+
+  // PROPERTIES
+  // set this property to the hinted value.
+  hint: null,
+  
+  // automatically set by text field if the hint is current showing.
+  isHintShowing: false,
+
+
+  // PRIVATE SUPPORT METHODS
+  init: function() {
+    
+    // compatibility...
+    if (this.hint == null) {
+      this.hint = this.rootElement.getAttribute('hint') ;
+    }
+
+    if (this.validator == null) {
+      this.validator = this.rootElement.getAttribute('validate') ;
+    }
+
+    arguments.callee.base.call(this) ;
+    
+    // observe important events for this field.
+    var focusListener = this._fieldDidFocus.bindAsEventListener(this) ;
+    Event.observe(this.rootElement, 'focus', focusListener) ;
+
+    var blurListener = this._fieldDidBlur.bindAsEventListener(this) ;
+    Event.observe(this.rootElement, 'blur', blurListener) ;
+
+    this._updateFieldHint() ;
+  },
+
+
+  // FOCUS AND BLUR EVENTS -
+  // These should be hooked into the firstResponder system..
+  _fieldDidFocus: function() {
+    if (!this._isFocused) {
+      this._isFocused = true ;
+      this.becomeFirstResponder() ;
+    }
+  },
+  
+  _fieldDidBlur: function() {
+    if (this._isFocused) {
+      this._isFocused = false ;
+      this.resignFirstResponder() ;
+    }
+  },
+  
+  acceptsFirstResponder: function() {
+    return this.get('isEnabled');
+  }.property('isEnabled'),
+  
+  // First Responder
+  // 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.
+  didBecomeFirstResponder: function() {
+
+    // focus the text field.
+    if (!this._isFocused) {
+      this._isFocused = true ;
+      if (this.get('isVisibleInWindow')) {
+        this.rootElement.focus();
+        this.rootElement.select.bind(this.rootElement).delay(0.05);
+      }
+    }
+
+    // hide the hint text if it is showing.
+    this._updateFieldHint() ;
+  },
+
+  // when we lose first responder, blur the text field if needed and show
+  // the hint text if needed.
+  willLoseFirstResponder: function() {
+    
+    if (this._isFocused) {
+      this._isFocused = false ;
+      return this.rootElement.blur() ;
+    }
+    
+    this._value = this.rootElement.value ;
+    this.fieldValueDidChange() ;
+    this._updateFieldHint() ;
+  },
+  
+  _isFocused: false,
+  
+  _updateFieldHint: function() {
+    
+    // show the hint if:
+    // - flag is true
+    // - hint != null or empty.
+    // - this._value = null or empty.
+    var hint = this.get('hint') ;
+    var showHint = !!(!this._isFocused && ((this._value == null) || this._value == '') && (hint)) ;
+    
+    this.setClassName('show-hint', showHint);
+    this.rootElement.value = (showHint) ? hint : (this._value || '') ;
+    this.set('isHintShowing', showHint);
+  },
+  
+  // field value updates...
+  getFieldValue: function() {
+    return this._value ;
+  },
+  
+  setFieldValue: function(value) {
+    if (this._value == value) return ;
+    this._value = value ;
+    this._updateFieldHint() ;
+  },
+  
+  mouseDown: function(e)
+  {
+    e._stopWhenHandled = false;
+    return false;
+  },
+  
+  // trap key-press events and notify as needed.
+  keyDown: function(evt) {
+    if (this._value != this.rootElement.value) {
+      this._value = this.rootElement.value ;
+      this.fieldValueDidChange(true) ;
+    }
+    
+    return this.interpretKeyEvents(evt); // start bubbling key events...
+    //return false;
+  },
+  
+  keyUp: function() {
+    if (this._value != this.rootElement.value) {
+      this._value = this.rootElement.value ;
+      this.fieldValueDidChange(true) ;
+    }
+  },
+
+  // if make a text field first responder before the view becomes visible,
+  // then focus the text field when it does become visible.
+  _focusOnVisible: function() {
+    if (this.get('isVisibleInWindow') && this._isFocused) {
+      this.rootElement.focus() ;
+      this.rootElement.select.bind(this.rootElement).delay(0.05);
+    }  
+  }.observes('isVisibleInWindow'),
+  
+  // THESE ARE DUMMY IMPLEMENTATIONS OF THE REPONDER METHODS FOR KEYBOARD
+  // ACTIONS HANDLED BY THE BROWSER.  This avoids having the responder 
+  // bubble up these items.
+  deleteBackward: function(evt) { evt._stopWhenHandled = false; return true; },
+  deleteForward: function(evt) { evt._stopWhenHandled = false; return true; },
+  moveLeft: function(evt) { evt._stopWhenHandled = false; return true; },
+  moveRight: function(evt) { evt._stopWhenHandled = false; return true; },
+  moveUp: function(evt) { evt._stopWhenHandled = false; return true; },
+  moveDown: function(evt) { evt._stopWhenHandled = false; return true; },
+  moveLeftAndModifySelection: function(evt) { evt._stopWhenHandled = false; return true; },
+  moveRightAndModifySelection: function(evt) { evt._stopWhenHandled = false; return true; },
+  moveUpAndModifySelection: function(evt) { evt._stopWhenHandled = false; return true; },
+  moveDownAndModifySelection: function(evt) { evt._stopWhenHandled = false; return true; },
+  moveToBeginningOfDocument: function(evt) { evt._stopWhenHandled = false; return true; },
+  moveToEndOfDocument: function(evt) { evt._stopWhenHandled = false; return true; },
+  selectAll: function(evt) { evt._stopWhenHandled = false; return true; }
+  
+}) ;

data/frameworks/sproutcore/views/textarea_field.js

@@ -0,0 +1,14 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/text_field') ;
+
+SC.TextareaFieldView = SC.TextFieldView.extend({
+  
+  emptyElement: '<textarea></textarea>',
+
+  insertNewline: function(evt) { evt._stopWhenHandled = false; return true; }
+
+});

data/frameworks/sproutcore/views/toolbar.js

@@ -0,0 +1,29 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+// A menu is not a view exactly, but you can use it to bundle together 
+// buttons and then validate them as a whole.
+SC.Toolbar = SC.View.extend({
+  
+  // override with an array of outlet functions.
+  buttons: [],
+  
+  // to to false an all the buttons will be disabled also.
+  isEnabled: true,
+  
+  init: function() {
+    arguments.callee.base.call(this) ;
+    var toolbar = this ;
+    this.buttons = this.buttons.map(function(button) {
+      return button(toolbar) ; // get outlet.
+    }) ;
+  },
+  
+  isEnabledObserver: function() {
+    var e = this.get('isEnabled') ;
+    this.get('buttons').each(function(button) { button.set('isEnabled',e); }) ;
+  }.observes('isEnabled')
+  
+}) ;