173 lines
5.0 KiB
JavaScript
173 lines
5.0 KiB
JavaScript
|
/*! UIkit 2.21.0 | 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.uikit.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);
|
||
|
|
|
||
|
|
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')).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('<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]);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
// 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;
|
||
|
|
});
|