Demo: add pagemode + many improvements

Author: Akryum

docs-src/src/App.vue

@@ -1,31 +1,34 @@
 <template>
-  <div id="app">
-    <div class="counter">
+  <div
+    id="app"
+    :class="{
+      'page-mode': pageMode
+    }"
+  >
+    <div class="toolbar">
       <span>
         <input v-model="countInput" type="number" min="0" max="500000" /> items
+        <button @click="addItem()">+1</button>
       </span>
       <label>
         <input v-model="enableLetters" type="checkbox" /> variable height
       </label>
+      <label>
+        <input v-model="pageMode" type="checkbox" /> page mode
+      </label>
       <span>
         <input v-model.number="buffer" type="number" min="1" max="500000" /> buffer
       </span>
-      <span>
+      <span v-if="!recycleList">
         <input v-model.number="poolSize" type="number" min="1" max="500000" /> poolSize
       </span>
-      <span v-if="generateTime !== null">
-        Items generation: {{ generateTime }} ms
-      </span>
-      <span>
-        Updates: {{ updateCount }}
-      </span>
       <span>
         <button @mousedown="showScroller = !showScroller">Toggle scroller</button>
-        <label><input type="checkbox" v-model="scopedSlots" :disabled="recycleList" /> Scoped slots</label>
+        <label v-if="!recycleList"><input type="checkbox" v-model="scopedSlots" :disabled="recycleList" /> Scoped slots</label>
         <label><input type="checkbox" v-model="recycleList" /> Use recycle list</label>
       </span>
-
     </div>
+
     <div class="content" v-if="showScroller">
       <div class="wrapper">
         <template v-if="!recycleList">
@@ -34,7 +37,7 @@
             v-if="scopedSlots"
             class="scroller"
             :item-height="itemHeight"
-            :items="items"
+            :items="list"
             main-tag="section"
             content-tag="table"
             :buffer="buffer"
@@ -61,26 +64,27 @@
             v-else
             class="scroller"
             :item-height="itemHeight"
-            :items="items"
+            :items="list"
             :renderers="renderers"
             type-field="type"
-            key-field="index"
+            key-field="id"
             main-tag="section"
             content-tag="table"
             :buffer="buffer"
             :pool-size="poolSize"
-            emit-update
-            @update="onUpdate"
+            :page-mode="pageMode"
           />
         </template>
 
-        <template>
+        <template v-else>
           <recycle-list
             ref="scroller"
             class="scroller"
-            :items="items"
+            :items="list"
             :item-height="itemHeight"
             :buffer="buffer"
+            :page-mode="pageMode"
+            key-field="id"
           >
             <template slot-scope="props">
               <tr
@@ -105,7 +109,7 @@
 </template>
 
 <script>
-import { getData } from './data.js'
+import { getData, addItem } from './data.js'
 
 import Letter from './Letter.vue'
 import Item from './Item.vue'
@@ -125,14 +129,12 @@ export default {
     items: [],
     renderers,
     count: 10000,
-    generateTime: null,
-    updateTime: null,
     showScroller: true,
     scopedSlots: false,
     buffer: 200,
     poolSize: 2000,
     enableLetters: true,
-    updateCount: 0,
+    pageMode: false,
     recycleList: true,
   }),
 
@@ -163,15 +165,14 @@ export default {
     itemHeight () {
       return this.enableLetters ? null : 50
     },
-  },
 
-  updated () {
-    if (this._dirty) {
-      const time = Date.now()
-      this.updateTime = time - this._time
-      console.log('update', this.updateTime, 'ms')
-      this._dirty = false
-    }
+    list () {
+      return this.items.map(
+        item => Object.assign({}, {
+          random: Math.random(),
+        }, item)
+      )
+    },
   },
 
   mounted () {
@@ -184,13 +185,15 @@ export default {
       console.log('Generating ' + this.count + ' items...')
       let time = Date.now()
       const items = getData(this.count, this.enableLetters)
-      this._time = Date.now()
-      this.generateTime = this._time - time
-      console.log('Generated ' + items.length + ' in ' + this.generateTime + 'ms')
+      console.log('Generated ' + items.length + ' in ' + (Date.now() - time) + 'ms')
       this._dirty = true
       this.items = items
     },
 
+    addItem () {
+      addItem(this.items)
+    },
+
     onUpdate (startIndex, endIndex) {
       this.updateCount++
     },
@@ -202,10 +205,14 @@ export default {
 html,
 body,
 #app {
-  height: 100%;
   box-sizing: border-box;
 }
 
+html,
+body {
+  height: 100%;
+}
+
 body {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -221,14 +228,26 @@ body {
   padding: 12px;
 }
 
-.counter {
+#app:not(.page-mode) {
+  height: 100%;
+}
+
+.toolbar {
   flex: auto 0 0;
   text-align: center;
   margin-bottom: 12px;
   line-height: 32px;
+  position: sticky;
+  top: 0;
+  z-index: 9999;
+  background: white;
+}
+
+#app.page-mode .toolbar {
+  border-bottom: solid 1px #e0edfa;
 }
 
-.counter > *:not(:last-child) {
+.toolbar > *:not(:last-child) {
   margin-right: 24px;
 }
 
@@ -238,7 +257,7 @@ body {
   position: relative;
 }
 
-.wrapper {
+#app:not(.page-mode) .wrapper {
   overflow: hidden;
   position: absolute;
   top: 0;

docs-src/src/data.js

@@ -1,5 +1,14 @@
 import faker from 'faker'
 
+let uid = 0
+
+function generateItem () {
+  return {
+    name: faker.name.findName(),
+    avatar: faker.internet.avatar(),
+  }
+}
+
 export function getData (count, letters) {
   const raw = {}
 
@@ -10,29 +19,28 @@ export function getData (count, letters) {
   }
 
   for (var i = 0; i < count; i++) {
-    const item = {
-      name: faker.name.findName(),
-      avatar: faker.internet.avatar(),
-    }
+    const item = generateItem()
     const letter = item.name.charAt(0).toLowerCase()
     raw[letter].push(item)
   }
 
-  const data = []
+  const list = []
   let index = 1
 
   for (const l of alphabet) {
     raw[l] = raw[l].sort((a, b) => a.name < b.name ? -1 : 1)
     if (letters) {
-      data.push({
+      list.push({
+        id: uid++,
         index: index++,
         type: 'letter',
         value: l,
         height: 200,
       })
     }
     for (var item of raw[l]) {
-      data.push({
+      list.push({
+        id: uid++,
         index: index++,
         type: 'person',
         value: item,
@@ -41,5 +49,15 @@ export function getData (count, letters) {
     }
   }
 
-  return data
+  return list
+}
+
+export function addItem (list) {
+  list.push({
+    id: uid++,
+    index: list.length + 1,
+    type: 'person',
+    value: generateItem(),
+    height: 50,
+  })
 }