sproutcore 0.9.0

data/frameworks/sproutcore/globals/panels.js

@@ -0,0 +1,182 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+require('views/container') ;
+
+/**
+  @class Manages the panels on a page.
+  
+  To make a view into a panel, just set the isPanel property on it.  To 
+  customize how panels are shown in your application, override the showPanel()
+  and hidePanel() methods.
+
+  @extends SC.View
+*/
+SC.PanelView = SC.View.extend(
+  /** @scope SC.PanelView.prototype */
+  {
+  
+  emptyElement: '<div id="panels" class="panels"><div class="overlay"></div></div>',
+
+  // Override this property to incldue an example view all panels
+  // will be wrapped in.  The view must have a 'content' property that will
+  // be set to the view to show.
+  wrapperView: SC.ContainerView.extend({
+    emptyElement: '<div class="panel"><div class="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>',
+    
+    outlets: ['rootView'],
+    rootView: SC.View.outletFor('.root?')
+  }),
+  
+  // this is filled with instances of the the wrapperView so we don't have
+  // to recreate them all the time.
+  _wrapperPool: null,
+
+  // this is used to get a new wrapper.
+  _getWrapperView: function() {
+    var ret = this._wrapperPool.pop() ;
+    if (ret) return ret ;
+    ret = this.wrapperView.viewFor() ;
+
+    if (ret.visibleAnimation) {
+      var va = Object.clone(ret.visibleAnimation) ;
+      va.onComplete = this.hidePanelDidComplete.bind(this) ;
+      ret.visibleAnimation = va ;
+    }
+
+    return ret ;
+  },
+  
+  // ...................................
+  // SHOWING AND HIDING VIEWS
+  //
+
+  locationFor: function(view,evt) {
+    return { top: '50px', left: 'auto' } ;
+  },
+  
+  // this is the method called by the view to show itself as a popup.
+  showPanel: function(view,evt) {
+    var wrapperView = this._getWrapperView() ;
+    
+    // setup popupView.
+    wrapperView.set('animateVisible',false) ;
+    wrapperView.set('isVisible',false) ;
+    wrapperView.set('content',view) ; // set the popup view.
+    wrapperView.setClassName('standard-panel', !(view.get('hasCustomPanelWrapper') || false));
+    view._wrapperView = wrapperView ;
+
+    // The dimensions of the panel cannot be computed until it is actually
+    // added to the document.  Turn off animation and add view with visiblity
+    // set to hidden so we can get dimensions.
+    this.nowShowing.push(view) ;
+    this.appendChild(wrapperView) ;
+    this.set('isVisible',true) ; // show panels
+    
+    wrapperView.setStyle({ visibility: 'hidden' }) ;
+    wrapperView.set('isVisible',true) ; // show the panel
+    
+    var dim = Element.getDimensions(view.rootElement) ;
+    wrapperView.setStyle(this.locationFor(view,evt)) ;
+
+    wrapperView.set('isVisible',false) ;
+    wrapperView.setStyle({ width: dim.width+'px', visibility: 'visible' });
+    
+    wrapperView.set('animateVisible',true);
+    wrapperView.set('isVisible',true) ;
+  },
+  
+  hidePanel: function(view) {
+    var didHideWrapperView = null ;
+
+    // clear view
+    if (view._wrapperView) {
+      if (view._wrapperView.visibleAnimation) {
+      } else {
+        didHideWrapperView = view._wrapperView ;
+      }
+      view._wrapperView.set('isVisible',false) ;
+      view._wrapperView = null ;
+    }
+    
+    // now remove from list of popups and hide pane (maybe)
+    this.nowShowing = this.nowShowing.without(view) ;
+    if (didHideWrapperView) this.hidePanelDidComplete(didHideWrapperView) ;
+  },
+
+  hidePanelDidComplete: function(wrapperView) {
+    if (wrapperView.get('isVisible') != false) return ;
+    if (wrapperView) {
+      wrapperView.set('content',null) ;
+      this._wrapperPool.push(wrapperView) ;
+    }
+    if (this.nowShowing.length <= 0) this.set('isVisible',false);
+  },
+  
+  init: function() {
+    arguments.callee.base.call(this) ;
+    this.nowShowing = [] ;
+    this._wrapperPool = [] ;
+  },
+  
+  // ...................................
+  // SHOWING AND HIDING THE POPUP PANEL
+  //  
+  
+  panelStyle: { 
+    zIndex: '10000', 
+    visibility: 'visible', 
+    position: 'absolute', 
+    top: '0', 
+    left: '0', 
+    width: '100%', 
+    height: '100%', 
+    overflow: 'hidden' 
+  },
+  
+  showView: function() {
+    
+    // add panel to body node if it has not been added already.
+    var bodyNode = $tag('body');
+    if (this.rootElement.parentNode != bodyNode) bodyNode.appendChild(this.rootElement) ;
+    this.setStyle(this.panelStyle) ;
+    if (!SC.isIE7() && bodyNode) Element.addClassName(bodyNode, 'under-panel') ;
+  },
+  
+  hideView: function() {
+    var bodyNode = $tag('body');
+    this.setStyle({ zIndex: '-10000', visibility: 'hidden' }) ;
+    if (!SC.isIE7() && bodyNode) Element.removeClassName(bodyNode, 'under-panel') ;
+  },
+  
+  // if the user clicks outside the top popup, then dismiss the popup unless
+  // it is modal.
+  didClick: function(ev) {
+    if (this.nowShowing.length == 0) return ; // nothing to do.
+    
+    // find the top-most popup
+    var topPanel = this.nowShowing[this.nowShowing.length-1] ;
+    var tgt = Event.element(ev) ;
+    var tgtView = $view(tgt) ;
+    
+    var view = topPanel._wrapperView ;
+    while(tgt && (tgt != this.rootElement) && (tgtView != view)) {
+      tgt = tgt.parentNode ;
+      tgtView = (tgt) ? $view(tgt) : null ;
+    }
+    
+    // may dismiss if clicked outside of topPopup and isModal == false
+    if ((tgtView != view) && (!topPanel.get('isModal'))) {
+      topPanel.set('isVisible',false) ;
+    }
+  }
+    
+}) ;
+
+SC.callOnLoad(function() { 
+  if (!SC.page) SC.page = SC.Page.create() ;
+  SC.page.panels = SC.PanelView.outletFor(null); 
+}) ;

