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.0KB

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