sproutcore 0.9.1 → 0.9.2

data/clients/view_builder/controllers/document.js

@@ -0,0 +1,21 @@
+// ==========================================================================
+// ViewBuilder.DocumentController
+// ==========================================================================
+
+require('core');
+
+/** @class
+
+  (Document Your View Here)
+
+  @extends SC.Object
+  @author    AuthorName  
+  @version 0.1
+  @static
+*/
+ViewBuilder.documentController = SC.Object.create(
+/** @scope ViewBuilder.documentController */ {
+  
+  rootView: null
+  
+}) ;

data/clients/view_builder/core.js

@@ -0,0 +1,19 @@
+// ==========================================================================
+// ViewBuilder
+// ==========================================================================
+
+ViewBuilder = SC.Object.create({
+
+  // This will create the server for your application.  Add any namespaces
+  // your model objects are defined in to the prefix array.
+  server: SC.Server.create({ prefix: ['ViewBuilder'] }),
+
+  // When you are in development mode, this array will be populated with 
+  // any fixtures you create for testing and loaded automatically in your
+  // main method.  When in production, this will be an empty array.
+  FIXTURES: [],
+
+  // Any keys in this array will be instantiated automatically from main.
+  controllers: [],
+  
+}) ;

data/clients/view_builder/english.lproj/body.css

@@ -0,0 +1,77 @@
+/* @override 
+	http://localhost:4020/static/photos/en/_cache/body-1208305764.css
+	http://localhost:4020/static/photos/en/_cache/body-1208344721.css
+	http://localhost:4020/static/view_builder/en/_cache/body-1208631407.css
+	http://localhost:4020/static/view_builder/en/_cache/body-1208631886.css
+	http://localhost:4020/static/view_builder/en/_cache/body-1208632215.css
+	http://localhost:4020/static/view_builder/en/_cache/body-1208632366.css
+*/
+
+/* @group Core */
+
+body {
+	position: absolute ;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	padding: 0;
+	margin: 0;
+	overflow: hidden ;
+}
+
+.workspace .sidebar {
+	position: absolute;
+	left:  0;
+	top:  0;
+	width: 200px;
+	bottom: 0;
+}
+
+.sc-theme .workspace.horizontal .sc-split-divider-view {
+  position: absolute;
+  left: 200px;
+  top: 0;
+  bottom: 0;
+}
+
+.workspace .document_view {
+	position: absolute;	
+	left: 205px;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	border: none ;
+	background-color: #aaa ;
+}
+
+.left.app-label {
+	font-weight: bold ;
+	padding-bottom: 9px;
+	text-shadow: white 0px 1px 0px;
+}
+
+.app-label img {
+	width: 27px;
+	height: 27px;
+	vertical-align: middle;
+	position: relative ;
+	top: -3px;
+	margin-right: 2px;
+}
+
+/* @end */
+
+/* @group Sidebar */
+
+.sidebar .source_list {
+	position: absolute ;
+	top: 0;
+	left:  0;
+	right: 0;
+	bottom: 0;
+	border: none ;
+}
+
+/* @end */
+

data/clients/view_builder/english.lproj/body.rhtml

@@ -0,0 +1,41 @@
+<% content_for('body') do %>
+
+<% view :header, :class => 'sc-header sc-square-theme' do %>
+  <div class="left app-label">
+    <img src="<%= static_url('images/sproutcore-logo.png') %>" />ViewBuilder
+  </div>
+  <div class="center">
+  </div>
+  <div class="right">
+  </div>
+<% end %>
+
+
+<% split_view :workspace, :class => 'sc-app-workspace header footer', :direction => :horizontal do %>  
+  <% view :sidebar, :outlet => true do %>
+    <% scroll_view :source_list, :outlet => true do %>
+      <%= source_list_view :outlet => true, 
+        :content_value_key => :name,
+        :group_visible_key => true,
+        :content_icon_key => :icon %>
+    <% end %>
+  <% end %>
+  
+  <%= split_divider_view :outlet => true, :width => 5 %>
+  
+  <% scroll_view :document_view, :outlet => true do %>
+    <%= view :builder_view, :outlet => true, :view => 'SC.BuilderView', :bind => { :content => 'ViewBuilder.documentController.rootView' } %>
+  <% end %>
+  
+<% end %>
+
+<% view :footer, :class => 'sc-footer sc-square-theme' do %>
+  <div class="left">
+  </div>
+  <div class="center"></div>
+  <div class="right">
+  </div>
+<% end %>
+
+
+<% end %>

