uikit2-rails 0.1.9 → 0.1.10

data/vendor/assets/javascripts/uikit/components/slideshow-fx.js

@@ -1,4 +1,4 @@
-/*! 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;
@@ -7,8 +7,8 @@
         component = addon(UIkit);
     }
 
-    if (typeof define == "function" && define.amd) {
-        define("uikit-slideshow-fx", ["uikit"], function() {
+    if (typeof define == 'function' && define.amd) {
+        define('uikit-slideshow-fx', ['uikit'], function() {
             return component || addon(UIkit);
         });
     }
@@ -20,7 +20,7 @@
     var Animations = UI.slideshow.animations;
 
     UI.$.extend(UI.slideshow.animations, {
-        'slice': function(current, next, dir, fromfx) {
+        slice: function(current, next, dir, fromfx) {
 
             if (!current.data('cover')) {
                 return Animations.fade.apply(this, arguments);
@@ -30,7 +30,7 @@
 
             var sliceWidth = Math.ceil(this.element.width() / this.options.slices),
                 bgimage    = next.data('cover').css('background-image'),
-                ghost      = UI.$('<li></li>').css({
+                ghost      = UI.$('<li class="uk-slideshow-ghost"></li>').css({
                     top    : 0,
                     left   : 0,
                     width  : this.container.width(),
@@ -80,19 +80,18 @@
             this.container.append(ghost);
 
             ghost.children().last().on(UI.support.transition.end, function() {
-                ghost.remove();
-                d.resolve();
+
+                setTimeout(function() {
+                    ghost.remove();
+                    d.resolve();
+                }, 0);
             });
 
             ghost.width();
 
             ghost.children().each(function() {
-                var bar = UI.$(this);
-
-                bar.css({
-                    'clip': bar.data('clip'),
-                    'opacity': 1
-                });
+                bar = UI.$(this);
+                bar.css({ clip: bar.data('clip'), opacity: 1 });
             });
 
             return d.promise();
@@ -110,7 +109,7 @@
             return Animations.slice.apply(this, [current, next, dir, 'slice-up-down']);
         },
 
-        'fold': function(current, next, dir) {
+        fold: function(current, next, dir) {
 
             if (!next.data('cover')) {
                 return Animations.fade.apply(this, arguments);
@@ -120,7 +119,7 @@
 
             var sliceWidth = Math.ceil(this.element.width() / this.options.slices),
                 bgimage    = next.data('cover').css('background-image'),
-                ghost      = UI.$('<li></li>').css({
+                ghost      = UI.$('<li class="uk-slideshow-ghost"></li>').css({
                     width  : next.width(),
                     height : next.height(),
                     opacity: 1,
@@ -155,17 +154,19 @@
             ghost.width();
 
             ghost.children().first().on(UI.support.transition.end, function() {
-                ghost.remove();
-                d.resolve();
+                setTimeout(function() {
+                    ghost.remove();
+                    d.resolve();
+                }, 0);
             }).end().css({
-                'transform': 'scaleX(1)',
-                'opacity': 1
+                transform: 'scaleX(1)',
+                opacity: 1
             });
 
             return d.promise();
         },
 
-        'puzzle': function(current, next, dir) {
+        puzzle: function(current, next, dir) {
 
             if (!next.data('cover')) {
                 return Animations.fade.apply(this, arguments);
@@ -178,7 +179,7 @@
                 boxRows   = Math.round(next.height()/boxWidth),
                 boxHeight = Math.round(next.height()/boxRows)+1,
                 bgimage   = next.data('cover').css('background-image'),
-                ghost     = UI.$('<li></li>').css({
+                ghost     = UI.$('<li class="uk-slideshow-ghost"></li>').css({
                     width   : this.container.width(),
                     height  : this.container.height(),
                     opacity : 1,
@@ -228,18 +229,21 @@
                     '-webkit-transition': 'all '+$this.options.duration+'ms ease-in-out '+(50+i*25)+'ms'
                 });
             }).last().on(UI.support.transition.end, function() {
-                ghost.remove();
-                d.resolve();
+
+                setTimeout(function() {
+                    ghost.remove();
+                    d.resolve();
+                }, 0);
             });
 
             ghost.width();
 
-            boxes.css({'opacity': 1});
+            boxes.css({opacity: 1});
 
             return d.promise();
         },
 
-        'boxes': function(current, next, dir, fromfx) {
+        boxes: function(current, next, dir, fromfx) {
 
             if (!next.data('cover')) {
                 return Animations.fade.apply(this, arguments);
@@ -252,7 +256,7 @@
                 boxRows   = Math.round(next.height()/boxWidth),
                 boxHeight = Math.round(next.height()/boxRows)+1,
                 bgimage   = next.data('cover').css('background-image'),
-                ghost     = UI.$('<li></li>').css({
+                ghost     = UI.$('<li class="uk-slideshow-ghost"></li>').css({
                     width   : next.width(),
                     height  : next.height(),
                     opacity : 1,
@@ -332,8 +336,11 @@
             }
 
             boxes.last().on(UI.support.transition.end, function() {
-                ghost.remove();
-                d.resolve();
+
+                setTimeout(function() {
+                    ghost.remove();
+                    d.resolve();
+                }, 0);
             });
 
             ghost.width();

data/vendor/assets/javascripts/uikit/components/slideshow.js

@@ -1,4 +1,4 @@
-/*! 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;
@@ -7,8 +7,8 @@
         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);
         });
     }
@@ -22,9 +22,9 @@
     UI.component('slideshow', {
 
         defaults: {
-            animation          : "fade",
+            animation          : 'fade',
             duration           : 500,
-            height             : "auto",
+            height             : 'auto',
             start              : 0,
             autoplay           : false,
             autoplayInterval   : 7000,
@@ -56,8 +56,8 @@
 
                     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')));
                     }
                 });
             });
@@ -65,22 +65,20 @@
 
         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') {
@@ -88,10 +86,103 @@
                 }
             }
 
+            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);
@@ -100,6 +191,8 @@
 
                     var placeholder;
 
+                    type = media[0].nodeName.toLowerCase();
+
                     switch(media[0].nodeName) {
                         case 'IMG':
 
@@ -180,86 +273,29 @@
                 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;
@@ -304,8 +340,8 @@
                         $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;
@@ -444,8 +480,8 @@
 
             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));
@@ -466,8 +502,8 @@
 
             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));
@@ -490,8 +526,7 @@
 
             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));
@@ -521,8 +556,7 @@
 
             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));