1/** 2 * UpSolution Element: Content Carousel 3 */ 4! function( $, undefined ) { 5 "use strict"; 6 7 window.$us = window.$us || {}; 8 9 /** 10 * @param {String} container. 11 */ 12 function usContentCarousel( container ) { 13 const self = this; 14 15 // Elements 16 const $carouselContainer = $( '.owl-carousel', container ); 17 18 // Predefined options suitable for content carousel 19 // https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html 20 self.options = { 21 navElement: 'button', 22 navText: [ '', '' ], 23 responsiveRefreshRate: 100, 24 } 25 26 // Bindable events 27 self._events = { 28 continualRotationCssResize: self.continualRotationCssResize.bind( self ), 29 controlItemAnimation: self.controlItemAnimation.bind( self ), 30 }; 31 32 if ( $carouselContainer.is( '[onclick]' ) ) { 33 $.extend( self.options, $carouselContainer[0].onclick() || {} ); 34 if ( ! $us.usbPreview() ) { 35 $carouselContainer.removeAttr( 'onclick' ); 36 } 37 } 38 39 // To prevent scroll blocking on mobiles 40 if ( $us.$html.hasClass( 'touch' ) || $us.$html.hasClass( 'ios-touch' ) ) { 41 $.extend( self.options, { 42 mouseDrag: false, 43 } ); 44 } 45 46 // Disable autoWidth for [vc_row_inner] items 47 if ( self.options.slideBy == 'page' ) { 48 if ( $( '.wpb_row:first', $carouselContainer ).length ) { 49 $.each( self.options.responsive, ( _, options ) => { 50 $.extend( options, { 51 items:1, 52 autoWidth: false 53 } ); 54 } ); 55 } 56 } 57 58 // Override specific options for proper operation in Live Builder 59 if ( $us.usbPreview() ) { 60 $.extend( self.options, { 61 autoplayHoverPause: true, 62 mouseDrag: false, 63 touchDrag: false, 64 loop: false, 65 } ); 66 // TODO: Find a more elegant solution to work correctly in Live Builder! 67 $carouselContainer.one( 'initialized.owl.carousel', () => { 68 // ../plugins/us-core/builder/assets/js/builder-preview.js#L2734 69 $( '.owl-item', $carouselContainer ).each( ( _, node ) => { 70 var $node = $( node ), 71 $element = $( '> *', node ), 72 usbid = $element.data( 'usbid' ) || $element.data( 'usbid2' ); 73 $node.attr( 'data-usbid', usbid ); 74 $element.data( 'usbid2', usbid ).removeAttr( 'data-usbid' ); 75 } ); 76 $ush.timeout( () => { 77 $( '.owl-dots *, .owl-prev, .owl-next', $carouselContainer ).addClass( 'usb_skip_elmSelected' ); 78 }, 1 ); 79 } ); 80 $( 'style[data-for]', $carouselContainer ).each( ( _, node ) => { 81 $( node ).next().prepend( node ); 82 } ); 83 } 84 85 // Re-init for "Show More" link after carousel init to set correct height. 86 $carouselContainer.one( 'initialized.owl.carousel', () => { 87 $( '[data-content-height]', $carouselContainer ).each( ( _, node ) => { 88 var $node = $( node ), 89 usCollapsibleContent = $node.data( 'usCollapsibleContent' ); 90 // Init for nodes that are cloned 91 if ( $ush.isUndefined( usCollapsibleContent ) ) { 92 usCollapsibleContent = $node.usCollapsibleContent().data( 'usCollapsibleContent' ); 93 } 94 usCollapsibleContent.setHeight(); 95 $ush.timeout( () => { 96 $carouselContainer.trigger( 'refresh.owl.carousel' ); 97 }, 1 ); 98 } ); 99 // Updates the carousel height to expanded and collapsed text 100 if ( self.options.autoHeight ) { 101 $( '[data-content-height]', $carouselContainer ).on( 'showContent', () => { 102 $list.trigger( 'refresh.owl.carousel' ); 103 } ); 104 } 105 }); 106 107 if ( self.options.autoplayContinual ) { 108 self.options.slideTransition = 'linear'; 109 self.options.autoplaySpeed = self.options.autoplayTimeout; 110 self.options.smartSpeed = self.options.autoplayTimeout; 111 if ( ! self.options.autoWidth ) { 112 self.options.slideBy = 1; 113 } 114 } 115 116 if ( $carouselContainer.data( 'owl.carousel' )) { 117 $carouselContainer.trigger( 'destroy.owl.carousel' ); 118 } 119 120 // Init Owl Carousel 121 self.owlCarousel = $carouselContainer.owlCarousel( self.options ).data( 'owl.carousel' ); 122 123 // Control animation appearance (USAnimate) in continual autoplay 124 if ( 125 $( '.us_animate_this:first', $carouselContainer ).length 126 ) { 127 if ( self.options.autoplayContinual ) { 128 $carouselContainer.on( 'translate.owl.carousel', self._events.controlItemAnimation ); 129 } else { 130 $( '.owl-item.active', self.owlCarousel.$stage ).addClass( 'animation-start' ); 131 $carouselContainer.on( 'translated.owl.carousel', self._events.controlItemAnimation ); 132 } 133 } 134
135 // Trigger continual autoplay 136 if ( $carouselContainer && self.options.autoplayContinual ) { 137 $carouselContainer.trigger( 'next.owl.carousel' ); 138 } 139 140 // Set aria labels for navigation arrows 141 if ( 142 $carouselContainer 143 && self.options.aria_labels.prev 144 && self.options.aria_labels.next 145 ) { 146 $( '.owl-prev', $carouselContainer ).attr( 'aria-label', self.options.aria_labels.prev ); 147 $( '.owl-next', $carouselContainer ).attr( 'aria-label', self.options.aria_labels.next ); 148 } 149 150 const screenSize = $carouselContainer.attr( 'class' ).match( /owl-responsive-(\d+)/ )[1]; 151 const currentOptionsResponsive = ( self.options.responsive || {} )[ screenSize ] || {}; 152 153 // Toggle classes for responsive 154 if ( currentOptionsResponsive ) { 155 // 'autoheight' class 156 if ( currentOptionsResponsive.items === 1 ) { 157 $carouselContainer.toggleClass( 'autoheight', currentOptionsResponsive.autoHeight ); 158 } 159 // 'with_dots' class 160 $carouselContainer.toggleClass( 'with_dots', currentOptionsResponsive.dots ); 161 // 'autoplay_continual_css' class 162 $carouselContainer.toggleClass( 'autoplay_continual_css', currentOptionsResponsive.autoplayContinualCss ); 163 } 164 165 // Init continual rotation via CSS 166 if ( self.owlCarousel && self.options.autoplayContinualCss ) { 167 self.continualRotationCss(); 168 169 // Responsive continual rotation via CSS 170 $carouselContainer.on( 'resized.owl.carousel', self._events.continualRotationCssResize ); 171 } 172 } 173 174 // Content Carousel API 175 $.extend( usContentCarousel.prototype, { 176 177 /** 178 * Continual rotation via CSS 179 * Duplicate items to make width higher than container for infinite rotation 180 */ 181 continualRotationCss: function( isResizeUse = false ) { 182 const self = this; 183 184 if ( ! self.owlCarousel.$element.hasClass( 'autoplay_continual_css' ) ) { 185 return; 186 } 187 188 const $stage = self.owlCarousel.$stage; 189 const $items = $stage.children(); 190 191 // Do not duplicate items if they are already duplicated 192 if ( 193 isResizeUse 194 && self.$originalItems 195 && ( self.$originalItems.length !== $items.length ) 196 ) { 197 return; 198 } 199 200 $stage.removeAttr( 'style' ); 201 202 if ( ! self.$originalItems ) { 203 self.$originalItems = $items.clone(); 204 } 205 206 var iteration = 0; 207 208 // Fill the stage if needed 209 while ( $stage[0].scrollWidth < self.owlCarousel.$element.outerWidth() ) { 210 if ( iteration++ > 200 ) { 211 break; 212 } 213 $stage.append( self.$originalItems.clone() ); 214 } 215 216 // Duplicate stage content for infinite rotation 217 $stage.append( self.owlCarousel.$stage.html() ); 218 }, 219 /** 220 * Toggle continual rotation via CSS based on responsive values 221 */ 222 continualRotationCssResize: function() { 223 const self = this; 224 const $element = self.owlCarousel.$element; 225 226 self.owlCarousel.$stage.removeAttr( 'style' ); 227 228 const screenSize = ( String( $element[0].className ).match( /owl-responsive-(\d+)/ ) || [] )[1]; 229 const carouselResponsive = ( self.options.responsive || {} )[ screenSize ] || {}; 230 231 if ( ! carouselResponsive.autoplayContinualCss ) { 232 $element.removeClass( 'autoplay_continual_css' ); 233 self.owlCarousel.$stage.html( self.$originalItems ); 234 $element.trigger( 'refresh.owl.carousel' ); 235 } else { 236 $element.addClass( 'autoplay_continual_css' ); 237 self.continualRotationCss( true ); 238 } 239 }, 240 /* 241 * Control animation appearance (USAnimate) 242 */ 243 controlItemAnimation: function( e ) { 244 const self = this; 245 if ( 246 ! e.item 247 || ! e.item.index 248 || ! e.type 249 ) { 250 return; 251 } 252 253 const $stage = self.owlCarousel.$stage; 254 255 // Prevent hide item when it is visible for autoplayContinual 256 if ( e.type === 'translate' && self.options.autoplayContinual ) { 257 // Select item that will be translated 258 const $translatedOwlItem = $( '.owl-item', $stage ).eq( e.item.index - 1 ); 259 if ( $translatedOwlItem.length ) { 260 $translatedOwlItem.addClass( 'translated' ); 261 $ush.timeout( () => { 262 $translatedOwlItem.removeClass( 'translated' ); 263 }, self.options.autoplaySpeed ); 264 } 265 } 266 267 // Control start animation class of items after carousel is translated 268 if ( e.type === 'translated' ) { 269 $stage.find( '.owl-item:not(.active)' ).removeClass( 'animation-start' ); 270 $stage.find( '.owl-item.active' ).addClass( 'animation-start' ); 271 } 272 }, 273 } ); 274 275 $.fn.usContentCarousel = function( options ) { 276 return this.each( function() { 277 $( this ).data( 'usContentCarousel', new usContentCarousel( this, options ) ); 278 } ); 279 }; 280 281 $( () => {
282 $( '.w-content-carousel' ).usContentCarousel(); 283 } ); 284 285}( 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.