sproutcore 1.0.1042 → 1.0.1043

data/VERSION.yml

@@ -1,7 +1,7 @@
 --- 
-:digest: 0d264600bbd6854ae2fca462e6ef64fb9ec9f114
+:digest: 27241da4db9a4fd342f444b171b497ccb7272fe0
 :dist: 
-  frameworks/sproutcore: 77d6e1c493db4cc03be061890c3c53409523b534
+  frameworks/sproutcore: e9b957ac68b9adc9eb9cef27396eea85f3075553
 :major: 1
 :minor: 0
-:patch: 1042
+:patch: 1043

data/doc_templates/sproutcore/publish.js

@@ -13,7 +13,8 @@ function superTextile(s) {
             ['\\+', '\\+', 'ins'],  //fixed
             ['~', '~', 'sub'],   
             ['\\^', '\\^', 'sup'], // me
-            ['{{{', '}}}', 'code']];
+            ['{{{', '}}}', 'code'],
+            ['@', '@', 'code']];
 
   for (var i=0;i<qtags.length;i++) {
     var ttag_o = qtags[i][0], ttag_c = qtags[i][1], htag = qtags[i][2];

data/frameworks/sproutcore/apps/tests/english.lproj/main_page.css

@@ -26,7 +26,8 @@ h1.app-title img {
 }
 
 .sc-view.sc-toolbar-view.navigation-bar {
-  border-bottom: 1px #999 solid;
+  border-top:0;
+  border-bottom: 1px #4D5567 solid;
 }
 
 .sc-label-view.center-label {
@@ -34,8 +35,12 @@ h1.app-title img {
   opacity: 0.8;
 	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
-  -moz-opacity:0.8;
-  
+  -moz-opacity:0.8;  
+}
+
+.sc-view.sc-toolbar-view.bottom-toolbar {
+    z-index:2;
+    -webkit-box-shadow: none;
 }
 
 .sc-view.sc-toolbar-view .sc-checkbox-view {

data/frameworks/sproutcore/apps/tests/english.lproj/main_page.js

@@ -62,6 +62,7 @@ TestRunner.mainPage = SC.Page.design({
       anchorLocation: SC.ANCHOR_BOTTOM,
 
       childViews: 'logo continuousIntegrationCheckbox runTestsButton'.w(),
+      classNames: 'bottom-toolbar',
 
       logo: SC.View.design({
         layout: { left: 0, top: 0, bottom: 0, width: 200 },
@@ -204,17 +205,17 @@ TestRunner.mainPage = SC.Page.design({
     navigationView: SC.ToolbarView.design({
       classNames: 'navigation-bar',
       
-      layout: { top: -4, left: 0, right: 0, height: 28 },
+      layout: { top: 0, left: 0, right: 0, height: 32 },
       childViews: "backButton locationLabel".w(),
       
       backButton: SC.ButtonView.design({
-        layout: { top: 5, left: 8, width: 80, height: 20 },
+        layout: { left: 8, centerY: 0, width: 80, height: 24 },
         title: "« Tests",
         action: "back"
       }),
       
       locationLabel: SC.LabelView.design({
-        layout: { right: 8, top: 8, height: 18, left: 100 },
+        layout: { right: 8, centerY: -2, height: 16, left: 100 },
         textAlign: SC.ALIGN_RIGHT,
         valueBinding: "TestRunner.detailController.displayName"
       })
@@ -222,7 +223,7 @@ TestRunner.mainPage = SC.Page.design({
     }),
     
     webView: SC.WebView.design({
-      layout: { top: 28, left: 2, right: 0, bottom: 0 },
+      layout: { top: 33, left: 2, right: 0, bottom: 0 },
       valueBinding: "TestRunner.detailController.uncachedUrl"
     })
   })  

data/frameworks/sproutcore/frameworks/animation/core.js

@@ -75,6 +75,9 @@ SC.Animatable = {
     // substitute our didUpdateLayer method (but saving the old one)
     this._animatable_original_did_update_layer = this.didUpdateLayer || function(){};
     this.didUpdateLayer = this._animatable_did_update_layer;
+    
+    this._animatable_original_willRemoveFromParent = this.willRemoveFromParent || function(){};
+    this.willRemoveFromParent = this._animatable_will_remove_from_parent;
 
     // for debugging
     this._animateTickPixel.displayName = "animate-tick";
@@ -101,12 +104,20 @@ SC.Animatable = {
     }
 
     // live animators
+    this._animatableCurrentStyle = null;
     this._animators = {}; // keyAnimated => object describing it.
     this._animatableSetCSS = "";
     this._last_transition_css = ""; // to keep from re-setting unnecessarily
     this._disableAnimation = 0; // calls to disableAnimation add one; enableAnimation remove one.
   },
   
+  /**
+  Stops all animations on the layer when this occurs by calling resetAnimation.
+  */
+  _animatable_will_remove_from_parent: function() {
+    this.resetAnimation();
+  },
+  
   /**
   Disables animation.
   
@@ -114,12 +125,17 @@ SC.Animatable = {
   If you call disable twice, you need two enables to start it. Three times, you need
   three enables.
   */
-  disableAnimation: function() { this._disableAnimation++; },
+  disableAnimation: function() { 
+    this._disableAnimation++;
+  },
   
   /**
   Enables animation if it was disabled (or moves towards that direction, at least).
   */
-  enableAnimation: function() { this._disableAnimation--; if (this._disableAnimation < 0) this._disableAnimation = 0; },
+  enableAnimation: function() {
+    this._disableAnimation--; 
+    if (this._disableAnimation < 0) this._disableAnimation = 0;
+  },
 
   /**
   Adds support for some style properties to adjust.
@@ -175,17 +191,40 @@ SC.Animatable = {
     // call base with whatever is leftover
     return this;
   },
-
+  
   /**
-  Resets animation so that next manipulation of style will not animate.
+  Returns the current set of styles and layout according to JavaScript transitions.
+  
+  That is, for transitions managed by JavaScript (rather than CSS), the current position
+  (even mid-transition) will be returned. For CSS-based transitions, the target position
+  will be returned. This function is mostly useful for testing.
+  
+  It will return null if there is no such style.
+  */
+  getCurrentJavaScriptStyles: function() {
+    return this._animatableCurrentStyle
+  },
 
-  Currently does not stop existing animations, so won't work very well
-  if there are any (will actually stutter).
+  /**
+  Resets animation, stopping all existing animations.
   */
-  resetAnimation: function()
-  {
-    this._animatableCurrentStyle = this.style;
+  resetAnimation: function() {
+    this._animatableCurrentStyle = null;
+    this._stopJavaScriptAnimations();
+    this.disableAnimation();
     this.updateStyle();
+    this.enableAnimation();
+  },
+  
+  /**
+    Stops all JavaScript animations on the object. In their tracks. Hah hah.
+  */
+  _stopJavaScriptAnimations: function() {
+    for (var i in this._animators) {
+      if (this._animators[i] && this._animators[i].isQueued) {
+         SC.Animatable.removeTimer(this._animators[i]);
+      }
+    }
   },
 
   _getStartStyleHash: function(start, target)
@@ -196,6 +235,7 @@ SC.Animatable = {
     this.layout = start;
 
     // get our frame and parent's frame
+    this.notifyPropertyChange("layout");
     var f = this.get("frame");
     var p = this.getPath("layoutView.frame");
 
@@ -211,7 +251,7 @@ SC.Animatable = {
       if (f)
       {
         if (i == "left") { l[i] = f.x; continue; }
-        else if (i == " top") { l[i] = f.y; continue; }
+        else if (i == "top") { l[i] = f.y; continue; }
         else if (i == "right") { l[i] = p.width - f.x - f.width; continue; }
         else if (i == "bottom") { l[i] = p.height - f.y - f.height; continue; }
         else if (i == "width") { l[i] = f.width; continue; }
@@ -248,7 +288,7 @@ SC.Animatable = {
     // make sure there _is_ a previous style to animate from. Otherwise,
     // we don't animate—and this is sometimes used to temporarily disable animation.
     var i;
-    if (!this._animatableCurrentStyle || this._disableAnimation > 0)
+    if (!this._animatableCurrentStyle || this._disableAnimation > 0 || !layer)
     {
       // clone it to be a nice starting point next time.
       this._animatableCurrentStyle = {};
@@ -430,7 +470,7 @@ SC.Animatable = {
   _animatableApplyStyles: function(layer, styles)
   {	
     if (!layer) return;
-
+    
     // handle a specific style first: display. There is a special case because it disrupts transitions.
     if (styles["display"]) {
       layer.style["display"] = styles["display"];
@@ -447,23 +487,21 @@ SC.Animatable = {
 
     // get timer
     var timer = this._animators["display-styles"];
-
-    // fire if there is already a pending one
-    if (timer.isQueued) {
-      //	timer.action.call(timer, 0);
-    }
-
+    
+    // set settings
     timer.holder = this;
     timer.action = this._animatableApplyNonDisplayStyles;
     timer.layer = layer;
     timer.styles = styles;
     this._animatableCurrentStyle = styles;
+    
+    // schedule.
     SC.Animatable.addTimer(timer);
   },
 
   _animatableApplyNonDisplayStyles: function(){
     var loop = SC.RunLoop.begin();
-    var layer = this.layer, styles = this.styles;
+    var layer = this.layer, styles = this.styles; // this == timer
     var styleHelpers = {
       opacity: this.holder._style_opacity_helper
       // more to be added here...
@@ -495,7 +533,7 @@ SC.Animatable = {
       // apply the styles (but we have to mix it in, because we still have transitions, etc. that we set)
       var ls = this.holder.get("layoutStyle");
       for (var key in ls) {
-        if (SC.none(ls[key])) delete style[key];
+        if (SC.none(ls[key])) style[key] = ""; // because IE is stupid and can't handle delete or null
         else if (style[key] != ls[key]) style[key] = ls[key];
       }
 
@@ -511,17 +549,20 @@ SC.Animatable = {
   _animatable_did_update_layer: function()
   {
     this._animatable_original_did_update_layer();
-    var styles = this._animatableCurrentStyle || (this.get("style") || {}), layer = this.get("layer");
+    var styles = this._animatableCurrentStyle, layer = this.get("layer");
+    if (!styles) {
+      styles = {};
+      var s = this.get("style");
+      var l = this.get("layout");
+      SC.mixin(styles, s, l);
+    }
     this._animatableApplyStyles(layer, styles);
   },
 
   /**
   Overriden to support animation.
 
-  Works by keeping a copy of the current layout, called animatableCurrentLayout.
-  Whenever the layout needs updating, the old layout is consulted.
-
-  "layout" is kept at the new layout
+  Works by copying the styles to the object's "style" property.
   */
   updateLayout: function(context, firstTime)
   {
@@ -533,7 +574,7 @@ SC.Animatable = {
       var key = ls[i];
       if (style[key] !== newLayout[key])
       {
-        if (SC.none(newLayout[key])) delete style[key];
+        if (SC.none(newLayout[key])) style[key] = ""; // because IE is stupid and can't handle delete or debug.
         else style[key] = newLayout[key];
         didChange = YES;
       }
@@ -796,7 +837,7 @@ SC.mixin(SC.Animatable, {
   TRANSITION_CSS_EASE: "ease",
   TRANSITION_CSS_EASE_IN: "ease-in",
   TRANSITION_CSS_EASE_OUT: "ease-out",
-  TRANSITION_CSS_EASE_OUT: "ease-in-out",
+  TRANSITION_CSS_EASE_IN_OUT: "ease-in-out",
 
   // JavaScript-enabled
   TRANSITION_EASE: [0.25, 0.1, 0.25, 1.0],
@@ -833,14 +874,22 @@ SC.mixin(SC.Animatable, {
     lastFPS: 0
   }),
 
-  addTimer: function(animator)
-  {
+  addTimer: function(animator) {
     if (animator.isQueued) return;
+    animator.prev = SC.Animatable.baseTimer;
     animator.next = SC.Animatable.baseTimer.next;
-    SC.Animatable.baseTimer.next = animator;
+    if (SC.Animatable.baseTimer.next) SC.Animatable.baseTimer.next.prev = animator; // adjust next prev.
+    SC.Animatable.baseTimer.next = animator; // switcheroo.
     animator.isQueued = true;
     if (!SC.Animatable.going) SC.Animatable.start();
   },
+  
+  removeTimer: function(animator) {
+    if (!animator.isQueued) return;
+    if (animator.next) animator.next.prev = animator.prev; // splice ;)
+    animator.prev.next = animator.next; // it should always have a prev.
+    animator.isQueued = false;
+  },
 
   start: function()
   {
@@ -865,6 +914,7 @@ SC.mixin(SC.Animatable, {
       var t = next.next;
       next.isQueued = false;
       next.next = null;
+      next.prev = null;
       next.action.call(next, start);
       next = t;
       i++;

data/frameworks/sproutcore/frameworks/animation/tests/core.js

@@ -8,10 +8,12 @@ module("Animatable", {
   setup: function() {
     view = SC.View.create(SC.Animatable, { 
       layout: { left: 100, top: 100, height: 100, width: 100 },
+      style: { opacity: .5 },
       transitions: {
         left: 0.25,
         top: { duration: 0.35 },
-        width: { duration: 0.2, timing: SC.Animatable.TRANSITION_EASE_IN_OUT }
+        width: { duration: 0.2, timing: SC.Animatable.TRANSITION_EASE_IN_OUT },
+        style: { opacity: 1 }
       }
     });
     
@@ -63,3 +65,26 @@ test("animatable should handle concatenated transitions properly", function(){
   equals(width["timing"], SC.Animatable.TRANSITION_EASE_IN_OUT, "SC.Animatable.TRANSITION_EASE_IN_OUT for width.");
 });
 
+test("animatable handler for layer update should ensure both layout and styles are set in the 'current style'.", function() {
+  var original_transition_enabled = SC.Animatable.enableCSSTransitions;
+  SC.Animatable.enableCSSTransitions = NO;
+  
+  // check current style (should be none yet)
+  var current = view.getCurrentJavaScriptStyles();
+  equals(current, null, "There should be no current style yet.");
+  
+  // create the layer
+  view.createLayer();
+  view.updateLayer();
+  
+  // check again. Now, we should have a style
+  current = view.getCurrentJavaScriptStyles();
+  ok(!SC.none(current), "There now SHOULD be a current JS style.");
+  
+  // and now, make sure we have both style AND layout set properly.
+  equals(current["opacity"], .5, "opacity should be .5");
+  equals(current["left"], 100, "left should be 100");
+  
+  // go back to the beginning
+  SC.Animatable.enableCSSTransitions = original_transition_enabled;
+});

data/frameworks/sproutcore/frameworks/datastore/system/store.js

@@ -1683,6 +1683,52 @@ SC.Store = SC.Object.extend( /** @scope SC.Store.prototype */ {
     array.length = 0 ;
     return this;
   },
+
+  /** 
+    Convenience method can be called by the store or other parts of your 
+    application to load a record into the store.  This method will take a
+    recordType and a data hashes and either add or update the 
+    record in the store. 
+    
+    The loaded records will be in an SC.Record.READY_CLEAN state, indicating
+    they were loaded from the data source and do not need to be committed 
+    back before changing.
+    
+    This method will check the state of the storeKey and call either 
+    pushRetrieve() or dataSourceDidComplete().  The standard state constraints 
+    for these methods apply here.
+    
+    The return value will be the storeKey used for the push.  This is often
+    convenient to pass into loadQuery(), if you are fetching a remote query.
+    
+    If you are upgrading from a pre SproutCore 1.0 application, this method 
+    is the closest to the old updateRecord().
+    
+    @param {SC.Record} recordType the record type
+    @param {Array} dataHash to update
+    @param {Array} id optional.  if not passed lookup on the hash
+    @returns {String} store keys assigned to these id
+  */
+  loadRecord: function(recordType, dataHash, id) {
+    var K       = SC.Record,
+        ret, primaryKey, dataHash, storeKey;
+        
+    // save lookup info
+    recordType = recordType || SC.Record;
+    primaryKey = recordType.prototype.primaryKey;
+    
+    
+    // push each record
+    id = id || dataHash[primaryKey];
+    ret = storeKey = recordType.storeKeyFor(id); // needed to cache
+      
+    if (this.readStatus(storeKey) & K.BUSY) {
+        this.dataSourceDidComplete(storeKey, dataHash, id);
+      } else this.pushRetrieve(recordType, id, dataHash, storeKey);
+    
+    // return storeKey
+    return ret ;
+  },
   
   /** 
     Convenience method can be called by the store or other parts of your 
@@ -1730,11 +1776,8 @@ SC.Store = SC.Object.extend( /** @scope SC.Store.prototype */ {
         primaryKey = recordType.prototype.primaryKey ;
       }
       id = (ids) ? ids.objectAt(idx) : dataHash[primaryKey];
-      ret[idx] = storeKey = recordType.storeKeyFor(id); // needed to cache
+      ret[idx] = this.loadRecord(recordType, dataHash, id);
       
-      if (this.readStatus(storeKey) & K.BUSY) {
-        this.dataSourceDidComplete(storeKey, dataHash, id);
-      } else this.pushRetrieve(recordType, id, dataHash, storeKey);
     }
     
     // return storeKeys

data/frameworks/sproutcore/frameworks/desktop/english.lproj/toolbar.css

@@ -1,6 +1,5 @@
 /* SC.ToolbarView */
 
 .sc-toolbar-view {
-  border-top: 1px #999 solid;
   background-color: #ddd ;
 }

data/frameworks/sproutcore/frameworks/foundation/mixins/button.js

@@ -168,6 +168,7 @@ SC.Button = {
     // get the icon.  If there is an icon, then get the image and update it.
     // if there is no image element yet, create it and insert it just before
     // title.
+    
     if (icon) {
       var blank = SC.BLANK_IMAGE_URL;
 
@@ -192,10 +193,16 @@ SC.Button = {
         if(needsTitle) { 
           if(this.get('needsEllipsis')){
             elem.addClass('ellipsis');
-            if(this._ImageTitleCached !== imgTitle) htmlNode.innerHTML = imgTitle;
+            if(this._ImageTitleCached !== imgTitle) {
+              this._ImageTitleCached = imgTitle; // Update the cache
+              htmlNode.innerHTML = imgTitle;
+            }
           }else{
             elem.removeClass('ellipsis');
-            if(this._ImageTitleCached !== imgTitle) htmlNode.innerHTML = imgTitle;
+            if(this._ImageTitleCached !== imgTitle) {
+              this._ImageTitleCached = imgTitle; // Update the cache
+              htmlNode.innerHTML = imgTitle;
+            }
           } 
         }
         else { htmlNode.innerHTML = ''; }