1/* 2* Slick Carousel wrapper 3* @version: 2.0.0 (Mon, 25 Nov 2019) 4* @requires: jQuery v3.0 or later, Slick v1.8.0 5* @author: HtmlStream 6* @event-namespace: .HSCore.components.HSSlickCarousel 7* @license: Htmlstream Libraries (https://htmlstream.com/licenses) 8* Copyright 2020 Htmlstream 9*/ 10 11;(function ($) { 12 'use strict'; 13 14 $.HSCore.components.HSSlickCarousel = { 15 defaults: { 16 infinite: false, 17 pauseOnHover: false, 18 centerPadding: 0, 19 lazyLoad: false, 20 prevArrow: null, 21 nextArrow: null, 22 23 autoplaySpeed: 3000, 24 speed: 300, 25 initialDelay: 600, 26 27 isThumbs: false, 28 isThumbsProgressCircle: false, 29 thumbsProgressContainer: null, 30 thumbsProgressOptions: { 31 color: '#000', 32 width: 4 33 }, 34 35 animationIn: null, 36 animationOut: null, 37 38 dotsWithIcon: null, 39 dotsFromTitles: null, 40 dotsAsProgressLine: false, 41 hasDotsHelper: false, 42 43 counterSelector: null, 44 counterDivider: '/', 45 counterClassMap: { 46 current: 'slick-counter-current', 47 total: 'slick-counter-total', 48 divider: 'slick-counter-divider' 49 } 50 }, 51 52 init: function (el, options) { 53 if (!el.length) return; 54 55 var context = this, 56 defaults = Object.assign({}, context.defaults), 57 dataSettings = el.attr('data-hs-slick-carousel-options') ? JSON.parse(el.attr('data-hs-slick-carousel-options')) : {}, 58 settings = { 59 id: el.attr('id') 60 }; 61 settings = $.extend(defaults, settings, dataSettings); 62 settings = $.extend(settings, { 63 customPaging: function (slider, i) { 64 var title = $(slider.$slides[i]).data('hs-slick-carousel-slide-title'); 65 66 if (title && settings.dotsWithIcon) { 67 return '<span>' + title + '</span>' + settings.dotsWithIcon; 68 } else if (settings.dotsWithIcon) { 69 return '<span></span>' + settings.dotsWithIcon; 70 } else if (title && settings.dotsFromTitles) { 71 return '<span>' + title + '</span>'; 72 } else if (title && !settings.dotsFromTitles) { 73 return '<span></span>' + '<strong class="dot-title">' + title + '</strong>'; 74 } else { 75 return '<span></span>'; 76 } 77 } 78 }, options); 79 80 /* Start : object preparation */ 81 82 if (el.find('[data-slide-type]').length) { 83 context.videoSupport(el); 84 } 85 86 el.on('init', function (event, slick) { 87 context.transformOff(el, settings, event, slick); 88 }); 89 90 el.on('init', function (event, slick) { 91 context.setCustomAnimation(event, slick); 92 }); 93 94 if (settings.animationIn && settings.animationOut) { 95 el.on('init', function (event, slick) { 96 context.setSingleClass(event, slick); 97 }); 98 } 99 100 if (settings.dotsAsProgressLine) { 101 el.on('init', function () { 102 context.setCustomLineDots(el, settings); 103 }); 104 } 105 106 if (settings.hasDotsHelper) { 107 el.on('init', function (el, event, slick) { 108 context.setCustomDots(el, event, slick); 109 }); 110 } 111 112 if (settings.isThumbs) { 113 if (settings.isThumbsProgressCircle) { 114 el.on('init', function (event, slick) { 115 context.setCustomProgressCircle(el, settings, event, slick); 116 }); 117 } 118 119 $('#' + settings.id).on('click', '.slick-slide', function (e) { 120 e.stopPropagation(); 121 122 context.goToTargetSlide($(this), settings); 123 }); 124 } 125 126 el.on('init', function (event, slick) { 127 context.setCustomCurrentClass(el, event, slick); 128 }); 129 130 el.on('init', function (event, slick) { 131 context.setInitialCustomAnimation(event, slick); 132 }); 133 134 if (settings.counterSelector) { 135 el.on('init', function (event, slick) { 136 context.setCounter(settings, event, slick); 137 }); 138 } 139 140 /* End : object preparation */ 141 142 var newSlick = el.slick(settings); 143 144 /* Start : custom functionality implementation */ 145 146 if ($(settings.asNavFor)[0] && $(settings.asNavFor)[0].dataset.hsSlickCarouselOptions ? JSON.parse($(settings.asNavFor)[0].dataset.hsSlickCarouselOptions).isThumbsProgress : false) { 147 context.setInitialDelay(el, settings); 148 } 149 150 el.on('beforeChange', function (event, slick, currentSlide, nextSlide) { 151 context.setCustomClasses(el, event, slick, currentSlide, nextSlide); 152 }); 153 154 if (settings.counterSelector) { 155 el.on('beforeChange', function (event, slick, currentSlide, nextSlide) { 156 context.counting(settings, event, slick, currentSlide, nextSlide); 157 }); 158 } 159 160 el.on('afterChange', function (event, slick) { 161 context.setCustomAnimation(event, slick); 162 }); 163 164 if (settings.animationIn && settings.animationOut) { 165 el.on('afterChange', function (event, slick, currentSlide, nextSlide) { 166 context.animationIn(settings, event, slick, currentSlide, nextSlide); 167 }); 168 169 el.on('beforeChange', function (event, slick, currentSlide) { 170 context.animationOut(settings, event, slick, currentSlide); 171 }); 172 173 el.on('setPosition', function (event, slick) { 174 context.setPosition(settings, event, slick); 175 }); 176 } 177 178 /* End : custom functionality implementation */ 179 180 return newSlick; 181 }, 182 183 // ----- Start : Preparation ----- 184 185 transformOff: function (el, params, event, slick) { 186 var settings = params; 187
188 $(slick.$slides).css('height', 'auto'); 189 190 if (settings.isThumbs && settings.slidesToShow >= $(slick.$slides).length) { 191 el.addClass('slick-transform-off'); 192 } 193 }, 194 195 setCustomAnimation: function (event, slick) { 196 var slide = $(slick.$slides)[slick.currentSlide], 197 animatedElements = $(slide).find('[data-hs-slick-carousel-animation]'); 198 199 $(animatedElements).each(function () { 200 var animationIn = $(this).data('hs-slick-carousel-animation'), 201 animationDelay = $(this).data('hs-slick-carousel-animation-delay'), 202 animationDuration = $(this).data('hs-slick-carousel-animation-duration'); 203 204 $(this).css({ 205 'animation-delay': animationDelay + 'ms', 206 'animation-duration': animationDuration + 'ms' 207 }); 208 209 $(this).addClass('animated ' + animationIn).css({ 210 opacity: 1 211 }); 212 }); 213 }, 214 215 setInitialCustomAnimation: function (event, slick) { 216 var slide = $(slick.$slides)[0], 217 animatedElements = $(slide).find('[data-hs-slick-carousel-animation]'); 218 219 $(animatedElements).each(function () { 220 var animationIn = $(this).data('hs-slick-carousel-animation'); 221 222 $(this).addClass('animated ' + animationIn).css('opacity', 1); 223 }); 224 }, 225 226 setSingleClass: function (event, slick) { 227 $(slick.$slides).addClass('single-slide'); 228 }, 229 230 setCustomDots: function (el) { 231 var $dots = el.find('.js-dots'); 232 233 if (!$dots.length) return; 234 235 $dots.append('<span class="dots-helper"></span>'); 236 }, 237 238 setCustomLineDots: function (el, params) { 239 var $dots = el.find('[class="' + params.dotsClass + '"]'), 240 $dotsItems = $dots.find('li'); 241 242 if (!$dots.length) return; 243 244 setTimeout(function () { 245 el.addClass('slick-line-dots-ready'); 246 }); 247 248 $dotsItems.each(function () { 249 $(this).append('<span class="dot-line"><span class="dot-line-helper" style="transition-duration: ' + (params.autoplaySpeed + params.speed) + 'ms;"></span></span>'); 250 }); 251 }, 252 253 setCustomProgressCircle: function (el, params, event, slick) { 254 var settings = params, 255 thumbProgressElLength = 0, 256 style = '<style type="text/css"></style>', 257 $style = $(style); 258 259 $(slick.$slides).each(function (i) { 260 var $el = $('<span class="slick-thumb-progress"><svg version="1.1" viewBox="0 0 160 160"><path class="slick-thumb-progress__path" d="M 79.98452083651917 4.000001576345426 A 76 76 0 1 1 79.89443752470656 4.0000733121155605 Z"></path></svg></span>'), 261 $path = $el.find('svg path'); 262 thumbProgressElLength = parseInt($path[0].getTotalLength()); 263 264 $(slick.$slides[i]).children(settings.thumbsProgressContainer).append($el); 265 }); 266 267 $style.text('.slick-thumb-progress .slick-thumb-progress__path {' + 268 'opacity: 0;' + 269 'fill: transparent;' + 270 'stroke: '+ settings.thumbsProgressOptions.color +';' + 271 'stroke-width: ' + settings.thumbsProgressOptions.width + ';' + 272 'stroke-dashoffset: ' + thumbProgressElLength + ';' + 273 'stroke-dashoffset: 0px;' + 274 '}' + 275 '.slick-current .slick-thumb-progress .slick-thumb-progress__path {' + 276 'opacity: 1;' + 277 '-webkit-animation: ' + (slick.options.autoplaySpeed + slick.options.speed) + 'ms linear 0ms forwards dash;' + 278 '-moz-animation: ' + (slick.options.autoplaySpeed + slick.options.speed) + 'ms linear 0ms forwards dash;' + 279 '-o-animation: ' + (slick.options.autoplaySpeed + slick.options.speed) + 'ms linear 0ms forwards dash;' + 280 'animation: ' + (slick.options.autoplaySpeed + slick.options.speed) + 'ms linear 0ms forwards dash;' + 281 '}' + 282 '@-webkit-keyframes dash {' + 283 'from {stroke-dasharray: 0 ' + thumbProgressElLength + ';} ' + 284 'to {stroke-dasharray: ' + thumbProgressElLength + ' ' + thumbProgressElLength + ';}' + 285 '}' + 286 '@-moz-keyframes dash {' + 287 'from {stroke-dasharray: 0 ' + thumbProgressElLength + ';} ' + 288 'to {stroke-dasharray: ' + thumbProgressElLength + ' ' + thumbProgressElLength + ';}' + 289 '}' + 290 '@-moz-keyframes dash {' + 291 'from {stroke-dasharray: 0 ' + thumbProgressElLength + ';} ' + 292 'to {stroke-dasharray: ' + thumbProgressElLength + ' ' + thumbProgressElLength + ';}' + 293 '}' + 294 '@keyframes dash {' + 295 'from {stroke-dasharray: 0 ' + thumbProgressElLength + ';} ' + 296 'to {stroke-dasharray: ' + thumbProgressElLength + ' ' + thumbProgressElLength + ';}' + 297 '}' 298 ); 299 300 $style.appendTo(el); 301 }, 302 303 goToTargetSlide: function (el, params) { 304 //Variables 305 var settings = params, 306 i = el.data('slick-index'); 307 308 if ($('#' + settings.id).slick('slickCurrentSlide') !== i) { 309 $('#' + settings.id).slick('slickGoTo', i); 310 } 311 }, 312 313 setCustomCurrentClass: function (el) { 314 var $dots = el.find('.js-dots'); 315 316 if (!$dots.length) return; 317 318 $($dots[0].children[0]).addClass('slick-current'); 319 }, 320 321 setCounter: function (params, event, slick) { 322 var settings = params; 323 324 $(settings.counterSelector).html('<span class="' + settings.counterClassMap.current + '">1</span><span class="' + settings.counterClassMap.divider + '">
324' + settings.counterDivider + '</span><span class="' + settings.counterClassMap.total + '">' + slick.slideCount + '</span>'); 325 }, 326 327 // ----- End : Preparation ----- 328 329 // ----- Start : Custom functionality ----- 330 331 setInitialDelay: function (el, params) { 332 var settings = params; 333 334 el.slick('slickPause'); 335 336 setTimeout(function () { 337 el.slick('slickPlay'); 338 }, settings.initialDelay); 339 }, 340 341 setCustomClasses: function (el, event, slider, currentSlide, nextSlide) { 342 var nxtSlide = $(slider.$slides)[nextSlide], 343 slide = $(slider.$slides)[currentSlide], 344 $dots = el.find('.js-dots'), 345 animatedElements = $(nxtSlide).find('[data-hs-slick-carousel-animation]'), 346 otherElements = $(slide).find('[data-hs-slick-carousel-animation]'); 347 348 $(otherElements).each(function () { 349 var animationIn = $(this).data('hs-slick-carousel-animation'); 350 351 $(this).removeClass('animated ' + animationIn); 352 }); 353 354 $(animatedElements).each(function () { 355 $(this).css({ 356 opacity: 0 357 }); 358 }); 359 360 if (!$dots.length) return; 361 362 if (currentSlide > nextSlide) { 363 $($dots[0].children).removeClass('slick-active-right'); 364 365 $($dots[0].children[nextSlide]).addClass('slick-active-right'); 366 } else { 367 $($dots[0].children).removeClass('slick-active-right'); 368 } 369 370 $($dots[0].children).removeClass('slick-current'); 371 372 setTimeout(function () { 373 $($dots[0].children[nextSlide]).addClass('slick-current'); 374 }, .25); 375 }, 376 377 animationIn: function (params, event, slick, currentSlide, nextSlide) { 378 var settings = params; 379 380 $(slick.$slides).removeClass('animated set-position ' + settings.animationIn + ' ' + settings.animationOut); 381 }, 382 383 animationOut: function (params, event, slick, currentSlide) { 384 var settings = params; 385 386 $(slick.$slides[currentSlide]).addClass('animated ' + settings.animationOut); 387 }, 388 389 setPosition: function (params, event, slick) { 390 var settings = params; 391 392 $(slick.$slides[slick.currentSlide]).addClass('animated set-position ' + settings.animationIn); 393 }, 394 395 counting: function (params, event, slick, currentSlide, nextSlide) { 396 var settings = params, 397 i = (nextSlide ? nextSlide : 0) + 1; 398 399 $(settings.counterSelector).html('<span class="' + settings.counterClassMap.current + '">' + i + '</span><span class="' + settings.counterClassMap.divider + '">' + settings.counterDivider + '</span><span class="' + settings.counterClassMap.total + '">' + slick.slideCount + '</span>'); 400 }, 401 402 videoSupport: function (carousel) { 403 if (!carousel.length) return; 404 405 carousel.on('beforeChange', function (event, slick, currentSlide, nextSlide) { 406 var slideType = $(slick.$slides[currentSlide]).data('slide-type'), 407 player = $(slick.$slides[currentSlide]).find('iframe').get(0), 408 command; 409 410 if (slideType === 'vimeo') { 411 command = { 412 "method": "pause", 413 "value": "true" 414 } 415 } else if (slideType === 'youtube') { 416 command = { 417 "event": "command", 418 "func": "pauseVideo" 419 } 420 } else { 421 return false; 422 } 423 424 if (player !== undefined) { 425 player.contentWindow.postMessage(JSON.stringify(command), '*'); 426 } 427 }); 428 }, 429 430 initTextAnimation: function (carousel, textAnimationSelector) { 431 if (!window.TextFx || !window.anime || !carousel.length) return; 432 433 var $text = carousel.find(textAnimationSelector); 434 435 if (!$text.length) return; 436 437 $text.each(function (i, el) { 438 var $this = $(el); 439 440 if (!$this.data('TextFx')) { 441 $this.data('TextFx', new TextFx($this.get(0))); 442 } 443 }); 444 445 carousel.on('beforeChange', function (event, slick, currentSlide, nextSlide) { 446 var targets = slick.$slider 447 .find('.slick-track') 448 .children(); 449 450 var currentTarget = targets.eq(currentSlide), 451 nextTarget = targets.eq(nextSlide); 452 453 currentTarget = currentTarget.find(textAnimationSelector); 454 nextTarget = nextTarget.find(textAnimationSelector); 455 456 if (currentTarget.length) { 457 currentTarget.data('TextFx').hide(currentTarget.data('effect') ? currentTarget.data('effect') : 'fx1'); 458 } 459 460 if (nextTarget.length) { 461 nextTarget.data('TextFx').show(nextTarget.data('effect') ? nextTarget.data('effect') : 'fx1'); 462 } 463 }); 464 } 465 466 // ----- End : Custom functionality ----- 467 }; 468 469})(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.