Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const legendItems = document.querySelectorAll(
- ".localizations-map-legend li"
- );
- function removeAllPointsWrappers() {
- const points = document.querySelectorAll(".map-point-wrapper");
- if (points) {
- points.forEach(point => {
- $(point).fadeOut();
- setTimeout(() => {
- point.remove();
- }, 500);
- });
- }
- }
- function showPointName(point, e) {
- var m_posx = 0,
- m_posy = 0,
- e_posx = 0,
- e_posy = 0,
- obj = document.querySelector(
- ".localizations-map-svg-container"
- );
- if (!e) {
- e = window.event;
- }
- if (e.pageX || e.pageY) {
- m_posx = e.pageX;
- m_posy = e.pageY;
- } else if (e.clientX || e.clientY) {
- m_posx =
- e.clientX +
- document.body.scrollLeft +
- document.documentElement.scrollLeft;
- m_posy =
- e.clientY +
- document.body.scrollTop +
- document.documentElement.scrollTop;
- }
- if (obj.offsetParent) {
- do {
- e_posx += obj.offsetLeft;
- e_posy += obj.offsetTop;
- } while ((obj = obj.offsetParent));
- }
- const x = m_posx - e_posx;
- const y = m_posy - e_posy;
- const nameWrapper = document.createElement("div");
- const pointName = point.getAttribute("data-name");
- nameWrapper.classList.add("map-point-wrapper");
- nameWrapper.innerHTML = `<p>${pointName}</p>`;
- nameWrapper.style.left = x + "px";
- nameWrapper.style.top = y - 80 + "px";
- point.parentElement.parentElement.parentElement.appendChild(
- nameWrapper
- );
- $(nameWrapper).fadeIn();
- }
- function addEventToMapPoints() {
- const points = [
- ...document.querySelectorAll(
- ".localizations-map-svg-container svg g"
- )
- ].filter(el => el.id.includes("kropka"));
- points.forEach(point => {
- point.addEventListener("mouseover", event => {
- if (point.classList.contains("active")) return;
- point.classList.add("active");
- showPointName(point.children[1], event);
- });
- point.addEventListener("mouseleave", event => {
- point.classList.remove("active");
- removeAllPointsWrappers();
- });
- });
- }
- function activateLocalizationsPoints() {
- legendItems.forEach(point => {
- point.addEventListener("click", event => {
- legendItems.forEach(clickedPoint =>
- clickedPoint.classList.remove("active")
- );
- event.currentTarget.classList.add("active");
- });
- });
- }
- if (legendItems) {
- activateLocalizationsPoints();
- addEventToMapPoints();
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement