465 lines
17 KiB
JavaScript
465 lines
17 KiB
JavaScript
|
|
(function (e) {
|
|
var f = {
|
|
slide: 0,
|
|
delay: 5000,
|
|
preload: false,
|
|
preloadImage: false,
|
|
preloadVideo: false,
|
|
timer: false,
|
|
overlay: false,
|
|
autoplay: true,
|
|
shuffle: false,
|
|
cover: true,
|
|
color: null,
|
|
align: "center",
|
|
valign: "center",
|
|
transition: "fade",
|
|
transitionDuration: 1000,
|
|
transitionRegister: [],
|
|
animation: null,
|
|
animationDuration: "auto",
|
|
animationRegister: [],
|
|
init: function () {},
|
|
play: function () {},
|
|
pause: function () {},
|
|
walk: function () {},
|
|
slides: []
|
|
};
|
|
var h = {};
|
|
var g = function (a, b) {
|
|
this.elmt = a;
|
|
this.settings = e.extend({}, f, e.vegas.defaults, b);
|
|
this.slide = this.settings.slide;
|
|
this.total = this.settings.slides.length;
|
|
this.noshow = this.total < 2;
|
|
this.paused = !this.settings.autoplay || this.noshow;
|
|
this.$elmt = e(a);
|
|
this.$timer = null;
|
|
this.$overlay = null;
|
|
this.$slide = null;
|
|
this.timeout = null;
|
|
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 === false) {
|
|
this.settings.transitionRegister = [this.settings.transitionRegister]
|
|
}
|
|
if (this.settings.animationRegister instanceof Array === false) {
|
|
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: e.vegas.isVideoCompatible()
|
|
};
|
|
if (this.settings.shuffle === true) {
|
|
this.shuffle()
|
|
}
|
|
this._init()
|
|
};
|
|
g.prototype = {
|
|
_init: function () {
|
|
var c, a, b, d = this.elmt.tagName === "BODY",
|
|
n = this.settings.timer,
|
|
l = this.settings.overlay,
|
|
m = this;
|
|
this._preload();
|
|
if (!d) {
|
|
this.$elmt.css("height", this.$elmt.css("height"));
|
|
c = e('<div class="vegas-wrapper">').css("overflow", this.$elmt.css("overflow")).css("padding", this.$elmt.css("padding"));
|
|
if (!this.$elmt.css("padding")) {
|
|
c.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.clone(true).children().appendTo(c);
|
|
this.elmt.innerHTML = ""
|
|
}
|
|
if (n && this.support.transition) {
|
|
b = e('<div class="vegas-timer"><div class="vegas-timer-progress">');
|
|
this.$timer = b;
|
|
this.$elmt.prepend(b)
|
|
}
|
|
if (l) {
|
|
a = e('<div class="vegas-overlay">');
|
|
if (typeof l === "string") {
|
|
a.css("background-image", "url(" + l + ")")
|
|
}
|
|
this.$overlay = a;
|
|
this.$elmt.prepend(a)
|
|
}
|
|
this.$elmt.addClass("vegas-container");
|
|
if (!d) {
|
|
this.$elmt.append(c)
|
|
}
|
|
setTimeout(function () {
|
|
m.trigger("init");
|
|
m._goto(m.slide);
|
|
if (m.settings.autoplay) {
|
|
m.trigger("play")
|
|
}
|
|
}, 1)
|
|
},
|
|
_preload: function () {
|
|
var c, b, a;
|
|
for (a = 0; a < this.settings.slides.length; a++) {
|
|
if (this.settings.preload || this.settings.preloadImages) {
|
|
if (this.settings.slides[a].src) {
|
|
b = new Image();
|
|
b.src = this.settings.slides[a].src
|
|
}
|
|
}
|
|
if (this.settings.preload || this.settings.preloadVideos) {
|
|
if (this.support.video && this.settings.slides[a].video) {
|
|
if (this.settings.slides[a].video instanceof Array) {
|
|
c = this._video(this.settings.slides[a].video)
|
|
} else {
|
|
c = this._video(this.settings.slides[a].video.src)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
_random: function (a) {
|
|
return a[Math.floor(Math.random() * (a.length - 1))]
|
|
},
|
|
_slideShow: function () {
|
|
var a = this;
|
|
if (this.total > 1 && !this.paused && !this.noshow) {
|
|
this.timeout = setTimeout(function () {
|
|
a.next()
|
|
}, this._options("delay"))
|
|
}
|
|
},
|
|
_timer: function (b) {
|
|
var a = this;
|
|
clearTimeout(this.timeout);
|
|
if (!this.$timer) {
|
|
return
|
|
}
|
|
this.$timer.removeClass("vegas-timer-running").find("div").css("transition-duration", "0ms");
|
|
if (this.paused || this.noshow) {
|
|
return
|
|
}
|
|
if (b) {
|
|
setTimeout(function () {
|
|
a.$timer.addClass("vegas-timer-running").find("div").css("transition-duration", a._options("delay") - 100 + "ms")
|
|
}, 100)
|
|
}
|
|
},
|
|
_video: function (c) {
|
|
var d, b, a = c.toString();
|
|
if (h[a]) {
|
|
return h[a]
|
|
}
|
|
if (c instanceof Array === false) {
|
|
c = [c]
|
|
}
|
|
d = document.createElement("video");
|
|
d.preload = true;
|
|
c.forEach(function (j) {
|
|
b = document.createElement("source");
|
|
b.src = j;
|
|
d.appendChild(b)
|
|
});
|
|
h[a] = d;
|
|
return d
|
|
},
|
|
_fadeOutSound: function (d, b) {
|
|
var c = this,
|
|
a = b / 10,
|
|
j = d.volume - 0.09;
|
|
if (j > 0) {
|
|
d.volume = j;
|
|
setTimeout(function () {
|
|
c._fadeOutSound(d, b)
|
|
}, a)
|
|
} else {
|
|
d.pause()
|
|
}
|
|
},
|
|
_fadeInSound: function (d, b) {
|
|
var c = this,
|
|
a = b / 10,
|
|
j = d.volume + 0.09;
|
|
if (j < 1) {
|
|
d.volume = j;
|
|
setTimeout(function () {
|
|
c._fadeInSound(d, b)
|
|
}, a)
|
|
}
|
|
},
|
|
_options: function (b, a) {
|
|
if (a === undefined) {
|
|
a = this.slide
|
|
}
|
|
if (this.settings.slides[a][b] !== undefined) {
|
|
return this.settings.slides[a][b]
|
|
}
|
|
return this.settings[b]
|
|
},
|
|
_goto: function (H) {
|
|
if (typeof this.settings.slides[H] === "undefined") {
|
|
H = 0
|
|
}
|
|
this.slide = H;
|
|
var b, a, d, c = this.$elmt.children(".vegas-slide"),
|
|
J = this.settings.slides[H].src,
|
|
P = this.settings.slides[H].video,
|
|
E = this._options("delay"),
|
|
z = this._options("align"),
|
|
N = this._options("valign"),
|
|
C = this._options("color") || this.$elmt.css("background-color"),
|
|
D = this._options("cover") ? "cover" : "contain",
|
|
I = this,
|
|
K = c.length,
|
|
O, G;
|
|
var L = this._options("transition"),
|
|
M = this._options("transitionDuration"),
|
|
A = this._options("animation"),
|
|
B = this._options("animationDuration");
|
|
if (L === "random" || L instanceof Array) {
|
|
if (L instanceof Array) {
|
|
L = this._random(L)
|
|
} else {
|
|
L = this._random(this.transitions)
|
|
}
|
|
}
|
|
if (A === "random" || A instanceof Array) {
|
|
if (A instanceof Array) {
|
|
A = this._random(A)
|
|
} else {
|
|
A = this._random(this.animations)
|
|
}
|
|
}
|
|
if (M === "auto" || M > E) {
|
|
M = E
|
|
}
|
|
if (B === "auto") {
|
|
B = E
|
|
}
|
|
b = e('<div class="vegas-slide"></div>');
|
|
if (this.support.transition && L) {
|
|
b.addClass("vegas-transition-" + L)
|
|
}
|
|
if (this.support.video && P) {
|
|
if (P instanceof Array) {
|
|
O = this._video(P)
|
|
} else {
|
|
O = this._video(P.src)
|
|
}
|
|
O.loop = P.loop !== undefined ? P.loop : true;
|
|
O.muted = P.mute !== undefined ? P.mute : true;
|
|
if (O.muted === false) {
|
|
O.volume = 0;
|
|
this._fadeInSound(O, M)
|
|
} else {
|
|
O.pause()
|
|
}
|
|
d = e(O).addClass("vegas-video").css("background-color", C);
|
|
if (this.support.objectFit) {
|
|
d.css("object-position", z + " " + N).css("object-fit", D).css("width", "100%").css("height", "100%")
|
|
} else {
|
|
if (D === "contain") {
|
|
d.css("width", "100%").css("height", "100%")
|
|
}
|
|
}
|
|
b.append(d)
|
|
} else {
|
|
G = new Image();
|
|
a = e('<div class="vegas-slide-inner"></div>').css("background-image", "url(" + J + ")").css("background-color", C).css("background-position", z + " " + N).css("background-size", D);
|
|
if (this.support.transition && A) {
|
|
a.addClass("vegas-animation-" + A).css("animation-duration", B + "ms")
|
|
}
|
|
b.append(a)
|
|
}
|
|
if (!this.support.transition) {
|
|
b.css("display", "none")
|
|
}
|
|
if (K) {
|
|
c.eq(K - 1).after(b)
|
|
} else {
|
|
this.$elmt.prepend(b)
|
|
}
|
|
I._timer(false);
|
|
|
|
function F() {
|
|
I._timer(true);
|
|
setTimeout(function () {
|
|
if (L) {
|
|
if (I.support.transition) {
|
|
c.css("transition", "all " + M + "ms").addClass("vegas-transition-" + L + "-out");
|
|
c.each(function () {
|
|
var j = c.find("video").get(0);
|
|
if (j) {
|
|
j.volume = 1;
|
|
I._fadeOutSound(j, M)
|
|
}
|
|
});
|
|
b.css("transition", "all " + M + "ms").addClass("vegas-transition-" + L + "-in")
|
|
} else {
|
|
b.fadeIn(M)
|
|
}
|
|
}
|
|
for (var i = 0; i < c.length - 4; i++) {
|
|
c.eq(i).remove()
|
|
}
|
|
I.trigger("walk");
|
|
I._slideShow()
|
|
}, 100)
|
|
}
|
|
if (O) {
|
|
if (O.readyState === 4) {
|
|
O.currentTime = 0
|
|
}
|
|
O.play();
|
|
F()
|
|
} else {
|
|
G.src = J;
|
|
G.onload = F
|
|
}
|
|
},
|
|
shuffle: function () {
|
|
var c, b;
|
|
for (var a = this.total - 1; a > 0; a--) {
|
|
b = Math.floor(Math.random() * (a + 1));
|
|
c = this.settings.slides[a];
|
|
this.settings.slides[a] = this.settings.slides[b];
|
|
this.settings.slides[b] = c
|
|
}
|
|
},
|
|
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 (a) {
|
|
if (a) {
|
|
return {
|
|
slide: this.slide,
|
|
data: this.settings.slides[this.slide]
|
|
}
|
|
}
|
|
return this.slide
|
|
},
|
|
jump: function (a) {
|
|
if (a < 0 || a > this.total - 1 || a === this.slide) {
|
|
return
|
|
}
|
|
this.slide = a;
|
|
this._goto(this.slide)
|
|
},
|
|
next: function () {
|
|
this.slide++;
|
|
if (this.slide >= this.total) {
|
|
this.slide = 0
|
|
}
|
|
this._goto(this.slide)
|
|
},
|
|
previous: function () {
|
|
this.slide--;
|
|
if (this.slide < 0) {
|
|
this.slide = this.total - 1
|
|
}
|
|
this._goto(this.slide)
|
|
},
|
|
trigger: function (a) {
|
|
var b = [];
|
|
if (a === "init") {
|
|
b = [this.settings]
|
|
} else {
|
|
b = [this.slide, this.settings.slides[this.slide]]
|
|
}
|
|
this.$elmt.trigger("vegas" + a, b);
|
|
if (typeof this.settings[a] === "function") {
|
|
this.settings[a].apply(this.$elmt, b)
|
|
}
|
|
},
|
|
options: function (a, c) {
|
|
var b = this.settings.slides.slice();
|
|
if (typeof a === "object") {
|
|
this.settings = e.extend({}, f, e.vegas.defaults, a)
|
|
} else {
|
|
if (typeof a === "string") {
|
|
if (c === undefined) {
|
|
return this.settings[a]
|
|
}
|
|
this.settings[a] = c
|
|
} else {
|
|
return this.settings
|
|
}
|
|
}
|
|
if (this.settings.slides !== b) {
|
|
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
|
|
}
|
|
};
|
|
e.fn.vegas = function (c) {
|
|
var a = arguments,
|
|
b = false,
|
|
d;
|
|
if (c === undefined || typeof c === "object") {
|
|
return this.each(function () {
|
|
if (!this._vegas) {
|
|
this._vegas = new g(this, c)
|
|
}
|
|
})
|
|
} else {
|
|
if (typeof c === "string") {
|
|
this.each(function () {
|
|
var j = this._vegas;
|
|
if (!j) {
|
|
throw new Error("No Vegas applied to this element.")
|
|
}
|
|
if (typeof j[c] === "function" && c[0] !== "_") {
|
|
d = j[c].apply(j, [].slice.call(a, 1))
|
|
} else {
|
|
b = true
|
|
}
|
|
});
|
|
if (b) {
|
|
throw new Error('No method "' + c + '" in Vegas.')
|
|
}
|
|
return d !== undefined ? d : this
|
|
}
|
|
}
|
|
};
|
|
e.vegas = {};
|
|
e.vegas.defaults = f;
|
|
e.vegas.isVideoCompatible = function () {
|
|
return !/(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone)/i.test(navigator.userAgent)
|
|
}
|
|
})(window.jQuery || window.Zepto); |