feat(virtual-repeat): implement native scrolling

With this commit the virtual-repeat now leverages the browser's native scroll and scroll bar. This should make a more maintainable code base and out of the box give the users expected look and feel across browsers, platforms and devices. Closes #14 #23 #25
aurelia · Jan 31, 2016 · dc486a9 · dc486a9
1 parent e9a27a6
commit dc486a9
Show file tree

Hide file tree

Showing 13 changed files with 620 additions and 735 deletions.
diff --git a/build/babel-options.js b/build/babel-options.js
@@ -14,6 +14,7 @@ module.exports = {
   stage:2,
   loose: "all",
   optional: [
-    "es7.decorators"
+    "es7.decorators",
+    "es7.classProperties"
   ]
 };
diff --git a/sample/config.js b/sample/config.js
diff --git a/sample/index.html b/sample/index.html
@@ -28,9 +28,9 @@
         cfg.packages[m.name] = {
             "main": "index",
               "dependencies": {
-                "aurelia-binding": "github:aurelia/binding@^0.9.1",
-                "aurelia-dependency-injection": "github:aurelia/dependency-injection@^0.10.1",
-                "aurelia-templating": "github:aurelia/templating@^0.15.3"
+                "aurelia-binding": "github:aurelia/binding@^1.0.0-beta",
+                "aurelia-dependency-injection": "github:aurelia/dependency-injection@^1.0.0-beta",
+                "aurelia-templating": "github:aurelia/templating@^1.0.0-beta"
               }
             };
 

