aboutsummaryrefslogtreecommitdiff
path: root/src/site/components/grid/waterfall/WaterfallItem.vue
diff options
context:
space:
mode:
authorZephyrrus <[email protected]>2020-07-07 02:50:03 +0300
committerZephyrrus <[email protected]>2020-07-07 02:50:03 +0300
commit5d61b4d000a114857e4519be25c5834f510d450f (patch)
tree022c0057c6a634a84f51dac4dd9a404736d93bf7 /src/site/components/grid/waterfall/WaterfallItem.vue
parentfeat: try fixing THE SHITTY WATERFALL (diff)
downloadhost.fuwn.me-5d61b4d000a114857e4519be25c5834f510d450f.tar.xz
host.fuwn.me-5d61b4d000a114857e4519be25c5834f510d450f.zip
feat: refactor waterfall to be more efficient
Diffstat (limited to 'src/site/components/grid/waterfall/WaterfallItem.vue')
-rw-r--r--src/site/components/grid/waterfall/WaterfallItem.vue72
1 files changed, 0 insertions, 72 deletions
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>