sproutcore 1.5.0.pre.4.1 → 1.5.0.pre.5

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/animation.js

@@ -171,6 +171,35 @@ if (SC.platform.supportsCSSTransitions) {
     SC.RunLoop.end();
   });
 
+  test("should not cancel callback when value hasn't changed", function() {
+    var callbacks = 0, wasCancelled = NO, check = 0;
+    stop(2000);
+    
+    SC.RunLoop.begin();
+    view.invokeLater(function() {
+      // this triggers the initial layoutStyle code
+      view.animate('left', 79, 0.500, function(data) {
+        callbacks++;
+        wasCancelled = data.isCancelled;
+      });
+      // this triggers a re-render, re-running the layoutStyle code
+      view.displayDidChange();
+    }, 1);
+    SC.RunLoop.end();
+    
+    setTimeout(function() {
+      // capture the callbacks value
+      check = callbacks;
+    }, 250);
+    
+    setTimeout(function() {
+      start();
+      equals(check, 0, "the callback should not have been cancelled initially");
+      equals(callbacks, 1, "the callback should have been fired");
+      equals(wasCancelled, NO, "the callback should not have been cancelled");
+    }, 1000);
+  });
+
   test("should handle transform attributes", function(){
     SC.RunLoop.begin();
     view.animate('rotateX', 45, { duration: 1 });
@@ -289,6 +318,32 @@ if (SC.platform.supportsCSSTransitions) {
     SC.RunLoop.end();
   });
 
+  test("should not add animation for properties that have the same value as existing layout", function() {
+    var callbacks = 0;
+
+    SC.RunLoop.begin();
+    // we set width to the same value, but we change height
+    view.invokeLater('animate', 1, {width: 100, height: 50}, 0.5, function() { callbacks++; });
+    SC.RunLoop.end();
+
+    ok(callbacks === 0, "precond - callback should not have been run yet");
+
+    stop(2000);
+
+    // we need to test changing the width at a later time
+    setTimeout(function() {
+      start();
+
+      equals(callbacks, 1, "callback should have been run once, for height change");
+
+      SC.RunLoop.begin();
+      view.animate('width', 50, 0.5);
+      SC.RunLoop.end();
+
+      equals(callbacks, 1, "callback should still have only been called once, even though width has now been animated");
+    }, 1000);
+  });
+
   test("should warn if multiple callbacks for transitions");
 
 }

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/clippingFrame.js

@@ -5,11 +5,11 @@
 // ==========================================================================
 
 /*global module test equals context ok same Q$ htmlbody */
