sproutcore 0.9.0

data/frameworks/sproutcore/views/popup_menu.js

@@ -0,0 +1,137 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+
+// This is a basic popup menu. You can show the popup menu by calling the 
+// view's popup() method.  Pass in the root element and event so that is can
+// be positioned.
+SC.PopupMenuView = SC.View.extend({
+  emptyElement: "<ul></ul>",
+  
+  acceptsFirstResponder: true,
+
+
+  keyDown: function(evt)
+  {
+    return this.interpretKeyEvents(evt);
+  },
+
+  // interpretKeyEvents callbacks...
+  cancel: function()
+  {
+    this.set('currentSelectedMenuItem', null);
+    this.set('isVisible', false);
+  },
+  moveUp: function()
+  {
+    this.selectPreviousMenuItem();
+  },
+  moveDown: function()
+  {
+    this.selectNextMenuItem();
+  },
+  
+  _currentSelectedMenuItem: null,
+  currentSelectedMenuItem: function( key, value )
+  {
+    if (value !== undefined)
+    {
+      if (this._currentSelectedMenuItem) this._currentSelectedMenuItem.set('isDefault', false);
+      this._currentSelectedMenuItem = value;
+      if (this._currentSelectedMenuItem) this._currentSelectedMenuItem.set('isDefault', true);
+    }
+    return this._currentSelectedMenuItem;
+  }.property(),
+  
+  selectPreviousMenuItem: function()
+  {
+    var item = this.previousValidMenuItem();
+    if (!item) return false;
+    this.set('currentSelectedMenuItem', item);
+  },
+  
+  selectNextMenuItem: function()
+  {
+    var item = this.nextValidMenuItem();
+    if (!item) return false;
+    this.set('currentSelectedMenuItem', item);
+  },
+  
+  previousValidMenuItem: function()
+  {
+    return this._validMenuItemInDirection('previousSibling', 'lastChild');
+  },
+  nextValidMenuItem: function()
+  {
+    return this._validMenuItemInDirection('nextSibling', 'firstChild');
+  },
+  _validMenuItemInDirection: function( direction, begin )
+  {
+    var curr = this.get('currentSelectedMenuItem');
+    var view = curr ? curr.get(direction) : this.get(begin);
+    if (!view) return null;
+    do {
+      if (view.get('isEnabled')) return view;
+    } while (view = view.get(direction));
+    return null;
+  },
+  
+  
+  _show: function()
+  {
+    // clear out any previously used selection value...
+    this.set('currentSelectedMenuItem', null);
+
+    var menuItems = this.get('childNodes');
+    for (var i=0, n=menuItems.length; i < n; i++)
+    {
+      // for each menu item, get the action that it performs and the current target for that action
+      var sender = menuItems[i];
+
+      // old function style actions... skip validating and let them be
+      if (sender._hasLegacyActionHandler()) continue;
+
+      var action = sender.get('action');
+      var target = SC.app.targetForAction(action, sender.get('target'), sender);
+      
+      //console.log( "action: %s, target: %o", action, target );
+      
+      // found a target and the target validates, menu item is enabled if the validator returns true
+      if (target && target.respondsTo('validateMenuItem')) sender.set('isEnabled', target.validateMenuItem(sender));
+      // found a target and it chooses not to validate, menu item is enabled
+      if (target && !target.respondsTo('validateMenuItem')) sender.set('isEnabled', true);
+      // unable to resolve a target for this action, therefor disable the menu item
+      if (!target) sender.set('isEnabled', false);
+    }
+    // call the superclasses _show method to make the menu visible
+    arguments.callee.base.apply(this, arguments);
+  },
+  
+  resizeWithOldParentSize: function() {
+    
+    // loop through child views (which should be menu items), and get their
+    // required widths.  Use the maximum returned width.
+    var requiredWidth = 0;
+    var child = this.get('firstChild') ;
+    while(child) {
+      var w = (child.computedRequiredWidth) ? child.computedRequiredWidth():0;
+      if (w > requiredWidth) requiredWidth = w ;
+      child = child.get('nextSibling') ;
+    }
+    
+    // loop through children again, set their widths to the required with.
+    var size = { width: requiredWidth } ;
+    var child = this.get('firstChild') ;
+    while(child) {
+      child.set('size',size) ;
+      child = child.get('nextSibling') ;
+    }
+    
+    // set this view to the same size.
+    this.set('size',size) ;
+  }
+  
+});

data/frameworks/sproutcore/views/progress.js

