sproutcore 1.5.0.pre.3 → 1.5.0.pre.4

data/lib/frameworks/sproutcore/frameworks/foundation/views/image.js

@@ -6,12 +6,6 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-SC.SCALE_NONE = "none";
-SC.FILL = "fill";
-SC.FILL_PROPORTIONALLY = "fillProportionally";
-SC.BEST_FIT = "fitBest";
-SC.BEST_FIT_DOWN_ONLY = "fitBestDown";
-
 SC.IMAGE_STATE_NONE = 'none';
 SC.IMAGE_STATE_LOADING = 'loading';
 SC.IMAGE_STATE_LOADED = 'loaded';
@@ -47,14 +41,15 @@ SC.BLANK_IMAGE.width = SC.BLANK_IMAGE.height = 1;
 
   @extends SC.View
   @extends SC.Control
+  @extends SC.InnerLayout
   @since SproutCore 1.0
 */
-SC.ImageView = SC.View.extend(SC.Control,
+SC.ImageView = SC.View.extend(SC.Control, SC.InnerFrame,
 /** @scope SC.ImageView.prototype */ {
 
   classNames: 'sc-image-view',
 
-  displayProperties: 'image imageValue innerFrame frame status scale toolTip type'.w(),
+  displayProperties: 'frame image imageValue innerFrame status toolTip type'.w(),
 
   renderDelegateName: function() {
     return (this.get('useCanvas') ? 'canvasImage' : 'image') + "RenderDelegate";
@@ -69,20 +64,6 @@ SC.ImageView = SC.View.extend(SC.Control,
   // Properties
   //
 
-  /**
-    Align the image within its frame.
-
-    <table>
-    <tr><td>SC.ALIGN_TOP_LEFT</td><td>SC.ALIGN_TOP</td><td>SC.ALIGN_TOP_RIGHT</td></tr>
-    <tr><td>SC.ALIGN_LEFT</td><td>SC.ALIGN_CENTER/td><td>SC.ALIGN_RIGHT</td></tr>
-    <tr><td>SC.ALIGN_BOTTOM_LEFT</td><td>SC.ALIGN_BOTTOM</td><td>SC.ALIGN_BOTTOM_RIGHT</td></tr>
-    </table>
-
-    @property {SC.ALIGN_CENTER|SC.ALIGN_TOP_LEFT|SC.ALIGN_TOP|SC.ALIGN_TOP_RIGHT|SC.ALIGN_RIGHT|SC.ALIGN_BOTTOM_RIGHT|SC.BOTTOM|SC.BOTTOM_LEFT|SC.LEFT|Number}
-    @default SC.ALIGN_CENTER
-  */
-  align: SC.ALIGN_CENTER,
-
   /**
     If YES, this image can load in the background.  Otherwise, it is treated
     as a foreground image.  If the image is not visible on screen, it will
@@ -96,98 +77,6 @@ SC.ImageView = SC.View.extend(SC.Control,
   */
   image: SC.BLANK_IMAGE,
 
-  innerFrame: function() {
-    var image = this.get('image'),
-        align = this.get('align'),
-        scale = this.get('scale'),
-        frame = this.get('frame'),
-        imageWidth = image.width,
-        imageHeight = image.height,
-        scaleX,
-        scaleY,
-        result;
-
-    // Fast path
-    result = { x: 0, y: 0, width: frame.width , height: frame.height };
-    if (scale === SC.FILL) return result;
-
-    // Determine the appropriate scale
-    scaleX = frame.width / imageWidth;
-    scaleY = frame.height / imageHeight;
-
-    switch (scale) {
-      case SC.FILL_PROPORTIONALLY:
-        scale = scaleX > scaleY ? scaleX : scaleY;
-        break;
-      case SC.BEST_FIT:
-        scale = scaleX < scaleY ? scaleX : scaleY;
-        break;
-      case SC.BEST_FIT_DOWN_ONLY:
-        if ((imageWidth > frame.width) || (imageHeight > frame.height)) {
-          scale = scaleX < scaleY ? scaleX : scaleY;
-        } else {
-          scale = 1.0;
-        }
-        break;
-      case SC.SCALE_NONE:
-        scale = 1.0;
-        break;
-      default: // Number
-        if (isNaN(window.parseFloat(scale)) || (window.parseFloat(scale) <= 0)) {
-          SC.Logger.warn("SC.ImageView: The scale '%@' was not understood.  Scale must be one of SC.FILL, SC.FILL_PROPORTIONALLY, SC.BEST_FIT, SC.BEST_FIT_DOWN_ONLY or a positive number greater than 0.00.".fmt(scale));
-
-          // Don't attempt to scale or offset the image
-          return result;
-        }
-    }
-
-    imageWidth *= scale;
-    imageHeight *= scale;
-    result.width = Math.round(imageWidth);
-    result.height = Math.round(imageHeight);
-
-    // Align the image within its frame
-    switch (align) {
-      case SC.ALIGN_LEFT:
-        result.x = 0;
-        result.y = (frame.height / 2) - (imageHeight / 2);
-        break;
-      case SC.ALIGN_RIGHT:
-        result.x = frame.width - imageWidth;
-        result.y = (frame.height / 2) - (imageHeight / 2);
-        break;
-      case SC.ALIGN_TOP:
-        result.x = (frame.width / 2) - (imageWidth / 2);
-        result.y = 0;
-        break;
-      case SC.ALIGN_BOTTOM:
-        result.x = (frame.width / 2) - (imageWidth / 2);
-        result.y = frame.height - imageHeight;
-        break;
-      case SC.ALIGN_TOP_LEFT:
-        result.x = 0;
-        result.y = 0;
-        break;
-      case SC.ALIGN_TOP_RIGHT:
-        result.x = frame.width - imageWidth;
-        result.y = 0;
-        break;
-      case SC.ALIGN_BOTTOM_LEFT:
-        result.x = 0;
-        result.y = frame.height - imageHeight;
-        break;
-      case SC.ALIGN_BOTTOM_RIGHT:
-        result.x = frame.width - imageWidth;
-        result.y = frame.height - imageHeight;
-        break;
-      default: // SC.ALIGN_CENTER || SC.ALIGN_MIDDLE
-        result.x = (frame.width / 2) - (imageWidth / 2);
-        result.y = (frame.height / 2) - (imageHeight / 2);
-    }
-
-    return result;
-  }.property('align', 'image', 'scale', 'frame').cacheable(),
-
   /**
     @property {String}
     @default null
@@ -197,6 +86,20 @@ SC.ImageView = SC.View.extend(SC.Control,
     return value && value.isEnumerable ? value.firstObject() : value;
   }.property('value').cacheable(),
 
+  /**
+    The frame for the inner img element or for the canvas to draw within, altered according to the scale
+    and align properties provided by SC.InnerFrame.
+
+    @property {Object}
+  */
+  innerFrame: function() {
+    var image = this.get('image'),
+        imageWidth = image.width,
+        imageHeight = image.height;
+
+    return this.innerFrameForSize(imageWidth, imageHeight);
+  }.property('align', 'image', 'scale', 'frame').cacheable(),
+
   /**
     If YES, any specified toolTip will be localized before display.
 
@@ -205,27 +108,6 @@ SC.ImageView = SC.View.extend(SC.Control,
   */
   localize: YES,
 
-  /**
-    Determines how the image will scale to fit within its containing space.
-
-    Examples:
-
-      SC.SCALE_NONE - don't scale
-      SC.FILL - stretch/shrink the image to fill the ImageView frame
-      SC.FILL_PROPORTIONALLY - stretch/shrink the image to fill the ImageView frame while maintaining
-        aspect ratio, such that the shortest dimension will just fit within the frame and the longest dimension will
-        overflow and be cropped
-      SC.BEST_FIT - stretch/shrink the image to fit the ImageView frame while maintaining aspect ration,
-        such that the longest dimension will just fit within the frame
-      SC.BEST_FIT_DOWN_ONLY - shrink the image to fit the ImageView frame while maintaining aspect ration,
-        such that the longest dimension will just fit within the frame.  Do not stretch the image if the image's
-        width is less than the frame's width.
-
-    @property {SC.SCALE_NONE|SC.FILL|SC.FILL_PROPORTIONALLY|SC.BEST_FIT|SC.BEST_FIT_DOWN_ONLY|Number}
-    @default SC.FILL
-  */
-  scale: SC.FILL,
-
   /**
     Current load status of the image.
 
@@ -294,6 +176,33 @@ SC.ImageView = SC.View.extend(SC.Control,
   */
   value: null,
 
+  /**
+    Recalculate our innerFrame if the outer frame has changed.
+
+    @returns {void}
+  */
+  // Note: SC.View's updateLayer() will call viewDidResize() if useStaticLayout is true.  The result of this
+  // is that since our display depends on the frame, when the view or parent view resizes, viewDidResize
+  // notifies that the frame has changed, so we update our view, which calls viewDidResize, which notifies
+  // that the frame has changed, so we update our view, etc. in an infinite loop.
+  viewDidResize: function() {
+    // 'frame' as a property is cached and won't be updated, however calling notifyPropertyChange on 'frame' causes the aforementioned infinite loop
+    // Instead, measure the frame ourselves and only notify if it has changed width or height
+    var layer = this.get('layer'),
+        width,
+        height;
+
+    if (layer) {
+      width = layer.offsetWidth;
+      height = layer.offsetHeight;
+
+      if (this._cachedWidth !== width || this._cachedHeight !== height) {
+        this.notifyPropertyChange('frame');
+        this._cachedWidth = width;
+        this._cachedHeight = height;
+      }
+    }
+  },
 
   // ..........................................................
   // Methods
@@ -403,18 +312,24 @@ SC.ImageView = SC.View.extend(SC.Control,
     if (type === SC.IMAGE_TYPE_URL) {
       image = new Image();
 
-      image.onerror = image.onabort = function() {
+      var errorFunc = function() {
         SC.run(function() {
           that._loadImageDidComplete(value, SC.$error("SC.Image.FailedError", "Image", -101));
         });
       };
 
-      image.onload = function() {
+      var loadFunc = function() {
         SC.run(function() {
           that._loadImageDidComplete(value, image);
         });
       };
 
+      // Using bind here instead of setting onabort/onerror/onload directly
+      // fixes an issue with images having 0 width and height
+      $(image).bind('error', errorFunc);
+      $(image).bind('abort', errorFunc);
+      $(image).bind('load', loadFunc);
+
       image.src = value;
       return YES;
     }

data/lib/frameworks/sproutcore/frameworks/foundation/views/text_field.js

@@ -142,11 +142,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   _isFocused: NO,
   
   
-  init:function(){
-    var hintStatus = this.get('hintON'),
-        val = this.get('value');
-    if(!val || val && val.length===0) this.set('hintON', YES);
-    else this.set('hintON', NO);
+  init: function() {
+    var val = this.get('value');
+    this.set('hintON', (!val || val && val.length === 0));
     return sc_super();
   },
 
@@ -414,7 +412,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     
     //Adding this to differentiate between older and newer versions of safari
     //since the internal default field padding changed 
-    isOldSafari= (parseInt(SC.browser.safari,0)<532);
+    isOldSafari= (parseInt(SC.browser.webkit,0)<532);
     context.setClass('oldWebKitFieldPadding', isOldSafari);
     
     spellCheckString = spellCheckEnabled ? ' spellcheck="true"' : ' spellcheck="false"';
@@ -891,7 +889,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
       return YES ; // handled
     }
     // maxlength for textareas
-    if(!SC.browser.safari && this.get('isTextArea')){
+    if(!SC.browser.webkit && this.get('isTextArea')){
       var val = this.get('value'),
           code = evt.which;
     // This code is nasty. It's thanks gecko .keycode table that has charters like & with the same keycode as up arrow key
@@ -979,9 +977,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     or not. Currently is disabled as in webkit there is a bug where the color 
     of the placeholder doesn't refresh all the time.
   */
-  _supportsPlaceHolder: function(){
-    return SC.browser.safari && !this.get('isTextArea');
-  }.property('isTextArea').cacheable(),
+  _supportsPlaceHolder: SC.platform.input.placeholder,
   
   
   valueObserver: function(){
@@ -990,7 +986,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     if (val && val.length>0) {
       this.set('hintON', NO);
       max = this.get('maxLength');
-      if(!SC.browser.safari && val.length>max){
+      if(!SC.browser.webkit && val.length>max){
         this.set('value', val.substr(0, max));
       }
     }else this.set('hintON', YES);

data/lib/frameworks/sproutcore/frameworks/handlebars/extensions.js

@@ -0,0 +1,138 @@
+sc_require("handlebars");
+
+SC.Handlebars = {};
+
+SC.Handlebars.JavaScriptCompiler = function() {};
+SC.Handlebars.JavaScriptCompiler.prototype = SC.beget(Handlebars.JavaScriptCompiler.prototype);
+SC.Handlebars.JavaScriptCompiler.prototype.compiler = SC.Handlebars.JavaScriptCompiler;
+
+SC.Handlebars.JavaScriptCompiler.prototype.nameLookup = function(parent, name, type) {
+  if (type === 'context') {
+    return "SC.get(" + parent + ", " + this.quotedString(name) + ");";
+  } else {
+    return Handlebars.JavaScriptCompiler.prototype.nameLookup.call(this, parent, name, type);
+  }
+};
+
+SC.Handlebars.compile = function(string) {
+  var ast = Handlebars.parse(string);
+  var environment = new Handlebars.Compiler().compile(ast);
+  return new SC.Handlebars.JavaScriptCompiler().compile(environment, true);
+};
+
+Handlebars.registerHelper('view', function(path, fn, inverse, data) {
+  if (fn.isRenderData) { data = fn; fn = null; }
+
+  var newView;
+  if (path.isClass || path.isObject) {
+   newView = path;
+   if (!newView) {
+    throw "Null or undefined object was passed to the #view helper. Did you mean to pass a property path string?";
+   }
+  } else {
+    newView = SC.objectForPropertyPath(path);
+    if (!newView) { throw "Unable to find view at path '" + path + "'"; }
+  }
+
+  var currentView = data.view;
+
+  var childViews = currentView.get('childViews');
+  var childView = currentView.createChildView(newView);
+
+  // Set the template of the view to the passed block if we got one
+  if (fn) { childView.template = fn; }
+
+  childViews.pushObject(childView);
+
+  var context = SC.RenderContext(childView.get('tagName'));
+  childView.applyAttributesToContext(context);
+  // tomdale wants to make SproutCore slow
+  childView.render(context, YES);
+
+  return new Handlebars.SafeString(context.join());
+});
+
+Handlebars.registerHelper('bind', function(property, fn, inverse, data) {
+  if(fn.isRenderData) { data = fn; fn = null; }
+  var view = data.view;
+
+  var spanId = "handlebars-bound-" + jQuery.uuid++;
+  var result = this.getPath(property);
+
+  var self = this, renderContext = SC.RenderContext('span').id(spanId);
+
+  this.addObserver(property, function() {
+    var result = self.getPath(property);
+
+    if (fn && (result !== null && result !== undefined)) {
+      var renderContext = SC.RenderContext('span').id(spanId);
+      renderContext.push(fn(self.get(property)));
+      var element = renderContext.element();
+      view.$("#" + spanId).replaceWith(element);
+    } else if (result !== null && result !== undefined) {
+      view.$("#" + spanId).html(Handlebars.Utils.escapeExpression(self.get(property)));
+    } else {
+      view.$("#" + spanId).html("");
+    }
+  });
+
+  if (result !== null && result !== undefined) {
+    if (fn) {
+      renderContext.push(fn(result));
+    } else {
+      renderContext.push(Handlebars.Utils.escapeExpression(result));
+    }
+  }
+
+  return new Handlebars.SafeString(renderContext.join());
+});
+
+Handlebars.registerHelper('collection', function(path, fn, inverse, data) {
+  var collectionClass;
+
+  if(!data) {
+    data = fn;
+    fn = null;
+  }
+
+  if(typeof path === "string") {
+    collectionClass = SC.objectForPropertyPath(path) || SC.TemplateCollectionView;
+  } else {
+    collectionClass = path;
+  }
+
+  if(fn) {
+    if(collectionClass.isClass) {
+      collectionClass.prototype.itemViewTemplate = fn;
+      collectionClass.prototype.inverseTemplate = inverse;
+    } else {
+      collectionClass.itemViewTemplate = fn;
+      collectionClass.inverseTemplate = inverse;
+    }
+  }
+
+  return Handlebars.helpers.view.call(this, collectionClass, Handlebars.VM.noop, inverse, data);
+});
+
+Handlebars.registerHelper('bindCollection', function(path, bindingString, fn, inverse, data) {
+  var collectionClass = SC.objectForPropertyPath(path) || SC.TemplateCollectionView;
+  var binding = SC.Binding.from(bindingString, this);
+
+  if(!data) {
+    data = fn;
+    fn = null;
+  }
+
+  if(fn) {
+    // attach the function to the original class so it can be used recursively
+    collectionClass.prototype.itemViewTemplate = fn;
+  }
+
+  if(collectionClass.isClass) {
+    collectionClass = collectionClass.extend({ contentBinding: binding });
+  } else {
+    collectionClass.bindings.push( binding.to('content', collectionClass) );
+  }
+
+  return Handlebars.helpers.collection.call(this, collectionClass, fn, inverse, data);
+});