-htmlbody('<style> .sc-view { border: 1px blue solid; position: absolute;  overflow: hidden; }</style>');
 
 var pane, a, aa ;
 module("SC.View#clippingFrame", {
   setup: function() {
+    htmlbody('<style> .sc-view { border: 1px blue solid; position: absolute;  overflow: hidden; }</style>');
     SC.RunLoop.begin();
     pane = SC.Pane.design()
       .layout({ top: 0, left: 0, width: 200, height: 200 })
@@ -27,6 +27,7 @@ module("SC.View#clippingFrame", {
     pane.remove();
     pane = a = aa = null ;
     SC.RunLoop.end();
+    clearHtmlbody();
   }
 });
 
@@ -114,21 +115,3 @@ test("notifies receiver and each child if parent clipping frame changes", functi
   // number.
   equals(callCount, 2, 'should invoke observer on child and nested child');
 });
-
-
-test("does not notify child views of clippingFrame changes if child view has useStaticLayout: YES", function() {
-  var callCount = 0;
-  
-  aa.set('useStaticLayout', YES);
-
-  // setup observers
-  function observer() { callCount++; }
-  a.addObserver('clippingFrame', observer);
-  aa.addObserver('clippingFrame', observer);
-  
-  // now, adjust layout of child so that clipping frame will change...
-  a.adjust('top', -50);
-  
-  equals(callCount, 1, 'should invoke observer on child only');
-});
-

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/convertFrames.js

@@ -6,7 +6,6 @@
 
 /*global module test equals context ok same Q$ htmlbody */
 
-htmlbody('<style> .sc-view { border: 1px blue solid; position: absolute; }</style>');
 
 // ..........................................................
 // COMMON SETUP CODE
@@ -15,6 +14,8 @@ var pane, a, b, aa, aaa, bb, f ;
 var A_LEFT = 10, A_TOP = 10, B_LEFT = 100, B_TOP = 100;
 
 function setupFrameViews() {
+  htmlbody('<style> .sc-view { border: 1px blue solid; position: absolute; }</style>');
+
   pane = SC.Pane.design()
     .layout({ top: 0, left: 0, width: 400, height: 300 })
     .childView(SC.View.design()
@@ -43,6 +44,7 @@ function setupFrameViews() {
 function teardownFrameViews() {
   pane.remove() ;
   pane = a = aa = aaa = b = bb = null ;
+  clearHtmlbody();
 }
 
 // ..........................................................

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/insertBefore.js

@@ -157,8 +157,25 @@ test("invokes parentViewDidChange() on child view.  this is used by the view int
 	
 	parent.insertBefore(child, null);
 	equals(callCount, 1, 'invoked parentViewDidChange');
+
+  var coreView = SC.CoreView.create();
+  parent.insertBefore(coreView, null);
+  equals(parent.get('childViews').lastObject(), coreView, "inserts SC.CoreView");
 });
 
+test("invokes layoutDidChange() on child view", function() {
+
+	// monkey patch to test
+	var callCount = 0;
+	child.layoutDidChange = function() { callCount++; };
+
+	parent.insertBefore(child, null);
+	equals(callCount, 1, 'invoked layoutDidChange');
+
+  var coreView = SC.CoreView.create();
+  parent.insertBefore(coreView, null);
+  equals(parent.get('childViews').lastObject(), coreView, "inserts SC.CoreView");
+});
 // VERIFY LAYER CHANGES ARE DEFERRED
 test("should not move layer immediately", function() {
 

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/layoutStyle.js

@@ -25,7 +25,8 @@
   */
   function performLayoutTest(layout, no_f, no_s, with_f, with_s) {
     // make sure we add null properties and convert numbers to 'XXpx' to style layout.
-    var layoutKeys = 'width height top bottom marginLeft marginTop left right zIndex minWidth maxWidth minHeight maxHeight'.w();
+    var layoutKeys = ('width height top bottom marginLeft marginTop left right zIndex minWidth maxWidth minHeight maxHeight ' +
+                      'borderTopWidth borderBottomWidth borderLeftWidth borderRightWidth').w();
     if (SC.platform.supportsCSSTransforms) { layoutKeys.push('transform'); }
 
     var frameKeys = 'x y width height'.w();
@@ -539,6 +540,100 @@
     
   }) ;
 
+  
+  // ..........................................................
+  // TEST BORDER
+  // 
+
+  module('BORDER LAYOUT VARIATIONS', commonSetup);
+
+  test("layout {top, left, width, height, border}", function() {
+    var layout = { top: 10, left: 10, width: 50, height: 50, border: 2 };
+    var s = { top: 10, left: 10, width: 46, height: 46,
+              borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 } ;
+    var no_f = { x: 12, y: 12, width: 46, height: 46 } ;
+    var with_f = { x: 12, y: 12, width: 46, height: 46 } ;
+
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+  }) ;
+
+  test("layout {top, left, bottom, right, border}", function() {
+    var layout = { top: 10, left: 10, bottom: 10, right: 10, border: 2 };
+    var no_f = { x: 12, y: 12, width: 0, height: 0 } ;
+    var with_f = { x: 12, y: 12, width: 176, height: 176 } ;
+    var s = { top: 10, left: 10, bottom: 10, right: 10,
+               borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 } ;
+
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+  }) ;
+
+  test("layout {top, left, bottom, right, borderTop, borderLeft, borderRight, borderBottom}", function() {
+    var layout = { top: 10, left: 10, bottom: 10, right: 10, borderTop: 1, borderRight: 2, borderBottom: 3, borderLeft: 4 };
+    var no_f = { x: 14, y: 11, width: 0, height: 0 } ;
+    var with_f = { x: 14, y: 11, width: 174, height: 176 } ;
+    var s = { top: 10, left: 10, bottom: 10, right: 10,
+               borderTopWidth: 1, borderRightWidth: 2, borderBottomWidth: 3, borderLeftWidth: 4 } ;
+
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+  }) ;
+
+  test("layout {top, left, bottom, right, border, borderTop, borderLeft}", function() {
+    var layout = { top: 10, left: 10, bottom: 10, right: 10, border: 5, borderTop: 1, borderRight: 2 };
+    var no_f = { x: 15, y: 11, width: 0, height: 0 } ;
+    var with_f = { x: 15, y: 11, width: 173, height: 174 } ;
+    var s = { top: 10, left: 10, bottom: 10, right: 10,
+               borderTopWidth: 1, borderRightWidth: 2, borderBottomWidth: 5, borderLeftWidth: 5 } ;
+
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+  }) ;
+
+  test("layout {bottom, right, width, height, border}", function() {
+
+    var layout = { bottom: 10, right: 10, width: 50, height: 50, border: 2 };
+    var no_f = { x: 2, y: 2, width: 46, height: 46 } ;
+    var with_f = { x: 142, y: 142, width: 46, height: 46 } ;
+    var s = { bottom: 10, right: 10, width: 46, height: 46,
+              borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 } ;
+
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+  }) ;
+
+  test("layout {centerX, centerY, width, height, border}", function() {
+
+    var layout = { centerX: 10, centerY: 10, width: 60, height: 60, border: 2 };
+    var no_f = { x: 12, y: 12, width: 56, height: 56 } ;
+    var with_f = { x: 82, y: 82, width: 56, height: 56 } ;
+    var s = { marginLeft: -18, marginTop: -18, width: 56, height: 56, top: "50%", left: "50%",
+              borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 } ;
+
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+  }) ;
+
+  test("layout {top, left, width: auto, height: auto}", function() {
+    child = SC.View.create({
+      useStaticLayout: YES,
+      render: function(context) {
+        // needed for auto
+        context.push('<div style="padding: 10px"></div>');
+      }
+    });
+
+    // parent MUST have a layer.
+    parent.createLayer();
+    var layer = parent.get('layer');
+    document.body.appendChild(layer);
+
+    var layout = { top: 0, left: 0, width: 'auto', height: 'auto', border: 2 };
+    var no_f = null;
+    var with_f = undefined; //{ x: 2, y: 2, width: 196, height: 196 };
+    var s = { top: 0, left: 0, width: 'auto', height: 'auto',
+              borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 };
+
+    performLayoutTest(layout, no_f, s, with_f, s);
+
+    layer.parentNode.removeChild(layer);
+  });
+
 
   // ..........................................................
   // TEST FRAME/STYLEFRAME WHEN PARENT VIEW IS RESIZED

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/prepareContext.js

@@ -96,6 +96,21 @@ test("adds disabled class if view isEnabled = NO", function() {
   
 });
 
+test("adds aria-disabled attribute if view isEnabled = NO", function() {
+  var view = SC.View.create(),
+      context = view.renderContext();
+  
+  context = view.renderContext();
+  view.set('isEnabled', NO);
+  view.prepareContext(context, YES);
+  ok(context.attr('aria-disabled'), 'should have the aria-disabled attribute');
+  
+  view.set('isEnabled', YES);
+  view.prepareContext(context, YES);
+  ok(context.attr('aria-disabled') === null, 'should NOT have the aria-disabled attribute');
+  
+});
+
 test("adds hidden class if view isVisible = NO", function() {
 
   var view = SC.View.create() ;

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/updateLayerLocation.js

@@ -150,6 +150,25 @@ test("CASE 5b: insert child w/ layer before a sibling w/ NO layer - should creat
 	ok(parentHasChild(newParentLayer, childLayer), 'newParentLayer should have childLayer');
 });
 
+test("should insert a CoreView without layer before a sibling with layer", function() {
+  var newParent = SC.View.create().createLayer();
+  var newParentLayer = newParent.get('layer');
+
+  var sibling = SC.View.create().createLayer();
+  var siblingLayer = sibling.get('layer');
+
+  ok(newParentLayer, 'precond - newParent has a layer');
+  ok(sibling.get('layer'), 'precond - sibling has a layer');
+
+  child = SC.CoreView.create();
+
+  newParent.appendChild(sibling);
+  newParent.insertBefore(child, sibling);
+
+  ok(parentHasChild(newParentLayer, child.get('layer')), "child layer should belong to parent layer");
+  equals(child.get('layer').nextSibling, siblingLayer, "child layer should be inserted before sibling layer");
+});
+
 // .......................................................
 //  updateLayerLocationIfNeeded() 
 //

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/template/collection.js

@@ -79,6 +79,8 @@ SC.TemplateCollectionView = SC.TemplateView.extend({
       view.createLayer().$().appendTo(this.$());
     }
 
+    var itemOptions = this.itemViewOptions || {};
+
     // Add items, using previous if possible
     for (i=0, length=array.get('length'); i < length; i++) {
       item = array.objectAt(i);
@@ -86,7 +88,12 @@ SC.TemplateCollectionView = SC.TemplateView.extend({
       if (!view) {
         view = this.createChildView(itemViewClass.extend({
           content: item,
-          tagName: 'li'
+          tagName: 'li',
+
+          render: function(context) {
+            sc_super();
+            SC.Handlebars.ViewHelper.applyAttributes(itemOptions, this, context);
+          }
         }));
         view.createLayer().$().appendTo(this.$());
       }

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view.js

@@ -129,6 +129,17 @@ SC.CoreView.reopen(
   isVisible: YES,
   isVisibleBindingDefault: SC.Binding.bool(),
 
+  /**
+    Whether the view should be displayed. This is always YES,
+    unless the visibility module is added to SC.View.
+
+    If the visibility module is added, this property will be used to
+    optimize certain behaviors on the view. For example, updates to the
+    view layer will not be performed until the view becomes visible
+    in the window.
+  */
+  isVisibleInWindow: YES,
+
   // ..........................................................
   // CHILD VIEW SUPPORT
   //
@@ -257,6 +268,17 @@ SC.CoreView.reopen(
     return this;
   },
 
+  /**
+    Marks the view as needing a display update if the isVisible property changes.
+
+    Note that this behavior is identical to a display property. It is broken out
+    into its own observer so that it can be overridden with additional
+    functionality if the visibility module is applied to SC.View.
+  */
+  _sc_isVisibleDidChange: function() {
+    this.displayDidChange();
+  }.observes('isVisible'),
+
   /**
     Setting this property to YES will cause the updateLayerIfNeeded method to
     be invoked at the end of the runloop.  You can also force a view to update
@@ -500,6 +522,78 @@ SC.CoreView.reopen(
     this.invokeOnce(this.updateLayerLocation) ;
   },
 
+  /**
+    If the parent view has changed, we need to insert this
+    view's layer into the layer of the new parent view.
+  */
+  parentViewDidChange: function() {
+    this.updateLayerLocation();
+  },
+
+  /**
+    This method is called when a view changes its location in the view
+    hierarchy.  This method will update the underlying DOM-location of the
+    layer so that it reflects the new location.
+
+    @returns {SC.View} receiver
+  */
+  updateLayerLocation: function() {
+    // collect some useful value
+    // if there is no node for some reason, just exit
+    var node = this.get('layer'),
+        parentView = this.get('parentView'),
+        parentNode = parentView ? parentView.get('containerLayer') : null ;
+
+    // remove node from current parentNode if the node does not match the new
+    // parent node.
+    if (node && node.parentNode && node.parentNode !== parentNode) {
+      node.parentNode.removeChild(node);
+    }
+
+    // CASE 1: no new parentView.  just remove from parent (above).
+    if (!parentView) {
+      if (node && node.parentNode) { node.parentNode.removeChild(node); }
+
+    // CASE 2: parentView has no layer, view has layer.  destroy layer
+    // CASE 3: parentView has no layer, view has no layer, nothing to do
+    } else if (!parentNode) {
+      if (node) {
+        if (node.parentNode) { node.parentNode.removeChild(node); }
+        this.destroyLayer();
+      }
+
+    // CASE 4: parentView has layer, view has no layer.  create layer & add
+    // CASE 5: parentView has layer, view has layer.  move layer
+    } else {
+      if (!node) {
+        this.createLayer() ;
+        node = this.get('layer') ;
+        if (!node) { return; } // can't do anything without a node.
+      }
+
+      var siblings = parentView.get('childViews'),
+          nextView = siblings.objectAt(siblings.indexOf(this)+1),
+          nextNode = (nextView) ? nextView.get('layer') : null ;
+
+      // before we add to parent node, make sure that the nextNode exists...
+      if (nextView && (!nextNode || nextNode.parentNode!==parentNode)) {
+        nextView.updateLayerLocationIfNeeded() ;
+        nextNode = nextView.get('layer') ;
+      }
+
+      // add to parentNode if needed.
+      if ((node.parentNode!==parentNode) || (node.nextSibling!==nextNode)) {
+        parentNode.insertBefore(node, nextNode) ;
+      }
+    }
+
+    parentNode = parentView = node = nextNode = null ; // avoid memory leaks
+
+    this.set('layerLocationNeedsUpdate', NO) ;
+
+    return this ;
+  },
+
   /** @private -
     Invokes willDestroyLayer() on view and child views.  Then sets layer to
     null for receiver.
@@ -585,9 +679,6 @@ SC.CoreView.reopen(
   applyAttributesToContext: function(context) {
     context.addClass(this.get('classNames'));
 
-    var cursor = this.get('cursor');
-    if (cursor) { context.addClass(cursor.get('className')); }
-
     if (this.get('isTextSelectable')) { context.addClass('allow-select'); }
     if (!this.get('isVisible')) { context.addClass('hidden'); }
     if (this.get('isFirstResponder')) { context.addClass('focus'); }
@@ -844,6 +935,90 @@ SC.CoreView.reopen(
     }
   },
 
+  /**
+    Frame describes the current bounding rect for your view.  This is always
+    measured from the top-left corner of the parent view.
+
+    @property {Rect}
+    @test in layoutStyle
+  */
+  frame: function() {
+    return this.computeFrameWithParentFrame(null) ;
+  }.property('useStaticLayout').cacheable(),    // We depend on the layout, but layoutDidChange will call viewDidResize to check the frame for us
+
+  /**
+    Computes the frame of the view by examining the view's DOM representation.
+    If no representation exists, returns null.
+
+    If a parent view is passed, its bounds will be taken into account when
+    calculating the frame.
+
+    @param {Rect} pdim the parent view's dimensions
+    @returns {Rect} the computed frame
+  */
+  computeFrameWithParentFrame: function(pdim) {
+    var layer;
+    var pv = this.get('parentView');
+
+    // need layer to be able to compute rect
+    if (layer = this.get('layer')) {
+      f = SC.viewportOffset(layer); // x,y
+      if (pv) { f = pv.convertFrameFromView(f, null); }
+
+      /*
+        TODO Can probably have some better width/height values - CC
+        FIXME This will probably not work right with borders - PW
+      */
+      f.width = layer.offsetWidth;
+      f.height = layer.offsetHeight;
+      return f;
+    }
+    return null; // can't compute
+  },
+
+  /**
+    The clipping frame returns the visible portion of the view, taking into
+    account the clippingFrame of the parent view.  Keep in mind that
+    the clippingFrame is in the context of the view itself, not it's parent
+    view.
+
+    Normally this will be calculated based on the intersection of your own
+    clippingFrame and your parentView's clippingFrame.
+
+    @property {Rect}
+  */
+  clippingFrame: function() {
+    var f = this.get('frame'),
+        ret = f,
+        pv, cf;
+
+    if (!f) return null;
+    pv = this.get('parentView');
+    if (pv) {
+      cf = pv.get('clippingFrame');
+      if (!cf) return f;
+      ret = SC.intersectRects(cf, f);
+    }
+    ret.x -= f.x;
+    ret.y -= f.y;
+
+    return ret;
+  }.property('parentView', 'frame').cacheable(),
+
+  /** @private
+    This method is invoked whenever the clippingFrame changes, notifying
+    each child view that its clippingFrame has also changed.
+  */
+  _sc_view_clippingFrameDidChange: function() {
+    var cvs = this.get('childViews'), len = cvs.length, idx, cv ;
+    for (idx=0; idx<len; ++idx) {
+      cv = cvs[idx] ;
+
+      cv.notifyPropertyChange('clippingFrame') ;
+      cv._sc_view_clippingFrameDidChange();
+    }
+  },
+
   /**
     Removes the child view from the parent view.
 
@@ -967,7 +1142,7 @@ SC.CoreView.reopen(
         }
 
         if (!view) {
-          console.error ("No view with name "+key+" has been found in "+this.toString());
+          SC.Logger.error ("No view with name "+key+" has been found in "+this.toString());
           // skip this one.
           continue;
         }