[Fixes emberjs#54] Added z-index:1 to list-view + brought back transf…

…orm3d positioning

- Moved applyTransform from ListView to ListViewMixin since VirtualListView
  also uses it.
- Brought transform3d based positioning back into applyTransform
- Added z-index:1 to ListView in order to fix scroll-bar layering on webkit
- Added position:absolute to ListItemViewMixin to remove CSS requirements
- Removed ListViewHelper (no longer needed)
- All tests seem to pass

Note: This does not fix emberjs#48 (inertial scrolling conflict with mouse events
      on webkit).

README.md

@@ -133,17 +133,6 @@ App.ListView = Ember.ListView.extend({
 });
 ```
 
-### Required CSS
-
-``` css
-.ember-list-view {
-  overflow: auto;
-  position: relative;
-}
-.ember-list-item-view {
-  position: absolute;
-}
-```
 ## Build It
 
 1. `git clone https://github.com/emberjs/list-view.git`

packages/list-view/lib/list_item_view_mixin.js

@@ -13,11 +13,11 @@ function positionElement() {
     _position = this._position;
 
     if (!position || !element) { return; }
-
+    element.style.position = 'absolute';
     // TODO: avoid needing this by avoiding unnecessary
     // calls to this method in the first place
     if (samePosition(position, _position)) { return; }
-    this._parentView.applyTransform(element, position);
+    this._parentView._applyTransform(element, position);
 
     this._position = position;
   }, this);

packages/list-view/lib/list_view.js

@@ -98,15 +98,8 @@ Ember.ListView = Ember.ContainerView.extend(Ember.ListViewMixin, {
     position: 'relative',
     overflow: 'scroll',
     '-webkit-overflow-scrolling': 'touch',
-    'overflow-scrolling': 'touch'
-  },
-
-  applyTransform: function(element, position){
-    var x = position.x,
-        y = position.y;
-
-    element.style.top =  y + 'px';
-    element.style.left = x + 'px';
+    'overflow-scrolling': 'touch',
+    'z-index': 1
   },
 
   _scrollTo: function(scrollTop) {

packages/list-view/lib/list_view_mixin.js

@@ -1,5 +1,3 @@
-require('list-view/list_view_helper');
-
 var get = Ember.get, set = Ember.set,
 min = Math.min, max = Math.max, floor = Math.floor,
 ceil = Math.ceil;
@@ -166,6 +164,31 @@ Ember.ListViewMixin = Ember.Mixin.create({
     return style;
   }),
 
+
+  /**
+    @private
+    @method _applyTransform
+  **/
+  _applyTransform: function(element, position){
+    if ('webkitTransform' in element.style){
+      return (function(element, position){
+        var x = position.x,
+            y = position.y;
+
+        element.style.webkitTransform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
+      })(element, position);
+    }else{
+      return (function(element, position){
+        var x = position.x,
+            y = position.y;
+
+        element.style.top =  y + 'px';
+        element.style.left = x + 'px';
+      })(element, position);
+    }
+
+  },
+
   /**
     @private
 

packages/list-view/lib/virtual_list_view.js

@@ -1,6 +1,5 @@
 /*global Scroller*/
 require('list-view/list_view_mixin');
-require('list-view/list_view_helper');
 
 var max = Math.max, get = Ember.get, set = Ember.set;
 
@@ -35,7 +34,6 @@ Ember.VirtualListView = Ember.ContainerView.extend(Ember.ListViewMixin, {
     this.setupScroller();
   },
   _scrollerTop: 0,
-  applyTransform: Ember.ListViewHelper.applyTransform,
 
   setupScroller: function(){
     var view, y;
@@ -46,7 +44,7 @@ Ember.VirtualListView = Ember.ContainerView.extend(Ember.ListViewMixin, {
       if (view.state !== 'inDOM') { return; }
 
       if (view.listContainerElement) {
-        view.applyTransform(view.listContainerElement, {x: 0, y: -top});
+        view._applyTransform(view.listContainerElement, {x: 0, y: -top});
         view._scrollerTop = top;
         view._scrollContentTo(top);
       }