Merge pull request #1 from Zephyrrus/feature/store_refactor

Feature/store refactor

2 files changed, 108 insertions, 205 deletions

diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 8631ea5..79a330a 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -1,180 +1,133 @@
-<style>
-	.waterfall {
-		position: relative;
-	}
-</style>
 <template>
-	<div class="waterfall">
-		<slot />
+	<div ref="waterfall" class="waterfall">
+		<WaterfallItem
+			v-for="(item, index) in items"
+			:key="item.id"
+			:style="{ width: `${itemWidth}px`, marginBottom: `${gutterHeight}px` }"
+			:width="itemWidth">
+			<slot :item="item" />
+		</WaterfallItem>
 	</div>
 </template>
 <script>
-// import {quickSort, getMinIndex, _, sum} from './util'
-
-const quickSort = (arr, type) => {
-	const left = [];
-	const right = [];
-	if (arr.length <= 1) {
-		return arr;
-	}
-	const povis = arr[0];
-	for (let i = 1; i < arr.length; i++) {
-		if (arr[i][type] < povis[type]) {
-			left.push(arr[i]);
-		} else {
-			right.push(arr[i]);
-		}
-	}
-	return quickSort(left, type).concat(povis, quickSort(right, type))
-};
-
-const getMinIndex = arr => {
-	let pos = 0;
-	for (let i = 0; i < arr.length; i++) {
-		if (arr[pos] > arr[i]) {
-			pos = i;
-		}
-	}
-	return pos;
-};
+import WaterfallItem from './WaterfallItem.vue';
 
-const _ = {
-	on(el, type, func, capture = false) {
-		el.addEventListener(type, func, capture);
-	},
-	off(el, type, func, capture = false) {
-		el.removeEventListener(type, func, capture);
-	}
-};
+const isBrowser = typeof window !== 'undefined';
+const Masonry = isBrowser ? window.Masonry || require('masonry-layout') : null;
+const imagesloaded = isBrowser ? require('imagesloaded') : null;
 
