index.js

class _vDynamicUpdateCycle {
	constructor(app, component, load, total, limit = 100) {
		this.app = app;
		this.component = app.$refs[component];
		this.load = load;
		this.total = Math.ceil(total / limit);
		this.limit = limit;

		this.states = Array(this.total).fill(0);
		this.loadQueue = [];
		this.canUpdate = true;

		for (let i=0;i<this.total;i++) {
			this.component.sections.push(false);
		}

		if (typeof module != 'undefined') return;

		// wait for DOM
		$(document).ready(() => this.update());

		let delay;
		document.addEventListener('scroll', () => {
			clearTimeout(delay);
			delay = setTimeout(() => this.update(), 25);
		});
	}
	getTotal() {
		return this.total;
	}
	populate(x, e = false) {
		return Array(x).fill(e);
	}
	updateElm(i, v) {
		return new Promise(resolve => {
			this.load(i, this.limit).then(data => {
				this.component.sections.splice(i, 1, data);
				this.states[i] = 2;
				resolve();
			});
		});
	}
	forceQueue(i, v) {
		this.loadQueue.push([i, v]);
	}
	process(n) {
		return this.updateElm(n[0], n[1]).then(() => {
			if (this.loadQueue.length > 0)
				return this.process(this.loadQueue.shift());
			this.canUpdate = true;
		});
	}
	update() {
		let entries = $('.section');
		for (let i=0;i<entries.length;i++) {
			let v = entries[i];
			if (this.visible(entries[i])) {
				switch (this.states[i]) {
					case 0:
						this.component.sections.splice(i, 1, this.populate(this.limit));
						this.states[i]++;
					case 1:
						if (this.loadQueue.indexOf([i, v] == -1)) this.loadQueue.push([i, v]);
				}
			}
		};
		if (this.loadQueue.length == 0 || !this.canUpdate) return;
		this.canUpdate = false;
		this.process(this.loadQueue.shift());
	}
	visible(elm) {
		let rect = elm.getBoundingClientRect();
		let viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
		return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
	}
}

if (typeof Vue != 'undefined') Vue.component('dynamic-list', {
	data: () => {
		return {
			sections: []
		}
	},
	template: `<div class="dynamic-list">
	<div v-for="section in sections" :class="{'section': true, 'loaded': !!section}">
		<div v-if="section" v-for="entry in section" class="entry">
			<div v-if="entry" class="loaded">
				<slot name="entry" v-bind:entry="entry"></slot>
			</div>
			<div v-if="!entry" class="loadbar">
				<slot name="unloaded"></slot>
			</div>
		</div>
	</div>
</div>`
});

class vDynamicList {
	constructor(app, options) {
		this.ref = options.ref || 'list';
		this.onLoad = options.onLoad || ($=>{});
		this.elements = options.elements || 0;
		this.limit = options.limit || 100;
		this.cycle = new _vDynamicUpdateCycle(app, this.ref, this.onLoad, this.elements, this.limit);
	}
}

if (typeof module != 'undefined') module.exports = { _vDynamicUpdateCycle, vDynamicList };