sproutcore 1.4.5-java → 1.5.0-java

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/split_view/mixins/split_thumb.js

@@ -0,0 +1,236 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2010 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  Tells the SplitThumb to automatically choose which child of the SplitView
+  to move in response to touch or mouse events in an SC.SplitThumb.
+*/
+SC.MOVES_AUTOMATIC_CHILD = 'moves-automatic-child';
+
+/**
+  Tells the SplitThumb to move the child of the SplitView that is
+  either the SplitThumb or a parent of it.
+*/
+SC.MOVES_CHILD = 'moves-child';
+
+/**
+  Tells the SplitThumb to move the child of the SplitView that
+  preceeds the child that is either the SplitThumb or a parent of it.
+*/
+SC.MOVES_PREVIOUS_CHILD = 'moves-previous-child';
+
+/**
+  Tells the SplitThumb to move the child of the SplitVie that
+  comes after the child that is either the SplitThumb or a parent of it.
+*/
+SC.MOVES_NEXT_CHILD = 'moves-next-child';
+
+/**
+  @mixin
+  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 
+  may want to adjust the way it chooses.
+  
+  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 
+  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.
+   *
+   * The default implementation calculates the child by first finding
+   * the ancestor of this view that is a direct child of the SplitView,
+   * and then either returning it or one of its immediate siblings, depending
+   * on the value of the movesSibling property.
+   *
+   * @property SC.View
+  */
+  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;
+
+    if (sibling === SC.MOVES_AUTOMATIC_CHILD) {
+      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.
+   *
+   * Usually, you want events to move a divider. If the SplitThumb is inside
+   * a view which is _not_ a divider, you probably want to move one of the
+   * view's siblings-one that _is_ a divider.
+   *
+   * You can tell SC.SplitThumb to:
+   *
+   * - SC.MOVES_AUTOMATIC_CHILD: if the SplitView child is either first or last,
+   *   moves the adjacent child (likely a divider). Otherwise moves the child itself.
+   *
+   * - SC.MOVES_CHILD: moves the child itself, not one of its siblings. Divider
+   *   views could use this setting.
+   *
+   * - SC.MOVES_PREVIOUS_CHILD: moves the previous child. For instance, in a
+   *   two-pane setup, if the SplitThumb is in the rightmost child, this will
+   *   move the divider between the two children.
+   *
+   * - SC.MOVES_NEXT_CHILD: moves the next child.
+   *
+   * @type TYPE
+  */
+  movesSibling: SC.MOVES_AUTOMATIC_CHILD,
+  
+  /**
+   * 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.
+   *
+   * NOTE: duplicated in SplitChild because both this and SplitChild use it.
+   *
+   * @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: '*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
+   * view is dragged.
+   *
+   * Computed based on the SplitView's layoutDirection.
+   *
+   * @type {String}
+  */
+  splitCursorStyle: function() {
+    if (this.get('splitViewLayoutDirection') === SC.LAYOUT_HORIZONTAL) {
+      return 'ew-resize';
+    } else {
+
+      return 'ns-resize';
+    }
+  }.property('splitViewLayoutDirection').cacheable(),
+  
+  splitCursorStyleDidChange: function() {
+    if (this._isDragging) {
+      this.get('splitView').set('splitChildCursorStyle', this.get('splitCursorStyle'));
+    }
+    
+    this.$().css('cursor', this.get('splitCursorStyle'));
+  }.observes('splitCursorStyle'),
+  
+  /**
+   * @private
+   * Renders the cursor for the view as defined by this view's splitCursor
+   * property.
+  */
+  renderMixin: function(context) {
+    context.css('cursor', this.get('splitCursorStyle'));
+  },
+  
+  
+  //
+  // EVENT HANDLING
+  //
+  touchStart: function(touch) {
+    this._isDragging = YES;
+    
+    var splitView = this.get('splitView');
+    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) {
+    var splitView = this.get('splitView');
+    
+    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) {
+    this._isDragging = NO;
+    
+    var splitView = this.get('splitView');
+    
+    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);
+    
+    return YES;
+  },
+
+  mouseDown: function(evt) {
+    var splitView = this.get('splitView');
+    splitView.set('splitChildCursorStyle', this.get('splitCursorStyle'));
+    
+    return this.touchStart(evt);
+  },
+  
+  mouseDragged: function(evt) {
+    return this.touchesDragged(evt);
+  },
+  
+  mouseUp: function(evt) {
+    this.get('splitView').set('splitChildCursorStyle', null);
+    
+    return this.touchEnd(evt);
+  }
+  
+};

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/split_view/render_delegates/split.js

