1/* 2 * We trigger the factory() function is different 3 * ways to support modular JavaScript libraries. See 4 * the 'Wrapping Up' section of the tutorial for 5 * more information 6 * 7 */ 8;(function (factory) { 9 10 if (typeof define === 'function' && define.amd) { 11 define(['jquery'], factory); 12 } else if (typeof exports !== 'undefined') { 13 module.exports = factory(require('jquery')); 14 } else { 15 factory(jQuery); 16 } 17 18})(function ($) { 19 20 /* 21 * We define Zippy as a variable of type âfunctionâ. 22 * Here, we use an anonymous function to ensure 23 * that the logic inside the function is executed immediately. 24 * 25 */ 26 var MioCarousel = (function (element, settings) { 27 28 var instanceUid = 0; 29 30 /* 31 * The constructor function for Zippy 32 * 33 */ 34 function _MioCarousel(element, settings) { 35 var duration = 3000; 36 var speed = 500; 37 var autoplay = 1; 38 var indicators = 1; 39 var animation = 'fade'; 40 var height = 0; 41 42 if ($(element).is('[data-duration]')) duration = $(element).attr("data-duration"); 43 if ($(element).is('[data-speed]')) speed = parseInt($(element).attr("data-speed")); 44 if ($(element).is('[data-autoplay]')) autoplay = parseInt($(element).attr("data-autoplay")); 45 if ($(element).is('[data-indicators]')) indicators = parseInt($(element).attr("data-indicators")); 46 if ($(element).is('[data-animation]')) animation = $(element).attr("data-animation"); 47 if ($(element).is('[data-height]')) height = $(element).attr("data-height"); 48 49 this.defaults = { 50 slideDuration: duration, 51 speed: speed, 52 indicators: indicators, 53 animation: animation, 54 arrowRight: '.mc_arrow_container-right', 55 arrowLeft: '.mc_arrow_container-left', 56 autoplay: autoplay, 57 height: height, 58 }; 59 60 // We create a new property to hold our default settings after they 61 // have been merged with user supplied settings 62 this.settings = $.extend({}, this, this.defaults, settings); 63 64 // This object holds values that will change as the plugin operates 65 this.initials = { 66 currSlide: 0, 67 $currSlide: null, 68 totalSlides: false, 69 csstransitions: false 70 }; 71 72 // Attaches the properties of this.initials as direct properties of MioCarousel 73 $.extend(this, this.initials); 74 75 // Here we'll hold a reference to the DOM element passed in 76 // by the $.each function when this plugin was instantiated 77 this.$el = $(element); 78 var obj = this; 79 80 // Set height to carousel 81 this.resize(); 82 $(window).resize(function () { 83 obj.resize(); 84 }); 85 86 87 // Ensure that the value of 'this' always references MioCarousel 88 this.changeSlide = $.proxy(this.changeSlide, this); 89 90 // We'll call our initiator function to get things rolling! 91 this.init(); 92 93 // A little bit of metadata about the instantiated object 94 // This property will be incremented everytime a new MioCarousel carousel is created 95 // It provides each carousel with a unique ID 96 this.instanceUid = instanceUid++; 97 } 98 99 return _MioCarousel; 100 101 })(); 102 103 MioCarousel.prototype.resize = function () { 104 var height = 0; 105 var real_height = 0; 106 this.$el.addClass('recount_slider'); 107 if (this.settings.height == 'full') { 108 109 var editorPanelHeight = 0; 110 if (jQuery('#ve_editor_top_panel').length) editorPanelHeight = 40; 111 112 height = jQuery(window).height() - editorPanelHeight; 113 114 var inrow = this.$el.closest('.row'); 115 116 if (inrow.is('.row:first') && $('#header').length) { 117 height = height - $('#header').height(); 118 } 119 real_height = height; 120 this.$el.find('.slide').css('min-height', height); 121 } 122 this.$el.find('.slide').each(function () { 123 if ($(this).outerHeight() > height) { 124 height = $(this).outerHeight(); 125 var padding_top = $(this).find('.row_fix_width').css("padding-top") || 0; 126 real_height = $(this).outerHeight() - parseInt(padding_top); 127 } 128 }); 129 this.$el.height(height); 130 this.$el.attr('data-height', real_height); 131 this.$el.removeClass('recount_slider'); 132 }; 133 134 /** 135 * Called once per instance 136 * Calls starter methods and associate the '.mio-carousel' class 137 * @params void 138 * @returns void 139 * 140 */ 141 MioCarousel.prototype.init = function () { 142 //Test to see if cssanimations are available 143 this.csstransitionsTest(); 144 // Add a class so we can style our carousel
145 this.$el.addClass('mio-carousel'); 146 // Build out any DOM elements needed for the plugin to run 147 // Eg, we'll create an indicator dot for every slide in the carousel 148 this.totalSlides = this.$el.find('.slide').length; 149 150 this.build(); 151 152 if (this.totalSlides > 1) { 153 // Eg. Let the user click next/prev arrows or indicator dots 154 this.events(); 155 // Bind any events we'll need for the carousel to function 156 this.activate(); 157 // Start the timer loop to control progression to the next slide 158 this.initTimer(); 159 } else this.$el.find('.slide').eq(0).addClass('active'); 160 }; 161 162 /** 163 * Appropriated out of Modernizr v2.8.3 164 * Creates a new DOM element and tests existence of properties on it's 165 * Style object to see if CSSTransitions are available 166 * @params void 167 * @returns void 168 * 169 */ 170 MioCarousel.prototype.csstransitionsTest = function () { 171 var elem = document.createElement('modernizr'); 172 //A list of properties to test for 173 var props = ["transition", "WebkitTransition", "MozTransition", "OTransition", "msTransition"]; 174 //Iterate through our new element's Style property to see if these properties exist 175 for (var i in props) { 176 var prop = props[i]; 177 var result = elem.style[prop] !== undefined ? prop : false; 178 if (result) { 179 this.csstransitions = result; 180 break; 181 } 182 } 183 }; 184 185 /** 186 * Add the CSSTransition duration to the DOM Object's Style property 187 * We trigger this function just before we want the slides to animate 188 * @params void 189 * @returns void 190 * 191 */ 192 MioCarousel.prototype.addCSSDuration = function () { 193 var _ = this; 194 this.$el.find('.slide').each(function () { 195 this.style[_.csstransitions + 'Duration'] = _.settings.speed + 'ms'; 196 }); 197 } 198 199 /** 200 * Remove the CSSTransition duration from the DOM Object's style property 201 * We trigger this function just after the slides have animated 202 * @params void 203 * @returns void 204 * 205 */ 206 MioCarousel.prototype.removeCSSDuration = function () { 207 var _ = this; 208 this.$el.find('.slide').each(function () { 209 this.style[_.csstransitions + 'Duration'] = ''; 210 }); 211 } 212 213 /** 214 * Creates a list of indicators based on the amount of slides 215 * @params void 216 * @returns void 217 * 218 */ 219 MioCarousel.prototype.build = function () { 220 this.$el.find('.indicators').remove(); 221 this.$el.addClass('miocarousel_' + this.settings.animation); 222 if (this.settings.indicators) { 223 var $indicators = this.$el.append('<ul class="indicators" >').find('.indicators'); 224 for (var i = 0; i < this.totalSlides; i++) $indicators.append('<li data-index=' + i + '>'); 225 } 226 }; 227 228 /** 229 * Activates the first slide 230 * Activates the first indicator 231 * @params void 232 * @returns void 233 * 234 */ 235 MioCarousel.prototype.activate = function () { 236 this.$el.find('.slide').removeClass('active'); 237 this.$el.find('.indicators li').removeClass('active'); 238 239 this.$currSlide = this.$el.find('.slide').eq(0); 240 this.$el.find('.slide').eq(0).addClass('active'); 241 this.$el.find('.indicators li').eq(0).addClass('active'); 242 }; 243 244 /** 245 * Associate event handlers to events 246 * For arrow events, we send the placement of the next slide to the handler 247 * @params void 248 * @returns void 249 * 250 */ 251 MioCarousel.prototype.events = function () { 252 this.unbindEvents(); 253 this.$el 254 .on('click', this.settings.arrowRight, {direction: 'right'}, this.changeSlide) 255 .on('click', this.settings.arrowLeft, {direction: 'left'}, this.changeSlide) 256 .on('click', '.indicators li', this.changeSlide); 257 }; 258 MioCarousel.prototype.unbindEvents = function () { 259 this.$el.off('click', this.settings.arrowRight); 260 this.$el.off('click', this.settings.arrowLeft); 261 this.$el.off('click', '.indicators li'); 262 } 263 264 /** 265 * TIMER 266 * Resets the timer 267 * @params void 268 * @returns void 269 * 270 */ 271 MioCarousel.prototype.clearTimer = function () { 272 if (this.timer) clearInterval(this.timer); 273 }; 274 275 /** 276 * TIMER 277 * Initialise the timer 278 * @params void 279 * @returns void 280 * 281 */ 282 MioCarousel.prototype.initTimer = function () { 283 if (this.settings.autoplay) this.timer = setInterval(this.changeSlide, this.settings.slideDuration); 284 }; 285 286 /** 287 * TIMER 288 * Start the timer 289 * Reset the throttle to allow changeSlide to be executable 290 * @params void 291 * @returns void 292 * 293 */ 294 MioCarousel.prototype.startTimer = function () { 295 this.initTimer(); 296 this.throttle = false;
297 }; 298 299 /** 300 * MAIN LOGIC HANDLER 301 * Triggers a set of subfunctions to carry out the animation 302 * @params object event 303 * @returns void 304 * 305 */ 306 MioCarousel.prototype.changeSlide = function (e) { 307 308 //Ensure that animations are triggered one at a time 309 if (this.throttle) return; 310 this.throttle = true; 311 312 //Stop the timer as the animation is getting carried out 313 this.clearTimer(); 314 315 // Returns the animation direction (left or right) 316 var direction = this._direction(e); 317 318 // Selects the next slide 319 var animate = this._next(e, direction); 320 if (!animate) return; 321 322 //Active the next slide to scroll into view 323 var $nextSlide = this.$el.find('.slide').eq(this.currSlide).addClass(direction + ' active'); 324 325 if (!this.csstransitions) { 326 this._jsAnimation($nextSlide, direction); 327 } else { 328 this._cssAnimation($nextSlide, direction); 329 } 330 }; 331 332 /** 333 * Returns the animation direction, right or left 334 * @params object event 335 * @returns strong animation direction 336 * 337 */ 338 MioCarousel.prototype._direction = function (e) { 339 var direction; 340 341 // Default to forward movement 342 if (typeof e !== 'undefined') { 343 direction = (typeof e.data === 'undefined' ? 'right' : e.data.direction); 344 } else { 345 direction = 'right'; 346 } 347 return direction; 348 }; 349 350 /** 351 * Updates our plugin with the next slide number 352 * @params object event 353 * @params string animation direction 354 * @returns boolean continue to animate? 355 * 356 */ 357 MioCarousel.prototype._next = function (e, direction) { 358 359 // If the event was triggered by a slide indicator, we store the data-index value of that indicator 360 var index = (typeof e !== 'undefined' ? $(e.currentTarget).data('index') : undefined); 361 362 //Logic for determining the next slide 363 switch (true) { 364 //If the event was triggered by an indicator, we set the next slide based on index 365 case(typeof index !== 'undefined'): 366 if (this.currSlide == index) { 367 this.startTimer(); 368 return false; 369 } 370 this.currSlide = index; 371 break; 372 case(direction == 'right' && this.currSlide < (this.totalSlides - 1)): 373 this.currSlide++; 374 break; 375 case(direction == 'right'): 376 this.currSlide = 0; 377 break; 378 case(direction == 'left' && this.currSlide === 0): 379 this.currSlide = (this.totalSlides - 1); 380 break; 381 case(direction == 'left'): 382 this.currSlide--; 383 break; 384 } 385 return true; 386 }; 387 388 /** 389 * Executes the animation via CSS transitions 390 * @params object Jquery object the next slide to slide into view 391 * @params string animation direction 392 * @returns void 393 * 394 */ 395 MioCarousel.prototype._cssAnimation = function ($nextSlide, direction) { 396 //Init CSS transitions 397 setTimeout(function () { 398 this.$el.addClass('transition'); 399 this.addCSSDuration(); 400 this.$currSlide.addClass('shift-' + direction); 401 this._updateIndicators(); 402 }.bind(this), 100); 403 404 //CSS Animation Callback 405 //After the animation has played out, remove CSS transitions 406 //Remove unnecessary classes 407 //Start timer 408 setTimeout(function () { 409 this.$el.removeClass('transition'); 410 this.removeCSSDuration(); 411 this.$currSlide.removeClass('active shift-left shift-right'); 412 this.$currSlide = $nextSlide.removeClass(direction); 413 this.startTimer(); 414 }.bind(this), 100 + this.settings.speed); 415 }; 416 417 /** 418 * Executes the animation via JS transitions 419 * @params object Jquery object the next slide to slide into view 420 * @params string animation direction 421 * @returns void 422 * 423 */ 424 MioCarousel.prototype._jsAnimation = function ($nextSlide, direction) { 425 //Cache this reference for use inside animate functions 426 var _ = this; 427 428 // See CSS for explanation of .js-reset-left 429 if (direction == 'right') _.$currSlide.addClass('js-reset-left'); 430 431 var animation = {}; 432 var animationPrev = {}; 433 434 if (this.settings.animation == 'slide') { 435 animation[direction] = '0%'; 436 animationPrev[direction] = '100%'; 437 } else { 438 animation['opacity'] = '1'; 439 animationPrev['opacity'] = '0'; 440 } 441 //Animation: Current slide 442 this.$currSlide.animate(animationPrev, this.settings.speed); 443 //Animation: Next slide 444 $nextSlide.animate(animation, this.settings.speed, 'swing', function () { 445 //Get rid of any JS animation residue 446 _.$currSlide.removeClass('active js-reset-left').attr('style', ''); 447 //Cache the next slide after classes and inline styles have been removed 448 _.$currSlide = $nextSlide.removeClass(direction).attr('style', ''); 449 _._updateIndicators(); 450 _.startTimer(); 451 }); 452 453 }; 454 455 /** 456 * Ensures the slide indicators are pointing to the currently active slide 457 * @params void 458 * @returns void 459 * 460 */ 461 MioCarousel.prototype._updateIndicators = function () { 462 this.$el.find('.indicators li').removeClass('active').eq(this.currSlide).addClass('active'); 463 }; 464 465 /**
466 * Initialize the plugin once for each DOM object passed to jQuery 467 * @params object options object 468 * @returns void 469 * 470 */ 471 $.fn.MioCarousel = function (options) { 472 473 return this.each(function (index, el) { 474 475 el.MioCarousel = new MioCarousel(el, options); 476 477 }); 478 479 }; 480 481 482}); 483 484jQuery(window).load(function () { 485 jQuery('.miocarousel').MioCarousel({}); 486});
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.