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

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/render.js

@@ -0,0 +1,125 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2010 Apple Inc. and contributors.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test equals context ok same */
+
+// .......................................................
+//  render()
+//
+module("SC.View#render");
+
+test("default implementation invokes renderChildViews if firstTime = YES", function() {
+
+  var rendered = 0, updated = 0, parentRendered = 0, parentUpdated = 0 ;
+  var view = SC.View.create({
+    displayProperties: ["triggerRenderProperty"],
+    childViews: ["child"],
+
+    render: function(context) {
+      parentRendered++;
+    },
+
+    update: function(jquery) {
+      parentUpdated++;
+    },
+
+    child: SC.View.create({
+      render: function(context) {
+        rendered++;
+      },
+
+      update: function(jquery) {
+        updated++;
+      }
+    })
+  });
+
+  view.createLayer();
+  equals(rendered, 1, 'rendered the child');
+  equals(parentRendered, 1);
+
+  view.updateLayer();
+  equals(rendered, 1, 'didn\'t call render again');
+  equals(parentRendered, 1, 'didn\'t call the parent\'s render again');
+  equals(parentUpdated, 1, 'called the parent\'t update');
+  equals(updated, 0, 'didn\'t call the child\'s update');
+
+});
+
+// .......................................................
+// renderChildViews()
+//
+
+module("SC.View#renderChildViews");
+
+test("creates a context and then invokes renderToContext or updateLayer on each childView", function() {
+
+  var runCount = 0, curContext, curFirstTime ;
+
+  var ChildView = SC.View.extend({
+    renderToContext: function(context) {
+      equals(context.prevObject, curContext, 'passed child context of curContext');
+
+      equals(context.tagName(), this.get('tagName'), 'context setup with current tag name');
+
+      runCount++; // record run
+    },
+
+    updateLayer: function() {
+      runCount++;
+    }
+  });
+
+  var view = SC.View.create({
+    childViews: [
+      ChildView.extend({ tagName: 'foo' }),
+      ChildView.extend({ tagName: 'bar' }),
+      ChildView.extend({ tagName: 'baz' })
+    ]
+  });
+
+  // VERIFY: firstTime= YES
+  curContext = view.renderContext('div');
+  curFirstTime= YES ;
+  equals(view.renderChildViews(curContext, curFirstTime), curContext, 'returns context');
+  equals(runCount, 3, 'renderToContext() invoked for each child view');
+
+
+  // VERIFY: firstTime= NO
+  runCount = 0 ; //reset
+  curContext = view.renderContext('div');
+  curFirstTime= NO ;
+  equals(view.renderChildViews(curContext, curFirstTime), curContext, 'returns context');
+  equals(runCount, 3, 'updateLayer() invoked for each child view');
+
+});
+
+test("creates a context and then invokes renderChildViews to call renderToContext on each childView", function() {
+
+  var runCount = 0, curContext ;
+
+  var ChildView = SC.View.extend({
+    renderToContext: function(context) {
+      equals(context.prevObject, curContext, 'passed child context of curContext');
+      equals(context.tagName(), this.get('tagName'), 'context setup with current tag name');
+      runCount++; // record run
+    }
+  });
+
+  var view = SC.View.create({
+    childViews: [
+      ChildView.extend({ tagName: 'foo' }),
+      ChildView.extend({ tagName: 'bar' }),
+      ChildView.extend({ tagName: 'baz' })
+    ]
+  });
+
+  // VERIFY: firstTime= YES
+  curContext = view.renderContext('div');
+  view.renderChildViews(curContext);
+  equals(runCount, 3, 'renderToContext() invoked for each child view');
+
+});

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/static_layout.js

@@ -0,0 +1,21 @@
+module("SC.View - Static Layout functionality");
+
+test("Static layout", function() {
+  var view = SC.View.create({
+    useStaticLayout: YES
+  });
+
+  view.createLayer();
+
+  ok(view.$().is('.sc-static-layout'), "views with useStaticLayout get the sc-static-layout class");
+});
+
+test("Background color", function() {
+  var view = SC.View.create({
+    backgroundColor: "red"
+  });
+
+  view.createLayer();
+
+  ok(view.$().css('background-color') == "red", "backgroundColor sets the CSS background-color class");
+});

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/template/checkbox_support.js

