aboutsummaryrefslogtreecommitdiff
path: root/src/site/components/grid/waterfall/WaterfallItem.vue
diff options
context:
space:
mode:
authorZephyrrus <[email protected]>2020-07-10 01:17:00 +0300
committerGitHub <[email protected]>2020-07-10 01:17:00 +0300
commita721681944e9eb06742e5b3f71c71aed9c1c117d (patch)
tree93ff9fd13a0434d91fb1ae7ca0da48d6929c4d00 /src/site/components/grid/waterfall/WaterfallItem.vue
parentfeat: backend pagination for albums (diff)
parentrefactor: finish refactoring all the components to use vuex (diff)
downloadhost.fuwn.me-a721681944e9eb06742e5b3f71c71aed9c1c117d.tar.xz
host.fuwn.me-a721681944e9eb06742e5b3f71c71aed9c1c117d.zip
Merge pull request #1 from Zephyrrus/feature/store_refactor
Feature/store refactor
Diffstat (limited to 'src/site/components/grid/waterfall/WaterfallItem.vue')
-rw-r--r--src/site/components/grid/waterfall/WaterfallItem.vue52
1 files changed, 1 insertions, 51 deletions
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index a02ea1f..c5cade1 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -1,60 +1,10 @@
-<style>
- .waterfall-item {
- position: absolute;
- }
-</style>
<template>
<div class="waterfall-item">
<slot />
</div>
</template>
<script>
-import imagesLoaded from 'imagesloaded';
export default {
name: 'WaterfallItem',
- props: {
- order: {
- type: Number,
- default: 0
- },
- width: {
- type: Number,
- default: 150
- }
- },
- data() {
- return {
- itemWidth: 0,
- height: 0
- };
- },
- created() {
- this.$watch(() => this.height, this.emit);
- },
- mounted() {
- this.$el.style.display = 'none';
- this.$el.style.width = `${this.width}px`;
- this.emit();
- imagesLoaded(this.$el, () => {
- this.$el.style.left = '-9999px';
- this.$el.style.top = '-9999px';
- this.$el.style.display = 'block';
- this.height = this.$el.offsetHeight;
- this.itemWidth = this.$el.offsetWidth;
- });
- },
- methods: {
- emit() {
- this.$parent.$emit('itemRender');
- },
- getMeta() {
- return {
- el: this.$el,
- height: this.height,
- width: this.itemWidth,
- order: this.order
- };
- }
- }
-}
+};
</script>