1
// Style
2
import './VParallax.sass'
3

4
// Mixins
5
import Translatable from '../../mixins/translatable'
6

7
// Types
8
import { VNode, VNodeData } from 'vue/types/vnode'
9
import mixins from '../../util/mixins'
10

11 1
const baseMixins = mixins(
12
  Translatable
13
)
14
interface options extends InstanceType<typeof baseMixins> {
15
  $refs: {
16
    img: HTMLImageElement
17
  }
18
}
19

20
/* @vue/component */
21
export default baseMixins.extend<options>().extend({
22
  name: 'v-parallax',
23

24
  props: {
25
    alt: {
26
      type: String,
27
      default: '',
28
    },
29
    height: {
30
      type: [String, Number],
31
      default: 500,
32
    },
33
    src: String,
34
    srcset: String,
35
  },
36

37 1
  data: () => ({
38
    isBooted: false,
39
  }),
40

41
  computed: {
42 1
    styles (): object {
43 1
      return {
44
        display: 'block',
45 1
        opacity: this.isBooted ? 1 : 0,
46
        transform: `translate(-50%, ${this.parallax}px)`,
47
      }
48
    },
49
  },
50

51 1
  mounted () {
52 1
    this.init()
53
  },
54

55
  methods: {
56 1
    init () {
57 1
      const img = this.$refs.img
58

59 1
      if (!img) return
60

61 1
      if (img.complete) {
62 0
        this.translate()
63 0
        this.listeners()
64
      } else {
65 1
        img.addEventListener('load', () => {
66 0
          this.translate()
67 0
          this.listeners()
68
        }, false)
69
      }
70

71 1
      this.isBooted = true
72
    },
73 0
    objHeight () {
74 0
      return this.$refs.img.naturalHeight
75
    },
76
  },
77

78 1
  render (h): VNode {
79 1
    const imgData: VNodeData = {
80
      staticClass: 'v-parallax__image',
81
      style: this.styles,
82
      attrs: {
83
        src: this.src,
84
        srcset: this.srcset,
85
        alt: this.alt,
86
      },
87
      ref: 'img',
88
    }
89

90 1
    const container = h('div', {
91
      staticClass: 'v-parallax__image-container',
92
    }, [
93
      h('img', imgData),
94
    ])
95

96 1
    const content = h('div', {
97
      staticClass: 'v-parallax__content',
98
    }, this.$slots.default)
99

100 1
    return h('div', {
101
      staticClass: 'v-parallax',
102
      style: {
103
        height: `${this.height}px`,
104
      },
105
      on: this.$listeners,
106
    }, [container, content])
107
  },
108
})

Read our documentation on viewing source code .

Loading