{
  "version": 3,
  "sources": [
    "ConfiguratorDynamicImage/main.js"
  ],
  "names": [],
  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA",
  "file": "ConfiguratorDynamicImage.js",
  "sourcesContent": [
    "require([\r\n],\r\nfunction () {\r\n    \r\n    var layeredImagesUrls;\r\n    var layeredImagesToBePreloaded;\r\n    var layeredImagesPreLoaded;\r\n    const COMPOSITE_IMAGE_THUMBNAIL_SELECTOR = \".composite-image-thumb\";\r\n    const CONFIGURATOR_DYNAMIC_IMAGE_SELECTOR = \".configurator-dynamic-image\";\r\n    const PRODUCT_OPTION_IMAGE_SELECTOR = \".product-option-thumb-img\";\r\n    var initLoad = true;\r\n\r\n    document.addEventListener(\"productOptionChanged\", (event) => {      \r\n        displayLayeredImages(event.detail.selected);\r\n    });\r\n\r\n    function hoverInProductOptionThumbnail(event) {\r\n        var element = $(event.target);        \r\n        if (element.attr(\"class\").indexOf(\"composite-image-thumb\") == -1) {\r\n            var image = $(element).first(\"img\");\r\n            var imageUrl = 'url(\"' + $(image).data('fullSizeImageUrl'); + '\")';\r\n            $(CONFIGURATOR_DYNAMIC_IMAGE_SELECTOR).css({ \"background-image\": imageUrl });\r\n            $(\"#product-option-title\").text($(image).data(\"productOptionTitle\"));\r\n        }\r\n        else {\r\n            $(CONFIGURATOR_DYNAMIC_IMAGE_SELECTOR).css({ \"background-image\": layeredImagesUrls });\r\n            $(\"#product-option-title\").text(\"\");\r\n        }\r\n    }\r\n\r\n    function displayLayeredImages(selectedOptions) {        \r\n        // select images        \r\n        let images = configuratorDynamicImagesData\r\n            .filter((d) => d.Options.every((o) => selectedOptions.some(x => x.ProductCode == o)))\r\n            .sort((a, b) => b.Layer - a.Layer)   // image with higher layer number has to go first\r\n            ;\r\n\r\n        // find difference between selectedOptions and images to get not used options so we can display their thumbnails\r\n        var notUsedOptions = selectedOptions.filter(x => !Array.from(new Set(images.map(x => x.Options).flat())).includes(x.ProductCode));\r\n        if (notUsedOptions.length) {\r\n            //$(\"#product-options-thumbs\").empty();\r\n            $(\"#product-options-thumbs\").empty();\r\n            var thumbsHtml = \"\";\r\n            notUsedOptions.forEach((item) => {\r\n                thumbsHtml += '<div class=\"product-option-thumbnail\"><img class=\"product-option-thumb-img\" src=\"' + item.Image + '\" data-product-option-title=\"' + item.Title + '\" data-full-size-image-url=\"' + item.FullSizeImage + '\" /></div>';\r\n            });\r\n            $(\"#product-options-thumbs\").html(thumbsHtml);\r\n        }\r\n        else\r\n            $(\"#product-options-thumbs\").empty();\r\n\r\n        if (images.length) {\r\n            // prepare a list of URLs\r\n            layeredImagesUrls = images\r\n                .map((d) => \"url(\" + d.Url + \")\")\r\n                .join();\r\n\r\n            // pre-load the selected images that haven't been loaded yet\r\n            let imagesForPreLoad = images.filter((i) => !i.preLoaded);\r\n            //console.log(\"images for pre-load: \" + imagesForPreLoad.length);\r\n            if (imagesForPreLoad.length) {\r\n                $(\".spinner-wrapper\").removeClass(\"d-none\");\r\n                layeredImagesToBePreloaded = imagesForPreLoad.length;\r\n                layeredImagesPreLoaded = 0;\r\n                imagesForPreLoad.forEach(function (e) {\r\n                    e.preLoaded = new Image();\r\n                    e.preLoaded.onload = imageLoadedCallback;\r\n                    e.preLoaded.src = e.Url;\r\n                });\r\n            }\r\n            else {\r\n                // nothing to pre-load, we can set the URLs immediately              \r\n                $(COMPOSITE_IMAGE_THUMBNAIL_SELECTOR).css({ \"background-image\": layeredImagesUrls });\r\n                $(CONFIGURATOR_DYNAMIC_IMAGE_SELECTOR).css({ \"background-image\": layeredImagesUrls });\r\n            }\r\n\r\n            if (!initLoad) {\r\n                var configuratorDynamicImageUrls = $(CONFIGURATOR_DYNAMIC_IMAGE_SELECTOR).css(\"background-image\").split(',');\r\n                // product option is displayed inside configurator dynamic image\r\n                if (configuratorDynamicImageUrls.length == 1) {\r\n                    // check does that product option exists in thumbnails\r\n                    // if it is not exist, show layered images inside configurator dynamic image\r\n                    var productOptionImageUrl = configuratorDynamicImageUrls[0].replace(\"url(\", \"\").replace(\")\", \"\");\r\n                    var productOptionThumb = $(\".product-options-thumbs \" + PRODUCT_OPTION_IMAGE_SELECTOR).first('src=\"' + productOptionImageUrl + '\"');\r\n                    if (productOptionThumb.length == 0) {\r\n                        $(CONFIGURATOR_DYNAMIC_IMAGE_SELECTOR).css({ \"background-image\": layeredImagesUrls });\r\n                        $(\"#product-option-title\").text(\"\");\r\n                    }\r\n                }\r\n            }\r\n        }\r\n        else {\r\n            // there are no images so display default configurator image           \r\n            $(COMPOSITE_IMAGE_THUMBNAIL_SELECTOR).css({ \"background-image\": \"url('\" + defaultConfiguratorImage + \"')\" });\r\n            $(CONFIGURATOR_DYNAMIC_IMAGE_SELECTOR).css({ \"background-image\": \"url('\" + defaultConfiguratorImage + \"')\" });\r\n        }\r\n\r\n        $(PRODUCT_OPTION_IMAGE_SELECTOR).off(\"mouseenter\").on(\"mouseenter\", hoverInProductOptionThumbnail);\r\n\r\n        function imageLoadedCallback() {\r\n            layeredImagesPreLoaded++;          \r\n            if (layeredImagesPreLoaded === layeredImagesToBePreloaded) {\r\n                // all images are loaded, set the background URLs                \r\n                $(COMPOSITE_IMAGE_THUMBNAIL_SELECTOR).css({ \"background-image\": layeredImagesUrls });               \r\n                $(CONFIGURATOR_DYNAMIC_IMAGE_SELECTOR).css({ \"background-image\": layeredImagesUrls });\r\n                initLoad = false;                \r\n                $(\".spinner-wrapper\").addClass(\"d-none\");    // showing and hiding the spinner will have to be done using the Spinner module in real code\r\n            }\r\n        }\r\n    }\r\n        \r\n    // Pre-loading all images on page load so the transitions are seamless.CAREFUL! THIS SPENDS A LOT OF BANDWIDTH!\r\n    //ImagesData.forEach(function (e) {\r\n    //    e.preLoaded = new Image();\r\n    //    e.preLoaded.src = e.Url;\r\n    //});\r\n\r\n    // zoom functionality init\r\n    const elem = document.getElementById(\"zoom-element\");\r\n    const panzoom = Panzoom(elem, { minScale: 1, maxScale: 5, cursor: \"unset\", panOnlyWhenZoomed: true });\r\n    $(\".configurator-image-container\")\r\n        .on(\"click\", function (event) {\r\n            if (event.currentTarget.classList.contains(\"zoomed-in\")) {\r\n                event.currentTarget.classList.remove(\"zoomed-in\");\r\n                panzoom.reset({ animate: true, duration: 500 });\r\n            }\r\n            else {\r\n                panzoom.zoom(3);\r\n                pan(this, event, { animate: true, duration: 500 });\r\n                event.currentTarget.classList.add(\"zoomed-in\");\r\n            }\r\n        })\r\n        /*.on(\"wheel\", function (event) {     panzoom.zoomWithWheel(event.originalEvent);   })*/\r\n        .on(\"mouseout\", function (event) {\r\n            event.currentTarget.classList.remove(\"zoomed-in\");\r\n            panzoom.reset({ animate: true, duration: 500 });\r\n        })\r\n        .on(\"mousemove\", function (event) { pan(this, event); });\r\n\r\n    function pan(element, event, options) {\r\n        /*let logString = \"event.pageX = \" + event.pageX + \"</br>\";\r\n        logString += \"event.pageY = \" + event.pageY + \"</br>\";\r\n        logString += \"$(element).offset().left = \" + $(element).offset().left + \"</br>\";\r\n        logString += \"$(element).offset().top = \" + $(element).offset().top + \"</br>\";\r\n        logString += \"$(element).width() = \" + $(element).width() + \"</br>\";\r\n        logString += \"$(element).height() = \" + $(element).height() + \"</br>\";\r\n        logString += \"panzoom.getScale() = \" + panzoom.getScale() + \"</br>\";*/\r\n        let x = -((event.pageX - $(element).offset().left - $(element).width() / 2) * 2) / panzoom.getScale();\r\n        let y = -((event.pageY - $(element).offset().top - $(element).height() / 2) * 2) / panzoom.getScale();\r\n        //logString += \"x = \" + x + \"</br>\"; logString += \"y = \" + y + \"</br>\";\r\n        panzoom.pan(x, y, options);\r\n    }\r\n\r\n    function initConfiguratorDynamicImage() {\r\n        displayLayeredImages([]);\r\n    }\r\n\r\n    initConfiguratorDynamicImage();\r\n});\r\n\ndefine(\"ConfiguratorDynamicImage/main\", function(){});\n\n"
  ]
}