diff options
| author | Zephyrrus <[email protected]> | 2020-07-07 02:50:03 +0300 |
|---|---|---|
| committer | Zephyrrus <[email protected]> | 2020-07-07 02:50:03 +0300 |
| commit | 5d61b4d000a114857e4519be25c5834f510d450f (patch) | |
| tree | 022c0057c6a634a84f51dac4dd9a404736d93bf7 /src/site/components/grid/waterfall/WaterfallItem.vue | |
| parent | feat: try fixing THE SHITTY WATERFALL (diff) | |
| download | host.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.vue | 72 |
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> |