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

data/lib/frameworks/sproutcore/frameworks/designer/ext/binding.js

@@ -0,0 +1,33 @@
+// ========================================================================
+// SproutCore -- JavaScript Application Framework
+// ========================================================================
+
+/** 
+  Extend SC.Binding with properites that make it easier to detect bindings
+  in the inspector
+*/
+SC.Binding.isBinding = true;
+
+
+SC.Binding.displayValue = function(){
+  var from = this._fromRoot ? "<%@>:%@".fmt(this._fromRoot,this._fromPropertyPath) : this._fromPropertyPath;
+
+  var to = this._toPropertyPath;
+
+  var oneWay = this._oneWay ? '[oneWay]' : '';
+  return "%@ -> %@ %@".fmt(from, to, oneWay);
+
+};
+
+
+SC.Binding.encodeDesign = function(coder){
+  var ret = "SC.Binding";
+  
+  if(this._fromPropertyPath){
+    ret= ret+".from('"+this._fromPropertyPath+"')";
+  }
+  if(this._oneWay){
+    ret = ret+".oneWay()";
+  }
+  return ret;//coder.js(key,ret);
+};

data/lib/frameworks/sproutcore/frameworks/designer/ext/object.js

@@ -11,7 +11,7 @@
 SC.Object.prototype.emitDesign = function() {
   
   // get design...
-  var ret = SC.DesignCoder.encode(this);
+  var ret = SC.ObjectCoder.encode(this);
   
   return ret ;
 };

data/lib/frameworks/sproutcore/frameworks/designer/ext/page.js

@@ -39,48 +39,20 @@ SC.Page.prototype.designController = function() {
   return this._designController ;
 }.property().cacheable();
 
-/**
-  Extend SC.Page to emit the localization for the current configuration of the
-  view and all of its subviews.
-*/
-SC.Page.prototype.emitLocalization = function(design) {
-
-  // awake all views.  this is needed to emit the design for them.
-  this.awake();
-
-  // the pageName must be set on the page so we can emit properly
-  var pageName = this.get('pageName');
-  
-  // now encode the page.
-  var ret = SC.LocalizationCoder.encode(this);
-
-  // and add some wrapper
-  ret = ['// SproutCore ViewBuilder Localization Format v1.0',
-    '// WARNING: This file is automatically generated.  DO NOT EDIT.  Changes you',
-    '// make to this file will be lost.', '',
-    '%@.loc(%@);'.fmt(pageName, ret),''].join("\n");
-  return ret ;
-} ;
-
 /** @private implement support for encoders */
 SC.Page.prototype.encodeDesign = function(c) {
   // step through and find all views.  encode them.
   for(var key in this) {
+    if(!this.hasOwnProperty(key)) continue;
     var view = this[key];
-    if (view instanceof SC.View || view instanceof SC.Controller || view instanceof SC.Object) c.js(key, view.emitDesign());
+    if (key !== '__sc_super__' && key !== '_designController' &&
+        (view instanceof SC.View || view instanceof SC.Controller || view instanceof SC.Object)){
+     c.js(key, view.emitDesign());      
+    }
   }
   
   // save page name;
   c.string('pageName', this.get('pageName'));
 };
-
-SC.Page.prototype.encodeLoc = function(c) {
-  // step through and find all views.  encode them.
-  for(var key in this) {
-    var view = this[key];
-    if (view instanceof SC.View) c.js(key, view.emitLocalization());
-  }
-};
-
   
 

data/lib/frameworks/sproutcore/frameworks/designer/ext/view.js

@@ -18,25 +18,6 @@ SC.View.prototype.emitDesign = function() {
   return ret ;
 };
 
