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.

translatable.js 2.0KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _vue = require('vue');
  6. var _vue2 = _interopRequireDefault(_vue);
  7. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  8. exports.default = _vue2.default.extend({
  9. name: 'translatable',
  10. props: {
  11. height: Number
  12. },
  13. data: function data() {
  14. return {
  15. elOffsetTop: 0,
  16. parallax: 0,
  17. parallaxDist: 0,
  18. percentScrolled: 0,
  19. scrollTop: 0,
  20. windowHeight: 0,
  21. windowBottom: 0
  22. };
  23. },
  24. computed: {
  25. imgHeight: function imgHeight() {
  26. return this.objHeight();
  27. }
  28. },
  29. beforeDestroy: function beforeDestroy() {
  30. window.removeEventListener('scroll', this.translate, false);
  31. window.removeEventListener('resize', this.translate, false);
  32. },
  33. methods: {
  34. calcDimensions: function calcDimensions() {
  35. var offset = this.$el.getBoundingClientRect();
  36. this.scrollTop = window.pageYOffset;
  37. this.parallaxDist = this.imgHeight - this.height;
  38. this.elOffsetTop = offset.top + this.scrollTop;
  39. this.windowHeight = window.innerHeight;
  40. this.windowBottom = this.scrollTop + this.windowHeight;
  41. },
  42. listeners: function listeners() {
  43. window.addEventListener('scroll', this.translate, false);
  44. window.addEventListener('resize', this.translate, false);
  45. },
  46. /** @abstract **/
  47. objHeight: function objHeight() {
  48. throw new Error('Not implemented !');
  49. },
  50. translate: function translate() {
  51. this.calcDimensions();
  52. this.percentScrolled = (this.windowBottom - this.elOffsetTop) / (parseInt(this.height) + this.windowHeight);
  53. this.parallax = Math.round(this.parallaxDist * this.percentScrolled);
  54. }
  55. }
  56. });
  57. //# sourceMappingURL=translatable.js.map