sproutcore 1.10.3.1 → 1.11.0.rc1

data/lib/frameworks/sproutcore/frameworks/ajax/tests/system/xhr_response_test.js

@@ -0,0 +1,65 @@
+// ==========================================================================
+// Project:   SproutCore
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+/*globals module, test, ok */
+
+var url, test_timeout = 2500;
+
+module("SC.XHRResponse", {
+
+  setup: function() {
+    url = sc_static("file_exists.json");
+  },
+
+  teardown: function() {
+    url = null;
+  }
+
+});
+
+/**
+  If the request is across domains, we need to set the `withCredentials` property of the XHR request
+  to true in order to allow Cookies to be passed.
+*/
+test("Test cross domain request credentials support (Default).", function() {
+  var request = SC.Request.getUrl('http://some-bogus-cross-domain.fake/' + url).json();
+
+  request.notify(this, function(response) {
+    ok(response.get('rawRequest').withCredentials, "The XHR request should have the withCredentials property set to true.");
+
+    window.start();
+  });
+
+  window.stop(test_timeout); // Stops the test runner
+
+  request.send();
+});
+
+test("Test cross domain request credentials support (Prohibited).", function() {
+  var request = SC.Request.getUrl('http://some-bogus-cross-domain.fake/' + url).json().credentials(false); // Don't allow credentials.
+
+  request.notify(this, function(response) {
+    ok(!response.get('rawRequest').withCredentials, "The XHR request should have the withCredentials property set to false.");
+
+    window.start();
+  });
+
+  window.stop(test_timeout); // Stops the test runner
+
+  request.send();
+});
+
+test("Test same domain request credentials support (Ignored).", function() {
+  var request = SC.Request.getUrl(url).json();
+
+  request.notify(this, function(response) {
+    ok(!response.get('rawRequest').withCredentials, "The XHR request should have the withCredentials property set to false (because it's same domain).");
+
+    window.start();
+  });
+
+  window.stop(test_timeout); // Stops the test runner
+
+  request.send();
+});

data/lib/frameworks/sproutcore/frameworks/bootstrap/system/loader.js

