1/** 2 * UpSolution Element: Gallery 3 */ 4;( function( $, _undefined ) { 5 "use strict"; 6 7 function usGallery( container ) { 8 const self = this; 9 10 // Private "Variables" 11 self.currentPage = 1; 12 self.ajaxData = {}; 13 self.allImageIds = []; 14 15 // Elements 16 self.$container = $( container ); 17 self.$list = $( '.w-gallery-list', container ); 18 self.$itemsImg = $( '.w-gallery-item-img', container ); 19 self.$loadmore = $( '.w-gallery-loadmore', container ); 20 self.$jsonContainer = $( '.w-gallery-json', container ); 21 22 // Bondable events 23 self._events = { 24 showNumberOfHiddenImages: $ush.debounce( self.showNumberOfHiddenImages.bind( self ), 5 ), 25 getItems: self.getItems.bind( self ), 26 usbReloadIsotopeLayout: self._usbReloadIsotopeLayout.bind( self ), 27 }; 28 29 if ( self.$jsonContainer.length && ! $us.usbPreview() ) { 30 self.ajaxData = self.$jsonContainer[ 0 ].onclick() || {}; 31 self.allImageIds = self.ajaxData.template_vars.ids || []; 32 } 33 34 if ( self.$container.hasClass( 'type_masonry' ) ) { 35 self.initMasonry(); 36 } 37 38 if ( self.$container.hasClass( 'action_popup_image' ) ) { 39 self.initMagnificPopup(); 40 } 41 42 // For Live Builder 43 self.$container.on( 'usbReloadIsotopeLayout', self._events.usbReloadIsotopeLayout ); 44 45 // Show number of hidden images 46 $us.$window.on( 'resize', self._events.showNumberOfHiddenImages ); 47 self.showNumberOfHiddenImages(); 48 49 if ( ! self.allImageIds.length ) { 50 return; 51 } 52 53 $( 'button', self.$loadmore ).on( 'click', self._events.getItems ); 54 55 if ( self.ajaxData.template_vars.pagination == 'load_on_scroll' ) { 56 $us.waypoints.add( self.$loadmore, /* offset */'-70%', self._events.getItems ); 57 } 58 } 59 60 usGallery.prototype = { 61 62 initMagnificPopup: function() { 63 $( 'a.w-gallery-item-link', this.$container ).magnificPopup( { 64 type: 'image', 65 gallery: { 66 enabled: true, 67 navigateByImgClick: true, 68 preload: [0, 1], 69 tPrev: $us.langOptions.magnificPopup.tPrev, // Alt text on left arrow 70 tNext: $us.langOptions.magnificPopup.tNext, // Alt text on right arrow 71 tCounter: $us.langOptions.magnificPopup.tCounter // Markup for "1 of 7" counter 72 }, 73 removalDelay: 300, 74 mainClass: 'mfp-fade', 75 fixedContentPos: true 76 } ); 77 }, 78 79 initMasonry: function() { 80 const self = this; 81 const isotopeOptions = { 82 itemSelector: '.w-gallery-item:not(.hidden)', 83 layoutMode: 'masonry', 84 isOriginLeft: ! $ush.isRtl(), 85 }; 86 87 if ( self.$list.parents( '.w-tabs-section-content-h' ).length ) { 88 isotopeOptions.transitionDuration = 0; 89 } 90 91 $( '>*:not(.hidden)', self.$list ).imagesLoaded( () => { 92 self.$list.isotope( isotopeOptions ); 93 self.$list.isotope(); 94 } ); 95 $us.$canvas.on( 'contentChange', () => { 96 $( '>*:not(.hidden)', self.$list ).imagesLoaded( () => { 97 self.$list.isotope(); 98 } ); 99 } ); 100 }, 101 102 /** 103 * Show number of hidden images. 104 */ 105 showNumberOfHiddenImages: function() { 106 const self = this; 107 const hiddenImagesNumber = self.$itemsImg.filter( ':hidden' ).length; 108 109 self.$itemsImg.removeAttr( 'data-hidden-images-number' ); 110 111 if ( hiddenImagesNumber ) { 112 self.$itemsImg 113 .filter( ':visible:last' ) 114 .attr( 'data-hidden-images-number', hiddenImagesNumber ); 115 } 116 }, 117 118 /** 119 * Reload layout in the Live Builder context. 120 * 121 * @event handler 122 */ 123 _usbReloadIsotopeLayout: function() { 124 const self = this; 125 if ( self.$container.hasClass( 'with_isotope' ) ) { 126 self.$list.isotope( 'layout' ); 127 } 128 }, 129 130 /** 131 * Get and add the items. 132 */ 133 getItems: function() { 134 const self = this; 135 136 if ( self.$loadmore.hasClass( 'hidden' ) ) { 137 return; 138 } 139 140 self.currentPage += 1; 141 142 // Get next part ids 143 self.ajaxData.template_vars.ids = self.allImageIds.slice( 144 self.ajaxData.template_vars.quantity * ( self.currentPage - 1 ), /* start */ 145 self.ajaxData.template_vars.quantity * self.currentPage /* end */ 146 ); 147 148 // Stop ajax actions, if all ids loaded 149 if ( ! self.ajaxData.template_vars.ids.length ) { 150 self.$loadmore.addClass( 'hidden' ); 151 152 return; 153 } 154 155 self.$loadmore.addClass( 'loading' ); 156 157 $.ajax( { 158 type: 'post', 159 url: $us.ajaxUrl, 160 data: { 161 action: self.ajaxData.action, 162 template_vars: JSON.stringify( self.ajaxData.template_vars ), 163 }, 164 success: ( html ) => { 165 var $result = $( html ), 166 $items = $( '.w-gallery-list > *', $result ); 167 168 if ( ! $items.length || self.currentPage === self.ajaxData.template_vars.max_num_pages ) { 169 self.$loadmore 170 .addClass( 'hidden' ); 171 } 172 173 self.$list.append( $items ); 174 175 if ( self.$container.hasClass( 'action_popup_image' ) ) { 176 self.initMagnificPopup(); 177 } 178 179 if ( self.$container.hasClass( 'type_masonry' ) ) { 180 var isotope = self.$list.data( 'isotope' ); 181 if ( isotope ) { 182 isotope.insert( $items ); 183 isotope.reloadItems(); 184 } 185 } 186 187 if ( self.ajaxData.template_vars.pagination == 'load_on_scroll' ) {
188 $us.waypoints.add( self.$loadmore, /* offset */'-70%', self._events.getItems ); 189 } 190 191 self.$loadmore.removeClass( 'loading' ); 192 }, 193 error: () => { 194 self.$loadmore.removeClass( 'loading' ); 195 } 196 } ); 197 }, 198 }; 199 200 $.fn.usGallery = function() { 201 return this.each( function() { 202 $( this ).data( 'usGallery', new usGallery( this ) ); 203 } ); 204 }; 205 206 $( () => $( '.w-gallery' ).usGallery() ); 207 208 // Init in Post\Product List or Grid context 209 $us.$document.on( 'usPostList.itemsLoaded usGrid.itemsLoaded', ( _, $items ) => { 210 $( '.w-gallery', $items ).usGallery(); 211 } ); 212 213} )( jQuery );
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.