openCloseComponent.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. /*!
  2. * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  4. * v1.0.0-beta.97
  5. */
  6. const componentToTransitionListeners = new WeakMap();
  7. function transitionStart(event) {
  8. if (event.propertyName === this.openTransitionProp && event.target === this.transitionEl) {
  9. this.open ? this.onBeforeOpen() : this.onBeforeClose();
  10. }
  11. }
  12. function transitionEnd(event) {
  13. if (event.propertyName === this.openTransitionProp && event.target === this.transitionEl) {
  14. this.open ? this.onOpen() : this.onClose();
  15. }
  16. }
  17. /**
  18. * Helper to keep track of transition listeners on setTransitionEl and connectedCallback on OpenCloseComponent components.
  19. *
  20. * @param component
  21. */
  22. function connectOpenCloseComponent(component) {
  23. disconnectOpenCloseComponent(component);
  24. if (component.transitionEl) {
  25. const boundOnTransitionStart = transitionStart.bind(component);
  26. const boundOnTransitionEnd = transitionEnd.bind(component);
  27. componentToTransitionListeners.set(component, [
  28. component.transitionEl,
  29. boundOnTransitionStart,
  30. boundOnTransitionEnd
  31. ]);
  32. component.transitionEl.addEventListener("transitionstart", boundOnTransitionStart);
  33. component.transitionEl.addEventListener("transitionend", boundOnTransitionEnd);
  34. }
  35. }
  36. /**
  37. * Helper to tear down transition listeners on disconnectedCallback on OpenCloseComponent components.
  38. *
  39. * @param component
  40. */
  41. function disconnectOpenCloseComponent(component) {
  42. if (!componentToTransitionListeners.has(component)) {
  43. return;
  44. }
  45. const [transitionEl, start, end] = componentToTransitionListeners.get(component);
  46. transitionEl.removeEventListener("transitionstart", start);
  47. transitionEl.removeEventListener("transitionend", end);
  48. componentToTransitionListeners.delete(component);
  49. }
  50. export { connectOpenCloseComponent as c, disconnectOpenCloseComponent as d };