@@ -34,6 +34,7 @@ SC.setupBodyClassNames = function() {
   // in practical usage.
   ieVersion = parseInt(SC.browser.version, 10);
   if (SC.browser.isIE) {
+    classNames.push('msie'); // Used by several framework CSS declarations, including the one to address issue #971.
     if (ieVersion === 7) {
       classNames.push('ie7');
     }
@@ -43,6 +44,9 @@ SC.setupBodyClassNames = function() {
     else if (ieVersion === 9) {
       classNames.push('ie9');
     }
+    else if  (ieVersion === 10) {
+      classNames.push('ie10');
+    }
   }
 
   if(browser==="safari" || browser==="chrome") classNames.push('webkit');

data/lib/frameworks/sproutcore/frameworks/core_foundation/child_view_layouts/horizontal_stack_layout.js

@@ -11,18 +11,15 @@ SC.mixin(SC.View,
 
   /**
     This child layout plugin automatically positions the view's child views in a
-    horizontal stack and optionally adjusts the parent view's height to fit.  It
-    does this by checking the height of each child view and positioning the
-    following child view accordingly.  By default any time that a child view's
-    height changes, the view will use this plugin to re-adjust all other child
-    views and its own height appropriately.
-
-    A typical usage scenario is a long "form" made of multiple subsection
-    views.  If we want to adjust the height of a subsection, to make space for
-    an error label for example, it would be a lot of work to manually
-    reposition all the following sections below it.  A much easier to code and
-    cleaner solution is to just set the childViewLayout plugin on the wrapper
-    view.
+    horizontal stack and optionally adjusts the view's width to fit. It does this
+    by checking the width of each child view and positioning the following child
+    views accordingly. Afterwards, by default, any time that a child view's
+    width or visibility changes, the view will use this plugin to re-adjust all
+    following child views' positions and potentially its own width appropriately.
+
+    This allows you to stack absolutely positioned views that dynamically change
+    their width and/or visibility without having to resort to using browser
+    flow layout.
 
     For example,
 
@@ -34,27 +31,38 @@ SC.mixin(SC.View,
           // The order of child views is important!
           childViews: ['sectionA', 'sectionB', 'sectionC'],
 
-          // Actual layout will become { left: 10, bottom: 20, top: 20, width: 270 }
-          layout: { left: 10, bottom: 20, top: 20 }, // Don't need to specify layout.width, this is automatic.
+          // The view will resize itself to fit its children.
+          // i.e. We don't need to specify layout.width, this is automatic.
+          // The actual layout will become { left: 10, bottom: 20, top: 20, width: 270 } initially.
+          layout: { left: 10, bottom: 20, top: 20 },
 
           sectionA: SC.View.design({
-            // Actual layout will become { left: 0, bottom: 0, top: 0, width: 100 }
-            layout: { width: 100 } // Don't need to specify layout.left, this is automatic.
+
+            // We don't need to specify layout.left, this is automatic.
+            // The actual layout will become { left: 0, bottom: 0, top: 0, width: 100 } initially.
+            layout: { width: 100 }
+
           }),
 
           sectionB: SC.View.design({
-            // Actual layout will become { border: 1, left: 100, bottom: 0, top: 0, width: 50 }
-            layout: { border: 1, width: 50 } // Don't need to specify layout.left, this is automatic.
+
+            // We don't need to specify layout.left, this is automatic.
+            // The actual layout will become { border: 1, left: 100, bottom: 0, top: 0, width: 50 } initially.
+            layout: { border: 1, width: 50 }
+
           }),
 
           sectionC: SC.View.design({
-            // Actual layout will become { left: 150, bottom: 10, top: 10, width: 120 }
-            layout: { right: 10, top: 10, width: 120 } // Don't need to specify layout.left, this is automatic.
+
+            // We don't need to specify layout.left, this is automatic.
+            // The actual layout will become { left: 150, bottom: 10, top: 10, width: 120 } initially.
+            layout: { right: 10, top: 10, width: 120 }
+
           })
 
         });
 
-    ## Modify all child view layouts with `childViewLayoutOptions`
+    ## Modify the default behavior with `childViewLayoutOptions`
 
     To modify the plugin behavior for all child view layouts, you can set the
     following child view layout options in `childViewLayoutOptions` on the view:
@@ -81,31 +89,45 @@ SC.mixin(SC.View,
           // The order of child views is important!
           childViews: ['sectionA', 'sectionB', 'sectionC'],
 
-          // Actual layout will become { left: 10, bottom: 20, top: 20, width: 310 }
+          // The view will resize itself to fit its children. The actual layout will become { left: 10, bottom: 20, top: 20, width: 310 }
           layout: { left: 10, bottom: 20, top: 20 }, // Don't need to specify layout.width, this is automatic.
 
           sectionA: SC.View.design({
+
             // Actual layout will become { left: 10, bottom: 0, top: 0, width: 100 }
             layout: { width: 100 } // Don't need to specify layout.left, this is automatic.
+
           }),
 
           sectionB: SC.View.design({
+
             // Actual layout will become { border: 1, left: 115, bottom: 0, top: 0, width: 50 }
             layout: { border: 1, width: 50 } // Don't need to specify layout.left, this is automatic.
+
           }),
 
           sectionC: SC.View.design({
+
             // Actual layout will become { left: 170, top: 10, bottom: 10, width: 120 }
             layout: { top: 10, bottom: 10, width: 120 } // Don't need to specify layout.left, this is automatic.
+
           })
 
         });
 
     If `resizeToFit` is set to `false`, the view will not adjust itself to fit
     its child views.  This means that when `resizeToFit` is false, the view should
-    specify its width component in its layout.  This also means that you can
-    ignore the last child view's layout width if you want the last child view
-    to stretch to fill the parent view.
+    specify its width component in its layout. A direct effect of this is the
+    possibility for the child views to automatically expand or shrink in order to
+    fill the empty, unclaimed space of the view.
+
+    This available space is shared between all children that don't specify a fixed width
+    such that their final width is calculated proportionally to the value of the
+    property `fillRatio`.
+
+    For simplicity, when none of the children specifies `fillRatio`,
+    you can ignore the last child view's layout width and the last child view
+    will stretch to fill the parent view.
 
     For example,
 
@@ -118,28 +140,48 @@ SC.mixin(SC.View,
           childViewLayoutOptions: {
             paddingBefore: 10,
             paddingAfter: 20,
-            spacing: 5
+            spacing: 5,
+            resizeToFit: false // Setting this to false, so that the child views stretch/contract to fit the parent's size.
           },
 
           // The order of child views is important!
           childViews: ['sectionA', 'sectionB', 'sectionC'],
 
-          // Actual layout will become { left: 10, bottom: 20, top: 20, width: 500 }
-          layout: { left: 10, bottom: 20, top: 20, width: 500 }, // Need to specify layout.width.
+          // The parent view will not resize itself to fit its contents, so we specify the width.
+          layout: { left: 10, bottom: 20, top: 20, width: 500 },
 
           sectionA: SC.View.design({
+
+            // We don't need to specify layout.left, this is automatic. This child will not stretch, its width is set.
             // Actual layout will become { left: 10, bottom: 0, top: 0, width: 100 }
-            layout: { width: 100 } // Don't need to specify layout.left, this is automatic.
+            layout: { width: 100 }
+
           }),
 
           sectionB: SC.View.design({
-            // Actual layout will become { border: 1, left: 115, bottom: 0, top: 0, width: 50 }
-            layout: { border: 1, width: 50 } // Don't need to specify layout.left, this is automatic.
+
+            // The unclaimed space so far is 500 - 10 - 100 - 5 - 5 - 20, or 360px. This space will be shared between
+            // the two last sections, because we won't specity a width on them.
+            // This view will get 1/3 of the available space, because the other flexibile view has a ratio of 2.
+            fillRatio: 1,
+
+            // This section will take 1/3 * 360px = 120px.
+            // Actual layout will become { border: 1, left: 115, bottom: 0, top: 0, right: 265 }, in other words, width == 120
+            // We don't need to specify layout.left, layout.right or layout.width, this is automatic.
+            layout: { border: 1 }
+
           }),
 
           sectionC: SC.View.design({
-            // Actual layout will become { left: 170, top: 10, bottom: 10, right: 20 }
-            layout: { top: 10, bottom: 10 } // Don't need to specify layout.left, layout.right or layout.width, this is automatic.
+
+            // This view will get 2/3 of the available space, because the other flexibile view has a ratio of 1.
+            fillRatio: 2,
+
+            // This section will take 2/3 * 360px = 240px.
+            // Actual layout will become { left: 240, top: 10, bottom: 10, right: 20 }, in other words, width == 240
+            // We don't need to specify layout.left, layout.right or layout.width, this is automatic.
+            layout: { top: 10, bottom: 10 }
+
           })
 
         });
@@ -154,6 +196,7 @@ SC.mixin(SC.View,
       - useAbsoluteLayout - Don't include this child view in automatic layout, use absolute positioning based on the child view's `layout` property.
       - useStaticLayout - Don't include this child view in automatic layout.  This child view uses relative positioning and is not eligible for automatic layout.
       - isVisible - Non-visible child views are not included in the stack.
+      - fillRatio - When the parent view is configured with a fixed dimension, children not specifying a width but specifying fillRatio will be resized to fill the unclaimed space proportionally to this ratio.
 
       For example,
 
@@ -219,6 +262,17 @@ SC.mixin(SC.View,
     /** @private Properties to observe on child views that affect the overall child view layout. */
     childLayoutProperties: ['marginBefore', 'marginAfter', 'isVisible'],
 
+    /** @private When resizeToFit is false, then we need to know when the view's frame changes. */
+    layoutDependsOnSize: function (view) {
+      var options = view.get('childViewLayoutOptions');
+
+      if (options) {
+        return SC.none(options.resizeToFit) ? false : !options.resizeToFit;
+      } else {
+        return false;
+      }
+    },
+
     /** @private */
     layoutChildViews: function (view) {
       var childViews = view.get('childViews'),
@@ -227,14 +281,96 @@ SC.mixin(SC.View,
         lastMargin = 0, // Used to avoid adding spacing to the final margin.
         marginAfter = options.paddingBefore || 0,
         paddingAfter = options.paddingAfter || 0,
-        position = 0,
+        leftPosition = 0,
+        provisionedSpace = 0,
+        autoFillAvailableSpace = 0,
+        totalAvailableSpace = 0,
+        totalFillAvailableSpaceRatio = 0,
         spacing = options.spacing || 0,
+        childView,
+        fillRatio,
+        layout,
+        marginBefore,
         i, len;
 
+      // if the view is not configured to resize to fit content, then we give a chance to the children to fill the available space
+      // we make a 1st pass to check the conditions, to evaluate the available space and the proportions between children
+      if (!resizeToFit) {
+
+        totalAvailableSpace = view.get('frame').width;
+
+        // if the view is not configured to resize and it doesn't have yet a width, it doesn't make sense to layout children
+        if (!totalAvailableSpace) {
+          return;
+        }
+
+        for (i = 0, len = childViews.get('length'); i < len; i++) {
+          childView = childViews.objectAt(i);
+
+          // Ignore child views with useAbsoluteLayout true, useStaticLayout true or that are not visible.
+          if (!childView.get('isVisible') ||
+            childView.get('useAbsoluteLayout') ||
+            childView.get('useStaticLayout')) {
+            continue;
+          }
+
+          layout = childView.get('layout');
+
+          // Determine the left margin.
+          marginBefore = childView.get('marginBefore') || 0;
+          provisionedSpace += Math.max(marginAfter, marginBefore);
+
+          // if the width is not set, let's check if is possible to resize the view
+          if (SC.none(layout.width)) {
+            fillRatio = childView.get('fillRatio');
+
+            if (!SC.none(fillRatio)) {
+              totalFillAvailableSpaceRatio += fillRatio;
+            } else {
+              // if none of the child views has fillRatio defined, allow the last one to stretch and fill the available space.
+              if (i == len - 1 && totalFillAvailableSpaceRatio === 0) {
+                totalFillAvailableSpaceRatio = 1;
+              }
+              //@if(debug)
+              // Add some developer support.
+              else {
+                // even if we don't have a width set, as last instance we accept the presence of minWidth
+                if (SC.none(layout.minWidth))
+                {
+                  SC.warn('Developer Warning: The SC.View.HORIZONTAL_STACK plugin requires that each childView layout contains at least a width or has a configured fillRatio. The layout may also optionally contain top and bottom, top and height, bottom and height or centerY and height.  The childView %@ has an invalid layout/fillRatio: %@'.fmt(childView, SC.stringFromLayout(layout)));
+                  return;
+                }
+              }
+              //@endif
+            }
+          } else {
+            provisionedSpace += childView.getPath('borderFrame.width');
+          }
+
+          // Determine the right margin.
+          lastMargin = childView.get('marginAfter') || 0;
+          marginAfter = lastMargin || spacing;
+        }
+
+        // consider the end padding when calculating the provisionedSpace
+        if (provisionedSpace !== 0 || totalFillAvailableSpaceRatio !== 0) {
+          provisionedSpace += Math.max(lastMargin, paddingAfter);
+        }
+
+        autoFillAvailableSpace = Math.max(0, totalAvailableSpace - provisionedSpace);
+      }
+
+      // reset the references for the effective layout
+      lastMargin = 0;
+      marginAfter = options.paddingBefore || 0;
+      paddingAfter = options.paddingAfter || 0;
+
       for (i = 0, len = childViews.get('length'); i < len; i++) {
-        var childView = childViews.objectAt(i),
-          layout,
-          marginBefore;
+        var width,
+          adjustLeft,
+          adjustRight;
+
+        childView = childViews.objectAt(i);
 
         // Ignore child views with useAbsoluteLayout true, useStaticLayout true or that are not visible.
         if (!childView.get('isVisible') ||
@@ -244,39 +380,83 @@ SC.mixin(SC.View,
         }
 
         layout = childView.get('layout');
+
         //@if(debug)
-        // Add some developer support.
-        if (SC.none(layout.width) && (i < len - 1 || resizeToFit)) {
-          SC.warn('Developer Warning: The SC.View.HORIZONTAL_STACK plugin requires that each childView layout contains at least a width and optionally also top and bottom, top and height, bottom and height or centerY and height.  The childView %@ has an invalid layout: %@'.fmt(childView, SC.stringFromLayout(layout)));
+        // Add some developer support. The case of !resizeToFit was already checked above
+        if (resizeToFit && SC.none(layout.width) && SC.none(layout.minWidth)) {
+          SC.warn('Developer Warning: The SC.View.HORIZONTAL_STACK plugin, when configured with resizeToFit, requires that each childView layout contains at least a width/minWidth and optionally also top and bottom, top and height, bottom and height or centerY and height.  The childView %@ has an invalid layout: %@'.fmt(childView, SC.stringFromLayout(layout)));
           return;
         }
         //@endif
 
         // Determine the left margin.
         marginBefore = childView.get('marginBefore') || 0;
-        position += Math.max(marginAfter, marginBefore);
+        leftPosition += Math.max(marginAfter, marginBefore);
 
-        if (layout.left !== position) {
-          childView.adjust('left', position);
+        // Try to avoid useless adjustments left or right or left then right.
+        // The required adjustments will be merged into a single call
+        adjustLeft = layout.left !== leftPosition;
+
+        childView.beginPropertyChanges();
+        if (!resizeToFit && !layout.width) {
+          var rightPosition;
+
+          fillRatio = childView.get('fillRatio');
+
+          // if the last child doesn't define fillRatio, default it to 1 as above during the 1st pass
+          if (i == len - 1 && SC.none(fillRatio)) {
+            fillRatio = 1;
+          }
 
-          // Allow the last child view to stretch.
-          if (!resizeToFit && !layout.width && !layout.right) {
-            childView.adjust('right', paddingAfter);
+          // we should get here only in two cases: 1. child defines fillRatio, 2. child defines a minWidth
+          // if both defined, we prefer to handle fillRatio, the other case being handled below by the normal adjustment to left
+          if (!SC.none(fillRatio)) {
+            var currentAvailableSpaceRatio = (fillRatio / totalFillAvailableSpaceRatio);
+
+            // calculate the width according to fillRatio and totalFillAvailableSpaceRatio
+            // but set the "right" position so any subsequent layout is not considering the width as fixed
+            width = Math.ceil(autoFillAvailableSpace * currentAvailableSpaceRatio);
+
+            // INCOMPLETE: We need to flag this view as constrained and re-compute all the auto-fill amounts
+            // Constrain the width to the maximum width allowed.
+            // var maxWidth = layout.maxWidth;
+            // if (!SC.none(maxWidth)) {
+            //   // Constrain the width according to maxWidth. Which frees up additional available space for further child views.
+            //   if (width > maxWidth) {
+            //     width = maxWidth;
+            //   }
+            // }
+
+            // Determine the right position. If the position overflows (i.e. goes negative) because of rounding up, stop at 0.
+            rightPosition = Math.max(0, totalAvailableSpace - leftPosition - width);
+            adjustRight = layout.right !== rightPosition;
+
+            if (adjustRight) {
+              childView.adjust('right', rightPosition);
+            }
           }
         }
-        position += childView.getPath('borderFrame.width');
+
+        if (adjustLeft) {
+          childView.adjust('left', leftPosition);
+        }
+        childView.endPropertyChanges();
+
+        leftPosition += childView.getPath('borderFrame.width');
 
         // Determine the right margin.
         lastMargin = childView.get('marginAfter') || 0;
         marginAfter = lastMargin || spacing;
       }
 
-      // Adjust our frame to fit as well, this ensures that scrolling works.
       // If the current size is 0 (all children are hidden), it doesn't make sense to add the padding
-      if (position !== 0)
-        position += Math.max(lastMargin, paddingAfter);
-      if (resizeToFit && view.getPath('layout.width') !== position) {
-        view.adjust('width', position);
+      if (leftPosition !== 0) {
+        leftPosition += Math.max(lastMargin, paddingAfter);
+      }
+
+      // Adjust our frame to fit as well, this ensures that scrolling works.
+      if (resizeToFit && view.getPath('layout.width') !== leftPosition) {
+        view.adjust('width', leftPosition);
       }
     }