From cb232001201d4ee8f75125eac417e0acecbc8dd5 Mon Sep 17 00:00:00 2001
From: Martin Gustafsson <gusten86@gmail.com>
Date: Fri, 8 Jul 2016 14:58:29 +0200
Subject: [PATCH] chore(sample): support toggling between div and table markup

---
 sample/src/phone-list.html | 25 ++++++++++++++++++++++++-
 sample/src/phone-list.js   |  8 +++++---
 sample/styles.css          | 13 +++++++++++++
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/sample/src/phone-list.html b/sample/src/phone-list.html
index ca20a49..ac641a0 100644
--- a/sample/src/phone-list.html
+++ b/sample/src/phone-list.html
@@ -9,9 +9,13 @@
    <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>
+   <select value.bind="selectedMarkup" class="form-control">
+     <option value="div">div</option>
+     <option value="table">table</option>
+   </select>
  </div>
 
- <div if.bind="isVisible">
+ <div if.bind="isVisible && selectedMarkup === 'div'">
    <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>
@@ -25,4 +29,23 @@
        </div>
      </div>
   </div>
+
+  <div if.bind="isVisible && selectedMarkup === 'table'">
+    <table class="table">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Name</th>
+          <th>Phone</th>
+          <th>Country</th>
+        </tr>
+      </thead>
+      <tr virtual-repeat.for="item of objectArray" class="contact-list-item ${item.name}">
+        <td class="avatar" click.delegate="click()" css="background-color: ${item.color}">${item.firstLetter}</td>
+        <td class="name">${$index} ${item.name}</td>
+        <td><strong>Phone:</strong> ${item.phone} </td>
+        <td>Country:</strong> ${item.country} </td>
+      </tr>
+    </table>
+  </div>
 </template>
diff --git a/sample/src/phone-list.js b/sample/src/phone-list.js
index cb9fdaf..b2bcd69 100644
--- a/sample/src/phone-list.js
+++ b/sample/src/phone-list.js
@@ -1,4 +1,5 @@
 export class PhoneList {
+  selectedMarkup = 'div';
 
   constructor() {
     this.objectArray = [];
@@ -6,7 +7,6 @@ export class PhoneList {
     this.numberOfItems = 100;
     this.isSelected = false;
     this.isVisible = true;
-    this.viewStrategy = 'div';
   }
 
   setViewStrategy(strategy){
@@ -67,8 +67,10 @@ export class PhoneList {
     this.objectArray.splice(1, 0, item);
   }
 
-  addItemFirst(){
-    this.objectArray.unshift(this.createItem());
+  addItemFirst(count = 10){
+    for(let i = 0; i < count; ++i) {
+      this.objectArray.unshift(this.createItem());
+    }
   }
 
   removeItems(count){
diff --git a/sample/styles.css b/sample/styles.css
index a77d78b..4619a20 100644
--- a/sample/styles.css
+++ b/sample/styles.css
@@ -122,3 +122,16 @@ section {
   text-align: center;
   line-height: 65px;
 }
+
+.array-actions select {
+  width: 100px;
+}
+
+table.table {
+  margin-top: 200px;
+  border-top: 0px solid red;
+}
+
+table.table td, table.table th {
+  color: #fff;
+}