Tests 2.0

addon/components/ember-list.js

@@ -1,19 +1,8 @@
 import Ember from 'ember';
 import layout from './ember-list/template';
-
 var decodeEachKey = Ember.__loader.require('ember-htmlbars/utils/decode-each-key')['default'];
+var getMutValue = Ember.__loader.require('ember-htmlbars/hooks/get-value')['default'];
 
-/* Not sure what this is for?
-class LayoutAttributes {
-  constructor(index, x, y, width, height) {
-    this.index = index;
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
-  }
-}
-*/
 
 class Cell {
   constructor(key, item, index, style) {
@@ -26,11 +15,28 @@ class Cell {
 }
 
 function formatStyle(pos, width, height) {
-  return 'position: absolute; top: 0; left: 0; -webkit-transform: translate('+pos.x+'px, '+pos.y+'px); width: '+width+'px; height: '+height+'px;';
+  return 'position: absolute; top: 0; left: 0;' +
+    ' -webkit-transform: translate('+pos.x+'px, '+pos.y+'px);' + 
+    ' -moz-transform: translate('+pos.x+'px, '+pos.y+'px);' + 
+    ' -ms-transform: translate('+pos.x+'px, '+pos.y+'px);' + 
+    ' -o-transform: translate('+pos.x+'px, '+pos.y+'px);' + 
+    ' transform: translate('+pos.x+'px, '+pos.y+'px);' + 
+    ' width: '+width+'px; height: '+height+'px;';
 }
 
 export default Ember.Component.extend({
   layout: layout,
+
+  // Utility to get attribute value which may or may not be wrapped in mut helper.
+  // returns defaultValue if attribute not defined or defined as null or undefined
+  _maybeMutAttr(key, defaultValue) {
+    if (this.attrs == null) { return defaultValue; }
+    var obj = this.attrs[key];
+    if (obj == null) { return defaultValue; }
+    obj = getMutValue(obj);
+    obj = (obj == null) ? defaultValue : obj;
+    return obj;
+  },
   init() {
     this._super();
     // this.firstCell = undefined;
@@ -45,34 +51,48 @@ export default Ember.Component.extend({
     this.cellMap = Object.create(null);
   },
   didInitAttrs() {
-    this.buffer = this.attrs['buffer'] | 5;
-    this.offsetX = this.attrs['offset-x'] | 0;
-    this.offsetY = this.attrs['offset-y'] | 0;
-    this.width = this.getAttr('width') | 0;
-    this.height = this.getAttr('height') | 0;
+    this.buffer = this._maybeMutAttr('buffer', 5);
+    this.offsetX = this._maybeMutAttr('offset-x', 0);
+    this.offsetY = this._maybeMutAttr('offset-y', 0);
+    this.width = this._maybeMutAttr('width', 0);
+    this.height = this._maybeMutAttr('height', 0);
   },
 
   didReceiveAttrs() {
     // Reset cells when cell layout or items array changes
-    var cellLayout = this.attrs['cell-layout'];
-    var items = this.attrs['items'];
-    var contentWidth = this.getAttr('width');
-    var contentHeight = this.getAttr('height');
+    var cellLayout = this._maybeMutAttr('cell-layout');
+    var items = this._maybeMutAttr('items');
+    var contentWidth = this._maybeMutAttr('width');
+    var contentHeight = this._maybeMutAttr('height');
+    var calculateSize = false;
 
     if (this.cellLayout !== cellLayout || this.items !== items) {
+      if (this.items != null && this.items !== items ) {
+        this.items.removeArrayObserver(this);
+      }
       this.items = items;
+      if (this.items != null) {
+        this.items.addArrayObserver(this);
+      }
       this.cellLayout = cellLayout;
+      calculateSize = true;
     }
-
     if (contentWidth !== this.width || contentHeight !== this.height) {
       this.width = contentWidth;
       this.height = contentHeight;
       this.calculateBounds();
-      this.calculateContentSize();
+      calculateSize = true;
+    }
+    if (calculateSize) {
+       Ember.run.scheduleOnce('afterRender', this, 'calculateContentSize');
     }
   },
-
+  arrayWillChange() { },
+  arrayDidChange() {
+    this.rerender();
+  },
   didInsertElement() {
+    this._super();
     this.contentElement = this.element.firstElementChild;
     this.calculateBounds();
     this.calculateContentSize();
@@ -104,6 +124,12 @@ export default Ember.Component.extend({
     }
     callback();
   },
+  willDestroyElement() {
+    this._super();
+    if (this.items != null) {
+      this.items.removeArrayObserver(this);
+    }
+  },
   setupScroller() {
     //this.element.addEventListener('scroll', Ember.run.bind(this, 'updateOffset'));
     // TODO save for teardown
@@ -117,14 +143,18 @@ export default Ember.Component.extend({
   //   }
   // },
   willRender() {
-    this.cellLayout.length = this.getAttr('items').length;
+    if (!this.items) { return; }
+    if (this.cellLayout.length !== this.items.length) {
+      this.cellLayout.length = this.items.length;
+      this.calculateContentSize();
+    }
 
     var priorMap = this.cellMap;
     var cellMap = Object.create(null);
 
     var index = this.cellLayout.indexAt(this.offsetX, this.offsetY, this.width, this.height);
     var count = this.cellLayout.count(this.offsetX, this.offsetY, this.width, this.height);
-    var items = this.getAttr('items');
+    var items = this.items;
     index = Math.max(index - this.buffer, 0);
     count = Math.min(count + this.buffer, Ember.get(items, 'length') - index);
     var i, pos, width, height, style, itemIndex, itemKey, cell;
@@ -134,7 +164,9 @@ export default Ember.Component.extend({
     for (i=0; i<count; i++) {
       itemIndex = index+i;
       itemKey = decodeEachKey(items[itemIndex], '@identity');
-      cell = priorMap[itemKey];
+      if (priorMap) {
+        cell = priorMap[itemKey];
+      }
       if (cell) {
         pos = this.cellLayout.positionAt(itemIndex, this.width, this.height);
         width = this.cellLayout.widthAt(itemIndex, this.width, this.height);
@@ -186,10 +218,17 @@ export default Ember.Component.extend({
     this.cellMap = cellMap;
   },
   calculateBounds() {
+    // make sure rendered before accessing style.
+    if (this.element == null) { return; }
+
     // TODO measure clientWidth and clientHeight vs offsetWidth and offsetHeight
     this.element.style.overflow = 'scroll';
     this.element.style.webkitOverflowScrolling = 'touch';
     this.element.style.webkitTransform = 'translate3d(0px, 0px, 0px) scale(1)';
+    this.element.style.mozTransform = 'translate3d(0px, 0px, 0px) scale(1)';
+    this.element.style.msTransform = 'translate3d(0px, 0px, 0px) scale(1)';
+    this.element.style.oTransform = 'translate3d(0px, 0px, 0px) scale(1)';
+    this.element.style.transform = 'translate3d(0px, 0px, 0px) scale(1)';
     this.element.style.position = 'relative';
     this.element.style.boxSizing = 'border-box';
     if (this.width > 0) {
@@ -200,8 +239,10 @@ export default Ember.Component.extend({
     }
   },
   calculateContentSize() {
-    var contentWidth = this.cellLayout.contentWidth(this.width, this.height);
-    var contentHeight = this.cellLayout.contentHeight(this.width, this.height);
+    var cellLayout = this.get('cellLayout');
+    if (cellLayout == null || this.width == null || this.height == null) { return; }
+    var contentWidth = cellLayout.contentWidth(this.width);
+    var contentHeight = cellLayout.contentHeight(this.width);
     this.contentElement.style.width = contentWidth + 'px';
     this.contentElement.style.height = contentHeight + 'px';
   },

addon/components/ember-list/template.hbs

@@ -1,5 +1,5 @@
-<div>
+<div class="ember-list-container" >
   {{~#each cells as |cell|~}}
-    <div style={{{cell.style}}}>{{#unless cell.hidden}}{{yield cell.item cell.index }}{{/unless}}</div>
+    <div class="ember-list-item-view" style={{{cell.style}}}>{{#unless cell.hidden}}{{yield cell.item cell.index }}{{/unless}}</div>
   {{~/each~}}
-</div>
+</div>

addon/layouts/grid.js

@@ -6,11 +6,13 @@ export default class Grid
     this.bin = new Bin.FixedGrid(this, cellWidth, cellHeight);
   }
 
-  contentWidth(width /*,height*/) {
+  contentWidth(width) {
     return width;
   }
 
-  contentHeight(width /*,height*/) {
+  contentHeight(width) {
+    // width sic! the content height depends on visible width and
+    // number of items.
     return this.bin.height(width);
   }
 

bower.json

@@ -1,15 +1,18 @@
 {
   "name": "ember-list-view",
   "dependencies": {
-    "ember": "components/ember#beta",
+    "ember": "components/ember#canary",
     "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
     "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
     "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5",
     "ember-qunit": "0.4.9",
     "ember-qunit-notifications": "0.0.7",
     "ember-resolver": "~0.1.18",
-    "jquery": "^1.11.3",
+    "jquery": "^2.1.4",
     "loader.js": "ember-cli/loader.js#3.2.1",
     "qunit": "~1.18.0"
+  },
+  "resolutions": {
+    "ember": "canary"
   }
 }

ember-cli-build.js

@@ -12,6 +12,7 @@ module.exports = function(defaults) {
     This build file does *not* influence how the addon or the app using it
     behave. You most likely want to be modifying `./index.js` or app's build file
   */
+  app.import('bower_components/ember/ember-template-compiler.js');
 
   return app.toTree();
 };

index.js

@@ -10,5 +10,6 @@ module.exports = {
 
   included: function(app) {
     this.app.import('vendor/layout-bin-packer/index.js');
+    this.app.import('bower_components/ember/ember-template-compiler.js');
   }
 };

package.json

@@ -1,49 +1,49 @@
 {
   "name": "ember-list-view",
-  "version": "0.0.6",
-  "description": "An efficient incremental rendering list view for large lists.",
+  "version": "0.0.0",
+  "description": "The default blueprint for ember-cli addons.",
   "directories": {
     "doc": "doc",
     "test": "tests"
   },
   "scripts": {
-    "start": "ember server",
     "build": "ember build",
+    "start": "ember server",
     "test": "ember try:testall"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/emberjs/list-view"
+  "repository": "",
+  "engines": {
+    "node": ">= 0.10.0"
   },
   "author": "Erik Bryn, Yapp Inc., and contributors.",
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/emberjs/list-view/issues"
-  },
-  "homepage": "https://github.com/emberjs/list-view",
   "devDependencies": {
     "broccoli-asset-rev": "^2.1.2",
-    "ember-cli": "^1.13.8",
+    "ember-cli": "1.13.8",
     "ember-cli-app-version": "0.5.0",
+    "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-dependency-checker": "^1.0.1",
+    "ember-cli-ic-ajax": "0.2.1",
     "ember-cli-inject-live-reload": "^1.3.1",
     "ember-cli-qunit": "^1.0.0",
     "ember-cli-release": "0.2.3",
+    "ember-cli-sri": "^1.0.3",
     "ember-cli-uglify": "^1.2.0",
-    "ember-disable-prototype-extensions": "^1.0.0",
     "ember-disable-proxy-controllers": "^1.0.0",
     "ember-export-application-global": "^1.0.3",
+    "ember-disable-prototype-extensions": "^1.0.0",
     "ember-try": "0.0.6"
   },
   "keywords": [
     "ember-addon"
   ],
   "dependencies": {
     "ember-cli-babel": "^5.1.3",
-    "ember-cli-htmlbars": "0.7.6",
+    "ember-cli-htmlbars": "0.7.9",
+    "ember-cli-htmlbars-inline-precompile": "^0.2.0",
     "layout-bin-packer": "^1.0.2"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config"
   }
-}
+}

tests/.jshintrc

@@ -26,7 +26,7 @@
   "node": false,
   "browser": false,
   "boss": true,
-  "curly": false,
+  "curly": true,
   "debug": false,
   "devel": false,
   "eqeqeq": true,
@@ -47,5 +47,6 @@
   "strict": false,
   "white": false,
   "eqnull": true,
-  "esnext": true
+  "esnext": true,
+  "unused": true
 }

tests/unit/list-view-test.js → tests/acceptance/list-view-test.js

@@ -1,12 +1,32 @@
 import Ember from 'ember';
+import { module, test, skip } from 'qunit';
+import startApp from '../../tests/helpers/start-app';
+
+module('Acceptance | list view', {
+  beforeEach: function() {
+    this.application = startApp();
+  },
+
+  afterEach: function() {
+    Ember.run(this.application, 'destroy');
+  }
+});
+
+skip('visiting /list-view', function(assert) {
+  visit('/list-view');
+
+  andThen(function() {
+    assert.equal(currentURL(), '/list-view');
+  });
+});
+
+/* FOLLOWING IS OLD ACCEPTANCE TEST CODE THAT NEEDS TO BE REWRITTEN */
+`
+import Ember from 'ember';
 import { test } from 'ember-qunit';
 import moduleForView from '../helpers/module-for-view';
 import {compile, generateContent, sortElementsByPosition, itemPositions} from '../helpers/helpers';
 
-import ListView from 'ember-list-view';
-import ListItemView from 'ember-list-view/list-item-view';
-import ReusableListItemView from 'ember-list-view/reusable-list-item-view';
-
 moduleForView("list-view", "acceptance", {});
 
 test("should render an empty view when there is no content", function(assert) {
@@ -1208,4 +1228,4 @@ function yPosition(position){
 
 function xPosition(position){
   return position.x;
-}
+}`

tests/dummy/config/environment.js

@@ -10,6 +10,9 @@ module.exports = function(environment) {
       FEATURES: {
         // Here you can enable experimental features on an ember canary build
         // e.g. 'with-controller': true
+        'ember-htmlbars-attribute-syntax': true,
+        'ember-htmlbars-inline-if-helper': true,
+        'ember-htmlbars-component-generation': true
       }
     },