data/clients/view_builder/english.lproj/strings.js

@@ -0,0 +1,14 @@
+// ==========================================================================
+// ViewBuilder English Strings
+// ==========================================================================
+
+// Place strings you want to localize here.  In your app, use the key and 
+// localize it using "key string".loc().  HINT: For your key names, use the
+// english string with an underscore in front.  This way you can still see
+// how your UI will look and you'll notice right away when something needs a
+// localized string added to this file!
+//
+Object.extend(String.English,{
+  // "_String Key": "Localized String"
+}) ;
+

data/clients/view_builder/main.js

@@ -0,0 +1,38 @@
+// ==========================================================================
+// ViewBuilder
+// ==========================================================================
+
+// This is the function that will start your app running.  The default 
+// implementation will load any fixtures you have created then instantiate
+// your controllers and awake the elements on your page.
+//
+// As you develop your application you will probably want to override this.
+// See comments for some pointers on what to do next.
+//
+function main() {
+  
+  // Step 1: Load Your Model Data
+  // The default code here will load the fixtures you have defined.
+  // Comment out the preload line and add something to refresh from the server
+  // when you are ready to pull data from your server.
+  ViewBuilder.server.preload(ViewBuilder.FIXTURES) ;
+
+  // TODO: refresh() any collections you have created to get their records.
+  // ex: ViewBuilder.contacts.refresh() ;
+  
+  // Step 2: Instantiate Your Views
+  // The default code just activates all the views you have on the page. If
+  // your app gets any level of complexity, you should just get the views you
+  // need to show the app in the first place, to speed things up.
+  SC.page.awake() ;
+
+  // Step 3. Set the content property on your primary controller.  
+  // This will make your app come alive!
+  
+  // TODO: Set the content property on your primary controller
+  // ex: ViewBuilder.contactsController.set('content',ViewBuilder.contacts);
+  var v = SC.ButtonView.Builder.newBuilder() ;
+  ViewBuilder.documentController.set('rootView', v) ;
+} ;
+
+

data/clients/view_builder/tests/controllers/document.rhtml

@@ -0,0 +1,20 @@
+<% # ========================================================================
+   # ViewBuilder.DocumentController Unit Test
+   # ========================================================================
+%>
+<% content_for('final') do %>
+
+<script>
+
+Test.context("ViewBuilder.DocumentController",{
+
+  "TODO: Add your own tests here": function() {
+    true.shouldEqual(true) ;
+  }
+
+}) ;
+
+if (window.main && (appMain = main)) main = null ; 
+</script>
+
+<% end %>

data/clients/view_builder/tests/views/builder.rhtml

@@ -0,0 +1,20 @@
+<% # ========================================================================
+   # ViewBuilder.BuilderView Unit Test
+   # ========================================================================
+%>
+<% content_for('final') do %>
+
+<script>
+
+Test.context("ViewBuilder.BuilderView",{
+
+  "TODO: Add your own tests here": function() {
+    true.shouldEqual(true) ;
+  }
+
+}) ;
+
+if (window.main && (appMain = main)) main = null ; 
+</script>
+
+<% end %>

data/clients/view_builder/views/builder.js

@@ -0,0 +1,23 @@
+// ==========================================================================
+// ViewBuilder.BuilderView
+// ==========================================================================
+
+require('core');
+
+/** @class
+
+  A BuilderView displays the visible and editable portion of a view.  You 
+  can plug any generic builder record into a view and it will display the 
+  content. If the builder is a container, it will also allow you to add 
+  child views to the container.
+
+  @extends SC.View
+  @author    AuthorName  
+  @version 0.1
+*/
+SC.BuilderView = SC.View.extend(
+/** @scope ViewBuilder.BuilderView.prototype */ {
+  
+  // TODO: Add your own code here.
+  
+}) ;

