FileMaster
Search
Toggle Dark Mode
Home
/
.
/
wp-content
/
plugins
/
cozy-addons
/
cozy-blocks
/
frontend
Edit File: portfolio-gallery.js
(function ($) { window["cozyBlockPortfolioGalleryInit"] = (e) => { const n = e.replace(/-/gi, "_"); const blockOptions = window[`cozyPortfolioGallery_${n}`]; const portfolioClass = `#cozyBlock_${n}`; const cozyPortfolio = document.querySelector(portfolioClass); const sliderAttr = { init: true, loop: blockOptions.sliderOptions.loop, autoplay: { ...blockOptions.sliderOptions.autoplay }, speed: blockOptions.sliderOptions.speed, centeredSlides: blockOptions.sliderOptions.centeredSlides, slidesPerView: blockOptions.sliderOptions.slidesPerView, spaceBetween: blockOptions.sliderOptions.spaceBetween, navigation: { nextEl: `${portfolioClass} .swiper-button-next.cozy-block-button-next`, prevEl: `${portfolioClass} .swiper-button-prev.cozy-block-button-prev`, }, pagination: { clickable: true, el: `${portfolioClass} .swiper-pagination`, }, breakpoints: { 100: { slidesPerView: 1, }, 767: { slidesPerView: blockOptions.sliderOptions.slidesPerView <= 2 ? blockOptions.sliderOptions.slidesPerView : 2, }, 1024: { slidesPerView: blockOptions.sliderOptions.slidesPerView <= 3 ? blockOptions.sliderOptions.slidesPerView : 3, }, 1180: { slidesPerView: blockOptions.sliderOptions.slidesPerView, }, }, }; if (blockOptions.sliderOptions.autoplay.status) { sliderAttr.autoplay = { ...blockOptions.sliderOptions.autoplay }; } else { delete sliderAttr.autoplay; } let portfolioSlider = {}; if (blockOptions.layout === "carousel") { portfolioSlider = new Swiper( portfolioClass + ".layout-carousel.cozy-portfolio-gallery__swiper-container", sliderAttr ); } const loaderButton = cozyPortfolio.querySelector(".cozy-dynamic-loader"); const isotopeFilter = cozyPortfolio.querySelectorAll( ".cozy-isotope-filter__label" ); isotopeFilter.forEach((label) => { label.addEventListener("click", function () { // Remove 'active' class from all labels isotopeFilter.forEach((l) => { l.classList.remove("active"); }); // Add 'active' class to the clicked label this.classList.add("active"); const termID = label.getAttribute("data-term-id"); hideLoaderButton(termID); let newTemplates = []; const originalItems = [...blockOptions.portfolioTemplates]; const portfolioCollection = cozyPortfolio.querySelectorAll(".cozy-portfolio"); portfolioCollection.forEach((el) => { $(el).fadeOut(600, function () {}); $(el).animate( { height: 0, width: 0, opacity: 0, }, 500 ); setTimeout(() => { $(el).remove(); }, 500); }); if (termID !== "") { // Apply filtering logic to original items newTemplates = originalItems.filter((obj) => { if (Array.isArray(obj?.post_custom_category)) { return obj.post_custom_category.some( (category) => category.term_id === parseInt(termID) ); } else { return false; } }); createPortfolioTemplateDOM( newTemplates.slice( 0, parseInt(blockOptions.perPage) === -1 ? newTemplates.length : blockOptions.perPage ) ); } else { createPortfolioTemplateDOM( originalItems.slice( 0, parseInt(blockOptions.perPage) === -1 ? originalItems.length : blockOptions.perPage ) ); } }); }); if (blockOptions.source === "template") { if (parseInt(blockOptions.perPage) === -1) { createPortfolioTemplateDOM(blockOptions.portfolioTemplates); } else { createPortfolioTemplateDOM( blockOptions.portfolioTemplates.slice(0, blockOptions.perPage) ); } } function stripTags(html) { var doc = new DOMParser().parseFromString(html, "text/html"); return doc.body.textContent || ""; } function stripShortcodes(content) { return content.replace(/\[.*?\]/g, ""); // This removes any shortcodes enclosed in square brackets. } function createExcerpt(text, maxLength = 40) { // Strip HTML tags and shortcodes text = stripTags(stripShortcodes(text)); // Split the text into words var words = text.split(" "); // Truncate to the specified length if (words.length > maxLength) { text = words.slice(0, maxLength).join(" ") + "..."; } else { text = words.join(" "); } return text; } function createPortfolioTemplateDOM(templates) { switch (blockOptions.orderBy) { case "dateDESC": templates = templates.sort(compareDatesDesc); break; case "dateASC": templates = templates.sort(compareDatesAsc); break; case "titleASC": templates = templates.sort(compareTitlesASC); break; case "titleDESC": templates = templates.sort(compareTitlesDesc); break; default: break; } templates.forEach((template) => { const wrapperDiv = document.createElement("div"); wrapperDiv.className = "cozy-portfolio post-ID__" + template.ID; wrapperDiv.setAttribute("data-post-id", template.ID); if (template.post_custom_category.length > 0) { template.post_custom_category.map((obj) => { return wrapperDiv.classList.add("taxonomy__term-id-" + obj.term_id); }); } if (blockOptions.layout === "carousel") { wrapperDiv.classList.add("swiper-slide"); } const postContent = createExcerpt( template.post_content, blockOptions.enableOptions.excerpt ); wrapperDiv.innerHTML = ` ${ blockOptions.featuredImage.position === "before" && template.featured_image ? ` <div class="cozy-portfolio-gallery__featured-image-wrapper"> <div class='cozy-portfolio-gallery__image-overlay'></div> <img class="cozy-portfolio-gallery__featured-image" src='${template.featured_image}' alt='${template.post_title}' /> </div> ` : "" } ${ blockOptions.layoutType !== "default" ? '<div class="cozy-portfolio-gallery__title-cat-wrapper">' : "" } ${ blockOptions.layoutType !== "gallery" && blockOptions.enableOptions.title ? `<h2 class="cozy-portfolio-gallery__title"> ${template.post_title} </h2>` : "" } ${ blockOptions.layoutType === "overlay" && blockOptions.enableOptions.content && postContent ? ` <div> ${postContent} </div>` : "" } ${ blockOptions.layoutType === "overlay" && blockOptions.enableOptions.button ? ` <span class="cozy-block-portfolio-gallery__read-more"> Read More </span>` : "" } ${ blockOptions.layoutType === "gallery" && blockOptions.enableOptions.icon ? `<i class="cozy-overlay-icon-wrapper"> <svg class='cozy-portfolio-icon__overlay' width="${blockOptions.galleryOptions.iconSize}" height="${blockOptions.galleryOptions.iconSize}" viewBox="${blockOptions.galleryOptions.iconViewBox.vx} ${blockOptions.galleryOptions.iconViewBox.vy} ${blockOptions.galleryOptions.iconViewBox.vw} ${blockOptions.galleryOptions.iconViewBox.vh}" fill="${blockOptions.galleryOptions.iconColor}" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" > <path d="${blockOptions.galleryOptions.iconPath}"/> </svg> </i>` : "" } ${blockOptions.layoutType !== "default" ? "</div>" : ""} ${ blockOptions.featuredImage.position === "after" && template.featured_image ? ` <div class="cozy-portfolio-gallery__featured-image-wrapper"> <div class='cozy-portfolio-gallery__image-overlay'></div> <img class="cozy-portfolio-gallery__featured-image" src='${template.featured_image}' alt='${template.post_title}' /> </div> ` : "" } `; const layoutWrapper = cozyPortfolio.querySelector( ".cozy-layout-" + blockOptions.layout ); if (layoutWrapper) { // Append the wrapperDiv to layoutWrapper and then fadeIn $(layoutWrapper).append(wrapperDiv).children(":last").fadeIn("slow"); } }); } // Function to compare two dates in ascending order function compareDatesAsc(a, b) { const dateA = new Date(a.post_date_gmt); const dateB = new Date(b.post_date_gmt); return dateA - dateB; } // Function to compare two dates in descending order function compareDatesDesc(a, b) { const dateA = new Date(a.post_date_gmt); const dateB = new Date(b.post_date_gmt); return dateB - dateA; } // Function to compare post_title alphabetically in descending order function compareTitlesDesc(a, b) { const titleA = a.post_title.toLowerCase(); const titleB = b.post_title.toLowerCase(); if (titleA > titleB) { return -1; } if (titleA < titleB) { return 1; } return 0; } // Function to compare post_title alphabetically in ascending order function compareTitlesASC(a, b) { const titleA = a.post_title.toLowerCase(); const titleB = b.post_title.toLowerCase(); if (titleA < titleB) { return -1; } if (titleA > titleB) { return 1; } return 0; } // Search Query $("#cozy-isotope-filter__search-bar").keyup(function () { const searchValue = $(this).val().toLowerCase(); const originalItems = [...blockOptions.portfolioTemplates]; originalItems.filter(function (template) { if (!template.post_title.toLowerCase().includes(searchValue)) { $(blockID + ` [data-post-id="${template.ID}"]`).hide(); } else { $(blockID + ` [data-post-id="${template.ID}"]`).show(); } }); }); // Returns slicing portfolio collection with existing content. function generatePortfolioTemplates() { const portfolioCollection = cozyPortfolio.querySelectorAll( ":not(.layout-carousel) .cozy-portfolio" ); const visibleIDS = Array.from(portfolioCollection).map((item) => { return item.getAttribute("data-post-id"); }); if ( blockOptions.layout === "grid" && !blockOptions.gridOptions.isotopeFilter ) { const newTemplates = blockOptions.portfolioTemplates.filter((obj) => { return visibleIDS.every((id) => parseInt(id) !== obj.ID); }); return newTemplates; } if ( blockOptions.layout === "grid" && blockOptions.gridOptions.isotopeFilter ) { const activeIsotopeLabel = cozyPortfolio.querySelector( ".cozy-isotope-filter__label.active" ); const termID = activeIsotopeLabel.getAttribute("data-term-id"); let newTemplates = []; const originalItems = [...blockOptions.portfolioTemplates]; const portfolioCollection = cozyPortfolio.querySelectorAll( ":not(.layout-carousel) .cozy-portfolio" ); const visibleIDS = Array.from(portfolioCollection).map((item) => { return item.getAttribute("data-post-id"); }); if (termID !== "") { newTemplates = originalItems.filter((obj) => { if (Array.isArray(obj?.post_custom_category)) { return ( visibleIDS.every((id) => parseInt(id) !== obj.ID) && obj.post_custom_category.some( (category) => category.term_id === parseInt(termID) ) ); } else { return false; } }); } else { newTemplates = originalItems.filter((obj) => { return visibleIDS.every((id) => parseInt(id) !== obj.ID); }); } return newTemplates; } } if (loaderButton) { if (blockOptions.source === "template") { hideLoaderButton(); loaderButton.addEventListener("click", function () { const newTemplates = generatePortfolioTemplates(); createPortfolioTemplateDOM( newTemplates.slice(0, blockOptions.ajaxButton.contentLoad) ); hideLoaderButton(); }); } } function hideLoaderButton(termID = null) { $(loaderButton).show(); const nextShow = generatePortfolioTemplates(); if ( blockOptions.layout === "grid" && blockOptions.gridOptions.isotopeFilter && termID ) { let originalTax = []; let taxCount = 0; if (typeof blockOptions.portfolioTax === "object") { originalTax = { ...blockOptions.portfolioTax }; taxCount = Object.values(originalTax) .filter((tax) => tax.term_id === parseInt(termID)) .map((item) => item.count)[0]; } else { originalTax = [...blockOptions.portfolioTax]; taxCount = originalTax .filter((tax) => tax.term_id === parseInt(termID)) .map((item) => item.count)[0]; } if (taxCount === 1) { $(loaderButton).hide(); } return; } if (nextShow.length <= 0) { $(loaderButton).hide(); } } // Popup View const cozyPopup = cozyPortfolio.querySelector(".cozy-portfolio-popup"); const galleryContainer = cozyPortfolio.querySelector( ".cozy-gallery__swiper-container" ); let gallerySlider = {}; //Add cozy-overlay-wrapper only if it does not exists const ancestorDiv = document.querySelector(".wp-site-blocks"); const hasChildDiv = document.querySelector( ".wp-site-blocks > .cozy-overlay-wrapper" ); const body = document.querySelector("body"); if (hasChildDiv === null) { const overlayWrapper = document.createElement("div"); overlayWrapper.className = "cozy-overlay-wrapper visibility-none"; ancestorDiv.appendChild(overlayWrapper); } const cozyOverlay = document.querySelector(".cozy-overlay-wrapper"); cozyPortfolio.addEventListener("click", function (event) { const popup = event.target.closest( ".cozy-block-portfolio-gallery.has-popup-view .cozy-portfolio" ); if (popup) { const ID = popup.getAttribute("data-post-id"); const template = blockOptions.portfolioTemplates.filter( (obj) => obj.ID === parseInt(ID) ); if ( !blockOptions.linkURL || template[0].post_url.length <= 0 || template[0].post_url === "#" ) { generatePopupView(template[0]); $(cozyPopup).removeClass("hide-popup"); $(cozyPopup).addClass("show-popup"); // Show cozy overlay wrapper cozyOverlay.style.backgroundColor = blockOptions.popup.overlayWrapper; cozyOverlay.classList.remove("visibility-none"); body.classList.add("overflow-hidden"); if (portfolioSlider && blockOptions.layout === "carousel") { portfolioSlider.autoplay.stop(); } } } const galleryItem = event.target.closest( ".cozy-block-portfolio-gallery.layout-type-gallery > .cozy-layout-wrapper > .cozy-portfolio" ); if (galleryContainer && galleryItem && blockOptions.layout === "grid") { galleryContainer.classList.remove("hide-cozy-gallery"); const galleryCloseIcon = `<svg width="20px" height="20px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z"></path></svg>`; // Create a div or any container element to hold the SVG const svgContainer = document.createElement("div"); svgContainer.classList = "cozy-block-portfolio-gallery__gallery-close-icon-wrapper"; svgContainer.innerHTML = galleryCloseIcon; // Append the SVG container to the current galleryContainer galleryContainer.appendChild(svgContainer); const activeIsotopeLabel = cozyPortfolio.querySelector( ".cozy-isotope-filter__label.active" ); $( portfolioClass + " .cozy-block-portfolio-gallery__gallery-close-icon-wrapper" ).click(function () { galleryContainer.classList.add("hide-cozy-gallery"); body.classList.remove("overflow-hidden"); cozyOverlay.classList.add("visibility-none"); cozyOverlay.style.backgroundColor = "#c3c3c3"; }); let termID = null; if (activeIsotopeLabel) { termID = activeIsotopeLabel.getAttribute("data-term-id"); } let newTemplates = []; const originalItems = [...blockOptions.portfolioTemplates]; if (termID && termID !== "") { // Apply filtering logic to original items newTemplates = originalItems.filter((obj) => { if (Array.isArray(obj?.post_custom_category)) { return obj.post_custom_category.some( (category) => category.term_id === parseInt(termID) ); } else { return false; } }); // Find the index of the object with the desired ID const activeIndex = newTemplates.findIndex( (obj) => obj.ID === parseInt($(galleryItem).attr("data-post-id")) ); if (activeIndex !== -1) { // Remove the object from its current position const [movedObj] = newTemplates.splice(activeIndex, 1); // Add the object at the beginning of the newTemplates newTemplates.unshift(movedObj); } generateCozyGallery(newTemplates); } else { // Find the index of the object with the desired ID const activeIndex = originalItems.findIndex( (obj) => obj.ID === parseInt($(galleryItem).attr("data-post-id")) ); if (activeIndex !== -1) { // Remove the object from its current position const [movedObj] = originalItems.splice(activeIndex, 1); // Add the object at the beginning of the originalItems originalItems.unshift(movedObj); } generateCozyGallery(originalItems); } // const sliderAttr = { // init: true, // speed: 1000, // slidesPerView: 1, // effect: "fade", // fadeEffect: { // crossFade: true, // }, // navigation: { // nextEl: `${portfolioClass} .swiper-button-next.cozy-gallery-next`, // prevEl: `${portfolioClass} .swiper-button-prev.cozy-gallery-prev`, // }, // }; // gallerySlider = new Swiper( // portfolioClass + " .cozy-gallery__swiper-container", // sliderAttr // ); cozyOverlay.style.backgroundColor = blockOptions.popup.overlayWrapper; cozyOverlay.classList.remove("visibility-none"); body.classList.add("overflow-hidden"); } }); const popupCloseIcon = cozyPortfolio.querySelector( ".cozy-popup-icon.popup-close-icon" ); $(popupCloseIcon).on("click", function () { $(cozyPopup).addClass("hide-popup"); $(cozyPopup).removeClass("show-popup"); // Hide cozy overlay wrapper body.classList.remove("overflow-hidden"); cozyOverlay.classList.add("visibility-none"); cozyOverlay.style.backgroundColor = "#c3c3c3"; if ( portfolioSlider && blockOptions.layout === "carousel" && blockOptions.sliderOptions.autoplay.status ) { portfolioSlider.autoplay.start(); } }); cozyOverlay.addEventListener("click", function () { body.classList.remove("overflow-hidden"); this.classList.add("visibility-none"); $(cozyPopup).addClass("hide-popup"); $(cozyPopup).removeClass("show-popup"); cozyOverlay.style.backgroundColor = "#c3c3c3"; $(galleryContainer).addClass("hide-cozy-gallery"); if ( portfolioSlider && blockOptions.layout === "carousel" && blockOptions.sliderOptions.autoplay.status ) { portfolioSlider.autoplay.start(); } if (gallerySlider && Object.keys(gallerySlider).length > 0) { gallerySlider.destroy(); } }); function generatePopupView(template) { const featuredImage = cozyPopup.querySelector( ".cozy-portfolio-gallery__featured-image" ); const title = cozyPopup.querySelector(".cozy-portfolio-gallery__title"); const portfolioCategory = cozyPopup.querySelector( ".cozy-portfolio-gallery__category" ); const projectYear = cozyPopup.querySelector( ".cozy-portfolio-gallery__project-year" ); const client = cozyPopup.querySelector(".cozy-portfolio-gallery__client"); const skills = cozyPopup.querySelector(".cozy-portfolio-gallery__skills"); const url = cozyPopup.querySelector(".cozy-portfolio-gallery__url"); const content = cozyPopup.querySelector( ".cozy-portfolio-gallery__content" ); const defaultContent = cozyPopup.querySelector( ".cozy-popup-content__default" ); const stickyContent = cozyPopup.querySelector( ".cozy-popup-content__sticky" ); const cptContent = stickyContent.querySelector( ".cozy-portfolio-gallery__cpt" ); if (featuredImage) { if (!template.featured_image) { $(featuredImage).hide(); } else { $(featuredImage).show(); featuredImage.setAttribute( "src", template.featured_image ? template.featured_image : "" ); featuredImage.setAttribute("alt", template.post_title); } } title.innerHTML = template.post_title; portfolioCategory.innerHTML = ``; if ( Array.isArray(template.post_custom_category) && template.post_custom_category.length > 0 ) { template.post_custom_category.map((category) => { portfolioCategory.innerHTML += `<span class="cozy-portfolio-gallery__category-label" key="${category.term_id}">${category.name}</span>`; }); } if ( template.post_project_year.length > 0 || template.post_client.length > 0 || template.post_skills.length > 0 || template.post_url.length > 1 ) { cptContent.style.setProperty("display", "block"); } else { cptContent.style.setProperty("display", "none"); } projectYear.innerHTML = ``; if (template.post_project_year.length > 0) { projectYear.innerHTML += `<h3 class="cozy-portfolio-gallery__subtitle">Project Year</h3>`; projectYear.innerHTML += `<p class="cozy-portfolio-gallery__cpt-content">${template.post_project_year}</p>`; } client.innerHTML = ``; if (template.post_client.length > 0) { client.innerHTML += `<h3 class="cozy-portfolio-gallery__subtitle">Client</h3>`; client.innerHTML += `<p class="cozy-portfolio-gallery__cpt-content">${template.post_client}</p>`; } skills.innerHTML = ``; if (template.post_skills.length > 0) { skills.innerHTML += `<h3 class="cozy-portfolio-gallery__subtitle">Skills/Technology</h3>`; skills.innerHTML += `<p class="cozy-portfolio-gallery__cpt-content">${template.post_skills}</p>`; } url.innerHTML = ``; if (template.post_url.length > 1) { url.innerHTML += `<a href="${template.post_url}" target="_blank" rel="noopener"><p class="cozy-portfolio-gallery__cpt-content">Website</p> <svg width="16" height="16" viewBox="0 0 24 24" fill=${blockOptions.portfolioCPT.color} xmlns="http://www.w3.org/2000/svg" aria-hidden="true" > <path d="M14.805 14.94V18.6C14.805 19.04 14.485 19.4 14.045 19.4H3.60498C3.16498 19.4 2.80498 19.04 2.80498 18.6V5.40001C2.80498 4.96001 3.16498 4.60001 3.60498 4.60001H14.045C14.485 4.60001 14.805 4.96001 14.805 5.40001V9.06002C14.805 9.50002 14.445 9.86002 14.005 9.86002C13.565 9.86002 13.205 9.50002 13.205 9.06002V6.20001H4.40498V17.8H13.205V14.94C13.205 14.5 13.565 14.14 14.005 14.14C14.445 14.14 14.805 14.5 14.805 14.94ZM20.965 11.4L17.825 8.24C17.505 7.92 17.005 7.92 16.685 8.24C16.365 8.56 16.365 9.05999 16.685 9.37999L18.465 11.18L8.76499 11.2C8.32499 11.2 7.96499 11.56 7.96499 12C7.96499 12.44 8.32499 12.8 8.76499 12.8L18.465 12.78L16.685 14.58C16.365 14.9 16.385 15.4 16.685 15.72C16.845 15.88 17.045 15.96 17.245 15.96C17.445 15.96 17.665 15.88 17.805 15.72L20.945 12.56C21.285 12.22 21.285 11.72 20.965 11.4Z" /> </svg></a>`; } content.innerHTML = template.render; } function generateCozyGallery(templates) { const galleryWrapper = cozyPortfolio.querySelector( ".cozy-gallery__swiper-container .swiper-wrapper" ); $(galleryWrapper).empty(); templates.forEach((template) => { const wrapperDiv = document.createElement("div"); wrapperDiv.className = "cozy-portfolio swiper-slide post-ID__" + template.ID; wrapperDiv.setAttribute("data-post-id", template.ID); wrapperDiv.innerHTML = ` ${ blockOptions.featuredImage.position === "before" && template.featured_image ? ` <img class="cozy-portfolio-gallery__featured-image" src='${template.featured_image}' alt='${template.post_title}' /> ` : "" } <h2 class="cozy-portfolio-gallery__title"> ${ blockOptions.enableOptions.title ? `<a href='${ template.post_url.length > 1 ? template.post_url : "#" }' target='${ template.post_url.length > 1 ? "_blank" : "" }' rel='noopener'> ${template.post_title} </a></h2>` : "" } ${ blockOptions.featuredImage.position === "after" && template.featured_image ? ` <div class='cozy-portfolio-gallery__image-overlay'> </div> <img class="cozy-portfolio-gallery__featured-image" src='${template.featured_image}' alt='${template.post_title}' /> ` : "" } `; if (galleryWrapper) { // Append the wrapperDiv to galleryWrapper and then fadeIn $(galleryWrapper).append(wrapperDiv).children(":last").fadeIn("slow"); } }); const sliderAttr = { init: true, speed: 1200, slidesPerView: 1, effect: "fade", fadeEffect: { crossFade: true, }, navigation: { nextEl: `${portfolioClass} .swiper-button-next.cozy-gallery-next`, prevEl: `${portfolioClass} .swiper-button-prev.cozy-gallery-prev`, }, on: { init: function () { // Disable transitions on initialization this.setTransition(0); }, }, }; gallerySlider = new Swiper( portfolioClass + " .cozy-gallery__swiper-container", sliderAttr ); } }; })(jQuery);
Save
Back