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

---
 .../components/grid/waterfall/WaterfallItem.vue    | 29 +++++++++++-----------
 1 file changed, 15 insertions(+), 14 deletions(-)

(limited to 'src/site/components/grid/waterfall/WaterfallItem.vue')

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