transfer-dom.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. function getTarget (node) {
  2. if (node === void 0) {
  3. node = document.body
  4. }
  5. if (node === true) { return document.body }
  6. return node instanceof window.Node ? node : document.querySelector(node)
  7. }
  8. const directive = {
  9. inserted (el, { value }, vnode) {
  10. if ( el.dataset && el.dataset.transfer !== 'true') return false;
  11. el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
  12. const parentNode = el.parentNode;
  13. if (!parentNode) return;
  14. const home = document.createComment('');
  15. let hasMovedOut = false;
  16. if (value !== false) {
  17. parentNode.replaceChild(home, el); // moving out, el is no longer in the document
  18. getTarget(value).appendChild(el); // moving into new place
  19. hasMovedOut = true
  20. }
  21. if (!el.__transferDomData) {
  22. el.__transferDomData = {
  23. parentNode: parentNode,
  24. home: home,
  25. target: getTarget(value),
  26. hasMovedOut: hasMovedOut
  27. }
  28. }
  29. },
  30. componentUpdated (el, { value }) {
  31. if ( el.dataset && el.dataset.transfer !== 'true') return false;
  32. // need to make sure children are done updating (vs. `update`)
  33. const ref$1 = el.__transferDomData;
  34. if (!ref$1) return;
  35. // homes.get(el)
  36. const parentNode = ref$1.parentNode;
  37. const home = ref$1.home;
  38. const hasMovedOut = ref$1.hasMovedOut; // recall where home is
  39. if (!hasMovedOut && value) {
  40. // remove from document and leave placeholder
  41. parentNode.replaceChild(home, el);
  42. // append to target
  43. getTarget(value).appendChild(el);
  44. el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: true, target: getTarget(value) });
  45. } else if (hasMovedOut && value === false) {
  46. // previously moved, coming back home
  47. parentNode.replaceChild(el, home);
  48. el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: false, target: getTarget(value) });
  49. } else if (value) {
  50. // already moved, going somewhere else
  51. getTarget(value).appendChild(el);
  52. }
  53. },
  54. unbind (el) {
  55. if (el.dataset && el.dataset.transfer !== 'true') return false;
  56. el.className = el.className.replace('v-transfer-dom', '');
  57. const ref$1 = el.__transferDomData;
  58. if (!ref$1) return;
  59. if (el.__transferDomData.hasMovedOut === true) {
  60. el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)
  61. }
  62. el.__transferDomData = null
  63. }
  64. };
  65. export default directive;