Support-Groups/media/uikit-v2/js/components/accordion.js

181 lines
5.3 KiB
JavaScript
Raw Permalink Normal View History

2019-08-14 01:50:35 +00:00
/*! UIkit 2.27.5 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2016-03-06 00:50:22 +00:00
(function(addon) {
var component;
if (window.UIkit2) {
component = addon(UIkit2);
2016-03-06 00:50:22 +00:00
}
if (typeof define == 'function' && define.amd) {
define('uikit-accordion', ['uikit'], function(){
return component || addon(UIkit2);
2016-03-06 00:50:22 +00:00
});
}
})(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(){
2016-03-06 00:50:22 +00:00
var ele = UI.$(this);
if (!ele.data('accordion')) {
2016-03-06 00:50:22 +00:00
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) {
2016-03-06 00:50:22 +00:00
e.preventDefault();
$this.toggleItem(UI.$(this).data('wrapper'), $this.options.animate, $this.options.collapse);
});
this.update(true);
2016-03-06 00:50:22 +00:00
UI.domObserve(this.element, function(e) {
if ($this.element.children($this.options.containers).length) {
$this.update();
}
});
2016-03-06 00:50:22 +00:00
},
toggleItem: function(wrapper, animated, collapse) {
var $this = this;
wrapper.data('toggle').toggleClass(this.options.clsactive);
wrapper.data('content').toggleClass(this.options.clsactive);
2016-03-06 00:50:22 +00:00
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');
2016-03-06 00:50:22 +00:00
}
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(init) {
2016-03-06 00:50:22 +00:00
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('<div data-wrapper="true" style="overflow:hidden;height:0;position:relative;"></div>').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]);
if (init && this.options.showfirst) {
this.toggleItem(this.toggle.eq(0).data('wrapper'), false, false);
}
2016-03-06 00:50:22 +00:00
}
});
// 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')
2016-03-06 00:50:22 +00:00
};
height = $ele.css({position: 'absolute', visibility: 'hidden', display: 'block'}).outerHeight();
$ele.css(tmp); // reset element
}
return height;
}
return UI.accordion;
});