From 2653f6a943a6ed74e2b72246ba8211c5fb699a7f Mon Sep 17 00:00:00 2001 From: erdgeist Date: Sun, 7 Aug 2016 02:17:47 +0200 Subject: restructured ;) --- js/components/slideshow.js | 560 --------------------------------------------- 1 file changed, 560 deletions(-) delete mode 100755 js/components/slideshow.js (limited to 'js/components/slideshow.js') diff --git a/js/components/slideshow.js b/js/components/slideshow.js deleted file mode 100755 index 88cd4e7..0000000 --- a/js/components/slideshow.js +++ /dev/null @@ -1,560 +0,0 @@ -/*! UIkit 2.26.4 | 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:first')); - 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.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'); - 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.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'); - 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.css('opacity', 0).removeClass('uk-slideshow-scale-out'); - 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.css('opacity', 0).removeClass('uk-slideshow-fade-out'); - 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); - -}); -- cgit v1.2.3