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.

VWindowItem.js 4.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _bootable = require('../../mixins/bootable');
  6. var _bootable2 = _interopRequireDefault(_bootable);
  7. var _groupable = require('../../mixins/groupable');
  8. var _touch = require('../../directives/touch');
  9. var _touch2 = _interopRequireDefault(_touch);
  10. var _helpers = require('../../util/helpers');
  11. var _mixins = require('../../util/mixins');
  12. var _mixins2 = _interopRequireDefault(_mixins);
  13. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  14. // Utilities
  15. exports.default = (0, _mixins2.default)(_bootable2.default, (0, _groupable.factory)('windowGroup', 'v-window-item', 'v-window')
  16. /* @vue/component */
  17. ).extend({
  18. name: 'v-window-item',
  19. directives: {
  20. Touch: _touch2.default
  21. },
  22. props: {
  23. reverseTransition: {
  24. type: [Boolean, String],
  25. default: undefined
  26. },
  27. transition: {
  28. type: [Boolean, String],
  29. default: undefined
  30. },
  31. value: {
  32. required: false
  33. }
  34. },
  35. data: function data() {
  36. return {
  37. done: null,
  38. isActive: false,
  39. wasCancelled: false
  40. };
  41. },
  42. computed: {
  43. computedTransition: function computedTransition() {
  44. if (!this.windowGroup.internalReverse) {
  45. return typeof this.transition !== 'undefined' ? this.transition || '' : this.windowGroup.computedTransition;
  46. }
  47. return typeof this.reverseTransition !== 'undefined' ? this.reverseTransition || '' : this.windowGroup.computedTransition;
  48. }
  49. },
  50. mounted: function mounted() {
  51. this.$el.addEventListener('transitionend', this.onTransitionEnd, false);
  52. },
  53. beforeDestroy: function beforeDestroy() {
  54. this.$el.removeEventListener('transitionend', this.onTransitionEnd, false);
  55. },
  56. methods: {
  57. genDefaultSlot: function genDefaultSlot() {
  58. return this.$slots.default;
  59. },
  60. onAfterEnter: function onAfterEnter() {
  61. var _this = this;
  62. if (this.wasCancelled) {
  63. this.wasCancelled = false;
  64. return;
  65. }
  66. requestAnimationFrame(function () {
  67. _this.windowGroup.internalHeight = undefined;
  68. _this.windowGroup.isActive = false;
  69. });
  70. },
  71. onBeforeEnter: function onBeforeEnter() {
  72. this.windowGroup.isActive = true;
  73. },
  74. onLeave: function onLeave(el) {
  75. this.windowGroup.internalHeight = (0, _helpers.convertToUnit)(el.clientHeight);
  76. },
  77. onEnterCancelled: function onEnterCancelled() {
  78. this.wasCancelled = true;
  79. },
  80. onEnter: function onEnter(el, done) {
  81. var _this2 = this;
  82. var isBooted = this.windowGroup.isBooted;
  83. if (isBooted) this.done = done;
  84. requestAnimationFrame(function () {
  85. if (!_this2.computedTransition) return done();
  86. _this2.windowGroup.internalHeight = (0, _helpers.convertToUnit)(el.clientHeight);
  87. // On initial render, there is no transition
  88. // Vue leaves a `enter` transition class
  89. // if done is called too fast
  90. !isBooted && setTimeout(done, 100);
  91. });
  92. },
  93. onTransitionEnd: function onTransitionEnd(e) {
  94. // This ensures we only call done
  95. // when the element transform
  96. // completes
  97. if (e.propertyName !== 'transform' || e.target !== this.$el || !this.done) return;
  98. this.done();
  99. this.done = null;
  100. }
  101. },
  102. render: function render(h) {
  103. var div = h('div', {
  104. staticClass: 'v-window-item',
  105. directives: [{
  106. name: 'show',
  107. value: this.isActive
  108. }],
  109. on: this.$listeners
  110. }, this.showLazyContent(this.genDefaultSlot()));
  111. return h('transition', {
  112. props: {
  113. name: this.computedTransition
  114. },
  115. on: {
  116. afterEnter: this.onAfterEnter,
  117. beforeEnter: this.onBeforeEnter,
  118. leave: this.onLeave,
  119. enter: this.onEnter,
  120. enterCancelled: this.onEnterCancelled
  121. }
  122. }, [div]);
  123. }
  124. });
  125. // Directives
  126. // Mixins
  127. //# sourceMappingURL=VWindowItem.js.map