refactor: CImageLazy: add loadInitially prop, refactor props, fix offset

Author: woothu

src/components/Image/CImageLazy.vue

@@ -4,27 +4,25 @@ export default {
   name: 'CImageLazy',
   extends: CImage,
   props: {
+    loadInitially: Boolean,
     loadOffset: {
-      type: [Number, String, Boolean],
+      type: Number,
       default: 500
     },
-    fade: {
-      type: Boolean,
-      default: true
-    },
+    noFade: Boolean,
     fadeOffset: {
-      type: [Number, String, Boolean],
+      type: Number,
       default: -100
     },
     fadeTime: {
-      type: [Number, String],
+      type: Number,
       default: 1500
     }
   },
   data () {
     return {
-      active: this.loadOffset === false,
-      animated: this.fadeOffset === false
+      active: this.loadInitially,
+      animated: this.noFade
     }
   },
   mounted () {
@@ -36,31 +34,40 @@ export default {
   },
   computed: {
     animationClasses () {
-      if (this.fade) {
+      if (!this.noFade) {
         return { 'c-opacity-0' : !this.animated }
       }
+    },
+    propOffset () {
+      return !this.active ? this.loadOffset : this.fadeOffset
     }
   },
   methods: {
     checkPosition () {
       const rect = this.$el.getBoundingClientRect()
-      const offset = !this.active ? this.loadOffset : this.fadeOffset
+      const offset = this.getOffset(rect.height || 0)
       const positionTop = window.innerHeight - rect.top + offset
       const positionBottom = rect.bottom + offset
       if (positionTop > 0 && positionBottom > 0) {
         !this.active ? this.load() : this.animate()
       }
     },
+    getOffset (imageHeight) {
+      const minimalOffset = - (window.innerHeight + imageHeight) / 2 + 50
+      return this.propOffset < minimalOffset ? minimalOffset : this.propOffset
+    },
     load () {
       this.active = true
-      if (!this.fade) {
+      if (this.noFade) {
         this.removeListener()
+      } else if (this.fadeOffset >= this.loadOffset) {
+        this.$nextTick(() => this.animate())
       }
     },
     animate () {
+      this.removeListener()
       this.$el.style.transition = `opacity ${this.fadeTime}ms ease-in-out`
       this.animated = true
-      this.removeListener()
     },
     removeListener () {
       return document.removeEventListener('scroll', this.checkPosition)