Merge branch 'inline-virtualization'

aurelia · Mar 25, 2016 · d8d0a24 · d8d0a24
2 parents c879a08 + 7a5e109
commit d8d0a24
Show file tree

Hide file tree

Showing 23 changed files with 797 additions and 835 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": "./node_modules/aurelia-tools/.eslintrc"
+}
diff --git a/.jshintrc b/.jshintrc
diff --git a/README.md b/README.md
@@ -30,33 +30,56 @@ export function configure(aurelia) {
 
 ## Use the plugin
 
-To get started use the provided CustomElement `VirtualList` and bind an array to its `items` attribute. Inside of the `VirtualList` you use `template-parts` in order to provide the virtual repeater with your template
+Simply bind an array to `virtual-repeat` like you would with the standard `repeat`. The repeated rows need to have equal height throughout the list, and one items per row.
 
+#### div
 ```html
 <template>
-  <virtual-list items.bind="myList">
-    <template replace-part="item-template">      
-          ${$index} ${item}        
-    </template>
-  </virtual-list>  
+  <div virtual-repeat="item of items">
+    ${$index} ${item}
+  </div>
+</template>
+```
+
+#### unordered list
+```html
+<template>
+  <ul>
+    <li virtual-repeat="item of items">
+    ${$index} ${item}
+    </li>
+  </ul>
+</template>
+```
+
+#### table
+```html
+<template>
+  <table>
+    <tr virtual-repeat="item of items">
+      <td>${$index}</td>
+      <td>${item}</td>
+    </tr>
+  </table>
 </template>
 ```
 
 ```javascript
 export class MyVirtualList {
-    myList = ['Foo', 'Bar', 'Baz'];
+    items = ['Foo', 'Bar', 'Baz'];
 }
 ```
 
-The container, in this case the `VirtualList` element, needs to have a defined height and block position. Also the repeated rows need to have equal height throughout the list
+With a surrounding fixed height container with overflow scroll. Note that `overflow: scroll` styling needs to be inline on the elemenet.
 
-```css
-virtual-list {
-  height: 500px;
-  display: block;
-  overflow: scroll;
-  -webkit-overflow-scrolling: touch; /* for momentum scroll on iOS */
-}
+```html
+<template>
+  <div style="overflow: scroll; height: 90vh">
+    <div virtual-repeat="item of items">
+      ${$index} ${item}
+    </div>
+  </div>
+</template>
 ```
 
 ## [Demo](http://martingust.github.io/ui-virtualization/)

diff --git a/build/tasks/lint.js b/build/tasks/lint.js
@@ -1,10 +1,10 @@
 var gulp = require('gulp');
 var paths = require('../paths');
-var jshint = require('gulp-jshint');
-var stylish = require('jshint-stylish');
+var eslint = require('gulp-eslint');
 
 gulp.task('lint', function() {
   return gulp.src(paths.source)
-    .pipe(jshint())
-    .pipe(jshint.reporter(stylish));
+    .pipe(eslint())
+    .pipe(eslint.format())
+    .pipe(eslint.failOnError());
 });
diff --git a/config.js b/config.js
@@ -12,19 +12,20 @@ System.config({
     "github:*": "jspm_packages/github/*",
     "npm:*": "jspm_packages/npm/*"
   },
+
   map: {
-    "aurelia-binding": "npm:[email protected].1.3",
-    "aurelia-dependency-injection": "npm:[email protected].1.3",
-    "aurelia-framework": "npm:[email protected].1.3",
-    "aurelia-logging": "npm:[email protected].1.1",
-    "aurelia-logging-console": "npm:[email protected].1.4",
-    "aurelia-path": "npm:[email protected].1.0",
-    "aurelia-task-queue": "npm:[email protected].1.1",
-    "aurelia-templating": "npm:[email protected].1.1",
-    "aurelia-templating-resources": "npm:[email protected].1.1",
-    "babel": "npm:[email protected].35",
-    "babel-runtime": "npm:[email protected].35",
-    "core-js": "npm:core-js@2.0.3",
+    "aurelia-binding": "npm:[email protected].3.0",
+    "aurelia-dependency-injection": "npm:[email protected].2.0",
+    "aurelia-framework": "npm:[email protected].2.0",
+    "aurelia-logging": "npm:[email protected].2.0",
+    "aurelia-logging-console": "npm:[email protected].2.0",
+    "aurelia-path": "npm:[email protected].2.0",
+    "aurelia-task-queue": "npm:[email protected].2.0",
+    "aurelia-templating": "npm:[email protected].2.0",
+    "aurelia-templating-resources": "npm:[email protected].2.0",
+    "babel": "npm:[email protected].38",
+    "babel-runtime": "npm:[email protected].38",
+    "core-js": "npm:core-js@1.2.6",
     "traceur": "github:jmcriffey/[email protected]",
     "traceur-runtime": "github:jmcriffey/[email protected]",
     "github:jspm/[email protected]": {
@@ -42,71 +43,66 @@ System.config({
     "npm:[email protected]": {
       "util": "npm:[email protected]"
     },
-    "npm:[email protected]": {
-      "aurelia-metadata": "npm:[email protected]",
-      "aurelia-pal": "npm:[email protected]",
-      "aurelia-task-queue": "npm:[email protected]",
-      "core-js": "npm:[email protected]"
-    },
-    "npm:[email protected]": {
-      "aurelia-logging": "npm:[email protected]",
-      "aurelia-metadata": "npm:[email protected]",
-      "aurelia-pal": "npm:[email protected]",
-      "core-js": "npm:[email protected]"
-    },
-    "npm:[email protected]": {
-      "aurelia-binding": "npm:[email protected]",
-      "aurelia-dependency-injection": "npm:[email protected]",
-      "aurelia-loader": "npm:[email protected]",
-      "aurelia-logging": "npm:[email protected]",
-      "aurelia-metadata": "npm:[email protected]",
-      "aurelia-pal": "npm:[email protected]",
-      "aurelia-path": "npm:[email protected]",
-      "aurelia-task-queue": "npm:[email protected]",
-      "aurelia-templating": "npm:[email protected]",
-      "core-js": "npm:[email protected]"
-    },
-    "npm:[email protected]": {
-      "aurelia-metadata": "npm:[email protected]",
-      "aurelia-path": "npm:[email protected]"
-    },
-    "npm:[email protected]": {
-      "aurelia-logging": "npm:[email protected]",
-      "aurelia-pal": "npm:[email protected]"
-    },
-    "npm:[email protected]": {
-      "aurelia-pal": "npm:[email protected]",
-      "core-js": "npm:[email protected]"
-    },
-    "npm:[email protected]": {
-      "aurelia-pal": "npm:[email protected]"
-    },
-    "npm:[email protected]": {
-      "aurelia-binding": "npm:[email protected]",
-      "aurelia-dependency-injection": "npm:[email protected]",
-      "aurelia-loader": "npm:[email protected]",
-      "aurelia-logging": "npm:[email protected]",
-      "aurelia-pal": "npm:[email protected]",
-      "aurelia-path": "npm:[email protected]",
-      "aurelia-task-queue": "npm:[email protected]",
-      "aurelia-templating": "npm:[email protected]",
-      "core-js": "npm:[email protected]"
-    },
-    "npm:[email protected]": {
-      "aurelia-binding": "npm:[email protected]",
-      "aurelia-dependency-injection": "npm:[email protected]",
-      "aurelia-loader": "npm:[email protected]",
-      "aurelia-logging": "npm:[email protected]",
-      "aurelia-metadata": "npm:[email protected]",
-      "aurelia-pal": "npm:[email protected]",
-      "aurelia-path": "npm:[email protected]",
-      "aurelia-task-queue": "npm:[email protected]",
-      "core-js": "npm:[email protected]"
-    },
-    "npm:[email protected]": {
+    "npm:[email protected]": {
+      "aurelia-metadata": "npm:[email protected]",
+      "aurelia-pal": "npm:[email protected]",
+      "aurelia-task-queue": "npm:[email protected]"
+    },
+    "npm:[email protected]": {
+      "aurelia-logging": "npm:[email protected]",
+      "aurelia-metadata": "npm:[email protected]",
+      "aurelia-pal": "npm:[email protected]"
+    },
+    "npm:[email protected]": {
+      "aurelia-binding": "npm:[email protected]",
+      "aurelia-dependency-injection": "npm:[email protected]",
+      "aurelia-loader": "npm:[email protected]",
+      "aurelia-logging": "npm:[email protected]",
+      "aurelia-metadata": "npm:[email protected]",
+      "aurelia-pal": "npm:[email protected]",
+      "aurelia-path": "npm:[email protected]",
+      "aurelia-task-queue": "npm:[email protected]",
+      "aurelia-templating": "npm:[email protected]"
+    },
+    "npm:[email protected]": {
+      "aurelia-metadata": "npm:[email protected]",
+      "aurelia-path": "npm:[email protected]"
+    },
+    "npm:[email protected]": {
+      "aurelia-logging": "npm:[email protected]",
+      "aurelia-pal": "npm:[email protected]"
+    },
+    "npm:[email protected]": {
+      "aurelia-pal": "npm:[email protected]"
+    },
+    "npm:[email protected]": {
+      "aurelia-pal": "npm:[email protected]"
+    },
+    "npm:[email protected]": {
+      "aurelia-binding": "npm:[email protected]",
+      "aurelia-dependency-injection": "npm:[email protected]",
+      "aurelia-loader": "npm:[email protected]",
+      "aurelia-logging": "npm:[email protected]",
+      "aurelia-metadata": "npm:[email protected]",
+      "aurelia-pal": "npm:[email protected]",
+      "aurelia-path": "npm:[email protected]",
+      "aurelia-task-queue": "npm:[email protected]",
+      "aurelia-templating": "npm:[email protected]"
+    },
+    "npm:[email protected]": {
+      "aurelia-binding": "npm:[email protected]",
+      "aurelia-dependency-injection": "npm:[email protected]",
+      "aurelia-loader": "npm:[email protected]",
+      "aurelia-logging": "npm:[email protected]",
+      "aurelia-metadata": "npm:[email protected]",
+      "aurelia-pal": "npm:[email protected]",
+      "aurelia-path": "npm:[email protected]",
+      "aurelia-task-queue": "npm:[email protected]"
+    },
+    "npm:[email protected]": {
       "process": "github:jspm/[email protected]"
     },
-    "npm:core-js@2.0.3": {
+    "npm:core-js@1.2.6": {
       "fs": "github:jspm/[email protected]",
       "path": "github:jspm/[email protected]",
       "process": "github:jspm/[email protected]",