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/tab.js | 167 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100755 js/core/tab.js (limited to 'js/core/tab.js') diff --git a/js/core/tab.js b/js/core/tab.js new file mode 100755 index 0000000..4784a6f --- /dev/null +++ b/js/core/tab.js @@ -0,0 +1,167 @@ +/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ +(function(UI) { + + "use strict"; + + UI.component('tab', { + + defaults: { + 'target' : '>li:not(.uk-tab-responsive, .uk-disabled)', + 'connect' : false, + 'active' : 0, + 'animation' : false, + 'duration' : 200, + 'swiping' : true + }, + + boot: function() { + + // init code + UI.ready(function(context) { + + UI.$("[data-uk-tab]", context).each(function() { + + var tab = UI.$(this); + + if (!tab.data("tab")) { + var obj = UI.tab(tab, UI.Utils.options(tab.attr("data-uk-tab"))); + } + }); + }); + }, + + init: function() { + + var $this = this; + + this.current = false; + + this.on("click.uk.tab", this.options.target, function(e) { + + e.preventDefault(); + + if ($this.switcher && $this.switcher.animating) { + return; + } + + var current = $this.find($this.options.target).not(this); + + current.removeClass("uk-active").blur(); + + $this.trigger("change.uk.tab", [UI.$(this).addClass("uk-active"), $this.current]); + + $this.current = UI.$(this); + + // Update ARIA + if (!$this.options.connect) { + current.attr('aria-expanded', 'false'); + UI.$(this).attr('aria-expanded', 'true'); + } + }); + + if (this.options.connect) { + this.connect = UI.$(this.options.connect); + } + + // init responsive tab + this.responsivetab = UI.$('
  • ').append('
    '); + + this.responsivetab.dropdown = this.responsivetab.find('.uk-dropdown'); + this.responsivetab.lst = this.responsivetab.dropdown.find('ul'); + this.responsivetab.caption = this.responsivetab.find('a:first'); + + if (this.element.hasClass("uk-tab-bottom")) this.responsivetab.dropdown.addClass("uk-dropdown-up"); + + // handle click + this.responsivetab.lst.on('click.uk.tab', 'a', function(e) { + + e.preventDefault(); + e.stopPropagation(); + + var link = UI.$(this); + + $this.element.children('li:not(.uk-tab-responsive)').eq(link.data('index')).trigger('click'); + }); + + this.on('show.uk.switcher change.uk.tab', function(e, tab) { + $this.responsivetab.caption.html(tab.text()); + }); + + this.element.append(this.responsivetab); + + // init UIkit components + if (this.options.connect) { + this.switcher = UI.switcher(this.element, { + 'toggle' : '>li:not(.uk-tab-responsive)', + 'connect' : this.options.connect, + 'active' : this.options.active, + 'animation' : this.options.animation, + 'duration' : this.options.duration, + 'swiping' : this.options.swiping + }); + } + + UI.dropdown(this.responsivetab, {"mode": "click", "preventflip": "y"}); + + // init + $this.trigger("change.uk.tab", [this.element.find(this.options.target).not('.uk-tab-responsive').filter('.uk-active')]); + + this.check(); + + UI.$win.on('resize orientationchange', UI.Utils.debounce(function(){ + if ($this.element.is(":visible")) $this.check(); + }, 100)); + + this.on('display.uk.check', function(){ + if ($this.element.is(":visible")) $this.check(); + }); + }, + + check: function() { + + var children = this.element.children('li:not(.uk-tab-responsive)').removeClass('uk-hidden'); + + if (!children.length) { + this.responsivetab.addClass('uk-hidden'); + return; + } + + var top = (children.eq(0).offset().top + Math.ceil(children.eq(0).height()/2)), + doresponsive = false, + item, link, clone; + + this.responsivetab.lst.empty(); + + children.each(function(){ + + if (UI.$(this).offset().top > top) { + doresponsive = true; + } + }); + + if (doresponsive) { + + for (var i = 0; i < children.length; i++) { + + item = UI.$(children.eq(i)); + link = item.find('a'); + + if (item.css('float') != 'none' && !item.attr('uk-dropdown')) { + + if (!item.hasClass('uk-disabled')) { + + clone = item[0].outerHTML.replace('