mirror of
https://github.com/VTECRM/vtenext.git
synced 2026-02-26 16:18:47 +00:00
184 lines
5.6 KiB
JavaScript
184 lines
5.6 KiB
JavaScript
/*************************************
|
|
* SPDX-FileCopyrightText: 2009-2020 Vtenext S.r.l. <info@vtenext.com>
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
************************************/
|
|
$.fn.collapsible = function(options, methodParam) {
|
|
var defaults = {
|
|
accordion: undefined,
|
|
onOpen: undefined,
|
|
onClose: undefined
|
|
};
|
|
|
|
var methodName = options;
|
|
options = $.extend(defaults, options);
|
|
|
|
|
|
return this.each(function() {
|
|
|
|
var $this = $(this);
|
|
|
|
var $panel_headers = $(this).find('> li > .collapsible-header');
|
|
|
|
var collapsible_type = $this.data("collapsible");
|
|
|
|
****************/
|
|
|
|
// Accordion Open
|
|
function accordionOpen(object) {
|
|
$panel_headers = $this.find('> li > .collapsible-header');
|
|
if (object.hasClass('active')) {
|
|
object.parent().addClass('active');
|
|
}
|
|
else {
|
|
object.parent().removeClass('active');
|
|
}
|
|
if (object.parent().hasClass('active')){
|
|
object.siblings('.collapsible-body').stop(true,false).slideDown({ duration: 350, easing: "easeOutQuart", queue: false, complete: function() {$(this).css('height', '');}});
|
|
}
|
|
else{
|
|
object.siblings('.collapsible-body').stop(true,false).slideUp({ duration: 350, easing: "easeOutQuart", queue: false, complete: function() {$(this).css('height', '');}});
|
|
}
|
|
|
|
$panel_headers.not(object).removeClass('active').parent().removeClass('active');
|
|
|
|
// Close previously open accordion elements.
|
|
$panel_headers.not(object).parent().children('.collapsible-body').stop(true,false).each(function() {
|
|
if ($(this).is(':visible')) {
|
|
$(this).slideUp({
|
|
duration: 350,
|
|
easing: "easeOutQuart",
|
|
queue: false,
|
|
complete:
|
|
function() {
|
|
$(this).css('height', '');
|
|
execCallbacks($(this).siblings('.collapsible-header'));
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Expandable Open
|
|
function expandableOpen(object) {
|
|
if (object.hasClass('active')) {
|
|
object.parent().addClass('active');
|
|
}
|
|
else {
|
|
object.parent().removeClass('active');
|
|
}
|
|
if (object.parent().hasClass('active')){
|
|
object.siblings('.collapsible-body').stop(true,false).slideDown({ duration: 350, easing: "easeOutQuart", queue: false, complete: function() {$(this).css('height', '');}});
|
|
}
|
|
else {
|
|
object.siblings('.collapsible-body').stop(true,false).slideUp({ duration: 350, easing: "easeOutQuart", queue: false, complete: function() {$(this).css('height', '');}});
|
|
}
|
|
}
|
|
|
|
// Open collapsible. object: .collapsible-header
|
|
function collapsibleOpen(object, noToggle) {
|
|
if (!noToggle) {
|
|
object.toggleClass('active');
|
|
}
|
|
|
|
if (options.accordion || collapsible_type === "accordion" || collapsible_type === undefined) { // Handle Accordion
|
|
accordionOpen(object);
|
|
} else { // Handle Expandables
|
|
expandableOpen(object);
|
|
}
|
|
|
|
execCallbacks(object);
|
|
}
|
|
|
|
// Handle callbacks
|
|
function execCallbacks(object) {
|
|
if (object.hasClass('active')) {
|
|
if (typeof(options.onOpen) === "function") {
|
|
options.onOpen.call(this, object.parent());
|
|
}
|
|
} else {
|
|
if (typeof(options.onClose) === "function") {
|
|
options.onClose.call(this, object.parent());
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Check if object is children of panel header
|
|
* @param {Object} object Jquery object
|
|
* @return {Boolean} true if it is children
|
|
*/
|
|
function isChildrenOfPanelHeader(object) {
|
|
|
|
var panelHeader = getPanelHeader(object);
|
|
|
|
return panelHeader.length > 0;
|
|
}
|
|
|
|
/**
|
|
* Get panel header from a children element
|
|
* @param {Object} object Jquery object
|
|
* @return {Object} panel header object
|
|
*/
|
|
function getPanelHeader(object) {
|
|
|
|
return object.closest('li > .collapsible-header');
|
|
}
|
|
|
|
|
|
// Turn off any existing event handlers
|
|
function removeEventHandlers() {
|
|
$this.off('click.collapse', '> li > .collapsible-header');
|
|
}
|
|
|
|
/***** End Helper Functions *****/
|
|
|
|
|
|
// Methods
|
|
if (methodName === 'destroy') {
|
|
removeEventHandlers();
|
|
return;
|
|
} else if (methodParam >= 0 &&
|
|
methodParam < $panel_headers.length) {
|
|
var $curr_header = $panel_headers.eq(methodParam);
|
|
if ($curr_header.length &&
|
|
(methodName === 'open' ||
|
|
(methodName === 'close' &&
|
|
$curr_header.hasClass('active')))) {
|
|
collapsibleOpen($curr_header);
|
|
}
|
|
return;
|
|
}
|
|
|
|
|
|
removeEventHandlers();
|
|
|
|
|
|
// Add click handler to only direct collapsible header children
|
|
$this.on('click.collapse', '> li > .collapsible-header', function(e) {
|
|
var element = $(e.target);
|
|
|
|
if (isChildrenOfPanelHeader(element)) {
|
|
element = getPanelHeader(element);
|
|
}
|
|
|
|
collapsibleOpen(element);
|
|
});
|
|
|
|
|
|
// Open first active
|
|
if (options.accordion || collapsible_type === "accordion" || collapsible_type === undefined) { // Handle Accordion
|
|
collapsibleOpen($panel_headers.filter('.active').first(), true);
|
|
|
|
} else { // Handle Expandables
|
|
$panel_headers.filter('.active').each(function() {
|
|
collapsibleOpen($(this), true);
|
|
});
|
|
}
|
|
|
|
});
|
|
};
|
|
|
|
$(document).ready(function(){
|
|
$('.collapsible').collapsible();
|
|
});
|
|
}( jQuery )); |