data/frameworks/prototype/prototype.js

@@ -1,6 +1,6 @@
 /* @license
  *  Prototype JavaScript framework, version 1.6.0
- *  (c) 2005-2007 Sam Stephenson
+ *  (c) 2005-2008 Sam Stephenson
  *
  *  Prototype is freely distributable under the terms of an MIT-style license.
  *  For details, see the Prototype web site: http://www.prototypejs.org/

data/frameworks/sproutcore/Core.js

@@ -1,7 +1,7 @@
 //@license
 // ==========================================================================
 // SproutCore -- JavaScript Application Framework
-// copyright 2006-2007, Sprout Systems, Inc. and contributors.
+// copyright 2006-2008, Sprout Systems, Inc. and contributors.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a 
 // copy of this software and associated documentation files (the "Software"), 
@@ -101,7 +101,7 @@ Object.extend(SC,{
       var r = function() { 
         document.body.removeChild(document.getElementById(frameId)); 
       } ;
-      var t = setTimeout(r,2000);
+      var t = r.invokeLater(null, 2000);
     }
 	},
 		
@@ -204,12 +204,25 @@ Object.extend(SC,{
   },
   
   _nextGUID: 0,
-  getGUID: function( obj )
-  {
+  
+  /**
+    Returns a unique GUID for the object.  If the object does not yet have
+    a guid, one will be assigned to it.  You can call this on any object,
+    SC.Object-based or not, but be aware that it will add a _guid property.
+  */
+  guidFor: function(obj) {
     if (obj == null) return 0 ;
     return obj._guid ? obj._guid : (obj._guid = SC._nextGUID++);
   },
+  
 
