main.js
| 1 | /* |
| 2 | Plugin: Post Grid & Carousel Ultimate |
| 3 | Plugin URI: https://wpwax.com/product/post-grid-carousel-ultimate-pro/ |
| 4 | Author: wpWax |
| 5 | Version: 1.0 |
| 6 | */ |
| 7 | |
| 8 | (function ($) { |
| 9 | function alljs() { |
| 10 | /* Check PGCU Carousel Data */ |
| 11 | let checkData = function (data, value) { |
| 12 | return typeof data === 'undefined' ? value : data; |
| 13 | }; |
| 14 | /* PGCU Carousel */ |
| 15 | let pgcuCarousel = document.querySelectorAll('.pgcu-carousel'); |
| 16 | pgcuCarousel.forEach(function (el) { |
| 17 | let swiper = new Swiper(el, { |
| 18 | slidesPerView: checkData(parseInt(el.dataset.pgcuItems), 4), |
| 19 | spaceBetween: checkData(parseInt(el.dataset.pgcuMargin), 30), |
| 20 | loop: checkData(JSON.parse(el.dataset.pgcuLoop.toLowerCase()), false), |
| 21 | slidesPerGroup: checkData(parseInt(el.dataset.pgcuPerslide), 4), |
| 22 | speed: checkData(parseInt(el.dataset.pgcuSpeed), 3000), |
| 23 | autoplay: checkData(JSON.parse(el.dataset.pgcuAutoplay), {}), |
| 24 | navigation: { |
| 25 | nextEl: '.pgcu-carousel-nav__btn--next', |
| 26 | prevEl: '.pgcu-carousel-nav__btn--prev', |
| 27 | }, |
| 28 | pagination: { |
| 29 | el: '.pgcu-carousel-pagination', |
| 30 | type: 'bullets', |
| 31 | clickable: true |
| 32 | }, |
| 33 | breakpoints: checkData(JSON.parse(el.dataset.pgcuResponsive), {}) |
| 34 | }) |
| 35 | }); |
| 36 | |
| 37 | /* Marquee wrapper value */ |
| 38 | var pgcuStyles = document.createElement('style'); |
| 39 | document.head.append(pgcuStyles); |
| 40 | pgcuStyles.innerHTML = ` |
| 41 | .pgcu-carousel--marquee .swiper-wrapper{ |
| 42 | animation: pgcuMarquee var(--pgcu-marqueeSpeed) linear infinite running; |
| 43 | } |
| 44 | @keyframes pgcuMarquee { |
| 45 | 0% { |
| 46 | transform: translate(0, 0); |
| 47 | } |
| 48 | 100% { |
| 49 | transform: translate(var(--pgcu-marqueeItemsWidth), 0); |
| 50 | } |
| 51 | } |
| 52 | `; |
| 53 | var pgcuMarqueeCarousel = document.querySelectorAll('.pgcu-carousel--marquee'); |
| 54 | pgcuMarqueeCarousel.forEach(elm => { |
| 55 | var pgcuMarqueeCarouselItem = elm.querySelectorAll('.pgcu-post:not(.swiper-slide-duplicate)'); |
| 56 | pgcuMarqueeCarouselItem.forEach(elmnt => { |
| 57 | var pgcuMarqueeWrapperWidth = pgcuMarqueeCarouselItem.length * (elmnt.offsetWidth + checkData(parseInt(elm.dataset.pgcuMargin))); |
| 58 | elm.style.setProperty('--pgcu-marqueeItemsWidth', `-${pgcuMarqueeWrapperWidth}px`); |
| 59 | elm.style.setProperty('--pgcu-marqueeSpeed', `${checkData(parseInt(elm.dataset.pgcuSpeed))}ms`); |
| 60 | }) |
| 61 | }); |
| 62 | |
| 63 | /* Sortable Grid */ |
| 64 | let sortableGrids = document.querySelectorAll('.pgcu-post-sortable'); |
| 65 | if(sortableGrids.length){ |
| 66 | sortableGrids.forEach(elm=>{ |
| 67 | let pgcuSortable = window.Shuffle; |
| 68 | let pgcuSortableGrid = elm.querySelector('.pgcu-post-sortable__grid'); |
| 69 | let sortLink = elm.querySelectorAll('.pgcu-post-sortable__btn'); |
| 70 | let shuffleInstance = new pgcuSortable(pgcuSortableGrid, { |
| 71 | itemSelector: '.pgcu-post' |
| 72 | }); |
| 73 | sortLink.forEach(link=>{ |
| 74 | link.addEventListener('click', e=>{ |
| 75 | e.preventDefault(); |
| 76 | let _this = e.target; |
| 77 | let siblings = link.parentElement.children; |
| 78 | for(let sib of siblings){ |
| 79 | sib.classList.remove('pgcu-post-sortable__btn--active'); |
| 80 | } |
| 81 | _this.classList.add('pgcu-post-sortable__btn--active'); |
| 82 | let keyword = _this.getAttribute('data-sortable-nav'); |
| 83 | shuffleInstance.filter(keyword); |
| 84 | }) |
| 85 | }) |
| 86 | }) |
| 87 | } |
| 88 | } |
| 89 | |
| 90 | window.addEventListener('load', () => { |
| 91 | alljs(); |
| 92 | }) |
| 93 | |
| 94 | |
| 95 | /* Elementor Edit Mode */ |
| 96 | $(window).on('elementor/frontend/init', function () { |
| 97 | if (elementorFrontend.isEditMode()) { |
| 98 | alljs(); |
| 99 | elementorFrontend.hooks.addAction('frontend/element_ready/widget', function() { |
| 100 | alljs(); |
| 101 | }); |
| 102 | } |
| 103 | }); |
| 104 | |
| 105 | })(jQuery); |