sproutcore 0.9.0

data/frameworks/sproutcore/panes/overlay.js

@@ -0,0 +1,231 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('panes/pane') ;
+require('views/container') ;
+
+// Panes are views that appear over the top of your regular content such as
+// dialogs boxes and pop-up menus.  This class provides the basic support for
+// these functions.
+//
+// SproutCore provides built-in support for four different types of panes, but
+// you can also create your own types of panes yourself.  The pane view
+// automatically groups all panes of a similar type together. 
+//
+// To create your own type of pane, create a subclass of SC.PaneView and then
+// register it with the SC.PaneManager:
+//
+// SC.PaneManager.registerPane('paneType', SC.PaneView);
+//
+// You can then make views show in the panes by settings the paneType 
+// property on the view and set 'isVisible' to true.
+//
+// Note that PaneView instances are reused by the pane manager.  You should
+// design your view be reused in this way.
+//
+SC.OverlayPaneView = SC.PaneView.extend({
+
+  // This property will be set to the content view when you are asked to
+  // display it.
+  content: null,
+  
+  // Set this to a value that indicates where you want your view to appear
+  // compare to other types of panes in the system.  the PaneManagers groups
+  // all panes of the same type together, with the most recently opened one
+  // appearing on top.
+  layer: 0,
+  
+  // This property will be set to the view that triggered your pane to show
+  // if relevant.  You can use this to properly size and position your pane.
+  anchorView: null,
+  
+  // This property will be set to the event that triggered your pane to show
+  // if relevant.  You can use this to properly size and position your pane.
+  triggerEvent: null,
+  
+  // if true, this pane will be modal.  Clicks outside of the containerView
+  // will be ignored.  If false, this pane is semi-modal: it will
+  // hide if you click outside of the containerView.
+  isModal: true,
+  
+  // override to position your pane on view.
+  positionPane: function() {
+  },
+  
+  // This method will do its best to position your pane on screen in relation
+  // to the anchor view passed.
+  fitPositionToScreen: function(preferredPosition, paneView, anchor) {
+    
+    // first build up the frame and convert to window...
+    var f = paneView.get('frame') ;
+    f.x = preferredPosition.x ; f.y = preferredPosition.y ;
+    f = paneView.convertFrameToView(f, null) ;
+
+    // get useful other frame limits.
+    var aframe = anchor.convertFrameToView(anchor.get('frame'), null) ;
+    var wframe = SC.window.get('frame') ;
+
+    // make sure the right edge fits on the screen.  If not, anchor to 
+    // right edge of anchor or right edge of window, whichever is closer.
+    if (SC.maxX(f) > wframe.width) {
+      var mx = Math.max(SC.maxX(aframe), f.width) ;
+      f.x = Math.min(mx, wframe.width) - f.width ;
+    }
+
+    // if the left edge is off of the screen, try to position at left edge
+    // of anchor.  If that pushes right edge off screen, shift back until 
+    // right is on screen or left = 0
+    if (SC.minX(f) < 0) {
+      f.x = SC.minX(Math.max(aframe,0)) ;
+      if (SC.maxX(f) > wframe.width) {
+        f.x = Math.max(0, wframe.width - f.width);
+      }
+    }
+
+    // make sure bottom edge fits on screen.  If not, try to anchor to top
+    // of anchor or bottom edge of screen.
+    if (SC.maxY(f) > wframe.height) {
+      var mx = Math.max((aframe.y - f.height), 0) ;
+      if (mx > wframe.height) {
+        f.y = Math.max(0, wframe.height - f.height) ;
+      } else f.y = mx ;
+    }
+
+    // if Top edge is off screen, try to anchor to bottom of anchor. If that
+    // pushes off bottom edge, shift up until it is back on screen or top =0
+    if (SC.minY(f) < 0) {
+      var mx = Math.min(SC.maxY(aframe), (wframe.height - aframe.height)) ;
+      f.y = Math.max(mx, 0) ;
+    }
+
+    return f ;
+    
+  },
+  
+  resizeWithOldParentSize: function(oldSize) {
+    this.positionPane() ;  
+  },
+  
+  // ...........................................
+  // KEYBOARD SUPPORT
+  //
+  acceptsFirstResponder: true,
+
+  keyDown: function(evt) {
+    if (!this.interpretKeyEvents(evt)) {
+      return arguments.callee.base.apply(this,arguments);
+    }
+  },
+  
+  // when you hit return from within a dialog or panel, look for a child 
+  // view with isDefault => true
+  insertNewline: function(sender, evt) {
+    var button = this._findViewWithKeyIn('isDefault', SC.ButtonView, this) ;
+    if (button) {
+      button.triggerAction(evt) ;
+      return true ;
+    } else return false ;
+  },
+  
+  cancel: function(sender, evt) {
+    var button = this._findViewWithKeyIn('isDefault', SC.ButtonView, this) ;    
+    if (button) {
+      button.triggerAction(evt) ;
+      return true ;
+    } else return false ;
+  },
+  
+  _findViewWithKeyIn: function(keyName, rootClass, rootView, ignoreRoot) {
+    if (!ignoreRoot) {
+      if ((rootView instanceof rootClass) && rootView.get(keyName)) {
+        return rootView ;
+      }
+    }
+    
+    var child = rootView.get('firstChild') ;
+    while(child) {
+      var ret = this._findViewWithKeyIn(keyName, rootClass, child) ;
+      if (ret) return ret ;
+      child = child.get('nextSibling') ;
+    }
+    return null ;
+  },
+  
+  focusFirstKeyView: function() {
+    var fr = this._findViewWithKeyIn('acceptsFirstResponder', SC.Responder, this, true) ;
+    if (!fr) fr = this;
+    fr.becomeFirstResponder() ;
+  },
+
+  click: function(evt) {
+    if (!this.get('isModal')) {
+      var content = this.containerView.get('content') ;
+      if (content) content.set('isVisible', false) ;
+    }
+    return true ; 
+  },
+    
+  // ...........................................
+  // PRIVATE METHODS
+  //
+  _contentDidChange: function() {
+    var containerView = this.get('containerView') ;
+    if (containerView) containerView.set('content',this.get('content')) ;
+  }.observes('content'),
+  
+  outlets: ['containerView'],
+  containerView: SC.ContainerView.extend({
+    outlets: ['rootView'],
+
+    rootView: SC.View.extend({
+      // absorb all clicks so the pane will not hide.
+      click: function() { return true; }
+    }).outletFor('.pane-root?'),
+    
+    _fixWidth: function() {
+      var content = this.get('content') ;
+      if (content) {
+        content.resizeWithOldParentSize(this.get('size')) ;
+        
+        // compute padding we need to add.
+        var padding = this.get('size').width - this.get('innerSize').width;
+        this.set('size', { width: (content.get('size').width + padding) });
+        this.owner.positionPane() ;
+        this.owner.setStyle({ visibility: 'visible' }) ;
+      } 
+      if (this.get('isVisibleInWindow')) 
+      {
+        this.owner.focusFirstKeyView();
+      }
+    }.observes('content'),
+    
+    init: function() {
+      arguments.callee.base.apply(this,arguments) ;
+      
+      // only Safari does well enough with animations to handle this dainty
+      // guy. 
+      if (SC.isSafari()) {
+        this.visibleAnimation = {
+          visible: 'opacity: 1.0', hidden: 'opacity: 0.0', duration: 100  
+        } ;
+      }
+    },
+
+    // allow click through outside of the rootView.
+    click: function(evt) {
+      return false ;
+    }
+    
+  }).outletFor('.pane-wrapper?'),
+  
+  // just before the view becomes visible, set the width of the container
+  // view to match its content
+  show: function() {
+    this.containerView._fixWidth();
+    arguments.callee.base.apply(this,arguments);
+    //this.focusFirstKeyView() ;
+  }
+
+});