@@ -0,0 +1,20 @@
+SC.CheckboxSupport = {
+  didCreateLayer: function() {
+    this.$('input').change(jQuery.proxy(function() {
+      SC.RunLoop.begin();
+      this.notifyPropertyChange('value');
+      SC.RunLoop.end();
+    }, this));
+  },
+
+  value: function(key, value) {
+    if (value !== undefined) {
+      this.$('input').attr('checked', value);
+    } else {
+      value = this.$('input').attr('checked');
+    }
+
+    return value;
+  }.property().idempotent()
+};
+

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/template/collection.js

@@ -0,0 +1,99 @@
+sc_require('views/template');
+
+SC.TemplateCollectionView = SC.TemplateView.extend({
+  tagName: 'ul',
+  content: null,
+  template: SC.Handlebars.compile(''),
+  emptyView: null,
+
+  // In case a default content was set, trigger the child view creation
+  // as soon as the empty layer was created
+  didCreateLayer: function() {
+    if(this.get('content')) {
+      var indexSet = SC.IndexSet.create(0, this.getPath('content.length'));
+      this.arrayContentDidChange(this.get('content'), null, '[]', indexSet);
+    }
+  },
+
+  itemView: "SC.TemplateView",
+
+  itemViewClass: function() {
+    var itemView = this.get('itemView');
+    // hash of properties to override in our
+    // item view class
+    var extensions = {};
+
+    if(SC.typeOf(itemView) === SC.T_STRING) {
+      itemView = SC.objectForPropertyPath(itemView);
+    }
+
+    if (this.get('itemViewTemplate')) {
+      extensions.template = this.get('itemViewTemplate');
+    }
+
+    if (this.get('tagName') === 'ul') {
+      extensions.tagname = 'li';
+    }
+
+    return itemView.extend(extensions);
+  }.property('itemView').cacheable(),
+
+  contentDidChange: function() {
+    this.removeAllChildren();
+    this.$().empty();
+    this.didCreateLayer();
+
+    this.get('content').addRangeObserver(null, this, this.arrayContentDidChange);
+  }.observes('content').observes('content.[]'),
+
+  arrayContentDidChange: function(array, objects, key, indexes) {
+    var content = this.get('content'),
+        itemViewClass = this.get('itemViewClass'),
+        childViews = this.get('childViews'),
+        toDestroy = [], toReuse = [],
+        view, item, matchIndex, lastView, length, i;
+
+    emptyView = this.get('emptyView');
+    if(emptyView) { emptyView.$().remove(); emptyView.removeFromParent(); }
+
+    // Destroy unused views
+    for (i=0, length=childViews.get('length'); i < length; i++) {
+      view = childViews.objectAt(i);
+      if (content.contains(view.get('content'))) {
+        toReuse.push(view);
+      } else {
+        toDestroy.push(view);
+      }
+    }
+
+    for (i=0, length=toDestroy.length; i < length; i++) { toDestroy[i].destroy(); }
+
+    childViews = [];
+
+    if(array.get('length') === 0 && this.get('inverseTemplate')) {
+      view = this.createChildView(SC.TemplateView.extend({
+        template: this.get('inverseTemplate'),
+        content: this
+      }));
+      this.set('emptyView', view);
+      view.createLayer().$().appendTo(this.$());
+    }
+
+    // Add items, using previous if possible
+    for (i=0, length=array.get('length'); i < length; i++) {
+      item = array.objectAt(i);
+      view = toReuse.find(function(v){ return v.get('content') === item; });
+      if (!view) {
+        view = this.createChildView(itemViewClass.extend({
+          content: item,
+          tagName: 'li'
+        }));
+        view.createLayer().$().appendTo(this.$());
+      }
+      childViews.push(view);
+    }
+
+    this.childViews = childViews;
+  }
+});
+

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/template/text_field_support.js

