Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
META-INF.resources.primefaces.accordion.accordion.js Maven / Gradle / Ivy
/**
* PrimeFaces Accordion Panel Widget
*/
PrimeFaces.widget.AccordionPanel = PrimeFaces.widget.BaseWidget.extend({
init: function(cfg) {
this._super(cfg);
this.stateHolder = $(this.jqId + '_active');
this.headers = this.jq.children('.ui-accordion-header');
this.panels = this.jq.children('.ui-accordion-content');
this.headers.children('a').disableSelection();
this.onshowHandlers = this.onshowHandlers||{};
this.cfg.rtl = this.jq.hasClass('ui-accordion-rtl');
this.cfg.expandedIcon = 'ui-icon-triangle-1-s';
this.cfg.collapsedIcon = this.cfg.rtl ? 'ui-icon-triangle-1-w' : 'ui-icon-triangle-1-e';
this.initActive();
this.bindEvents();
if(this.cfg.dynamic && this.cfg.cache) {
this.markLoadedPanels();
}
},
initActive: function() {
if(this.cfg.multiple) {
var indexes = this.stateHolder.val().split(',');
for(var i = 0; i < indexes.length; i++) {
indexes[i] = parseInt(indexes[i]);
}
this.cfg.active = indexes;
}
else {
this.cfg.active = parseInt(this.stateHolder.val());
}
},
bindEvents: function() {
var $this = this;
this.headers.mouseover(function() {
var element = $(this);
if(!element.hasClass('ui-state-active')&&!element.hasClass('ui-state-disabled')) {
element.addClass('ui-state-hover');
}
}).mouseout(function() {
var element = $(this);
if(!element.hasClass('ui-state-active')&&!element.hasClass('ui-state-disabled')) {
element.removeClass('ui-state-hover');
}
}).click(function(e) {
var element = $(this);
if(!element.hasClass('ui-state-disabled')) {
var tabIndex = element.index() / 2;
if(element.hasClass('ui-state-active')) {
$this.unselect(tabIndex);
}
else {
$this.select(tabIndex);
}
}
e.preventDefault();
});
},
markLoadedPanels: function() {
if(this.cfg.multiple) {
for(var i = 0; i < this.cfg.active.length; i++) {
if(this.cfg.active[i] >= 0)
this.markAsLoaded(this.panels.eq(this.cfg.active[i]));
}
} else {
if(this.cfg.active >= 0)
this.markAsLoaded(this.panels.eq(this.cfg.active));
}
},
/**
* Activates a tab with given index
*/
select: function(index) {
var panel = this.panels.eq(index);
//Call user onTabChange callback
if(this.cfg.onTabChange) {
var result = this.cfg.onTabChange.call(this, panel);
if(result === false)
return false;
}
var shouldLoad = this.cfg.dynamic && !this.isLoaded(panel);
//update state
if(this.cfg.multiple)
this.addToSelection(index);
else
this.cfg.active = index;
this.saveState();
if(shouldLoad) {
this.loadDynamicTab(panel);
}
else {
this.show(panel);
if(this.hasBehavior('tabChange')) {
this.fireTabChangeEvent(panel);
}
}
return true;
},
/**
* Deactivates a tab with given index
*/
unselect: function(index) {
var panel = this.panels.eq(index),
header = panel.prev();
header.attr('aria-expanded', false).children('.ui-icon').removeClass(this.cfg.expandedIcon).addClass(this.cfg.collapsedIcon);
header.removeClass('ui-state-active ui-corner-top').addClass('ui-corner-all');
panel.attr('aria-hidden', true).slideUp();
this.removeFromSelection(index);
this.saveState();
if(this.hasBehavior('tabClose')) {
this.fireTabCloseEvent(panel);
}
},
show: function(panel) {
var _self = this;
//deactivate current
if(!this.cfg.multiple) {
var oldHeader = this.headers.filter('.ui-state-active');
oldHeader.children('.ui-icon').removeClass(this.cfg.expandedIcon).addClass(this.cfg.collapsedIcon);
oldHeader.attr('aria-expanded', false).removeClass('ui-state-active ui-corner-top').addClass('ui-corner-all').next().attr('aria-hidden', true).slideUp();
}
//activate selected
var newHeader = panel.prev();
newHeader.attr('aria-expanded', true).addClass('ui-state-active ui-corner-top').removeClass('ui-state-hover ui-corner-all')
.children('.ui-icon').removeClass(this.cfg.collapsedIcon).addClass(this.cfg.expandedIcon);
panel.attr('aria-hidden', false).slideDown('normal', function() {
_self.postTabShow(panel);
});
},
loadDynamicTab: function(panel) {
var $this = this,
options = {
source: this.id,
process: this.id,
update: this.id
};
options.onsuccess = function(responseXML) {
var xmlDoc = $(responseXML.documentElement),
updates = xmlDoc.find("update");
for(var i=0; i < updates.length; i++) {
var update = updates.eq(i),
id = update.attr('id'),
content = update.get(0).childNodes[0].nodeValue;
if(id === $this.id){
$(panel).html(content);
if($this.cfg.cache) {
$this.markAsLoaded(panel);
}
}
else {
PrimeFaces.ajax.AjaxUtils.updateElement.call(this, id, content);
}
}
PrimeFaces.ajax.AjaxUtils.handleResponse.call(this, xmlDoc);
return true;
};
options.oncomplete = function() {
$this.show(panel);
};
options.params = [
{name: this.id + '_contentLoad', value: true},
{name: this.id + '_newTab', value: panel.attr('id')},
{name: this.id + '_tabindex', value: parseInt(panel.index() / 2)}
];
if(this.hasBehavior('tabChange')) {
var tabChangeBehavior = this.cfg.behaviors['tabChange'];
tabChangeBehavior.call(this, null, options);
}
else {
PrimeFaces.ajax.AjaxRequest(options);
}
},
fireTabChangeEvent : function(panel) {
var tabChangeBehavior = this.cfg.behaviors['tabChange'],
ext = {
params: [
{name: this.id + '_newTab', value: panel.attr('id')},
{name: this.id + '_tabindex', value: parseInt(panel.index() / 2)}
]
};
tabChangeBehavior.call(this, null, ext);
},
fireTabCloseEvent : function(panel) {
var tabCloseBehavior = this.cfg.behaviors['tabClose'],
ext = {
params: [
{name: this.id + '_tabId', value: panel.attr('id')},
{name: this.id + '_tabindex', value: parseInt(panel.index() / 2)}
]
};
tabCloseBehavior.call(this, null, ext);
},
markAsLoaded: function(panel) {
panel.data('loaded', true);
},
isLoaded: function(panel) {
return panel.data('loaded') == true;
},
hasBehavior: function(event) {
if(this.cfg.behaviors) {
return this.cfg.behaviors[event] != undefined;
}
return false;
},
addToSelection: function(nodeId) {
this.cfg.active.push(nodeId);
},
removeFromSelection: function(nodeId) {
this.cfg.active = $.grep(this.cfg.active, function(r) {
return r != nodeId;
});
},
saveState: function() {
if(this.cfg.multiple)
this.stateHolder.val(this.cfg.active.join(','));
else
this.stateHolder.val(this.cfg.active);
},
addOnshowHandler: function(id, fn) {
this.onshowHandlers[id] = fn;
},
postTabShow: function(newPanel) {
//Call user onTabShow callback
if(this.cfg.onTabShow) {
this.cfg.onTabShow.call(this, newPanel);
}
//execute onshowHandlers and remove successful ones
for(var id in this.onshowHandlers) {
if(this.onshowHandlers.hasOwnProperty(id)) {
var fn = this.onshowHandlers[id];
if(fn.call()) {
delete this.onshowHandlers[id];
}
}
}
}
});
