☰

TesterTV_AmazonCamel

Embeds CamelCamelCamel price chart in Amazon and adds centered click zoom effect on images

// ==UserScript==
// @name        TesterTV_AmazonCamel
// @namespace   https://greasyfork.org/ru/scripts/517334-testertv-amazoncamel
// @description Embeds CamelCamelCamel price chart in Amazon and adds centered click zoom effect on images
// @license     GPL version 3 or any later version for my code part !!!
// @author      TesterTV
// @include     http://www.amazon.*/*
// @include     https://www.amazon.*/*
// @include     http://smile.amazon.*/*
// @include     https://smile.amazon.*/*
// @version     2024.11.21
// @grant       GM_openInTab
// @require     https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
// ==/UserScript==

$(document).ready(function () {
    // CamelCamelCamel price chart setup
    const width = 600;
    const height = 400;
    const duration = "1y";

    //const chart = "amazon";
    const chart = "amazon-new";
    //const chart = "amazon-new-used";

    let currentUrl = window.location.href;
    let previousUrl = currentUrl;
    let element = getElementFromUrl(currentUrl);

    const country = getCountryCode(document.domain);

    if (element) {
        const imgSrc = getImageSrc(country, element, width, height, duration);
        const camelCamelCamelElement = createChartElement(imgSrc);
        $("#apex_desktop").parent().children("hr")[0].after(camelCamelCamelElement);
    }

    // Function to extract element ID from URL
    function getElementFromUrl(url) {
        const dpIndex = url.indexOf("/dp/");
        if (dpIndex !== -1) {
            let urlRest = url.slice(dpIndex + 4);  // Remove "/dp/"
            const firstSlashIndex = urlRest.indexOf('/');
            const firstQueryIndex = urlRest.indexOf('?');
            const cutOffIndex = Math.min(
                firstSlashIndex !== -1 ? firstSlashIndex : Infinity,
                firstQueryIndex !== -1 ? firstQueryIndex : Infinity
            );
            return urlRest.slice(0, cutOffIndex);
        }

        // If "/dp/" is not found, check for "/gp/product/"
        const gpProductIndex = url.indexOf("/gp/product/");
        if (gpProductIndex !== -1) {
            let urlRest = url.slice(gpProductIndex + 12);  // Remove "/gp/product/"
            const firstSlashIndex = urlRest.indexOf('/');
            const firstQueryIndex = urlRest.indexOf('?');
            const cutOffIndex = Math.min(
                firstSlashIndex !== -1 ? firstSlashIndex : Infinity,
                firstQueryIndex !== -1 ? firstQueryIndex : Infinity
            );
            return urlRest.slice(0, cutOffIndex);
        }

        // If neither "/dp/" nor "/gp/product/" is found
        return null;
    }


    // Function to get country code from domain
    function getCountryCode(domain) {
        const arr = domain.split(".");
        let country = arr[arr.length - 1];
        return country === "com" ? "us" : country;
    }

    // Function to generate image source URL
    function getImageSrc(country, element, width, height, duration) {
        const prot = window.location.protocol;
        return `${prot}//charts.camelcamelcamel.com/${country}/${element}/${chart}.png?force=1&zero=0&w=${width}&h=${height}&desired=false&legend=1&ilt=1&tp=3${duration}&fo=0`;
    }

    // Function to create chart element
    function createChartElement(src) {
        const camelCamelCamelElement = document.createElement("div");
        camelCamelCamelElement.id = "camelCamelCamelChart";
        camelCamelCamelElement.style = "width: 100%; height: 100%;";
        camelCamelCamelElement.innerHTML = `
            <div id='camelcamelcamel' style='margin-top: 0px; margin-left: 0px'>
                <a>
                    <img id='camelcamelcamelimg' src='${src}' class='zoomable'/>
                </a>
            </div>`;
        return camelCamelCamelElement;
    }

    // Function to update the image source
    function updateImageSource() {
        currentUrl = window.location.href;
        if (currentUrl !== previousUrl) {
            previousUrl = currentUrl;
            element = getElementFromUrl(currentUrl);
            if (element) {
                const newSrc = getImageSrc(country, element, width, height, duration);
                $('#camelcamelcamelimg').attr('src', newSrc);
            }
        }
    }

    // Check the URL every second
    setInterval(updateImageSource, 500);

    // Zoom effect CSS for centered zoom
    $('head').append(`
        <style>
            /* Dark overlay */
            .zoom-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(0, 0, 0, 0.8);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
            }
            /* Zoomable image styling */
            .zoomable {
                cursor: zoom-in;
                transition: transform 0.2s ease;
            }
            /* Centered zoomed image */
            .zoomed-img {
                max-width: 60vw;
                max-height: 60vh;
                transform: scale(1.5); /* Adjust as needed */
            }
        </style>
    `);

    // Click event to create overlay with centered zoom
    $('body').on('click', '.zoomable', function (event) {
        event.preventDefault();  // Prevent the default link behavior (navigation)

        const $img = $(this).clone().addClass('zoomed-img');  // Clone and style the zoomed image
        const $overlay = $('<div class="zoom-overlay"></div>').append($img);

        // Append overlay to body
        $('body').append($overlay);

        // Close overlay on click outside the image
        $overlay.on('click', function (e) {
            if (!$(e.target).is('.zoomed-img')) {
                $overlay.remove();
            }
        });

        // Close overlay on mouse leave from the image
        $img.on('mouseleave', function () {
            $overlay.remove();
        });
        // Close overlay on mouse leave from the image
        $img.on('click', function (e) {
            $overlay.remove();
        });

    });

    // Add event listener for middle mouse button click on images
    $('body').on('auxclick', 'img', function(event) {
        if (event.which === 2 && this.src.includes('amazon-new')) {
            event.preventDefault();
            const currentUrl = window.location.href;
            const element = getElementFromUrl(currentUrl);
            if (element) {
                const country = getCountryCode(document.domain);
                const camelUrl = `https://${country}.camelcamelcamel.com/product/${element}`;
                GM_openInTab(camelUrl, { active: false });
            }
        }
    });

});