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.

detachable.js 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
  2. function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  3. import Bootable from './bootable';
  4. import { consoleWarn } from '../util/console';
  5. function validateAttachTarget(val) {
  6. var type = typeof val === 'undefined' ? 'undefined' : _typeof(val);
  7. if (type === 'boolean' || type === 'string') return true;
  8. return val.nodeType === Node.ELEMENT_NODE;
  9. }
  10. /* @vue/component */
  11. export default {
  12. name: 'detachable',
  13. mixins: [Bootable],
  14. props: {
  15. attach: {
  16. type: null,
  17. default: false,
  18. validator: validateAttachTarget
  19. },
  20. contentClass: {
  21. default: ''
  22. }
  23. },
  24. data: function data() {
  25. return {
  26. hasDetached: false
  27. };
  28. },
  29. watch: {
  30. attach: function attach() {
  31. this.hasDetached = false;
  32. this.initDetach();
  33. },
  34. hasContent: 'initDetach'
  35. },
  36. beforeMount: function beforeMount() {
  37. var _this = this;
  38. this.$nextTick(function () {
  39. if (_this.activatorNode) {
  40. var activator = Array.isArray(_this.activatorNode) ? _this.activatorNode : [_this.activatorNode];
  41. activator.forEach(function (node) {
  42. node.elm && _this.$el.parentNode.insertBefore(node.elm, _this.$el);
  43. });
  44. }
  45. });
  46. },
  47. mounted: function mounted() {
  48. !this.lazy && this.initDetach();
  49. },
  50. deactivated: function deactivated() {
  51. this.isActive = false;
  52. },
  53. beforeDestroy: function beforeDestroy() {
  54. // IE11 Fix
  55. try {
  56. if (this.$refs.content) {
  57. this.$refs.content.parentNode.removeChild(this.$refs.content);
  58. }
  59. if (this.activatorNode) {
  60. var activator = Array.isArray(this.activatorNode) ? this.activatorNode : [this.activatorNode];
  61. activator.forEach(function (node) {
  62. node.elm && node.elm.parentNode.removeChild(node.elm);
  63. });
  64. }
  65. } catch (e) {
  66. console.log(e);
  67. }
  68. },
  69. methods: {
  70. getScopeIdAttrs: function getScopeIdAttrs() {
  71. var scopeId = this.$vnode && this.$vnode.context.$options._scopeId;
  72. return scopeId && _defineProperty({}, scopeId, '');
  73. },
  74. initDetach: function initDetach() {
  75. if (this._isDestroyed || !this.$refs.content || this.hasDetached ||
  76. // Leave menu in place if attached
  77. // and dev has not changed target
  78. this.attach === '' || // If used as a boolean prop (<v-menu attach>)
  79. this.attach === true || // If bound to a boolean (<v-menu :attach="true">)
  80. this.attach === 'attach' // If bound as boolean prop in pug (v-menu(attach))
  81. ) return;
  82. var target = void 0;
  83. if (this.attach === false) {
  84. // Default, detach to app
  85. target = document.querySelector('[data-app]');
  86. } else if (typeof this.attach === 'string') {
  87. // CSS selector
  88. target = document.querySelector(this.attach);
  89. } else {
  90. // DOM Element
  91. target = this.attach;
  92. }
  93. if (!target) {
  94. consoleWarn('Unable to locate target ' + (this.attach || '[data-app]'), this);
  95. return;
  96. }
  97. target.insertBefore(this.$refs.content, target.firstChild);
  98. this.hasDetached = true;
  99. }
  100. }
  101. };
  102. //# sourceMappingURL=detachable.js.map