New variable height mode & Updated deps

Akryum · Akryum · commit 6408d57b441f · 2017-06-27T15:50:15.000+02:00
diff --git a/README.md b/README.md
@@ -111,7 +111,7 @@ Vue.component('virtual-scroller', VirtualScroller)
 The virtual scroller has three main props:
 
 - `items` is the list of items you want to display in the scroller. There can be several types of item.
-- `itemHeight` is the display height of the items in pixels used to calculate the scroll height and position.
+- `itemHeight` is the display height of the items in pixels used to calculate the scroll height and position. If it set to null (default value), it will use [variable height mode](#variable-height-mode).
 - `renderers` is a map of component definitions objects or names for each item type ([more details](#renderers)). If you don't define `renderers`, the scroller will use *scoped slots* ([see below](#scoped-slots)).
 
 You need to set the size of the virtual-scroller element and the items elements (for example, with CSS). All items should have the same height to prevent display glitches.
@@ -173,6 +173,38 @@ The page mode expand the virtual-scroller and use the page viewport to compute w
 </footer>
 ```
 
+## Variable height mode
+
+**⚠️ This mode can be performance heavy with a lot of items. Use with caution.**
+
+If the `itemHeight` prop is not set or set to `null`, the virtual scroller will switch to Variable height mode. You then need to expose a number field on the item objects with the height of the item element.
+
+**⚠️ You still need to set the height of the items with CSS correctly (with classes for example).**
+
+Use the `heightField` prop (default is `'height'`) to set the field used by the scroller to get the height for each item.
+
+Example:
+
+```javascript
+const items = [
+  {
+    id: 1,
+    label: 'Title',
+    height: 64,
+  },
+  {
+    id: 2,
+    label: 'Foo',
+    height: 32,
+  },
+  {
+    id: 3,
+    label: 'Bar',
+    height: 32,
+  },
+]
+```
+
 ## Customizing the tags
 
 These are optional props you can use to change the DOM tags used in the virtual scroller:
diff --git a/config/webpack.base.config.js b/config/webpack.base.config.js
@@ -1,4 +1,5 @@
 var webpack = require('webpack')
+var path = require('path')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 var outputFile = 'vue-virtual-scroller'
@@ -9,7 +10,7 @@ var config = require('../package.json')
 module.exports = {
   entry: './src/index.js',
   output: {
-    path: './dist',
+    path: path.resolve(__dirname, '../dist'),
     filename: outputFile + '.js',
     library: globalName,
     libraryTarget: 'umd',
diff --git a/dist/vue-virtual-scroller.css b/dist/vue-virtual-scroller.css
@@ -22,7 +22,8 @@
   background-color: transparent;
   pointer-events: none;
   display: block;
-  overflow: hidden;
+  overflow: hidden;
+  opacity: 0;
 }
 
 .test h1[data-v-5ee0142a] {
diff --git a/dist/vue-virtual-scroller.js b/dist/vue-virtual-scroller.js
diff --git a/docs-src/package.json b/docs-src/package.json
@@ -6,6 +6,7 @@
   "private": true,
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
+    "devp": "cross-env NODE_ENV=production webpack-dev-server --open --inline --hot",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
diff --git a/docs-src/src/App.vue b/docs-src/src/App.vue
@@ -4,12 +4,15 @@
       <span>
         <input v-model="countInput" type="number" min="0" max="500000" /> items
       </span>
+      <span>
+        <input v-model="buffer" type="number" min="1" max="500000" /> buffer
+      </span>
+      <span>
+        <input v-model="poolSize" type="number" min="1" max="500000" /> poolSize
+      </span>
       <span v-if="generateTime !== null">
         Items generation: {{ generateTime }} ms
       </span>
-      <span v-if="updateTime !== null">
-        Virtual scroller update: {{ updateTime }} ms
-      </span>
       <span>
         <button @mousedown="showScroller = !showScroller">Toggle scroller</button>
         <label><input type="checkbox" v-model="scopedSlots" /> Scoped slots</label>
@@ -18,23 +21,23 @@
     <div class="content" v-if="showScroller">
       <div class="wrapper">
         <!-- Scoped slots -->
-        <virtual-scroller v-if="scopedSlots" class="scroller" :items="items" item-height="42" main-tag="section" content-tag="table">
+        <virtual-scroller v-if="scopedSlots" class="scroller" :items="items" main-tag="section" content-tag="table" :buffer="buffer" :pool-size="poolSize">
           <template scope="props">
             <!-- <letter v-if="props.item.type === 'letter'" :item="props.item"></letter>-->
-            <tr v-if="props.item.type === 'letter'" class="letter">
+            <tr v-if="props.item.type === 'letter'" class="letter" :key="props.itemKey">
               <td class="index">
                 {{props.item.index}}
               </td>
               <td>
                 {{props.item.value}} Scoped
               </td>
             </tr>
-            <item v-if="props.item.type === 'person'" :item="props.item"></item>
+            <item v-if="props.item.type === 'person'" :item="props.item" :key="props.itemKey"></item>
           </template>
         </virtual-scroller>
 
         <!-- Renderers -->
-        <virtual-scroller v-else class="scroller" :items="items" :renderers="renderers" item-height="42" type-field="type" key-field="index" main-tag="section" content-tag="table"></virtual-scroller>
+        <virtual-scroller v-else class="scroller" :items="items" :renderers="renderers" type-field="type" key-field="index" main-tag="section" content-tag="table"></virtual-scroller>
       </div>
     </div>
   </div>
@@ -65,6 +68,8 @@ export default {
     updateTime: null,
     showScroller: true,
     scopedSlots: false,
+    buffer: 0,
+    poolSize: 1,
   }),
 
   watch: {
@@ -191,7 +196,12 @@ body {
 .letter {
   text-transform: uppercase;
   color: grey;
-  font-weight: bold;
+  font-weight: lighter;
+  height: 200px;
+}
+
+.letter .value {
+  font-size: 120px;
 }
 
 .index {
diff --git a/docs-src/src/Item.vue b/docs-src/src/Item.vue
@@ -17,5 +17,12 @@ export default {
       this.item.value.name += '#'
     },
   },
+  /* beforeCreate () {
+    let d = 0
+    for (let i = 0; i < 9999999; i++) {
+      d++
+    }
+    return d
+  }, */
 }
 </script>
diff --git a/docs-src/src/Letter.vue b/docs-src/src/Letter.vue
@@ -3,7 +3,7 @@
     <td class="index">
       {{item.index}}
     </td>
-    <td>
+    <td class="value">
       {{item.value}}
     </td>
   </tr>
diff --git a/docs-src/src/data.js b/docs-src/src/data.js
@@ -18,20 +18,22 @@ export function getData (count) {
   }
 
   const data = []
-  let index = 0
+  let index = 1
 
   for (const l of alphabet) {
     raw[l] = raw[l].sort((a, b) => a.name < b.name ? -1 : 1)
     data.push({
       index: index++,
       type: 'letter',
       value: l,
+      height: 200,
     })
     for (var item of raw[l]) {
       data.push({
         index: index++,
         type: 'person',
         value: item,
+        height: 42,
       })
     }
   }
diff --git a/docs/build.js b/docs/build.js
diff --git a/docs/build.js.map b/docs/build.js.map
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-virtual-scroller",
   "description": "Smooth scrolling for any amount of data",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "author": {
     "name": "Guillaume Chau",
     "email": "guillaume.b.chau@gmail.com"
@@ -52,6 +52,6 @@
   },
   "dependencies": {
     "vue-observe-visibility": "^0.1.3",
-    "vue-resize": "^0.1.2"
+    "vue-resize": "^0.1.3"
   }
 }
diff --git a/src/components/VirtualScroller.vue b/src/components/VirtualScroller.vue
@@ -43,7 +43,7 @@ export default {
     },
     itemHeight: {
       type: [Number, String],
-      required: true,
+      default: null,
     },
     typeField: {
       type: String,
@@ -53,6 +53,10 @@ export default {
       type: String,
       default: 'id',
     },
+    heightField: {
+      type: String,
+      default: 'height',
+    },
     mainTag: {
       type: String,
       default: 'div',
@@ -98,6 +102,18 @@ export default {
         'page-mode': this.pageMode,
       }
     },
+
+    heights () {
+      const heights = {}
+      const items = this.items
+      const field = this.heightField
+      let accumulator = 0
+      for (let i = 0; i < items.length; i++) {
+        accumulator += items[i][field]
+        heights[i] = accumulator
+      }
+      return heights
+    },
   },
 
   watch: {
@@ -147,32 +163,85 @@ export default {
     updateVisibleItems () {
       const l = this.items.length
       const scroll = this.getScroll()
+      let containerHeight, offsetTop
       if (scroll) {
-        let startIndex = Math.floor((Math.floor(scroll.top / this.itemHeight) - this.buffer) / this.poolSize) * this.poolSize
-        let endIndex = Math.floor((Math.ceil(scroll.bottom / this.itemHeight) + this.buffer) / this.poolSize) * this.poolSize
+        let startIndex = -1
+        let endIndex = -1
+
+        // Variable height mode
+        if (this.itemHeight === null) {
+          const heights = this.heights
+          let h
+          let a = 0
+          let b = l
+          let i = ~~(l / 2)
+          let oldI
+
+          // Searching for startIndex
+          do {
+            oldI = i
+            h = heights[i]
+            if (h < scroll.top) {
+              a = i
+            } else if (i < l && heights[i + 1] > scroll.top) {
+              b = i
+            }
+            i = ~~((a + b) / 2)
+          } while (i !== oldI)
+          startIndex = i
+
+          // For containers style
+          offsetTop = i > 0 ? heights[i - 1] : 0
+          containerHeight = heights[l - 1]
+
+          // Searching for endIndex
+          for (endIndex = i; endIndex < l && heights[endIndex] < scroll.bottom; endIndex++);
+          if (endIndex === -1) {
+            endIndex = this.items.length - 1
+          } else {
+            endIndex++
+          }
+        } else {
+          // Fixed height mode
+          startIndex = Math.floor((Math.floor(scroll.top / this.itemHeight) - this.buffer) / this.poolSize) * this.poolSize
+          endIndex = Math.floor((Math.ceil(scroll.bottom / this.itemHeight) + this.buffer) / this.poolSize) * this.poolSize
+          containerHeight = l * this.itemHeight
+          offsetTop = startIndex * this.itemHeight
+        }
+
         if (startIndex < 0) {
           startIndex = 0
         }
         if (endIndex > l) {
           endIndex = l
         }
-        if (startIndex !== this._startIndex || endIndex !== this.endIndex) {
+
+        if (startIndex !== this._startIndex || endIndex !== this._endIndex) {
           this.keysEnabled = !(startIndex > this._endIndex || endIndex < this._startIndex)
           this._startIndex = startIndex
           this._endIndex = endIndex
           this.visibleItems = this.items.slice(startIndex, endIndex)
           this.itemContainerStyle = {
-            height: l * this.itemHeight + 'px',
+            height: containerHeight + 'px',
           }
           this.itemsStyle = {
-            marginTop: startIndex * this.itemHeight + 'px',
+            marginTop: offsetTop + 'px',
           }
         }
       }
     },
 
     scrollToItem (index) {
-      this.$el.scrollTop = index * this.itemHeight
+      let scrollTop
+      if (this.itemHeight === null) {
+        scrollTop = 0
+        for (let i = 0; i < index; i++) {
+          scrollTop += this.items[i][this.heightField]
+        }
+      } else {
+        scrollTop = index * this.itemHeight
+      }
+      this.$el.scrollTop = scrollTop
     },
 
     handleVisibilityChange (isVisible, entry) {

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,8 @@`
`22`	`22`	`background-color: transparent;`
`23`	`23`	`pointer-events: none;`
`24`	`24`	`display: block;`
`25`		`- overflow: hidden;`
	`25`	`+ overflow: hidden;`
	`26`	`+ opacity: 0;`
`26`	`27`	`}`
`27`	`28`
`28`	`29`	`.test h1[data-v-5ee0142a] {`