updated parallax image load, added jumbotron, updated deprecated test

src/components/VParallax/VParallax.spec.js

@@ -2,12 +2,11 @@ import { test } from '~util/testing'
 import VParallax from '~components/VParallax'
 
 test('VParallax.js', ({ mount }) => {
-  it('should abandon init if already destroyed', async () => {
+  it('should render', async () => {
     const wrapper = mount(VParallax, {
       attachToDocument: true
     })
 
-    wrapper.vm.$destroy()
-    wrapper.vm.init()
+    expect(wrapper.html()).toMatchSnapshot()
   })
 })

src/components/VParallax/VParallax.vue

@@ -6,37 +6,38 @@
 
     mixins: [Translatable],
 
+    data () {
+      return {
+        isBooted: false
+      }
+    },
+
     props: {
       height: {
         type: [String, Number],
         default: 500
       },
+      jumbotron: Boolean,
       src: String
     },
 
     computed: {
       styles () {
         return {
           display: 'block',
+          opacity: this.isBooted ? 1 : 0,
           transform: `translate3d(-50%, ${this.parallax}px, 0)`
         }
       }
     },
 
-    methods: {
-      init () {
-        if (!this.$refs.img) return
+    watch: {
+      parallax () {
+        this.isBooted = true
+      }
+    },
 
-        if (this.$refs.img.complete) {
-          this.translate()
-          this.listeners()
-        } else {
-          this.$refs.img.addEventListener('load', () => {
-            this.translate()
-            this.listeners()
-          }, false)
-        }
-      },
+    methods: {
       objHeight () {
         return this.$refs.img.naturalHeight
       },
@@ -63,13 +64,23 @@
         staticClass: 'parallax__content'
       }, this.$slots.default)
 
+      let directives = this.directives()
+
+      if (this.jumbotron) {
+        directives = directives.filter(d => d.name !== 'scroll')
+      }
+
       return h('div', {
         staticClass: 'parallax',
         style: {
-          height: `${parseInt(this.normalizedHeight)}px`
+          minHeight: isNaN(this.height) ? this.height : `${this.height}px`
         },
+        directives,
         on: this.$listeners
-      }, [container, content])
+      }, [
+        container,
+        content
+      ])
     }
   }
 </script>

src/components/VParallax/__snapshots__/VParallax.spec.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VParallax.js should render 1`] = `
+
+<div class="parallax"
+     style="min-height: 500px;"
+>
+  <div class="parallax__image-container">
+    <img class="parallax__image"
+         style="display: block; opacity: 0;"
+    >
+  </div>
+  <div class="parallax__content">
+  </div>
+</div>
+
+`;

src/mixins/translatable.js

@@ -1,6 +1,15 @@
+import Resize from '../directives/resize'
+import Scroll from '../directives/scroll'
+
 export default {
+  directives: {
+    Resize,
+    Scroll
+  },
+
   data () {
     return {
+      normalizedHeight: null,
       parallax: null,
       parallaxDist: null,
       percentScrolled: null,
@@ -11,28 +20,29 @@ export default {
   },
 
   computed: {
-    normalizedHeight () {
-      return Number(this.height.toString().replace(/(^[0-9]*$)/, '$1'))
-    },
-
     imgHeight () {
       return this.objHeight()
     }
   },
 
-  mounted () {
-    this.$vuetify.load(this.init)
-  },
-
-  beforeDestroy () {
-    window.removeEventListener('scroll', this.translate, false)
-    window.removeEventListener('resize', this.translate, false)
+  watch: {
+    height () {
+      this.$nextTick(this.translate)
+    }
   },
 
   methods: {
-    listeners () {
-      window.addEventListener('scroll', this.translate, false)
-      window.addEventListener('resize', this.translate, false)
+    directives () {
+      return [
+        {
+          name: 'scroll',
+          value: this.translate
+        },
+        {
+          name: 'resize',
+          value: this.translate
+        }
+      ]
     },
 
     translate () {
@@ -53,6 +63,7 @@ export default {
     calcDimensions () {
       const offset = this.$el.getBoundingClientRect()
 
+      this.normalizedHeight = offset.height
       this.scrollTop = window.pageYOffset
       this.parallaxDist = this.imgHeight - this.normalizedHeight
       this.elOffsetTop = offset.top + this.scrollTop

src/stylus/components/_parallax.styl

@@ -21,6 +21,7 @@
     min-height: 100%
     display: none
     transform: translate3d(-50%, 0, 0)
+    transition: .3s opacity $transition.swing
     z-index: 1
 
   &__content