// Thanks to: https://github.com/airyland/vux/blob/v2/src/directives/transfer-dom/index.js // Thanks to: https://github.com/calebroseland/vue-dom-portal /** * Get target DOM Node * @param {(Node|string|Boolean)} [node=document.body] DOM Node, CSS selector, or Boolean * @return {Node} The target that the el will be appended to */ function getTarget (node) { if (node === void 0) { node = document.body } if (node === true) { return document.body } return node instanceof window.Node ? node : document.querySelector(node) } const directive = { inserted (el, { value }, vnode) { el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom'; const parentNode = el.parentNode; const home = document.createComment(''); let hasMovedOut = false; if (value !== false) { parentNode.replaceChild(home, el); // moving out, el is no longer in the document getTarget(value).appendChild(el); // moving into new place hasMovedOut = true } if (!el.__transferDomData) { el.__transferDomData = { parentNode: parentNode, home: home, target: getTarget(value), hasMovedOut: hasMovedOut } } }, componentUpdated (el, { value }) { // need to make sure children are done updating (vs. `update`) const ref$1 = el.__transferDomData; // homes.get(el) const parentNode = ref$1.parentNode; const home = ref$1.home; const hasMovedOut = ref$1.hasMovedOut; // recall where home is if (!hasMovedOut && value) { // remove from document and leave placeholder parentNode.replaceChild(home, el); // append to target getTarget(value).appendChild(el); el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: true, target: getTarget(value) }); } else if (hasMovedOut && value === false) { // previously moved, coming back home parentNode.replaceChild(el, home); el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: false, target: getTarget(value) }); } else if (value) { // already moved, going somewhere else getTarget(value).appendChild(el); } }, unbind: function unbind (el, binding) { el.className = el.className.replace('v-transfer-dom', '') if (el.__transferDomData.hasMovedOut === true) { el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el) } el.__transferDomData = null } }; export default directive;