Quick View Fetch container

{"content":[{"id":"kepvmv","name":"block","parent":0,"children":["vjjuef","ojgbll","mvhzaz"],"settings":{"_cssGlobalClasses":["sfqpky"],"_cssId":"quick-view-container"},"label":"Fetch container"},{"id":"vjjuef","name":"block","parent":"kepvmv","children":["uhnjdo","jynvyj"],"settings":{"_cssGlobalClasses":["rsurrb"],"_direction":"row"},"label":"buttons"},{"id":"uhnjdo","name":"div","parent":"vjjuef","children":["fffxsn"],"settings":{"tag":"custom","customTag":"button","_cssGlobalClasses":["askcrf","oyqmfp"]},"label":"prev btn"},{"id":"fffxsn","name":"icon","parent":"uhnjdo","children":[],"settings":{"icon":{"library":"themify","icon":"ti-arrow-left"},"_cssGlobalClasses":["lrivxb"]}},{"id":"jynvyj","name":"div","parent":"vjjuef","children":["wunmzx"],"settings":{"tag":"custom","customTag":"button","_cssGlobalClasses":["mdtmgb","oyqmfp"]},"label":"nextbtn"},{"id":"wunmzx","name":"icon","parent":"jynvyj","children":[],"settings":{"icon":{"library":"themify","icon":"ti-arrow-right"},"_cssGlobalClasses":["lrivxb"]}},{"id":"ojgbll","name":"code","parent":"kepvmv","children":[],"settings":{"code":"<style>\n/* quick view fetch */\n\n.ic-quick-view{\n    z-index: 999;\n}\n\n.ic-quick-view:focus,\n.ic-quick-view:focus-visible{\n   outline: none !important;\n   outline-offset: 0 !important;\n   outline-color: transparent;\n}\n\n.ic-view-more__close-btn-icon{\n    color: white;\n    font-size: 32px;\n}\n\n.ic-quick-view__col {\npadding: var(--space-m);\njustify-content: center;\nrow-gap: var(--content-gap);\n}\n\n.ic-quick-view__inner-wrap {\ndisplay: grid;\nalign-items: initial;\ngrid-template-columns: var(--grid-2);\nmax-width: 1024px;\nwidth: 100%;\nbackground-color: var(--white);\nposition: relative;\nborder-radius: var(--radius-l);\nz-index: 1;\ntransition: 0.2s;\n}\n\n.ic-quick-view__inner-wrap:not([data-builder-mode] .ic-quick-view__inner-wrap ) {\nscale: 0.7;\nopacity:0;\n}\n\n\n.quick-view--active .ic-quick-view__inner-wrap:not([data-builder-mode] .ic-quick-view__inner-wrap ) {\n    scale: 1;\n    opacity: 1;\n}\n\n/* FETCH CONTAINER */\n.bricks-is-frontend .ic-quick-view-fetch-container {\nposition: fixed;\ninset: 0;\nbackground-color: rgb(0 0 0 / 20%);\nbackdrop-filter: blur(5px);\ndisplay: grid;\nalign-items: center;\njustify-content: center;\nz-index: 9999;\ntransition: visibility 0s linear 0.3s, opacity 0.2s linear 0.2s;\nopacity: 0;\nvisibility: hidden;\npointer-events: none;\npadding-inline: var(--space-m);\npadding-block: var(--space-xl);\n\n}\n\n.bricks-is-frontend.quick-view--active .ic-quick-view-fetch-container {\nopacity: 1;\nvisibility: visible;\npointer-events: auto;\ntransition: opacity 0.2s linear 0.2s;\n}\n\n.ic-quick-view-next-prev-btns {\npointer-events: none;\n}\n\n.ic-quick-view-next-prev-btns--btn {\npointer-events: auto;\n}\n\nbody.quick-view--active{\noverflow: hidden;\npadding-right: 17px;\n}\n\n\n.ic-quick-view__close-btn {\n    position: absolute;\n    top: 0px;\n    right: 0px;\n   padding: var(--space-m);\n    bottom: 0px;\n    left: 0px;\n    display: flex;\n    justify-content: center;\n    align-items: flex-start;\n    background-color: rgb(11 145 255 / 14%);\n    \n}\n\n/* ANIMATION */\n\n.next .ic-quick-view__inner-wrap {\n\t        animation: slde-in-next 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s both;\n}\n\n@keyframes slde-in-next {\n  0% {\n        transform: translateX(100%);\n        opacity: 0;\n  }\n  100% {\n\n       transform: translateX(0);\n      opacity: 1;\n  }\n}\n\n.prev .ic-quick-view__inner-wrap {\n\t        animation: slde-in-prev 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s both;\n}\n\n@keyframes slde-in-prev {\n  0% {\n        transform: translateX(-100%);\n        opacity: 0;\n  }\n  100% {\n\n       transform: translateX(0);\n      opacity: 1;\n  }\n}\n\n\n\n\n@media (max-width:767px) {\n\n    .ic-quick-view__inner-wrap {\n    height: 85vh;\n    overflow-y: scroll;\n    grid-template-columns: var(--grid-1);\n    max-width: 380px !important;\n}\n\n.ic-quick-view__close-btn {\n      padding: var(--space-s);\n   \n}\n}\n\n\n\n\n</style>\n\n","executeCode":true,"noRoot":true},"label":"css"},{"id":"mvhzaz","name":"code","parent":"kepvmv","children":[],"settings":{"code":"<script>\n\n// Store references\nvar tempDiv = document.createElement('div');\nlet lastClickedButton = null;\nlet quickView = null;\nvar url = 'https://brickstuts.designwithcracka.com/quick-view/';\n\n// Perform the initial XHR request on page load\nvar initialXHR = new XMLHttpRequest();\ninitialXHR.open('GET', url);\ninitialXHR.onreadystatechange = function () {\n    if (initialXHR.readyState === 4 && initialXHR.status === 200) {\n        var initialResponse = initialXHR.responseText;\n\n        // Parse initial response and remove the div with class 'brx-query-trail'\n        var parser = new DOMParser();\n        var doc = parser.parseFromString(initialResponse, 'text/html');\n        var brxQueryTrailDiv = doc.querySelector('.brx-query-trail');\n        if (brxQueryTrailDiv) {\n            brxQueryTrailDiv.parentNode.removeChild(brxQueryTrailDiv);\n        }\n        var sanitizedResponse = doc.documentElement.innerHTML;\n\n        var storedResponse = localStorage.getItem('fetchedQuickView');\n\n        setTimeout(function () {\n            if (sanitizedResponse !== storedResponse) {\n                localStorage.setItem('fetchedQuickView', sanitizedResponse);\n                //console.log('fetchedQuickView data updated!')\n            }\n        }, 50)\n    }\n}; initialXHR.send();\n\n\n// Function to fetch and replace the div with the corresponding data-id\nfunction fetchAndReplaceDiv(dataId, clickedButton) {\n  \n    var storedResponse = localStorage.getItem('fetchedQuickView');\n    tempDiv.innerHTML = storedResponse;\n\n            // Selector for your div in page 1 with the specified data-id attribute\n    var fetchedQuickView = tempDiv.querySelector('[data-id=\"' + dataId + '\"]');            \n\n            // Make the newly added div focusable by adding a tabindex attribute\n            fetchedQuickView.setAttribute('tabindex', '0');\n\n            // Selector for your div in page 2 where you want to replace the fetched div\n            var quickViewContainer = document.querySelector('.ic-quick-view-fetch-container');\n\n            // Remove the previously displayed div if it exists\n            if (quickView) {\n                quickViewContainer.removeChild(quickView);\n            }\n\n            // Append the new div with the specified data-id\n                 quickViewContainer.appendChild(fetchedQuickView);\n\n              \n\n            // Add the class \"quick-view--active\" to the document.body if it's not already there          \n            if (!document.body.classList.contains('quick-view--active')) {\n                document.body.classList.add('quick-view--active');\n                // Set aria-expanded=\"true\" on the clicked button when quick view is active\n               // clickedButton.setAttribute('aria-expanded', 'true');\n            }\n\n            // Update the reference to the currently displayed div\n            quickView = fetchedQuickView;\n\n            // Move focus to the newly added div\n            quickView.focus();\n\n            // Store a reference to the last clicked button\n            lastClickedButton = clickedButton;\n\n            // Select the close button with class .ic-quick-view__close-btn inside the fetched div\n           var closeButton = document.querySelector('.ic-quick-view__close-btn');\n\n            // Add click event listener to close button\n            closeButton.addEventListener('click', removeQuickViewActiveClass);\n\n            // Add focus event listener to close button\n            closeButton.addEventListener('focus', function () {\n                // Delay the removal of the active class slightly to allow for keyboard navigation\n                setTimeout(removeQuickViewActiveClass, 200);\n            });            \n     }\n    \n// Function to remove the class \"quick-view--active\" from the body\nfunction removeQuickViewActiveClass() {\n   \n    if (document.body.classList.contains('quick-view--active')) {\n        document.body.classList.remove('quick-view--active');\n       \n        // Return focus to the last clicked button\n        if (lastClickedButton) {\n            lastClickedButton.focus();\n        }\n    }\n}\n\n\n// Event listener for each button with the class .ic-quick-view-btn\nvar quickViewBtns = document.querySelectorAll('.ic-quick-view-btn');\nquickViewBtns.forEach(function (btn) {\n   \n    btn.addEventListener('click', function () {\n        var dataId = btn.getAttribute('data-id');\n        fetchAndReplaceDiv(dataId, btn); \n    });\n});\n\n\n// Event listener for the \"keydown\" event on the document\ndocument.addEventListener('keydown', function (event) {\n    // Check if the pressed key is \"Escape\"\n    if (event.key === \"Escape\") {\n        removeQuickViewActiveClass();\n    }\n});\n\n\n// NEXT AND PREV BUTTON FUCNTION -------------------------------------------\n\n// Function to fetch and replace the div with the corresponding data-id for next and prev\nfunction fetchAndReplaceAdjacent(dataId, direction) {\n\n    var storedResponse = localStorage.getItem('fetchedQuickView');\n        tempDiv.innerHTML = storedResponse;\n         \n    let targetElement = tempDiv.querySelector('[data-id=\"' + dataId + '\"]');\n    let hasNext = targetElement.nextElementSibling && direction === 'next';\n    let hasPrev = targetElement.previousElementSibling && direction === 'prev';\n    var fetchedQuickView = hasNext ? targetElement.nextElementSibling : (hasPrev ? targetElement.previousElementSibling : null);\n\n            // Make the newly added div focusable by adding a tabindex attribute\n            if (fetchedQuickView) {\n                fetchedQuickView.setAttribute('tabindex', '0');\n            }\n\n            // Selector for your div in page 2 where you want to replace the fetched div\n            var quickViewContainer = document.querySelector('.ic-quick-view-fetch-container');\n\n            if (hasNext || hasPrev) {               \n                \n\n                // Remove the previously displayed div if it exists\n                quickViewContainer.removeChild(quickView);\n                //console.log('removed')\n\n                // Append the new div with the specified data-id\n                quickViewContainer.appendChild(fetchedQuickView);\n               // console.log('appended')\n\n                // Update the reference to the currently displayed div\n                quickView = fetchedQuickView;\n\n                // Move focus to the newly added div\n                quickView.focus();\n\n                // Select the close button with class .ic-quick-view__close-btn inside the fetched div\n                var closeButton = quickView.querySelector('.ic-quick-view__close-btn');\n               // console.log(closeButton)\n\n                // Add click event listener to close button\n                closeButton.addEventListener('click', removeQuickViewActiveClass);\n\n                // Add focus event listener to close button\n                closeButton.addEventListener('focus', function () {\n                    // Delay the removal of the active class slightly to allow for keyboard navigation\n                    setTimeout(removeQuickViewActiveClass, 200);\n                });\n            }\n       \n    };  \n\n\n\n// NEXT AND PREVIOUS BUTTONS\nfunction adjacentQuickView(direction) {\n    var button = document.querySelector('.ic-quick-view-' + direction + '-btn');\n    if (button) {\n        button.addEventListener('click', function () {\n            var currentDiv = document.querySelector('.ic-quick-view-fetch-container .ic-quick-view');\n            if (currentDiv) {\n                var currentDataId = currentDiv.getAttribute('data-id');\n                fetchAndReplaceAdjacent(currentDataId, direction);\n\n                // Toggle classes based on the direction clicked\n                if (direction === 'next') {\n                    var currentDiv = document.querySelector('.ic-quick-view-fetch-container .ic-quick-view');\n                    currentDiv.classList.remove('prev');\n                    currentDiv.classList.add('next');\n                } else if (direction === 'prev') {\n                    var currentDiv = document.querySelector('.ic-quick-view-fetch-container .ic-quick-view');\n                    currentDiv.classList.remove('next');\n                    currentDiv.classList.add('prev');\n                }\n            }\n        });\n    }\n    return button; // Return the button element\n}\n\nvar nextButton = adjacentQuickView('next');\nvar prevButton = adjacentQuickView('prev');\n\n// ARROW KEYS\n\n// keyboard accessible for prev and next button\ndocument.addEventListener('keydown', function (event) {\n    \n    if (event.key === 'ArrowLeft') {        \n            // Left arrow key pressed\n        prevButton.click();\n        var currentDiv = document.querySelector('.ic-quick-view-fetch-container .ic-quick-view');\n            currentDiv.classList.remove('next');\n            currentDiv.classList.add('prev');\n           \n    } else if (event.key === 'ArrowRight') {       \n            // Right arrow key pressed\n        nextButton.click();\n        var currentDiv = document.querySelector('.ic-quick-view-fetch-container .ic-quick-view');\n            currentDiv.classList.remove('prev');\n            currentDiv.classList.add('next');            \n        }\n    \n});\n\n\n\n</script>\n\n","executeCode":true,"noRoot":true},"label":"JS"}],"source":"bricksCopiedElements","sourceUrl":"https://brickstuts.designwithcracka.com","version":"1.9.6.1","globalClasses":[{"id":"sfqpky","name":"ic-quick-view-fetch-container","settings":{"_visibility":"hidden"}},{"id":"rsurrb","name":"ic-quick-view-next-prev-btns","settings":{"_direction":"row","_justifyContent":"space-between","_position":"fixed","_zIndex":"999999","_top":"50%","_cssCustom":".ic-quick-view-next-prev-btns{\n transform: translateY(-50%) \n}\n\n[data-builder-mode] .ic-quick-view-next-prev-btns{\n  visibility: visible;\n}","_right":"0","_left":"0","_padding":{"left":"var(--space-m)","right":"var(--space-m)"},"_padding:mobile_portrait":{"left":"8","right":"8"}}},{"id":"askcrf","name":"ic-quick-view-prev-btn","settings":[]},{"id":"oyqmfp","name":"ic-quick-view-next-prev-btns--btn","settings":{"_background":{"color":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0.25)","hsl":"hsla(0, 0%, 0%, 0.25)"}},"_background:hover":{"color":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0.58)","hsl":"hsla(0, 0%, 0%, 0.58)"}},"_padding":{"top":"var(--space-s)","right":"var(--space-s)","bottom":"var(--space-s)","left":"var(--space-s)"},"_border":{"radius":{"top":"var(--radius-l)","right":"var(--radius-l)","bottom":"var(--radius-l)","left":"var(--radius-l)"}},"_cssTransition":"0.4s","_padding:mobile_portrait":{"left":"10","right":"10","top":"10","bottom":"10"}}},{"id":"lrivxb","name":"ic-quick-view-next-prev-btns--icon","settings":{"_typography":{"color":{"id":"acss_import_white","name":"white","raw":"var(--white)"},"font-size":"32"},"iconSize:mobile_portrait":"24"}},{"id":"mdtmgb","name":"ic-quick-view-next-btn","settings":[]}],"globalElements":[]}