sproutcore 1.9.2 → 1.10.0.rc.1

data/lib/frameworks/sproutcore/frameworks/{experimental/frameworks/split_view → desktop}/mixins/split_child.js

@@ -5,16 +5,51 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
+/** @private
+  SC.SplitChild and SC.SplitThumb both share this code, but we don't want it
+  included twice if the view mixes in both SC.SplitChild and SC.SplitThumb.
+*/
+SC.NeedsSplitParent = {
+
+  /**
+   * The SplitView that contains the child views to be adjusted.
+   *
+   * This is computed to be the first SplitView found in a search
+   * up the view hierarchy. You can substitute your own SplitView
+   *
+   * @property SC.SplitView
+  */
+  splitView: function () {
+    var view = this;
+    while (view && !view.isSplitView) view = view.get('parentView');
+    return view;
+  }.property('parentView').cacheable(),
+
+  /**
+   * The layoutDirection of the SplitView. This is observed so that we
+   * can update positioning if the layoutDirection changes but the position
+   * and size properties do not.
+   *
+   * @type {LayoutDirection}
+  */
+  // NOTE: While an edge case, this is implemented because it makes it _much_
+  // easier to write the sample in the Test Controls app.
+  splitViewLayoutDirection: null,
+  splitViewLayoutDirectionBinding: SC.Binding.oneWay('*splitView.layoutDirection')
+
+};
+
+
 /**
   @namespace
   Child views of SplitViews should use this mixin to get their positioning
   logic and default settings.
-  
+
   By default, SplitView merely sets the position and size properties on its
-  child views. This mixin observes the position and size properties and 
+  child views. This mixin observes the position and size properties and
   calls adjust().
 */
