/*! uikit 2.25.0 | http://www.getuikit.com | (c) 2014 yootheme | mit license */
(function(addon) {
var component;
if (window.uikit) {
component = addon(uikit);
}
if (typeof define == "function" && define.amd) {
define("uikit-slideshow", ["uikit"], function() {
return component || addon(uikit);
});
}
})(function(ui) {
"use strict";
var animations, playerid = 0;
ui.component('slideshow', {
defaults: {
animation : "fade",
duration : 500,
height : "auto",
start : 0,
autoplay : false,
autoplayinterval : 7000,
videoautoplay : true,
videomute : true,
slices : 15,
pauseonhover : true,
kenburns : false,
kenburnsanimations : [
'uk-animation-middle-left',
'uk-animation-top-right',
'uk-animation-bottom-left',
'uk-animation-top-center',
'', // middle-center
'uk-animation-bottom-right'
]
},
current : false,
interval : null,
hovering : false,
boot: function() {
// init code
ui.ready(function(context) {
ui.$('[data-uk-slideshow]', context).each(function() {
var slideshow = ui.$(this);
if (!slideshow.data("slideshow")) {
ui.slideshow(slideshow, ui.utils.options(slideshow.attr("data-uk-slideshow")));
}
});
});
},
init: function() {
var $this = this, canvas, kbanimduration;
this.container = this.element.hasclass('uk-slideshow') ? this.element : ui.$(this.find('.uk-slideshow'));
this.slides = this.container.children();
this.slidescount = this.slides.length;
this.current = this.options.start;
this.animating = false;
this.triggers = this.find('[data-uk-slideshow-item]');
this.fixfullscreen = navigator.useragent.match(/(ipad|iphone|ipod)/g) && this.container.hasclass('uk-slideshow-fullscreen'); // viewport unit fix for height:100vh - should be fixed in ios 8
if (this.options.kenburns) {
kbanimduration = this.options.kenburns === true ? '15s': this.options.kenburns;
if (!string(kbanimduration).match(/(ms|s)$/)) {
kbanimduration += 'ms';
}
if (typeof(this.options.kenburnsanimations) == 'string') {
this.options.kenburnsanimations = this.options.kenburnsanimations.split(',');
}
}
this.slides.each(function(index) {
var slide = ui.$(this),
media = slide.children('img,video,iframe').eq(0);
slide.data('media', media);
slide.data('sizer', media);
if (media.length) {
var placeholder;
switch(media[0].nodename) {
case 'img':
var cover = ui.$('
').css({'background-image':'url('+ media.attr('src') + ')'});
if (media.attr('width') && media.attr('height')) {
placeholder = ui.$('').attr({width:media.attr('width'), height:media.attr('height')});
media.replacewith(placeholder);
media = placeholder;
placeholder = undefined;
}
media.css({width: '100%',height: 'auto', opacity:0});
slide.prepend(cover).data('cover', cover);
break;
case 'iframe':
var src = media[0].src, iframeid = 'sw-'+(++playerid);
media
.attr('src', '').on('load', function(){
if (index !== $this.current || (index == $this.current && !$this.options.videoautoplay)) {
$this.pausemedia(media);
}
if ($this.options.videomute) {
$this.mutemedia(media);
var inv = setinterval((function(ic) {
return function() {
$this.mutemedia(media);
if (++ic >= 4) clearinterval(inv);
}
})(0), 250);
}
})
.data('slideshow', $this) // add self-reference for the vimeo-ready listener
.attr('data-player-id', iframeid) // add frameid for the vimeo-ready listener
.attr('src', [src, (src.indexof('?') > -1 ? '&':'?'), 'enablejsapi=1&api=1&player_id='+iframeid].join(''))
.addclass('uk-position-absolute');
// disable pointer events
if(!ui.support.touch) media.css('pointer-events', 'none');
placeholder = true;
if (ui.cover) {
ui.cover(media);
media.attr('data-uk-cover', '{}');
}
break;
case 'video':
media.addclass('uk-cover-object uk-position-absolute');
placeholder = true;
if ($this.options.videomute) $this.mutemedia(media);
}
if (placeholder) {
canvas = ui.$('').attr({'width': media[0].width, 'height': media[0].height});
var img = ui.$('
').attr('src', canvas[0].todataurl());
slide.prepend(img);
slide.data('sizer', img);
}
} else {
slide.data('sizer', slide);
}
if ($this.haskenburns(slide)) {
slide.data('cover').css({
'-webkit-animation-duration': kbanimduration,
'animation-duration': kbanimduration
});
}
});
this.on("click.uk.slideshow", '[data-uk-slideshow-item]', function(e) {
e.preventdefault();
var slide = ui.$(this).attr('data-uk-slideshow-item');
if ($this.current == slide) return;
switch(slide) {
case 'next':
case 'previous':
$this[slide=='next' ? 'next':'previous']();
break;
default:
$this.show(parseint(slide, 10));
}
$this.stop();
});
// set start slide
this.slides.attr('aria-hidden', 'true').eq(this.current).addclass('uk-active').attr('aria-hidden', 'false');
this.triggers.filter('[data-uk-slideshow-item="'+this.current+'"]').addclass('uk-active');
ui.$win.on("resize load", ui.utils.debounce(function() {
$this.resize();
if ($this.fixfullscreen) {
$this.container.css('height', window.innerheight);
$this.slides.css('height', window.innerheight);
}
}, 100));
// chrome image load fix
settimeout(function(){
$this.resize();
}, 80);
// set autoplay
if (this.options.autoplay) {
this.start();
}
if (this.options.videoautoplay && this.slides.eq(this.current).data('media')) {
this.playmedia(this.slides.eq(this.current).data('media'));
}
if (this.options.kenburns) {
this.applykenburns(this.slides.eq(this.current));
}
this.container.on({
mouseenter: function() { if ($this.options.pauseonhover) $this.hovering = true; },
mouseleave: function() { $this.hovering = false; }
});
this.on('swiperight swipeleft', function(e) {
$this[e.type=='swipeleft' ? 'next' : 'previous']();
});
this.on('display.uk.check', function(){
if ($this.element.is(":visible")) {
$this.resize();
if ($this.fixfullscreen) {
$this.container.css('height', window.innerheight);
$this.slides.css('height', window.innerheight);
}
}
});
},
resize: function() {
if (this.container.hasclass('uk-slideshow-fullscreen')) return;
var height = this.options.height;
if (this.options.height === 'auto') {
height = 0;
this.slides.css('height', '').each(function() {
height = math.max(height, ui.$(this).height());
});
}
this.container.css('height', height);
this.slides.css('height', height);
},
show: function(index, direction) {
if (this.animating || this.current == index) return;
this.animating = true;
var $this = this,
current = this.slides.eq(this.current),
next = this.slides.eq(index),
dir = direction ? direction : this.current < index ? 1 : -1,
currentmedia = current.data('media'),
animation = animations[this.options.animation] ? this.options.animation : 'fade',
nextmedia = next.data('media'),
finalize = function() {
if (!$this.animating) return;
if (currentmedia && currentmedia.is('video,iframe')) {
$this.pausemedia(currentmedia);
}
if (nextmedia && nextmedia.is('video,iframe')) {
$this.playmedia(nextmedia);
}
next.addclass("uk-active").attr('aria-hidden', 'false');
current.removeclass("uk-active").attr('aria-hidden', 'true');
$this.animating = false;
$this.current = index;
ui.utils.checkdisplay(next, '[class*="uk-animation-"]:not(.uk-cover-background.uk-position-cover)');
$this.trigger('show.uk.slideshow', [next, current, $this]);
};
$this.applykenburns(next);
// animation fallback
if (!ui.support.animation) {
animation = 'none';
}
current = ui.$(current);
next = ui.$(next);
$this.trigger('beforeshow.uk.slideshow', [next, current, $this]);
animations[animation].apply(this, [current, next, dir]).then(finalize);
$this.triggers.removeclass('uk-active');
$this.triggers.filter('[data-uk-slideshow-item="'+index+'"]').addclass('uk-active');
},
applykenburns: function(slide) {
if (!this.haskenburns(slide)) {
return;
}
var animations = this.options.kenburnsanimations,
index = this.kbindex || 0;
slide.data('cover').attr('class', 'uk-cover-background uk-position-cover').width();
slide.data('cover').addclass(['uk-animation-scale', 'uk-animation-reverse', animations[index].trim()].join(' '));
this.kbindex = animations[index + 1] ? (index+1):0;
},
haskenburns: function(slide) {
return (this.options.kenburns && slide.data('cover'));
},
next: function() {
this.show(this.slides[this.current + 1] ? (this.current + 1) : 0, 1);
},
previous: function() {
this.show(this.slides[this.current - 1] ? (this.current - 1) : (this.slides.length - 1), -1);
},
start: function() {
this.stop();
var $this = this;
this.interval = setinterval(function() {
if (!$this.hovering) $this.next();
}, this.options.autoplayinterval);
},
stop: function() {
if (this.interval) clearinterval(this.interval);
},
playmedia: function(media) {
if (!(media && media[0])) return;
switch(media[0].nodename) {
case 'video':
if (!this.options.videomute) {
media[0].muted = false;
}
media[0].play();
break;
case 'iframe':
if (!this.options.videomute) {
media[0].contentwindow.postmessage('{ "event": "command", "func": "unmute", "method":"setvolume", "value":1}', '*');
}
media[0].contentwindow.postmessage('{ "event": "command", "func": "playvideo", "method":"play"}', '*');
break;
}
},
pausemedia: function(media) {
switch(media[0].nodename) {
case 'video':
media[0].pause();
break;
case 'iframe':
media[0].contentwindow.postmessage('{ "event": "command", "func": "pausevideo", "method":"pause"}', '*');
break;
}
},
mutemedia: function(media) {
switch(media[0].nodename) {
case 'video':
media[0].muted = true;
break;
case 'iframe':
media[0].contentwindow.postmessage('{ "event": "command", "func": "mute", "method":"setvolume", "value":0}', '*');
break;
}
}
});
animations = {
'none': function() {
var d = ui.$.deferred();
d.resolve();
return d.promise();
},
'scroll': function(current, next, dir) {
var d = ui.$.deferred();
current.css('animation-duration', this.options.duration+'ms');
next.css('animation-duration', this.options.duration+'ms');
next.css('opacity', 1).one(ui.support.animation.end, function() {
current.removeclass(dir == -1 ? 'uk-slideshow-scroll-backward-out' : 'uk-slideshow-scroll-forward-out');
next.css('opacity', '').removeclass(dir == -1 ? 'uk-slideshow-scroll-backward-in' : 'uk-slideshow-scroll-forward-in');
d.resolve();
}.bind(this));
current.addclass(dir == -1 ? 'uk-slideshow-scroll-backward-out' : 'uk-slideshow-scroll-forward-out');
next.addclass(dir == -1 ? 'uk-slideshow-scroll-backward-in' : 'uk-slideshow-scroll-forward-in');
next.width(); // force redraw
return d.promise();
},
'swipe': function(current, next, dir) {
var d = ui.$.deferred();
current.css('animation-duration', this.options.duration+'ms');
next.css('animation-duration', this.options.duration+'ms');
next.css('opacity', 1).one(ui.support.animation.end, function() {
current.removeclass(dir === -1 ? 'uk-slideshow-swipe-backward-out' : 'uk-slideshow-swipe-forward-out');
next.css('opacity', '').removeclass(dir === -1 ? 'uk-slideshow-swipe-backward-in' : 'uk-slideshow-swipe-forward-in');
d.resolve();
}.bind(this));
current.addclass(dir == -1 ? 'uk-slideshow-swipe-backward-out' : 'uk-slideshow-swipe-forward-out');
next.addclass(dir == -1 ? 'uk-slideshow-swipe-backward-in' : 'uk-slideshow-swipe-forward-in');
next.width(); // force redraw
return d.promise();
},
'scale': function(current, next, dir) {
var d = ui.$.deferred();
current.css('animation-duration', this.options.duration+'ms');
next.css('animation-duration', this.options.duration+'ms');
next.css('opacity', 1);
current.one(ui.support.animation.end, function() {
current.removeclass('uk-slideshow-scale-out');
next.css('opacity', '');
d.resolve();
}.bind(this));
current.addclass('uk-slideshow-scale-out');
current.width(); // force redraw
return d.promise();
},
'fade': function(current, next, dir) {
var d = ui.$.deferred();
current.css('animation-duration', this.options.duration+'ms');
next.css('animation-duration', this.options.duration+'ms');
next.css('opacity', 1);
// for plain text content slides - looks smoother
if (!(next.data('cover') || next.data('placeholder'))) {
next.css('opacity', 1).one(ui.support.animation.end, function() {
next.removeclass('uk-slideshow-fade-in');
}).addclass('uk-slideshow-fade-in');
}
current.one(ui.support.animation.end, function() {
current.removeclass('uk-slideshow-fade-out');
next.css('opacity', '');
d.resolve();
}.bind(this));
current.addclass('uk-slideshow-fade-out');
current.width(); // force redraw
return d.promise();
}
};
ui.slideshow.animations = animations;
// listen for messages from the vimeo player
window.addeventlistener('message', function onmessagereceived(e) {
var data = e.data, iframe;
if (typeof(data) == 'string') {
try {
data = json.parse(data);
} catch(err) {
data = {};
}
}
if (e.origin && e.origin.indexof('vimeo') > -1 && data.event == 'ready' && data.player_id) {
iframe = ui.$('[data-player-id="'+ data.player_id+'"]');
if (iframe.length) {
iframe.data('slideshow').mutemedia(iframe);
}
}
}, false);
});