-/**
-  Extend SC.View to emit the localization for the current configuration of the
-  view and all of its subviews.
-*/
-SC.View.prototype.emitLocalization = function(design) {
-  var ret = SC.LocalizationCoder.encode(this);
-  
-  // prepare rootElement HTML.  Get the design, apply loc and generate the
-  // emptyElement HTML...
-  if (!design) design = this.emitDesign();
-  var views = eval(design).loc(eval(ret)).create() ;
-  var emptyElement = views.computeEmptyElement().replace(/\'/g,"\'");
-  views.destroy();
-  
-  // now insert as extra param at end...
-  ret = ret.replace(/\)$/, ", '%@')".fmt(emptyElement)) ;
-  return ret ;
-} ;
-
 /** 
   Patch SC.View to respond to encodeDesign().  This will proxy to the paired
   designer, if there is one.  If there is no paired designer, returns NO.
@@ -44,11 +25,3 @@ SC.View.prototype.emitLocalization = function(design) {
 SC.View.prototype.encodeDesign = function(coder) {
   return this.designer ? this.designer.encodeDesign(coder) : NO ;
 };
-
-/** 
-  Patch SC.View to respond to encodeDesign().  This will proxy to the paired
-  designer, if there is one.  If there is no paired designer, returns NO.
-*/
-SC.View.prototype.encodeLoc = function(coder) {
-  return this.designer ? this.designer.encodeLoc(coder) : NO ;
-};

data/lib/frameworks/sproutcore/frameworks/designer/tests/coders/page.js

@@ -0,0 +1,54 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+/*globals module ok equals same test Sample */
+var basic, baseTypes, bindingPage, testView, design;
+
+
+module('SC.DesignCoder', {
+  setup: function () {
+    basic = SC.Page.design({});
+    testView = SC.View.extend({});
+    testView.Designer = SC.ViewDesigner.extend({
+      designProperties: 's n b a h valueBinding'.w()
+    });
+    
+    
+    baseTypes = SC.Page.create({
+      needsDesigner: true,
+      mainView: testView.design({s:'string',n:12,b:false,a:[1, 2, 3],h:{a:'b',c:'d'}})
+    });
+      
+    bindingPage = SC.Page.create({
+      number: 12,
+      needsDesigner: true,
+      mainView: testView.design({valueBinding: SC.Binding.from('.page.number')})//.create() //to get it to run on the binding itself...
+    });
+    
+  },
+
+  teardown: function () {
+  }
+});
+
+test('Verify basic page file encoding', function () {
+  design = SC.DesignCoder.encode(basic);
+  equals(design.trim(), 'SC.Page.design({})', 'basic page encoded');
+});
+
+test('Verify view in page encoding', function () {
+  baseTypes.awake();
+  design = SC.DesignCoder.encode(baseTypes);
+  equals(design.trim(),'SC.Page.design({mainView: SC.View.design({s: "string",n: 12,b: false,a: [1,2,3],h: {"a": "b","c": "d"}})})', 'basic types encoded');  
+});
+
+test('Verify binding in page encoding', function () {
+  SC.RunLoop.begin();
+  bindingPage.awake();
+  bindingPage.get('mainView');
+  SC.RunLoop.end();
+
+  design = SC.DesignCoder.encode(bindingPage);
+  equals(design.trim(),'SC.Page.design({mainView: SC.View.design({valueBinding: SC.Binding.from(\'.page.number\')})})', 'binding types encoded');  
+});

data/lib/frameworks/sproutcore/frameworks/designer/tests/designers/view_designer.js