diff --git a/sample/package.json b/sample/package.json
@@ -1,16 +1,16 @@
 {
   "jspm": {
     "dependencies": {
-      "aurelia-animator-css": "github:aurelia/animator-css@^0.17.0",
-      "aurelia-binding": "github:aurelia/binding@^0.9.1",
-      "aurelia-bootstrapper": "github:aurelia/bootstrapper@^0.18.0",
-      "aurelia-dependency-injection": "github:aurelia/dependency-injection@^0.11.2",
-      "aurelia-framework": "github:aurelia/framework@^0.16.0",
-      "aurelia-http-client": "github:aurelia/http-client@^0.11.0",
-      "aurelia-logging-console": "github:aurelia/logging-console@^0.8.0",
-      "aurelia-metadata": "github:aurelia/metadata@^0.8.0",
-      "aurelia-path": "github:aurelia/path@^0.10.0",
-      "aurelia-templating": "github:aurelia/templating@^0.16.0",
+      "aurelia-animator-css": "npm:aurelia-animator-css@^1.0.0-beta.1.0.1",
+      "aurelia-binding": "npm:aurelia-binding@^1.0.0-beta.1.0.2",
+      "aurelia-bootstrapper": "npm:aurelia-bootstrapper@^1.0.0-beta.1",
+      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@^1.0.0-beta.1",
+      "aurelia-framework": "npm:aurelia-framework@^1.0.0-beta.1.0.3",
+      "aurelia-http-client": "npm:aurelia-http-client@^1.0.0-beta.1",
+      "aurelia-logging-console": "npm:aurelia-logging-console@^1.0.0-beta.1",
+      "aurelia-metadata": "npm:aurelia-metadata@^1.0.0-beta.1",
+      "aurelia-path": "npm:aurelia-path@^1.0.0-beta.1",
+      "aurelia-templating": "npm:aurelia-templating@^1.0.0-beta.1.0.1",
       "bootstrap": "github:twbs/bootstrap@^3.3.5",
       "css": "github:systemjs/plugin-css@^0.1.19",
       "font-awesome": "npm:font-awesome@^4.4.0",
@@ -21,7 +21,9 @@
     "devDependencies": {
       "babel": "npm:babel-core@^5.8.22",
       "babel-runtime": "npm:babel-runtime@^5.8.20",
-      "core-js": "npm:core-js@^1.1.0"
+      "core-js": "npm:core-js@^1.1.0",
+      "traceur": "github:jmcriffey/[email protected]",
+      "traceur-runtime": "github:jmcriffey/[email protected]"
     }
   },
   "devDependencies": {

diff --git a/sample/src/phone-list.html b/sample/src/phone-list.html
@@ -1,24 +1,74 @@
 <template>
-    <div class="contact-list">
-        <div>
-            <div virtual-repeat.for="item of objectArray" class="contact-list-item">
-                <div class="contact-item">
-                    <div class="avatar" style="background-color: ${item.color}">${item.firstLetter}</div>
-                    <div class="name">
-                        ${$index} ${item.name}
-                    </div>
-                    <div class="content">
-                        <strong>Phone:</strong> ${item.phone} <br />
-                        <strong>Country:</strong> ${item.country} <br />
-                    </div>
-                </div>
+    <div class="contact-list" if.bind="viewStrategy === 'div'">
+        <div if.bind="isVisible">
+            <div virtual-repeat.for="item of objectArray" class="contact-list-item ${item.name}">
+              <div class="contact-item">
+                  <div class="avatar" click.delegate="click()" css="background-color: ${item.color}">${item.firstLetter}</div>
+                  <div class="name">
+                      ${item.name}
+                  </div>
+                  <div class="content">
+                      <strong>Phone:</strong> ${item.phone} <br />
+                      <strong>Country:</strong> ${item.country} <br />
+                  </div>
+              </div>
             </div>
         </div>
     </div>
+
+    <div class="contact-list" if.bind="viewStrategy === 'table'">
+      <table if.bind="isVisible">
+        <tr virtual-repeat.for="item of objectArray" class="contact-list-item ${item.name}">
+          <td width="85">
+            <div class="avatar" click.delegate="click()" css="background-color: ${item.color}">${item.firstLetter}</div>
+          </td>
+          <td>
+            <div class="contact-item">
+
+              <div class="name">
+                  ${item.name}
+              </div>
+              <div class="content">
+                  <strong>Phone:</strong> ${item.phone} <br />
+                  <strong>Country:</strong> ${item.country} <br />
+              </div>
+          </div>
+        </td>
+      </tr>
+    </table>
+  </div>
+
+  <div class="contact-list" if.bind="viewStrategy === 'ul'">
+      <ul if.bind="isVisible">
+          <li virtual-repeat.for="item of objectArray" class="contact-list-item ${item.name}">
+            <div class="contact-item">
+                <div class="avatar" click.delegate="click()" css="background-color: ${item.color}">${item.firstLetter}</div>
+                <div class="name">
+                    ${item.name}
+                </div>
+                <div class="content">
+                    <strong>Phone:</strong> ${item.phone} <br />
+                    <strong>Country:</strong> ${item.country} <br />
+                </div>
+            </div>
+          </li>
+      </ul>
+  </div>
+
     <div class="array-actions">
-        <button class="btn btn-primary" click.delegate="addItem()">Add 1</button>
         <button class="btn btn-primary" click.delegate="addItems(1000)">Add 1000</button>
+        <button class="btn btn-primary" click.delegate="addItems(10000)">Add 10 000</button>
         <button class="btn btn-primary" click.delegate="addItemFirst()">Add 1 at top</button>
+        <button class="btn btn-primary" click.delegate="addItemLast()">Add 1 at bottom</button>
         <button class="btn btn-primary" click.delegate="removeItems(1)">Remove 1 at top</button>
+        <button class="btn btn-primary" click.delegate="removeLast()">Remove 1 at bottom</button>
+        <button class="btn btn-primary" click.delegate="toggle()">Toggle visibility</button>
+        <button class="btn btn-primary" click.delegate="swap()">Swap</button>
+
+        <br /><br />
+
+        <button class="btn ${viewStrategy === 'div' ? 'btn-danger' : ''}" click.trigger="setViewStrategy('div')">Div</button>
+        <button class="btn ${viewStrategy === 'table' ? 'btn-danger' : ''}" click.trigger="setViewStrategy('table')">Table</button>
+        <button class="btn ${viewStrategy === 'ul' ? 'btn-danger' : ''}" click.trigger="setViewStrategy('ul')">UL</button>
     </div>
 </template>
diff --git a/sample/src/phone-list.js b/sample/src/phone-list.js
@@ -2,19 +2,34 @@ export class PhoneList {
 
   constructor() {
     this.objectArray = [];
-    this.numberOfItems = 20;
+    this.objectArray2 = [];
+    this.numberOfItems = 100;
     this.isSelected = false;
+    this.isVisible = true;
+    this.viewStrategy = 'div';
+  }
+
+  setViewStrategy(strategy){
+    this.viewStrategy = strategy;
+  }
+
+  toggle() {
+    this.isVisible = !this.isVisible;
+  }
+
+  click(){
+    console.log('click');
   }
 
   setIsSelected(){
     this.isSelected = true;
   }
 
-  createItem(){
+  createItem(index){
     var name = faker.name.findName();
     return {
       firstLetter: name.charAt(0),
-      name: name,
+      name: index + ' ' + name,
       color: faker.internet.color(),
       //image: faker.image.avatar(),
       //email: faker.internet.email(),
@@ -27,13 +42,23 @@ export class PhoneList {
     var name;
     for (var i = 0; i < this.numberOfItems; ++i) {
       name = faker.name.findName();
-      this.objectArray.push(this.createItem());
+      this.objectArray.push(this.createItem(i));
+    }
+
+    for (var i = 0; i < this.numberOfItems; ++i) {
+      name = faker.name.findName();
+      this.objectArray2.push(this.createItem());
     }
   }
 
+  swap(){
+    this.objectArray = this.objectArray2;
+  }
+
   addItems(count){
     for (var i = 0; i < count; ++i) {
-      this.objectArray.push(this.createItem());
+      this.objectArray.push(this.createItem(i));
+      console.log(i);
     }
 
     this.numberOfItems = this.objectArray.length;
@@ -44,10 +69,6 @@ export class PhoneList {
     this.objectArray.splice(1, 0, item);
   }
 
-  addItem(){
-    this.objectArray.push(this.createItem());
-  }
-
   addItemFirst(){
     this.objectArray.unshift(this.createItem());
   }
@@ -59,4 +80,12 @@ export class PhoneList {
   unshift5(){
     this.objectArray.unshift(this.createItem(),this.createItem(),this.createItem(),this.createItem(),this.createItem());
   }
+
+  addItemLast(){
+    this.objectArray.push(this.createItem());
+  }
+
+  removeLast() {
+    this.objectArray.pop();
+  }
 }
diff --git a/sample/styles.css b/sample/styles.css
@@ -52,7 +52,6 @@ section {
   height: 40px;
   width: 100%;
   line-height: 40px;
-
 }
 
 .row.contacts {
@@ -68,7 +67,16 @@ section {
   padding-left: 20px;
   padding-right: 20px;
   margin: 0 auto;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  z-index: 0
+}
+
+.contact-list table {
+  width: 100%;
 }
+
 .contact-list-item {
   padding-top: 10px;