@@ -0,0 +1,35 @@
+SC.TextFieldSupport = {
+  value: function(key, value) {
+    if (value !== undefined) {
+      this.$('input').val(value);
+    } else {
+      value = this.$('input').val();
+    }
+
+    return value;
+  }.property().idempotent(),
+
+  didCreateLayer: function() {
+    SC.Event.add(this.$('input'), 'focus', this, this.focusIn);
+    SC.Event.add(this.$('input'), 'blur', this, this.focusOut);
+  },
+
+  focusIn: function(event) {
+    this.becomeFirstResponder();
+    this.tryToPerform('focus', event);
+  },
+
+  focusOut: function(event) {
+    this.resignFirstResponder();
+    this.tryToPerform('blur', event);
+  },
+
+  keyUp: function(event) {
+    if (event.keyCode === 13) {
+      return this.tryToPerform('insertNewline', event);
+    } else if (event.keyCode === 27) {
+      return this.tryToPerform('cancel', event);
+    }
+  }
+};
+

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/template.js

@@ -0,0 +1,77 @@
+sc_require("views/view/base");
+
+// Global hash of shared templates. This will automatically be populated
+// by the build tools so that you can store your Handlebars templates in
+// separate files that get loaded into JavaScript at buildtime.
+SC.TEMPLATES = SC.Object.create();
+
+/** @class
+
+  SC.TemplateView allows you to create a view that uses the Handlebars templating
+  engine to generate its HTML representation.
+
+  @extends SC.CoreView
+  @since SproutCore 1.5
+*/
+SC.TemplateView = SC.CoreView.extend(
+/** @scope SC.TemplateView.prototype */ {
+
+  // This makes it easier to build custom views on top of TemplateView without
+  // gotchas, but may have tab navigation reprecussions. The tab navigation
+  // system should be revisited.
+  acceptsFirstResponder: YES,
+
+  templateName: null,
+
+  templates: SC.TEMPLATES,
+
+  template: function() {
+    var templateName = this.get('templateName');
+    var template = this.get('templates').get(templateName);
+
+    if (!template) {
+      //@if(debug)
+      if (templateName) {
+        SC.Logger.warn('%@ - Unable to find template "%@".'.fmt(this, templateName));
+      }
+      //@endif
+
+      return function() { return ''; };
+    }
+
+    return template;
+  }.property('templateName').cacheable(),
+
+  context: function() {
+    return this;
+  }.property().cacheable(),
+
+  /**
+    When the view is asked to render, we look for the appropriate
+    template and invoke it with this view as the context, as well
+    as a hash that contains a reference to the view.
+
+    @param {SC.RenderContext} context the render context
+  */
+  render: function(context) {
+    var template = this.get('template');
+
+    this._didRenderChildViews = YES;
+
+    context.push(template(this.get('context'), null, null, { view: this, isRenderData: true }));
+  },
+
+  // in TemplateView, updating is handled by observers created by helpers in the
+  // template. As a result, we create an empty update method so that the old
+  // (pre-1.5) behavior which would force a full re-render does not get activated.
+  update: function() { },
+
+  /**
+    Since mouseUp events will not fire unless we return YES to mouseDown, the
+    default mouseDown implementation returns YES if a mouseDown method exists.
+  */
+  mouseDown: function() {
+    if (this.mouseUp) { return YES; }
+    return NO;
+  }
+});

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/animation.js