@@ -0,0 +1,47 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Mike Ball and contributors.
+//            portions copyright @2009 Apple Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+/*global module test htmlbody ok equals same stop start v*/
+
+(function() {
+  var basic, testView, page;
+  // ..........................................................
+  // TEST VIEWS
+  // 
+  module('SC.ViewDesigner', {
+    setup: function () {
+      testView = SC.View.extend({
+        mouseDown: function(){
+          var page = this.get('page');
+          page.set('mouseDownInView', YES);
+        }
+      });
+      testView.Designer = SC.ViewDesigner.extend({
+        mouseDown: function(){
+          var page = this.get('page');
+          page.set('mouseDownInDesigner', YES);
+        }
+      });
+      basic = SC.Page.design({
+        needsDesigner: true, 
+        mouseDownInView: false, 
+        mouseDownInDesigner: false,
+        view: testView.design({})
+      });
+      
+      
+    },
+    teardown: function () {}
+  });
+
+  test("tryToPerform redirects to designer",function() {
+    var view = basic.get('view');
+    view.tryToPerform('mouseDown', {});
+    ok(basic.get('mouseDownInDesigner'), "designer got mouseDown");
+    ok(!basic.get('mouseDownInView'), "view did not get mouseDown");
+  });
+
+})();

data/lib/frameworks/sproutcore/frameworks/designer/views/drawing.js

@@ -173,15 +173,15 @@ SC.DrawingView = SC.View.extend({
             this._drawShapes(cntx);
           }
           else {
-            console.error("SC.DrawingView.render(): Canvas object context is not accessible.");
+            SC.Logger.error("SC.DrawingView.render(): Canvas object context is not accessible.");
           }
         }
         else {
-          console.error("SC.DrawingView.render(): Canvas element array length is zero.");
+          SC.Logger.error("SC.DrawingView.render(): Canvas element array length is zero.");
         }
       }
       else {
-        console.error("SC.DrawingView.render(): Canvas element is not accessible.");
+        SC.Logger.error("SC.DrawingView.render(): Canvas element is not accessible.");
       }
     }
     