@@ -0,0 +1,100 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+
+// ProgressView displays a progress bar.  It does this mostly through CSS classes
+// so that you can style them however you want.  A progress bar must have the
+// following structure:
+//
+// <div class="outer progress"><div class="inner"></div></div>
+//
+// The outer can form the boundary of the bar while the inner will be adjusted 
+// to fit the percentage of the progress.
+//
+// Style the progress bar with the following CSS classes:
+//
+// .progress.indeterminate = to show an indeterminate progress. inner will hide.
+// .progress.disabled = show as disabled.
+
+SC.ProgressView = SC.View.extend({
+  
+  // ........................................
+  // PROPERTIES
+  //
+  
+  minimum: 0, // the minimum value of the progress 
+  maximum: 1.0, // the maximum value of the progress bar.
+
+  // 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 it
+  // indeterminate.
+  value: 0.50,
+  valueBindingDefault: SC.Binding.SingleNotEmpty,
+  
+  // set to true if the item in progress is indeterminate.  This may be overridden
+  // by the actual value.
+  isIndeterminate: function(key,value) {
+    if (value !== undefined) {
+      this._isIndeterminate = value ;
+    }
+    return this._isIndeterminate && (this.value != SC.Binding.EMPTY_PLACEHOLDER) ;
+  }.property(),
+  
+  // set to false to disable the progress bar
+  isEnabled: function(key, value) {
+    if (value !== undefined) {
+      this._isEnabled = value ;
+    }
+    return this._isEnabled && (this.value != SC.Binding.MULTIPLE_PLACEHOLDER) ;
+  }.property(),
+  
+  _isIndeterminate: false, _isEnabled: true,
+  
+  // ........................................
+  // STRUCTURE
+  //
+  
+  emptyElement: '<div class="progress outer"><div class="outer-head"></div><div class="inner"><div class="inner-head"></div><div class="inner-tail"></div></div><div class="outer-tail"></div></div>',
+  
+  outlets: ['innerView'],
+  innerView: SC.View.outletFor('.inner?'),
+  
+  // ........................................
+  // INTERNAL SUPPORT
+  //
+  
+  propertyObserver: function(observing,target,key,value) {    
+    // collect new settings.
+    if (['value','minimum','maximum','isIndeterminate','isEnabled'].include(key)) {
+      var isIndeterminate = this.get('isIndeterminate') ;
+      var isEnabled = this.get('isEnabled') ;
+      
+      Element.setClassName(this,'indeterminate',isIndeterminate) ;
+      Element.setClassName(this,'disabled',!isEnabled) ;
+      
+      // compute value
+      var value ;
+      if (isIndeterminate || !isEnabled) {
+        value = 0.0 ;
+      } else {
+        var minimum = this.get('minimum') || 0.0 ;
+        var maximum = this.get('maximum') || 1.0 ;
+        value = this.get('value') || 0.0 ;
+        value = (value - minimum) / (maximum - minimum) ; 
+        if (value > 1.0) value = 1.0 ;
+      }
+      value = value * 100 ;
+      if (this.innerView) this.innerView.setStyle({ width: (value + '%') }) ;
+    }
+  }
+}) ;
+
+
+
+
+
+
+

data/frameworks/sproutcore/views/radio_field.js

@@ -0,0 +1,107 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/field') ;
+
+// A RadioFieldView can be used to wrap a series of radio inputs.  The value
+// of this field will be the selected radio.  To use this, you really need to
+// provide some preformatted HTML that already contains the radio buttons with
+// matching name attributes.  If you use the form_view helpers, this will be
+// handled for you.
+SC.RadioFieldView = SC.FieldView.extend({
+  
+  emptyElement: '<div></div>',
+  
+  // RO - returns the list of values allowed by these radio buttons.
+  values: function() {
+    if (!this._fields) return [] ;
+    return Object.keys(this._fields) ;
+  }.property(),
+  
+  // If you would like your radio buttons to map to actual object values,
+  // then set this to a hash with keys matching values found in the radio
+  // buttons.
+  objects: null,
+  
+  // INTERNAL SUPPORT METHODS
+  setFieldValue: function(value) {
+    if (!this._fields) return ;
+    
+    // map object value to radio button value if set.
+    var objects = this.get('objects') ;
+    if (objects) {
+      for(var key in objects) {
+        if (!objects.hasOwnProperty(key)) continue ;
+        if (objects[key] == value) {
+          value = key ; break ;
+        }
+      }
+    }
+    
+    // set value.
+    var field = this._fields[value] ;
+    if (field) {
+      field.checked = true ;
+    } else {
+      for(var key in this._fields) {
+        if (!this._fields.hasOwnProperty(key)) continue ;
+        this._fields[key].checked = false ;
+      }
+    }
+  },
+  
+  getFieldValue: function() {
+    if (!this._fields) return null;
+
+    var ret = null;
+    for(var key in this._fields) {
+      if (!this._fields.hasOwnProperty(key)) continue ;
+      if (this._fields[key].checked == true) {
+        ret = key ; break ;
+      } ;
+    }
+    
+    // map to object value if set.
+    var objects = this.get('objects') ;
+    if (objects && ret) ret = objects[ret] ;
+    return ret ;
+  },
+  
+  enableField: function() {
+    if (!this._fields) return ;
+    for(var key in this._fields) {
+      if (!this._fields.hasOwnProperty(key)) continue ;
+      Form.Element.enable(this._fields[key]) ;
+    }
+  },
+
+  // override to disable editing of this field.
+  disableField: function() {
+    if (!this._fields) return ;
+    for(var key in this._fields) {
+      if (!this._fields.hasOwnProperty(key)) continue ;
+      Form.Element.disable(this._fields[key]) ;
+    }
+  },
+  
+  init: function() {
+    arguments.callee.base.apply(this,arguments) ;
+    
+    // find all inputs.
+    this._fields = {} ;
+    
+    var inputFields = this.$$tag('input') ;
+    var f = this.fieldValueDidChange.bind(this, false) ;
+    var loc = inputFields.length ;
+  
+    this._fields = {} ;
+    while(--loc >= 0) {
+      var field = inputFields[loc] ;
+      this._fields[field.value] = field ;
+      Event.observe(field,'change', f) ;
+    }
+  }
+  
+}) ;