data/frameworks/sproutcore/globals/popups.js

@@ -0,0 +1,60 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+require('views/container') ;
+require('globals/panels') ;
+
+// This singleton manages the popups on the page.  It will show an element
+// called 'popups', which is appended to the end of the body node.  To show
+// a view as a popup, just call the popup() method on it along with an event.
+// The view will be shown at the location more appropriate for the event.
+// You can choose whether the popup is modal by setting the isModal property
+// on the view.
+SC.PopupView = SC.PanelView.extend({
+  
+  emptyElement: '<div id="popups" class="popups"></div>',
+    
+  wrapperView: SC.ContainerView.extend({
+    emptyElement: '<div class="popup"></div>',
+    visibleAnimation: {
+      visible: 'opacity: 1.0',
+      hidden: 'opacity: 0.0',
+      duration: 200,
+      onComplete: function(wrapperView) {
+        if (!wrapperView.get('isVisible')) {
+          SC.popups.hidePanelDidComplete(wrapperView) ;
+        }
+      }
+    }
+  }),
+  
+  locationFor: function(view,ev) {
+    var x = (ev) ? (Event.pointerX(ev) - 20) : 100 ;
+    var y = (ev) ? Event.pointerY(ev) : 100 ;
+    var dim = view.get('size') ;
+    var screenSize = Element.getDimensions(this) ;
+    
+    // fit on screen
+    var shift = (x+dim.width+50) - screenSize.width ;
+    if (shift>0) x -= shift ;
+    var shift = (y+dim.height+20) - screenSize.height ;
+    if (shift>0) y -= shift ;
+    
+    return { left: x+'px', top: y+'px' };
+  },
+  
+  // ...................................
+  // VIEW SUPPORT FUNCTION
+  //  
+  // called in the context of the view.
+  viewHide: function() { SC.page.get('popups').hidePanel(this); }
+    
+}) ;
+
+SC.callOnLoad(function() { 
+  if (!SC.page) SC.page = SC.Page.create() ;
+  SC.page.popups = SC.PopupView.outletFor(null); 
+}) ;