@@ -190,7 +190,7 @@ SC.DrawingView = SC.View.extend({
   
   registerShapeDrawing: function(name, drawingFunction){
     if (!name) {
-      console.error('Can\'t register this drawing paradigm because name is null');
+      SC.Logger.error('Can\'t register this drawing paradigm because name is null');
       return NO;
     }
     

data/lib/frameworks/sproutcore/frameworks/desktop/mixins/border.js

@@ -100,7 +100,9 @@ SC.Border = {
 
   /** @private */
   initMixin: function() {
+    console.warn("SC.Border is deprecated, please set border in your layout");
     this._sc_border_borderStyleDidChange();
+    this._sc_border_borderDimensionsDidChange();
   },
 
   /** @private */
@@ -119,12 +121,23 @@ SC.Border = {
         borderSize = SC.Border.dimensions[borderStyle];
 
     if (borderSize) {
-      this.borderTop    = borderSize;
-      this.borderRight  = borderSize;
-      this.borderBottom = borderSize;
-      this.borderLeft   = borderSize;
+      this.beginPropertyChanges();
+      this.set('borderTop', borderSize);
+      this.set('borderRight', borderSize);
+      this.set('borderBottom', borderSize);
+      this.set('borderLeft', borderSize);
+      this.endPropertyChanges();
     }
-  }
+  },
+
+  _sc_border_borderDimensionsDidChange: function(){
+    var borderTop     = this.get('borderTop'),
+        borderRight   = this.get('borderRight'),
+        borderBottom  = this.get('borderBottom'),
+        borderLeft    = this.get('borderLeft');
+    this.adjust({ borderTop: borderTop, borderRight: borderRight, borderBottom: borderBottom, borderLeft: borderLeft });
+  }.observes('borderTop', 'borderRight', 'borderBottom', 'borderLeft')
+
 };
 
 SC.mixin(SC.Border, {
@@ -135,4 +148,4 @@ SC.mixin(SC.Border, {
     'sc-top-border': 1,
     'sc-bottom-border': 1
   }
-});
+});

data/lib/frameworks/sproutcore/frameworks/desktop/mixins/collection_view_delegate.js

@@ -8,7 +8,7 @@
 /**
   @namespace
 
-  A Collection View Delegate is consulted by a SC.CollectionView's to make
+  A Collection View Delegate is consulted by a SC.CollectionView to make
   policy decisions about certain behaviors such as selection control and
   drag and drop.  If you need to control other aspects of your data, you may
   also want to add the SC.CollectionContent mixin.

data/lib/frameworks/sproutcore/frameworks/desktop/mixins/navigation_builder.js

@@ -34,7 +34,7 @@ SC.NavigationBuilder = {
       this.mixin(animatable);
     } else if (!animatable) { 
       // check that we actually have SC.Animatable
-      console.error(
+      SC.Logger.error(
         "SC.NavigationView and SC.NavigationBuilder require SC.Animatable " + 
         "to perform animations, but it is not present. Please ensure your app or framework " +
         "references it."

data/lib/frameworks/sproutcore/frameworks/desktop/mixins/scrollable.js

@@ -22,7 +22,7 @@ SC.Scrollable = {
   
 //@if(debug)
   initMixin: function() {
-    console.warn("SC.Scrollable is deprecated and will be removed in a future version of SproutCore.  Consider pulling the mixin into your own app if you want to keep using it.");
+    SC.Logger.warn("SC.Scrollable is deprecated and will be removed in a future version of SproutCore.  Consider pulling the mixin into your own app if you want to keep using it.");
   },
 //@endif 
 

data/lib/frameworks/sproutcore/frameworks/desktop/panes/picker.js

@@ -34,87 +34,181 @@ SC.POINTER_LAYOUT = ["perfectRight", "perfectLeft", "perfectTop", "perfectBottom
 
 /**
   @class
-
-  Displays a non-modal, self anchor positioned picker pane.
-
-  The default way to use the picker pane is to simply add it to your page like this:
+  
+  Display a non-modal pane that automatically repositions around a view so as 
+  to remain visible. 
+  
+  An `SC.PickerPane` repositions around the view to which it is anchored as the 
+  browser window is resized so as to ensure the pane's content remains visible. 
+  A picker pane is useful for displaying supplementary information and does not 
+  block the user's interaction with other UI elements. Picker panes typically 
+  provide a better user experience than modal panels.
+
+  An `SC.PickerPane` repositions itself according to the optional `preferMatrix` 
+  argument passed in the `.popup()` method call. The `preferMatrix` either 
+  specifies an offset-based arrangement behavior or a position-based arrangement 
+  behavior depending on the `preferType` argument in the `.popup()` call.
+             
+  The simplest way to create and display a picker pane:
   
   {{{
-    SC.PickerPane.create({
-      layout: { width: 400, height: 200 },
-      contentView: SC.View.extend({
-      })
-    }).popup(anchor);
+    SC.PickerPane.create({ 
+        layout: { width: 400, height: 200 }, 
+        contentView: SC.View.extend({})
+    }).popup(someView);
   }}}
   
-  This will cause your picker pane to display.
+  This displays the `SC.PickerPane` anchored to `someView`. 
+      
+  h2. Positioning
+  
+  Picker pane positioning can be classified into two broad categories: 
+  offset-based and position-based. 
+  
+  h3. Offset-based
+    
+  When `preferType` is unspecified, `SC.PICKER_MENU` or `SC.PICKER_FIXED`, then 
+  the `preferMatrix` array describes the offset that is used to position the 
+  pane below the anchor. The offset is described by an array of three values,
+  defaulting to `[1, 4, 3]`. The first value controls the x offset and the second 
+  value the y offset. The third value can be `0` (right) or `3` (bottom), 
+  controlling whether the origin of the pane is further offset by the width 
+  (in the case of 0) or the height (in the case of 3) of the anchor.  
+  
+  
+  h3. Position-based
+  
+  When `preferType` is `SC.PICKER_POINTER` or `SC.PICKER_MENU_POINTER`, then 
+  the `preferMatrix` specifies the sides in the order in which you want the 
+  `SC.PickerPane` to try to arrange itself around the view to which it is 
+  anchored. The fifth element in the `preferMatrix` specifies which side the 
+  `SC.PickerPane` should display on when there isn't enough space around any 
+  of the preferred sides.
+  
+  Anchor sides are defined by their index in `SC.POINTER_LAYOUT`, where right 
+  is `0`, left is `1`, top is `2`, and bottom is `3`.
+  
+  For example, the `preferMatrix` of `[3, 0, 1, 2, 2]` says: "Display below the 
+  anchor (3); if there isn't enough space then display to the right of the anchor (0). 
+  If there isn't enough space either below or to the right of the anchor, then appear 
+  to the left (1), unless there is also no space on the left, in which case display 
+  above the anchor (2)."
+  
+  h2. Position Rules
+  
+  When invoking `.popup()` you can optionally specify a picker position rule with 
+  the `preferType` argument. 
+  
+  If no `preferType` is specified, the picker pane is displayed just below the anchor. 
+  The pane will reposition automatically for optimal visibility, ensuring the top-left 
+  corner is visible.
+  
+  These position rules have the following behaviors:
+  
+  h3.  `SC.PICKER_MENU`
+  
+  Positioning is offset-based, with `preferMatrix` defaulting to `[1, 4, 3]`. 
+  Furthermore, a minimum left and right padding to window, of 7px and 8px, respectively, 
+  is enforced.
+  
+  
+  h3. `SC.PICKER_FIXED`
+  
+  Positioning is offset-based, with `preferMatrix` defaulting to `[1, 4, 3]` and 
+  skipping `fitPositionToScreen`.
+  
+  
+  h3. `SC.PICKER_POINTER`
+  
+  Positioning is position-based, with `preferMatrix` defaulting to `[0, 1, 2, 3, 2]`, 
+  i.e. right > left > top > bottom; fallback to top.
+  
+  
+  h3. `SC.PICKER_MENU_POINTER`
+  
+  Positioning is position-based, with `preferMatrix` defaulting to `[3, 0, 1, 2, 3]`, 
+  i.e. bottom, right, left, top; fallback to bottom.
+  
+  
+  
+  h2. Examples
   
-  Picker pane is a simple way to provide non-modal messaging that won't 
-  blocks the user's interaction with your application.  Picker panes are 
-  useful for showing important detail informations with optimized position around anchor.
-  They provide a better user experience than modal panel.
-
   Examples for applying popular customized picker position rules:
   
   1. default:   
   {{{
-    SC.PickerPane.create({layout: { width: 400, height: 200 },contentView: SC.View.extend({})
+    SC.PickerPane.create({
+      layout: { width: 400, height: 200 },
+      contentView: SC.View.extend({})
     }).popup(anchor);
   }}}
 
-  2. menu below the anchor with default offset matrix [1,4,3]:   
+  2. menu below the anchor with default `preferMatrix` of `[1,4,3]`:   
   {{{
-    SC.PickerPane.create({layout: { width: 400, height: 200 },contentView: SC.View.extend({})
+    SC.PickerPane.create({
+      layout: { width: 400, height: 200 },
+      contentView: SC.View.extend({})
     }).popup(anchor, SC.PICKER_MENU);
   }}}
 
-  3. menu on the right side of anchor with custom offset matrix [2,6,0]:   
+  3. menu on the right side of anchor with custom `preferMatrix` of `[2,6,0]`:   
   {{{
-    SC.PickerPane.create({layout: { width: 400, height: 200 },contentView: SC.View.extend({})
+    SC.PickerPane.create({
+      layout: { width: 400, height: 200 },
+      contentView: SC.View.extend({})
     }).popup(anchor, SC.PICKER_MENU, [2,6,0]);
   }}}
 
-  4. fixed below the anchor with default offset matrix [1,4,3]:   
+  4. fixed below the anchor with default `preferMatrix` of `[1,4,3]`:   
   {{{
-    SC.PickerPane.create({layout: { width: 400, height: 200 },contentView: SC.View.extend({})
+    SC.PickerPane.create({
+      layout: { width: 400, height: 200 },
+      contentView: SC.View.extend({})
     }).popup(anchor, SC.PICKER_FIXED);
   }}}
 
-  5. fixed on the right side of anchor with custom offset matrix [-22,-17,0]:   
+  5. fixed on the right side of anchor with `preferMatrix` of `[-22,-17,0]`:   
   {{{
-    SC.PickerPane.create({layout: { width: 400, height: 200 },contentView: SC.View.extend({})
+    SC.PickerPane.create({
+      layout: { width: 400, height: 200 },
+      contentView: SC.View.extend({})
     }).popup(anchor, SC.PICKER_FIXED, [-22,-17,0]);
   }}}
 
-  6. pointer with default position pref matrix [0,1,2,3,2]:   
+  6. pointer with default `preferMatrix` of `[0,1,2,3,2]`:   
   {{{
-    SC.PickerPane.create({layout: { width: 400, height: 200 },contentView: SC.View.extend({})
+    SC.PickerPane.create({
+      layout: { width: 400, height: 200 },
+      contentView: SC.View.extend({})
     }).popup(anchor, SC.PICKER_POINTER);
   }}}
-  perfect right (0) > perfect left (1) > perfect top (2) > perfect bottom (3)
-  fallback to perfect top (2)
+  
+  Positioning: right (0) > left (1) > top (2) > bottom (3). Fallback to top (2).
 
-  7. pointer with custom position pref matrix [3,0,1,2,2]:   
+  7. pointer with custom `preferMatrix` of `[3,0,1,2,2]`:   
   {{{
-    SC.PickerPane.create({layout: { width: 400, height: 200 },contentView: SC.View.extend({})
+    SC.PickerPane.create({
+      layout: { width: 400, height: 200 },
+      contentView: SC.View.extend({})
     }).popup(anchor, SC.PICKER_POINTER, [3,0,1,2,2]);
   }}}
 
-  perfect bottom (3) > perfect right (0) > perfect left (1) > perfect top (2)
-  fallback to perfect top (2)
+  Positioning: bottom (3) > right (0) > left (1) > top (2). Fallback to top (2).
 
-  8. menu-pointer with default position pref matrix [3,0,1,2,3]:
+  8. menu-pointer with default `preferMatrix` of `[3,0,1,2,3]`:
   {{{
-    SC.PickerPane.create({layout: { width: 400, height: 200 },contentView: SC.View.extend({})
+    SC.PickerPane.create({
+      layout: { width: 400, height: 200 },
+      contentView: SC.View.extend({})
     }).popup(anchor, SC.PICKER_MENU_POINTER);
   }}}
-  perfect bottom (3) > perfect right (0) > perfect left (1) > perfect top (2)
-  fallback to perfect bottom (3)
   
+  Positioning: bottom (3) > right (0) > left (1) > top (2). Fallback to bottom (3).
+ 
   @extends SC.PalettePane
   @since SproutCore 1.0
 */
-SC.PickerPane = SC.PalettePane.extend({
+SC.PickerPane = SC.PalettePane.extend( /** @scope SC.PickerPane.prototype */ {
   
   classNames: 'sc-picker',
   isAnchored: YES,
@@ -227,12 +321,12 @@ SC.PickerPane = SC.PalettePane.extend({
           case SC.PICKER_MENU:
           case SC.PICKER_FIXED:
             if(!preferMatrix || preferMatrix.length !== 3) {
-              // default below the anchor with fine tunned visual alignment 
+              // default below the anchor with fine-tuned visual alignment 
               // for Menu to appear just below the anchorElement.
               this.set('preferMatrix', [1, 4, 3]) ;
             }
 
-            // fine tunned visual alignment from preferMatrix
+            // fine-tuned visual alignment from preferMatrix
             origin.x += ((this.preferMatrix[2]===0) ? origin.width : 0) + this.preferMatrix[0] ;
             origin.y += ((this.preferMatrix[2]===3) ? origin.height : 0) + this.preferMatrix[1];    
             break;