1/* 2 * We trigger the factory() function is different 3 * ways to support modular JavaScript libraries. 4 */ 5;(function (factory) { 6 7 if (typeof define === 'function' && define.amd) { 8 define(['jquery'], factory); 9 } else if (typeof exports !== 'undefined') { 10 module.exports = factory(require('jquery')); 11 } else { 12 factory(jQuery); 13 } 14 15})(function ($) { 16 17 let MioCarousel = (function (element, settings) { 18 19 function _MioCarousel(element, settings) { 20 let duration = 3000; 21 let speed = 500; 22 let autoplay = 1; 23 let indicators = 1; 24 let animation = 'fade'; 25 let height = 0; 26 let showDelayed = 0; 27 28 if ($(element).is('[data-duration]')) duration = $(element).attr("data-duration"); 29 if ($(element).is('[data-speed]')) speed = parseInt($(element).attr("data-speed")); 30 if ($(element).is('[data-autoplay]')) autoplay = parseInt($(element).attr("data-autoplay")); 31 if ($(element).is('[data-indicators]')) indicators = parseInt($(element).attr("data-indicators")); 32 if ($(element).is('[data-animation]')) animation = $(element).attr("data-animation"); 33 if ($(element).is('[data-height]')) height = $(element).attr("data-height"); 34 35 this.defaults = { 36 slideDuration: duration, 37 speed: speed, 38 indicators: indicators, 39 animation: animation, 40 arrowRight: '.mc_arrow_container-right', 41 arrowLeft: '.mc_arrow_container-left', 42 autoplay: autoplay, 43 height: height, 44 }; 45 46 this.settings = $.extend({}, this, this.defaults, settings); 47 48 // This object holds values that will change as the plugin operates 49 this.initials = { 50 currSlide: 0, 51 nextSlide: 0, 52 visibleItems: 0, 53 correction: 0, 54 slideWidth: '100%', 55 totalSlides: false, 56 isReordered: false, 57 }; 58 59 // Attaches the properties of this.initials as direct properties of MioCarousel 60 $.extend(this, this.initials); 61 62 this.$el = $(element); 63 64 // Ensure that the value of 'this' always references MioCarousel 65 this.changeSlide = $.proxy(this.changeSlide, this); 66 67 let obj = this; 68 69 let $delayContainer = this.$el.closest('.element_container_delay'); 70 if($delayContainer.length) { 71 showDelayed = parseFloat($delayContainer.attr('data-delay')); 72 } 73 74 if(showDelayed > 0) { 75 setTimeout(function () { 76 obj.init(); 77 }, (showDelayed * 1000) + 100); 78 } else { 79 this.init(); 80 } 81 82 let res; 83 let lastWindowWidth = $(window).width(); 84 $(window).resize(function () { 85 let currentWindowWidth = $(window).width(); 86 if (currentWindowWidth !== lastWindowWidth) { 87 clearTimeout(res); 88 res = setTimeout(function () { 89 obj.onResize(); 90 }, 200); 91 lastWindowWidth = currentWindowWidth; 92 } 93 }); 94 } 95 96 return _MioCarousel; 97 98 })(); 99 100 /** 101 * Called once per instance 102 * @params void 103 * @returns void 104 * 105 */ 106 MioCarousel.prototype.init = function (setInterval = true) { 107 108 this.$el.find('.mw_fake_slide').remove(); 109 110 this.$slides = this.$el.find('.slide'); 111 112 // set speed animation 113 this.$el.get(0).style.setProperty('--animation-speed', this.settings.speed/1000 + 's'); 114 this.currSlide = 0; 115 116 if(this.settings.animation !== 'fade') { 117 this.processSlides(); 118 } 119 120 this.totalSlides = this.$slides.length; 121 if (this.settings.animation === 'slide') { 122 this.totalSlides = Math.ceil(this.totalSlides / this.visibleItems); 123 } else if (this.settings.animation === 'slideone') { 124 this.$el.find('.miocarousel_slides').get(0).style.setProperty('--slide-width', this.slideWidth); 125 } 126 127 if(this.settings.animation === 'slide' && this.totalSlides * this.visibleItems > this.$slides.length) { 128 let count = this.totalSlides * this.visibleItems - this.$slides.length; 129 for (let i = 0; i < count; i++) { 130 this.$el.find('.miocarousel_slides').append('<div class="mw_fake_slide slide col-' + this.visibleItems + '"></div>'); 131 } 132 this.$slides = this.$el.find('.slide'); 133 } 134 135 this.build(); 136 137 if (this.totalSlides > 1) { 138 this.events(); 139 if(setInterval) { 140 this.initTimer(); 141 } 142 } 143 }; 144 145 /** 146 * Creates a list of indicators based on the amount of slides 147 * @params void 148 * @returns void 149 * 150 */ 151 MioCarousel.prototype.build = function () { 152 this.$el.find('.indicators').remove(); 153 var $indicators = this.$el.append('<ul class="indicators" ></ul>').find('.indicators'); 154 for (var i = 0; i < this.totalSlides; i++) $indicators.append('<li data-index=' + i + '></li>'); 155 this.$el.find('.indicators li').eq(0).addClass('active'); 156 }; 157 158 /** 159 * Activates the first slide 160 * Activates the first indicator 161 * @params void 162 * @returns void 163 * 164 * 165 MioCarousel.prototype.activate = function () { 166 this.$el.find('.slide').removeClass('active'); 167 this.$el.find('.indicators li').removeClass('active'); 168 169 this.$currSlide = this.$el.find('.slide').eq(0); 170 this.$el.find('.slide').eq(0).addClass('active'); 171 172 };*/ 173 174 MioCarousel.prototype.onResize = function () { 175 this.clearTimer(); 176 this.$el.removeClass('transition'); 177 this.setSlide(0); 178 this.visibleItems = 0; 179 this.init(true); 180 this.reorder(0); 181 this.setSlide(0); 182 }; 183 184 MioCarousel.prototype.processSlides = function () { 185 let visibleItems = 0; 186 let order = 0; 187 188 const rectContainer = this.$el.find('.miocarousel-inner').get(0).getBoundingClientRect(); 189 const tolerance = (rectContainer.right - rectContainer.left) * 0.1;
190 // find visible items 191 this.$slides.removeClass('active'); 192 this.$slides.each(function() { 193 const rectSlide = $(this).get(0).getBoundingClientRect(); 194 195 if(rectSlide.left >= (rectContainer.left - tolerance) && rectSlide.right <= (rectContainer.right + tolerance)) { 196 $(this).addClass('active'); 197 visibleItems++; 198 } 199 $(this).attr('data-order', order); 200 order++; 201 }); 202 // number of visible items 203 if (this.visibleItems === 0) { 204 this.visibleItems = visibleItems; 205 } 206 207 if(this.$slides.length > 1) { 208 let first = this.$slides.get(0).getBoundingClientRect(); 209 let second = this.$slides.get(1).getBoundingClientRect(); 210 this.slideWidth = (second.left - first.left) + 'px'; 211 } 212 213 }; 214 215 /** 216 * Associate event handlers to events 217 * For arrow events, we send the placement of the next slide to the handler 218 * @params void 219 * @returns void 220 * 221 */ 222 MioCarousel.prototype.events = function () { 223 this.unbindEvents(); 224 this.$el 225 .on('click', this.settings.arrowRight, {direction: 'right'}, this.changeSlide) 226 .on('click', this.settings.arrowLeft, {direction: 'left'}, this.changeSlide) 227 .on('click', '.indicators li', this.changeSlide); 228 }; 229 MioCarousel.prototype.unbindEvents = function () { 230 this.$el.off('click', this.settings.arrowRight); 231 this.$el.off('click', this.settings.arrowLeft); 232 this.$el.off('click', '.indicators li'); 233 } 234 235 /** 236 * TIMER 237 * Resets the timer 238 * @params void 239 * @returns void 240 * 241 */ 242 MioCarousel.prototype.clearTimer = function () { 243 if (this.timer) clearInterval(this.timer); 244 }; 245 246 /** 247 * TIMER 248 * Initialise the timer 249 * @params void 250 * @returns void 251 * 252 */ 253 MioCarousel.prototype.initTimer = function () { 254 if (this.settings.autoplay) this.timer = setInterval(this.changeSlide, this.settings.slideDuration); 255 }; 256 257 /** 258 * MAIN LOGIC HANDLER 259 * Triggers a set of subfunctions to carry out the animation 260 * @params object event 261 * @returns void 262 * 263 */ 264 MioCarousel.prototype.changeSlide = function (e) { 265 //Ensure that animations are triggered one at a time 266 if (this.throttle) return; 267 this.throttle = true; 268 269 //Stop the timer as the animation is getting carried out 270 this.clearTimer(); 271 272 // Returns the animation direction (left or right) 273 let direction = this._direction(e); 274 275 // Selects the next slide 276 let animate = this._next(e, direction); 277 if (!animate) return; 278 279 this.reorderSlides(direction); 280 281 this._Animation(this); 282 }; 283 284 MioCarousel.prototype.reorderSlides = function (direction) { 285 286 if (this.settings.animation === 'fade') { 287 return; 288 } 289 290 let correction = 0; 291/* 292 console.log('next:' + this.nextSlide); 293 console.log('slide:' + this.currSlide); 294 console.log('cor:' + this.correction); 295 console.log(direction); 296 console.log('-------'); 297*/ 298 if (this.nextSlide < 0) { 299 correction = (this.nextSlide + this.correction) * this.itemsPerSlide(); 300 this.reorder(correction); 301 this.nextSlide = 0; 302 this.setSlide(1); 303 } else if (this.nextSlide > (this.totalSlides - this.visibleSlides())) { 304 correction = (this.nextSlide + this.correction - (this.totalSlides - this.visibleSlides())) * this.itemsPerSlide(); 305 this.reorder(correction); 306 this.nextSlide = this.currSlide; 307 this.setSlide(this.currSlide - 1); 308 } 309/* 310 console.log('next:' + this.nextSlide); 311 console.log('slide:' + this.currSlide); 312 console.log('cor:' + this.correction); 313 console.log('-------------------------'); 314*/ 315 }; 316 317 MioCarousel.prototype.reorder = function (correction) { 318 if (correction < 0) { 319 this.$slides.slice(correction).css('order', -1); 320 } else if (correction > 0) { 321 this.$slides.slice(0,correction).css('order', 99999); 322 } else { 323 this.$slides.css('order', 1); 324 } 325 this.correction = correction; 326 }; 327 328 MioCarousel.prototype.itemsPerSlide = function () { 329 if (this.settings.animation === 'slide') { 330 return this.visibleItems; 331 } 332 return 1; 333 }; 334 335 MioCarousel.prototype.visibleSlides = function () { 336 if (this.settings.animation === 'slideone') { 337 return this.visibleItems; 338 } 339 return 1; 340 }; 341 342 MioCarousel.prototype.isEndSlide = function () { 343 if(this.isBeginning() || this.isEnd() ) { 344 return true; 345 } 346 return false;
347 }; 348 349 MioCarousel.prototype.isEnd = function () { 350 if(this.correction === (this.visibleSlides() * this.itemsPerSlide()) ) { 351 return true; 352 } 353 return false; 354 }; 355 356 MioCarousel.prototype.isBeginning = function () { 357 if(this.correction === -(this.visibleSlides() * this.itemsPerSlide())) { 358 return true; 359 } 360 return false; 361 }; 362 363 /** 364 * Returns the animation direction, right or left 365 * @params object event 366 * @returns strong animation direction 367 * 368 */ 369 MioCarousel.prototype._direction = function (e) { 370 let direction; 371 372 // Default to forward movement 373 if (typeof e !== 'undefined') { 374 direction = (typeof e.data === 'undefined' ? 'right' : e.data.direction); 375 } else { 376 direction = 'right'; 377 } 378 return direction; 379 }; 380 381 /** 382 * Updates our plugin with the next slide number 383 * @params object event 384 * @params string animation direction 385 * @returns boolean continue to animate? 386 * 387 */ 388 MioCarousel.prototype._next = function (e, direction) { 389 390 // to default order 391 if (this.isEndSlide() && this.settings.animation !== 'fade') { 392 393 let jumpToSlide; 394 395 if (this.isBeginning()) { 396 jumpToSlide = this.totalSlides - this.visibleSlides(); 397 } else if(this.isEnd()) { 398 jumpToSlide = 0; 399 } 400 401 this.reorder(0); 402 this.setSlide(jumpToSlide); 403 404 } 405 406 // If the event was triggered by a slide indicator, we store the data-index value of that indicator 407 let index = (typeof e !== 'undefined' ? $(e.currentTarget).data('index') : undefined); 408 409 //Logic for determining the next slide 410 switch (true) { 411 //If the event was triggered by an indicator, we set the next slide based on index 412 case(typeof index !== 'undefined'): 413 /* 414 if (this.nextSlide == index + 1) { 415 this.initTimer(); 416 return false; 417 }*/ 418 if(this.currSlide === 0 && index >= this.totalSlides - 1) { 419 this.nextSlide = -1 420 } else if(this.currSlide - this.correction === (this.totalSlides - 1) && index === 0) { 421 this.nextSlide = this.currSlide + 1; 422 } else { 423 this.nextSlide = index - this.correction; 424 } 425 break; 426 case(direction == 'right'): 427 this.nextSlide = this.currSlide + 1; 428 break; 429 case(direction == 'left'): 430 this.nextSlide = this.currSlide - 1; 431 break; 432 } 433 434 return true; 435 }; 436 437 /** 438 * Executes the animation 439 * @params object Jquery object the next slide to slide into view 440 * @params string animation direction 441 * @returns void 442 * 443 */ 444 MioCarousel.prototype._Animation = function (obj) { 445 446 setTimeout(function () { 447 obj.$el.addClass('transition'); 448 obj.setSlide(this.nextSlide); 449 obj._updateIndicators(); 450 setTimeout(obj.afterAnimation, obj.settings.speed, this); 451 }.bind(this), 10); 452 453 }; 454 455 MioCarousel.prototype.setSlide = function (nextSlide) { 456 if (this.settings.animation === 'fade') { 457 if(nextSlide > (this.totalSlides - 1)) { 458 nextSlide = 0; 459 } else if(nextSlide < 0) { 460 nextSlide = (this.totalSlides - 1); 461 } 462 let $nextSlide = this.$el.find('.slide').eq(nextSlide); 463 let $currSlide = this.$el.find('.slide').eq(this.currSlide); 464 $currSlide.removeClass('active'); 465 $nextSlide.addClass('active'); 466 } else { 467 this.$el.find('.miocarousel_slides').get(0).style.setProperty('--current-slide', nextSlide); 468 } 469 470 this.currSlide = nextSlide; 471 }; 472 473 MioCarousel.prototype.afterAnimation = function (obj) { 474 obj.initTimer(); 475 obj.$el.removeClass('transition'); 476 477 if(obj.settings.animation !== 'fade') { 478 obj.processSlides(); 479 } 480 obj.throttle = false; 481 }; 482 483 /** 484 * Ensures the slide indicators are pointing to the currently active slide 485 * @params void 486 * @returns void 487 * 488 */ 489 MioCarousel.prototype._updateIndicators = function () { 490 let id = this.currSlide + (this.correction / this.itemsPerSlide()); 491 if (id < 0) { 492 id = this.totalSlides + (this.correction / this.itemsPerSlide()); 493 } else if (id >= this.totalSlides) { 494 id = this.correction - (this.visibleSlides() * this.itemsPerSlide()); 495 } 496 this.$el.find('.indicators li').removeClass('active').eq(id).addClass('active'); 497 }; 498 499 /** 500 * Initialize the plugin once for each DOM object passed to jQuery 501 * @params object options object 502 * @returns void 503 * 504 */ 505 $.fn.MioCarousel = function (options) { 506 507 return this.each(function (index, el) { 508 509 el.MioCarousel = new MioCarousel(el, options); 510 511 }); 512 513 }; 514 515 516}); 517 518jQuery(function ($) { 519 $('.miocarousel:not(.ve_popup_container .miocarousel)').MioCarousel({}); 520});
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.