sproutcore 0.9.1 → 0.9.2

data/frameworks/sproutcore/views/radio_group.js

@@ -1,6 +1,6 @@
 // ========================================================================
 // SproutCore
-// copyright 2006-2007 Sprout Systems, Inc.
+// copyright 2006-2008 Sprout Systems, Inc.
 // ========================================================================
 
 require('views/view') ;

data/frameworks/sproutcore/views/scroll.js

@@ -1,34 +1,74 @@
 // ==========================================================================
-// Sproutcore.ScrollView
+// SC.ScrollView
 // ==========================================================================
 
+require('mixins/scrollable') ;
 require('views/container') ;
 
-/** @class
+/** 
+  @class
 
-  The scroll view is used throughout SproutCore anytime you need to display
-  content that can be scrolled.  Although you can make any div scrollable in
-  HTML using CSS, SC.ScrollView provides a number of additional advantages
-  including support for incremental rendering, auto-scrolling during a
-  drag operations and support for custom scroll bars.
-
-  Scroll views are generally included automatically if you use the built-in
-  view helpers in SproutCore.  Depending on the views you are writing, you may
-  want to use scroll views yourself as well.  The following sections describe
-  how you can use the scroll view to support incremental rendering and auto-
-  scrolling dragging.
-  
-  h3. Using Scroll Views for Incremental Rendering
+  Scroll Views are used throughout SproutCore to provide scrollable areas.
+  Although you can use overflow: auto to provide scrollbar anywhere, using
+  a ScrollView is preferrable because it will also notify child views anytime
+  the view is scrolled.
   
-  Coming Soon...
-
   @extends SC.View
   @author  Charles Jolley  
   @version 1.0
 */
