vendor/assets/javascripts/uikit/components/slideshow.js in uikit2-rails-0.1.9 vs vendor/assets/javascripts/uikit/components/slideshow.js in uikit2-rails-0.1.10
- old
+ new
@@ -1,16 +1,16 @@
-/*! UIkit 2.26.3 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+/*! UIkit 2.27.2 | 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() {
+ if (typeof define == 'function' && define.amd) {
+ define('uikit-slideshow', ['uikit'], function() {
return component || addon(UIkit);
});
}
})(function(UI) {
@@ -20,13 +20,13 @@
var Animations, playerId = 0;
UI.component('slideshow', {
defaults: {
- animation : "fade",
+ animation : 'fade',
duration : 500,
- height : "auto",
+ height : 'auto',
start : 0,
autoplay : false,
autoplayInterval : 7000,
videoautoplay : true,
videomute : true,
@@ -54,54 +54,147 @@
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")));
+ if (!slideshow.data('slideshow')) {
+ UI.slideshow(slideshow, UI.Utils.options(slideshow.attr('data-uk-slideshow')));
}
});
});
},
init: function() {
- var $this = this, canvas, kbanimduration;
+ var $this = this;
- 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.container = this.element.hasClass('uk-slideshow') ? this.element : UI.$(this.find('.uk-slideshow:first'));
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;
+ this.kbanimduration = this.options.kenburns === true ? '15s': this.options.kenburns;
- if (!String(kbanimduration).match(/(ms|s)$/)) {
- kbanimduration += 'ms';
+ if (!String(this.kbanimduration).match(/(ms|s)$/)) {
+ this.kbanimduration += 'ms';
}
if (typeof(this.options.kenburnsanimations) == 'string') {
this.options.kenburnsanimations = this.options.kenburnsanimations.split(',');
}
}
+ this.update();
+
+ 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();
+ });
+
+ 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);
+ }
+ }
+ });
+
+ UI.domObserve(this.element, function(e) {
+ if ($this.container.children(':not([data-slideshow-slide])').not('.uk-slideshow-ghost').length) {
+ $this.update(true);
+ }
+ });
+ },
+
+ update: function(resize) {
+
+ var $this = this, canvas, processed = 0;
+
+ this.slides = this.container.children();
+ this.slidesCount = this.slides.length;
+
+ if (!this.slides.eq(this.current).length) {
+ this.current = 0;
+ }
+
this.slides.each(function(index) {
- var slide = UI.$(this),
- media = slide.children('img,video,iframe').eq(0);
+ var slide = UI.$(this);
+ if (slide.data('processed')) {
+ return;
+ }
+
+ var media = slide.children('img,video,iframe').eq(0), type = 'html';
+
slide.data('media', media);
slide.data('sizer', media);
if (media.length) {
var placeholder;
+ type = media[0].nodeName.toLowerCase();
+
switch(media[0].nodeName) {
case 'IMG':
var cover = UI.$('<div class="uk-cover-background uk-position-cover"></div>').css({'background-image':'url('+ media.attr('src') + ')'});
@@ -178,90 +271,33 @@
}
if ($this.hasKenBurns(slide)) {
slide.data('cover').css({
- '-webkit-animation-duration': kbanimduration,
- 'animation-duration': kbanimduration
+ '-webkit-animation-duration': $this.kbanimduration,
+ 'animation-duration': $this.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();
+ slide.data('processed', ++processed);
+ slide.attr('data-slideshow-slide', type);
});
- // 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');
+ if (processed) {
- UI.$win.on("resize load", UI.Utils.debounce(function() {
- $this.resize();
+ this.triggers = this.find('[data-uk-slideshow-item]');
- 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();
+ // Set start slide
+ this.slides.attr('aria-hidden', 'true').removeClass('uk-active').eq(this.current).addClass('uk-active').attr('aria-hidden', 'false');
+ this.triggers.filter('[data-uk-slideshow-item="'+this.current+'"]').addClass('uk-active');
}
- if (this.options.videoautoplay && this.slides.eq(this.current).data('media')) {
- this.playmedia(this.slides.eq(this.current).data('media'));
+ if (resize && processed) {
+ this.resize();
}
-
- 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;
@@ -302,12 +338,12 @@
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');
+ 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)');
@@ -442,12 +478,12 @@
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');
+ current.css('opacity', 0).removeClass(dir == -1 ? 'uk-slideshow-scroll-backward-out' : 'uk-slideshow-scroll-forward-out');
+ next.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');
@@ -464,12 +500,12 @@
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');
+ current.css('opacity', 0).removeClass(dir === -1 ? 'uk-slideshow-swipe-backward-out' : 'uk-slideshow-swipe-forward-out');
+ next.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');
@@ -488,12 +524,11 @@
next.css('opacity', 1);
current.one(UI.support.animation.end, function() {
- current.removeClass('uk-slideshow-scale-out');
- next.css('opacity', '');
+ current.css('opacity', 0).removeClass('uk-slideshow-scale-out');
d.resolve();
}.bind(this));
current.addClass('uk-slideshow-scale-out');
@@ -519,11 +554,10 @@
}).addClass('uk-slideshow-fade-in');
}
current.one(UI.support.animation.end, function() {
- current.removeClass('uk-slideshow-fade-out');
- next.css('opacity', '');
+ current.css('opacity', 0).removeClass('uk-slideshow-fade-out');
d.resolve();
}.bind(this));
current.addClass('uk-slideshow-fade-out');