@@ -0,0 +1,187 @@
+sc_require("views/view");
+sc_require("views/view/layout_style");
+
+/**
+  Properties that can be animated
+  (Hash for faster lookup)
+*/
+SC.ANIMATABLE_PROPERTIES = {
+  top:     YES,
+  left:    YES,
+  bottom:  YES,
+  right:   YES,
+  width:   YES,
+  height:  YES,
+  centerX: YES,
+  centerY: YES,
+  opacity: YES,
+  scale:   YES,
+  rotate:  YES,
+  rotateX: YES,
+  rotateY: YES,
+  rotateZ: YES
+};
+
+SC.View.reopen(
+  /** @scope SC.View.prototype */ {
+
+  didCreateLayerMixin: function() {
+    // Animation prep
+    if (SC.platform.supportsCSSTransitions) { this.resetAnimation(); }
+  },
+
+  /**
+    Animate a given property using CSS animations.
+
+    Takes a key, value and either a duration, or a hash of options.
+    The options hash has the following parameters
+      - duration: Duration of animation in seconds
+      - callback: Callback method to run when animation completes
+      - timing: Animation timing function
+
+    @param {String|Hash} key
+    @param {Object} value
+    @params {Number|Hash} duration or options
+    @returns {SC.View} receiver
+  */
+  animate: function(keyOrHash, valueOrOptions, optionsOrCallback, callback) {
+    var hash, options;
+
+    if (typeof keyOrHash === SC.T_STRING) {
+      hash = {};
+      hash[keyOrHash] = valueOrOptions;
+      options = optionsOrCallback;
+    } else {
+      hash = keyOrHash;
+      options = valueOrOptions;
+      callback = optionsOrCallback;
+    }
+
+    var optionsType = SC.typeOf(options);
+    if (optionsType === SC.T_NUMBER) {
+      options = { duration: options };
+    } else if (optionsType !== SC.T_HASH) {
+      throw "Must provide options hash or duration!";
+    }
+
+    if (callback) { options.callback = callback; }
+
+    var timing = options.timing;
+    if (timing) {
+      if (typeof timing !== SC.T_STRING) {
+        options.timing = "cubic-bezier("+timing[0]+", "+timing[1]+", "+
+                                         timing[2]+", "+timing[3]+")";
+      }
+    } else {
+      options.timing = 'linear';
+    }
+
+    var layout = SC.clone(this.get('layout')), didChange = NO, value, cur, animValue, curAnim, key;
+
+    if (!layout.animate) { layout.animate = {}; }
+
+    // Very similar to #adjust
+    for(key in hash) {
+      if (!hash.hasOwnProperty(key)) { continue; }
+      value = hash[key];
+      cur = layout[key];
+
+      if (cur !== value) { didChange = YES; }
+
+      if (SC.ANIMATABLE_PROPERTIES[key]) {
+        curAnim = layout.animate[key];
+
+        // loose comparison used instead of (value === null || value === undefined)
+        if (value == null) { throw "Can only animate to an actual value!"; }
+
+        // FIXME: We should check more than duration
+        if (curAnim && curAnim.duration !== options.duration) { didChange = YES; }
+
+        layout.animate[key] = options;
+      }
+
+      layout[key] = value;
+
+    }
+
+    // now set adjusted layout
+    if (didChange) { this.set('layout', layout) ; }
+
+    return this ;
+  },
+
+  /**
+  Resets animation, stopping all existing animations.
+  */
+  resetAnimation: function() {
+    var layout = this.get('layout'),
+        animations = layout.animate,
+        didChange = NO, key;
+
+    if (!animations) { return; }
+
+    var hasAnimations;
+
+    for (key in animations) {
+      didChange = YES;
+      delete animations[key];
+    }
+
+    if (didChange) {
+      this.set('layout', layout);
+      this.notifyPropertyChange('layout');
+    }
+
+    return this;
+  },
+
+  /**
+    Called when animation ends, should not usually be called manually
+  */
+  transitionDidEnd: function(evt){
+    // WARNING: Sometimes this will get called more than once for a property. Not sure why.
+    this.get('layoutStyleCalculator').transitionDidEnd(evt);
+  },
+
+  /**
+    Setting wantsAcceleratedLayer to YES will use transforms to move the
+    layer when available. On some platforms transforms are hardware accelerated.
+  */
+  wantsAcceleratedLayer: NO,
+
+  /**
+    Specifies whether transforms can be used to move the layer.
+  */
+  hasAcceleratedLayer: function(){
+    if (this.get('wantsAcceleratedLayer') && SC.platform.supportsAcceleratedLayers) {
+      var layout = this.get('layout'),
+          animations = layout.animate,
+          AUTO = SC.LAYOUT_AUTO,
+          key;
+
+      if (animations && (animations.top || animations.left)) {
+        for (key in animations) {
+          // If we're animating other transforms at different speeds, don't use acceleratedLayer
+          if (
+            SC.CSS_TRANSFORM_MAP[key] &&
+            ((animations.top && animations.top.duration !== animations[key].duration) ||
+             (animations.left && animations.left.duration !== animations[key].duration))
+          ) {
+            return NO;
+          }
+        }
+      }
+
+      // loose comparison used instead of (layout.X === null || layout.X === undefined)
+      if (
+        layout.left != null && !SC.isPercentage(layout.left) && layout.left !== AUTO &&
+        layout.top != null && !SC.isPercentage(layout.top) && layout.top !== AUTO &&
+        layout.width != null && !SC.isPercentage(layout.width) && layout.width !== AUTO &&
+        layout.height != null && !SC.isPercentage(layout.height) && layout.height !== AUTO
+      ) {
+       return YES;
+      }
+    }
+    return NO;
+  }.property('wantsAcceleratedLayer').cacheable()
+});

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/base.js