+  /**
+    Convenience method to inspect an object by converting it to a hash.
+  */
+  inspect: function(obj) {
+    return $H(obj).inspect() ;  
+  },
+  
   /** Browser and Platform info. */
   Platform: {
     
@@ -299,6 +312,9 @@ Object.extend(SC,{
   
 });
 
+/** @deprecated  Use guidFor() instead. */
+SC.getGUID = SC.guidFor ;
+
 // Save the Platform.Browser name.
 SC.Platform.Browser = function() {
   if (SC.Platform.IE >0) {
@@ -322,7 +338,9 @@ T_BOOL = 'boolean' ;
 T_ARRAY = 'array' ;
 T_STRING = 'string' ;
 
-$type = function(item) { return SC.typeOf(item); }; 
+$type = SC.typeOf ;
+
+$I = SC.inspect ;
 
 Object.extend(Object,{
 
@@ -366,8 +384,15 @@ Object.extend(Event,{
     return String.fromCharCode(Event.getCharCode(e)) ;
   },
   
-  pointerLocation: function(e) {
-    return { x: Event.pointerX(e), y: Event.pointerY(e) };
+  pointerLocation: function(event) {
+    var ret = {
+      x: event.pageX || (event.clientX +
+        (document.documentElement.scrollLeft || document.body.scrollLeft)),
+      y: event.pageY || (event.clientY +
+        (document.documentElement.scrollTop || document.body.scrollTop))
+      
+    };
+    return ret ;
   },
   
   ALT_KEY: '_ALT',

data/frameworks/sproutcore/README

@@ -1,3 +1,3 @@
-SproutCore is a framework for building JavaScript applications.  It contains a number of components you can use to enable traditional desktop-like functions using only javascript.  SproutCore relies on Prototype and works with Scriptaculous.
+SproutCore is a framework for building JavaScript applications.  It contains a number of components you can use to enable traditional desktop-like functions using only javascript.  SproutCore relies on Prototype and works with Scriptaculous, jQuery or any other toolkit you like to use.
 
   

data/frameworks/sproutcore/animation/animation.js

@@ -0,0 +1,411 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2008 Sprout Systems, Inc.
+// ========================================================================
+
+require('Core') ;
+require('foundation/timer') ;
+
+/**
+  @class
+  
+  An animator is a special timer that will transition its value property from
+  0 to 1 according to a transform function you define.  You can also specify
+  one or more "subjects" that will be invoked whenever the animation value
+  changes, which can apply the animation to any target you like.
+
+  This class and its related classes are based on Bernie's Better Animator
+  class.
+  
+  Use Cases:
+  
+  1. I just want to transition from x=0 -> x=20.
+    v.transitionTo('styleLeft', 20) ;
+     -> creates an animation for styleLeft.  If you add a new animation for
+        the same effect, it will cancel the old one automatically.
+        
+  2. I want to have an 'animation behavior' attached to some property.  
+     whenever I change it, it should automatically transition the property
+     instead of just updating it.  i.e. a "Tracker".
+     
+     -> I may want the tracker to update several things at once.  But that
+        could be done through changing one property which will in turn 
+        update everything else.  Better idea.
+        
+      Tracker simply stores some animation properties and calls transitionTo
+      whenever your target value changes.
+        
+  3. I want to have some property animating on its own.  For example a 
+     throbbing button
+     
+     a = v.addAnimation('opacity', { 
+       repeatCount: , 
+       autoreverses: YES, 
+       end: 1.0, 
+       start: 0.0,
+       property: 'opacity' 
+      }) ;
+      
+    a.set('isPaused', YES) ;
+    v.removeAnimation('opacity');
+    
+  --
+  We will need an animation builder.  It would be nice if I could have a 
+  complete timeline for an animation setup and you just tell it to run.  Set
+  the timecode to anytime that you want, tell it to start or stop.
+  
+  @extends SC.Timer
+  @author Charles Jolley
+  @since SproutCore 1.0
+*/
+SC.Animation = SC.Timer.extend(
+/** @scope SC.Animation.prototype */ {
+
+  /**
+    The target frame rate.  This is used to determine the interval of the
+    timer.
+    
+    @type {Number}
+    @field
+  */
+  frameRate: 60,
+  
+  /**
+    The interval between frames.  Calculated automatically from the frameRate.
+    This property is read only.
+    
+    @type {Number}
+    @field
+  */
+  interval: function() {
+    return 1000 / this.get('frameRate') ;
+  }.property('frameRate'),
+  
+  /**
+    The total amount of time in msec you want to take for the animation to
+    go from 0-1.
+  */
+  duration: 0,
+  
+  /**
+    The speed at which the timecode for the animation will progress.  1.0
+    means it will progress in real time, 2.0 means twice as fast, etc.
+  */
+  speed: 1.0,
+  
+  /**
+    The total number of times you want the animation to repeat.
+    
+    This can be any number, including partial numbers.  If you set this 
+    value you must not set repeatDuration as well.  This will be ignored 
+    if the value is 0, which is the default.
+    
+    If you set this property to -1, then the animation will repeat
+    indefinitely.
+    
+    Setting this property will update the targetTimecode.
+    
+    @type {Number}
+    @field
+  */
+  repeatCount: 0,
+  
+  /**
+    The total amount of time the animation should run, repeating itself, in
+    msec.
+    
+    If you set this value you must not set repeatCount as well.  This will
+    be ignored if the value is 0, which is the default.
+    
+    Setting this property will update the targetTimecode.
+    
+    @type {Number}
+    @field
+  */
+  repeatDuration: 0,
+  
+  /**
+    If YES, then the animation will automatically reverse itself on each
+    repeat.
+  
+    @type {Boolean}
+    @field
+  */
+  autoreverses: NO,
+  
+  /**
+    A transition function.  This is used to convert the progress into a 
+    state value.  You can supply your own transition function to provide
+    varied behaviors such as ease in, ease out, etc.
+  
+    The function must have a signature like:
+    
+    transition: function(value, animator)
+    
+    It must accept a value from 0-1 indicating the current animation progress
+    and return a value from 0-1 indication the current transition progress.
+    
+    @type {Function}
+    @field
+  */
+  transition: null,
+  
+  /**
+    This is the current timecode for the animation, in msec.  You can set
+    this to any value that you want and the animation to compute the current
+    transition value from it.  
+    
+    To move instantly to any part of your animation, you can simply set this
+    timecode or use jumpTo().
+    
+    @type {Number}
+    @field
+  */
+  currentTimecode: 0,
+
+  /**
+    This is the target timecode.  Whenever the target timecode and the
+    current timecode do not match, the animation will animate until it
+    reaches the target timecode.
+    
+    To transition the animation to a new state, set the timecode to any 
+    value that you want.  
+    
+    @type {Number}
+  */
+  targetTimecode: 0,
+
+  /**
+    The current animation progress.  
+    
+    This value will loop from 0-1 based on the current timecode and the 
+    setting of autoreverses.  You generally do not want to use this value. 
+    Instead use the value property to compute the current transition.
+    
+    @type {Number}
+    @field
+  */
+  progress: function() {
+
+    // current progress is calculated from the currentTimecode by dividing
+    // it by the animation duration and autoreverses.
+    var currentTimecode = this.get('currentTimecode') ;
+    var duration = this.get('duration') ;
+    var reverses = this.get('autoreverses') ;
+    
+    // find the progress through the current cycle.
+    var cycle = Math.floor(currentTimecode / duration) ;
+    var progress = (currentTimecode - (duration * cycle)) / duration;
+    
+    // if we autoreverse and the cycle is odd numbered, invert.
+    if (reverses && (cycle % 2) > 0) progress = 1 - progress ;
+    return progress ;
+  }.property('currentTimecode', 'duration', 'autoreverses'),
+  
+  /**
+    The current animation value.  Transform functions can observe this 
+    property and update the target object accordingly.
+  
+    @type {Number}
+    @field
+  */
+  value: function() {
+    var value = this.get('progress');
+    if (this.transition) value = this.transition(value, this) ;
+    return value ;
+  }.property('progress'),
+  
+  /**
+    The target object of the animation.  This is often used by transform
+    functions as the target of their change.  It is not strictly required.
+    
+    @type {Object}
+    @field
+  */
+  target: null,
+  
+
+  /**
+    This method must be called once when the animation is created to schedule
+    it with the run loop.  Once animation has been started, you should can
+    pause it to remove it from the runloop temporarily.
+    
+    @returns {void}
+  */
+  play: function() {
+    this.beginPropertyChanges() ;
+    if (!this.get('isScheduled')) {
+      this.schedule() ;
+      this._lastActionTime = SC.runLoop.get('startTime') ;
+    }
+    
+    if (this.get('isPaused')) this.set('isPaused', NO) ;
+    this.endPropertyChanges() ;
+  },
+  
+  /**
+    Once an animation has been started, you can pause it anytime with this
+    method.  Call start() to restart it or set isPaused to NO.
+    
+    @returns {void}
+  */
+  pause: function() {
+    this.set('isPaused', YES) ;
+  },
+  
+  /**
+    Immediately changes the currentTimecode to reflect the requested amount
+    of progress through a single cycle of the animation.
+    
+    @param progress {Number} a progress value from 0 to 1.
+    @returns {void}
+  */
+  jumpTo: function(progress) {
+    // get the current progress.
+    var cur = this.get('progress') ;
+    var diff = progress - cur ;
+    var duration = this.get('duration') ;
+    diff *= duration ;
+
+    var timecode = this.get('currentTimecode') ;
+    if (diff !== 0) this.set('currentTimecode', timecode + diff) ;
+  },
+  
+  /**
+    Changes the targetTimecode to reflect the request amount of progress
+    through the current cycle of the animation.  If the animation is in 
+    reverse, this could move the timecode in the opposite direction.
+    
+    @param progress {Number} a progress value from 0 to 1.
+    @returns {void}
+  */
+  seekTo: function(progress) {
+    // get the current progress.
+    var cur = this.get('progress') ;
+    var diff = progress - cur ;
+    var duration = this.get('duration') ;
+    diff *= duration ;
+
+    var timecode = this.get('currentTimecode') ;
+    if (diff !== 0) this.set('targetTimecode', timecode + diff) ;
+  },
+  
+  /**
+    Changes the currentTimecode and targetTimecode to reflect the requested
+    amount of progress through the current cycle of the animation.  If the
+    animation is in reverse, this could move the timecode in the opposite
+    direction.
+    
+    @param fromProgress {Number} a progress value from 0 to 1
+    @param toProgress {Number} a progress value from 0 to 1
+    @returns {void} 
+  */
+  seekFromTo: function(fromProgress, toProgress) {
+    // get the current progress.
+    var timecode = this.get('currentTimecode') ;
+    var cur = this.get('progress') ;
+    var duration = this.get('duration') ;
+
+    this.beginPropertyChanges() ;
+    
+    var diff = fromProgress - cur ;
+    diff *= duration ;
+    if (diff !== 0) this.set('currentTimecode', timecode + diff) ;
+    
+    diff = toProgress - cur ;
+    diff *= duration ;
+    if (diff !== 0) this.set('targetTimecode', timecode + diff) ;
+    
+    this.endPropertyChanges() ;
+  },
+  
+  /**
+    Changes the targetTimecode to invert the direction of the animation.
+    If the progress value is currently headed towards 1.0, it will be instead
+    headed to 0.
+    
+    @returns {Number} the new progress
+  */
+  toggle: function() {
+    throw "toggle not yet implemented" ;
+  },
+  
+  /**
+    The core action executed by the timer.
+  */
+  performAction: function() {
+    
+    // if timecodes match, then we suspend the animation and return, there
+    // is nothing more to do.
+    var cur = this.get('currentTimecode') ;
+    var target = this.get('targetTimecode') ;
+    if (cur == target) {
+      this.set('isPaused', YES) ;
+      return ;
+    }
+    
+    // determine the amount of time that has elapsed since the last time
+    // we were called.
+    var curTime = SC.runLoop.get('startTime') ;
+    var lapsed = (curTime - this._lastActionTime) * this.get('speed') ;
+    this._lastActionTime = curTime ;
+    
+    // update the current timecode.  Moving in the direction of the target
+    // timecode.  If timecodes match, there is nothing to do.
+    if (target > cur) {
+      cur += lapsed ;
+      if (cur > target) cur = target ;
+    } else {
+      cur -= lapsed ;
+      if (cur < target) cur = target ;
+    }
+    
+    // now set the new timecode, this should trigger other observers to
+    // update.
+    this.set('currentTimecode', cur) ;
+  },
+  
+  // ......................................
+  // INTERNAL METHODS
+  //
+  
+  /** @private
+    Observes changes to repeatCount; updates the targetTimecode.
+  */
+  _repeatCountObserver: function() {
+    var repeatCount = this.get('repeatCount') ;
+    var target ;
+    if (repeatCount < 0) {
+      target = Date.now() * 2 ;
+    } else if (repeatCount > 0) {
+      target = this.get('duration') * repeatCount ;
+    } else return ; // nothing to do.
+    this.set('targetTimecode', target) ;
+  }.observes('repeatCount'),
+  
+  /** @private
+    Observes changes to the repeatDuration; updates the targetTimecode.
+  */
+  _repeatDurationObserver: function() {
+    var dur = this.get('repeatDuration') ;
+    if (dur < 0) {
+      dur = Date.now() * 2 ;
+    } else if (dur == 0) return; // nothing to do
+    this.set('targetTimecode', dur) ;
+  }.observes('repeatDuration'),
+
+  init: function() {
+    arguments.callee.base.call(this) ;
+
+    this.targetTimecode = this.get('duration') ;
+    this._repeatDurationObserver() ;
+    this._repeatCountObserver() ;
+  },
+  
+  repeats: YES, // for timer
+  
+  _logValueObserver: function() {
+    console.log('value did change to: %@'.fmt(this.get('value')));
+  }.observes('value') 
+  
+});