Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

VParallax.js 2.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. require('../../../src/stylus/components/_parallax.styl');
  6. var _translatable = require('../../mixins/translatable');
  7. var _translatable2 = _interopRequireDefault(_translatable);
  8. var _mixins = require('../../util/mixins');
  9. var _mixins2 = _interopRequireDefault(_mixins);
  10. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  11. /* @vue/component */
  12. // Mixins
  13. exports.default = (0, _mixins2.default)(_translatable2.default).extend({
  14. name: 'v-parallax',
  15. props: {
  16. alt: {
  17. type: String,
  18. default: ''
  19. },
  20. height: {
  21. type: [String, Number],
  22. default: 500
  23. },
  24. src: String
  25. },
  26. data: function data() {
  27. return {
  28. isBooted: false
  29. };
  30. },
  31. computed: {
  32. styles: function styles() {
  33. return {
  34. display: 'block',
  35. opacity: this.isBooted ? 1 : 0,
  36. transform: 'translate(-50%, ' + this.parallax + 'px)'
  37. };
  38. }
  39. },
  40. watch: {
  41. parallax: function parallax() {
  42. this.isBooted = true;
  43. }
  44. },
  45. mounted: function mounted() {
  46. this.init();
  47. },
  48. methods: {
  49. init: function init() {
  50. var _this = this;
  51. var img = this.$refs.img;
  52. if (!img) return;
  53. if (img.complete) {
  54. this.translate();
  55. this.listeners();
  56. } else {
  57. img.addEventListener('load', function () {
  58. _this.translate();
  59. _this.listeners();
  60. }, false);
  61. }
  62. },
  63. objHeight: function objHeight() {
  64. return this.$refs.img.naturalHeight;
  65. }
  66. },
  67. render: function render(h) {
  68. var imgData = {
  69. staticClass: 'v-parallax__image',
  70. style: this.styles,
  71. attrs: {
  72. src: this.src,
  73. alt: this.alt
  74. },
  75. ref: 'img'
  76. };
  77. var container = h('div', {
  78. staticClass: 'v-parallax__image-container'
  79. }, [h('img', imgData)]);
  80. var content = h('div', {
  81. staticClass: 'v-parallax__content'
  82. }, this.$slots.default);
  83. return h('div', {
  84. staticClass: 'v-parallax',
  85. style: {
  86. height: this.height + 'px'
  87. },
  88. on: this.$listeners
  89. }, [container, content]);
  90. }
  91. }); // Style
  92. //# sourceMappingURL=VParallax.js.map