@@ -0,0 +1 @@
+SC.CoreView = SC.Responder.extend(SC.DelegateSupport);

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/cursor.js

@@ -0,0 +1,41 @@
+sc_require("views/view");
+
+SC.View.reopen(
+  /** @scope SC.View.prototype */ {
+
+  /**
+    You can set this to an SC.Cursor instance; whenever that SC.Cursor's
+    'cursorStyle' changes, the cursor for this view will automatically
+    be updated to match. This allows you to coordinate the cursors of
+    many views by making them all share the same cursor instance.
+
+    For example, SC.SplitView uses this ensure that it and all of its
+    children have the same cursor while dragging, so that whether you are
+    hovering over the divider or another child of the split view, the
+    proper cursor is visible.
+
+    @property {SC.Cursor String}
+  */
+  cursor: function(key, value) {
+    var parent;
+
+    if (value) { this._setCursor = value; }
+    if (this._setCursor !== undefined) { return this._setCursor; }
+
+    parent = this.get('parentView');
+    if (this.get('shouldInheritCursor') && parent) {
+      return parent.get('cursor');
+    }
+
+    return null;
+  }.property('parentView', 'shouldInheritCursor').cacheable(),
+
+  /**
+    A child view without a cursor of its own inherits its parent's cursor by
+    default.  Set this to NO to prevent this behavior.
+
+    @property {Boolean}
+  */
+  shouldInheritCursor: YES
+
+});

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/enabled.js

@@ -0,0 +1,57 @@
+sc_require("views/view");
+
+SC.View.reopen({
+  // ..........................................................
+  // IS ENABLED SUPPORT
+  //
+
+  /**
+    Set to true when the item is enabled.   Note that changing this value
+    will alter the isVisibleInWindow property for this view and any
+    child views as well as to automatically add or remove a 'disabled' CSS
+    class name.
+
+    This property is observable and bindable.
+
+    @property {Boolean}
+  */
+  isEnabled: YES,
+  isEnabledBindingDefault: SC.Binding.oneWay().bool(),
+
+  /**
+    Computed property returns YES if the view and all of its parent views
+    are enabled in the pane.  You should use this property when deciding
+    whether to respond to an incoming event or not.
+
+    This property is not observable.
+
+    @property {Boolean}
+  */
+  isEnabledInPane: function() {
+    var ret = this.get('isEnabled'), pv ;
+    if (ret && (pv = this.get('parentView'))) { ret = pv.get('isEnabledInPane'); }
+    return ret ;
+  }.property('parentView', 'isEnabled'),
+
+  /** @private
+    Observes the isEnabled property and resigns first responder if set to NO.
+    This will avoid cases where, for example, a disabled text field retains
+    its focus rings.
+
+    @observes isEnabled
+  */
+  _sc_view_isEnabledDidChange: function(){
+    if(!this.get('isEnabled') && this.get('isFirstResponder')){
+      this.resignFirstResponder();
+    }
+  }.observes('isEnabled'),
+
+  applyAttributesToContext: function(original, context) {
+    original(context);
+
+    if (!this.get('isEnabled')) {
+      context.addClass('disabled');
+      context.attr('aria-disabled', 'true');
+    }
+  }.enhance()
+});