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/core/switcher.js | 307 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 307 insertions(+) create mode 100755 js/core/switcher.js (limited to 'js/core/switcher.js') diff --git a/js/core/switcher.js b/js/core/switcher.js new file mode 100755 index 0000000..793eb3c --- /dev/null +++ b/js/core/switcher.js @@ -0,0 +1,307 @@ +/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ +(function(UI) { + + "use strict"; + + var Animations; + + UI.component('switcher', { + + defaults: { + connect : false, + toggle : ">*", + active : 0, + animation : false, + duration : 200, + swiping : true + }, + + animating: false, + + boot: function() { + + // init code + UI.ready(function(context) { + + UI.$("[data-uk-switcher]", context).each(function() { + var switcher = UI.$(this); + + if (!switcher.data("switcher")) { + var obj = UI.switcher(switcher, UI.Utils.options(switcher.attr("data-uk-switcher"))); + } + }); + }); + }, + + init: function() { + + var $this = this; + + this.on("click.uk.switcher", this.options.toggle, function(e) { + e.preventDefault(); + $this.show(this); + }); + + if (this.options.connect) { + + this.connect = UI.$(this.options.connect); + + this.connect.children().removeClass("uk-active"); + + // delegate switch commands within container content + if (this.connect.length) { + + // Init ARIA for connect + this.connect.children().attr('aria-hidden', 'true'); + + this.connect.on("click", '[data-uk-switcher-item]', function(e) { + + e.preventDefault(); + + var item = UI.$(this).attr('data-uk-switcher-item'); + + if ($this.index == item) return; + + switch(item) { + case 'next': + case 'previous': + $this.show($this.index + (item=='next' ? 1:-1)); + break; + default: + $this.show(parseInt(item, 10)); + } + }); + + if (this.options.swiping) { + + this.connect.on('swipeRight swipeLeft', function(e) { + e.preventDefault(); + if(!window.getSelection().toString()) { + $this.show($this.index + (e.type == 'swipeLeft' ? 1 : -1)); + } + }); + } + } + + var toggles = this.find(this.options.toggle), + active = toggles.filter(".uk-active"); + + if (active.length) { + this.show(active, false); + } else { + + if (this.options.active===false) return; + + active = toggles.eq(this.options.active); + this.show(active.length ? active : toggles.eq(0), false); + } + + // Init ARIA for toggles + toggles.not(active).attr('aria-expanded', 'false'); + active.attr('aria-expanded', 'true'); + } + + }, + + show: function(tab, animate) { + + if (this.animating) { + return; + } + + if (isNaN(tab)) { + tab = UI.$(tab); + } else { + + var toggles = this.find(this.options.toggle); + + tab = tab < 0 ? toggles.length-1 : tab; + tab = toggles.eq(toggles[tab] ? tab : 0); + } + + var $this = this, + toggles = this.find(this.options.toggle), + active = UI.$(tab), + animation = Animations[this.options.animation] || function(current, next) { + + if (!$this.options.animation) { + return Animations.none.apply($this); + } + + var anim = $this.options.animation.split(','); + + if (anim.length == 1) { + anim[1] = anim[0]; + } + + anim[0] = anim[0].trim(); + anim[1] = anim[1].trim(); + + return coreAnimation.apply($this, [anim, current, next]); + }; + + if (animate===false || !UI.support.animation) { + animation = Animations.none; + } + + if (active.hasClass("uk-disabled")) return; + + // Update ARIA for Toggles + toggles.attr('aria-expanded', 'false'); + active.attr('aria-expanded', 'true'); + + toggles.filter(".uk-active").removeClass("uk-active"); + active.addClass("uk-active"); + + if (this.options.connect && this.connect.length) { + + this.index = this.find(this.options.toggle).index(active); + + if (this.index == -1 ) { + this.index = 0; + } + + this.connect.each(function() { + + var container = UI.$(this), + children = UI.$(container.children()), + current = UI.$(children.filter('.uk-active')), + next = UI.$(children.eq($this.index)); + + $this.animating = true; + + animation.apply($this, [current, next]).then(function(){ + + current.removeClass("uk-active"); + next.addClass("uk-active"); + + // Update ARIA for connect + current.attr('aria-hidden', 'true'); + next.attr('aria-hidden', 'false'); + + UI.Utils.checkDisplay(next, true); + + $this.animating = false; + + }); + }); + } + + this.trigger("show.uk.switcher", [active]); + } + }); + + Animations = { + + 'none': function() { + var d = UI.$.Deferred(); + d.resolve(); + return d.promise(); + }, + + 'fade': function(current, next) { + return coreAnimation.apply(this, ['uk-animation-fade', current, next]); + }, + + 'slide-bottom': function(current, next) { + return coreAnimation.apply(this, ['uk-animation-slide-bottom', current, next]); + }, + + 'slide-top': function(current, next) { + return coreAnimation.apply(this, ['uk-animation-slide-top', current, next]); + }, + + 'slide-vertical': function(current, next, dir) { + + var anim = ['uk-animation-slide-top', 'uk-animation-slide-bottom']; + + if (current && current.index() > next.index()) { + anim.reverse(); + } + + return coreAnimation.apply(this, [anim, current, next]); + }, + + 'slide-left': function(current, next) { + return coreAnimation.apply(this, ['uk-animation-slide-left', current, next]); + }, + + 'slide-right': function(current, next) { + return coreAnimation.apply(this, ['uk-animation-slide-right', current, next]); + }, + + 'slide-horizontal': function(current, next, dir) { + + var anim = ['uk-animation-slide-right', 'uk-animation-slide-left']; + + if (current && current.index() > next.index()) { + anim.reverse(); + } + + return coreAnimation.apply(this, [anim, current, next]); + }, + + 'scale': function(current, next) { + return coreAnimation.apply(this, ['uk-animation-scale-up', current, next]); + } + }; + + UI.switcher.animations = Animations; + + + // helpers + + function coreAnimation(cls, current, next) { + + var d = UI.$.Deferred(), clsIn = cls, clsOut = cls, release; + + if (next[0]===current[0]) { + d.resolve(); + return d.promise(); + } + + if (typeof(cls) == 'object') { + clsIn = cls[0]; + clsOut = cls[1] || cls[0]; + } + + UI.$body.css('overflow-x', 'hidden'); // fix scroll jumping in iOS + + release = function() { + + if (current) current.hide().removeClass('uk-active '+clsOut+' uk-animation-reverse'); + + next.addClass(clsIn).one(UI.support.animation.end, function() { + + setTimeout(function () { + next.removeClass(''+clsIn+'').css({opacity:'', display:''}); + }, 0); + + d.resolve(); + + UI.$body.css('overflow-x', ''); + + if (current) current.css({opacity:'', display:''}); + + }.bind(this)).show(); + }; + + next.css('animation-duration', this.options.duration+'ms'); + + if (current && current.length) { + + current.css('animation-duration', this.options.duration+'ms'); + + current.css('display', 'none').addClass(clsOut+' uk-animation-reverse').one(UI.support.animation.end, function() { + release(); + }.bind(this)).css('display', ''); + + } else { + next.addClass('uk-active'); + release(); + } + + return d.promise(); + } + +})(UIkit); -- cgit v1.2.3