1jQuery(window).on('load', function () { 2 3 4 // Aqui eu consigo alternar entre a versao paginada ou normal, apenas pela classe 5 // vamos deixar tudo no mesmo arquivo, e mudar a classe atraves do elementor. 6 // vamos precisar passar algumas informacoes para o JS (numero de paginas, etc) 7 8 // Talvez de para deixar o packery etc tudo na mesma variavel, porque o packery tambem pode ser paginado 9 10 if ( jQuery( ".elpt-portfolio-content" ).length ) { 11 //Isotope Layout 12 var $grid = jQuery('.elpt-portfolio-content-isotope').isotope({ 13 //layoutMode: 'packery', 14 layoutMode: 'masonry', 15 itemSelector: '.portfolio-item-wrapper' 16 }); 17 18 $grid.imagesLoaded().progress( function() { 19 $grid.isotope('layout'); 20 }); 21 22 //Packery Layout 23 var $packery = jQuery('.elpt-portfolio-content-packery').isotope({ 24 layoutMode: 'packery', 25 itemSelector: '.portfolio-item-wrapper' 26 }); 27 28 $packery.imagesLoaded().progress( function() { 29 $packery.isotope('layout'); 30 }); 31 32 //fitRows Layout (for Special Grid 7 and similar) 33 var $fitrows = jQuery('.elpt-portfolio-content-fitrows').isotope({ 34 layoutMode: 'fitRows', 35 itemSelector: '.portfolio-item-wrapper' 36 }); 37 38 $fitrows.imagesLoaded().progress( function() { 39 $fitrows.isotope('layout'); 40 }); 41 42 /* 43 * Paginated Isotope 44 */ 45 //https://codepen.io/TimRizzo/details/ervrRq 46 //https://codepen.io/Igorxp5/pen/ojJLQE 47 48 var itemSelector = ".portfolio-item-wrapper"; 49 50 // Support masonry, packery, and fitRows pagination 51 var $container = jQuery('.elpt-portfolio-content-isotope-pro').isotope({ 52 layoutMode: 'masonry', 53 itemSelector: itemSelector 54 }); 55 56 // Check layout mode based on additional classes 57 if ($container.hasClass('elpt-portfolio-content-fitrows')) { 58 // Special Grid 7 - Alternate Rows 1 59 $container.isotope('option', { layoutMode: 'fitRows' }); 60 } else if ($container.hasClass('elpt-portfolio-content-packery')) { 61 // Grid Builder 62 $container.isotope('option', { layoutMode: 'packery' }); 63 } 64 65 $container.imagesLoaded().progress( function() { 66 $container.isotope('layout'); 67 }); 68 69 // Pagination Variables 70 var itemsPerPageDefault = 10; // Default value 71 72 if (typeof gridSettings !== 'undefined' && gridSettings.itemsPerPageDefault !== undefined) { 73 itemsPerPageDefault = gridSettings.itemsPerPageDefault; 74 } 75 76 var itemsPerPage = defineItemsPerPage(); 77 var currentNumberPages = 1; 78 var currentPage = 1; 79 var currentFilter = '*'; 80 var filterAtribute = 'data-filter'; 81 var pageAtribute = 'data-page'; 82 var pagerClass = 'isotope-pager'; 83 84 //Restore on window resize 85 jQuery(window).resize(function(){ 86 changeFilter(itemSelector); 87 }) 88 89 90 91 // update items based on current filters 92 function changeFilter(selector) { 93 $container.isotope({ filter: selector } 94 ); } 95 96 97 function getFilterSelector() { 98 var selector = itemSelector; 99 if (currentFilter != '*') { 100 selector += currentFilter; 101 } 102 return selector; 103 } 104 105 function goToPage(n) { 106 currentPage = n; 107 108 var selector = getFilterSelector(); 109 selector += `[${pageAtribute}="${currentPage}"]`; 110 111 // Check if Fixed Layout Mode is enabled (only for Grid Builder) 112 var $gridBuilder = jQuery('.elpt-portfolio-content-packery.elpt-portfolio-grid-builder'); 113 var isFixedLayout = $gridBuilder.length > 0 && $gridBuilder.hasClass('elpt-fixed-layout-mode'); 114 115 if (isFixedLayout) { 116 // Fixed Layout: Re-apply position classes for items on this page 117 applyFixedLayoutPositionsForPage($gridBuilder, currentPage); 118 } 119 120 changeFilter(selector); 121 122 // Fixed Layout: Force layout recalculation after filtering 123 // This ensures container height is correct for the visible items only 124 if (isFixedLayout) { 125 $container.isotope('layout'); 126 } 127 } 128 129 function defineItemsPerPage() { 130 var pages = itemsPerPageDefault; 131 132 return pages; 133 } 134 135 function setPagination() { 136 137 var SettingsPagesOnItems = function(){ 138 139 var item = 1; 140 var page = 1; 141 var selector = getFilterSelector(); 142 143 $container.children(selector).each(function(){ 144 if( item > itemsPerPage ) { 145 page++; 146 item = 1; 147 } 148 jQuery(this).attr(pageAtribute, page); 149 item++; 150 }); 151 152 currentNumberPages = page; 153 154 }(); 155 156 var CreatePagers = function() { 157 158 var $isotopePager = ( jQuery('.'+pagerClass).length == 0 ) ? jQuery('<div class="'+pagerClass+'"></div>') : jQuery('.'+pagerClass); 159 160 $isotopePager.html(''); 161 162 for( var i = 0; i < currentNumberPages; i++ ) { 163 var $pager = jQuery('<a href="javascript:void(0);" class="pager" '+pageAtribute+'="'+(i+1)+'"></a>'); 164 $pager.html(i+1); 165 166 $pager.click(function(){ 167 jQuery('.isotope-pager .active').removeClass('active'); 168 jQuery(this).addClass('active'); 169 var page = jQuery(this).eq(0).attr(pageAtribute); 170 goToPage(page); 171 }); 172 173 $pager.appendTo($isotopePager); 174 } 175 176 $container.after($isotopePager); 177 178 }(); 179 180 } 181 182 setPagination(); 183 goToPage(1); 184 185 // Fixed Layout Filter function 186 // Note: This function only applies position classes to matching items. 187 // The actual Isotope filtering is done later by goToPage() to avoid 188 // container height being calculated for all items before pagination. 189 function applyFixedLayoutFilter($container, filterValue) { 190 var $allItems = $container.children('.portfolio-item-wrapper'); 191 192 // Determine which items match the filter (without hiding them yet) 193 var $matchingItems; 194 if (filterValue === '*') { 195 $matchingItems = $allItems; 196 } else { 197 $matchingItems = $allItems.filter(filterValue); 198 } 199 200 // Remove all position classes from all items 201 $allItems.removeClass(function(index, className) { 202 return (className.match(/\belpt-grid-pos-\d+\b/g) || []).join(' '); 203 }); 204 205 // Apply position classes to matching items in their new visual order 206 // This makes item 2 become "position 1" and get position 1's styles (60%) 207 $matchingItems.each(function(visualIndex) { 208 jQuery(this).addClass('elpt-grid-pos-' + (visualIndex + 1)); 209 }); 210 211 // Note: We intentionally do NOT call isotope({ filter }) here. 212 // The filtering will be handled by setPagination() + goToPage() 213 // which applies both the category filter AND pagination together, 214 // ensuring the container height is calculated correctly. 215 } 216 217 // Fixed Layout: Apply position classes to visible items on current page 218 // This ensures items get correct styles when paginating in Fixed Layout Mode 219 function applyFixedLayoutPositionsForPage($container, pageNumber) { 220 var $allItems = $container.children('.portfolio-item-wrapper'); 221 222 // Get items that match current filter AND current page 223 var selector = getFilterSelector(); 224 selector += '[' + pageAtribute + '="' + pageNumber + '"]'; 225 var $visibleItems = $allItems.filter(selector); 226 227 // Remove all position classes from all items 228 $allItems.removeClass(function(index, className) { 229 return (className.match(/\belpt-grid-pos-\d+\b/g) || []).join(' '); 230 }); 231 232 // Apply position classes to visible items in their visual order 233 $visibleItems.each(function(visualIndex) { 234 jQuery(this).addClass('elpt-grid-pos-' + (visualIndex + 1)); 235 }); 236 } 237 238 // On Click Actions 239 jQuery('.elpt-portfolio-filter').on('click', 'button', function () { 240 jQuery('.elpt-portfolio-filter button').removeClass('item-active'); 241 jQuery(this).addClass('item-active'); 242 243 var filterValue = jQuery(this).attr(filterAtribute);
244 var filter = filterValue; 245 currentFilter = filter; 246 247 // Check if Fixed Layout Mode is enabled (only for Grid Builder) 248 var $gridBuilder = jQuery('.elpt-portfolio-content-packery.elpt-portfolio-grid-builder'); 249 var isFixedLayout = $gridBuilder.hasClass('elpt-fixed-layout-mode'); 250 251 if (isFixedLayout) { 252 // Fixed Layout: Use CSS visibility instead of Isotope filter 253 applyFixedLayoutFilter($gridBuilder, filterValue); 254 } else { 255 // Normal: Use Isotope filter (current behavior) 256 $grid.isotope({ 257 filter: filterValue 258 }); 259 $packery.isotope({ 260 filter: filterValue 261 }); 262 $fitrows.isotope({ 263 filter: filterValue 264 }); 265 } 266 267 setPagination(); 268 goToPage(1); 269 }); 270 271 } 272 273});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.