1/*! lg-autoplay - v1.0.2 - 2017-01-22 2* http://sachinchoolur.github.io/lightGallery 3* Copyright (c) 2017 Sachin N; Licensed GPLv3 */ 4 5(function (root, factory) { 6 if (typeof define === 'function' && define.amd) { 7 // AMD. Register as an anonymous module unless amdModuleId is set 8 define(['jquery'], function (a0) { 9 return (factory(a0)); 10 }); 11 } else if (typeof exports === 'object') { 12 // Node. Does not work with strict CommonJS, but 13 // only CommonJS-like environments that support module.exports, 14 // like Node. 15 module.exports = factory(require('jquery')); 16 } else { 17 factory(jQuery); 18 } 19}(this, function ($) { 20 21 22(function() { 23 24 'use strict'; 25 26 var defaults = { 27 autoplay: false, 28 pause: 5000, 29 progressBar: true, 30 fourceAutoplay: false, 31 autoplayControls: true, 32 appendAutoplayControlsTo: '.lg-toolbar' 33 }; 34 35 /** 36 * Creates the autoplay plugin. 37 * @param {object} element - lightGallery element 38 */ 39 var Autoplay = function(element) { 40 41 this.core = $(element).data('lightGallery'); 42 43 this.$el = $(element); 44 45 // Execute only if items are above 1 46 if (this.core.$items.length < 2) { 47 return false; 48 } 49 50 this.core.s = $.extend({}, defaults, this.core.s); 51 this.interval = false; 52 53 // Identify if slide happened from autoplay 54 this.fromAuto = true; 55 56 // Identify if autoplay canceled from touch/drag 57 this.canceledOnTouch = false; 58 59 // save fourceautoplay value 60 this.fourceAutoplayTemp = this.core.s.fourceAutoplay; 61 62 // do not allow progress bar if browser does not support css3 transitions 63 if (!this.core.doCss()) { 64 this.core.s.progressBar = false; 65 } 66 67 this.init(); 68 69 return this; 70 }; 71 72 Autoplay.prototype.init = function() { 73 var _this = this; 74 75 // append autoplay controls 76 if (_this.core.s.autoplayControls) { 77 _this.controls(); 78 } 79 80 // Create progress bar 81 if (_this.core.s.progressBar) { 82 _this.core.$outer.find('.lg').append('<div class="lg-progress-bar"><div class="lg-progress"></div></div>'); 83 } 84 85 // set progress 86 _this.progress(); 87 88 // Start autoplay 89 if (_this.core.s.autoplay) { 90 _this.startlAuto(); 91 } 92 93 // cancel interval on touchstart and dragstart 94 _this.$el.on('onDragstart.lg.tm touchstart.lg.tm', function() { 95 if (_this.interval) { 96 _this.cancelAuto(); 97 _this.canceledOnTouch = true; 98 } 99 }); 100 101 // restore autoplay if autoplay canceled from touchstart / dragstart 102 _this.$el.on('onDragend.lg.tm touchend.lg.tm onSlideClick.lg.tm', function() { 103 if (!_this.interval && _this.canceledOnTouch) { 104 _this.startlAuto(); 105 _this.canceledOnTouch = false; 106 } 107 }); 108 109 }; 110 111 Autoplay.prototype.progress = function() { 112 113 var _this = this; 114 var _$progressBar; 115 var _$progress; 116 117 _this.$el.on('onBeforeSlide.lg.tm', function() { 118 119 // start progress bar animation 120 if (_this.core.s.progressBar && _this.fromAuto) { 121 _$progressBar = _this.core.$outer.find('.lg-progress-bar'); 122 _$progress = _this.core.$outer.find('.lg-progress'); 123 if (_this.interval) { 124 _$progress.removeAttr('style'); 125 _$progressBar.removeClass('lg-start'); 126 setTimeout(function() { 127 _$progress.css('transition', 'width ' + (_this.core.s.speed + _this.core.s.pause) + 'ms ease 0s'); 128 _$progressBar.addClass('lg-start'); 129 }, 20); 130 } 131 } 132 133 // Remove setinterval if slide is triggered manually and fourceautoplay is false 134 if (!_this.fromAuto && !_this.core.s.fourceAutoplay) { 135 _this.cancelAuto(); 136 } 137 138 _this.fromAuto = false; 139 140 }); 141 }; 142 143 // Manage autoplay via play/stop buttons 144 Autoplay.prototype.controls = function() { 145 var _this = this; 146 var _html = '<span class="lg-autoplay-button lg-icon"></span>'; 147 148 // Append autoplay controls 149 $(this.core.s.appendAutoplayControlsTo).append(_html); 150 151 _this.core.$outer.find('.lg-autoplay-button').on('click.lg', function() { 152 if ($(_this.core.$outer).hasClass('lg-show-autoplay')) { 153 _this.cancelAuto(); 154 _this.core.s.fourceAutoplay = false; 155 } else { 156 if (!_this.interval) { 157 _this.startlAuto(); 158 _this.core.s.fourceAutoplay = _this.fourceAutoplayTemp; 159 } 160 } 161 }); 162 }; 163 164 // Autostart gallery 165 Autoplay.prototype.startlAuto = function() { 166 var _this = this; 167 168 _this.core.$outer.find('.lg-progress').css('transition', 'width ' + (_this.core.s.speed + _this.core.s.pause) + 'ms ease 0s'); 169 _this.core.$outer.addClass('lg-show-autoplay'); 170 _this.core.$outer.find('.lg-progress-bar').addClass('lg-start'); 171 172 _this.interval = setInterval(function() { 173 if (_this.core.index + 1 < _this.core.$items.length) { 174 _this.core.index++; 175 } else { 176 _this.core.index = 0; 177 } 178 179 _this.fromAuto = true; 180 _this.core.slide(_this.core.index, false, false, 'next'); 181 }, _this.core.s.speed + _this.core.s.pause); 182 }; 183 184 // cancel Autostart 185 Autoplay.prototype.cancelAuto = function() { 186 clearInterval(this.interval); 187 this.interval = false; 188 this.core.$outer.find('.lg-progress').removeAttr('style'); 189 this.core.$outer.removeClass('lg-show-autoplay'); 190 this.core.$outer.find('.lg-progress-bar').removeClass('lg-start'); 191 }; 192 193 Autoplay.prototype.destroy = function() { 194 195 this.cancelAuto(); 196 this.core.$outer.find('.lg-progress-bar').remove(); 197 }; 198 199 $.fn.lightGallery.modules.autoplay = Autoplay; 200 201})(); 202 203 204})); 205