data/frameworks/sproutcore/panes/pane.js

@@ -0,0 +1,90 @@
+require('views/view');
+
+SC.KEYVIEW_SELECTING_NONE      = 0;
+SC.KEYVIEW_SELECTING_NEXT      = 1;
+SC.KEYVIEW_SELECTING_PREVIOUS  = 2;
+
+SC.PaneView = SC.View.extend({
+
+  // panes do not belong to other panes...
+  pane: null,
+
+  isPane: true,
+  isModal: false,
+  
+  canBecomeKeyPane: true,
+  isKeyPane: false,
+  makeKeyPane: function()
+  {
+    if (!this.get('canBecomeKeyPane')) return false;
+    if (this.get('isKeyPane')) return false;
+    SC.app.set('keyPane', this);
+    return true;
+  },
+  didBecomeKeyPane: function() {},
+  willResignKeyPane: function() {},
+  
+  canBecomeMainPane: true,
+  isMainPane: false,
+  makeMainPane: function()
+  {
+    if (!this.get('canBecomeMainPane')) return false;
+    if (this.get('isMainPane')) return false;
+    SC.app.set('mainPane', this);
+    return true;
+  },
+  didBecomeMainPane: function() {},
+  willResignMainPane: function() {},
+
+
+
+  performKeyInterfaceControl: function( keystring, evt )
+  {
+    // TODO!
+    return false;
+  },
+
+  keyViewSelectionDirection: SC.KEYVIEW_SELECTING_NONE,
+  
+  selectPreviousKeyView: function() {},
+  selectNextKeyView: function() {},
+  
+  autorecalculatesKeyViewLoop: false,
+  recalculateKeyViewLoop: function() {},
+  
+
+
+  nextResponder: null,
+
+  // This property points to the responder (usually a view) that should be
+  // the first to receive keyboard events.  Usually you set this by calling
+  // becomeFirstResponder on the view itself.
+  _firstResponder: null,
+  firstResponder: function(key,value)
+  {
+    if (value !== undefined) {
+      if (this._firstResponder) {
+        this._firstResponder.willLoseFirstResponder();
+      }
+      if (this._firstResponder) {
+        this._firstResponder.set('isFirstResponder',false) ;
+      }
+      
+      this._firstResponder = value ;
+     
+      if (this._firstResponder) {
+        this._firstResponder.set('isFirstResponder',true) ;
+      }
+      if (this._firstResponder) {
+        this._firstResponder.didBecomeFirstResponder() ;
+      }
+    }
+    return this._firstResponder; //TODO: shouldn't we return the defaultResponder if !this._firstResponder
+  }.property(),
+
+  // This property can be set to point to a default responder that should 
+  // handle keyboard events if no responders in the normal chain decide to
+  // take it.
+  defaultResponder: null
+
+});