data/frameworks/sproutcore/globals/window.js

@@ -0,0 +1,381 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('Core') ;
+require('foundation/responder');
+require('panes/pane');
+
+// The window global object is automatically setup for each window that you 
+// load.  Window listens for mouse and keyboard events and routes them to the
+// first responder.  Using the firstResponder method you can control who gets
+// to respond to keyboard events.
+SC.window = SC.PaneView.extend({
+  
+  // This finds the first view responding to the event.
+  firstViewForEvent: function(evt) {
+    var el = Event.element(evt) ;
+    while(el && (el != document) && (!el._configured)) el = el.parentNode ;
+    if (el) el = SC.View.findViewForElement(el) ;
+    if (el == this) el = null ;
+    return el ;
+  },
+
+  // ........................................................................
+  // Window Size/Resizing
+  //
+
+  frame: function() {
+    var size = this.get('size') ;
+    return { x: 0, y: 0, width: size.width, height: size.height } ;
+  }.property('size'),
+  
+  // this returns the size of the window, possibly reading it from the browser
+  // if needed.
+  size: function() {
+    if (!this._size) {
+      if (window.innerHeight) {
+        this._size = { 
+          width: window.innerWidth, 
+          height: window.innerHeight
+        };
+      } else if (document.documentElement && document.documentElement.clientHeight) {
+        this._size = { 
+          width: document.documentElement.clientWidth, 
+          height: document.documentElement.clientHeight
+        };
+      } else if (document.body) {
+        this._size = { 
+          width: document.body.clientWidth, 
+          height: document.body.clientHeight
+        };
+      }
+    }
+    
+    return this._size ;
+  }.property(),
+  
+  autoresizesChildViews: true,
+  
+  _onresize: function(evt) {
+    var oldSize = Object.clone(this.get('size')) ;
+    this._size = null ;
+    var newSize = this.get('size') ;
+    if ((newSize.width != oldSize.width) || (newSize.height != oldSize.height)) {
+      this.resizeChildrenWithOldSize(oldSize) ;
+    }
+  },
+  
+  // ........................................................................
+  // Keyboard Handling
+  //
+
+  _lastModifiers: null,
+  _handleModifierChanges: function(evt)
+  {
+    //console.debug('_lastModifiers: %o', this._lastModifiers);
+    // if the modifier keys have changed, then notify the first responder.
+    var m = this._lastModifiers = this._lastModifiers || { alt: false, ctrl: false, shift: false };
+
+    var changed = false;
+    if (evt.altKey != m.alt) { m.alt = evt.altKey; changed=true; }
+    if (evt.ctrlKey != m.ctrl) { m.ctrl = evt.ctrlKey; changed=true; }
+    if (evt.shiftKey != m.shift) { m.shift = evt.shiftKey; changed=true;}
+
+    if (changed) 
+    {
+      evt._type = 'flagsChanged';
+      evt._modifiers = m;
+      SC.app.sendEvent( evt );
+    }
+  },
+  
+  // this one gets called once when the key is down.  We use this to handle
+  // function and non-printable keys. (i.e. if a modifier key is pressed or
+  // we can map to some non-printable set of keycodes.)
+  _onkeydown: function(evt)
+  {
+    // modifier keys are handled separately by the 'flagsChanged' event
+    this._handleModifierChanges(evt);
+    if (this._isModifierKey(evt)) return;
+    if (!this._isFunctionOrNonPrintableKey(evt)) return true;  // let normal browser processing do its thing.
+    return this._sendEvent('keyDown', evt);
+  },
+
+  // this one gets used for all the other keys not handled by key down.
+  _onkeypress: function(evt)
+  {
+    if (this._isFunctionOrNonPrintableKey(evt)) return; // handled in _onkeydown
+    if (evt.charCode != undefined && evt.charCode == 0) return;
+    return this._sendEvent('keyDown', evt);
+  },
+  
+  _onkeyup: function(evt)
+  {
+    // modifier keys are handled separately by the 'flagsChanged' event
+    this._handleModifierChanges(evt);
+    if (this._isModifierKey(evt)) return;
+    return this._sendEvent('keyUp', evt);
+  },
+
+  _sendEvent: function( sctype, evt )
+  {
+    evt._type = sctype;
+    evt._stopWhenHandled = (evt._stopWhenHandled !== undefined) ? evt._stopWhenHandled : true;
+    
+    var handler = SC.app.sendEvent( evt );
+    
+    if (handler && evt._stopWhenHandled) {
+      Event.stop(evt);
+      return false;
+    } else {
+      return true;
+    }
+  },
+
+  // util code factored out of keypress and keydown handlers
+  _isFunctionOrNonPrintableKey: function( evt )
+  {
+    return !!(evt.altKey || evt.ctrlKey || SC.FUNCTION_KEYS[evt.keyCode]);
+  },
+  _isModifierKey: function( evt )
+  {
+    return !!SC.MODIFIER_KEYS[evt.keyCode];
+  },
+  
+
+  
+  // ........................................................................
+  // Mouse Handling
+  //
+  // Mouse clicks are routed to the target view.
+  //
+  _mouseDownView: null,
+  _clickCount: 0,
+  _lastMouseUpAt: null,
+  
+  dragDidStart: function(drag) {
+    this._mouseDownView = drag ;  
+  },
+  
+  _onmousedown: function(evt)
+  {
+    // first, save the click count.  Click count resets if your down is
+    // more than 125msec after you last click up.
+    this._clickCount = this._clickCount + 1 ;
+    if (!this._lastMouseUpAt || ((Date.now() - this._lastMouseUpAt) > 200)) {
+      this._clickCount = 1 ; 
+    }
+    evt.clickCount = this._clickCount ;
+    
+    evt._type = 'mouseDown';
+    evt._stopWhenHandled = (evt._stopWhenHandled !== undefined) ? evt._stopWhenHandled : true;
+
+    this._mouseDownView = SC.app.sendEvent( evt );
+    if (this._mouseDownView && evt._stopWhenHandled)
+    {
+      Event.stop(evt);
+    }
+
+    // find the view to handle the mouseDown.  go up the chain till you find
+    // one that implements didMouseDown or mouseDown && returns true.
+/*    var view = this.firstViewForEvent(evt) ;
+    var handled = false ;
+    while(view && (view != this) && !handled) {
+      var func = view.mouseDown || view.didMouseDown;
+      if (func) handled = func.call(view, evt) ;
+      
+      if (!handled) view = view.get('nextResponder');
+    }
+    if (view == this) view = null;
+    this._mouseDownView = view ;
+    
+    if (handled) Event.stop(evt) ;
+*/
+  },
+  
+  // mouseUp only gets delivered to the view that handled the mouseDown evt.
+  // we also handle click and double click notifications through here to 
+  // ensure consistant delivery.  Note that if mouseDownView is not
+  // implemented, then no mouseUp event will be sent, but a click will be 
+  // send.
+  _onmouseup: function(evt)
+  {
+    var handler = null;
+
+    this._lastMouseUpAt = Date.now();
+
+    // record click count.
+    evt.clickCount = this._clickCount ;
+    
+    // attempt the mouseup call only if there's a target.
+    // don't want a mouseup going to anyone unless they handled the mousedown...
+    if (this._mouseDownView)
+    {
+      evt._type = 'mouseUp';
+      handler = SC.app.sendEvent(evt, this._mouseDownView);
+    }
+    // no one handled the mouseup... try doubleclick...
+    if (!handler && (this._clickCount == 2))
+    {
+      evt._type = 'doubleClick';
+      handler = SC.app.sendEvent(evt, this._mouseDownView);
+    }
+    // no one handled the doubleclick... try click...
+    if (!handler)
+    {
+      evt._type = 'click';
+      handler = SC.app.sendEvent(evt, this._mouseDownView);
+    }
+    
+    this._mouseDownView = null;
+  },
+  
+  _lastHovered: null,
+
+  // this will sent mouseOver, mouseOut, and mouseMoved to the views you
+  // hover over.  To receive these events, you must implement the method.
+  // If any subviews implement them and return true, then you won't receive
+  // any notices.
+  //
+  // if there is a target mouseDown view, then mouse moved events will also
+  // trigger calls to mouseDragged.
+  //
+  _onmousemove: function(evt) {
+    var lh = this._lastHovered || [] ;
+    var nh = [] ;
+    var view = this.firstViewForEvent(evt) ;
+    
+    // work up the view chain.  Notify of mouse entered and
+    // mouseMoved if implemented.
+    while(view && (view != this)) {
+      var entered = view.mouseOver || view.didMouseOver || view.mouseEntered;
+      var moved = view.mouseMoved || view.mouseDidMove  ;
+
+      if (lh.include(view)) {
+        if (moved) moved.call(view,evt) ;
+        nh.push(view) ;
+      } else {
+        if (entered) entered.call(view,evt) ;
+        nh.push(view) ;
+      }
+      
+      view = view.get('nextResponder');
+    }
+
+    // now find those views last hovered over that were no longer found 
+    // in this chain and notify of mouseExited.
+    for(var loc=0; loc < lh.length; loc++) {
+      view = lh[loc] ;
+      var exited = view.mouseOut || view.didMouseOut || view.mouseExited ;
+      if (exited && !nh.include(view)) exited.call(view, evt) ;
+    }
+    
+    this._lastHovered = nh; 
+    
+    // also, if a mouseDownView exists, call the mouseDragged action, if it 
+    // exists.
+    if (this._mouseDownView && this._mouseDownView.mouseDragged) {
+      this._mouseDownView.mouseDragged(evt) ;
+    }
+  },
+  
+  // remove event observers.
+  _onunload: function() {
+    this._listenerCache.each(function(e){
+      Event.stopObserving.apply(Event, e) ;
+    });
+  },
+  
+  _EVTS: ['mousedown', 'mouseup', 'click', 'dblclick', 'keydown', 'keyup', 'keypress', 'mouseover', 'mouseout', 'mousemove', 'resize', 'unload'],
+
+  _listenerCache: [],
+  
+  setup: function() {
+    console.log('setup') ;
+    
+    // setup event listeners for window.
+    var win = this ;
+    win._EVTS.each(function(e) {
+      var func = win['_on' + e] ;
+      var target = (SC.isIE() && (e != 'resize')) ? document : window ;
+      if (func) {
+        var f = func.bindAsEventListener(win) ;
+        Event.observe(target, e, f) ;
+        win._listenerCache.push([target, e, f]) ;
+      }
+    });
+    
+    this.get('size') ; // fetch the size from the window and save it.
+  }
+}).viewFor($tag('body')) ;
+
+
+// events:
+// window.onfocus --
+//  notify all views that they now have window focus.
+
+// window.onblur --
+//  notify all views that they no longer have window focus.
+
+// element.onfocus/element.onblur --
+//  when a field gains focus, it should become first responder.  Other
+//  elements should become first responder when you click on them.
+
+// window.onresize --
+//  call the resize code on the views to tell them their parent views resized.
+//  -- we should have a root view that is the window.
+
+// window.onscroll --
+//  call the scroll code on the root view.
+
+// element.onscroll --
+//  call the scroll code on the element.
+
+// window.onunload --
+//  call this on all views? to let them unload....
+
+// document.onclick --
+// document.ondblclick --
+// these events are ignored (actually, they are eaten) by the window object.
+// click and double click events are handled by the mouseUp handler so that
+// we can avoid calling click if mouseUp is handled by someone.
+
+// document.onmousedown --
+// document.onmouseup --
+//  find the target element and work your way up the DOM hierarchy until you
+//  find Views to handle the click.
+
+// document.onmousemove --
+// document.onmouseover --
+// document.onmouseout --
+//  use these events to simulate mouseover and mouseout on views.  Find the 
+//  target element and work you way up the hierarchy until you find a view
+//  that responds to these events.
+//
+//  also we should have some generic handlers in the window object that you
+//  can use to be notified when the mouse enters and leaves the window in
+//  general.
+
+// formelement.onchange
+//   use to trigger a value change on the form field element.
+
+// form.onreset 
+//   um, do nothing?  button will handle action directly.
+
+// form.onsubmit
+//   disable so that AJAX code can takeover.
+
+// document.onkeydown --
+// document.onkeypress --
+// document.onkeyup --
+//  notify the firstResponder and work up the chain until someone handles the
+//  keypress.  You can have a defaultResponder, which gets the keypress if 
+//  no one else does.  First normalize key info.
+
+// img.onerror --
+//  this should call some handler function in the ImageView.
+
+
+