@@ -0,0 +1,18 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2010 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+SC.BaseTheme.splitRenderDelegate = SC.RenderDelegate.create({
+  name: 'split',
+
+  render: function(dataSource, context) {
+    context.addClass(dataSource.get('layoutDirection'));
+  },
+
+  update: function(dataSource, jquery) {
+    jquery.addClass(dataSource.get('layoutDirection'));
+  }
+});

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/split_view/render_delegates/split_divider.js

@@ -0,0 +1,26 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2010 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+SC.BaseTheme.splitDividerRenderDelegate = SC.RenderDelegate.create({
+  name: 'split-divider',
+  dividerSize: 1,
+
+  splitPositionOffset: -5,
+  splitSizeOffset: 10,
+
+  render: function(dataSource, context) {
+    this.addSizeClassName(dataSource, context);
+
+    // the divider view itself is the grabber, but the visible line
+    // may be inside of it.
+    context.push("<div class='line'></div>");
+  },
+
+  update: function(dataSource, jquery) {
+    this.updateSizeClassName(dataSource, jquery);
+  }
+});

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/split_view/tests/children.js

@@ -0,0 +1,100 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2010 Sprout Systems, Inc. and contributors.
+//            portions copyright ©2011 Apple Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*
+  Tests SplitView logic responsible for managing child views; specifically,
+  these properties that are added to the child views:
+  
+  - nextView
+  - previousView
+  - viewIndex
+
+  We don't have to worry about orientation; the code being tested creates
+  child views, but does nothing related to laying them out.
+
+  We _do_ test these properties with dividers as well.
+*/
+var splitView;
+module("SplitView - Child Management", {
+  setup: function() {
+    SC.RunLoop.begin();
+    splitView = SC.SplitView.create({
+      childViews: [ 'left', 'middle', 'right' ],
+      
+      left:  SC.View.extend(SC.SplitChild, { name: 'left', canCollapse: YES, collapseAtSize: 50 }),
+      middle: SC.View.extend(SC.SplitChild, { name: 'middle' }),
+      right: SC.View.extend(SC.SplitChild, { name: 'right', canCollapse: YES, collapseAtSize: 50 }),
+      
+      layout: { left: 0, top: 0, width: 500, height: 500 },
+      
+      splitDividerView: null // in most of these tests, we are not checking the behavior of split dividers 
+    });
+    SC.RunLoop.end();
+  }
+});
+
+function validateChildren(view, expected) {
+  equals(view.childViews.length, expected, "Should have " + expected + " child views");
+  
+  var prev = null;
+  for (var i = 0; i < view.childViews.length; i++) {
+    equals(view.childViews[i].viewIndex, i, "View index should be " + i);
+    equals(view.childViews[i].previousView, prev, "Should have proper previous view");
+    
+    var next = null;
+    if (view.childViews.length > i + 1) {
+      next = view.childViews[i+1];
+    }
+    
+    equals(view.childViews[i].nextView, next, "Should have proper next view");
+    prev = view.childViews[i];
+  }
+}
+
+test("Initial settings correct", function() {
+  validateChildren(splitView, 3);
+});
+
+test("Adding a child view doesn't disturb things", function() {
+  var add = SC.View.create(SC.SplitChild, { name: 'add' });
+  
+  SC.RunLoop.begin();
+  splitView.appendChild(add);
+  SC.RunLoop.end();
+  
+  validateChildren(splitView, 4);
+});
+
+test("Inserting a child view doesn't disturb things", function() {
+  var add = SC.View.create(SC.SplitChild, { name: 'add' });
+  
+  SC.RunLoop.begin();
+  splitView.insertBefore(add, splitView.childViews[0]);
+  SC.RunLoop.end();
+  
+  validateChildren(splitView, 4);
+});
+
+test("Removing a child view doesn't disturb things", function() {
+  SC.RunLoop.begin();
+  splitView.removeChild(splitView.childViews[0]);
+  SC.RunLoop.end();
+  
+  validateChildren(splitView, 2);
+});
+
+test("Works with dividers", function() {
+  var add = SC.View.create(SC.SplitChild, { name: 'add' });
+
+  splitView.splitDividerView = SC.SplitDividerView;
+  
+  SC.RunLoop.begin();
+  splitView.appendChild(add);
+  SC.RunLoop.end();
+  
+  validateChildren(splitView, 7);
+});

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/split_view/tests/dividers.js