data/frameworks/sproutcore/panes/panel.js

@@ -0,0 +1,19 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('panes/overlay') ;
+
+// A panel should be used for long-term modal interfaces.  For example, you
+// might use a panel for preferences or configuration settings.  These are 
+// mini-parts of the application.
+SC.PANEL_PANE = 'panel';
+SC.PanelPaneView = SC.OverlayPaneView.extend({
+  
+  emptyElement: '<div class="pane panel-pane"><div class="shadow pane-wrapper"><div class="pane-root"></div><div class="top-left-edge"></div><div class="top-edge"></div><div class="top-right-edge"></div><div class="right-edge"></div><div class="bottom-right-edge"></div><div class="bottom-edge"></div><div class="bottom-left-edge"></div><div class="left-edge"></div></div></div>',
+  
+  layer: 100
+    
+}) ;
+

data/frameworks/sproutcore/panes/picker.js

@@ -0,0 +1,45 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('panes/overlay') ;
+
+SC.PICKER_PANE = 'picker';
+SC.PickerPaneView = SC.OverlayPaneView.extend({
+  
+  emptyElement: '<div class="pane picker-pane"><div class="shadow pane-wrapper picker-pane-wrapper"><div class="pane-root"></div><div class="top-left-edge"></div><div class="top-edge"></div><div class="top-right-edge"></div><div class="right-edge"></div><div class="bottom-right-edge"></div><div class="bottom-edge"></div><div class="bottom-left-edge"></div><div class="left-edge"></div></div></div>',
+  
+  layer: 300,
+  
+  isModal: false,
+
+  // The ideal position for a picker pane is just below the anchor that 
+  // triggered it.  Find that ideal position, then call adjustPosition.
+  positionPane: function() {
+    var anchor = this.anchorView ;
+    var picker = this.containerView ;
+    var origin ;
+    
+    // usually an anchorView will be passed.  The ideal position to appear is
+    // just below the anchorView.  If that is not possible, fitToScreen will
+    // take care of that.
+    if (anchor) {
+      origin = picker.convertFrameFromView(anchor.get('frame'), anchor) ;
+      origin.y += origin.height ;
+      origin = this.fitPositionToScreen(origin, picker, anchor) ;
+      
+    // if no anchor view has been set for some reason, just center.
+    } else {
+      var wsize = SC.window.get('size') ;
+      var psize = picker.get('size') ;
+      origin.x = (wsize.width - psize.width) / 2 ;
+      origin.y = (wsize.height - psize.height) / 2 ;
+    }
+    
+    picker.set('origin',origin) ;
+  }
+  
+  
+}) ;
+