-const sum = arr => arr.reduce((sum, val) => sum + val);
 export default {
 	name: 'Waterfall',
+	components: {
+		WaterfallItem,
+	},
 	props: {
-		gutterWidth: {
-			type: Number,
-			default: 0
-		},
-		gutterHeight: {
-			type: Number,
-			default: 0
-		},
-		resizable: {
-			type: Boolean,
-			default: true
+		options: {
+			type: Object,
+			default: () => {},
 		},
-		align: {
-			type: String,
-			default: 'center'
+		items: {
+			type: Array,
+			default: () => [],
 		},
-		fixWidth: {
-			type: Number
+		itemWidth: {
+			type: Number,
+			default: 150,
 		},
-		minCol: {
+		gutterWidth: {
 			type: Number,
-			default: 1
+			default: 10,
 		},
-		maxCol: {
-			type: Number
+		gutterHeight: {
+			type: Number,
+			default: 4,
 		},
-		percent: {
-			type: Array
-		}
 	},
-	data() {
-		return {
-			timer: null,
-			colNum: 0,
-			lastWidth: 0,
-			percentWidthArr: []
-		};
+	mounted() {
+		this.initializeMasonry();
+		this.imagesLoaded();
 	},
-	created() {
-		this.$on('itemRender', () => {
-			if (this.timer) {
-				clearTimeout(this.timer);
-			}
-			this.timer = setTimeout(() => {
-				this.render();
-			}, 0);
-		});
+	updated() {
+		this.performLayout();
+		this.imagesLoaded();
 	},
-	mounted() {
-		this.resizeHandle();
-		this.$watch('resizable', this.resizeHandle);
+	unmounted() {
+		this.masonry.destroy();
 	},
 	methods: {
-		calulate(arr) {
-			let pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth;
-			// 百分比布局计算
-			if (this.percent) {
-				this.colNum = this.percent.length;
-				const total = sum(this.percent);
-				this.percentWidthArr = this.percent.map(value => (value / total) * pageWidth);
-				this.lastWidth = 0;
-			// 正常布局计算
-			} else {
-				this.colNum = parseInt(pageWidth / (arr.width + this.gutterWidth));
-				if (this.minCol && this.colNum < this.minCol) {
-					this.colNum = this.minCol;
-					this.lastWidth = 0;
-				} else if (this.maxCol && this.colNum > this.maxCol) {
-					this.colNum = this.maxCol;
-					this.lastWidth = pageWidth - (arr.width + this.gutterWidth) * this.colNum + this.gutterWidth;
-				} else {
-					this.lastWidth = pageWidth - (arr.width + this.gutterWidth) * this.colNum + this.gutterWidth;
-				}
+		imagesLoaded() {
+			const node = this.$refs.waterfall;
+			imagesloaded(
+				node,
+				() => {
+					this.masonry.layout();
+				},
+			);
+		},
+		performLayout() {
+			const diff = this.diffDomChildren();
+			if (diff.removed.length > 0) {
+				this.masonry.remove(diff.removed);
+				this.masonry.reloadItems();
+			}
+			if (diff.appended.length > 0) {
+				this.masonry.appended(diff.appended);
+				this.masonry.reloadItems();
+			}
+			if (diff.prepended.length > 0) {
+				this.masonry.prepended(diff.prepended);
 			}
+			if (diff.moved.length > 0) {
+				this.masonry.reloadItems();
+			}
+			this.masonry.layout();
+		},
+		diffDomChildren() {
+			const oldChildren = this.domChildren.filter((element) => !!element.parentNode);
+			const newChildren = this.getNewDomChildren();
+			const removed = oldChildren.filter((oldChild) => !newChildren.includes(oldChild));
+			const domDiff = newChildren.filter((newChild) => !oldChildren.includes(newChild));
+			const prepended = domDiff.filter((newChild, index) => newChildren[index] === newChild);
+			const appended = domDiff.filter((el) => !prepended.includes(el));
+			let moved = [];
+			if (removed.length === 0) {
+				moved = oldChildren.filter((child, index) => index !== newChildren.indexOf(child));
+			}
+			this.domChildren = newChildren;
+			return {
+				old: oldChildren,
+				new: newChildren,
+				removed,
+				appended,
+				prepended,
+				moved,
+			};
 		},
-		resizeHandle() {
-			if (this.resizable) {
-				_.on(window, 'resize', this.render, false);
-			} else {
-				_.off(window, 'resize', this.render, false);
+		initializeMasonry() {
+			if (!this.masonry) {
+				this.masonry = new Masonry(
+					this.$refs.waterfall,
+					{
+						columnWidth: this.itemWidth,
+						gutter: this.gutterWidth,
+						...this.options,
+					},
+				);
+				this.domChildren = this.getNewDomChildren();
 			}
 		},
-		render() {
-			// 重新排序
-			let childArr = [];
-			childArr = this.$children.map(child => child.getMeta());
-			childArr = quickSort(childArr, 'order');
-			// 计算列数
-			this.calulate(childArr[0])
-			let offsetArr = Array(this.colNum).fill(0);
-			// 渲染
-			childArr.forEach(child => {
-				let position = getMinIndex(offsetArr);
-				// 百分比布局渲染
-				if (this.percent) {
-					let left = 0;
-					child.el.style.width = `${this.percentWidthArr[position]}px`;
-					if (position === 0) {
-						left = 0;
-					} else {
-						for (let i = 0; i < position; i++) {
-							left += this.percentWidthArr[i];
-						}
-					}
-					child.el.style.left = `${left}px`;
-				// 正常布局渲染
-				} else {
-					if (this.align === 'left') { // eslint-disable-line no-lonely-if
-						child.el.style.left = `${position * (child.width + this.gutterWidth)}px`;
-					} else if (this.align === 'right') {
-						child.el.style.left = `${position * (child.width + this.gutterWidth) + this.lastWidth}px`;
-					} else {
-						child.el.style.left = `${position * (child.width + this.gutterWidth) + this.lastWidth / 2}px`;
-					}
-				}
-				if (child.height === 0) {
-					return;
-				}
-				child.el.style.top = `${offsetArr[position]}px`;
-				offsetArr[position] += (child.height + this.gutterHeight);
-				this.$el.style.height = `${Math.max.apply(Math, offsetArr)}px`;
-			});
-			this.$emit('rendered', this);
-		}
-	}
+		getNewDomChildren() {
+			const node = this.$refs.waterfall;
+			const children = this.options && this.options.itemSelector
+				? node.querySelectorAll(this.options.itemSelector) : node.children;
+			return Array.prototype.slice.call(children);
+		},
+	},
 };
 </script>
+
+<style lang="scss" scoped>
+.wfi {
+
+}
+</style>
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index a02ea1f..c5cade1 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -1,60 +1,10 @@
-<style>
-	.waterfall-item {
-		position: absolute;
-	}
-</style>
 <template>
 	<div class="waterfall-item">
 		<slot />
 	</div>
 </template>
 <script>
-import imagesLoaded from 'imagesloaded';
 export default {
 	name: 'WaterfallItem',
-	props: {
-		order: {
-			type: Number,
-			default: 0
-		},
-		width: {
-			type: Number,
-			default: 150
-		}
-	},
-	data() {
-		return {
-			itemWidth: 0,
-			height: 0
-		};
-	},
-	created() {
-		this.$watch(() => this.height, this.emit);
-	},
-	mounted() {
-		this.$el.style.display = 'none';
-		this.$el.style.width = `${this.width}px`;
-		this.emit();
-		imagesLoaded(this.$el, () => {
-			this.$el.style.left = '-9999px';
-			this.$el.style.top = '-9999px';
-			this.$el.style.display = 'block';
-			this.height = this.$el.offsetHeight;
-			this.itemWidth = this.$el.offsetWidth;
-		});
-	},
-	methods: {
-		emit() {
-			this.$parent.$emit('itemRender');
-		},
-		getMeta() {
-			return {
-				el: this.$el,
-				height: this.height,
-				width: this.itemWidth,
-				order: this.order
-			};
-		}
-	}
-}
+};
 </script>