data/frameworks/sproutcore/lib/index.rhtml

@@ -0,0 +1,66 @@
+<% # SPROUTCORE DEFAULT INDEX TEMPLATE 
+   # This template provide provides a basic wrapper for a SproutCore client.
+   # Most of the time, it will be sufficient for your own needs.  However, if
+   # you need to create your own template, you can do so by copying this file
+   # into your client, naming it 'index.rhtml' and then adding the options
+   # :index => 'index' to your client declaration in routes.rb.
+   #
+   # See the comments in this file for more information on what you can
+   # change.
+-%>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+<%  # @title will be defined if you passed :title in routes.rb -%>
+    <title><%= (@title.to_s || bundle_name.to_s || '').capitalize %></title>
+<% # 
+	 # This line should appear in your head area to include the stylesheets
+	 # generated by your client.  If you need to include your own
+	 # stylesheets, you don't need to change it here.  Instead, use the
+	 # :requires option in routes.rb. 
+-%>
+    <%= stylesheets_for_client %>
+  </head>
+  <body class="<%= @theme || 'sc-theme' %>">    
+<% #
+   # This is where you root body element will appear.  To cause your 
+   # content to appear here, just declare content_for('body') in one of
+   # your partials.
+-%>
+    <!-- Main Page Body -->
+    <%= @content_for_body %>
+
+<% # 
+   # This is where the resources you delcare will appear.  You must
+   # include the following three lines verbatim for the resources you
+   # declare to be properly used.
+-%>
+    <!-- Resources to be removed from DOM on page load -->
+    <div id="resources" style="display:none; visibility: hidden;">
+      <%= @content_for_resources -%>
+    </div>
+
+<% #
+   # This line should appear at the bottom of your page to include your
+   # generated JavaScript and any libraries you reference.  If you need
+   # to include other javascripts, add them to the :requires option of
+   # your client in routes.rb instead of changing it here.
+-%>
+    <!-- Include Site Javascript -->
+    <%= javascripts_for_client %>
+
+<% #
+   # The following lines to the closing body tag must be included at the
+   # very end of your file.  This will actually setup the JavaScript 
+   # views on your page and register SproutCore to start on page load.
+-%>
+<!-- Render Page Views -->
+<%= render_page_views %>
+
+    <!-- Start SproutCore on Page Load -->
+    <script type="text/javascript">window.onload = SC.didLoad;</script>
+<%= @content_for_final %>
+	</body>
+</html>