data/frameworks/sproutcore/tests/controllers/array.rhtml

@@ -0,0 +1,86 @@
+<% content_for('final') do %>
+
+<script type="text/javascript" charset="utf-8">
+
+Test.context("SC.ArrayController", {
+    
+  "Should act like an empty array if it has non array-like content": function()
+  {
+    var items = [null, false, "FOOBAR!", 12, {}];
+    for (var i=0, n=items.length; i < n; i++)
+    {
+      this.c.set('content', items[i]);
+      this.c.get('content').isEqual([]).shouldEqual(true);
+      this.c.get('length').shouldEqual(0);
+      (this.c.objectAt(0) == undefined).shouldEqual(true);
+    }
+  },
+  
+  "Should act like a clone of whatever array was set as it's content": function()
+  {
+    this.c.set('content', this.multiple_a );
+    this.c.get('length').shouldEqual(2);
+    this.c.objectAt(0).get('test').shouldEqual('NAME0');
+    this.c.objectAt(1).get('test').shouldEqual('NAME1');
+    (this.c.objectAt(2) == undefined).shouldEqual(true);
+  },
+  
+  "Should not clone it's content until a change has been made": function()
+  {
+    // note that we're not directly requesting the public 'contentClone' property, because
+    // doing so would cause the clone to be created.
+    (this.c._contentClone == undefined).shouldEqual(true);
+    this.c.set('content', this.multiple_a );
+    (this.c._contentClone == undefined).shouldEqual(true);
+    this.c.popObject();
+    (this.c._contentClone == undefined).shouldEqual(false);
+  },
+  "Should modify it's managed content when making changes": function()
+  {
+    this.c.set('content', this.multiple_a );
+    this.c.get('content').get('length').shouldEqual(2);
+    this.c.popObject();
+    this.c.get('content').get('length').shouldEqual(2);
+    this.c.get('contentClone').get('length').shouldEqual(1);
+  },
+  "Should flag itself as dirty when adding an item to the array": function()
+  {
+    this.c.set('content', this.multiple_a );
+    this.c.get('hasChanges').shouldEqual(false);
+    this.c.pushObject( SC.Object.create({ test: 'NAME2' }) );
+    this.c.get('hasChanges').shouldEqual(true);
+  },
+  
+  setup: function()
+  {
+    this.c = SC.ArrayController.create();
+    
+    this.multiple_a = [
+      SC.Object.create({ test: 'NAME0', value: 0, flag: YES, array: [0,0,0] }),
+      SC.Object.create({ test: 'NAME1', value: 1, flag: NO, array: [1,1,1] })
+    ];
+    
+    this.single_a = [
+      SC.Object.create({ test: 'NAME0', value: 0, flag: YES, array: [0,0,0] })
+    ];
+    
+    this.empty_a = [];
+    
+    this.dummy_a = SC.Object.create(SC.Array, {
+      length: 2,
+      replace: function(idx, amt, objects) {
+        this._items.replace(idx,amt,objects) ;
+        this.set('length', this._items.length) ;
+      },
+      objectAt: function(idx) {
+        return this._items.objectAt(idx) ;
+      },
+      _items: this.multiple_a
+    });
+  }
+
+});
+
+</script>
+
+<% end %>