better-property-search.js

// Function to find and click the checkbox
function clickAutoSearchToggle() {
  const autoSearchToggle = document.getElementById('auto-search-toggle');
  if (autoSearchToggle) {
    autoSearchToggle.click(); // Click the checkbox
  }
}

// Call the function when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', clickAutoSearchToggle);


// Create a div element for the image preview panel using a string-based approach
const imagePreviewDiv = document.createElement("div");
imagePreviewDiv.innerHTML = `
<div id='large_preview' class='iyqwWq' style='position: fixed; bottom: 20px; left: 20px; width: 406px; z-index: 9999;background-color: #fff; box-shadow: 0 0 20px;'>
    <img id="large_preview_image" style='z-index: 2; position: relative; width: 400px; height: 300px; margin: 3px; cursor: pointer; border-radius: 0.75rem 0.75rem 0 0;'>
    <div id="copied_detail"></div>
    <div style='position: relative; z-index: 2; display: flex; justify-content: center; margin: 10px; background: #fff;'>
        <a class='gOcjwv' href="#" style='z-index: 2; display: inline-block; padding: 0.375rem 1.125rem; border: 2px solid #3d3b40; border-radius: 1.5rem; margin-right: 0.5rem;' id="likeLink">✔️ Like</a>
        <a class='gOcjwv' href="#" style='z-index: 2; display: inline-block; padding: 0.375rem 1.125rem; border: 2px solid #3d3b40; border-radius: 1.5rem;' id="dislikeLink">❌ Dislike</a>
    </div>
</div>
`;

// Append the image preview div to the body
document.body.appendChild(imagePreviewDiv);

// Define the image preview element
const imagePreview = document.getElementById("large_preview_image");

// Function to get the carousel image element
function getCarouselImage() {
    const carouselImages = document.querySelectorAll("[class^='Styles__CarouselContainer'] picture img");
    return carouselImages.length > 0 ? carouselImages[0] : null;
}

// Function to update the image preview when carousel image changes
function updateImagePreviewOnCarouselChange() {
    const carouselImage = getCarouselImage();
    if (carouselImage) {
        const observer = new MutationObserver(function () {
            const carouselImageUrl = carouselImage.getAttribute("src");
            if (carouselImageUrl && carouselImage !== imagePreview) { // Exclude large_preview_image image
                updateImagePreview(carouselImageUrl);
            }
        });

        observer.observe(carouselImage, { attributes: true, attributeFilter: ["src"] });
    }
}

// Function to check if the marker container with the specified class is active
function isMarkerSelectedActive() {
    const markerContainer = document.querySelector(".marker-container--selected");
    return markerContainer !== null;
}

// Function to get the ID from the currently selected marker
function getSelectedMarkerId() {
    const markerContainer = document.querySelector(".marker-container--selected");
    return markerContainer ? markerContainer.getAttribute("id") : null;
}

// Function to save the list of favorite markers to LocalStorage
function saveFavoriteMarkersToLocalStorage() {
    localStorage.setItem("favoriteMarkers", JSON.stringify(favoriteMarkers));
}

// Function to retrieve the list of favorite markers from LocalStorage
function loadFavoriteMarkersFromLocalStorage() {
    const storedFavorites = localStorage.getItem("favoriteMarkers");
    return storedFavorites ? JSON.parse(storedFavorites) : [];
}

// Array to store favorite marker IDs along with their liked status
let favoriteMarkers = loadFavoriteMarkersFromLocalStorage();

// Function to update the favorited items based on the list of favoriteMarkers
function updateFavoritedItems() {
    const styleTag = document.createElement("style");
    const styles = favoriteMarkers.map(marker => {
        const color = marker.liked ? "#00ff00" : "#ff0000";
        return `[id='${marker.id}'] [class*='Styles__MarkerPin'] { background-color: ${color} !important; }`;
    }).join("\n");
    styleTag.innerHTML = styles;

    const existingStyleTag = document.querySelector("#favorited-items-style");
    if (existingStyleTag) {
        existingStyleTag.remove();
    }
    styleTag.id = "favorited-items-style";
    document.head.appendChild(styleTag);
}

// Function to clone and update the content
function updateCopiedDetail() {
  const detailsContainer = document.querySelector('[class^="Styles__DetailsContainer"]');
  const copiedDetail = document.getElementById('copied_detail');

  if (detailsContainer && copiedDetail) {
    const clonedContent = detailsContainer.cloneNode(true);
    copiedDetail.innerHTML = '';
    copiedDetail.appendChild(clonedContent);

    // Log a message when the detail box is added or updated
    console.log('Detail box added or updated.');
  }
}

