(function($) {
'use strict';
var defaults = {
slide: 0,
delay: 5000,
loop: true,
preload: false,
preloadImage: false,
preloadVideo: false,
timer: true,
overlay: false,
autoplay: true,
shuffle: false,
cover: true,
color: null,
align: 'center',
valign: 'center',
firstTransition: null,
firstTransitionDuration: null,
transition: 'fade',
transitionDuration: 1000,
transitionRegister: [],
animation: null,
animationDuration: 'auto',
animationRegister: [],
slidesToKeep: 1,
"arrow-status": 'none', // none|disabled|hide|show
"arrow-hookStatus": 'hide', // none|disabled|hide|show
"arrow-prevHook": null,
"arrow-nextHook": null,
"dot-status": 'none', //none|show
"dot-hook": null,
"dot-hookStatus": 'clone', // none|clone|clone-id
prevTransparent: true,
init: function() {},
play: function() {},
pause: function() {},
walk: function() {},
slides: [// {
// src: null,
// color: null,
// delay: null,
// align: null,
// valign: null,
// transition: null,
// transitionDuration: null,
// animation: null,
// animationDuration: null,
// cover: true,
// video: {
// src: [],
// mute: true,
// loop: true
// }
// ...
]
};
var videoCache = {};
var Vegas = function(elmt, options) {
this.elmt = elmt;
this.$elmt = $(elmt);
this.settings = $.extend({}, defaults, $.vegas.defaults, options);
this._init_settings();
this.slide = this.settings.slide;
this.total = this.settings.slides.length;
this.noshow = this.total < 2;
this.paused = !this.settings.autoplay || this.noshow;
this.ended = false;
this.$timer = null;
this.$overlay = null;
this.$slide = null;
this.timeout = null;
this.first = true;
this.transitions = ['fade', 'fade2', 'blur', 'blur2', 'flash', 'flash2', 'negative', 'negative2', 'burn', 'burn2', 'slideLeft', 'slideLeft2', 'slideRight', 'slideRight2', 'slideUp', 'slideUp2', 'slideDown', 'slideDown2', 'zoomIn', 'zoomIn2', 'zoomOut', 'zoomOut2', 'swirlLeft', 'swirlLeft2', 'swirlRight', 'swirlRight2'];
this.animations = ['kenburns', 'kenburnsLeft', 'kenburnsRight', 'kenburnsUp', 'kenburnsUpLeft', 'kenburnsUpRight', 'kenburnsDown', 'kenburnsDownLeft', 'kenburnsDownRight'];
if (!(this.settings.transitionRegister instanceof Array)) {
this.settings.transitionRegister = [this.settings.transitionRegister];
}
if (!(this.settings.animationRegister instanceof Array)) {
this.settings.animationRegister = [this.settings.animationRegister];
}
this.transitions = this.transitions.concat(this.settings.transitionRegister);
this.animations = this.animations.concat(this.settings.animationRegister);
this.support = {
objectFit: 'objectFit'in document.body.style,
transition: 'transition'in document.body.style || 'WebkitTransition'in document.body.style,
video: $.vegas.isVideoCompatible()
};
if (this.settings.shuffle === true) {
this.shuffle();
}
this._init();
this._arrows();
this._dots();
};
Vegas.prototype = {
_init_settings: function(options) {
var attributes = this.elmt.attributes;
var settings = this.settings;
window.attr_merge(attributes, settings);
this.slide = settings.slide;
var slides = [];
this.$elmt.children().each(function() {
var $this = $(this);
if ($this.is('img')) {
slides.push({
src: $this.attr('src'),
});
if ($this.attr('data-transition') != undefined && $this.attr('data-transition') != settings.transition) {
slides[slides.length - 1].transition = $this.attr('data-transition');
}
if ($this.attr('data-animation') != undefined && $this.attr('data-animation') != settings.animation) {
slides[slides.length - 1].transition = $this.attr('data-animation');
}
}
if ($this.is('video')) {
if ($this.children().length > 0) {
slides.push({
video: {
src: [],
loop: eval($this.attr('data-loop') || false),
mute: eval($this.attr('data-mute') || true),
}
});
var video_srces = [];
$this.children().each(function() {
video_srces.push($(this).attr('src'));
});
slides[slides.length - 1].video.src = video_srces;
} else {
slides.push({
video: {
src: [$this.attr('src')],
loop: eval($this.attr('data-loop') || false),
mute: eval($this.attr('data-mute') || true),
}
});
}
}
});
this.settings.slides = slides;
},
_arrows: function(){
let settings = Object.keys(this.settings).reduce(function (carry, key) {
key.includes('arrow-') && (carry[key.replace('arrow-', '')] = this.settings[key])
return carry;
}, {});
let this_prev = this.$elmt.find('.vegas-prev');
let this_next = this.$elmt.find('.vegas-next');
if (settings.prevHook != null) {
$("body").on("click", settings.prevHook, function() {
$('[data-arrow-prevHook="' + settings.prevHook + '"] .vegas-prev').click();
});
}
if (settings.nextHook != null) {
$("body").on("click", settings.nextHook, function() {
$('[data-arrow-nextHook="' + settings.nextHook + '"] .vegas-next').click();
});
}
if (settings.status == 'none') {
this_prev.hide();
this_next.hide();
} else if (settings.status == 'hide') {
if (this.slide == 0) {
this.$elmt.find('.vegas-prev').hide();
}
this.$elmt.on('vegaschange', function() {
if ($(this).vegas('current') <= 0) {
$(this).find('.vegas-prev').hide();
} else {
$(this).find('.vegas-prev').show();
}
if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
$(this).find('.vegas-next').hide();
} else {
$(this).find('.vegas-next').show();
}
});
} else if (settings.status == 'disabled') {
if (this.slide == 0) {
this.$elmt.find('.vegas-prev').addClass('vegas-disabled');
}
this.$elmt.on('vegaschange', function() {
if ($(this).vegas('current') <= 0) {
$(this).find('.vegas-prev').addClass('vegas-disabled');
} else {
$(this).find('.vegas-prev').removeClass('vegas-disabled');
}
if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
$(this).find('.vegas-next').addClass('vegas-disabled');
} else {
$(this).find('.vegas-next').removeClass('vegas-disabled');
}
});
}
if (settings.hookStatus == 'none') {
$(settings.prevHook).hide();
$(settings.nextHook).hide();
} else if (settings.hookStatus == 'hide') {
if (this.slide == 0) {
$(settings.prevHook).hide();
}
this.$elmt.on('vegaschange', function() {
if ($(this).vegas('current') <= 0) {
$(settings.prevHook).hide();
} else {
$(settings.prevHook).show();
}
if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
$(settings.nextHook).hide();
} else {
$(settings.nextHook).show();
}
});
} else if (settings.hookStatus == 'disabled') {
if (this.slide == 0) {
$(settings.prevHook).addClass('vegas-disabled');
}
this.$elmt.on('vegaschange', function() {
if ($(this).vegas('current') <= 0) {
$(settings.prevHook).addClass('vegas-disabled');
} else {
$(settings.prevHook).removeClass('vegas-disabled');
}
if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
$(settings.nextHook).addClass('vegas-disabled');
} else {
$(settings.nextHook).removeClass('vegas-disabled');
}
});
}
},
_dots: function() {
let settings = Object.keys(this.settings).reduce(function (carry, key) {
key.includes('dot-') && (carry[key.replace('dot-', '')] = this.settings[key])
return carry;
}, {});
let dots = this.$elmt.find('.vegas-dots .vegas-dot').eq(0);
let dataHook = $(settings.hook);
let dataHookChild = $(settings.hook).children().eq(0);
for (var i = 1; i < this.settings.slides.length; i++) {
dots.clone(true).appendTo(this.$elmt.find('.vegas-dots'));
if (settings.hookStatus == "clone") {
dataHookChild.clone(true).appendTo(dataHook);
}
if (settings.hookStatus == "clone-id") {
const index = i;
var vegas_dot = dataHookChild.clone(true);
vegas_dot.html(function(x, oldHTML) {
return oldHTML.replace(/\${i}/g, index + 1);
}).appendTo(dataHook);
}
}
if (settings.hookStatus == "clone-id") {
dataHookChild.html(function(x, oldHTML) {
return oldHTML.replace(/\${i}/g, 1);
});
}
if (settings.status == "hide") {
this.$elmt.find('.vegas-dots').hide();
}
this.$elmt.find('.vegas-dots .vegas-dot').eq(this.slide).addClass('vegas-dot-active');
$(settings.hook).children().eq(this.slide).addClass('vegas-dot-active');
this.$elmt.on('vegaschange', function() {
$(this).find('.vegas-dots .vegas-dot.vegas-dot-active').removeClass('vegas-dot-active');
$(settings.hook).children('.vegas-dot-active').removeClass('vegas-dot-active');
var active_dot = $(this).vegas('current') > $(this).find('.vegas-dots .vegas-dot').length - 1 ? $(this).find('.vegas-dots .vegas-dot').length - 1 : $(this).vegas('current');
active_dot = $(this).vegas('current') < 0 ? 0 : active_dot;
$(this).find('.vegas-dots .vegas-dot').eq(active_dot).addClass('vegas-dot-active');
$(settings.hook).children().eq(active_dot).addClass('vegas-dot-active');
});
var dot_clone = settings.hook;
$(settings.hook).children().on('click', function() {
$('[data-dot-hook="' + dot_clone + '"] .vegas-dots').children('.vegas-dot').eq($(this).index()).click();
});
},
_init: function() {
var $content, $contentScroll, $overlay, $timer, isBody = this.elmt.tagName === 'BODY', timer = this.settings.timer, overlay = this.settings.overlay, self = this;
// Preloading
this._preload();
// Div with scrollable content
if (!isBody) {
$contentScroll = $('
');
$content = $('
').css('overflow', this.$elmt.css('overflow')).css('padding', this.$elmt.css('padding'));
// Some browsers don't compute padding shorthand
if (!this.$elmt.css('padding')) {
$content.css('padding-top', this.$elmt.css('padding-top')).css('padding-bottom', this.$elmt.css('padding-bottom')).css('padding-left', this.$elmt.css('padding-left')).css('padding-right', this.$elmt.css('padding-right'));
}
this.$elmt.css('padding', 0);
this.$elmt.clone(true).children().appendTo($content);
$content.children().not('.vegas-dot-controls').wrapAll("
");
$content.append($('
'));
$content.find('.vegas-arrow-controls').append($('
')).find('.vegas-prev').append($('
'));
$content.find('.vegas-arrow-controls').append($('
')).find('.vegas-next').append($('
'));
$content.append($('
')).find('.vegas-dot-controls').append($('
')).find('.vegas-dots').append($('
'));
this.elmt.innerHTML = '';
}
// Timer
if (timer && this.support.transition) {
$timer = $('
');
this.$timer = $timer;
this.$elmt.prepend($timer);
}
// Overlay
if (overlay) {
$overlay = $('
');
if (typeof overlay === 'string') {
$overlay.css('background-image', 'url(' + overlay + ')');
}
this.$overlay = $overlay;
this.$elmt.prepend($overlay);
}
// Container
this.$elmt.addClass('vegas-container');
if (!isBody) {
this.$elmt.append($contentScroll);
$contentScroll.append($content);
}
this.$elmt.data('vegas', this);
setTimeout(function() {
self.trigger('init');
self._goto(self.slide);
if (self.settings.autoplay) {
self.trigger('play');
}
}, 1);
},
_preload: function() {
var img, i;
for (i = 0; i < this.settings.slides.length; i++) {
if (this.settings.preload || this.settings.preloadImages) {
if (this.settings.slides[i].src) {
img = new Image();
img.src = this.settings.slides[i].src;
}
}
if (this.settings.preload || this.settings.preloadVideos) {
if (this.support.video && this.settings.slides[i].video) {
if (this.settings.slides[i].video instanceof Array) {
this._video(this.settings.slides[i].video);
} else {
this._video(this.settings.slides[i].video.src);
}
}
}
}
},
_random: function(array) {
return array[Math.floor(Math.random() * array.length)];
},
_slideShow: function() {
var self = this;
if (this.total > 1 && !this.ended && !this.paused && !this.noshow) {
this.timeout = setTimeout(function() {
self.next();
}, this._options('delay'));
}
},
_timer: function(state) {
var self = this;
clearTimeout(this.timeout);
if (!this.$timer) {
return;
}
this.$timer.removeClass('vegas-timer-running').find('div').css('transition-duration', '0ms');
if (this.ended || this.paused || this.noshow) {
return;
}
if (state) {
setTimeout(function() {
self.$timer.addClass('vegas-timer-running').find('div').css('transition-duration', self._options('delay') - 100 + 'ms');
}, 100);
}
},
_video: function(srcs) {
var video, source, cacheKey = srcs.toString();
if (videoCache[cacheKey]) {
return videoCache[cacheKey];
}
if (!(srcs instanceof Array)) {
srcs = [srcs];
}
video = document.createElement('video');
video.preload = true;
srcs.forEach(function(src) {
source = document.createElement('source');
source.src = src;
video.appendChild(source);
});
videoCache[cacheKey] = video;
return video;
},
_fadeOutSound: function(video, duration) {
var self = this,
delay = duration / 10,
volume = video.volume - 0.09;
if (volume > 0) {
video.volume = volume;
setTimeout(function() {
self._fadeOutSound(video, duration);
}, delay);
} else {
video.pause();
}
},
_fadeInSound: function(video, duration) {
var self = this,
delay = duration / 10,
volume = video.volume + 0.09;
if (volume < 1) {
video.volume = volume;
setTimeout(function() {
self._fadeInSound(video, duration);
}, delay);
}
},
_options: function(key, i) {
if (i === undefined) {
i = this.slide;
}
if (this.settings.slides[i][key] !== undefined) {
return this.settings.slides[i][key];
}
return this.settings[key];
},
_goto: function(nb) {
if (typeof this.settings.slides[nb] === 'undefined') {
nb = 0;
}
this.slide = nb;
var $slide, $inner, $video, $slides = this.$elmt.children('.vegas-slide'), src = this.settings.slides[nb].src, videoSettings = this.settings.slides[nb].video, delay = this._options('delay'), align = this._options('align'), valign = this._options('valign'), cover = this._options('cover'), color = this._options('color') || this.$elmt.css('background-color'), self = this, total = $slides.length, video, img;
var transition = this._options('transition'),
transitionDuration = this._options('transitionDuration'),
animation = this._options('animation'),
animationDuration = this._options('animationDuration');
if (this.settings.firstTransition && this.first) {
transition = this.settings.firstTransition || transition;
}
if (this.settings.firstTransitionDuration && this.first) {
transitionDuration = this.settings.firstTransitionDuration || transitionDuration;
}
if (this.first) {
this.first = false;
}
if (cover !== 'repeat') {
if (cover === true) {
cover = 'cover';
} else if (cover === false) {
cover = 'contain';
}
}
if (transition === 'random' || transition instanceof Array) {
if (transition instanceof Array) {
transition = this._random(transition);
} else {
transition = this._random(this.transitions);
}
}
if (animation === 'random' || animation instanceof Array) {
if (animation instanceof Array) {
animation = this._random(animation);
} else {
animation = this._random(this.animations);
}
}
if (transitionDuration === 'auto' || transitionDuration > delay) {
transitionDuration = delay;
}
if (animationDuration === 'auto') {
animationDuration = delay;
}
$slide = $('
');
if (this.support.transition && transition) {
$slide.addClass('vegas-transition-' + transition);
}
if (this.support.video && videoSettings) {
// Video
if (videoSettings instanceof Array) {
video = this._video(videoSettings);
} else {
video = this._video(videoSettings.src);
}
video.loop = videoSettings.loop !== undefined ? videoSettings.loop : true;
video.muted = videoSettings.mute !== undefined ? videoSettings.mute : true;
if (video.muted === false) {
video.volume = 0;
this._fadeInSound(video, transitionDuration);
} else {
video.pause();
}
$video = $(video).addClass('vegas-video').css('background-color', color);
if (this.support.objectFit) {
$video.css('object-position', align + ' ' + valign).css('object-fit', cover).css('width', '100%').css('height', '100%');
} else if (cover === 'contain') {
$video.css('width', '100%').css('height', '100%');
}
$slide.append($video);
} else {
// Image
img = new Image();
$inner = $('
').css('background-image', 'url("' + src + '")').css('background-color', color).css('background-position', align + ' ' + valign);
if (cover === 'repeat') {
$inner.css('background-repeat', 'repeat');
} else {
$inner.css('background-size', cover);
}
if (this.support.transition && animation) {
$inner.addClass('vegas-animation-' + animation).css('animation-duration', animationDuration + 'ms');
}
$slide.append($inner);
}
if (!this.support.transition) {
$slide.css('display', 'none');
}
if (total) {
$slides.eq(total - 1).after($slide);
} else {
this.$elmt.prepend($slide);
}
$slides.css('transition', 'all 0ms').each(function() {
this.className = 'vegas-slide';
if (this.tagName === 'VIDEO') {
this.className += ' vegas-video';
}
if (transition) {
this.className += ' vegas-transition-' + transition;
this.className += ' vegas-transition-' + transition + '-in';
}
});
self._timer(false);
function go() {
self._timer(true);
setTimeout(function() {
if (transition) {
if (self.support.transition) {
$slides.css('transition', 'all ' + transitionDuration + 'ms').addClass('vegas-transition-' + transition + '-out').css('opacity', self.settings.prevTransparent ? 0 : 1);
$slides.each(function() {
var video = $slides.find('video').get(0);
if (video) {
video.volume = 1;
self._fadeOutSound(video, transitionDuration);
}
});
$slide.css('transition', 'all ' + transitionDuration + 'ms').addClass('vegas-transition-' + transition + '-in');
} else {
$slide.fadeIn(transitionDuration);
}
}
for (var i = 0; i < $slides.length - self.settings.slidesToKeep; i++) {
$slides.eq(i).remove();
}
self.trigger('walk');
self._slideShow();
}, 100);
}
if (video) {
if (video.readyState === 4) {
video.currentTime = 0;
}
video.play();
go();
} else {
img.src = src;
if (img.complete) {
go();
} else {
img.onload = go;
}
}
},
_end: function() {
this.ended = !this.settings.autoplay;
this._timer(false);
this.trigger('end');
},
shuffle: function() {
var temp, rand;
for (var i = this.total - 1; i > 0; i--) {
rand = Math.floor(Math.random() * (i + 1));
temp = this.settings.slides[i];
this.settings.slides[i] = this.settings.slides[rand];
this.settings.slides[rand] = temp;
}
},
play: function() {
if (this.paused) {
this.paused = false;
this.next();
this.trigger('play');
}
},
pause: function() {
this._timer(false);
this.paused = true;
this.trigger('pause');
},
toggle: function() {
if (this.paused) {
this.play();
} else {
this.pause();
}
},
playing: function() {
return !this.paused && !this.noshow;
},
current: function(advanced) {
if (advanced) {
return {
slide: this.slide,
data: this.settings.slides[this.slide]
};
}
return this.slide;
},
jump: function(nb) {
if (nb < 0 || nb > this.total - 1 || nb === this.slide) {
return;
}
this.trigger('jump');
this.slide = nb;
this.trigger('change');
this._goto(this.slide);
},
next: function() {
this.slide++;
this.trigger('next');
this.trigger('change');
if (this.slide >= this.total) {
this.slide--;
if (!this.settings.loop) {
return this._end();
}
this.slide = 0;
}
this._goto(this.slide);
},
previous: function() {
this.slide--;
this.trigger('previous');
this.trigger('change');
if (this.slide < 0) {
if (!this.settings.loop) {
this.slide++;
return;
} else {
this.slide = this.total - 1;
}
}
this._goto(this.slide);
},
trigger: function(fn) {
var params = [];
if (fn === 'init') {
params = [this.settings];
} else {
params = [this.slide, this.settings.slides[this.slide]];
}
this.$elmt.trigger('vegas' + fn, params);
if (typeof this.settings[fn] === 'function') {
this.settings[fn].apply(this.$elmt, params);
}
},
options: function(key, value) {
var oldSlides = this.settings.slides.slice();
if (typeof key === 'object') {
this.settings = $.extend({}, defaults, $.vegas.defaults, key);
} else if (typeof key === 'string') {
if (value === undefined) {
return this.settings[key];
}
this.settings[key] = value;
} else {
return this.settings;
}
// In case slides have changed
if (this.settings.slides !== oldSlides) {
this.total = this.settings.slides.length;
this.noshow = this.total < 2;
this._preload();
}
},
destroy: function() {
clearTimeout(this.timeout);
this.$elmt.removeClass('vegas-container');
this.$elmt.find('> .vegas-slide').remove();
this.$elmt.find('> .vegas-wrapper').clone(true).children().appendTo(this.$elmt);
this.$elmt.find('> .vegas-wrapper').remove();
if (this.settings.timer) {
this.$timer.remove();
}
if (this.settings.overlay) {
this.$overlay.remove();
}
this.elmt._vegas = null;
}
};
$.fn.vegas = function(options) {
var args = arguments, error = false, returns;
if (options === undefined || typeof options === 'object') {
return this.each(function() {
if (!this._vegas) {
this._vegas = new Vegas(this,options);
}
});
} else if (typeof options === 'string') {
this.each(function() {
var instance = this._vegas;
if (!instance) {
throw new Error('No Vegas applied to this element.');
}
if (options[0] === '_' && options[1] === '_'){
returns = instance[options.substring(2)];
} else {
if (typeof instance[options] === 'function' && options[0] !== '_') {
returns = instance[options].apply(instance, [].slice.call(args, 1));
} else {
error = true;
}
}
});
if (error) {
throw new Error('No method "' + options + '" in Vegas.');
}
return returns !== undefined ? returns : this;
}
}
;
$.vegas = {};
$.vegas.defaults = defaults;
$.vegas.isVideoCompatible = function() {
return !/(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone)/i.test(navigator.userAgent);
}
;
}
)(window.jQuery || window.Zepto || window.m4q);
$(document).ready(function() {
if (typeof $.initialize == 'function'){
$.initialize('[type=vegas]', function(event) {
if (! window.delegate_vegas){
window.delegate_vegas = true;
delegate_function();
}
if ($(this).is(':not("[vegas]")')){
$(this).vegas().attr('vegas', '');
}
});
} else {
window.init_vegas = function(){
$('[type="vegas"]:not("[vegas]")').vegas().attr('vegas', '');
};
if ($('[type="vegas"]:not("[vegas]")').length > 0){
window.init_vegas();
window.delegate_vegas = true;
delegate_function();
}
}
});
function delegate_function(){
$("body").delegate("[type=vegas][vegas]", "mousedown", function() {
var e = window.event;
startX = e.clientX;
window.sliding = true;
});
$("body").delegate("[type=vegas][vegas]", "mouseup", function() {
var e = window.event;
var endX = e.clientX;
// 左滑
if ((startX - endX) > 30) {
$(this).vegas('next');
}
// 右滑
if ((endX - startX) > 30) {
$(this).vegas('previous');
}
window.sliding = false;
});
$("body").delegate("[type=vegas][vegas]", "mouseleave", function() {
if (window.sliding) {
var e = window.event;
var endX = e.clientX;
// 左滑
if ((startX - endX) > 30) {
$(this).vegas('next');
}
// 右滑
if ((endX - startX) > 30) {
$(this).vegas('previous');
}
window.sliding = false;
}
});
$("body").delegate('[type=vegas][vegas] .vegas-prev', "click", function() {
$(this).parents('[type=vegas]').vegas('previous');
});
$("body").delegate('[type=vegas][vegas] .vegas-next', "click", function() {
$(this).parents('[type=vegas]').vegas('next');
});
$("body").delegate('[type=vegas][vegas] .vegas-dots .vegas-dot', "click", function() {
$(this).parents('[type=vegas]').vegas('jump', $(this).index());
});
}