Advertisement
Guest User

Untitled

a guest
Jan 29th, 2020
121
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.79 KB | None | 0 0
  1. const legendItems = document.querySelectorAll(
  2. ".localizations-map-legend li"
  3. );
  4.  
  5. function removeAllPointsWrappers() {
  6. const points = document.querySelectorAll(".map-point-wrapper");
  7. if (points) {
  8. points.forEach(point => {
  9. $(point).fadeOut();
  10. setTimeout(() => {
  11. point.remove();
  12. }, 500);
  13. });
  14. }
  15. }
  16.  
  17. function showPointName(point, e) {
  18. var m_posx = 0,
  19. m_posy = 0,
  20. e_posx = 0,
  21. e_posy = 0,
  22. obj = document.querySelector(
  23. ".localizations-map-svg-container"
  24. );
  25.  
  26. if (!e) {
  27. e = window.event;
  28. }
  29. if (e.pageX || e.pageY) {
  30. m_posx = e.pageX;
  31. m_posy = e.pageY;
  32. } else if (e.clientX || e.clientY) {
  33. m_posx =
  34. e.clientX +
  35. document.body.scrollLeft +
  36. document.documentElement.scrollLeft;
  37. m_posy =
  38. e.clientY +
  39. document.body.scrollTop +
  40. document.documentElement.scrollTop;
  41. }
  42.  
  43. if (obj.offsetParent) {
  44. do {
  45. e_posx += obj.offsetLeft;
  46. e_posy += obj.offsetTop;
  47. } while ((obj = obj.offsetParent));
  48. }
  49.  
  50. const x = m_posx - e_posx;
  51. const y = m_posy - e_posy;
  52.  
  53. const nameWrapper = document.createElement("div");
  54. const pointName = point.getAttribute("data-name");
  55. nameWrapper.classList.add("map-point-wrapper");
  56. nameWrapper.innerHTML = `<p>${pointName}</p>`;
  57. nameWrapper.style.left = x + "px";
  58. nameWrapper.style.top = y - 80 + "px";
  59. point.parentElement.parentElement.parentElement.appendChild(
  60. nameWrapper
  61. );
  62. $(nameWrapper).fadeIn();
  63. }
  64.  
  65. function addEventToMapPoints() {
  66. const points = [
  67. ...document.querySelectorAll(
  68. ".localizations-map-svg-container svg g"
  69. )
  70. ].filter(el => el.id.includes("kropka"));
  71. points.forEach(point => {
  72. point.addEventListener("mouseover", event => {
  73. if (point.classList.contains("active")) return;
  74. point.classList.add("active");
  75. showPointName(point.children[1], event);
  76. });
  77.  
  78. point.addEventListener("mouseleave", event => {
  79. point.classList.remove("active");
  80. removeAllPointsWrappers();
  81. });
  82. });
  83. }
  84.  
  85. function activateLocalizationsPoints() {
  86. legendItems.forEach(point => {
  87. point.addEventListener("click", event => {
  88. legendItems.forEach(clickedPoint =>
  89. clickedPoint.classList.remove("active")
  90. );
  91. event.currentTarget.classList.add("active");
  92. });
  93. });
  94. }
  95.  
  96. if (legendItems) {
  97. activateLocalizationsPoints();
  98. addEventToMapPoints();
  99. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement