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/accordion.js | 174 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 174 insertions(+) create mode 100755 js/components/accordion.js (limited to 'js/components/accordion.js') diff --git a/js/components/accordion.js b/js/components/accordion.js new file mode 100755 index 0000000..2401780 --- /dev/null +++ b/js/components/accordion.js @@ -0,0 +1,174 @@ +/*! 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-accordion", ["uikit"], function(){ + return component || addon(UIkit); + }); + } +})(function(UI){ + + "use strict"; + + UI.component('accordion', { + + defaults: { + showfirst : true, + collapse : true, + animate : true, + easing : 'swing', + duration : 300, + toggle : '.uk-accordion-title', + containers : '.uk-accordion-content', + clsactive : 'uk-active' + }, + + boot: function() { + + // init code + UI.ready(function(context) { + + setTimeout(function(){ + + UI.$("[data-uk-accordion]", context).each(function(){ + + var ele = UI.$(this); + + if(!ele.data("accordion")) { + UI.accordion(ele, UI.Utils.options(ele.attr('data-uk-accordion'))); + } + }); + + }, 0); + }); + }, + + init: function() { + + var $this = this; + + this.element.on('click.uk.accordion', this.options.toggle, function(e) { + + e.preventDefault(); + + $this.toggleItem(UI.$(this).data('wrapper'), $this.options.animate, $this.options.collapse); + }); + + this.update(); + + if (this.options.showfirst) { + this.toggleItem(this.toggle.eq(0).data('wrapper'), false, false); + } + }, + + toggleItem: function(wrapper, animated, collapse) { + + var $this = this; + + wrapper.data('toggle').toggleClass(this.options.clsactive); + wrapper.data('content').toggleClass(this.options.clsactive); + + var active = wrapper.data('toggle').hasClass(this.options.clsactive); + + if (collapse) { + this.toggle.not(wrapper.data('toggle')).removeClass(this.options.clsactive); + this.content.not(wrapper.data('content')).removeClass(this.options.clsactive) + .parent().stop().css('overflow', 'hidden').animate({ height: 0 }, {easing: this.options.easing, duration: animated ? this.options.duration : 0}).attr('aria-expanded', 'false'); + } + + wrapper.stop().css('overflow', 'hidden'); + + if (animated) { + + wrapper.animate({ height: active ? getHeight(wrapper.data('content')) : 0 }, {easing: this.options.easing, duration: this.options.duration, complete: function() { + + if (active) { + wrapper.css({'overflow': '', 'height': 'auto'}); + UI.Utils.checkDisplay(wrapper.data('content')); + } + + $this.trigger('display.uk.check'); + }}); + + } else { + + wrapper.height(active ? 'auto' : 0); + + if (active) { + wrapper.css({'overflow': ''}); + UI.Utils.checkDisplay(wrapper.data('content')); + } + + this.trigger('display.uk.check'); + } + + // Update ARIA + wrapper.attr('aria-expanded', active); + + this.element.trigger('toggle.uk.accordion', [active, wrapper.data('toggle'), wrapper.data('content')]); + }, + + update: function() { + + var $this = this, $content, $wrapper, $toggle; + + this.toggle = this.find(this.options.toggle); + this.content = this.find(this.options.containers); + + this.content.each(function(index) { + + $content = UI.$(this); + + if ($content.parent().data('wrapper')) { + $wrapper = $content.parent(); + } else { + $wrapper = UI.$(this).wrap('
').parent(); + + // Init ARIA + $wrapper.attr('aria-expanded', 'false'); + } + + $toggle = $this.toggle.eq(index); + + $wrapper.data('toggle', $toggle); + $wrapper.data('content', $content); + $toggle.data('wrapper', $wrapper); + $content.data('wrapper', $wrapper); + }); + + this.element.trigger('update.uk.accordion', [this]); + } + + }); + + // helper + + function getHeight(ele) { + + var $ele = UI.$(ele), height = "auto"; + + if ($ele.is(":visible")) { + height = $ele.outerHeight(); + } else { + + var tmp = { + position : $ele.css("position"), + visibility : $ele.css("visibility"), + display : $ele.css("display") + }; + + height = $ele.css({position: 'absolute', visibility: 'hidden', display: 'block'}).outerHeight(); + + $ele.css(tmp); // reset element + } + + return height; + } + + return UI.accordion; +}); -- cgit v1.2.3