data/frameworks/sproutcore/views/radio_group.js

@@ -0,0 +1,48 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+
+// RadioGroupView manages a collection of buttons as a single value.  To 
+// use this view, just assign your buttons as outlets. This will use the
+// toggleOnValue you have already set.
+SC.RadioGroupView = SC.View.extend({
+   
+   // this is the current value or values of the radio group view.  The
+   // items in the radio group will be selected based on this value.
+   value: null,
+   
+   // enable/disable the views in this group view.
+   isEnabled: true,
+
+   // PRIVATE METHODS
+   init: function() {
+     arguments.callee.base.apply(this, arguments) ;
+     
+     // find the list of buttons to update and set them up.
+     var loc = this.outlets.length ;
+     var ret = [] ;
+     var valuePropertyPath = [this,'value'];
+     while(--loc >= 0) {
+       var key = this.outlets[loc] ;
+       var button = this[key] ;
+       if (button && (button.toggleOnValue !== undefined)) {
+         button.bind('value', valuePropertyPath) ;
+         ret.push(button);
+       }
+     }
+     this._radioButtons = ret ;
+   },
+
+   // forward changes to the isEnabled property to children.
+   _isEnabledObserver: function() {
+     var newFlag = this.get('isEnabled') ;
+     if (!this.didChangeFor('_isEnabled','isEnabled')) return ;
+     if (this.radioButtons) {
+       this.radioButtons.invoke('set','isEnabled',newFlag) ;
+     }
+   }.observes('isEnabled')   
+   
+}) ; 

data/frameworks/sproutcore/views/segmented.js

@@ -0,0 +1,80 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+
+// SegmentView shows an array of buttons that can have mutually exclusive
+// select states.  You can change the value property to the state you
+// want to reflect and a button with the matching name 'xxxButton' will have
+// its select state set.
+//
+// Also, on configure, if the buttons in the segment view do not have actions
+// set, then the button will be configured to change the select state.
+SC.SegmentedView = SC.View.extend({
+  
+  value: null, // set to the currently value button.
+
+  segments: null, // contains the array of buttons after init.
+  
+  // changes all buttons to enabled/disabled.  You can also change buttons
+  // individually.
+  isEnabled: true, 
+  
+  // if true, clicking on a button again will deselect it (using the
+  // standard action)
+  allowsEmptySelection: false,  
+
+  init: function() {
+    arguments.callee.base.call(this) ;
+    
+    // find all segment outlets.  If they don't have any action already, set 
+    // them up.
+    if (!this.segments) this.segments = this.outlets.slice() ;
+    var view = this ;
+    this.segments.each(function(key) {
+      var seg = view[key] ;
+      var selectKey = key.slice(0,-6) ;
+      if (seg && (seg.action == SC.ButtonView.prototype.action)) seg.action = function() {
+        if (this.owner.get('allowsEmptySelection')) {
+          newKey = (this.owner.get('value') == selectKey) ? null : selectKey;
+        } else newKey = selectKey;
+        this.owner.set('value',newKey) ;
+      } ;
+    }) ;
+    
+    this._enabledObserver() ;
+    this._valueObserver() ;
+  },
+  
+  // OBSERVERS
+  _valueObserver: function() {
+    var value = this.get('value') ;
+    if (value != this._lastSelected) {
+      this._lastSelected = value ;
+      var view = this ;
+      this.segments.each(function(key) {
+        var isSelected = (value) ? (key.slice(0,-6) == value) : false;
+        var button = view[key] ;
+        if (button) button.set('isSelected',isSelected) ;
+      }) ;
+    }
+  }.observes('value'),
+  
+  _enabledObserver: function() {
+    var isEnabled = this.get('isEnabled') ;
+    if (isEnabled != this._lastEnabled) {
+      var view = this ;
+      this.segments.each(function(key) {
+        view[key].set('isEnabled',isEnabled) ;
+      }) ;
+    }
+  }.observes('isEnabled')
+  
+}) ;
+
+
+
+
+