@@ -0,0 +1,243 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2010 Sprout Systems, Inc. and contributors.
+//            portions copyright ©2011 Apple Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*
+  Tests SplitView logic responsible for automatically creating divider views.
+  There are a few different parts to this:
+  
+  - The automatic creation of dividers.
+  - The splitDividerView property.
+  - The splitViewDividerBetween method.
+
+  We don't have to worry about orientation; the code being tested creates
+  child views, but does nothing related to laying them out.
+  
+  Note: We do NOT test the properties added to the split children (nextView, etc.);
+  Those are tested in children.js.
+  
+*/
+var createSplitView;
+
+module("SplitView Dividers", {
+  setup: function() {
+    // Rather than instantiate one here, we'll create a function that
+    // instantiates with the supplied options.
+    var SplitView = SC.SplitView.extend({
+      childViews: [
+        'left',
+        'right'
+      ],
+      
+      left:  SC.View.extend(SC.SplitChild, { name: 'left', canCollapse: YES, collapseAtSize: 50 }),
+      right: SC.View.extend(SC.SplitChild, { name: 'right', canCollapse: YES, collapseAtSize: 50 }),
+      
+      layout: { left: 0, top: 0, width: 500, height: 500 }
+    });
+    
+    createSplitView = function(opts) {
+      opts = opts || {};
+      SC.RunLoop.begin();
+      var ret = SplitView.create(opts);
+      SC.RunLoop.end();
+      return ret;
+    };
+  },
+  
+  teardown: function() {
+    
+  }
+});
+
+test("SC.SplitDividerView is automatically created between child views", function(){
+  var view = createSplitView();
+  equals(view.childViews.length, 3, "Should have created 3 views: left, divider, and right.");
+  ok(view.childViews[1].kindOf(SC.SplitDividerView), "Middle view is an SC.SplitDividerView");
+});
+
+test("SC.SplitDividerView uses splitDividerView property", function(){
+  var MyDividerType = SC.SplitDividerView.extend();
+  var view = createSplitView({ splitDividerView: MyDividerType });
+  equals(view.childViews.length, 3, "Should have created 3 views: left, divider, and right.");
+  ok(view.childViews[1].kindOf(MyDividerType), "Middle view is a MyDividerType");
+});
+
+test("SC.SplitDividerView uses splitViewDividerBetween method", function(){
+  var MyDividerType = SC.SplitDividerView.extend();
+  var view = createSplitView({ splitViewDividerBetween: function(split, view1, view2) { return MyDividerType.create(); } });
+  equals(view.childViews.length, 3, "Should have created 3 views: left, divider, and right.");
+  ok(view.childViews[1].kindOf(MyDividerType), "Middle view is a MyDividerType");
+});
+
+test("splitViewDividerBetween works properly", function(){
+  var MyDividerType1 = SC.SplitDividerView.extend({ dividerType: 1 });
+  var MyDividerType2 = SC.SplitDividerView.extend({ dividerType: 2 });
+  
+  var view = createSplitView({
+    childViews: 'left middle right'.w(),
+    middle: SC.View.design(SC.SplitChild, { name: 'middle' }),
+    splitViewDividerBetween: function(split, view1, view2) { 
+      if (view1 === split.left) return MyDividerType1.create();
+      if (view1 === split.middle) return MyDividerType2.create();
+    } 
+  });
+  
+  equals(view.childViews.length, 5, "Should have created 5 views: left, divider, middle, divider, and right.");
+  ok(view.childViews[1].kindOf(MyDividerType1), "2nd view is a MyDividerType1");
+  ok(view.childViews[3].kindOf(MyDividerType2), "4th view is a MyDividerType2");
+});
+
+function checkDividers(view, number) {
+  var shouldBeDivider = NO;
+  
+  equals(view.childViews.length, number * 2 - 1, "There should be " + (number * 2 - 1) + " children");
+  
+  for (var i = 1; i < number; i++) {
+    equals(
+      view.childViews[i - 1].isSplitDivider, shouldBeDivider, 
+      "View " + i + (shouldBeDivider ? " SHOULD " : " SHOULD NOT ") + "be a divider"
+    );
+    shouldBeDivider = !shouldBeDivider;
+  }
+}
+
+test("Adding/removing from end adds/removes dividers appropriately", function() {
+  var view = createSplitView({
+    childViews: 'left middle right'.w(),
+    middle: SC.View.design(SC.SplitChild, { name: 'middle' })
+  });
+  
+  // do an initial check: should be three views with dividers.
+  checkDividers(view, 3);
+  
+  // add one, and check again.
+  var add = SC.View.create(SC.SplitChild, { name: 'add' });
+  
+  SC.RunLoop.begin();
+  view.appendChild(add);
+  SC.RunLoop.end();
+  
+  checkDividers(view, 4);
+  
+  // remove the one we added, and check again
+  SC.RunLoop.begin();
+  view.removeChild(add);
+  SC.RunLoop.end();
+  
+  checkDividers(view, 3);
+  
+});
+
+test("Adding/removing from beginning adds/removes dividers appropriately", function() {
+  var view = createSplitView({
+    childViews: 'left middle right'.w(),
+    middle: SC.View.design(SC.SplitChild, { name: 'middle' })
+  });
+  
+  // do an initial check: should be three views with dividers.
+  checkDividers(view, 3);
+  
+  // add one, and check again.
+  var add = SC.View.create(SC.SplitChild, { name: 'add' });
+  
+  SC.RunLoop.begin();
+  view.insertBefore(add, view.childViews[0]);
+  SC.RunLoop.end();
+  
+  checkDividers(view, 4);
+  
+  // remove the one we added, and check again
+  SC.RunLoop.begin();
+  view.removeChild(add);
+  SC.RunLoop.end();
+  
+  checkDividers(view, 3);
+  
+});
+
+test("Adding/removing in middle adds/removes dividers appropriately", function() {
+  var view = createSplitView({
+    childViews: 'left middle right'.w(),
+    middle: SC.View.design(SC.SplitChild, { name: 'middle' })
+  });
+  
+  // do an initial check: should be three views with dividers.
+  checkDividers(view, 3);
+  
+  // add one, and check again.
+  var add = SC.View.create(SC.SplitChild, { name: 'add' });
+  
+  SC.RunLoop.begin();
+  view.insertBefore(add, view.childViews[2]); // note: 2 is the middle view
+  SC.RunLoop.end();
+  
+  checkDividers(view, 4);
+  
+  // remove the one we added, and check again
+  SC.RunLoop.begin();
+  view.removeChild(add);
+  SC.RunLoop.end();
+  
+  checkDividers(view, 3);
+  
+});
+
+test("Adding and removing before a divider doesn't screw things majorly", function() {
+
+  var view = createSplitView({
+    childViews: 'left middle right'.w(),
+    middle: SC.View.design(SC.SplitChild, { name: 'middle' })
+  });
+
+  // do an initial check: should be three views with dividers.
+  checkDividers(view, 3);
+
+  // add one, and check again.
+  var add = SC.View.create(SC.SplitChild, { name: 'add' });
+
+  SC.RunLoop.begin();
+  view.insertBefore(add, view.childViews[1]);
+  SC.RunLoop.end();
+
+  checkDividers(view, 4);
+
+  // remove the one we added, and check again
+  SC.RunLoop.begin();
+  view.removeChild(add);
+  SC.RunLoop.end();
+
+  checkDividers(view, 3);
+
+});
+
+test("Adding and removing several views doesn't screw things", function() {
+  var view = createSplitView({
+    childViews: 'left middle right'.w(),
+    middle: SC.View.design(SC.SplitChild, { name: 'middle' })
+  });
+
+  // do an initial check: should be three views with dividers.
+  checkDividers(view, 3);
+
+  // add one, and check again.
+  var add1 = SC.View.create(SC.SplitChild, { name: 'add' });
+  var add2 = SC.View.create(SC.SplitChild, { name: 'add' });
+  var add3 = SC.View.create(SC.SplitChild, { name: 'add' });
+  var add4 = SC.View.create(SC.SplitChild, { name: 'add' });
+
+  SC.RunLoop.begin();
+  view.removeChild(view.childViews[2]);
+  view.removeChild(view.childViews[3]);
+  
+  // semi-random (I just picked 4 numbers):
+  view.insertBefore(add1, view.childViews[0]);
+  view.insertBefore(add2, view.childViews[0]);
+  view.insertBefore(add3, view.childViews[4]);
+  view.insertBefore(add4, view.childViews[3]);
+  SC.RunLoop.end();
+  
+  checkDividers(view, 5);
+});