From fe10a00ba9a3c30d8718ca004ccd19518466f5bd Mon Sep 17 00:00:00 2001
From: Pitu <7425261+Pitu@users.noreply.github.com>
Date: Sun, 16 Sep 2018 01:09:02 -0300
Subject: Site

---
 src/site/components/grid/Grid.vue                  | 166 ++++++++
 src/site/components/grid/waterfall/Waterfall.vue   | 181 +++++++++
 .../components/grid/waterfall/WaterfallItem.vue    |  60 +++
 .../grid/waterfall/old/waterfall-slot.vue          |  76 ++++
 .../components/grid/waterfall/old/waterfall.vue    | 442 +++++++++++++++++++++
 5 files changed, 925 insertions(+)
 create mode 100644 src/site/components/grid/Grid.vue
 create mode 100644 src/site/components/grid/waterfall/Waterfall.vue
 create mode 100644 src/site/components/grid/waterfall/WaterfallItem.vue
 create mode 100644 src/site/components/grid/waterfall/old/waterfall-slot.vue
 create mode 100644 src/site/components/grid/waterfall/old/waterfall.vue

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
new file mode 100644
index 0000000..09922c9
--- /dev/null
+++ b/src/site/components/grid/Grid.vue
@@ -0,0 +1,166 @@
+<style lang="scss" scoped>
+	@import '../../styles/_colors.scss';
+	.item-move {
+		transition: all .25s cubic-bezier(.55,0,.1,1);
+		-webkit-transition: all .25s cubic-bezier(.55,0,.1,1);
+	}
+	div.actions {
+		opacity: 0;
+		-webkit-transition: opacity 0.1s linear;
+		-moz-transition: opacity 0.1s linear;
+		-ms-transition: opacity 0.1s linear;
+		-o-transition: opacity 0.1s linear;
+		transition: opacity 0.1s linear;
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		width: 100%;
+		height: calc(100% - 6px);
+		background: rgba(0, 0, 0, 0.5);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		span {
+			padding: 3px;
+
+			&:nth-child(1), &:nth-child(2) {
+				align-items: flex-end;
+			}
+
+			&:nth-child(1), &:nth-child(3) {
+				justify-content: flex-end;
+			}
+			a {
+				width: 30px;
+				height: 30px;
+				color: white;
+				justify-content: center;
+				align-items: center;
+				display: flex;
+				&:before {
+					content: '';
+					width: 30px;
+					height: 30px;
+					border: 1px solid white;
+					border-radius: 50%;
+					position: absolute;
+				}
+			}
+		}
+
+		&.fixed {
+			position: relative;
+			opacity: 1;
+			background: none;
+
+			a {
+				width: auto;
+				height: auto;
+				color: $defaultTextColor;
+				&:before {
+					display: none;
+				}
+			}
+
+		}
+	}
+</style>
+
+<style lang="scss">
+	.waterfall-item:hover {
+		div.actions {
+			opacity: 1
+		}
+	}
+</style>
+
+<template>
+	<Waterfall
+		:gutterWidth="10"
+		:gutterHeight="4">
+		<WaterfallItem v-for="(item, index) in files"
+			v-if="showWaterfall && item.thumb"
+			:key="index"
+			move-class="item-move">
+			<img :src="`${item.thumb}`">
+			<div :class="{ fixed }"
+				class="actions">
+				<b-tooltip label="Link"
+					position="is-top">
+					<a :href="`${item.url}`"
+						target="_blank">
+						<i class="icon-web-code"/>
+					</a>
+				</b-tooltip>
+				<b-tooltip label="Albums"
+					position="is-top">
+					<a @click="manageAlbums(item)">
+						<i class="icon-interface-window"/>
+					</a>
+				</b-tooltip>
+				<b-tooltip label="Tags"
+					position="is-top">
+					<a @click="manageTags(item)">
+						<i class="icon-ecommerce-tag-c"/>
+					</a>
+				</b-tooltip>
+				<b-tooltip label="Delete"
+					position="is-top">
+					<a @click="deleteFile(item, index)">
+						<i class="icon-editorial-trash-a-l"/>
+					</a>
+				</b-tooltip>
+			</div>
+		</WaterfallItem>
+	</Waterfall>
+</template>
+<script>
+import Waterfall from './waterfall/Waterfall.vue';
+import WaterfallItem from './waterfall/WaterfallItem.vue';
+
+export default {
+	components: {
+		Waterfall,
+		WaterfallItem
+	},
+	props: {
+		files: {
+			type: Array,
+			default: null
+		},
+		fixed: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return { showWaterfall: true };
+	},
+	mounted() {},
+	methods: {
+		deleteFile(file, index) {
+			this.$dialog.confirm({
+				title: 'Deleting file',
+				message: 'Are you sure you want to <b>delete</b> this file?',
+				confirmText: 'Delete File',
+				type: 'is-danger',
+				hasIcon: true,
+				onConfirm: async () => {
+					try {
+						const response = await this.axios.delete(`${this.$config.baseURL}/file/${file.id}`);
+						this.showWaterfall = false;
+						this.files.splice(index, 1);
+						this.$nextTick(() => {
+							this.showWaterfall = true;
+						});
+						return this.$toast.open(response.data.message);
+					} catch (error) {
+						return this.$onPromiseError(error);
+					}
+				}
+			});
+		}
+	}
+};
+</script>
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
new file mode 100644
index 0000000..9827075
--- /dev/null
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -0,0 +1,181 @@
+<style>
+	.waterfall {
+		position: relative;
+	}
+</style>
+<template>
+	<div class="waterfall">
+		<slot/>
+	</div>
+</template>
+<script>
+// import {quickSort, getMinIndex, _, sum} from './util'
+
+const quickSort = (arr, type) => {
+	let left = [];
+	let right = [];
+	let povis;
+	if (arr.length <= 1) {
+		return arr;
+	}
+	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;
+};
+
+const _ = {
+	on(el, type, func, capture = false) {
+		el.addEventListener(type, func, capture);
+	},
+	off(el, type, func, capture = false) {
+		el.removeEventListener(type, func, capture);
+	}
+};
+
+const sum = arr => arr.reduce((sum, val) => sum + val);
+export default {
+	name: 'Waterfall',
+	props: {
+		gutterWidth: {
+			type: Number,
+			default: 0
+		},
+		gutterHeight: {
+			type: Number,
+			default: 0
+		},
+		resizable: {
+			type: Boolean,
+			default: true
+		},
+		align: {
+			type: String,
+			default: 'center'
+		},
+		fixWidth: {
+			type: Number
+		},
+		minCol: {
+			type: Number,
+			default: 1
+		},
+		maxCol: {
+			type: Number
+		},
+		percent: {
+			type: Array
+		}
+	},
+	data() {
+		return {
+			timer: null,
+			colNum: 0,
+			lastWidth: 0,
+			percentWidthArr: []
+		};
+	},
+	created() {
+		this.$on('itemRender', () => {
+			if (this.timer) {
+				clearTimeout(this.timer);
+			}
+			this.timer = setTimeout(() => {
+				this.render();
+			}, 0);
+		});
+	},
+	mounted() {
+		this.resizeHandle();
+		this.$watch('resizable', this.resizeHandle);
+	},
+	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;
+				}
+			}
+		},
+		resizeHandle() {
+			if (this.resizable) {
+				_.on(window, 'resize', this.render, false);
+			} else {
+				_.off(window, 'resize', this.render, false);
+			}
+		},
+		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);
+		}
+	}
+};
+</script>
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
new file mode 100644
index 0000000..597cca6
--- /dev/null
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -0,0 +1,60 @@
+<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>
diff --git a/src/site/components/grid/waterfall/old/waterfall-slot.vue b/src/site/components/grid/waterfall/old/waterfall-slot.vue
new file mode 100644
index 0000000..07ca268
--- /dev/null
+++ b/src/site/components/grid/waterfall/old/waterfall-slot.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="vue-waterfall-slot" v-show="isShow">
+    <slot></slot>
+  </div>
+</template>
+
+<style>
+.vue-waterfall-slot {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+</style>
+
+<script>
+
+export default {
+  data: () => ({
+    isShow: false
+  }),
+  props: {
+    width: {
+      required: true,
+      validator: (val) => val >= 0
+    },
+    height: {
+      required: true,
+      validator: (val) => val >= 0
+    },
+    order: {
+      default: 0
+    },
+    moveClass: {
+      default: ''
+    }
+  },
+  methods: {
+    notify () {
+      this.$parent.$emit('reflow', this)
+    },
+    getMeta () {
+      return {
+        vm: this,
+        node: this.$el,
+        order: this.order,
+        width: this.width,
+        height: this.height,
+        moveClass: this.moveClass
+      }
+    }
+  },
+  created () {
+    this.rect = {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0
+    }
+    this.$watch(() => (
+      this.width,
+      this.height
+    ), this.notify)
+  },
+  mounted () {
+    this.$parent.$once('reflowed', () => {
+      this.isShow = true
+    })
+    this.notify()
+  },
+  destroyed () {
+    this.notify()
+  }
+}
+
+</script>
diff --git a/src/site/components/grid/waterfall/old/waterfall.vue b/src/site/components/grid/waterfall/old/waterfall.vue
new file mode 100644
index 0000000..84e3c98
--- /dev/null
+++ b/src/site/components/grid/waterfall/old/waterfall.vue
@@ -0,0 +1,442 @@
+<template>
+  <div class="vue-waterfall" :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<style>
+.vue-waterfall {
+  position: relative;
+  /*overflow: hidden; cause clientWidth = 0 in IE if height not bigger than 0 */
+}
+</style>
+
+<script>
+
+const MOVE_CLASS_PROP = '_wfMoveClass'
+
+export default {
+  props: {
+    autoResize: {
+      default: true
+    },
+    interval: {
+      default: 200,
+      validator: (val) => val >= 0
+    },
+    align: {
+      default: 'left',
+      validator: (val) => ~['left', 'right', 'center'].indexOf(val)
+    },
+    line: {
+      default: 'v',
+      validator: (val) => ~['v', 'h'].indexOf(val)
+    },
+    lineGap: {
+      required: true,
+      validator: (val) => val >= 0
+    },
+    minLineGap: {
+      validator: (val) => val >= 0
+    },
+    maxLineGap: {
+      validator: (val) => val >= 0
+    },
+    singleMaxWidth: {
+      validator: (val) => val >= 0
+    },
+    fixedHeight: {
+      default: false
+    },
+    grow: {
+      validator: (val) => val instanceof Array
+    },
+    watch: {
+      default: () => ({})
+    }
+  },
+  data: () => ({
+    style: {
+      height: '',
+      overflow: ''
+    },
+    token: null
+  }),
+  methods: {
+    reflowHandler,
+    autoResizeHandler,
+    reflow
+  },
+  created () {
+    this.virtualRects = []
+    this.$on('reflow', () => {
+      this.reflowHandler()
+    })
+    this.$watch(() => (
+      this.align,
+      this.line,
+      this.lineGap,
+      this.minLineGap,
+      this.maxLineGap,
+      this.singleMaxWidth,
+      this.fixedHeight,
+      this.watch
+    ), this.reflowHandler)
+    this.$watch('grow', this.reflowHandler)
+  },
+  mounted () {
+    this.$watch('autoResize', this.autoResizeHandler)
+    on(this.$el, getTransitionEndEvent(), tidyUpAnimations, true)
+    this.autoResizeHandler(this.autoResize)
+  },
+  beforeDestroy () {
+    this.autoResizeHandler(false)
+    off(this.$el, getTransitionEndEvent(), tidyUpAnimations, true)
+  }
+}
+
+function autoResizeHandler (autoResize) {
+  if (autoResize === false || !this.autoResize) {
+    off(window, 'resize', this.reflowHandler, false)
+  } else {
+    on(window, 'resize', this.reflowHandler, false)
+  }
+}
+
+function tidyUpAnimations (event) {
+  let node = event.target
+  let moveClass = node[MOVE_CLASS_PROP]
+  if (moveClass) {
+    removeClass(node, moveClass)
+  }
+}
+
+function reflowHandler () {
+  clearTimeout(this.token)
+  this.token = setTimeout(this.reflow, this.interval)
+}
+
+function reflow () {
+  if (!this.$el) { return }
+  let width = this.$el.clientWidth
+  let metas = this.$children.map((slot) => slot.getMeta())
+  metas.sort((a, b) => a.order - b.order)
+  this.virtualRects = metas.map(() => ({}))
+  calculate(this, metas, this.virtualRects)
+  setTimeout(() => {
+    if (isScrollBarVisibilityChange(this.$el, width)) {
+      calculate(this, metas, this.virtualRects)
+    }
+    this.style.overflow = 'hidden'
+    render(this.virtualRects, metas)
+    this.$emit('reflowed', this)
+  }, 0)
+}
+
+function isScrollBarVisibilityChange (el, lastClientWidth) {
+  return lastClientWidth !== el.clientWidth
+}
+
+function calculate (vm, metas, styles) {
+  let options = getOptions(vm)
+  let processor = vm.line === 'h' ? horizontalLineProcessor : verticalLineProcessor
+  processor.calculate(vm, options, metas, styles)
+}
+
+function getOptions (vm) {
+  const maxLineGap = vm.maxLineGap ? +vm.maxLineGap : vm.lineGap
+  return {
+    align: ~['left', 'right', 'center'].indexOf(vm.align) ? vm.align : 'left',
+    line: ~['v', 'h'].indexOf(vm.line) ? vm.line : 'v',
+    lineGap: +vm.lineGap,
+    minLineGap: vm.minLineGap ? +vm.minLineGap : vm.lineGap,
+    maxLineGap: maxLineGap,
+    singleMaxWidth: Math.max(vm.singleMaxWidth || 0, maxLineGap),
+    fixedHeight: !!vm.fixedHeight,
+    grow: vm.grow && vm.grow.map(val => +val)
+  }
+}
+
+var verticalLineProcessor = (() => {
+
+  function calculate (vm, options, metas, rects) {
+    let width = vm.$el.clientWidth
+    let grow = options.grow
+    let strategy = grow
+      ? getRowStrategyWithGrow(width, grow)
+      : getRowStrategy(width, options)
+    let tops = getArrayFillWith(0, strategy.count)
+    metas.forEach((meta, index) => {
+      let offset = tops.reduce((last, top, i) => top < tops[last] ? i : last, 0)
+      let width = strategy.width[offset % strategy.count]
+      let rect = rects[index]
+      rect.top = tops[offset]
+      rect.left = strategy.left + (offset ? sum(strategy.width.slice(0, offset)) : 0)
+      rect.width = width
+      rect.height = meta.height * (options.fixedHeight ? 1 : width / meta.width)
+      tops[offset] = tops[offset] + rect.height
+    })
+    vm.style.height = Math.max.apply(Math, tops) + 'px'
+  }
+
+  function getRowStrategy (width, options) {
+    let count = width / options.lineGap
+    let slotWidth
+    if (options.singleMaxWidth >= width) {
+      count = 1
+      slotWidth = Math.max(width, options.minLineGap)
+    } else {
+      let maxContentWidth = options.maxLineGap * ~~count
+      let minGreedyContentWidth = options.minLineGap * ~~(count + 1)
+      let canFit = maxContentWidth >= width
+      let canFitGreedy = minGreedyContentWidth <= width
+      if (canFit && canFitGreedy) {
+        count = Math.round(count)
+        slotWidth = width / count
+      } else if (canFit) {
+        count = ~~count
+        slotWidth = width / count
+      } else if (canFitGreedy) {
+        count = ~~(count + 1)
+        slotWidth = width / count
+      } else {
+        count = ~~count
+        slotWidth = options.maxLineGap
+      }
+      if (count === 1) {
+        slotWidth = Math.min(width, options.singleMaxWidth)
+        slotWidth = Math.max(slotWidth, options.minLineGap)
+      }
+    }
+    return {
+      width: getArrayFillWith(slotWidth, count),
+      count: count,
+      left: getLeft(width, slotWidth * count, options.align)
+    }
+  }
+
+  function getRowStrategyWithGrow (width, grow) {
+    let total = sum(grow)
+    return {
+      width: grow.map(val => width * val / total),
+      count: grow.length,
+      left: 0
+    }
+  }
+
+  return {
+    calculate
+  }
+
+})()
+
+var horizontalLineProcessor = (() => {
+
+  function calculate (vm, options, metas, rects) {
+    let width = vm.$el.clientWidth
+    let total = metas.length
+    let top = 0
+    let offset = 0
+    while (offset < total) {
+      let strategy = getRowStrategy(width, options, metas, offset)
+      for (let i = 0, left = 0, meta, rect; i < strategy.count; i++) {
+        meta = metas[offset + i]
+        rect = rects[offset + i]
+        rect.top = top
+        rect.left = strategy.left + left
+        rect.width = meta.width * strategy.height / meta.height
+        rect.height = strategy.height
+        left += rect.width
+      }
+      offset += strategy.count
+      top += strategy.height
+    }
+    vm.style.height = top + 'px'
+  }
+
+  function getRowStrategy (width, options, metas, offset) {
+    let greedyCount = getGreedyCount(width, options.lineGap, metas, offset)
+    let lazyCount = Math.max(greedyCount - 1, 1)
+    let greedySize = getContentSize(width, options, metas, offset, greedyCount)
+    let lazySize = getContentSize(width, options, metas, offset, lazyCount)
+    let finalSize = chooseFinalSize(lazySize, greedySize, width)
+    let height = finalSize.height
+    let fitContentWidth = finalSize.width
+    if (finalSize.count === 1) {
+      fitContentWidth = Math.min(options.singleMaxWidth, width)
+      height = metas[offset].height * fitContentWidth / metas[offset].width
+    }
+    return {
+      left: getLeft(width, fitContentWidth, options.align),
+      count: finalSize.count,
+      height: height
+    }
+  }
+
+  function getGreedyCount (rowWidth, rowHeight, metas, offset) {
+    let count = 0
+    for (let i = offset, width = 0; i < metas.length && width <= rowWidth; i++) {
+      width += metas[i].width * rowHeight / metas[i].height
+      count++
+    }
+    return count
+  }
+
+  function getContentSize (rowWidth, options, metas, offset, count) {
+    let originWidth = 0
+    for (let i = count - 1; i >= 0; i--) {
+      let meta = metas[offset + i]
+      originWidth += meta.width * options.lineGap / meta.height
+    }
+    let fitHeight = options.lineGap * rowWidth / originWidth
+    let canFit = (fitHeight <= options.maxLineGap && fitHeight >= options.minLineGap)
+    if (canFit) {
+      return {
+        cost: Math.abs(options.lineGap - fitHeight),
+        count: count,
+        width: rowWidth,
+        height: fitHeight
+      }
+    } else {
+      let height = originWidth > rowWidth ? options.minLineGap : options.maxLineGap
+      return {
+        cost: Infinity,
+        count: count,
+        width: originWidth * height / options.lineGap,
+        height: height
+      }
+    }
+  }
+
+  function chooseFinalSize (lazySize, greedySize, rowWidth) {
+    if (lazySize.cost === Infinity && greedySize.cost === Infinity) {
+      return greedySize.width < rowWidth ? greedySize : lazySize
+    } else {
+      return greedySize.cost >= lazySize.cost ? lazySize : greedySize
+    }
+  }
+
+  return {
+    calculate
+  }
+
+})()
+
+function getLeft (width, contentWidth, align) {
+  switch (align) {
+    case 'right':
+      return width - contentWidth
+    case 'center':
+      return (width - contentWidth) / 2
+    default:
+      return 0
+  }
+}
+
+function sum (arr) {
+  return arr.reduce((sum, val) => sum + val)
+}
+
+function render (rects, metas) {
+  let metasNeedToMoveByTransform = metas.filter((meta) => meta.moveClass)
+  let firstRects = getRects(metasNeedToMoveByTransform)
+  applyRects(rects, metas)
+  let lastRects = getRects(metasNeedToMoveByTransform)
+  metasNeedToMoveByTransform.forEach((meta, i) => {
+    meta.node[MOVE_CLASS_PROP] = meta.moveClass
+    setTransform(meta.node, firstRects[i], lastRects[i])
+  })
+  document.body.clientWidth // forced reflow
+  metasNeedToMoveByTransform.forEach((meta) => {
+    addClass(meta.node, meta.moveClass)
+    clearTransform(meta.node)
+  })
+}
+
+function getRects (metas) {
+  return metas.map((meta) => meta.vm.rect)
+}
+
+function applyRects (rects, metas) {
+  rects.forEach((rect, i) => {
+    let style = metas[i].node.style
+    metas[i].vm.rect = rect
+    for (let prop in rect) {
+      style[prop] = rect[prop] + 'px'
+    }
+  })
+}
+
+function setTransform (node, firstRect, lastRect) {
+  let dx = firstRect.left - lastRect.left
+  let dy = firstRect.top - lastRect.top
+  let sw = firstRect.width / lastRect.width
+  let sh = firstRect.height / lastRect.height
+  node.style.transform =
+  node.style.WebkitTransform = `translate(${dx}px,${dy}px) scale(${sw},${sh})`
+  node.style.transitionDuration = '0s'
+}
+
+function clearTransform (node) {
+  node.style.transform = node.style.WebkitTransform = ''
+  node.style.transitionDuration = ''
+}
+
+function getTransitionEndEvent () {
+  let isWebkitTrans =
+    window.ontransitionend === undefined &&
+    window.onwebkittransitionend !== undefined
+  let transitionEndEvent = isWebkitTrans
+    ? 'webkitTransitionEnd'
+    : 'transitionend'
+  return transitionEndEvent
+}
+
+/**
+ * util
+ */
+
+function getArrayFillWith (item, count) {
+  let getter = (typeof item === 'function') ? () => item() : () => item
+  let arr = []
+  for (let i = 0; i < count; i++) {
+    arr[i] = getter()
+  }
+  return arr
+}
+
+function addClass (elem, name) {
+  if (!hasClass(elem, name)) {
+    let cur = attr(elem, 'class').trim()
+    let res = (cur + ' ' + name).trim()
+    attr(elem, 'class', res)
+  }
+}
+
+function removeClass (elem, name) {
+  let reg = new RegExp('\\s*\\b' + name + '\\b\\s*', 'g')
+  let res = attr(elem, 'class').replace(reg, ' ').trim()
+  attr(elem, 'class', res)
+}
+
+function hasClass (elem, name) {
+  return (new RegExp('\\b' + name + '\\b')).test(attr(elem, 'class'))
+}
+
+function attr (elem, name, value) {
+  if (typeof value !== 'undefined') {
+    elem.setAttribute(name, value)
+  } else {
+    return elem.getAttribute(name) || ''
+  }
+}
+
+function on (elem, type, listener, useCapture = false) {
+  elem.addEventListener(type, listener, useCapture)
+}
+
+function off (elem, type, listener, useCapture = false) {
+  elem.removeEventListener(type, listener, useCapture)
+}
+
+</script>
-- 
cgit v1.2.3


From c2c6e99878853fafdbd5e708c3163921f8529ae1 Mon Sep 17 00:00:00 2001
From: Pitu <7425261+Pitu@users.noreply.github.com>
Date: Mon, 17 Sep 2018 04:38:25 -0300
Subject: Public albums wooo!

---
 src/site/components/grid/Grid.vue | 77 ++++++++++++++++++++++++---------------
 1 file changed, 47 insertions(+), 30 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 09922c9..50e626b 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -82,36 +82,46 @@
 		<WaterfallItem v-for="(item, index) in files"
 			v-if="showWaterfall && item.thumb"
 			:key="index"
+			:width="width"
 			move-class="item-move">
-			<img :src="`${item.thumb}`">
-			<div :class="{ fixed }"
-				class="actions">
-				<b-tooltip label="Link"
-					position="is-top">
-					<a :href="`${item.url}`"
-						target="_blank">
-						<i class="icon-web-code"/>
-					</a>
-				</b-tooltip>
-				<b-tooltip label="Albums"
-					position="is-top">
-					<a @click="manageAlbums(item)">
-						<i class="icon-interface-window"/>
-					</a>
-				</b-tooltip>
-				<b-tooltip label="Tags"
-					position="is-top">
-					<a @click="manageTags(item)">
-						<i class="icon-ecommerce-tag-c"/>
-					</a>
-				</b-tooltip>
-				<b-tooltip label="Delete"
-					position="is-top">
-					<a @click="deleteFile(item, index)">
-						<i class="icon-editorial-trash-a-l"/>
-					</a>
-				</b-tooltip>
-			</div>
+			<template v-if="isPublic">
+				<a :href="`${item.url}`"
+					target="_blank">
+					<img :src="`${item.thumb}`">
+				</a>
+			</template>
+			<template v-else>
+				<img :src="`${item.thumb}`">
+				<div v-if="!isPublic"
+					:class="{ fixed }"
+					class="actions">
+					<b-tooltip label="Link"
+						position="is-top">
+						<a :href="`${item.url}`"
+							target="_blank">
+							<i class="icon-web-code"/>
+						</a>
+					</b-tooltip>
+					<b-tooltip label="Albums"
+						position="is-top">
+						<a @click="manageAlbums(item)">
+							<i class="icon-interface-window"/>
+						</a>
+					</b-tooltip>
+					<b-tooltip label="Tags"
+						position="is-top">
+						<a @click="manageTags(item)">
+							<i class="icon-ecommerce-tag-c"/>
+						</a>
+					</b-tooltip>
+					<b-tooltip label="Delete"
+						position="is-top">
+						<a @click="deleteFile(item, index)">
+							<i class="icon-editorial-trash-a-l"/>
+						</a>
+					</b-tooltip>
+				</div>
+			</template>
 		</WaterfallItem>
 	</Waterfall>
 </template>
@@ -132,12 +142,19 @@ export default {
 		fixed: {
 			type: Boolean,
 			default: false
+		},
+		isPublic: {
+			type: Boolean,
+			default: false
+		},
+		width: {
+			type: Number,
+			default: 150
 		}
 	},
 	data() {
 		return { showWaterfall: true };
 	},
-	mounted() {},
 	methods: {
 		deleteFile(file, index) {
 			this.$dialog.confirm({
-- 
cgit v1.2.3


From 430af8306b1ab17e59a6dabf8f65ab816d28695d Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Wed, 19 Sep 2018 04:45:50 -0300
Subject: Switch to Nuxt.js

---
 src/site/components/grid/Grid.vue                  |  17 +-
 src/site/components/grid/waterfall/Waterfall.vue   |   9 +-
 .../components/grid/waterfall/WaterfallItem.vue    |   2 +-
 .../grid/waterfall/old/waterfall-slot.vue          |  76 ----
 .../components/grid/waterfall/old/waterfall.vue    | 442 ---------------------
 5 files changed, 16 insertions(+), 530 deletions(-)
 delete mode 100644 src/site/components/grid/waterfall/old/waterfall-slot.vue
 delete mode 100644 src/site/components/grid/waterfall/old/waterfall.vue

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 50e626b..615d68f 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -1,5 +1,5 @@
 <style lang="scss" scoped>
-	@import '../../styles/_colors.scss';
+	@import '~/assets/styles/_colors.scss';
 	.item-move {
 		transition: all .25s cubic-bezier(.55,0,.1,1);
 		-webkit-transition: all .25s cubic-bezier(.55,0,.1,1);
@@ -99,25 +99,25 @@
 						position="is-top">
 						<a :href="`${item.url}`"
 							target="_blank">
-							<i class="icon-web-code"/>
+							<i class="icon-web-code" />
 						</a>
 					</b-tooltip>
 					<b-tooltip label="Albums"
 						position="is-top">
 						<a @click="manageAlbums(item)">
-							<i class="icon-interface-window"/>
+							<i class="icon-interface-window" />
 						</a>
 					</b-tooltip>
 					<b-tooltip label="Tags"
 						position="is-top">
 						<a @click="manageTags(item)">
-							<i class="icon-ecommerce-tag-c"/>
+							<i class="icon-ecommerce-tag-c" />
 						</a>
 					</b-tooltip>
 					<b-tooltip label="Delete"
 						position="is-top">
 						<a @click="deleteFile(item, index)">
-							<i class="icon-editorial-trash-a-l"/>
+							<i class="icon-editorial-trash-a-l" />
 						</a>
 					</b-tooltip>
 				</div>
@@ -155,6 +155,11 @@ export default {
 	data() {
 		return { showWaterfall: true };
 	},
+	computed: {
+		config() {
+			return this.$store.state.config;
+		}
+	},
 	methods: {
 		deleteFile(file, index) {
 			this.$dialog.confirm({
@@ -165,7 +170,7 @@ export default {
 				hasIcon: true,
 				onConfirm: async () => {
 					try {
-						const response = await this.axios.delete(`${this.$config.baseURL}/file/${file.id}`);
+						const response = await this.axios.delete(`${this.config.baseURL}/file/${file.id}`);
 						this.showWaterfall = false;
 						this.files.splice(index, 1);
 						this.$nextTick(() => {
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 9827075..8631ea5 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -5,20 +5,19 @@
 </style>
 <template>
 	<div class="waterfall">
-		<slot/>
+		<slot />
 	</div>
 </template>
 <script>
 // import {quickSort, getMinIndex, _, sum} from './util'
 
 const quickSort = (arr, type) => {
-	let left = [];
-	let right = [];
-	let povis;
+	const left = [];
+	const right = [];
 	if (arr.length <= 1) {
 		return arr;
 	}
-	povis = arr[0];
+	const povis = arr[0];
 	for (let i = 1; i < arr.length; i++) {
 		if (arr[i][type] < povis[type]) {
 			left.push(arr[i]);
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index 597cca6..a02ea1f 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -5,7 +5,7 @@
 </style>
 <template>
 	<div class="waterfall-item">
-		<slot/>
+		<slot />
 	</div>
 </template>
 <script>
diff --git a/src/site/components/grid/waterfall/old/waterfall-slot.vue b/src/site/components/grid/waterfall/old/waterfall-slot.vue
deleted file mode 100644
index 07ca268..0000000
--- a/src/site/components/grid/waterfall/old/waterfall-slot.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <div class="vue-waterfall-slot" v-show="isShow">
-    <slot></slot>
-  </div>
-</template>
-
-<style>
-.vue-waterfall-slot {
-  position: absolute;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-</style>
-
-<script>
-
-export default {
-  data: () => ({
-    isShow: false
-  }),
-  props: {
-    width: {
-      required: true,
-      validator: (val) => val >= 0
-    },
-    height: {
-      required: true,
-      validator: (val) => val >= 0
-    },
-    order: {
-      default: 0
-    },
-    moveClass: {
-      default: ''
-    }
-  },
-  methods: {
-    notify () {
-      this.$parent.$emit('reflow', this)
-    },
-    getMeta () {
-      return {
-        vm: this,
-        node: this.$el,
-        order: this.order,
-        width: this.width,
-        height: this.height,
-        moveClass: this.moveClass
-      }
-    }
-  },
-  created () {
-    this.rect = {
-      top: 0,
-      left: 0,
-      width: 0,
-      height: 0
-    }
-    this.$watch(() => (
-      this.width,
-      this.height
-    ), this.notify)
-  },
-  mounted () {
-    this.$parent.$once('reflowed', () => {
-      this.isShow = true
-    })
-    this.notify()
-  },
-  destroyed () {
-    this.notify()
-  }
-}
-
-</script>
diff --git a/src/site/components/grid/waterfall/old/waterfall.vue b/src/site/components/grid/waterfall/old/waterfall.vue
deleted file mode 100644
index 84e3c98..0000000
--- a/src/site/components/grid/waterfall/old/waterfall.vue
+++ /dev/null
@@ -1,442 +0,0 @@
-<template>
-  <div class="vue-waterfall" :style="style">
-    <slot></slot>
-  </div>
-</template>
-
-<style>
-.vue-waterfall {
-  position: relative;
-  /*overflow: hidden; cause clientWidth = 0 in IE if height not bigger than 0 */
-}
-</style>
-
-<script>
-
-const MOVE_CLASS_PROP = '_wfMoveClass'
-
-export default {
-  props: {
-    autoResize: {
-      default: true
-    },
-    interval: {
-      default: 200,
-      validator: (val) => val >= 0
-    },
-    align: {
-      default: 'left',
-      validator: (val) => ~['left', 'right', 'center'].indexOf(val)
-    },
-    line: {
-      default: 'v',
-      validator: (val) => ~['v', 'h'].indexOf(val)
-    },
-    lineGap: {
-      required: true,
-      validator: (val) => val >= 0
-    },
-    minLineGap: {
-      validator: (val) => val >= 0
-    },
-    maxLineGap: {
-      validator: (val) => val >= 0
-    },
-    singleMaxWidth: {
-      validator: (val) => val >= 0
-    },
-    fixedHeight: {
-      default: false
-    },
-    grow: {
-      validator: (val) => val instanceof Array
-    },
-    watch: {
-      default: () => ({})
-    }
-  },
-  data: () => ({
-    style: {
-      height: '',
-      overflow: ''
-    },
-    token: null
-  }),
-  methods: {
-    reflowHandler,
-    autoResizeHandler,
-    reflow
-  },
-  created () {
-    this.virtualRects = []
-    this.$on('reflow', () => {
-      this.reflowHandler()
-    })
-    this.$watch(() => (
-      this.align,
-      this.line,
-      this.lineGap,
-      this.minLineGap,
-      this.maxLineGap,
-      this.singleMaxWidth,
-      this.fixedHeight,
-      this.watch
-    ), this.reflowHandler)
-    this.$watch('grow', this.reflowHandler)
-  },
-  mounted () {
-    this.$watch('autoResize', this.autoResizeHandler)
-    on(this.$el, getTransitionEndEvent(), tidyUpAnimations, true)
-    this.autoResizeHandler(this.autoResize)
-  },
-  beforeDestroy () {
-    this.autoResizeHandler(false)
-    off(this.$el, getTransitionEndEvent(), tidyUpAnimations, true)
-  }
-}
-
-function autoResizeHandler (autoResize) {
-  if (autoResize === false || !this.autoResize) {
-    off(window, 'resize', this.reflowHandler, false)
-  } else {
-    on(window, 'resize', this.reflowHandler, false)
-  }
-}
-
-function tidyUpAnimations (event) {
-  let node = event.target
-  let moveClass = node[MOVE_CLASS_PROP]
-  if (moveClass) {
-    removeClass(node, moveClass)
-  }
-}
-
-function reflowHandler () {
-  clearTimeout(this.token)
-  this.token = setTimeout(this.reflow, this.interval)
-}
-
-function reflow () {
-  if (!this.$el) { return }
-  let width = this.$el.clientWidth
-  let metas = this.$children.map((slot) => slot.getMeta())
-  metas.sort((a, b) => a.order - b.order)
-  this.virtualRects = metas.map(() => ({}))
-  calculate(this, metas, this.virtualRects)
-  setTimeout(() => {
-    if (isScrollBarVisibilityChange(this.$el, width)) {
-      calculate(this, metas, this.virtualRects)
-    }
-    this.style.overflow = 'hidden'
-    render(this.virtualRects, metas)
-    this.$emit('reflowed', this)
-  }, 0)
-}
-
-function isScrollBarVisibilityChange (el, lastClientWidth) {
-  return lastClientWidth !== el.clientWidth
-}
-
-function calculate (vm, metas, styles) {
-  let options = getOptions(vm)
-  let processor = vm.line === 'h' ? horizontalLineProcessor : verticalLineProcessor
-  processor.calculate(vm, options, metas, styles)
-}
-
-function getOptions (vm) {
-  const maxLineGap = vm.maxLineGap ? +vm.maxLineGap : vm.lineGap
-  return {
-    align: ~['left', 'right', 'center'].indexOf(vm.align) ? vm.align : 'left',
-    line: ~['v', 'h'].indexOf(vm.line) ? vm.line : 'v',
-    lineGap: +vm.lineGap,
-    minLineGap: vm.minLineGap ? +vm.minLineGap : vm.lineGap,
-    maxLineGap: maxLineGap,
-    singleMaxWidth: Math.max(vm.singleMaxWidth || 0, maxLineGap),
-    fixedHeight: !!vm.fixedHeight,
-    grow: vm.grow && vm.grow.map(val => +val)
-  }
-}
-
-var verticalLineProcessor = (() => {
-
-  function calculate (vm, options, metas, rects) {
-    let width = vm.$el.clientWidth
-    let grow = options.grow
-    let strategy = grow
-      ? getRowStrategyWithGrow(width, grow)
-      : getRowStrategy(width, options)
-    let tops = getArrayFillWith(0, strategy.count)
-    metas.forEach((meta, index) => {
-      let offset = tops.reduce((last, top, i) => top < tops[last] ? i : last, 0)
-      let width = strategy.width[offset % strategy.count]
-      let rect = rects[index]
-      rect.top = tops[offset]
-      rect.left = strategy.left + (offset ? sum(strategy.width.slice(0, offset)) : 0)
-      rect.width = width
-      rect.height = meta.height * (options.fixedHeight ? 1 : width / meta.width)
-      tops[offset] = tops[offset] + rect.height
-    })
-    vm.style.height = Math.max.apply(Math, tops) + 'px'
-  }
-
-  function getRowStrategy (width, options) {
-    let count = width / options.lineGap
-    let slotWidth
-    if (options.singleMaxWidth >= width) {
-      count = 1
-      slotWidth = Math.max(width, options.minLineGap)
-    } else {
-      let maxContentWidth = options.maxLineGap * ~~count
-      let minGreedyContentWidth = options.minLineGap * ~~(count + 1)
-      let canFit = maxContentWidth >= width
-      let canFitGreedy = minGreedyContentWidth <= width
-      if (canFit && canFitGreedy) {
-        count = Math.round(count)
-        slotWidth = width / count
-      } else if (canFit) {
-        count = ~~count
-        slotWidth = width / count
-      } else if (canFitGreedy) {
-        count = ~~(count + 1)
-        slotWidth = width / count
-      } else {
-        count = ~~count
-        slotWidth = options.maxLineGap
-      }
-      if (count === 1) {
-        slotWidth = Math.min(width, options.singleMaxWidth)
-        slotWidth = Math.max(slotWidth, options.minLineGap)
-      }
-    }
-    return {
-      width: getArrayFillWith(slotWidth, count),
-      count: count,
-      left: getLeft(width, slotWidth * count, options.align)
-    }
-  }
-
-  function getRowStrategyWithGrow (width, grow) {
-    let total = sum(grow)
-    return {
-      width: grow.map(val => width * val / total),
-      count: grow.length,
-      left: 0
-    }
-  }
-
-  return {
-    calculate
-  }
-
-})()
-
-var horizontalLineProcessor = (() => {
-
-  function calculate (vm, options, metas, rects) {
-    let width = vm.$el.clientWidth
-    let total = metas.length
-    let top = 0
-    let offset = 0
-    while (offset < total) {
-      let strategy = getRowStrategy(width, options, metas, offset)
-      for (let i = 0, left = 0, meta, rect; i < strategy.count; i++) {
-        meta = metas[offset + i]
-        rect = rects[offset + i]
-        rect.top = top
-        rect.left = strategy.left + left
-        rect.width = meta.width * strategy.height / meta.height
-        rect.height = strategy.height
-        left += rect.width
-      }
-      offset += strategy.count
-      top += strategy.height
-    }
-    vm.style.height = top + 'px'
-  }
-
-  function getRowStrategy (width, options, metas, offset) {
-    let greedyCount = getGreedyCount(width, options.lineGap, metas, offset)
-    let lazyCount = Math.max(greedyCount - 1, 1)
-    let greedySize = getContentSize(width, options, metas, offset, greedyCount)
-    let lazySize = getContentSize(width, options, metas, offset, lazyCount)
-    let finalSize = chooseFinalSize(lazySize, greedySize, width)
-    let height = finalSize.height
-    let fitContentWidth = finalSize.width
-    if (finalSize.count === 1) {
-      fitContentWidth = Math.min(options.singleMaxWidth, width)
-      height = metas[offset].height * fitContentWidth / metas[offset].width
-    }
-    return {
-      left: getLeft(width, fitContentWidth, options.align),
-      count: finalSize.count,
-      height: height
-    }
-  }
-
-  function getGreedyCount (rowWidth, rowHeight, metas, offset) {
-    let count = 0
-    for (let i = offset, width = 0; i < metas.length && width <= rowWidth; i++) {
-      width += metas[i].width * rowHeight / metas[i].height
-      count++
-    }
-    return count
-  }
-
-  function getContentSize (rowWidth, options, metas, offset, count) {
-    let originWidth = 0
-    for (let i = count - 1; i >= 0; i--) {
-      let meta = metas[offset + i]
-      originWidth += meta.width * options.lineGap / meta.height
-    }
-    let fitHeight = options.lineGap * rowWidth / originWidth
-    let canFit = (fitHeight <= options.maxLineGap && fitHeight >= options.minLineGap)
-    if (canFit) {
-      return {
-        cost: Math.abs(options.lineGap - fitHeight),
-        count: count,
-        width: rowWidth,
-        height: fitHeight
-      }
-    } else {
-      let height = originWidth > rowWidth ? options.minLineGap : options.maxLineGap
-      return {
-        cost: Infinity,
-        count: count,
-        width: originWidth * height / options.lineGap,
-        height: height
-      }
-    }
-  }
-
-  function chooseFinalSize (lazySize, greedySize, rowWidth) {
-    if (lazySize.cost === Infinity && greedySize.cost === Infinity) {
-      return greedySize.width < rowWidth ? greedySize : lazySize
-    } else {
-      return greedySize.cost >= lazySize.cost ? lazySize : greedySize
-    }
-  }
-
-  return {
-    calculate
-  }
-
-})()
-
-function getLeft (width, contentWidth, align) {
-  switch (align) {
-    case 'right':
-      return width - contentWidth
-    case 'center':
-      return (width - contentWidth) / 2
-    default:
-      return 0
-  }
-}
-
-function sum (arr) {
-  return arr.reduce((sum, val) => sum + val)
-}
-
-function render (rects, metas) {
-  let metasNeedToMoveByTransform = metas.filter((meta) => meta.moveClass)
-  let firstRects = getRects(metasNeedToMoveByTransform)
-  applyRects(rects, metas)
-  let lastRects = getRects(metasNeedToMoveByTransform)
-  metasNeedToMoveByTransform.forEach((meta, i) => {
-    meta.node[MOVE_CLASS_PROP] = meta.moveClass
-    setTransform(meta.node, firstRects[i], lastRects[i])
-  })
-  document.body.clientWidth // forced reflow
-  metasNeedToMoveByTransform.forEach((meta) => {
-    addClass(meta.node, meta.moveClass)
-    clearTransform(meta.node)
-  })
-}
-
-function getRects (metas) {
-  return metas.map((meta) => meta.vm.rect)
-}
-
-function applyRects (rects, metas) {
-  rects.forEach((rect, i) => {
-    let style = metas[i].node.style
-    metas[i].vm.rect = rect
-    for (let prop in rect) {
-      style[prop] = rect[prop] + 'px'
-    }
-  })
-}
-
-function setTransform (node, firstRect, lastRect) {
-  let dx = firstRect.left - lastRect.left
-  let dy = firstRect.top - lastRect.top
-  let sw = firstRect.width / lastRect.width
-  let sh = firstRect.height / lastRect.height
-  node.style.transform =
-  node.style.WebkitTransform = `translate(${dx}px,${dy}px) scale(${sw},${sh})`
-  node.style.transitionDuration = '0s'
-}
-
-function clearTransform (node) {
-  node.style.transform = node.style.WebkitTransform = ''
-  node.style.transitionDuration = ''
-}
-
-function getTransitionEndEvent () {
-  let isWebkitTrans =
-    window.ontransitionend === undefined &&
-    window.onwebkittransitionend !== undefined
-  let transitionEndEvent = isWebkitTrans
-    ? 'webkitTransitionEnd'
-    : 'transitionend'
-  return transitionEndEvent
-}
-
-/**
- * util
- */
-
-function getArrayFillWith (item, count) {
-  let getter = (typeof item === 'function') ? () => item() : () => item
-  let arr = []
-  for (let i = 0; i < count; i++) {
-    arr[i] = getter()
-  }
-  return arr
-}
-
-function addClass (elem, name) {
-  if (!hasClass(elem, name)) {
-    let cur = attr(elem, 'class').trim()
-    let res = (cur + ' ' + name).trim()
-    attr(elem, 'class', res)
-  }
-}
-
-function removeClass (elem, name) {
-  let reg = new RegExp('\\s*\\b' + name + '\\b\\s*', 'g')
-  let res = attr(elem, 'class').replace(reg, ' ').trim()
-  attr(elem, 'class', res)
-}
-
-function hasClass (elem, name) {
-  return (new RegExp('\\b' + name + '\\b')).test(attr(elem, 'class'))
-}
-
-function attr (elem, name, value) {
-  if (typeof value !== 'undefined') {
-    elem.setAttribute(name, value)
-  } else {
-    return elem.getAttribute(name) || ''
-  }
-}
-
-function on (elem, type, listener, useCapture = false) {
-  elem.addEventListener(type, listener, useCapture)
-}
-
-function off (elem, type, listener, useCapture = false) {
-  elem.removeEventListener(type, listener, useCapture)
-}
-
-</script>
-- 
cgit v1.2.3


From ce76a8ec7ba2084ab75fb901933b3d4d84505032 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sat, 2 Mar 2019 22:07:24 +0900
Subject: Be able to add a file to multiple albums

---
 src/site/components/grid/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 615d68f..e136f90 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -104,7 +104,7 @@
 					</b-tooltip>
 					<b-tooltip label="Albums"
 						position="is-top">
-						<a @click="manageAlbums(item)">
+						<a @click="$parent.openAlbumModal(item)">
 							<i class="icon-interface-window" />
 						</a>
 					</b-tooltip>
-- 
cgit v1.2.3


From ea3e503d13b7be477c064b02b9b2e5a9ef06c9a9 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Fri, 29 Mar 2019 00:35:58 +0900
Subject: Added middleware for pages and switched to $axios

---
 src/site/components/grid/Grid.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index e136f90..027bdf2 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -170,13 +170,13 @@ export default {
 				hasIcon: true,
 				onConfirm: async () => {
 					try {
-						const response = await this.axios.delete(`${this.config.baseURL}/file/${file.id}`);
+						const response = await this.$axios.$delete(`file/${file.id}`);
 						this.showWaterfall = false;
 						this.files.splice(index, 1);
 						this.$nextTick(() => {
 							this.showWaterfall = true;
 						});
-						return this.$toast.open(response.data.message);
+						return this.$toast.open(response.message);
 					} catch (error) {
 						return this.$onPromiseError(error);
 					}
-- 
cgit v1.2.3


From e9ce158e36051e8539edc18e912ea4b4931bd016 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Fri, 29 Mar 2019 03:28:16 +0000
Subject: Add flexsearch

---
 src/site/components/grid/Grid.vue | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 027bdf2..eaeb4f7 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -79,6 +79,13 @@
 	<Waterfall
 		:gutterWidth="10"
 		:gutterHeight="4">
+		<!-- Gotta implement search and pagination here -->
+		<input v-model="searchTerm"
+			type="text"
+			placeholder="Search..."
+			@input="search()"
+			@keyup.enter="search()">
+
 		<WaterfallItem v-for="(item, index) in files"
 			v-if="showWaterfall && item.thumb"
 			:key="index"
@@ -153,14 +160,29 @@ export default {
 		}
 	},
 	data() {
-		return { showWaterfall: true };
+		return {
+			showWaterfall: true,
+			searchTerm: null
+		};
 	},
 	computed: {
 		config() {
 			return this.$store.state.config;
 		}
 	},
+	mounted() {
+		this.$search.items(this.files);
+	},
 	methods: {
+		async search() {
+			const data = await this.$search.do(this.searchTerm, [
+				'name',
+				'original',
+				'type',
+				'albums:name'
+			]);
+			console.log('> Search result data', data);
+		},
 		deleteFile(file, index) {
 			this.$dialog.confirm({
 				title: 'Deleting file',
-- 
cgit v1.2.3


From 3bd8d119ba88e940932eca50be406d50d73040fb Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Wed, 24 Apr 2019 08:36:28 +0000
Subject: Refactor a bit since we globally catch API exceptions

---
 src/site/components/grid/Grid.vue | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index eaeb4f7..89ac125 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -191,17 +191,13 @@ export default {
 				type: 'is-danger',
 				hasIcon: true,
 				onConfirm: async () => {
-					try {
-						const response = await this.$axios.$delete(`file/${file.id}`);
-						this.showWaterfall = false;
-						this.files.splice(index, 1);
-						this.$nextTick(() => {
-							this.showWaterfall = true;
-						});
-						return this.$toast.open(response.message);
-					} catch (error) {
-						return this.$onPromiseError(error);
-					}
+					const response = await this.$axios.$delete(`file/${file.id}`);
+					this.showWaterfall = false;
+					this.files.splice(index, 1);
+					this.$nextTick(() => {
+						this.showWaterfall = true;
+					});
+					return this.$toast.open(response.message);
 				}
 			});
 		}
-- 
cgit v1.2.3


From 8e4f1b7838e3c43320f2e25e691c1808ae3c4089 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Mon, 30 Sep 2019 07:06:22 +0000
Subject: feature: album links

---
 src/site/components/grid/Grid.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 89ac125..07e5440 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -80,7 +80,8 @@
 		:gutterWidth="10"
 		:gutterHeight="4">
 		<!-- Gotta implement search and pagination here -->
-		<input v-model="searchTerm"
+		<input v-if="enableSearch"
+			v-model="searchTerm"
 			type="text"
 			placeholder="Search..."
 			@input="search()"
@@ -115,12 +116,14 @@
 							<i class="icon-interface-window" />
 						</a>
 					</b-tooltip>
+					<!--
 					<b-tooltip label="Tags"
 						position="is-top">
 						<a @click="manageTags(item)">
 							<i class="icon-ecommerce-tag-c" />
 						</a>
 					</b-tooltip>
+					-->
 					<b-tooltip label="Delete"
 						position="is-top">
 						<a @click="deleteFile(item, index)">
@@ -157,6 +160,10 @@ export default {
 		width: {
 			type: Number,
 			default: 150
+		},
+		enableSearch: {
+			type: Boolean,
+			default: true
 		}
 	},
 	data() {
-- 
cgit v1.2.3


From 391ee68e4a67aec640e25bc3506f9e31c77e58f5 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sat, 12 Oct 2019 15:47:25 +0900
Subject: chore: Upgrade buefy to newest version

---
 src/site/components/grid/Grid.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 07e5440..5f98b9d 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -191,7 +191,7 @@ export default {
 			console.log('> Search result data', data);
 		},
 		deleteFile(file, index) {
-			this.$dialog.confirm({
+			this.$buefy.dialog.confirm({
 				title: 'Deleting file',
 				message: 'Are you sure you want to <b>delete</b> this file?',
 				confirmText: 'Delete File',
@@ -204,7 +204,7 @@ export default {
 					this.$nextTick(() => {
 						this.showWaterfall = true;
 					});
-					return this.$toast.open(response.message);
+					return this.buefy.$toast.open(response.message);
 				}
 			});
 		}
-- 
cgit v1.2.3


From bca8fbcd839d2239e3f6f141f662fbbc74726835 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sat, 12 Oct 2019 21:14:19 +0900
Subject: refactor: removed useless code, cleaned up, fixed permissions

---
 src/site/components/grid/Grid.vue | 5 -----
 1 file changed, 5 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 5f98b9d..19acde9 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -172,11 +172,6 @@ export default {
 			searchTerm: null
 		};
 	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		}
-	},
 	mounted() {
 		this.$search.items(this.files);
 	},
-- 
cgit v1.2.3


From cba7bf8586f59a049f79aba586db201ac6f3530b Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sun, 13 Oct 2019 02:53:45 +0900
Subject: This commit adds a bunch of features for admins:

* banning IP
* see files from other users if you are admin
* be able to see details of an uploaded file and it's user
* improved display of thumbnails for non-image files
---
 src/site/components/grid/Grid.vue | 290 +++++++++++++++++++++++++++++---------
 1 file changed, 222 insertions(+), 68 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 19acde9..2e2f911 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -4,6 +4,30 @@
 		transition: all .25s cubic-bezier(.55,0,.1,1);
 		-webkit-transition: all .25s cubic-bezier(.55,0,.1,1);
 	}
+
+	div.toolbar {
+		padding: 1rem;
+
+		.block {
+			text-align: right;
+		}
+	}
+
+	span.extension {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		z-index: 0;
+		top: 0;
+		left: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 2rem;
+		pointer-events: none;
+		opacity: .75;
+	}
+
 	div.actions {
 		opacity: 0;
 		-webkit-transition: opacity 0.1s linear;
@@ -23,6 +47,11 @@
 
 		span {
 			padding: 3px;
+			&.more {
+				position: absolute;
+				top: 0;
+				right: 0;
+			}
 
 			&:nth-child(1), &:nth-child(2) {
 				align-items: flex-end;
@@ -38,7 +67,7 @@
 				justify-content: center;
 				align-items: center;
 				display: flex;
-				&:before {
+				&.btn:before {
 					content: '';
 					width: 30px;
 					height: 30px;
@@ -76,64 +105,174 @@
 </style>
 
 <template>
-	<Waterfall
-		:gutterWidth="10"
-		:gutterHeight="4">
-		<!-- Gotta implement search and pagination here -->
-		<input v-if="enableSearch"
-			v-model="searchTerm"
-			type="text"
-			placeholder="Search..."
-			@input="search()"
-			@keyup.enter="search()">
-
-		<WaterfallItem v-for="(item, index) in files"
-			v-if="showWaterfall && item.thumb"
-			:key="index"
-			:width="width"
-			move-class="item-move">
-			<template v-if="isPublic">
-				<a :href="`${item.url}`"
-					target="_blank">
-					<img :src="`${item.thumb}`">
-				</a>
-			</template>
-			<template v-else>
-				<img :src="`${item.thumb}`">
-				<div v-if="!isPublic"
-					:class="{ fixed }"
-					class="actions">
-					<b-tooltip label="Link"
-						position="is-top">
-						<a :href="`${item.url}`"
-							target="_blank">
-							<i class="icon-web-code" />
-						</a>
-					</b-tooltip>
-					<b-tooltip label="Albums"
-						position="is-top">
-						<a @click="$parent.openAlbumModal(item)">
-							<i class="icon-interface-window" />
-						</a>
-					</b-tooltip>
-					<!--
-					<b-tooltip label="Tags"
-						position="is-top">
-						<a @click="manageTags(item)">
-							<i class="icon-ecommerce-tag-c" />
-						</a>
-					</b-tooltip>
-					-->
-					<b-tooltip label="Delete"
-						position="is-top">
-						<a @click="deleteFile(item, index)">
-							<i class="icon-editorial-trash-a-l" />
-						</a>
-					</b-tooltip>
-				</div>
-			</template>
-		</WaterfallItem>
-	</Waterfall>
+	<div>
+		<div v-if="enableToolbar"
+			class="toolbar">
+			<div class="block">
+				<b-radio v-model="showList"
+					name="name"
+					:native-value="true">
+					List
+				</b-radio>
+				<b-radio v-model="showList"
+					name="name"
+					:native-value="false">
+					Grid
+				</b-radio>
+			</div>
+		</div>
+
+		<Waterfall v-if="!showList"
+			:gutterWidth="10"
+			:gutterHeight="4">
+			<!--
+				TODO: Implement search based on originalName, albumName and tags
+				<input v-if="enableSearch"
+					v-model="searchTerm"
+					type="text"
+					placeholder="Search..."
+					@input="search()"
+					@keyup.enter="search()">
+			 -->
+
+			<!-- TODO: Implement pagination -->
+
+			<WaterfallItem v-for="(item, index) in files"
+				v-if="showWaterfall"
+				:key="index"
+				:width="width"
+				move-class="item-move">
+				<template v-if="isPublic">
+					<a :href="`${item.url}`"
+						target="_blank">
+						<img :src="item.thumb ? item.thumb : blank">
+					</a>
+				</template>
+				<template v-else>
+					<img :src="item.thumb ? item.thumb : blank">
+					<span v-if="!item.thumb && item.name"
+						class="extension">{{ item.name.split('.').pop() }}</span>
+					<div v-if="!isPublic"
+						:class="{ fixed }"
+						class="actions">
+						<b-tooltip label="Link"
+							position="is-top">
+							<a :href="`${item.url}`"
+								target="_blank"
+								class="btn">
+								<i class="icon-web-code" />
+							</a>
+						</b-tooltip>
+						<b-tooltip label="Albums"
+							position="is-top">
+							<a class="btn"
+								@click="$parent.openAlbumModal(item)">
+								<i class="icon-interface-window" />
+							</a>
+						</b-tooltip>
+						<!--
+						<b-tooltip label="Tags"
+							position="is-top">
+							<a @click="manageTags(item)">
+								<i class="icon-ecommerce-tag-c" />
+							</a>
+						</b-tooltip>
+						-->
+						<b-tooltip label="Delete"
+							position="is-top">
+							<a class="btn"
+								@click="deleteFile(item, index)">
+								<i class="icon-editorial-trash-a-l" />
+							</a>
+						</b-tooltip>
+						<b-tooltip v-if="user && user.isAdmin"
+							label="More info"
+							position="is-top"
+							class="more">
+							<nuxt-link :to="`/dashboard/admin/file/${item.id}`">
+								<i class="icon-interface-more" />
+							</nuxt-link>
+						</b-tooltip>
+					</div>
+				</template>
+			</WaterfallItem>
+		</Waterfall>
+		<div v-else>
+			<b-table
+				:data="files || []"
+				:mobile-cards="true">
+				<template slot-scope="props">
+					<template v-if="!props.row.hideFromList">
+						<b-table-column field="url"
+							label="URL">
+							<a :href="props.row.url"
+								target="_blank">{{ props.row.url }}</a>
+						</b-table-column>
+
+						<b-table-column field="albums"
+							label="Albums"
+							centered>
+							<template v-for="(album, index) in props.row.albums">
+								<nuxt-link :key="index"
+									:to="`/dashboard/albums/${album.id}`">
+									{{ album.name }}
+								</nuxt-link>
+								<template v-if="index < props.row.albums.length - 1">, </template>
+							</template>
+
+							{{ props.row.username }}
+						</b-table-column>
+
+						<b-table-column field="uploaded"
+							label="Uploaded"
+							centered>
+							<span><timeago :since="props.row.createdAt" /></span>
+						</b-table-column>
+
+						<b-table-column field="purge"
+							centered>
+							<b-tooltip label="Albums"
+								position="is-top">
+								<a class="btn"
+									@click="$parent.openAlbumModal(props.row)">
+									<i class="icon-interface-window" />
+								</a>
+							</b-tooltip>
+							<b-tooltip label="Delete"
+								position="is-top"
+								class="is-danger">
+								<a class="is-danger"
+									@click="deleteFile(props.row)">
+									<i class="icon-editorial-trash-a-l" />
+								</a>
+							</b-tooltip>
+							<b-tooltip v-if="user && user.isAdmin"
+								label="More info"
+								position="is-top"
+								class="more">
+								<nuxt-link :to="`/dashboard/admin/file/${props.row.id}`">
+									<i class="icon-interface-more" />
+								</nuxt-link>
+							</b-tooltip>
+						</b-table-column>
+					</template>
+				</template>
+				<template slot="empty">
+					<div class="has-text-centered">
+						<i class="icon-misc-mood-sad" />
+					</div>
+					<div class="has-text-centered">
+						Nothing here
+					</div>
+				</template>
+				<template slot="footer">
+					<div class="has-text-right">
+						{{ files.length }} files
+					</div>
+				</template>
+			</b-table>
+		</div>
+	</div>
 </template>
 <script>
 import Waterfall from './waterfall/Waterfall.vue';
@@ -164,16 +303,26 @@ export default {
 		enableSearch: {
 			type: Boolean,
 			default: true
+		},
+		enableToolbar: {
+			type: Boolean,
+			default: true
 		}
 	},
 	data() {
 		return {
 			showWaterfall: true,
-			searchTerm: null
+			searchTerm: null,
+			showList: false
 		};
 	},
-	mounted() {
-		this.$search.items(this.files);
+	computed: {
+		user() {
+			return this.$store.state.user;
+		},
+		blank() {
+			return require('@/assets/images/blank.png');
+		}
 	},
 	methods: {
 		async search() {
@@ -194,12 +343,17 @@ export default {
 				hasIcon: true,
 				onConfirm: async () => {
 					const response = await this.$axios.$delete(`file/${file.id}`);
-					this.showWaterfall = false;
-					this.files.splice(index, 1);
-					this.$nextTick(() => {
-						this.showWaterfall = true;
-					});
-					return this.buefy.$toast.open(response.message);
+					if (this.showList) {
+						file.hideFromList = true;
+						this.$forceUpdate();
+					} else {
+						this.showWaterfall = false;
+						this.files.splice(index, 1);
+						this.$nextTick(() => {
+							this.showWaterfall = true;
+						});
+					}
+					return this.$buefy.toast.open(response.message);
 				}
 			});
 		}
-- 
cgit v1.2.3


From a957713e81eddf280b547de523b579bc16acde32 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Fri, 10 Apr 2020 23:40:22 +0900
Subject: chore: update deps

---
 src/site/components/grid/Grid.vue | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 2e2f911..ca3d0f9 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -26,6 +26,7 @@
 		font-size: 2rem;
 		pointer-events: none;
 		opacity: .75;
+		max-width: 150px;
 	}
 
 	div.actions {
@@ -146,6 +147,8 @@
 					<a :href="`${item.url}`"
 						target="_blank">
 						<img :src="item.thumb ? item.thumb : blank">
+						<span v-if="!item.thumb && item.name"
+							class="extension">{{ item.name.split('.').pop() }}</span>
 					</a>
 				</template>
 				<template v-else>
-- 
cgit v1.2.3


From 124ff68f06bcfee7494e4b8117d87dd206c6ecbe Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sun, 10 May 2020 21:22:48 +0900
Subject: Feat: implement lazy loading for waterfall view

---
 src/site/components/grid/Grid.vue | 441 ++++++++++++++++++++++----------------
 1 file changed, 258 insertions(+), 183 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index ca3d0f9..3b65011 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -1,110 +1,3 @@
-<style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	.item-move {
-		transition: all .25s cubic-bezier(.55,0,.1,1);
-		-webkit-transition: all .25s cubic-bezier(.55,0,.1,1);
-	}
-
-	div.toolbar {
-		padding: 1rem;
-
-		.block {
-			text-align: right;
-		}
-	}
-
-	span.extension {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		z-index: 0;
-		top: 0;
-		left: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 2rem;
-		pointer-events: none;
-		opacity: .75;
-		max-width: 150px;
-	}
-
-	div.actions {
-		opacity: 0;
-		-webkit-transition: opacity 0.1s linear;
-		-moz-transition: opacity 0.1s linear;
-		-ms-transition: opacity 0.1s linear;
-		-o-transition: opacity 0.1s linear;
-		transition: opacity 0.1s linear;
-		position: absolute;
-		top: 0px;
-		left: 0px;
-		width: 100%;
-		height: calc(100% - 6px);
-		background: rgba(0, 0, 0, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		span {
-			padding: 3px;
-			&.more {
-				position: absolute;
-				top: 0;
-				right: 0;
-			}
-
-			&:nth-child(1), &:nth-child(2) {
-				align-items: flex-end;
-			}
-
-			&:nth-child(1), &:nth-child(3) {
-				justify-content: flex-end;
-			}
-			a {
-				width: 30px;
-				height: 30px;
-				color: white;
-				justify-content: center;
-				align-items: center;
-				display: flex;
-				&.btn:before {
-					content: '';
-					width: 30px;
-					height: 30px;
-					border: 1px solid white;
-					border-radius: 50%;
-					position: absolute;
-				}
-			}
-		}
-
-		&.fixed {
-			position: relative;
-			opacity: 1;
-			background: none;
-
-			a {
-				width: auto;
-				height: auto;
-				color: $defaultTextColor;
-				&:before {
-					display: none;
-				}
-			}
-
-		}
-	}
-</style>
-
-<style lang="scss">
-	.waterfall-item:hover {
-		div.actions {
-			opacity: 1
-		}
-	}
-</style>
-
 <template>
 	<div>
 		<div v-if="enableToolbar"
@@ -123,86 +16,89 @@
 			</div>
 		</div>
 
-		<Waterfall v-if="!showList"
-			:gutterWidth="10"
-			:gutterHeight="4">
-			<!--
-				TODO: Implement search based on originalName, albumName and tags
-				<input v-if="enableSearch"
-					v-model="searchTerm"
-					type="text"
-					placeholder="Search..."
-					@input="search()"
-					@keyup.enter="search()">
-			 -->
+		<template v-if="!showList">
+			<Waterfall :gutterWidth="10"
+				:gutterHeight="4">
+				<!--
+					TODO: Implement search based on originalName, albumName and tags
+					<input v-if="enableSearch"
+						v-model="searchTerm"
+						type="text"
+						placeholder="Search..."
+						@input="search()"
+						@keyup.enter="search()">
+				-->
 
-			<!-- TODO: Implement pagination -->
+				<!-- TODO: Implement pagination -->
 
-			<WaterfallItem v-for="(item, index) in files"
-				v-if="showWaterfall"
-				:key="index"
-				:width="width"
-				move-class="item-move">
-				<template v-if="isPublic">
-					<a :href="`${item.url}`"
-						target="_blank">
+				<WaterfallItem v-for="(item, index) in gridFiles"
+					v-if="showWaterfall"
+					:key="index"
+					:width="width"
+					move-class="item-move">
+					<template v-if="isPublic">
+						<a :href="`${item.url}`"
+							target="_blank">
+							<img :src="item.thumb ? item.thumb : blank">
+							<span v-if="!item.thumb && item.name"
+								class="extension">{{ item.name.split('.').pop() }}</span>
+						</a>
+					</template>
+					<template v-else>
 						<img :src="item.thumb ? item.thumb : blank">
 						<span v-if="!item.thumb && item.name"
 							class="extension">{{ item.name.split('.').pop() }}</span>
-					</a>
-				</template>
-				<template v-else>
-					<img :src="item.thumb ? item.thumb : blank">
-					<span v-if="!item.thumb && item.name"
-						class="extension">{{ item.name.split('.').pop() }}</span>
-					<div v-if="!isPublic"
-						:class="{ fixed }"
-						class="actions">
-						<b-tooltip label="Link"
-							position="is-top">
-							<a :href="`${item.url}`"
-								target="_blank"
-								class="btn">
-								<i class="icon-web-code" />
-							</a>
-						</b-tooltip>
-						<b-tooltip label="Albums"
-							position="is-top">
-							<a class="btn"
-								@click="$parent.openAlbumModal(item)">
-								<i class="icon-interface-window" />
-							</a>
-						</b-tooltip>
-						<!--
-						<b-tooltip label="Tags"
-							position="is-top">
-							<a @click="manageTags(item)">
-								<i class="icon-ecommerce-tag-c" />
-							</a>
-						</b-tooltip>
-						-->
-						<b-tooltip label="Delete"
-							position="is-top">
-							<a class="btn"
-								@click="deleteFile(item, index)">
-								<i class="icon-editorial-trash-a-l" />
-							</a>
-						</b-tooltip>
-						<b-tooltip v-if="user && user.isAdmin"
-							label="More info"
-							position="is-top"
-							class="more">
-							<nuxt-link :to="`/dashboard/admin/file/${item.id}`">
-								<i class="icon-interface-more" />
-							</nuxt-link>
-						</b-tooltip>
-					</div>
-				</template>
-			</WaterfallItem>
-		</Waterfall>
+						<div v-if="!isPublic"
+							:class="{ fixed }"
+							class="actions">
+							<b-tooltip label="Link"
+								position="is-top">
+								<a :href="`${item.url}`"
+									target="_blank"
+									class="btn">
+									<i class="icon-web-code" />
+								</a>
+							</b-tooltip>
+							<b-tooltip label="Albums"
+								position="is-top">
+								<a class="btn"
+									@click="openAlbumModal(item)">
+									<i class="icon-interface-window" />
+								</a>
+							</b-tooltip>
+							<!--
+							<b-tooltip label="Tags"
+								position="is-top">
+								<a @click="manageTags(item)">
+									<i class="icon-ecommerce-tag-c" />
+								</a>
+							</b-tooltip>
+							-->
+							<b-tooltip label="Delete"
+								position="is-top">
+								<a class="btn"
+									@click="deleteFile(item, index)">
+									<i class="icon-editorial-trash-a-l" />
+								</a>
+							</b-tooltip>
+							<b-tooltip v-if="user && user.isAdmin"
+								label="More info"
+								position="is-top"
+								class="more">
+								<nuxt-link :to="`/dashboard/admin/file/${item.id}`">
+									<i class="icon-interface-more" />
+								</nuxt-link>
+							</b-tooltip>
+						</div>
+					</template>
+				</WaterfallItem>
+			</Waterfall>
+			<button class="button is-primary"
+				@click="loadMoreFilesWaterfall">Load more</button>
+		</template>
 		<div v-else>
 			<b-table
-				:data="files || []"
+				:data="gridFiles || []"
 				:mobile-cards="true">
 				<template slot-scope="props">
 					<template v-if="!props.row.hideFromList">
@@ -237,7 +133,7 @@
 							<b-tooltip label="Albums"
 								position="is-top">
 								<a class="btn"
-									@click="$parent.openAlbumModal(props.row)">
+									@click="openAlbumModal(props.row)">
 									<i class="icon-interface-window" />
 								</a>
 							</b-tooltip>
@@ -275,6 +171,28 @@
 				</template>
 			</b-table>
 		</div>
+		<b-modal :active.sync="isAlbumsModalActive"
+			:width="640"
+			scroll="keep">
+			<div class="card albumsModal">
+				<div class="card-content">
+					<div class="content">
+						<h3 class="subtitle">Select the albums this file should be a part of</h3>
+						<hr>
+						<div class="albums-container">
+							<div v-for="(album, index) in albums"
+								:key="index"
+								class="album">
+								<div class="field">
+									<b-checkbox :value="isAlbumSelected(album.id)"
+										@input="albumCheckboxClicked($event, album.id)">{{ album.name }}</b-checkbox>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</b-modal>
 	</div>
 </template>
 <script>
@@ -289,7 +207,7 @@ export default {
 	props: {
 		files: {
 			type: Array,
-			default: null
+			default: () => []
 		},
 		fixed: {
 			type: Boolean,
@@ -316,7 +234,13 @@ export default {
 		return {
 			showWaterfall: true,
 			searchTerm: null,
-			showList: false
+			showList: false,
+			albums: [],
+			isAlbumsModalActive: false,
+			showingModalForFile: null,
+			filesOffsetWaterfall: 0,
+			filesOffsetEndWaterfall: 50,
+			filesPerPageWaterfall: 50
 		};
 	},
 	computed: {
@@ -325,9 +249,15 @@ export default {
 		},
 		blank() {
 			return require('@/assets/images/blank.png');
+		},
+		gridFiles() {
+			return this.files.slice(this.filesOffsetWaterfall, this.filesOffsetEndWaterfall);
 		}
 	},
 	methods: {
+		loadMoreFilesWaterfall() {
+			this.filesOffsetEndWaterfall = this.filesOffsetEndWaterfall + this.filesPerPageWaterfall;
+		},
 		async search() {
 			const data = await this.$search.do(this.searchTerm, [
 				'name',
@@ -359,7 +289,152 @@ export default {
 					return this.$buefy.toast.open(response.message);
 				}
 			});
+		},
+		isAlbumSelected(id) {
+			if (!this.showingModalForFile) return;
+			const found = this.showingModalForFile.albums.find(el => el.id === id);
+			return found ? found.id ? true : false : false;
+		},
+		async openAlbumModal(file) {
+			this.showingModalForFile = file;
+			this.showingModalForFile.albums = [];
+			this.isAlbumsModalActive = true;
+
+			const response = await this.$axios.$get(`file/${file.id}/albums`);
+			this.showingModalForFile.albums = response.albums;
+
+			this.getAlbums();
+		},
+		async albumCheckboxClicked(value, id) {
+			const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
+				albumId: id,
+				fileId: this.showingModalForFile.id
+			});
+			this.$buefy.toast.open(response.message);
+
+			// Not the prettiest solution to refetch on each click but it'll do for now
+			this.$parent.getFiles();
+		},
+		async getAlbums() {
+			const response = await this.$axios.$get(`albums/dropdown`);
+			this.albums = response.albums;
+			this.$forceUpdate();
 		}
 	}
 };
 </script>
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+	.item-move {
+		transition: all .25s cubic-bezier(.55,0,.1,1);
+	}
+
+	div.toolbar {
+		padding: 1rem;
+
+		.block {
+			text-align: right;
+		}
+	}
+
+	span.extension {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		z-index: 0;
+		top: 0;
+		left: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 2rem;
+		pointer-events: none;
+		opacity: .75;
+		max-width: 150px;
+	}
+
+	div.actions {
+		opacity: 0;
+		-webkit-transition: opacity 0.1s linear;
+		-moz-transition: opacity 0.1s linear;
+		-ms-transition: opacity 0.1s linear;
+		-o-transition: opacity 0.1s linear;
+		transition: opacity 0.1s linear;
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		width: 100%;
+		height: calc(100% - 6px);
+		background: rgba(0, 0, 0, 0.5);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		span {
+			padding: 3px;
+			&.more {
+				position: absolute;
+				top: 0;
+				right: 0;
+			}
+
+			&:nth-child(1), &:nth-child(2) {
+				align-items: flex-end;
+			}
+
+			&:nth-child(1), &:nth-child(3) {
+				justify-content: flex-end;
+			}
+			a {
+				width: 30px;
+				height: 30px;
+				color: white;
+				justify-content: center;
+				align-items: center;
+				display: flex;
+				&.btn:before {
+					content: '';
+					width: 30px;
+					height: 30px;
+					border: 1px solid white;
+					border-radius: 50%;
+					position: absolute;
+				}
+			}
+		}
+
+		&.fixed {
+			position: relative;
+			opacity: 1;
+			background: none;
+
+			a {
+				width: auto;
+				height: auto;
+				color: $defaultTextColor;
+				&:before {
+					display: none;
+				}
+			}
+
+		}
+	}
+
+	.albums-container {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		.album {
+			flex-basis: 33%;
+			text-align: left;
+		}
+	}
+</style>
+
+<style lang="scss">
+	.waterfall-item:hover {
+		div.actions {
+			opacity: 1
+		}
+	}
+</style>
-- 
cgit v1.2.3


From 04319acf2056f44615fb32f64cc65bc759a15e23 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Thu, 25 Jun 2020 02:14:11 +0900
Subject: Only display `Show more` button when there's more to show

---
 src/site/components/grid/Grid.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 3b65011..da9b26c 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -93,7 +93,9 @@
 					</template>
 				</WaterfallItem>
 			</Waterfall>
-			<button class="button is-primary"
+			<button
+				v-if="moreFiles"
+				class="button is-primary"
 				@click="loadMoreFilesWaterfall">Load more</button>
 		</template>
 		<div v-else>
@@ -252,6 +254,9 @@ export default {
 		},
 		gridFiles() {
 			return this.files.slice(this.filesOffsetWaterfall, this.filesOffsetEndWaterfall);
+		},
+		moreFiles() {
+			return this.files.length > this.filesOffsetEndWaterfall;
 		}
 	},
 	methods: {
-- 
cgit v1.2.3


From ac037c773ef5f15372c6999445a2efe00034c0c0 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 20:02:47 +0300
Subject: fix: Remove hero and hero body and use sections and containers
 instead

Hero is meant to be used as a full-width banner to showcare or present somethign, not to contain the entire content of the webpage
---
 src/site/components/grid/Grid.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index da9b26c..4c4bdf4 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -167,7 +167,7 @@
 					</div>
 				</template>
 				<template slot="footer">
-					<div class="has-text-right">
+					<div class="has-text-right has-text-default">
 						{{ files.length }} files
 					</div>
 				</template>
@@ -197,6 +197,7 @@
 		</b-modal>
 	</div>
 </template>
+
 <script>
 import Waterfall from './waterfall/Waterfall.vue';
 import WaterfallItem from './waterfall/WaterfallItem.vue';
@@ -328,6 +329,7 @@ export default {
 	}
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	.item-move {
-- 
cgit v1.2.3


From 520062508ccad88d49229e603fc4d2c0c0a118d3 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 22:18:42 +0300
Subject: feat: backend pagination

serverLoad++;
userRamUsage--;
---
 src/site/components/grid/Grid.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 4c4bdf4..15ff5fd 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -17,7 +17,8 @@
 		</div>
 
 		<template v-if="!showList">
-			<Waterfall :gutterWidth="10"
+			<Waterfall v-if="showWaterfall"
+				:gutterWidth="10"
 				:gutterHeight="4">
 				<!--
 					TODO: Implement search based on originalName, albumName and tags
@@ -32,7 +33,6 @@
 				<!-- TODO: Implement pagination -->
 
 				<WaterfallItem v-for="(item, index) in gridFiles"
-					v-if="showWaterfall"
 					:key="index"
 					:width="width"
 					move-class="item-move">
-- 
cgit v1.2.3


From 8416dc81a34b80de0ac9a4d0be923466bcffdec4 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 1 Jul 2020 20:15:08 +0300
Subject: fix: use file id instead of index and remove load more button

---
 src/site/components/grid/Grid.vue | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 15ff5fd..b6615be 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -33,7 +33,7 @@
 				<!-- TODO: Implement pagination -->
 
 				<WaterfallItem v-for="(item, index) in gridFiles"
-					:key="index"
+					:key="item.id"
 					:width="width"
 					move-class="item-move">
 					<template v-if="isPublic">
@@ -93,10 +93,6 @@
 					</template>
 				</WaterfallItem>
 			</Waterfall>
-			<button
-				v-if="moreFiles"
-				class="button is-primary"
-				@click="loadMoreFilesWaterfall">Load more</button>
 		</template>
 		<div v-else>
 			<b-table
@@ -254,16 +250,10 @@ export default {
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
-			return this.files.slice(this.filesOffsetWaterfall, this.filesOffsetEndWaterfall);
+			return this.files;
 		},
-		moreFiles() {
-			return this.files.length > this.filesOffsetEndWaterfall;
-		}
 	},
 	methods: {
-		loadMoreFilesWaterfall() {
-			this.filesOffsetEndWaterfall = this.filesOffsetEndWaterfall + this.filesPerPageWaterfall;
-		},
 		async search() {
 			const data = await this.$search.do(this.searchTerm, [
 				'name',
-- 
cgit v1.2.3


From 6688587eb6bdf118687c630378d40e36a3700a52 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 2 Jul 2020 02:48:21 +0300
Subject: feat: move toolbar into a level and add slot for pagination on grid

---
 src/site/components/grid/Grid.vue | 57 ++++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 27 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index b6615be..279472c 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -1,37 +1,40 @@
 <template>
 	<div>
-		<div v-if="enableToolbar"
-			class="toolbar">
-			<div class="block">
-				<b-radio v-model="showList"
-					name="name"
-					:native-value="true">
-					List
-				</b-radio>
-				<b-radio v-model="showList"
-					name="name"
-					:native-value="false">
-					Grid
-				</b-radio>
+		<nav class="level">
+			<div class="level-left">
+				<div class="level-item">
+					<slot name="pagination" />
+				</div>
 			</div>
-		</div>
+			<div v-if="enableToolbar"
+				class="level-right toolbar">
+				<div class="level-item">
+					<div class="block">
+						<b-radio v-model="showList"
+							name="name"
+							:native-value="true">
+							List
+						</b-radio>
+						<b-radio v-model="showList"
+							name="name"
+							:native-value="false">
+							Grid
+						</b-radio>
+					</div>
+				</div>
+			</div>
+		</nav>
 
 		<template v-if="!showList">
 			<Waterfall v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4">
-				<!--
-					TODO: Implement search based on originalName, albumName and tags
-					<input v-if="enableSearch"
-						v-model="searchTerm"
-						type="text"
-						placeholder="Search..."
-						@input="search()"
-						@keyup.enter="search()">
-				-->
-
-				<!-- TODO: Implement pagination -->
-
+				<input v-if="enableSearch"
+					v-model="searchTerm"
+					type="text"
+					placeholder="Search..."
+					@input="search()"
+					@keyup.enter="search()">	
 				<WaterfallItem v-for="(item, index) in gridFiles"
 					:key="item.id"
 					:width="width"
@@ -289,7 +292,7 @@ export default {
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return;
 			const found = this.showingModalForFile.albums.find(el => el.id === id);
-			return found ? found.id ? true : false : false;
+			return found && found.id ? true : false;
 		},
 		async openAlbumModal(file) {
 			this.showingModalForFile = file;
-- 
cgit v1.2.3


From c2dbbe6396540ee9d76991a00f5028b49d221d0c Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 2 Jul 2020 23:42:02 +0300
Subject: feat: refactor account to use vuex, fix small presentational
 components

---
 src/site/components/grid/Grid.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 279472c..a06eabf 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -198,6 +198,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 import Waterfall from './waterfall/Waterfall.vue';
 import WaterfallItem from './waterfall/WaterfallItem.vue';
 
@@ -246,9 +248,9 @@ export default {
 		};
 	},
 	computed: {
-		user() {
-			return this.$store.state.user;
-		},
+		...mapState({
+			user: state => state.auth.user
+		}),
 		blank() {
 			return require('@/assets/images/blank.png');
 		},
-- 
cgit v1.2.3


From 92be4504ccb8f6d918013e5c33870858cd22376a Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sat, 4 Jul 2020 03:26:35 +0300
Subject: feat: refactor most of the album components to use store for
 presentation and actions

---
 src/site/components/grid/Grid.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index a06eabf..956dd28 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -29,12 +29,6 @@
 			<Waterfall v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4">
-				<input v-if="enableSearch"
-					v-model="searchTerm"
-					type="text"
-					placeholder="Search..."
-					@input="search()"
-					@keyup.enter="search()">	
 				<WaterfallItem v-for="(item, index) in gridFiles"
 					:key="item.id"
 					:width="width"
@@ -167,7 +161,7 @@
 				</template>
 				<template slot="footer">
 					<div class="has-text-right has-text-default">
-						{{ files.length }} files
+						Showing {{ files.length }} files ({{ total }} total)
 					</div>
 				</template>
 			</b-table>
@@ -213,6 +207,10 @@ export default {
 			type: Array,
 			default: () => []
 		},
+		total: {
+			type: Number,
+			default: 0
+		},
 		fixed: {
 			type: Boolean,
 			default: false
-- 
cgit v1.2.3


From 1e1f3fbb27976a34f53a4e8d250da34dad4e6c20 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sat, 4 Jul 2020 23:18:51 +0300
Subject: feat: experimental videos in grid

---
 src/site/components/grid/Grid.vue                  | 32 +++++++++++++------
 src/site/components/grid/waterfall/Waterfall.vue   |  2 +-
 .../components/grid/waterfall/WaterfallItem.vue    | 37 +++++++++++++++++-----
 3 files changed, 52 insertions(+), 19 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 956dd28..0fff307 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -32,6 +32,7 @@
 				<WaterfallItem v-for="(item, index) in gridFiles"
 					:key="item.id"
 					:width="width"
+					:video="!!item.preview"
 					move-class="item-move">
 					<template v-if="isPublic">
 						<a :href="`${item.url}`"
@@ -42,7 +43,11 @@
 						</a>
 					</template>
 					<template v-else>
-						<img :src="item.thumb ? item.thumb : blank">
+						<img v-if="!item.preview" :class="{'hidden': item.preview}" 
+							:src="item.thumb ? item.thumb : blank">
+						<video v-if="item.preview" autoplay loop>
+  							<source :src="item.preview" type="video/mp4" />
+						</video>
 						<span v-if="!item.thumb && item.name"
 							class="extension">{{ item.name.split('.').pop() }}</span>
 						<div v-if="!isPublic"
@@ -56,21 +61,20 @@
 									<i class="icon-web-code" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Albums"
+							<b-tooltip label="Tags"
 								position="is-top">
 								<a class="btn"
-									@click="openAlbumModal(item)">
-									<i class="icon-interface-window" />
+									@click="manageTags(item)">
+									<i class="icon-ecommerce-tag-c" />
 								</a>
 							</b-tooltip>
-							<!--
-							<b-tooltip label="Tags"
+							<b-tooltip label="Albums"
 								position="is-top">
-								<a @click="manageTags(item)">
-									<i class="icon-ecommerce-tag-c" />
+								<a class="btn"
+									@click="openAlbumModal(item)">
+									<i class="icon-interface-window" />
 								</a>
-							</b-tooltip>
-							-->
+							</b-tooltip>							
 							<b-tooltip label="Delete"
 								position="is-top">
 								<a class="btn"
@@ -318,6 +322,9 @@ export default {
 			const response = await this.$axios.$get(`albums/dropdown`);
 			this.albums = response.albums;
 			this.$forceUpdate();
+		},
+		mouseOverTest() {
+			console.log('aaaaaa');
 		}
 	}
 };
@@ -385,6 +392,7 @@ export default {
 			&:nth-child(1), &:nth-child(3) {
 				justify-content: flex-end;
 			}
+
 			a {
 				width: 30px;
 				height: 30px;
@@ -429,6 +437,10 @@ export default {
 			text-align: left;
 		}
 	}
+
+	img.hidden {
+		display: none;
+	}
 </style>
 
 <style lang="scss">
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 8631ea5..af1bd72 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -170,7 +170,7 @@ export default {
 					return;
 				}
 				child.el.style.top = `${offsetArr[position]}px`;
-				offsetArr[position] += (child.height + this.gutterHeight);
+				offsetArr[position] += child.height + this.gutterHeight;
 				this.$el.style.height = `${Math.max.apply(Math, offsetArr)}px`;
 			});
 			this.$emit('rendered', this);
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index a02ea1f..7c4d814 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -1,13 +1,15 @@
-<style>
+<style scoped>
 	.waterfall-item {
 		position: absolute;
 	}
 </style>
+
 <template>
 	<div class="waterfall-item">
 		<slot />
 	</div>
 </template>
+
 <script>
 import imagesLoaded from 'imagesloaded';
 export default {
@@ -20,6 +22,10 @@ export default {
 		width: {
 			type: Number,
 			default: 150
+		},
+		video: {
+			type: Boolean,
+			default: false
 		}
 	},
 	data() {
@@ -35,13 +41,28 @@ export default {
 		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;
-		});
+		if (this.video) {
+			const videoEl = this.$slots.default.find(e => e.tag?.toLowerCase() === 'video');
+			const el = videoEl.elm;
+			console.log(videoEl);
+			console.log(el);
+			el.onloadeddata = () => {
+				console.log('loaded');
+				this.$el.style.left = '-9999px';
+				this.$el.style.top = '-9999px';
+				this.$el.style.display = 'block';
+				this.height = el.offsetHeight + 5;
+				this.itemWidth = el.offsetWidth;
+			}
+		} else {
+			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() {
-- 
cgit v1.2.3


From 766e74cc51138b32482f65f0f2647eb9d943103e Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sun, 5 Jul 2020 04:18:08 +0300
Subject: feat: add video preview on hover to dashboard and apply new linter
 rules to some of the files

---
 src/site/components/grid/Grid.vue                  | 435 +++++++++++----------
 src/site/components/grid/waterfall/Waterfall.vue   |  56 +--
 .../components/grid/waterfall/WaterfallItem.vue    |  29 +-
 3 files changed, 269 insertions(+), 251 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 0fff307..d4fe067 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -6,18 +6,13 @@
 					<slot name="pagination" />
 				</div>
 			</div>
-			<div v-if="enableToolbar"
-				class="level-right toolbar">
+			<div v-if="enableToolbar" class="level-right toolbar">
 				<div class="level-item">
 					<div class="block">
-						<b-radio v-model="showList"
-							name="name"
-							:native-value="true">
+						<b-radio v-model="showList" name="name" :native-value="true">
 							List
 						</b-radio>
-						<b-radio v-model="showList"
-							name="name"
-							:native-value="false">
+						<b-radio v-model="showList" name="name" :native-value="false">
 							Grid
 						</b-radio>
 					</div>
@@ -26,66 +21,71 @@
 		</nav>
 
 		<template v-if="!showList">
-			<Waterfall v-if="showWaterfall"
+			<Waterfall
+				v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4">
-				<WaterfallItem v-for="(item, index) in gridFiles"
+				<WaterfallItem
+					v-for="(item, index) in gridFiles"
 					:key="item.id"
 					:width="width"
-					:video="!!item.preview"
 					move-class="item-move">
 					<template v-if="isPublic">
-						<a :href="`${item.url}`"
-							target="_blank">
+						<a
+							:href="`${item.url}`"
+							class="preview-container"
+							target="_blank"
+							@mouseenter.self.stop.prevent="item.preview && mouseOver(item.id)"
+							@mouseleave.self.stop.prevent="item.preview && mouseOut(item.id)">
+
 							<img :src="item.thumb ? item.thumb : blank">
-							<span v-if="!item.thumb && item.name"
-								class="extension">{{ item.name.split('.').pop() }}</span>
+							<div v-if="item.preview && isHovered(item.id)" class="preview">
+								<video ref="video" class="preview" autoplay loop muted>
+									<source :src="item.preview" type="video/mp4">
+								</video>
+							</div>
+
+							<span v-if="!item.thumb && item.name" class="extension">{{
+								item.name.split('.').pop()
+							}}</span>
 						</a>
 					</template>
 					<template v-else>
-						<img v-if="!item.preview" :class="{'hidden': item.preview}" 
-							:src="item.thumb ? item.thumb : blank">
-						<video v-if="item.preview" autoplay loop>
-  							<source :src="item.preview" type="video/mp4" />
-						</video>
-						<span v-if="!item.thumb && item.name"
-							class="extension">{{ item.name.split('.').pop() }}</span>
-						<div v-if="!isPublic"
+						<img :src="item.thumb ? item.thumb : blank">
+						<div v-if="item.preview && isHovered(item.id)" class="preview">
+							<video ref="video" class="preview" autoplay loop muted>
+								<source :src="item.preview" type="video/mp4">
+							</video>
+						</div>
+
+						<span v-if="!item.thumb && item.name" class="extension">{{ item.name.split('.').pop() }}</span>
+						<div
+							v-if="!isPublic"
 							:class="{ fixed }"
-							class="actions">
-							<b-tooltip label="Link"
-								position="is-top">
-								<a :href="`${item.url}`"
-									target="_blank"
-									class="btn">
+							class="actions"
+							@mouseenter.self.stop.prevent="item.preview && mouseOver(item.id)"
+							@mouseleave.self.stop.prevent="item.preview && mouseOut(item.id)">
+							<b-tooltip label="Link" position="is-top">
+								<a :href="`${item.url}`" target="_blank" class="btn">
 									<i class="icon-web-code" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Tags"
-								position="is-top">
-								<a class="btn"
-									@click="manageTags(item)">
+							<b-tooltip label="Tags" position="is-top">
+								<a class="btn" @click="manageTags(item)">
 									<i class="icon-ecommerce-tag-c" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Albums"
-								position="is-top">
-								<a class="btn"
-									@click="openAlbumModal(item)">
+							<b-tooltip label="Albums" position="is-top">
+								<a class="btn" @click="openAlbumModal(item)">
 									<i class="icon-interface-window" />
 								</a>
-							</b-tooltip>							
-							<b-tooltip label="Delete"
-								position="is-top">
-								<a class="btn"
-									@click="deleteFile(item, index)">
+							</b-tooltip>
+							<b-tooltip label="Delete" position="is-top">
+								<a class="btn" @click="deleteFile(item, index)">
 									<i class="icon-editorial-trash-a-l" />
 								</a>
 							</b-tooltip>
-							<b-tooltip v-if="user && user.isAdmin"
-								label="More info"
-								position="is-top"
-								class="more">
+							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
 								<nuxt-link :to="`/dashboard/admin/file/${item.id}`">
 									<i class="icon-interface-more" />
 								</nuxt-link>
@@ -96,58 +96,42 @@
 			</Waterfall>
 		</template>
 		<div v-else>
-			<b-table
-				:data="gridFiles || []"
-				:mobile-cards="true">
+			<b-table :data="gridFiles || []" :mobile-cards="true">
 				<template slot-scope="props">
 					<template v-if="!props.row.hideFromList">
-						<b-table-column field="url"
-							label="URL">
-							<a :href="props.row.url"
-								target="_blank">{{ props.row.url }}</a>
+						<b-table-column field="url" label="URL">
+							<a :href="props.row.url" target="_blank">{{ props.row.url }}</a>
 						</b-table-column>
 
-						<b-table-column field="albums"
-							label="Albums"
-							centered>
+						<b-table-column field="albums" label="Albums" centered>
 							<template v-for="(album, index) in props.row.albums">
-								<nuxt-link :key="index"
-									:to="`/dashboard/albums/${album.id}`">
+								<nuxt-link :key="index" :to="`/dashboard/albums/${album.id}`">
 									{{ album.name }}
 								</nuxt-link>
-								<template v-if="index < props.row.albums.length - 1">, </template>
+								<template v-if="index < props.row.albums.length - 1">
+									,
+								</template>
 							</template>
 
 							{{ props.row.username }}
 						</b-table-column>
 
-						<b-table-column field="uploaded"
-							label="Uploaded"
-							centered>
+						<b-table-column field="uploaded" label="Uploaded" centered>
 							<span><timeago :since="props.row.createdAt" /></span>
 						</b-table-column>
 
-						<b-table-column field="purge"
-							centered>
-							<b-tooltip label="Albums"
-								position="is-top">
-								<a class="btn"
-									@click="openAlbumModal(props.row)">
+						<b-table-column field="purge" centered>
+							<b-tooltip label="Albums" position="is-top">
+								<a class="btn" @click="openAlbumModal(props.row)">
 									<i class="icon-interface-window" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Delete"
-								position="is-top"
-								class="is-danger">
-								<a class="is-danger"
-									@click="deleteFile(props.row)">
+							<b-tooltip label="Delete" position="is-top" class="is-danger">
+								<a class="is-danger" @click="deleteFile(props.row)">
 									<i class="icon-editorial-trash-a-l" />
 								</a>
 							</b-tooltip>
-							<b-tooltip v-if="user && user.isAdmin"
-								label="More info"
-								position="is-top"
-								class="more">
+							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
 								<nuxt-link :to="`/dashboard/admin/file/${props.row.id}`">
 									<i class="icon-interface-more" />
 								</nuxt-link>
@@ -170,21 +154,23 @@
 				</template>
 			</b-table>
 		</div>
-		<b-modal :active.sync="isAlbumsModalActive"
-			:width="640"
-			scroll="keep">
+		<b-modal :active.sync="isAlbumsModalActive" :width="640" scroll="keep">
 			<div class="card albumsModal">
 				<div class="card-content">
 					<div class="content">
-						<h3 class="subtitle">Select the albums this file should be a part of</h3>
+						<h3 class="subtitle">
+							Select the albums this file should be a part of
+						</h3>
 						<hr>
+
 						<div class="albums-container">
-							<div v-for="(album, index) in albums"
-								:key="index"
-								class="album">
+							<div v-for="(album, index) in albums" :key="index" class="album">
 								<div class="field">
-									<b-checkbox :value="isAlbumSelected(album.id)"
-										@input="albumCheckboxClicked($event, album.id)">{{ album.name }}</b-checkbox>
+									<b-checkbox
+										:value="isAlbumSelected(album.id)"
+										@input="albumCheckboxClicked($event, album.id)">
+										{{ album.name }}
+									</b-checkbox>
 								</div>
 							</div>
 						</div>
@@ -204,37 +190,37 @@ import WaterfallItem from './waterfall/WaterfallItem.vue';
 export default {
 	components: {
 		Waterfall,
-		WaterfallItem
+		WaterfallItem,
 	},
 	props: {
 		files: {
 			type: Array,
-			default: () => []
+			default: () => [],
 		},
 		total: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		fixed: {
 			type: Boolean,
-			default: false
+			default: false,
 		},
 		isPublic: {
 			type: Boolean,
-			default: false
+			default: false,
 		},
 		width: {
 			type: Number,
-			default: 150
+			default: 150,
 		},
 		enableSearch: {
 			type: Boolean,
-			default: true
+			default: true,
 		},
 		enableToolbar: {
 			type: Boolean,
-			default: true
-		}
+			default: true,
+		},
 	},
 	data() {
 		return {
@@ -242,18 +228,20 @@ export default {
 			searchTerm: null,
 			showList: false,
 			albums: [],
+			hoveredItems: [],
 			isAlbumsModalActive: false,
 			showingModalForFile: null,
 			filesOffsetWaterfall: 0,
 			filesOffsetEndWaterfall: 50,
-			filesPerPageWaterfall: 50
+			filesPerPageWaterfall: 50,
 		};
 	},
 	computed: {
 		...mapState({
-			user: state => state.auth.user
+			user: (state) => state.auth.user,
 		}),
 		blank() {
+			// eslint-disable-next-line global-require, import/no-unresolved
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
@@ -262,12 +250,7 @@ export default {
 	},
 	methods: {
 		async search() {
-			const data = await this.$search.do(this.searchTerm, [
-				'name',
-				'original',
-				'type',
-				'albums:name'
-			]);
+			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
 			console.log('> Search result data', data);
 		},
 		deleteFile(file, index) {
@@ -290,13 +273,13 @@ export default {
 						});
 					}
 					return this.$buefy.toast.open(response.message);
-				}
+				},
 			});
 		},
 		isAlbumSelected(id) {
-			if (!this.showingModalForFile) return;
-			const found = this.showingModalForFile.albums.find(el => el.id === id);
-			return found && found.id ? true : false;
+			if (!this.showingModalForFile) return false;
+			const found = this.showingModalForFile.albums.find((el) => el.id === id);
+			return !!(found && found.id);
 		},
 		async openAlbumModal(file) {
 			this.showingModalForFile = file;
@@ -311,7 +294,7 @@ export default {
 		async albumCheckboxClicked(value, id) {
 			const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
 				albumId: id,
-				fileId: this.showingModalForFile.id
+				fileId: this.showingModalForFile.id,
 			});
 			this.$buefy.toast.open(response.message);
 
@@ -319,134 +302,166 @@ export default {
 			this.$parent.getFiles();
 		},
 		async getAlbums() {
-			const response = await this.$axios.$get(`albums/dropdown`);
+			const response = await this.$axios.$get('albums/dropdown');
 			this.albums = response.albums;
 			this.$forceUpdate();
 		},
-		mouseOverTest() {
-			console.log('aaaaaa');
-		}
-	}
+		mouseOver(id) {
+			console.log('in', id);
+			const foundIndex = this.hoveredItems.indexOf(id);
+			if (foundIndex > -1) return;
+			this.hoveredItems.push(id);
+			/// XXX: THIS IS NOT OK!
+			this.$nextTick(() => {
+				this.$refs.video.forEach((e) => e.play().catch(() => {}));
+			});
+		},
+		mouseOut(id) {
+			console.log('out', id);
+			const foundIndex = this.hoveredItems.indexOf(id);
+			if (foundIndex > -1) this.hoveredItems.splice(foundIndex, 1);
+		},
+		isHovered(id) {
+			return this.hoveredItems.includes(id);
+		},
+	},
 };
 </script>
 
 <style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	.item-move {
-		transition: all .25s cubic-bezier(.55,0,.1,1);
-	}
+@import '~/assets/styles/_colors.scss';
+.item-move {
+	transition: all 0.25s cubic-bezier(0.55, 0, 0.1, 1);
+}
 
-	div.toolbar {
-		padding: 1rem;
+div.toolbar {
+	padding: 1rem;
 
-		.block {
-			text-align: right;
-		}
+	.block {
+		text-align: right;
 	}
+}
 
-	span.extension {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		z-index: 0;
-		top: 0;
-		left: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 2rem;
-		pointer-events: none;
-		opacity: .75;
-		max-width: 150px;
-	}
+span.extension {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	top: 0;
+	left: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 2rem;
+	pointer-events: none;
+	opacity: 0.75;
+	max-width: 150px;
+}
 
-	div.actions {
-		opacity: 0;
-		-webkit-transition: opacity 0.1s linear;
-		-moz-transition: opacity 0.1s linear;
-		-ms-transition: opacity 0.1s linear;
-		-o-transition: opacity 0.1s linear;
-		transition: opacity 0.1s linear;
-		position: absolute;
-		top: 0px;
-		left: 0px;
-		width: 100%;
-		height: calc(100% - 6px);
-		background: rgba(0, 0, 0, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		span {
-			padding: 3px;
-			&.more {
-				position: absolute;
-				top: 0;
-				right: 0;
-			}
+div.preview {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: calc(100% - 6px);
+	overflow: hidden;
+}
 
-			&:nth-child(1), &:nth-child(2) {
-				align-items: flex-end;
-			}
+.preview-container {
+	display: inline-block;
+}
 
-			&:nth-child(1), &:nth-child(3) {
-				justify-content: flex-end;
-			}
+div.actions {
+	opacity: 0;
+	-webkit-transition: opacity 0.1s linear;
+	-moz-transition: opacity 0.1s linear;
+	-ms-transition: opacity 0.1s linear;
+	-o-transition: opacity 0.1s linear;
+	transition: opacity 0.1s linear;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: calc(100% - 6px);
+	// background: rgba(0, 0, 0, 0.5);
+	background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0px, rgba(0, 0, 0, 0) 60px),
+		linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0px, rgba(0, 0, 0, 0) 45px);
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
+
+	span {
+		padding: 3px;
+
+		&.more {
+			position: absolute;
+			top: 0;
+			right: 0;
+		}
+
+		&:nth-child(1),
+		&:nth-child(2) {
+			align-items: flex-end;
+			padding-bottom: 10px;
+		}
+
+		&:nth-child(3),
+		&:nth-child(4) {
+			justify-content: flex-end;
+			padding-bottom: 10px;
+		}
 
-			a {
+		a {
+			width: 30px;
+			height: 30px;
+			color: white;
+			justify-content: center;
+			align-items: center;
+			display: flex;
+			&.btn:before {
+				content: '';
 				width: 30px;
 				height: 30px;
-				color: white;
-				justify-content: center;
-				align-items: center;
-				display: flex;
-				&.btn:before {
-					content: '';
-					width: 30px;
-					height: 30px;
-					border: 1px solid white;
-					border-radius: 50%;
-					position: absolute;
-				}
+				border: 1px solid white;
+				border-radius: 50%;
+				position: absolute;
 			}
 		}
+	}
 
-		&.fixed {
-			position: relative;
-			opacity: 1;
-			background: none;
-
-			a {
-				width: auto;
-				height: auto;
-				color: $defaultTextColor;
-				&:before {
-					display: none;
-				}
-			}
+	&.fixed {
+		position: relative;
+		opacity: 1;
+		background: none;
 
+		a {
+			width: auto;
+			height: auto;
+			color: $defaultTextColor;
+			&:before {
+				display: none;
+			}
 		}
 	}
+}
 
-	.albums-container {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		.album {
-			flex-basis: 33%;
-			text-align: left;
-		}
+.albums-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	.album {
+		flex-basis: 33%;
+		text-align: left;
 	}
+}
 
-	img.hidden {
-		display: none;
-	}
-</style>
+.hidden {
+	display: none;
+}
 
-<style lang="scss">
-	.waterfall-item:hover {
-		div.actions {
-			opacity: 1
-		}
+.waterfall-item:hover {
+	div.actions {
+		opacity: 1;
 	}
+}
 </style>
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index af1bd72..cccc3ac 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -9,8 +9,6 @@
 	</div>
 </template>
 <script>
-// import {quickSort, getMinIndex, _, sum} from './util'
-
 const quickSort = (arr, type) => {
 	const left = [];
 	const right = [];
@@ -25,10 +23,10 @@ const quickSort = (arr, type) => {
 			right.push(arr[i]);
 		}
 	}
-	return quickSort(left, type).concat(povis, quickSort(right, type))
+	return quickSort(left, type).concat(povis, quickSort(right, type));
 };
 
-const getMinIndex = arr => {
+const getMinIndex = (arr) => {
 	let pos = 0;
 	for (let i = 0; i < arr.length; i++) {
 		if (arr[pos] > arr[i]) {
@@ -44,49 +42,53 @@ const _ = {
 	},
 	off(el, type, func, capture = false) {
 		el.removeEventListener(type, func, capture);
-	}
+	},
 };
 
-const sum = arr => arr.reduce((sum, val) => sum + val);
+const sum = (arr) => arr.reduce((acc, val) => acc + val, 0);
+
 export default {
 	name: 'Waterfall',
 	props: {
 		gutterWidth: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		gutterHeight: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		resizable: {
 			type: Boolean,
-			default: true
+			default: true,
 		},
 		align: {
 			type: String,
-			default: 'center'
+			default: 'center',
 		},
 		fixWidth: {
-			type: Number
+			type: Number,
+			default: 0,
 		},
 		minCol: {
 			type: Number,
-			default: 1
+			default: 1,
 		},
 		maxCol: {
-			type: Number
+			type: Number,
+			default: 0,
 		},
 		percent: {
-			type: Array
-		}
+			type: Array,
+			default: null,
+		},
 	},
 	data() {
 		return {
 			timer: null,
 			colNum: 0,
 			lastWidth: 0,
-			percentWidthArr: []
+			percentWidthArr: [],
 		};
 	},
 	created() {
@@ -105,16 +107,16 @@ export default {
 	},
 	methods: {
 		calulate(arr) {
-			let pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth;
+			const 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.percentWidthArr = this.percent.map((value) => (value / total) * pageWidth);
 				this.lastWidth = 0;
 			// 正常布局计算
 			} else {
-				this.colNum = parseInt(pageWidth / (arr.width + this.gutterWidth));
+				this.colNum = parseInt(pageWidth / (arr.width + this.gutterWidth), 10);
 				if (this.minCol && this.colNum < this.minCol) {
 					this.colNum = this.minCol;
 					this.lastWidth = 0;
@@ -136,14 +138,14 @@ export default {
 		render() {
 			// 重新排序
 			let childArr = [];
-			childArr = this.$children.map(child => child.getMeta());
+			childArr = this.$children.map((child) => child.getMeta());
 			childArr = quickSort(childArr, 'order');
 			// 计算列数
-			this.calulate(childArr[0])
-			let offsetArr = Array(this.colNum).fill(0);
+			this.calulate(childArr[0]);
+			const offsetArr = Array(this.colNum).fill(0);
 			// 渲染
-			childArr.forEach(child => {
-				let position = getMinIndex(offsetArr);
+			childArr.forEach((child) => {
+				const position = getMinIndex(offsetArr);
 				// 百分比布局渲染
 				if (this.percent) {
 					let left = 0;
@@ -171,10 +173,10 @@ export default {
 				}
 				child.el.style.top = `${offsetArr[position]}px`;
 				offsetArr[position] += child.height + this.gutterHeight;
-				this.$el.style.height = `${Math.max.apply(Math, offsetArr)}px`;
+				this.$el.style.height = `${Math.max(...offsetArr)}px`;
 			});
 			this.$emit('rendered', this);
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index 7c4d814..2a5c69a 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -12,26 +12,27 @@
 
 <script>
 import imagesLoaded from 'imagesloaded';
+
 export default {
 	name: 'WaterfallItem',
 	props: {
 		order: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		width: {
 			type: Number,
-			default: 150
+			default: 150,
 		},
 		video: {
 			type: Boolean,
-			default: false
-		}
+			default: false,
+		},
 	},
 	data() {
 		return {
 			itemWidth: 0,
-			height: 0
+			height: 0,
 		};
 	},
 	created() {
@@ -42,18 +43,18 @@ export default {
 		this.$el.style.width = `${this.width}px`;
 		this.emit();
 		if (this.video) {
-			const videoEl = this.$slots.default.find(e => e.tag?.toLowerCase() === 'video');
+			// find first video object
+			const videoEl = this.$slots.default.find((e) => e.tag?.toLowerCase() === 'video');
 			const el = videoEl.elm;
-			console.log(videoEl);
-			console.log(el);
+
+			// add event listener for video loaded
 			el.onloadeddata = () => {
-				console.log('loaded');
 				this.$el.style.left = '-9999px';
 				this.$el.style.top = '-9999px';
 				this.$el.style.display = 'block';
 				this.height = el.offsetHeight + 5;
 				this.itemWidth = el.offsetWidth;
-			}
+			};
 		} else {
 			imagesLoaded(this.$el, () => {
 				this.$el.style.left = '-9999px';
@@ -73,9 +74,9 @@ export default {
 				el: this.$el,
 				height: this.height,
 				width: this.itemWidth,
-				order: this.order
+				order: this.order,
 			};
-		}
-	}
-}
+		},
+	},
+};
 </script>
-- 
cgit v1.2.3


From fb0bc57542a44dcc94149f393d8a4ff0c2e7902b Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Tue, 7 Jul 2020 02:02:59 +0300
Subject: feat: try fixing THE SHITTY WATERFALL

---
 src/site/components/grid/Grid.vue                  | 28 +++++--------
 src/site/components/grid/waterfall/Waterfall.vue   | 47 +++++++++++++++++-----
 .../components/grid/waterfall/WaterfallItem.vue    | 12 +++---
 3 files changed, 54 insertions(+), 33 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index d4fe067..e6a8c64 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -24,12 +24,10 @@
 			<Waterfall
 				v-if="showWaterfall"
 				:gutterWidth="10"
-				:gutterHeight="4">
-				<WaterfallItem
-					v-for="(item, index) in gridFiles"
-					:key="item.id"
-					:width="width"
-					move-class="item-move">
+				:gutterHeight="4"
+				:itemWidth="width"
+				:items="gridFiles">
+				<template v-slot="{item}">
 					<template v-if="isPublic">
 						<a
 							:href="`${item.url}`"
@@ -81,7 +79,7 @@
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Delete" position="is-top">
-								<a class="btn" @click="deleteFile(item, index)">
+								<a class="btn" @click="deleteFile(item)">
 									<i class="icon-editorial-trash-a-l" />
 								</a>
 							</b-tooltip>
@@ -92,7 +90,7 @@
 							</b-tooltip>
 						</div>
 					</template>
-				</WaterfallItem>
+				</template>
 			</Waterfall>
 		</template>
 		<div v-else>
@@ -185,12 +183,10 @@
 import { mapState } from 'vuex';
 
 import Waterfall from './waterfall/Waterfall.vue';
-import WaterfallItem from './waterfall/WaterfallItem.vue';
 
 export default {
 	components: {
 		Waterfall,
-		WaterfallItem,
 	},
 	props: {
 		files: {
@@ -253,13 +249,13 @@ export default {
 			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
 			console.log('> Search result data', data);
 		},
-		deleteFile(file, index) {
-			this.$buefy.dialog.confirm({
+		deleteFile(file) {
+			this.$emit('delete', file);
+			/* this.$buefy.dialog.confirm({
 				title: 'Deleting file',
 				message: 'Are you sure you want to <b>delete</b> this file?',
 				confirmText: 'Delete File',
 				type: 'is-danger',
-				hasIcon: true,
 				onConfirm: async () => {
 					const response = await this.$axios.$delete(`file/${file.id}`);
 					if (this.showList) {
@@ -274,7 +270,7 @@ export default {
 					}
 					return this.$buefy.toast.open(response.message);
 				},
-			});
+			}); */
 		},
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return false;
@@ -311,10 +307,6 @@ export default {
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) return;
 			this.hoveredItems.push(id);
-			/// XXX: THIS IS NOT OK!
-			this.$nextTick(() => {
-				this.$refs.video.forEach((e) => e.play().catch(() => {}));
-			});
 		},
 		mouseOut(id) {
 			console.log('out', id);
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index cccc3ac..a83a275 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -1,14 +1,14 @@
-<style>
-	.waterfall {
-		position: relative;
-	}
-</style>
 <template>
 	<div class="waterfall">
-		<slot />
+		<WaterfallItem v-for="(item, index) in items" :key="item.id" :ref="`item-${item.id}`" :width="itemWidth">
+			<slot :item="item" />
+		</WaterfallItem>
 	</div>
 </template>
+
 <script>
+import WaterfallItem from './WaterfallItem.vue';
+
 const quickSort = (arr, type) => {
 	const left = [];
 	const right = [];
@@ -49,6 +49,9 @@ const sum = (arr) => arr.reduce((acc, val) => acc + val, 0);
 
 export default {
 	name: 'Waterfall',
+	components: {
+		WaterfallItem,
+	},
 	props: {
 		gutterWidth: {
 			type: Number,
@@ -82,6 +85,14 @@ export default {
 			type: Array,
 			default: null,
 		},
+		itemWidth: {
+			type: Number,
+			default: 150,
+		},
+		items: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	data() {
 		return {
@@ -89,15 +100,21 @@ export default {
 			colNum: 0,
 			lastWidth: 0,
 			percentWidthArr: [],
+			readyChildCount: 0,
 		};
 	},
+	watch: {
+		items() {
+			this.$nextTick(() => this.render('watch'));
+		},
+	},
 	created() {
 		this.$on('itemRender', () => {
 			if (this.timer) {
 				clearTimeout(this.timer);
 			}
 			this.timer = setTimeout(() => {
-				this.render();
+				this.render('created');
 			}, 0);
 		});
 	},
@@ -105,6 +122,10 @@ export default {
 		this.resizeHandle();
 		this.$watch('resizable', this.resizeHandle);
 	},
+	beforeDestroy() {
+		this.$off('itemRender');
+		_.off(window, 'resize', this.render);
+	},
 	methods: {
 		calulate(arr) {
 			const pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth;
@@ -135,10 +156,12 @@ export default {
 				_.off(window, 'resize', this.render, false);
 			}
 		},
-		render() {
+		render(context) {
+			console.log(context);
+			if (!this.items) return;
 			// 重新排序
 			let childArr = [];
-			childArr = this.$children.map((child) => child.getMeta());
+			childArr = this.items.map(({ id }) => this.$refs[`item-${id}`][0].getMeta());
 			childArr = quickSort(childArr, 'order');
 			// 计算列数
 			this.calulate(childArr[0]);
@@ -180,3 +203,9 @@ export default {
 	},
 };
 </script>
+
+<style>
+	.waterfall {
+		position: relative;
+	}
+</style>
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index 2a5c69a..a49c58c 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -1,9 +1,3 @@
-<style scoped>
-	.waterfall-item {
-		position: absolute;
-	}
-</style>
-
 <template>
 	<div class="waterfall-item">
 		<slot />
@@ -80,3 +74,9 @@ export default {
 	},
 };
 </script>
+
+<style scoped>
+	.waterfall-item {
+		position: absolute;
+	}
+</style>
-- 
cgit v1.2.3


From 5d61b4d000a114857e4519be25c5834f510d450f Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Tue, 7 Jul 2020 02:50:03 +0300
Subject: feat: refactor waterfall to be more efficient

---
 src/site/components/grid/Grid.vue                  |   5 +
 src/site/components/grid/waterfall/Waterfall.vue   | 266 ++++++++-------------
 .../components/grid/waterfall/WaterfallItem.vue    |  72 ------
 3 files changed, 99 insertions(+), 244 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index e6a8c64..f98108e 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -25,6 +25,7 @@
 				v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4"
+				:options="{fitWidth: true}"
 				:itemWidth="width"
 				:items="gridFiles">
 				<template v-slot="{item}">
@@ -451,6 +452,10 @@ div.actions {
 	display: none;
 }
 
+.waterfall {
+	margin: 0 auto;
+}
+
 .waterfall-item:hover {
 	div.actions {
 		opacity: 1;
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index a83a275..79a330a 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -1,51 +1,20 @@
 <template>
-	<div class="waterfall">
-		<WaterfallItem v-for="(item, index) in items" :key="item.id" :ref="`item-${item.id}`" :width="itemWidth">
+	<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 WaterfallItem from './WaterfallItem.vue';
 
-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;
-};
-
-const _ = {
-	on(el, type, func, capture = false) {
-		el.addEventListener(type, func, capture);
-	},
-	off(el, type, func, capture = false) {
-		el.removeEventListener(type, func, capture);
-	},
-};
-
-const sum = (arr) => arr.reduce((acc, val) => acc + val, 0);
+const isBrowser = typeof window !== 'undefined';
+const Masonry = isBrowser ? window.Masonry || require('masonry-layout') : null;
+const imagesloaded = isBrowser ? require('imagesloaded') : null;
 
 export default {
 	name: 'Waterfall',
@@ -53,159 +22,112 @@ export default {
 		WaterfallItem,
 	},
 	props: {
-		gutterWidth: {
-			type: Number,
-			default: 0,
-		},
-		gutterHeight: {
-			type: Number,
-			default: 0,
-		},
-		resizable: {
-			type: Boolean,
-			default: true,
-		},
-		align: {
-			type: String,
-			default: 'center',
-		},
-		fixWidth: {
-			type: Number,
-			default: 0,
-		},
-		minCol: {
-			type: Number,
-			default: 1,
-		},
-		maxCol: {
-			type: Number,
-			default: 0,
+		options: {
+			type: Object,
+			default: () => {},
 		},
-		percent: {
+		items: {
 			type: Array,
-			default: null,
+			default: () => [],
 		},
 		itemWidth: {
 			type: Number,
 			default: 150,
 		},
-		items: {
-			type: Array,
-			default: () => [],
+		gutterWidth: {
+			type: Number,
+			default: 10,
 		},
-	},
-	data() {
-		return {
-			timer: null,
-			colNum: 0,
-			lastWidth: 0,
-			percentWidthArr: [],
-			readyChildCount: 0,
-		};
-	},
-	watch: {
-		items() {
-			this.$nextTick(() => this.render('watch'));
+		gutterHeight: {
+			type: Number,
+			default: 4,
 		},
 	},
-	created() {
-		this.$on('itemRender', () => {
-			if (this.timer) {
-				clearTimeout(this.timer);
-			}
-			this.timer = setTimeout(() => {
-				this.render('created');
-			}, 0);
-		});
-	},
 	mounted() {
-		this.resizeHandle();
-		this.$watch('resizable', this.resizeHandle);
+		this.initializeMasonry();
+		this.imagesLoaded();
+	},
+	updated() {
+		this.performLayout();
+		this.imagesLoaded();
 	},
-	beforeDestroy() {
-		this.$off('itemRender');
-		_.off(window, 'resize', this.render);
+	unmounted() {
+		this.masonry.destroy();
 	},
 	methods: {
-		calulate(arr) {
-			const 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), 10);
-				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();
 		},
-		resizeHandle() {
-			if (this.resizable) {
-				_.on(window, 'resize', this.render, false);
-			} else {
-				_.off(window, 'resize', this.render, false);
+		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,
+			};
 		},
-		render(context) {
-			console.log(context);
-			if (!this.items) return;
-			// 重新排序
-			let childArr = [];
-			childArr = this.items.map(({ id }) => this.$refs[`item-${id}`][0].getMeta());
-			childArr = quickSort(childArr, 'order');
-			// 计算列数
-			this.calulate(childArr[0]);
-			const offsetArr = Array(this.colNum).fill(0);
-			// 渲染
-			childArr.forEach((child) => {
-				const 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(...offsetArr)}px`;
-			});
-			this.$emit('rendered', this);
+		initializeMasonry() {
+			if (!this.masonry) {
+				this.masonry = new Masonry(
+					this.$refs.waterfall,
+					{
+						columnWidth: this.itemWidth,
+						gutter: this.gutterWidth,
+						...this.options,
+					},
+				);
+				this.domChildren = this.getNewDomChildren();
+			}
+		},
+		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>
-	.waterfall {
-		position: relative;
-	}
+<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 a49c58c..c5cade1 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -3,80 +3,8 @@
 		<slot />
 	</div>
 </template>
-
 <script>
-import imagesLoaded from 'imagesloaded';
-
 export default {
 	name: 'WaterfallItem',
-	props: {
-		order: {
-			type: Number,
-			default: 0,
-		},
-		width: {
-			type: Number,
-			default: 150,
-		},
-		video: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	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();
-		if (this.video) {
-			// find first video object
-			const videoEl = this.$slots.default.find((e) => e.tag?.toLowerCase() === 'video');
-			const el = videoEl.elm;
-
-			// add event listener for video loaded
-			el.onloadeddata = () => {
-				this.$el.style.left = '-9999px';
-				this.$el.style.top = '-9999px';
-				this.$el.style.display = 'block';
-				this.height = el.offsetHeight + 5;
-				this.itemWidth = el.offsetWidth;
-			};
-		} else {
-			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>
-
-<style scoped>
-	.waterfall-item {
-		position: absolute;
-	}
-</style>
-- 
cgit v1.2.3


From b519b6ccb469e874c783b995ddf0ab6fabdb5a0e Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 03:37:50 +0300
Subject: refactor: refactor grid to use vuex for every action

---
 src/site/components/grid/Grid.vue | 83 ++++++++++++++++++++++-----------------
 1 file changed, 48 insertions(+), 35 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index f98108e..42dcc6b 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -70,7 +70,7 @@
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Tags" position="is-top">
-								<a class="btn" @click="manageTags(item)">
+								<a class="btn" @click="false && manageTags(item)">
 									<i class="icon-ecommerce-tag-c" />
 								</a>
 							</b-tooltip>
@@ -163,7 +163,7 @@
 						<hr>
 
 						<div class="albums-container">
-							<div v-for="(album, index) in albums" :key="index" class="album">
+							<div v-for="(album, index) in albums" :key="album.id" class="album">
 								<div class="field">
 									<b-checkbox
 										:value="isAlbumSelected(album.id)"
@@ -224,7 +224,6 @@ export default {
 			showWaterfall: true,
 			searchTerm: null,
 			showList: false,
-			albums: [],
 			hoveredItems: [],
 			isAlbumsModalActive: false,
 			showingModalForFile: null,
@@ -236,6 +235,8 @@ export default {
 	computed: {
 		...mapState({
 			user: (state) => state.auth.user,
+			albums: (state) => state.albums.tinyDetails,
+			images: (state) => state.images,
 		}),
 		blank() {
 			// eslint-disable-next-line global-require, import/no-unresolved
@@ -245,33 +246,31 @@ export default {
 			return this.files;
 		},
 	},
+	created() {
+		this.getAlbums();
+	},
 	methods: {
 		async search() {
 			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
 			console.log('> Search result data', data);
 		},
 		deleteFile(file) {
-			this.$emit('delete', file);
-			/* this.$buefy.dialog.confirm({
+			// this.$emit('delete', file);
+			this.$buefy.dialog.confirm({
 				title: 'Deleting file',
 				message: 'Are you sure you want to <b>delete</b> this file?',
 				confirmText: 'Delete File',
 				type: 'is-danger',
 				onConfirm: async () => {
-					const response = await this.$axios.$delete(`file/${file.id}`);
-					if (this.showList) {
-						file.hideFromList = true;
-						this.$forceUpdate();
-					} else {
-						this.showWaterfall = false;
-						this.files.splice(index, 1);
-						this.$nextTick(() => {
-							this.showWaterfall = true;
-						});
+					try {
+						const response = await this.$store.dispatch('images/deleteFile', file.id);
+
+						this.$buefy.toast.open(response.message);
+					} catch (e) {
+						this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 					}
-					return this.$buefy.toast.open(response.message);
 				},
-			}); */
+			});
 		},
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return false;
@@ -279,38 +278,52 @@ export default {
 			return !!(found && found.id);
 		},
 		async openAlbumModal(file) {
+			const { id } = file;
 			this.showingModalForFile = file;
 			this.showingModalForFile.albums = [];
-			this.isAlbumsModalActive = true;
 
-			const response = await this.$axios.$get(`file/${file.id}/albums`);
-			this.showingModalForFile.albums = response.albums;
+			try {
+				await this.$store.dispatch('images/getFileAlbums', id);
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
+			this.showingModalForFile.albums = this.images.filesAlbums[id];
 
-			this.getAlbums();
+			this.isAlbumsModalActive = true;
 		},
-		async albumCheckboxClicked(value, id) {
-			const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
-				albumId: id,
-				fileId: this.showingModalForFile.id,
-			});
-			this.$buefy.toast.open(response.message);
-
-			// Not the prettiest solution to refetch on each click but it'll do for now
-			this.$parent.getFiles();
+		async albumCheckboxClicked(add, id) {
+			try {
+				let response;
+				if (add) {
+					response = await this.$store.dispatch('images/addToAlbum', {
+						albumId: id,
+						fileId: this.showingModalForFile.id,
+					});
+				} else {
+					response = await this.$store.dispatch('images/removeFromAlbum', {
+						albumId: id,
+						fileId: this.showingModalForFile.id,
+					});
+				}
+
+				this.$buefy.toast.open(response.message);
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
 		},
 		async getAlbums() {
-			const response = await this.$axios.$get('albums/dropdown');
-			this.albums = response.albums;
-			this.$forceUpdate();
+			try {
+				await this.$store.dispatch('albums/getTinyDetails');
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
 		},
 		mouseOver(id) {
-			console.log('in', id);
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) return;
 			this.hoveredItems.push(id);
 		},
 		mouseOut(id) {
-			console.log('out', id);
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) this.hoveredItems.splice(foundIndex, 1);
 		},
-- 
cgit v1.2.3


From ad852de51a0d2dd5d29c08838d5a430c58849e74 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 04:00:12 +0300
Subject: chore: linter the entire project using the new rules

---
 src/site/components/grid/Grid.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 42dcc6b..84c0b11 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -163,7 +163,7 @@
 						<hr>
 
 						<div class="albums-container">
-							<div v-for="(album, index) in albums" :key="album.id" class="album">
+							<div v-for="album in albums" :key="album.id" class="album">
 								<div class="field">
 									<b-checkbox
 										:value="isAlbumSelected(album.id)"
@@ -252,7 +252,7 @@ export default {
 	methods: {
 		async search() {
 			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
-			console.log('> Search result data', data);
+			console.log('> Search result data', data); // eslint-disable-line no-console
 		},
 		deleteFile(file) {
 			// this.$emit('delete', file);
-- 
cgit v1.2.3


From 0f66d807035d3e32a66c7dc9bf55fb3be99aedac Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Fri, 10 Jul 2020 01:13:51 +0300
Subject: refactor: finish refactoring all the components to use vuex

---
 src/site/components/grid/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 84c0b11..90c196b 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -287,7 +287,7 @@ export default {
 			} catch (e) {
 				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 			}
-			this.showingModalForFile.albums = this.images.filesAlbums[id];
+			this.showingModalForFile.albums = this.images.fileAlbumsMap[id];
 
 			this.isAlbumsModalActive = true;
 		},
-- 
cgit v1.2.3


From 609ff7ceb4c1d452db3f7d56a89305090ecd467a Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sat, 18 Jul 2020 04:47:24 +0900
Subject: Update displaying thumbnails of unsupported file types

---
 src/site/components/grid/Grid.vue | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index da9b26c..d0a5ea3 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -96,7 +96,7 @@
 			<button
 				v-if="moreFiles"
 				class="button is-primary"
-				@click="loadMoreFilesWaterfall">Load more</button>
+				@click="loadMoreFiles">Load more</button>
 		</template>
 		<div v-else>
 			<b-table
@@ -172,6 +172,10 @@
 					</div>
 				</template>
 			</b-table>
+			<button
+				v-if="moreFiles"
+				class="button is-primary mt2"
+				@click="loadMoreFiles">Load more</button>
 		</div>
 		<b-modal :active.sync="isAlbumsModalActive"
 			:width="640"
@@ -240,9 +244,9 @@ export default {
 			albums: [],
 			isAlbumsModalActive: false,
 			showingModalForFile: null,
-			filesOffsetWaterfall: 0,
-			filesOffsetEndWaterfall: 50,
-			filesPerPageWaterfall: 50
+			filesOffset: 0,
+			filesOffsetEnd: 50,
+			filesPerPage: 50
 		};
 	},
 	computed: {
@@ -250,18 +254,18 @@ export default {
 			return this.$store.state.user;
 		},
 		blank() {
-			return require('@/assets/images/blank.png');
+			return require('@/assets/images/blank2.jpg');
 		},
 		gridFiles() {
-			return this.files.slice(this.filesOffsetWaterfall, this.filesOffsetEndWaterfall);
+			return this.files.slice(this.filesOffset, this.filesOffsetEnd);
 		},
 		moreFiles() {
-			return this.files.length > this.filesOffsetEndWaterfall;
+			return this.files.length > this.filesOffsetEnd;
 		}
 	},
 	methods: {
-		loadMoreFilesWaterfall() {
-			this.filesOffsetEndWaterfall = this.filesOffsetEndWaterfall + this.filesPerPageWaterfall;
+		loadMoreFiles() {
+			this.filesOffsetEnd = this.filesOffsetEnd + this.filesPerPage;
 		},
 		async search() {
 			const data = await this.$search.do(this.searchTerm, [
-- 
cgit v1.2.3


From c93ddb09008c45942544b13bbb03319c367f9cd8 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sun, 19 Jul 2020 22:27:11 +0300
Subject: feat: Start working on a new album/tags/image info modal

---
 src/site/components/grid/Grid.vue | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 90c196b..1b62097 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -75,7 +75,7 @@
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Albums" position="is-top">
-								<a class="btn" @click="openAlbumModal(item)">
+								<a class="btn" @click="handleFileModal(item)">
 									<i class="icon-interface-window" />
 								</a>
 							</b-tooltip>
@@ -121,7 +121,7 @@
 
 						<b-table-column field="purge" centered>
 							<b-tooltip label="Albums" position="is-top">
-								<a class="btn" @click="openAlbumModal(props.row)">
+								<a class="btn" @click="handleFileModal(props.row)">
 									<i class="icon-interface-window" />
 								</a>
 							</b-tooltip>
@@ -153,7 +153,10 @@
 				</template>
 			</b-table>
 		</div>
-		<b-modal :active.sync="isAlbumsModalActive" :width="640" scroll="keep">
+		<b-modal :active.sync="isAlbumsModalActive" scroll="keep">
+			<ImageInfo :file="modalData.file" />
+		</b-modal>
+		<!-- <b-modal :active.sync="isAlbumsModalActive" :width="640" scroll="keep">
 			<div class="card albumsModal">
 				<div class="card-content">
 					<div class="content">
@@ -176,7 +179,7 @@
 					</div>
 				</div>
 			</div>
-		</b-modal>
+		</b-modal> -->
 	</div>
 </template>
 
@@ -184,10 +187,12 @@
 import { mapState } from 'vuex';
 
 import Waterfall from './waterfall/Waterfall.vue';
+import ImageInfo from '~/components/image-modal/ImageInfo.vue';
 
 export default {
 	components: {
 		Waterfall,
+		ImageInfo,
 	},
 	props: {
 		files: {
@@ -230,6 +235,11 @@ export default {
 			filesOffsetWaterfall: 0,
 			filesOffsetEndWaterfall: 50,
 			filesPerPageWaterfall: 50,
+			modalData: {
+				file: null,
+				tags: null,
+				albums: null,
+			},
 		};
 	},
 	computed: {
@@ -318,6 +328,20 @@ export default {
 				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 			}
 		},
+		async handleFileModal(file) {
+			const { id } = file;
+
+			try {
+				await this.$store.dispatch('images/fetchFileMeta', id);
+				this.modalData.file = this.images.fileExtraInfoMap[id];
+				this.modalData.albums = this.images.fileAlbumsMap[id];
+				this.modalData.tags = this.images.fileTagsMap[id];
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
+
+			this.isAlbumsModalActive = true;
+		},
 		mouseOver(id) {
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) return;
-- 
cgit v1.2.3


From 18bb451f793677a5bbfdc2c14128bae33c66dfde Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 20 Jul 2020 23:01:45 +0300
Subject: feat: implement all-in-one file detail viewer, tag editor and album
 selection modal

---
 src/site/components/grid/Grid.vue                | 71 +++++++++++-------------
 src/site/components/grid/waterfall/Waterfall.vue |  3 +-
 2 files changed, 33 insertions(+), 41 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 1e427fc..d29160f 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -6,6 +6,7 @@
 					<slot name="pagination" />
 				</div>
 			</div>
+			<!-- TODO: Externalize this so it can be saved as an user config (and between re-renders) -->
 			<div v-if="enableToolbar" class="level-right toolbar">
 				<div class="level-item">
 					<div class="block">
@@ -66,27 +67,22 @@
 							@mouseleave.self.stop.prevent="item.preview && mouseOut(item.id)">
 							<b-tooltip label="Link" position="is-top">
 								<a :href="`${item.url}`" target="_blank" class="btn">
-									<i class="icon-web-code" />
+									<i class="mdi mdi-open-in-new" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Tags" position="is-top">
-								<a class="btn" @click="false && manageTags(item)">
-									<i class="icon-ecommerce-tag-c" />
-								</a>
-							</b-tooltip>
-							<b-tooltip label="Albums" position="is-top">
+							<b-tooltip label="Edit" position="is-top">
 								<a class="btn" @click="handleFileModal(item)">
-									<i class="icon-interface-window" />
+									<i class="mdi mdi-pencil" />
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Delete" position="is-top">
 								<a class="btn" @click="deleteFile(item)">
-									<i class="icon-editorial-trash-a-l" />
+									<i class="mdi mdi-delete" />
 								</a>
 							</b-tooltip>
 							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
 								<nuxt-link :to="`/dashboard/admin/file/${item.id}`">
-									<i class="icon-interface-more" />
+									<i class="mdi mdi-dots-horizontal" />
 								</nuxt-link>
 							</b-tooltip>
 						</div>
@@ -120,19 +116,19 @@
 						</b-table-column>
 
 						<b-table-column field="purge" centered>
-							<b-tooltip label="Albums" position="is-top">
+							<b-tooltip label="Edit" position="is-top">
 								<a class="btn" @click="handleFileModal(props.row)">
-									<i class="icon-interface-window" />
+									<i class="mdi mdi-pencil" />
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Delete" position="is-top" class="is-danger">
 								<a class="is-danger" @click="deleteFile(props.row)">
-									<i class="icon-editorial-trash-a-l" />
+									<i class="mdi mdi-delete" />
 								</a>
 							</b-tooltip>
 							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
 								<nuxt-link :to="`/dashboard/admin/file/${props.row.id}`">
-									<i class="icon-interface-more" />
+									<i class="mdi mdi-dots-horizontal" />
 								</nuxt-link>
 							</b-tooltip>
 						</b-table-column>
@@ -159,33 +155,10 @@
 				Load more
 			</button>
 		</div>
-		<b-modal :active.sync="isAlbumsModalActive" scroll="keep">
-			<ImageInfo :file="modalData.file" />
+
+		<b-modal class="imageinfo-modal" :active.sync="isAlbumsModalActive">
+			<ImageInfo :file="modalData.file" :albums="modalData.albums" :tags="modalData.tags" />
 		</b-modal>
-		<!-- <b-modal :active.sync="isAlbumsModalActive" :width="640" scroll="keep">
-			<div class="card albumsModal">
-				<div class="card-content">
-					<div class="content">
-						<h3 class="subtitle">
-							Select the albums this file should be a part of
-						</h3>
-						<hr>
-
-						<div class="albums-container">
-							<div v-for="album in albums" :key="album.id" class="album">
-								<div class="field">
-									<b-checkbox
-										:value="isAlbumSelected(album.id)"
-										@input="albumCheckboxClicked($event, album.id)">
-										{{ album.name }}
-									</b-checkbox>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</b-modal> -->
 	</div>
 </template>
 
@@ -263,7 +236,9 @@ export default {
 		},
 	},
 	created() {
+		// TODO: Create a middleware for this
 		this.getAlbums();
+		this.getTags();
 	},
 	methods: {
 		async search() {
@@ -348,6 +323,13 @@ export default {
 
 			this.isAlbumsModalActive = true;
 		},
+		async getTags() {
+			try {
+				await this.$store.dispatch('tags/fetch');
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
+		},
 		mouseOver(id) {
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) return;
@@ -504,4 +486,13 @@ div.actions {
 		opacity: 1;
 	}
 }
+
+.imageinfo-modal::-webkit-scrollbar {
+    width: 0px;  /* Remove scrollbar space */
+    background: transparent;  /* Optional: just make scrollbar invisible */
+}
+
+i.mdi {
+	font-size: 16px;
+}
 </style>
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 79a330a..762cbbd 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -1,7 +1,7 @@
 <template>
 	<div ref="waterfall" class="waterfall">
 		<WaterfallItem
-			v-for="(item, index) in items"
+			v-for="item in items"
 			:key="item.id"
 			:style="{ width: `${itemWidth}px`, marginBottom: `${gutterHeight}px` }"
 			:width="itemWidth">
@@ -13,6 +13,7 @@
 import WaterfallItem from './WaterfallItem.vue';
 
 const isBrowser = typeof window !== 'undefined';
+// eslint-disable-next-line global-require
 const Masonry = isBrowser ? window.Masonry || require('masonry-layout') : null;
 const imagesloaded = isBrowser ? require('imagesloaded') : null;
 
-- 
cgit v1.2.3


From 93478a334b526703797cd3d759a70c18e6c6bb5a Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Tue, 21 Jul 2020 15:45:28 +0300
Subject: fix: make modal use full height on mobile

---
 src/site/components/grid/Grid.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index d29160f..7170709 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -148,12 +148,6 @@
 					</div>
 				</template>
 			</b-table>
-			<button
-				v-if="moreFiles"
-				class="button is-primary mt2"
-				@click="loadMoreFiles">
-				Load more
-			</button>
 		</div>
 
 		<b-modal class="imageinfo-modal" :active.sync="isAlbumsModalActive">
@@ -495,4 +489,12 @@ div.actions {
 i.mdi {
 	font-size: 16px;
 }
+
+.imageinfo-modal{
+	::v-deep .modal-content {
+		@media screen and (max-width: 768px) {
+			min-height: 100vh;
+		}
+	}
+}
 </style>
-- 
cgit v1.2.3


From 4a3fef2b9931266d40c1d9e88748fd2aa623dc79 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 12 Nov 2020 22:58:34 +0200
Subject: chore: update buefy to 0.9

---
 src/site/components/grid/Grid.vue | 77 +++++++++++++++++++--------------------
 1 file changed, 37 insertions(+), 40 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 7170709..1fa3167 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -92,48 +92,45 @@
 		</template>
 		<div v-else>
 			<b-table :data="gridFiles || []" :mobile-cards="true">
-				<template slot-scope="props">
-					<template v-if="!props.row.hideFromList">
-						<b-table-column field="url" label="URL">
-							<a :href="props.row.url" target="_blank">{{ props.row.url }}</a>
-						</b-table-column>
-
-						<b-table-column field="albums" label="Albums" centered>
-							<template v-for="(album, index) in props.row.albums">
-								<nuxt-link :key="index" :to="`/dashboard/albums/${album.id}`">
-									{{ album.name }}
-								</nuxt-link>
-								<template v-if="index < props.row.albums.length - 1">
-									,
-								</template>
-							</template>
+				<b-table-column v-slot="props" field="url" label="URL">
+					<a :href="props.row.url" target="_blank">{{ props.row.url }}</a>
+				</b-table-column>
+
+				<b-table-column v-slot="props" field="albums" label="Albums" centered>
+					<template v-for="(album, index) in props.row.albums">
+						<nuxt-link :key="index" :to="`/dashboard/albums/${album.id}`">
+							{{ album.name }}
+						</nuxt-link>
+						<template v-if="index < props.row.albums.length - 1">
+							,
+						</template>
+					</template>
 
-							{{ props.row.username }}
-						</b-table-column>
+					{{ props.row.username }}
+				</b-table-column>
 
-						<b-table-column field="uploaded" label="Uploaded" centered>
-							<span><timeago :since="props.row.createdAt" /></span>
-						</b-table-column>
+				<b-table-column v-slot="props" field="uploaded" label="Uploaded" centered>
+					<span><timeago :since="props.row.createdAt" /></span>
+				</b-table-column>
+
+				<b-table-column v-slot="props" field="purge" centered>
+					<b-tooltip label="Edit" position="is-top">
+						<a class="btn" @click="handleFileModal(props.row)">
+							<i class="mdi mdi-pencil" />
+						</a>
+					</b-tooltip>
+					<b-tooltip label="Delete" position="is-top" class="is-danger">
+						<a class="is-danger" @click="deleteFile(props.row)">
+							<i class="mdi mdi-delete" />
+						</a>
+					</b-tooltip>
+					<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
+						<nuxt-link :to="`/dashboard/admin/file/${props.row.id}`">
+							<i class="mdi mdi-dots-horizontal" />
+						</nuxt-link>
+					</b-tooltip>
+				</b-table-column>
 
-						<b-table-column field="purge" centered>
-							<b-tooltip label="Edit" position="is-top">
-								<a class="btn" @click="handleFileModal(props.row)">
-									<i class="mdi mdi-pencil" />
-								</a>
-							</b-tooltip>
-							<b-tooltip label="Delete" position="is-top" class="is-danger">
-								<a class="is-danger" @click="deleteFile(props.row)">
-									<i class="mdi mdi-delete" />
-								</a>
-							</b-tooltip>
-							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
-								<nuxt-link :to="`/dashboard/admin/file/${props.row.id}`">
-									<i class="mdi mdi-dots-horizontal" />
-								</nuxt-link>
-							</b-tooltip>
-						</b-table-column>
-					</template>
-				</template>
 				<template slot="empty">
 					<div class="has-text-centered">
 						<i class="icon-misc-mood-sad" />
@@ -226,7 +223,7 @@ export default {
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
-			return this.files;
+			return (this.files || []).filter((v) => !v.hideFromList);
 		},
 	},
 	created() {
-- 
cgit v1.2.3


From 90001c2df56d58e69fd199a518ae7f3e4ed327fc Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 24 Dec 2020 10:40:50 +0200
Subject: chore: remove trailing commas

---
 src/site/components/grid/Grid.vue                  | 36 +++++++++++-----------
 src/site/components/grid/waterfall/Waterfall.vue   | 26 ++++++++--------
 .../components/grid/waterfall/WaterfallItem.vue    |  2 +-
 3 files changed, 32 insertions(+), 32 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 1fa3167..3a15335 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -162,37 +162,37 @@ import ImageInfo from '~/components/image-modal/ImageInfo.vue';
 export default {
 	components: {
 		Waterfall,
-		ImageInfo,
+		ImageInfo
 	},
 	props: {
 		files: {
 			type: Array,
-			default: () => [],
+			default: () => []
 		},
 		total: {
 			type: Number,
-			default: 0,
+			default: 0
 		},
 		fixed: {
 			type: Boolean,
-			default: false,
+			default: false
 		},
 		isPublic: {
 			type: Boolean,
-			default: false,
+			default: false
 		},
 		width: {
 			type: Number,
-			default: 150,
+			default: 150
 		},
 		enableSearch: {
 			type: Boolean,
-			default: true,
+			default: true
 		},
 		enableToolbar: {
 			type: Boolean,
-			default: true,
-		},
+			default: true
+		}
 	},
 	data() {
 		return {
@@ -208,15 +208,15 @@ export default {
 			modalData: {
 				file: null,
 				tags: null,
-				albums: null,
-			},
+				albums: null
+			}
 		};
 	},
 	computed: {
 		...mapState({
 			user: (state) => state.auth.user,
 			albums: (state) => state.albums.tinyDetails,
-			images: (state) => state.images,
+			images: (state) => state.images
 		}),
 		blank() {
 			// eslint-disable-next-line global-require, import/no-unresolved
@@ -224,7 +224,7 @@ export default {
 		},
 		gridFiles() {
 			return (this.files || []).filter((v) => !v.hideFromList);
-		},
+		}
 	},
 	created() {
 		// TODO: Create a middleware for this
@@ -251,7 +251,7 @@ export default {
 					} catch (e) {
 						this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 					}
-				},
+				}
 			});
 		},
 		isAlbumSelected(id) {
@@ -279,12 +279,12 @@ export default {
 				if (add) {
 					response = await this.$store.dispatch('images/addToAlbum', {
 						albumId: id,
-						fileId: this.showingModalForFile.id,
+						fileId: this.showingModalForFile.id
 					});
 				} else {
 					response = await this.$store.dispatch('images/removeFromAlbum', {
 						albumId: id,
-						fileId: this.showingModalForFile.id,
+						fileId: this.showingModalForFile.id
 					});
 				}
 
@@ -332,8 +332,8 @@ export default {
 		},
 		isHovered(id) {
 			return this.hoveredItems.includes(id);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 762cbbd..af2af3f 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -20,29 +20,29 @@ const imagesloaded = isBrowser ? require('imagesloaded') : null;
 export default {
 	name: 'Waterfall',
 	components: {
-		WaterfallItem,
+		WaterfallItem
 	},
 	props: {
 		options: {
 			type: Object,
-			default: () => {},
+			default: () => {}
 		},
 		items: {
 			type: Array,
-			default: () => [],
+			default: () => []
 		},
 		itemWidth: {
 			type: Number,
-			default: 150,
+			default: 150
 		},
 		gutterWidth: {
 			type: Number,
-			default: 10,
+			default: 10
 		},
 		gutterHeight: {
 			type: Number,
-			default: 4,
-		},
+			default: 4
+		}
 	},
 	mounted() {
 		this.initializeMasonry();
@@ -62,7 +62,7 @@ export default {
 				node,
 				() => {
 					this.masonry.layout();
-				},
+				}
 			);
 		},
 		performLayout() {
@@ -101,7 +101,7 @@ export default {
 				removed,
 				appended,
 				prepended,
-				moved,
+				moved
 			};
 		},
 		initializeMasonry() {
@@ -111,8 +111,8 @@ export default {
 					{
 						columnWidth: this.itemWidth,
 						gutter: this.gutterWidth,
-						...this.options,
-					},
+						...this.options
+					}
 				);
 				this.domChildren = this.getNewDomChildren();
 			}
@@ -122,8 +122,8 @@ export default {
 			const children = this.options && this.options.itemSelector
 				? node.querySelectorAll(this.options.itemSelector) : node.children;
 			return Array.prototype.slice.call(children);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index c5cade1..2a18606 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -5,6 +5,6 @@
 </template>
 <script>
 export default {
-	name: 'WaterfallItem',
+	name: 'WaterfallItem'
 };
 </script>
-- 
cgit v1.2.3


From 587f7d69e80cfa1d94cc4730dc26834c389f574d Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 24 Dec 2020 13:57:09 +0200
Subject: bug: fix showlist resetting itself every time the page is changed
 bug: fix store not commiting search results

---
 src/site/components/grid/Grid.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 3a15335..ea568f0 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -21,9 +21,8 @@
 			</div>
 		</nav>
 
-		<template v-if="!showList">
+		<template v-if="!images.showList">
 			<Waterfall
-				v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4"
 				:options="{fitWidth: true}"
@@ -196,7 +195,6 @@ export default {
 	},
 	data() {
 		return {
-			showWaterfall: true,
 			searchTerm: null,
 			showList: false,
 			hoveredItems: [],
@@ -226,10 +224,15 @@ export default {
 			return (this.files || []).filter((v) => !v.hideFromList);
 		}
 	},
+	watch: {
+		showList: 'displayTypeChange'
+	},
 	created() {
 		// TODO: Create a middleware for this
 		this.getAlbums();
 		this.getTags();
+
+		this.showList = this.images.showList;
 	},
 	methods: {
 		async search() {
@@ -332,6 +335,9 @@ export default {
 		},
 		isHovered(id) {
 			return this.hoveredItems.includes(id);
+		},
+		displayTypeChange(showList) {
+			this.$store.commit('images/setShowList', showList);
 		}
 	}
 };
-- 
cgit v1.2.3


From fb2c27086f570fec60f4d52dcc9ca80e53186293 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Thu, 24 Dec 2020 23:45:16 +0900
Subject: Fix ESLint rules once and for all

---
 src/site/components/grid/Grid.vue                | 46 ++++++++++++------------
 src/site/components/grid/waterfall/Waterfall.vue | 41 ++++++++++-----------
 2 files changed, 41 insertions(+), 46 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index ea568f0..0693c77 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -23,10 +23,10 @@
 
 		<template v-if="!images.showList">
 			<Waterfall
-				:gutterWidth="10"
-				:gutterHeight="4"
+				:gutter-width="10"
+				:gutter-height="4"
 				:options="{fitWidth: true}"
-				:itemWidth="width"
+				:item-width="width"
 				:items="gridFiles">
 				<template v-slot="{item}">
 					<template v-if="isPublic">
@@ -165,32 +165,32 @@ export default {
 	},
 	props: {
 		files: {
-			type: Array,
-			default: () => []
+			'type': Array,
+			'default': () => []
 		},
 		total: {
-			type: Number,
-			default: 0
+			'type': Number,
+			'default': 0
 		},
 		fixed: {
-			type: Boolean,
-			default: false
+			'type': Boolean,
+			'default': false
 		},
 		isPublic: {
-			type: Boolean,
-			default: false
+			'type': Boolean,
+			'default': false
 		},
 		width: {
-			type: Number,
-			default: 150
+			'type': Number,
+			'default': 150
 		},
 		enableSearch: {
-			type: Boolean,
-			default: true
+			'type': Boolean,
+			'default': true
 		},
 		enableToolbar: {
-			type: Boolean,
-			default: true
+			'type': Boolean,
+			'default': true
 		}
 	},
 	data() {
@@ -212,16 +212,16 @@ export default {
 	},
 	computed: {
 		...mapState({
-			user: (state) => state.auth.user,
-			albums: (state) => state.albums.tinyDetails,
-			images: (state) => state.images
+			user: state => state.auth.user,
+			albums: state => state.albums.tinyDetails,
+			images: state => state.images
 		}),
 		blank() {
 			// eslint-disable-next-line global-require, import/no-unresolved
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
-			return (this.files || []).filter((v) => !v.hideFromList);
+			return (this.files || []).filter(v => !v.hideFromList);
 		}
 	},
 	watch: {
@@ -259,8 +259,8 @@ export default {
 		},
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return false;
-			const found = this.showingModalForFile.albums.find((el) => el.id === id);
-			return !!(found && found.id);
+			const found = this.showingModalForFile.albums.find(el => el.id === id);
+			return Boolean(found && found.id);
 		},
 		async openAlbumModal(file) {
 			const { id } = file;
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index af2af3f..5a4c569 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -24,24 +24,24 @@ export default {
 	},
 	props: {
 		options: {
-			type: Object,
-			default: () => {}
+			'type': Object,
+			'default': () => {}
 		},
 		items: {
-			type: Array,
-			default: () => []
+			'type': Array,
+			'default': () => []
 		},
 		itemWidth: {
-			type: Number,
-			default: 150
+			'type': Number,
+			'default': 150
 		},
 		gutterWidth: {
-			type: Number,
-			default: 10
+			'type': Number,
+			'default': 10
 		},
 		gutterHeight: {
-			type: Number,
-			default: 4
+			'type': Number,
+			'default': 4
 		}
 	},
 	mounted() {
@@ -84,20 +84,20 @@ export default {
 			this.masonry.layout();
 		},
 		diffDomChildren() {
-			const oldChildren = this.domChildren.filter((element) => !!element.parentNode);
+			const oldChildren = this.domChildren.filter(element => Boolean(element.parentNode));
 			const newChildren = this.getNewDomChildren();
-			const removed = oldChildren.filter((oldChild) => !newChildren.includes(oldChild));
-			const domDiff = newChildren.filter((newChild) => !oldChildren.includes(newChild));
+			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));
+			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,
+				'old': oldChildren,
+				'new': newChildren,
 				removed,
 				appended,
 				prepended,
@@ -120,15 +120,10 @@ export default {
 		getNewDomChildren() {
 			const node = this.$refs.waterfall;
 			const children = this.options && this.options.itemSelector
-				? node.querySelectorAll(this.options.itemSelector) : node.children;
+				? node.querySelectorAll(this.options.itemSelector)
+				: node.children;
 			return Array.prototype.slice.call(children);
 		}
 	}
 };
 </script>
-
-<style lang="scss" scoped>
-.wfi {
-
-}
-</style>
-- 
cgit v1.2.3


From 09d8d02e6c11bb4aea9cd129bf195868bab0738f Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Fri, 25 Dec 2020 02:08:54 +0900
Subject: Cleanup

---
 src/site/components/grid/Grid.vue | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 0693c77..0c0ac96 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -388,10 +388,6 @@ div.preview {
 
 div.actions {
 	opacity: 0;
-	-webkit-transition: opacity 0.1s linear;
-	-moz-transition: opacity 0.1s linear;
-	-ms-transition: opacity 0.1s linear;
-	-o-transition: opacity 0.1s linear;
 	transition: opacity 0.1s linear;
 	position: absolute;
 	top: 0px;
-- 
cgit v1.2.3


From 7190e035b441aef96c8249bb02d12f7cd55a17d9 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Fri, 25 Dec 2020 20:17:47 +0900
Subject: chore: style changes

---
 src/site/components/grid/Grid.vue | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/site/components/grid')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 0c0ac96..9e1ce6f 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -217,7 +217,6 @@ export default {
 			images: state => state.images
 		}),
 		blank() {
-			// eslint-disable-next-line global-require, import/no-unresolved
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
-- 
cgit v1.2.3