-SC.SplitChild = 
+SC.SplitChild =
   /** @scope SC.SplitChild.prototype */{
   /**
    * Set to YES if your Split Child is a divider view.
@@ -22,7 +57,7 @@ SC.SplitChild =
    * @type Boolean
   */
   isSplitDivider: NO,
-  
+
   /**
    * The minimum size for the SC.SplitView child. This view will
    * be unable to be resized smaller than this size.
@@ -38,13 +73,13 @@ SC.SplitChild =
    * be unable to be resized to a size larger than this value.
    *
    * If undefined, there is no limit.
-   * 
+   *
    * @default 100
    *
    * @type {Number}
   */
   maximumSize: undefined,
-  
+
   /**
    * The current size of the SC.SplitView child. Use this to set the default
    * size.
@@ -58,7 +93,7 @@ SC.SplitChild =
    * @type Number
   */
   size: undefined,
-  
+
   /**
    * [RO] The current position of the SC.SplitView. This is read-only, and is set
    * by the SplitView as it positions the views.
@@ -66,10 +101,10 @@ SC.SplitChild =
    * @type Number
   */
   position: 0,
-  
+
   /**
    * An amount to add to the position when adjusting layout.
-   * 
+   *
    * For example, if SC.SplitView positions this view at 100, and
    * positionOffset is -5, the view's layout will will have a position of 95.
    *
@@ -81,14 +116,14 @@ SC.SplitChild =
    * @type Number
   */
   positionOffset: SC.propertyFromRenderDelegate('splitPositionOffset', 0),
-  
+
   /**
    * An amount to add to the assigned size when adjusting layout.
-   * 
+   *
    * For example, if SC.SplitView gives this view a size of 1, but the
    * sizeOffset is 10, the view's layout will be given a width or height of 11.
    *
-   * This can be used in conjunction with positionOffset to make dividers 
+   * This can be used in conjunction with positionOffset to make dividers
    * overlap the other views in the SplitView to have a larger grab area.
    *
    * TODO: Get this value from theme.
@@ -105,7 +140,7 @@ SC.SplitChild =
    * @type {Boolean}
   */
   canCollapse: NO,
-  
+
   /**
    * If the user attempts to resize the view to a size below this number,
    * the view will collapse.
@@ -124,7 +159,7 @@ SC.SplitChild =
    *   SC.RESIZE_AUTOMATIC views have already been resized as much as possible.
    * - SC.FIXED_SIZE: Never resize.
    *
-   * If you specify an autoResizeStyle, it will be used. If you leave it at `undefined`, 
+   * If you specify an autoResizeStyle, it will be used. If you leave it at `undefined`,
    * it will look at `size`: if a `size` is supplied, it will use `SC.RESIZE_MANUAL`; otherwise
    * it will use `SC.RESIZE_AUTOMATIC`.
    *
@@ -141,7 +176,7 @@ SC.SplitChild =
    * @type Boolean
   */
   compensatesForMovement: YES,
-  
+
   /**
    * When NO, the view can only be adjusted when the user drags a divider
    * immediately adjacent to it. If YES, the view can be adjusted indirectly
@@ -158,15 +193,21 @@ SC.SplitChild =
    * @type {Boolean}
   */
   allowsIndirectAdjustments: YES,
-  
-  
+
+  /** @private Include SC.NeedsSplitParent if it hasn't already been included. */
+  initMixin: function () {
+    if (!this.splitView) {
+      this.mixin(SC.NeedsSplitParent);
+    }
+  },
+
   //
   // Positioning logic
   //
   _scsvc_positionOrSizeDidChange: function() {
     this.invokeOnce('splitChildLayoutDidChange');
   }.observes('position', 'size'),
-  
+
   /**
    * Called when either the position or size of the child has changed, and layout
    * needs to be updated accordingly. You may override this method to take into
@@ -181,11 +222,11 @@ SC.SplitChild =
   splitChildLayoutDidChange: function() {
     var split = this.get('splitView');
     if (!split) return;
-    
+
     var position = this.get('position') + this.get('positionOffset'),
         size = this.get('size') + this.get('sizeOffset');
-    
-    
+
+
     if (split.get('layoutDirection') === SC.LAYOUT_HORIZONTAL) {
       this.set('layout', {
         left: position,
@@ -200,37 +241,7 @@ SC.SplitChild =
       });
     }
   },
-  
-  
-  /**
-   * The SplitView that contains the child views to be adjusted.
-   *
-   * This is computed to be the first SplitView found in a search
-   * up the view hierarchy. You can substitute your own SplitView.
-   *
-   * Note: this property is duplicated between this mixin and the SplitThumb
-   * mixin, as both have qualities that need the controlling SplitView.
-   *
-   * @property SC.SplitView
-  */
-  splitView: function() {
-    var view = this.get('parentView') ;
-    while (view && !view.isSplitView) view = view.get('parentView') ;
-    return view ;
-  }.property('parentView').cacheable(),
-  
-  /**
-   * The layoutDirection of the SplitView. This is observed so that we
-   * can update positioning if the layoutDirection changes but the position
-   * and size properties do not.
-   *
-   * @type {LayoutDirection}
-  */
-  // NOTE: While an edge case, this is implemented because it makes it _much_
-  // easier to write the sample in the Test Controls app.
-  splitViewLayoutDirection: null,
-  splitViewLayoutDirectionBinding: SC.Binding.oneWay('*splitView.layoutDirection'),
-  
+
   splitViewLayoutDirectionDidChange: function() {
     this.invokeOnce('splitChildLayoutDidChange');
   }.observes('splitViewLayoutDirection')

data/lib/frameworks/sproutcore/frameworks/{experimental/frameworks/split_view → desktop}/mixins/split_thumb.js

@@ -34,21 +34,21 @@ SC.MOVES_NEXT_CHILD = 'moves-next-child';
   A SplitThumb may be placed inside any view in a SplitView, and can even
   be a direct child of the SplitView. It forwards its events to the SplitView
   to control the movement of a divider or another child of the SplitView.
-  
+
   Using a view that mixes in SplitThumb, you can place a handle that moves the
   divider anywhere inside the SplitView's view tree.
-  
+
   SplitThumb will automatically choose which divider to move. It's choice will
-  almost always be correct for 2-pane layouts. However, in 3-pane layouts, you 
+  almost always be correct for 2-pane layouts. However, in 3-pane layouts, you
   may want to adjust the way it chooses.
-  
-  You can adjust the behavior by setting the movesSibling property to 
+
+  You can adjust the behavior by setting the movesSibling property to
   SC.MOVES_NEXT_CHILD or SC.MOVES_PREVIOUS_CHILD. If your ThumbView is inside
-  the middle pane, for instance, this would tell it whether the ThumbView 
+  the middle pane, for instance, this would tell it whether the ThumbView
   should move the divider to the left, or the divider to the right.
 */
 SC.SplitThumb = {
-  
+
   /**
    * The child which should be moved by any mouse or touch events. Should usually
    * be a divider view.
@@ -60,14 +60,14 @@ SC.SplitThumb = {
    *
    * @property SC.View
   */
-  movesChild: function() {
+  movesChild: function () {
     var view = this, child, splitView = this.get('splitView'),
         sibling = this.get('movesSibling');
     while (view && view !== splitView) {
       child = view;
       view = view.get('parentView');
     }
-    
+
     if (sibling === SC.MOVES_NEXT_CHILD) return child.nextView;
     if (sibling === SC.MOVES_PREVIOUS_CHILD) return child.previousView;
 
@@ -75,10 +75,10 @@ SC.SplitThumb = {
       if (!child.nextView) return child.previousView;
       if (!child.previousView) return child.nextView;
     }
-    
+
     return child;
   }.property('splitView', 'movesSibling').cacheable(),
-  
+
   /**
    * Decides whether an ancestor of this SplitThumb view or one of its
    * siblings is to be moved in response to events.
@@ -104,7 +104,7 @@ SC.SplitThumb = {
    * @type TYPE
   */
   movesSibling: SC.MOVES_AUTOMATIC_CHILD,
-  
+
   /**
    * The SplitView that contains the child views to be adjusted.
    *
@@ -113,12 +113,12 @@ SC.SplitThumb = {
    *
    * @property SC.SplitView
   */
-  splitView: function() {
-    var view = this ;
-    while (view && !view.isSplitView) view = view.get('parentView') ;
-    return view ;
-  }.property('parentView').cacheable(),
-  
+  // splitView: function () {
+  //   var view = this;
+  //   while (view && !view.isSplitView) view = view.get('parentView');
+  //   return view;
+  // }.property('parentView').cacheable(),
+
   /**
    * The layoutDirection of the SplitView. This is observed so that we
    * can update positioning if the layoutDirection changes but the position
@@ -130,9 +130,9 @@ SC.SplitThumb = {
   */
   // NOTE: While an edge case, this is implemented because it makes it _much_
   // easier to write the sample in the Test Controls app.
-  splitViewLayoutDirection: null,
-  splitViewLayoutDirectionBinding: SC.Binding.oneWay('*splitView.layoutDirection'),
-  
+  // splitViewLayoutDirection: null,
+  // splitViewLayoutDirectionBinding: SC.Binding.oneWay('*splitView.layoutDirection'),
+
   /**
    * The name of the CSS cursor that should be used for splitting.
    * The containing SplitView will adopt this cursor if and when this
@@ -142,97 +142,102 @@ SC.SplitThumb = {
    *
    * @type {String}
   */
-  splitCursorStyle: function() {
+  splitCursorStyle: function () {
     if (this.get('splitViewLayoutDirection') === SC.LAYOUT_HORIZONTAL) {
       return 'ew-resize';
     } else {
-
       return 'ns-resize';
     }
   }.property('splitViewLayoutDirection').cacheable(),
-  
-  splitCursorStyleDidChange: function() {
+
+  splitCursorStyleDidChange: function () {
     if (this._isDragging) {
       this.get('splitView').set('splitChildCursorStyle', this.get('splitCursorStyle'));
     }
-    
+
     this.$().css('cursor', this.get('splitCursorStyle'));
   }.observes('splitCursorStyle'),
-  
+
+  /** @private Include SC.NeedsSplitParent if it hasn't already been included. */
+  initMixin: function () {
+    if (!this.splitView) {
+      this.mixin(SC.NeedsSplitParent);
+    }
+  },
+
   /**
    * @private
    * Renders the cursor for the view as defined by this view's splitCursor
    * property.
   */
-  renderMixin: function(context) {
-    context.css('cursor', this.get('splitCursorStyle'));
+  renderMixin: function (context) {
+    context.setStyle('cursor', this.get('splitCursorStyle'));
   },
-  
-  
+
   //
   // EVENT HANDLING
   //
-  touchStart: function(touch) {
+  touchStart: function (touch) {
     this._isDragging = YES;
-    
+
     var splitView = this.get('splitView');
     splitView.beginLiveResize();
-    
-    this._scst_mouseStartPosition = splitView.get('layoutDirection') === SC.LAYOUT_HORIZONTAL ? 
+
+    this._scst_mouseStartPosition = splitView.get('layoutDirection') === SC.LAYOUT_HORIZONTAL ?
       touch.pageX : touch.pageY;
-    
+
     this._scst_childStartPosition = splitView.getPositionForChild(this.get('movesChild'));
-    
+
     return YES;
   },
-  
-  touchesDragged: function(evt) {
+
+  touchesDragged: function (evt) {
     var splitView = this.get('splitView');
-    
-    var mousePosition = splitView.get('layoutDirection') === SC.LAYOUT_HORIZONTAL ? 
+
+    var mousePosition = splitView.get('layoutDirection') === SC.LAYOUT_HORIZONTAL ?
       evt.pageX : evt.pageY;
-    
+
     var diff = mousePosition - this._scst_mouseStartPosition,
         start = this._scst_childStartPosition;
-    
+
     splitView.adjustPositionForChild(this.get('movesChild'), start + diff);
 
     return YES;
   },
-  
-  touchEnd: function(touch) {
+
+  touchEnd: function (touch) {
     this._isDragging = NO;
-    
+
     var splitView = this.get('splitView');
-    
-    var mousePosition = splitView.get('layoutDirection') === SC.LAYOUT_HORIZONTAL ? 
+
+    var mousePosition = splitView.get('layoutDirection') === SC.LAYOUT_HORIZONTAL ?
       touch.pageX : touch.pageY;
-    
+
     var diff = mousePosition - this._scst_mouseStartPosition,
         start = this._scst_childStartPosition;
-    
+
     splitView.adjustPositionForChild(this.get('movesChild'), start + diff);
-    
+
     splitView.set('splitChildCursorStyle', null);
     splitView.endLiveResize();
     return YES;
   },
 
-  mouseDown: function(evt) {
+  mouseDown: function (evt) {
     var splitView = this.get('splitView');
     splitView.set('splitChildCursorStyle', this.get('splitCursorStyle'));
-    
+
     return this.touchStart(evt);
   },
-  
-  mouseDragged: function(evt) {
+
+  mouseDragged: function (evt) {
     return this.touchesDragged(evt);
   },
-  
-  mouseUp: function(evt) {
+
+  mouseUp: function (evt) {
     this.get('splitView').set('splitChildCursorStyle', null);
-    
+
     return this.touchEnd(evt);
   }
-  
+
 };