// Function to observe changes in the DOM within the whole document
function observeChanges() {
  const observer = new MutationObserver(function (mutationsList) {
    for (const mutation of mutationsList) {
      const target = mutation.target;

      // Check if the target element is not a descendant of #copied_detail
      if (!target.closest('#copied_detail')) {
        // Trigger on any mutation type (attributes or childList)
        updateCopiedDetail();
        break; // Exit the loop after the first mutation
      }
    }
  });

  const config = {
    attributes: true, // Watch for changes to attributes
    childList: true, // Watch for changes to child nodes (additions/removals)
    subtree: true, // Watch for changes in the entire subtree
  };

  observer.observe(document, config);

  // Initial update
  updateCopiedDetail();
}

// Call observeChanges to start observing changes
observeChanges();


// Function to handle the "like" link click event
function handleLikeLinkClick(event) {
    event.preventDefault();
    if (isMarkerSelectedActive()) {
        const selectedMarkerId = getSelectedMarkerId();
        const existingMarker = favoriteMarkers.find(marker => marker.id === selectedMarkerId);
        if (existingMarker) {
            existingMarker.liked = !existingMarker.liked;
        } else {
            favoriteMarkers.push({ id: selectedMarkerId, liked: true });
        }
        saveFavoriteMarkersToLocalStorage();
        updateFavoritedItems();
        updateButtonPressedState();
    }
}

// Function to handle the "dislike" link click event
function handleDislikeLinkClick(event) {
    event.preventDefault();
    if (isMarkerSelectedActive()) {
        const selectedMarkerId = getSelectedMarkerId();
        const existingMarker = favoriteMarkers.find(marker => marker.id === selectedMarkerId);
        if (existingMarker) {
            existingMarker.liked = !existingMarker.liked;
        } else {
            favoriteMarkers.push({ id: selectedMarkerId, liked: false });
        }
        saveFavoriteMarkersToLocalStorage();
        updateFavoritedItems();
        updateButtonPressedState();
    }
}

// Function to update the image preview based on the image URL
function updateImagePreview(imageUrl) {
    imagePreview.src = imageUrl;
    imagePreview.style.display = "block"; // Ensure the preview is visible
}

// Attach click event listeners to the "like" and "dislike" links
const likeLink = document.getElementById("likeLink");
const dislikeLink = document.getElementById("dislikeLink");

likeLink.addEventListener("click", handleLikeLinkClick);
dislikeLink.addEventListener("click", handleDislikeLinkClick);

// Function to update the button container visibility based on marker activity
function updateButtonContainerVisibility() {
    if (isMarkerSelectedActive()) {
        imagePreviewDiv.style.display = "block";
        updateButtonPressedState();
    } else {
        imagePreviewDiv.style.display = "none";
        likeLink.style.backgroundColor = "";
        dislikeLink.style.backgroundColor = "";
    }
}

// Function to update the button pressed state based on marker's liked status
function updateButtonPressedState() {
    const selectedMarkerId = getSelectedMarkerId();
    const existingMarker = favoriteMarkers.find(marker => marker.id === selectedMarkerId);
    if (existingMarker) {
        if (existingMarker.liked) {
            likeLink.style.backgroundColor = "#bbb";
            dislikeLink.style.backgroundColor = "";
        } else {
            dislikeLink.style.backgroundColor = "#bbb";
            likeLink.style.backgroundColor = "";
        }
    } else {
        likeLink.style.backgroundColor = "";
        dislikeLink.style.backgroundColor = "";
    }
}

// Initial check and update
updateButtonContainerVisibility();

// Watch for changes in the DOM using a MutationObserver
const observer = new MutationObserver(updateButtonContainerVisibility);
observer.observe(document.body, { childList: true, subtree: true });

// Initial call to update favorited items and image preview
updateFavoritedItems();
updateImagePreviewOnCarouselChange();

// Function to watch for image src changes on a given element
function watchImageSrcChanges(element) {
    const observer = new MutationObserver(function (mutations) {
        mutations.forEach(mutation => {
            if (mutation.type === "attributes" && mutation.attributeName === "src" && mutation.target.tagName === "IMG") {
                const imgSrc = mutation.target.getAttribute("src");
                if (mutation.target !== imagePreview) {
                    updateImagePreview(imgSrc);
                }
            }
        });
    });

    observer.observe(element, { attributes: true, subtree: true, attributeFilter: ["src"] });
}

// Call the function to watch for image src changes on the entire document
watchImageSrcChanges(document);

// Add click event listener to the large preview image to progress the carousel
imagePreview.addEventListener("click", () => {
    const rightArrow = document.querySelector("[class^='Styles__RightArrow']");
    if (rightArrow) {
        rightArrow.click();
    }
});