-SC.ScrollView = SC.View.extend(
-/** @scope SC.ScrollView.prototype */ {
+SC.ScrollView = SC.ContainerView.extend(SC.Scrollable, {
+  
+  emptyElement: '<div class="sc-scroll-view"></div>',
+  
+  /** 
+    Determines if the view should be scrollable vertically.  
+    
+    If this property is set to NO then the vertical scrollbar will always
+    be hidden.
+    
+    @field
+  */
+  canScrollVertical: YES,
 
-  emptyElement: '<div class="sc-scroll-view"></div>'
+  /**
+    Determines if the view should be scrollable horizontally.
+    
+    If this property is set to NO then the horizontal scrollbale will always
+    be hidden.
     
+    @field
+  */
+  canScrollHorizontal: NO,
+  
+  _canScrollVerticalObserver: function() {
+    this.setClassName('sc-scroll-vertical', this.get('canScrollVertical'));
+  }.observes('canScrollVertical'),
+
+  _canScrollHorizontalObserver: function() {
+    this.setClassName('sc-scroll-horizontal', this.get('canScrollHorizontal'));
+  }.observes('canScrollHorizontal'),
+
+  init: function() {
+    arguments.callee.base.apply(this, arguments) ;
+    this._canScrollVerticalObserver() ;
+    this._canScrollHorizontalObserver() ;
+  },
+
+  // auto fit child view based on which scrollviews are visible
+  resizeChildrenWithOldSize: function(oldSize) {
+    var v = this.get('firstChild') ;
+    if (v) {
+      var f = v.get('frame');
+      var orig = Object.clone(f) ;
+      var innerFrame = this.get('innerFrame') ;
+      f.x = f.y = 0 ;
+      if (!this.get('canScrollHorizontal')) f.width = innerFrame.width ;
+      if (!this.get('canScrollVertical')) f.height = innerFrame.height ;
+      if (!SC.rectsEqual(f, orig)) v.set('frame', f) ;
+    }
+  }
+  
 }) ;
+
+

data/frameworks/sproutcore/views/segmented.js

@@ -1,6 +1,6 @@
 // ========================================================================
 // SproutCore
-// copyright 2006-2007 Sprout Systems, Inc.
+// copyright 2006-2008 Sprout Systems, Inc.
 // ========================================================================
 
 require('views/view') ;

data/frameworks/sproutcore/views/slider.js

@@ -0,0 +1,132 @@
+// ==========================================================================
+// SC.SliderView
+// ==========================================================================
+
+require('views/view');
+require('mixins/control');
+
+/** @class
+
+  A SliderView shows a horizontal slider control that you can use to set 
+  variable values.
+
+  You can use a slider view much like you would any other control.  Simply
+  set the value or content/contentValueKey to whatever value you want to 
+  display.  You can also set the maximumValue and minValue properties to determine
+  the mapping of the control to its children.
+  
+  @extends SC.View
+  @extends SC.Control
+  
+  @author    Charles Jolley  
+  @version 1.0
+*/
+SC.SliderView = SC.View.extend(SC.Control,
+/** @scope SC.SliderView.prototype */ {
+
+  emptyElement: '<span class="sc-slider-view"><span class="inner"><img src="%@" class="sc-handle" /></span></span>'.fmt(static_url('blank')),
+
+  /** @private */
+  outlets: ['handleElement'],
+
+  /** 
+    The DOM element that displays the handle.
+  */
+  handleElement: '.sc-handle?',
+  
+  /**
+    The minimum value of the slider.
+  */ 
+  minimum: 0,
+
+  /**
+    The maximum value of the slider.
+  */
+  maximum: 1.0,
+  
+  /**
+    Optionally set to the minimum step size allowed.
+    
+    All values will be rounded to this step size when displayed.
+  */
+  step: 0.1,
+
+  /**
+    The value of the slider.  Set this property or the content property.
+  */
+  value: 0.50,
+  
+  /** @private */
+  valueBindingDefault: SC.Binding.SingleNotEmpty,
+  
+  _valueDidChangeObserver: function() {
+    if (!this.didChangeFor('value', 'value', 'minimum', 'maximum')) return;
+
+    
+    var min = this.get('minimum') ;
+    var max = this.get('maximum') ;
+    var value = this.get('value') ;
+
+    // constrain value.  If value did not match, set it back.
+    var constrained = Math.min(Math.max(value, min), max) ;
+    
+    var step = this.get('step') ;
+    if (step && step !== 0) {
+      constrained = Math.round(constrained / step) * step ;
+    }
+    
+    if (Math.abs(value - constrained) > 0.01) this.set('value', constrained) ;
+    value = constrained ;
+
+    // determine the percent across
+    value = (value - min) / (max - min) ;
+
+    
+    // convert to a value within the width of the receiver's innerFrame.
+    var f = this.get('innerFrame') ;
+    value = Math.round((f.width-18) * value) ;
+    
+    // set handle.  This assumes the handle is centered over its origin.
+    // adjust by 48px since this lives inside the inner div. Also the 
+    // divider is shown shifted by 8 so account for that also.
+    value -= (39) ;
+    Element.setStyle(this.handleElement, { left: '%@px'.fmt(value) }) ;
+    
+  }.observes('value', 'minimum', 'maximum'),
+  
+  mouseDown: function(evt) {
+     
+    if (!this.get('isEnabled')) return true ; // nothing to do
+    
+    // add active class
+    this.addClassName('active') ;
+    
+    // find new location -- adjust from left edge of display.
+    var loc = this.convertFrameFromView(Event.pointerLocation(evt), null).x ;
+    var f = this.get('innerFrame') ;
+    loc -= (f.x + 9) ; 
+
+    // find percent across
+    var value = loc / (f.width - 18) ;
+    
+    // convert to value and constrain
+    var min = this.get('minimum') ;
+    var max = this.get('maximum') ;
+    value = (value * (max - min)) + min ;
+    value = Math.min(Math.max(value, min), max) ;
+    
+    this.setIfChanged('value', value) ;
+    
+    return true;
+  },
+  
+  // mouseDragged uses same technique as mouseDown.
+  mouseDragged: function(evt) { return this.mouseDown(evt); },
+  
+  // remove active class
+  mouseUp: function(evt) {
+    this.removeClassName('active') ;
+  }
+  
+  
+}) ;

data/frameworks/sproutcore/views/source_list_group.js

@@ -0,0 +1,130 @@
+// ==========================================================================
+// SC.ListItemView
+// ==========================================================================
+
+require('views/view') ;
+require('mixins/delegate_support');
+require('mixins/control') ;
+require('views/button/disclosure');
+
+/** @class
+
+  Displays a group view in a source list.  Handles displaying a disclosure
+  triangle which can be used to show/hide children.
+
+  @extends SC.View
+  @extends SC.DelegateSupport
+  @author   Charles Jolley 
+  @version 0.1
+*/
+
+SC.SourceListGroupView = SC.View.extend(SC.Control, SC.DelegateSupport, {
+  
+  emptyElement: ['<div class="sc-source-list-group">',
+    '<a href="javascript:;" class="sc-source-list-label sc-disclosure-view sc-button-view button disclosure no-disclosure">',
+    '<img src="%@" class="button" />'.fmt(static_url('blank')),
+    '<span class="label"></span></a>',
+  '</div>'].join(''),
+  
+  /**
+    The group value to display for this group.
+  */
+  content: null,
+  
+  /**
+    The current group visibility.  Used by the source list to determine 
+    the layout size of the group.
+  */
+  isGroupVisible: YES,
+  
+  /** 
+    YES if group is showing its titlebar.
+    
+    Group views will typically hide their header if the content is set to 
+    null.  You can also override this method to always hide the header if 
+    you want and the SourceListView will not leave room for it.
+  */
+  hasGroupTitle: YES,
+  
+  groupTitleKey: null,
+  
+  groupVisibleKey: null,
+  
+  contentPropertyDidChange: function(target, key) {
+    var content = this.get('content') ;
+    var labelView = this.outlet('labelView') ;
+    
+    // hide labelView if content is null.
+    if (content == null) {
+      labelView.setIfChanged('isVisible', NO) ;
+      this.setIfChanged('hasGroupTitle', NO) ;
+      return ;
+    } else {
+      labelView.setIfChanged('isVisible', YES) ;
+      this.setIfChanged('hasGroupTitle', YES) ;
+    }
+    
+   // set the title if that changed.
+    var groupTitleKey = this.getDelegateProperty(this.displayDelegate, 'groupTitleKey') ;
+    if ((key == '*') || (groupTitleKey && (key == groupTitleKey))) {
+      var title = (content && content.get && groupTitleKey) ? content.get(groupTitleKey) : content;
+      if (title != this._title) {
+        this._title = title ;
+        if (title) title = title.capitalize() ;
+        labelView.set('title', title) ;
+      }
+    }
+    
+    // set the group visibility if changed
+    var groupVisibleKey = this.getDelegateProperty(this.displayDelegate, 'groupVisibleKey') ;
+    if ((key == '*') || (groupVisibleKey && (key == groupVisibileKey))) {
+
+      if (groupVisibleKey) {
+        
+        labelView.removeClassName('no-disclosure') ;
+
+        var isVisible = (content && content.get) ? !!content.get(groupVisibleKey) : YES ;
+        if (isVisible != this.get('isGroupVisible')) {
+          this.set('isGroupVisible', isVisible) ;
+          labelView.set('value', isVisible) ;
+        }
+        
+      } else labelView.addClassName('no-disclosure') ;
+    }
+  },
+  
+  // called when the user clicks on the disclosure triangle
+  disclosureValueDidChange: function(newValue) {
+    if (newValue == this.get('isGroupVisible')) return; // nothing to do
+    
+    // update group if necessary
+    var group = this.get('content') ;
+    var groupVisibleKey = this.getDelegateProperty(this.displayDelegate, 'groupVisibleKey') ;
+    if (group && group.set && groupVisibleKey) {
+      group.set(groupVisibleKey, newValue) ;
+    }
+    
+    // update my own value and then update my collection view.
+    this.set('isGroupVisible', newValue) ;
+    if (this.owner && this.owner.updateChildren) this.owner.updateChildren(true) ;
+    
+  },
+  
+  /** @private */
+  labelView: SC.DisclosureView.extend({
+    
+    /** 
+      Always default to open disclosures.
+    */
+    value: YES,
+    
+    // if the disclosure value changes, call the owner's method.  Note
+    // normally you would do this with a binding, but since this is a semi-
+    // private class anyway, there is no reason to go to all that trouble.
+    _valueObserver: function() {
+      if (this.owner) this.owner.disclosureValueDidChange(this.get('value'));
+    }.observes('value')
+    
+  }).outletFor('.sc-source-list-label:1:1')
+  
+}) ;

data/frameworks/sproutcore/views/spinner.js

@@ -1,6 +1,6 @@
 // ========================================================================
 // SproutCore
-// copyright 2006-2007 Sprout Systems, Inc.
+// copyright 2006-2008 Sprout Systems, Inc.
 // ========================================================================
 
 require('views/view') ;

data/frameworks/sproutcore/views/split.js

@@ -0,0 +1,292 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2008 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+require('mixins/delegate_support');
+
+SC.HORIZONTAL = 'horizontal' ;
+SC.VERTICAL = 'vertical' ;
+
+/** 
+  @class
+
+  A split view is used to show views that the user can resize or collapse.
+  To use the split view, you need to add the child views you want layed out
+  separated by divider views (instances of SC.SplitDividerView).
+  
+  When the user clicks and drags on a divider view, it will automatically
+  resize the views immediately before and after the view.  You can constrain
+  the resizing allowed by the split view either by setting a minThickness and
+  maxThickness property on the views themselves or by implementing methods
+  on a delegate object.
+
+  In addition to resizing views, users can also collapse views by double
+  clicking on a divider view.  When a view is collapsed, it's isVisible 
+  property is set to NO and its space it removed from the view.  Double
+  clicking on a divider again will restore a collapse view.  A user can also
+  start to drag the divider to show the collapsed view.
+  
+  You can programmatically control collapsing behavior by setting the
+  canCollapseViews property on the SplitView, a canCollapse property on each
+  child view, or by implementing the appropriate delegate method.
+  
+  Finally, SplitViews can layout their child views either horizontally or 
+  vertically.  To choose the direction of layout set the layoutDirection
+  property on the view.  This property should be set when the view is created.
+  Changing it dynamically will have an unknown effect.
+  
+  @extends SC.View
+  @extends SC.DelegateSupport
+  
+  @author Charles Jolley
+*/
+SC.SplitView = SC.View.extend(SC.DelegateSupport,
+/** @scope SC.SplitView.prototype */ {
+
+  emptyElement: '<div class="sc-split-view"></div>',
+  
+  /**
+    delegate for controlling split view behavior.
+  */
+  delegate: null,
+  
+  /**
+    Direction of layout.  Must be SC.HORIZONTAL || SC.VERTICAL.
+  */
+  layoutDirection: SC.HORIZONTAL,
+
+  /**
+    Set to NO to disable collapsing for all views.
+  */
+  canCollapseViews: YES,
+
+  /**
+    Used by split divider to decide if the view can be collapsed.
+  */
+  canCollapseView: function(view) {
+    if (!this.get('canCollapseViews')) return NO ;
+    if (view.get('canCollapse') === NO) return NO ;
+    return this.invokeDelegateMethod(this.delegate, 'splitViewCanCollapse', this, view) ;
+  },
+  
+  /**
+    One view in your array must have a flexible width to allow proper
+    resizing.  You can set this view manually with this outlet or you can
+    just let the split view choose the center-most view.
+    
+    Views to the left/top of this view will be anchored to the left/top of
+    the parent view.  Views to the right/bottom of this view will be anchored
+    to the right/bottom.
+  */
+  flexibleView: null,
+  
+  /**
+    Sets the thickness of the named view and then lays out the rest of the
+    views.
+    
+    @param {SC.View} view the view to adjust. Must not be a divider.
+    @param {Number} offset the new desired offset
+    @returns the actual allowed offset
+  */
+  setThicknessForView: function(view, thickness) {
+    if (view.get('parentNode') != this) {
+      throw "view must belong to reciever (view: %@)".fmt(view);
+    }
+
+    var direction = this.get('layoutDirection') ;
+    
+    // constrain to thickness set on view.
+    var max = view.get('maxThickness') ;
+    var min = view.get('minThickness') ;
+    if (max != null) thickness = Math.min(max, thickness) ; 
+    if (min != null) thickness = Math.max(min, thickness) ;
+    
+    // constrain to thickness determined by delegate.
+    thickness = this.invokeDelegateMethod(this.delegate, 'splitViewConstrainThickness', this, view, thickness) ;
+    
+    // thickness cannot be greater than the total of all the other views (
+    // except for the flexibleView) added together.
+    var total = this.get('innerFrame') ;
+    available = (direction == SC.HORIZONTAL) ? total.width : total.height ;
+    var views = this.get('childNodes') ;
+    var idx = view.length ;
+    var flexibleView = this.get('flexibleView') ;
+    while(--idx >= 0) {
+      var currentView = views[idx] ;
+      if ((currentView != view) && (currentView != flexibleView)) {
+        available -= this.thicknessForView(currentView) ;
+      }
+    }
+    thickness = Math.min(thickness, available) ;
+    
+    // cannot be less than 0
+    thickness = Math.max(0, thickness) ;
+    
+    // now apply constrained value
+    if (thickness != this.thicknessForView(view)) {
+      
+      // un-collapse if needed.
+      view.set('isCollapsed', (thickness <= 0)) ;
+      
+      // set new frame
+      var f = (direction === SC.HORIZONTAL) ? { width: thickness } : { height: thickness } ;
+      view.set('frame', f) ;
+      
+      // and layout
+      this.layout() ;
+    }
+    
+  },
+
+  /**
+    Returns the thickness for a given view.
+    
+    @param {SC.View} view the view to get.
+    @returns the view with the width.
+  */
+  thicknessForView: function(view) {
+    var direction = this.get('layoutDirection') ;
+    var ret = view.get('frame') ;
+    return (direction === SC.HORIZONTAL) ? ret.width : ret.height ; 
+  },
+  
+  /**
+    Finds the flexible view.
+    
+    This will use the flexibleView property if you set it or use the center
+    most view that is not a divider.
+  */
+  computeFlexibleView: function() {
+    var flexibleView = this.get('flexibleView') ;
+    if (!flexibleView) {
+      var views = this.get('childNodes') ;
+      flexibleView = views[Math.ceil(views.length/2)] ;
+    }
+    
+    // If the flexible view is a divider, find the first non-g.
+    while(flexibleView && (flexibleView instanceof SC.SplitDividerView)) {
+      flexibleView = flexibleView.get('nextSibling') ;
+    }
+    
+    return flexibleView;
+  }, 
+  
+  /**
+    Layout the views.
+    
+    This method needs to be called anytime you change the view thicknesses
+    to make sure they are arranged properly.  This will setup the views so
+    that they can resize appropriately.
+  */
+  layout: function() {
+
+    var views = this.get('childNodes') ;
+    
+    // find the flexible view, if it is not set.  
+    var flexibleView = this.computeFlexibleView();
+
+    // everything before the flexible view is anchored to the left/top
+    var direction = this.get('layoutDirection') ;
+    var view = views[0];
+    var offset = 0 ;
+    while(view && (view !== flexibleView)) {
+      var isCollapsed = view.get('isCollapsed') || NO ;
+      view.setIfChanged('isVisible', !isCollapsed) ;
+      if (!isCollapsed) {
+        view.viewFrameWillChange() ;
+        if (direction == SC.HORIZONTAL) {
+          view.setIfChanged('styleLeft', offset) ;
+          view.setIfChanged('styleRight', null) ;
+        } else {
+          view.setIfChanged('styleTop', offset) ;
+          view.setIfChanged('styleBottom', null) ;
+        }
+        view.viewFrameDidChange() ;
+
+        offset += this.thicknessForView(view) ;
+      }
+      view = view.get('nextSibling') ;
+    }
+
+    var flexHead = offset ;
+    
+    // everything after the flexible view is anchored to the right/bottom.
+    var view = views.last() ;
+    var offset = 0;
+    while(view && (view !== flexibleView)) {
+      var isCollapsed = view.get('isCollapsed') || NO ;
+      view.setIfChanged('isVisible', !isCollapsed) ;
+      if (!isCollapsed) {
+        view.viewFrameWillChange() ;
+        if (direction == SC.HORIZONTAL) {
+          view.setIfChanged('styleLeft', null) ;
+          view.setIfChanged('styleRight', offset) ;
+        } else {
+          view.setIfChanged('styleTop', null) ;
+          view.setIfChanged('styleBottom', offset) ;
+        }
+        view.viewFrameDidChange() ;
+
+        offset += this.thicknessForView(view) ;
+      }
+      view = view.get('previousSibling') ;
+    }
+    
+    var flexTail = offset ;
+    
+    if (flexibleView) {
+      view = flexibleView ;
+      view.viewFrameWillChange() ;
+      if (direction == SC.HORIZONTAL) {
+        view.setIfChanged('styleLeft', flexHead) ;
+        view.setIfChanged('styleRight', flexTail) ;
+        view.setIfChanged('styleWidth', null) ;
+      } else {
+        view.setIfChanged('styleTop', flexHead) ;
+        view.setIfChanged('styleBottom', flexTail) ;
+        view.setIfChanged('styleHeight', null) ;
+      }
+      view.viewFrameDidChange() ;
+    }
+    
+  },
+
+  /**
+    (DELEGATE) Control whether a view can be collapsed.
+    
+    The default implemention returns YES.
+    
+    @param {SC.SplitView} splitView the split view
+    @param {SC.View} view the view we want to collapse.
+    @returns {Boolean} YES to allow collapse.
+  */
+  splitViewCanCollapse: function(splitView, view) { return YES; },
+
+  /**
+    (DELEGATE) Constrain a views allowed thickness.
+    
+    The default implementation allows any thickness.  The view will
+    automatically constrain the view to not allow views to overflow the 
+    visible area.
+    
+    @param {SC.SplitView} splitView the split view
+    @param {SC.View} view the view in question
+    @param {Number} proposedThickness the proposed thickness.
+    @returns the allowed thickness
+  */
+  splitViewConstrainThickness: function(splitView, view, proposedThickness) {
+    return proposedThickness;
+  },
+  
+  /** @private */
+  init: function() {
+    arguments.callee.base.apply(this, arguments) ;
+    this.addClassName(this.get('layoutDirection')) ;
+  }
+  
+  
+}) ;
+
+