1/** 2 * Slick Carousel wrapper. 3 * 4 * @author Htmlstream 5 * @version 1.0 6 * @requires 7 * 8 */ 9; 10(function ($) { 11 'use strict'; 12 13 $.HSCore.components.HSSlickCarousel = { 14 /** 15 * 16 * 17 * @var Object _baseConfig 18 */ 19 _baseConfig: { 20 autoplay: false, 21 infinite: true 22 }, 23 24 /** 25 * 26 * 27 * @var jQuery pageCollection 28 */ 29 pageCollection: $(), 30 31 /** 32 * Initialization of Slick Carousel wrapper. 33 * 34 * @param String selector (optional) 35 * @param Object config (optional) 36 * 37 * @return jQuery pageCollection - collection of initialized items. 38 */ 39 init: function (selector, config) { 40 this.collection = selector && $(selector).length ? $(selector) : $(); 41 if (!$(selector).length) return; 42 43 this.config = config && $.isPlainObject(config) ? 44 $.extend({}, this._baseConfig, config) : this._baseConfig; 45 46 this.config.itemSelector = selector; 47 48 this.initSlickCarousel(); 49 50 return this.pageCollection; 51 }, 52 53 initSlickCarousel: function () { 54 //Variables 55 var $self = this, 56 config = $self.config, 57 collection = $self.pageCollection; 58 59 //Actions 60 this.collection.each(function (i, el) { 61 //Variables 62 var $this = $(el), 63 id = $this.attr('id'), 64 65 //Markup elements 66 target = $this.data('nav-for'), 67 isThumb = $this.data('is-thumbs'), 68 arrowsClasses = $this.data('arrows-classes'), 69 arrowLeftClasses = $this.data('arrow-left-classes'), 70 arrowRightClasses = $this.data('arrow-right-classes'), 71 pagiClasses = $this.data('pagi-classes'), 72 pagiHelper = $this.data('pagi-helper'), 73 $pagiIcons = $this.data('pagi-icons'), 74 $prevMarkup = '<div class="js-prev ' + arrowsClasses + ' ' + arrowLeftClasses + '"></div>', 75 $nextMarkup = '<div class="js-next ' + arrowsClasses + ' ' + arrowRightClasses + '"></div>', 76 77 //Setters 78 setSlidesToShow = $this.data('slides-show'), 79 setSlidesToScroll = $this.data('slides-scroll'), 80 setAutoplay = $this.data('autoplay'), 81 setAnimation = $this.data('animation'), 82 setEasing = $this.data('easing'), 83 setFade = $this.data('fade'), 84 setSpeed = $this.data('speed'), 85 setSlidesRows = $this.data('rows'), 86 setCenterMode = $this.data('center-mode'), 87 setCenterPadding = $this.data('center-padding'), 88 setPauseOnHover = $this.data('pause-hover'), 89 setVariableWidth = $this.data('variable-width'), 90 setInitialSlide = $this.data('initial-slide'), 91 setVertical = $this.data('vertical'), 92 setRtl = $this.data('rtl'), 93 setInEffect = $this.data('in-effect'), 94 setOutEffect = $this.data('out-effect'), 95 setInfinite = $this.data('infinite'), 96 setDataTitlePosition = $this.data('title-pos-inside'), 97 setFocusOnSelect = $this.data('focus-on-select'), 98 setLazyLoad = $this.data('lazy-load'), 99 isAdaptiveHeight = $this.data('adaptive-height'), 100 numberedPaging = $this.data('numbered-pagination'), 101 setResponsive = JSON.parse(el.getAttribute('data-responsive')); 102 103 if ($this.find('[data-slide-type]').length) { 104 $self.videoSupport($this); 105 } 106 107 $this.on('init', function (event, slick) { 108 $(slick.$slides).css('height', 'auto'); 109 110 if (isThumb && setSlidesToShow >= $(slick.$slides).length) { 111 $this.addClass('slick-transform-off'); 112 } 113 }); 114 115 $this.on('init', function (event, slick) { 116 var slide = $(slick.$slides)[slick.currentSlide], 117 animatedElements = $(slide).find('[data-scs-animation-in]'); 118 119 $(animatedElements).each(function () { 120 var animationIn = $(this).data('scs-animation-in'), 121 animationDelay = $(this).data('scs-animation-delay'), 122 animationDuration = $(this).data('scs-animation-duration'); 123 124 $(this).css({ 125 'animation-delay': animationDelay + 'ms', 126 'animation-duration': animationDuration + 'ms' 127 }); 128 129 $(this).addClass('animated ' + animationIn).css('opacity', 1); 130 }); 131 }); 132 133 if (setInEffect && setOutEffect) { 134 $this.on('init', function (event, slick) { 135 $(slick.$slides).addClass('single-slide'); 136 }); 137 } 138 139 if (pagiHelper) { 140 $this.on('init', function (event, slick) { 141 var $pagination = $this.find('.js-pagination'); 142 143 if (!$pagination.length) return; 144 145 $pagination.append('<span class="u-dots-helper"></span>'); 146 }); 147 } 148 149 if (isThumb) { 150 $('#' + id).on('click', '.slick-slide', function (e) { 151 e.stopPropagation(); 152 153 //Variables 154 var i = $(this).data('slick-index'); 155 156 if ($('#' + id).slick('slickCurrentSlide') !== i) { 157 $('#' + id).slick('slickGoTo', i); 158 } 159 }); 160 } 161 162 $this.on('init', function (event, slider) { 163 var $pagination = $this.find('.js-pagination'); 164 165 if (!$pagination.length) return; 166 167 $($pagination[0].children[0]).addClass('slick-current'); 168 }); 169 170 $this.on('init', function (event, slick) { 171 var slide = $(slick.$slides)[0], 172 animatedElements = $(slide).find('[data-scs-animation-in]'); 173 174 $(animatedElements).each(function () { 175 var animationIn = $(this).data('scs-animation-in'); 176 177 $(this).addClass('animated ' + animationIn).css('opacity', 1); 178 }); 179 }); 180 181 if (numberedPaging) { 182 $this.on('init', function (event, slick) { 183 $(numberedPaging).html('<span class="u-paging__current">1</span><span class="u-paging__divider"></span><span class="u-paging__total">
183' + slick.slideCount + '</span>'); 184 }); 185 } 186 187 $this.slick({ 188 autoplay: setAutoplay ? true : false, 189 autoplaySpeed: setSpeed ? setSpeed : 3000, 190 191 cssEase: setAnimation ? setAnimation : 'ease', 192 easing: setEasing ? setEasing : 'linear', 193 fade: setFade ? true : false, 194 195 infinite: setInfinite ? true : false, 196 initialSlide: setInitialSlide ? setInitialSlide - 1 : 0, 197 slidesToShow: setSlidesToShow ? setSlidesToShow : 1, 198 slidesToScroll: setSlidesToScroll ? setSlidesToScroll : 1, 199 centerMode: setCenterMode ? true : false, 200 variableWidth: setVariableWidth ? true : false, 201 pauseOnHover: setPauseOnHover ? true : false, 202 rows: setSlidesRows ? setSlidesRows : 1, 203 vertical: setVertical ? true : false, 204 verticalSwiping: setVertical ? true : false, 205 rtl: setRtl ? true : false, 206 centerPadding: setCenterPadding ? setCenterPadding : 0, 207 focusOnSelect: setFocusOnSelect ? true : false, 208 lazyLoad: setLazyLoad ? setLazyLoad : false, 209 210 asNavFor: target ? target : false, 211 prevArrow: arrowsClasses ? $prevMarkup : false, 212 nextArrow: arrowsClasses ? $nextMarkup : false, 213 dots: pagiClasses ? true : false, 214 dotsClass: 'js-pagination ' + pagiClasses, 215 adaptiveHeight: !!isAdaptiveHeight, 216 customPaging: function (slider, i) { 217 var title = $(slider.$slides[i]).data('title'); 218 219 if (title && $pagiIcons) { 220 return '<span>' + title + '</span>' + $pagiIcons; 221 } else if ($pagiIcons) { 222 return '<span></span>' + $pagiIcons; 223 } else if (title && setDataTitlePosition) { 224 return '<span>' + title + '</span>'; 225 } else if (title && !setDataTitlePosition) { 226 return '<span></span>' + '<strong class="u-dot-title">' + title + '</strong>'; 227 } else { 228 return '<span></span>'; 229 } 230 }, 231 responsive: setResponsive 232 }); 233 234 $this.on('beforeChange', function (event, slider, currentSlide, nextSlide) { 235 var nxtSlide = $(slider.$slides)[nextSlide], 236 slide = $(slider.$slides)[currentSlide], 237 $pagination = $this.find('.js-pagination'), 238 animatedElements = $(nxtSlide).find('[data-scs-animation-in]'), 239 otherElements = $(slide).find('[data-scs-animation-in]'); 240 241 $(otherElements).each(function () { 242 var animationIn = $(this).data('scs-animation-in'); 243 244 $(this).removeClass('animated ' + animationIn); 245 }); 246 247 $(animatedElements).each(function () { 248 $(this).css('opacity', 0); 249 }); 250 251 if (!$pagination.length) return; 252 253 if (currentSlide > nextSlide) { 254 $($pagination[0].children).removeClass('slick-active-right'); 255 256 $($pagination[0].children[nextSlide]).addClass('slick-active-right'); 257 } else { 258 $($pagination[0].children).removeClass('slick-active-right'); 259 } 260 261 $($pagination[0].children).removeClass('slick-current'); 262 263 setTimeout(function () { 264 $($pagination[0].children[nextSlide]).addClass('slick-current'); 265 }, .25); 266 }); 267 268 if (numberedPaging) { 269 $this.on('beforeChange', function (event, slick, currentSlide, nextSlide) { 270 var i = (nextSlide ? nextSlide : 0) + 1; 271 272 $(numberedPaging).html('<span class="u-paging__current">' + i + '</span><span class="u-paging__divider"></span><span class="u-paging__total">' + slick.slideCount + '</span>'); 273 }); 274 } 275 276 $this.on('afterChange', function (event, slick, currentSlide) { 277 var slide = $(slick.$slides)[currentSlide], 278 animatedElements = $(slide).find('[data-scs-animation-in]'); 279 280 $(animatedElements).each(function () { 281 var animationIn = $(this).data('scs-animation-in'), 282 animationDelay = $(this).data('scs-animation-delay'), 283 animationDuration = $(this).data('scs-animation-duration'); 284 285 $(this).css({ 286 'animation-delay': animationDelay + 'ms', 287 'animation-duration': animationDuration + 'ms' 288 }); 289 290 $(this).addClass('animated ' + animationIn).css('opacity', 1); 291 }); 292 }); 293 294 if (setInEffect && setOutEffect) { 295 $this.on('afterChange', function (event, slick, currentSlide, nextSlide) { 296 $(slick.$slides).removeClass('animated set-position ' + setInEffect + ' ' + setOutEffect); 297 }); 298 299 $this.on('beforeChange', function (event, slick, currentSlide) { 300 $(slick.$slides[currentSlide]).addClass('animated ' + setOutEffect); 301 }); 302 303 $this.on('setPosition', function (event, slick) { 304 $(slick.$slides[slick.currentSlide]).addClass('animated set-position ' + setInEffect); 305 }); 306 } 307 308 //Actions 309 collection = collection.add($this); 310 }); 311 }, 312 313 /**
314 * Implementation of video support. 315 * 316 * @param jQuery carousel 317 * @param String videoSupport 318 * 319 * @return undefined 320 */ 321 videoSupport: function (carousel) { 322 if (!carousel.length) return; 323 324 carousel.on('beforeChange', function (event, slick, currentSlide, nextSlide) { 325 var slideType = $(slick.$slides[currentSlide]).data('slide-type'), 326 player = $(slick.$slides[currentSlide]).find('iframe').get(0), 327 command; 328 329 if (slideType == 'vimeo') { 330 command = { 331 "method": "pause", 332 "value": "true" 333 } 334 } else if (slideType == 'youtube') { 335 command = { 336 "event": "command", 337 "func": "pauseVideo" 338 } 339 } else { 340 return false; 341 } 342 343 if (player != undefined) { 344 player.contentWindow.postMessage(JSON.stringify(command), '*'); 345 } 346 }); 347 }, 348 349 /** 350 * Implementation of text animation. 351 * 352 * @param jQuery carousel 353 * @param String textAnimationSelector 354 * 355 * @requires charming.js, anime.js, textfx.js 356 * 357 * @return undefined 358 */ 359 initTextAnimation: function (carousel, textAnimationSelector) { 360 if (!window.TextFx || !window.anime || !carousel.length) return; 361 362 var $text = carousel.find(textAnimationSelector); 363 364 if (!$text.length) return; 365 366 $text.each(function (i, el) { 367 var $this = $(el); 368 369 if (!$this.data('TextFx')) { 370 $this.data('TextFx', new TextFx($this.get(0))); 371 } 372 }); 373 374 375 carousel.on('beforeChange', function (event, slick, currentSlide, nextSlide) { 376 var targets = slick.$slider 377 .find('.slick-track') 378 .children(); 379 380 var currentTarget = targets.eq(currentSlide), 381 nextTarget = targets.eq(nextSlide); 382 383 currentTarget = currentTarget.find(textAnimationSelector); 384 nextTarget = nextTarget.find(textAnimationSelector); 385 386 if (currentTarget.length) { 387 currentTarget.data('TextFx').hide(currentTarget.data('effect') ? currentTarget.data('effect') : 'fx1'); 388 } 389 390 if (nextTarget.length) { 391 nextTarget.data('TextFx').show(nextTarget.data('effect') ? nextTarget.data('effect') : 'fx1'); 392 } 393 }); 394 } 395 } 396})(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.