From c94fb32c7a3c28b18a27460aa2447eeec1fac1de Mon Sep 17 00:00:00 2001 From: Pascal Szewczyk Date: Mon, 18 Jul 2016 23:23:54 +0200 Subject: uikit added --- js/components/slider.js | 540 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 540 insertions(+) create mode 100755 js/components/slider.js (limited to 'js/components/slider.js') diff --git a/js/components/slider.js b/js/components/slider.js new file mode 100755 index 0000000..f89b588 --- /dev/null +++ b/js/components/slider.js @@ -0,0 +1,540 @@ +/*! 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-slider", ["uikit"], function(){ + return component || addon(UIkit); + }); + } + +})(function(UI){ + + "use strict"; + + var dragging, delayIdle, anchor, dragged, store = {}; + + UI.component('slider', { + + defaults: { + center : false, + threshold : 10, + infinite : true, + autoplay : false, + autoplayInterval : 7000, + pauseOnHover : true, + activecls : 'uk-active' + }, + + boot: function() { + + // init code + UI.ready(function(context) { + + setTimeout(function(){ + + UI.$('[data-uk-slider]', context).each(function(){ + + var ele = UI.$(this); + + if (!ele.data('slider')) { + UI.slider(ele, UI.Utils.options(ele.attr('data-uk-slider'))); + } + }); + + }, 0); + }); + }, + + init: function() { + + var $this = this; + + this.container = this.element.find('.uk-slider'); + this.focus = 0; + + UI.$win.on('resize load', UI.Utils.debounce(function() { + $this.resize(true); + }, 100)); + + this.on('click.uk.slider', '[data-uk-slider-item]', function(e) { + + e.preventDefault(); + + var item = UI.$(this).attr('data-uk-slider-item'); + + if ($this.focus == item) return; + + // stop autoplay + $this.stop(); + + switch(item) { + case 'next': + case 'previous': + $this[item=='next' ? 'next':'previous'](); + break; + default: + $this.updateFocus(parseInt(item, 10)); + } + }); + + this.container.on({ + + 'touchstart mousedown': function(evt) { + + if (evt.originalEvent && evt.originalEvent.touches) { + evt = evt.originalEvent.touches[0]; + } + + // ignore right click button + if (evt.button && evt.button==2 || !$this.active) { + return; + } + + // stop autoplay + $this.stop(); + + anchor = UI.$(evt.target).is('a') ? UI.$(evt.target) : UI.$(evt.target).parents('a:first'); + dragged = false; + + if (anchor.length) { + + anchor.one('click', function(e){ + if (dragged) e.preventDefault(); + }); + } + + delayIdle = function(e) { + + dragged = true; + dragging = $this; + store = { + touchx : parseInt(e.pageX, 10), + dir : 1, + focus : $this.focus, + base : $this.options.center ? 'center':'area' + }; + + if (e.originalEvent && e.originalEvent.touches) { + e = e.originalEvent.touches[0]; + } + + dragging.element.data({ + 'pointer-start': {x: parseInt(e.pageX, 10), y: parseInt(e.pageY, 10)}, + 'pointer-pos-start': $this.pos + }); + + $this.container.addClass('uk-drag'); + + delayIdle = false; + }; + + delayIdle.x = parseInt(evt.pageX, 10); + delayIdle.threshold = $this.options.threshold; + + }, + + mouseenter: function() { if ($this.options.pauseOnHover) $this.hovering = true; }, + mouseleave: function() { $this.hovering = false; } + }); + + this.resize(true); + + this.on('display.uk.check', function(){ + if ($this.element.is(":visible")) { + $this.resize(true); + } + }); + + // prevent dragging links + images + this.element.find('a,img').attr('draggable', 'false'); + + // Set autoplay + if (this.options.autoplay) { + this.start(); + } + + }, + + resize: function(focus) { + + var $this = this, pos = 0, maxheight = 0, item, width, cwidth, size; + + this.items = this.container.children().filter(':visible'); + this.vp = this.element[0].getBoundingClientRect().width; + + this.container.css({'min-width': '', 'min-height': ''}); + + this.items.each(function(idx){ + + item = UI.$(this); + size = item.css({'left': '', 'width':''})[0].getBoundingClientRect(); + width = size.width; + cwidth = item.width(); + maxheight = Math.max(maxheight, size.height); + + item.css({'left': pos, 'width':width}).data({'idx':idx, 'left': pos, 'width': width, 'cwidth':cwidth, 'area': (pos+width), 'center':(pos - ($this.vp/2 - cwidth/2))}); + + pos += width; + }); + + this.container.css({'min-width': pos, 'min-height': maxheight}); + + if (this.options.infinite && (pos <= (2*this.vp) || this.items.length < 5) && !this.itemsResized) { + + // fill with cloned items + this.container.children().each(function(idx){ + $this.container.append($this.items.eq(idx).clone(true).attr('id', '')); + }).each(function(idx){ + $this.container.append($this.items.eq(idx).clone(true).attr('id', '')); + }); + + this.itemsResized = true; + + return this.resize(); + } + + this.cw = pos; + this.pos = 0; + this.active = pos >= this.vp; + + this.container.css({ + '-ms-transform': '', + '-webkit-transform': '', + 'transform': '' + }); + + if (focus) this.updateFocus(this.focus); + }, + + updatePos: function(pos) { + this.pos = pos; + this.container.css({ + '-ms-transform': 'translateX('+pos+'px)', + '-webkit-transform': 'translateX('+pos+'px)', + 'transform': 'translateX('+pos+'px)' + }); + }, + + updateFocus: function(idx, dir) { + + if (!this.active) { + return; + } + + dir = dir || (idx > this.focus ? 1:-1); + + var item = this.items.eq(idx), area, i; + + if (this.options.infinite) { + this.infinite(idx, dir); + } + + if (this.options.center) { + + this.updatePos(item.data('center')*-1); + + this.items.filter('.'+this.options.activecls).removeClass(this.options.activecls); + item.addClass(this.options.activecls); + + } else { + + if (this.options.infinite) { + + this.updatePos(item.data('left')*-1); + + } else { + + area = 0; + + for (i=idx;i this.vp) { + + this.updatePos(item.data('left')*-1); + + } else { + + if (dir == 1) { + + area = 0; + + for (i=this.items.length-1;i>=0;i--) { + + area += this.items.eq(i).data('width'); + + if (area == this.vp) { + idx = i; + break; + } + + if (area > this.vp) { + idx = (i < this.items.length-1) ? i+1 : i; + break; + } + } + + if (area > this.vp) { + this.updatePos((this.container.width() - this.vp) * -1); + } else { + this.updatePos(this.items.eq(idx).data('left')*-1); + } + } + } + } + } + + // mark elements + var left = this.items.eq(idx).data('left'); + + this.items.removeClass('uk-slide-before uk-slide-after').each(function(i){ + if (i!==idx) { + UI.$(this).addClass(UI.$(this).data('left') < left ? 'uk-slide-before':'uk-slide-after'); + } + }); + + this.focus = idx; + + this.trigger('focusitem.uk.slider', [idx,this.items.eq(idx),this]); + }, + + next: function() { + + var focus = this.items[this.focus + 1] ? (this.focus + 1) : (this.options.infinite ? 0:this.focus); + + this.updateFocus(focus, 1); + }, + + previous: function() { + + var focus = this.items[this.focus - 1] ? (this.focus - 1) : (this.options.infinite ? (this.items[this.focus - 1] ? this.items-1:this.items.length-1):this.focus); + + this.updateFocus(focus, -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); + }, + + infinite: function(baseidx, direction) { + + var $this = this, item = this.items.eq(baseidx), i, z = baseidx, move = [], area = 0; + + if (direction == 1) { + + + for (i=0;i this.vp) { + break; + } + + z = z+1 == this.items.length ? 0:z+1; + } + + if (move.length) { + + move.forEach(function(itm){ + + var left = item.data('area'); + + itm.css({'left': left}).data({ + 'left' : left, + 'area' : (left+itm.data('width')), + 'center': (left - ($this.vp/2 - itm.data('cwidth')/2)) + }); + + item = itm; + }); + } + + + } else { + + for (i=this.items.length-1;i >-1 ;i--) { + + area += this.items.eq(z).data('width'); + + if (z != baseidx) { + move.push(this.items.eq(z)); + } + + if (area > this.vp) { + break; + } + + z = z-1 == -1 ? this.items.length-1:z-1; + } + + if (move.length) { + + move.forEach(function(itm){ + + var left = item.data('left') - itm.data('width'); + + itm.css({'left': left}).data({ + 'left' : left, + 'area' : (left+itm.data('width')), + 'center': (left - ($this.vp/2 - itm.data('cwidth')/2)) + }); + + item = itm; + }); + } + } + } + }); + + // handle dragging + UI.$doc.on('mousemove.uk.slider touchmove.uk.slider', function(e) { + + if (e.originalEvent && e.originalEvent.touches) { + e = e.originalEvent.touches[0]; + } + + if (delayIdle && Math.abs(e.pageX - delayIdle.x) > delayIdle.threshold) { + + if (!window.getSelection().toString()) { + delayIdle(e); + } else { + dragging = delayIdle = false; + } + } + + if (!dragging) { + return; + } + + var x, xDiff, pos, dir, focus, item, next, diff, i, z, itm; + + if (e.clientX || e.clientY) { + x = e.clientX; + } else if (e.pageX || e.pageY) { + x = e.pageX - document.body.scrollLeft - document.documentElement.scrollLeft; + } + + focus = store.focus; + xDiff = x - dragging.element.data('pointer-start').x; + pos = dragging.element.data('pointer-pos-start') + xDiff; + dir = x > dragging.element.data('pointer-start').x ? -1:1; + item = dragging.items.eq(store.focus); + + if (dir == 1) { + + diff = item.data('left') + Math.abs(xDiff); + + for (i=0,z=store.focus;i diff) { + focus = z; + break; + } + + z = z+1 == dragging.items.length ? 0:z+1; + } + + } else { + + diff = item.data('left') - Math.abs(xDiff); + + for (i=0,z=store.focus;i store.diff) { + focus = z; + break; + } + + z = z+1 == dragging.items.length ? 0:z+1; + } + + } else { + + for (i=0,z=store.focus;i