').children(':first');
this.panelFrame = this.panelDock.after('
').next(':first');
this.panelDock.attr('role', 'panelDock').css('float', o.collapseType=='slide-left'?'left':'right');
this.panelFrame.attr('role', 'panelFrame').css({'float':o.collapseType=='slide-left'?'left':'right', 'overflow':'hidden'});
}
if (o.collapsed)
this.panelDock.append(this.panelBox);
else
this.panelFrame.append(this.panelBox);
}
// panel collapsed - trigger action
if (o.collapsed)
self.toggle(0, true);
} else {
this.titleTextBox.css('cursor','default');
}
// making panel draggable if not accordion-like
if (!o.accordion && o.draggable && $.fn.draggable)
this._makeDraggable();
this.panelBox.show();
}
},
_cookie: function() {
var cookie = this.cookie || (this.cookie = this.options.cookie.name || 'ui-panel-'+this.options.id);
return $.cookie.apply(null, [cookie].concat($.makeArray(arguments)));
},
// ui.draggable config
_makeDraggable: function() {
this.panelBox.draggable({
containment: 'document',
handle: '.ui-panel-header',
cancel: '.ui-panel-content',
cursor: 'move'
});
this.contentBox.css('position','absolute');
},
_clickHandler: function(event, target){
var o = this.options;
if (o.disabled)
return false;
this.toggle(o.collapseSpeed);
return false;
},
// toggle panel state (fold/unfold)
toggle: function (collapseSpeed, innerCall){
var self = this,
o = this.options,
panelBox = this.panelBox,
contentBox = this.contentBox,
headerBox = this.headerBox,
titleTextBox = this.titleTextBox,
titleText = this.titleText,
ctrlBox = this.ctrlBox,
panelDock = this.panelDock,
ie = '';
// that's IE 6-8 for sure, use appropriate style for vertical text
if (!jQuery.support.leadingWhitespace)
ie="-ie";
// split toggle into 'fold' and 'unfold' actions and handle callbacks
if (contentBox.css('display')=='none')
this._trigger("unfold");
else
this._trigger("fold");
if (ctrlBox)
ctrlBox.toggle(0);
// various content sliding animations
if (o.collapseType=='default'){
if (collapseSpeed==0) {
if (contentBox.is(':visible')) {
headerBox.attr('class', o.headerClassClpsd);
}
else {
headerBox.attr('class', o.headerClass);
}
if (ctrlBox)
ctrlBox.hide();
contentBox.hide();
} else {
if (contentBox.is(':visible')) {
headerBox.attr('class', o.headerClassClpsd);
}
else {
headerBox.attr('class', o.headerClass);
}
contentBox.slideToggle(collapseSpeed);
}
} else {
if (collapseSpeed==0){
// reverse collapsed option for immediate folding
o.collapsed=false;
if (ctrlBox)
ctrlBox.hide();
contentBox.hide();
} else {
contentBox.toggle();
}
if (o.collapsed==false){
if (o.trueVerticalText){
// true vertical text - svg or filter
headerBox.toggleClass('ui-panel-vtitle').css('height', o.vHeight);
if (ie==''){
// fix title text positioning
var boxStyle = 'height:'+(parseInt(o.vHeight)-50)+'px;width:100%;position:absolute;bottom:0;left:0;';
titleTextBox
.empty()
// put transparent div over svg object for object onClick simulation
.append('
')
.css('height', o.vHeight);
}
titleTextBox.toggleClass('ui-panel-vtext'+ie);
} else {
// vertical text workaround
headerBox.attr('align','center');
titleTextBox.html(titleTextBox.text().replace(/(.)/g, '$1
'));
}
panelBox.animate( {width: '2.4em'}, collapseSpeed );
if (o.stackable){
if (innerCall)
// preserve html defined panel order
panelDock.append(panelBox);
else
// last folded on the top of stack
panelDock.prepend(panelBox);
}
} else {
if (o.stackable)
this.panelFrame.append(panelBox);
if (o.trueVerticalText){
headerBox.toggleClass('ui-panel-vtitle').css('height', 'auto');
titleTextBox.empty().append(titleText);
titleTextBox.toggleClass('ui-panel-vtext'+ie);
} else {
headerBox.attr('align','left');
titleTextBox.html(titleTextBox.text().replace(/
/g, ' '));
}
panelBox.animate( {width: o.width}, collapseSpeed );
}
}
// only if not initially folded
if ( ((collapseSpeed!=0 || o.trueVerticalText) && o.cookie==null) || (!innerCall && o.cookie!=null) )
o.collapsed = !o.collapsed;
this.panelBox.data('collapsed', o.collapsed);
if (!innerCall){
// save state in cookie if allowed
if (o.cookie)
self._cookie(Number(o.collapsed), o.cookie);
// inner toggle call to show only one unfolded panel if 'accordion' option is set
if (o.accordion)
$("."+o.accordion+"[role='panel'][id!='"+(o.id)+"']:not(:data(collapsed))").panel('toggle', collapseSpeed, true);
}
// css animation for header and button
this.collapseButton.toggleClass(this.iconBtnClpsd).toggleClass(this.iconBtn);
// headerBox.toggleClass('ui-corner-all');
},
// sets panel's content
content: function(content){
this.contentTextBox.html(content);
},
// destroys panel
destroy: function(){
var o = this.options;
this.headerBox
.html(this.titleText)
.removeAttr('align')
.removeAttr('style')
.removeClass('ui-panel-vtitle ui-corner-all '+o.headerClass);
this.contentBox
.removeClass(o.contentClass)
.removeAttr('style')
.html(o.content);
this.panelBox
.removeAttr('role')
.removeAttr('style')
.removeData('collapsed')
.unbind('.panel')
.removeClass(o.widgetClass);
// handle stacked panels
if (o.stackable && $.inArray(o.collapseType, ['slide-right', 'slide-left'])>-1){
this.panelDock.before(this.panelBox);
// with last stacked panel we destroy Dock and Frame stack components
if (this.panelDock.children('div[role=panel]').length==0
&& this.panelFrame.children('div[role=panel]').length==0){
this.panelDock.remove();
this.panelFrame.remove();
}
}
if (o.cookie)
this._cookie(null, o.cookie);
return this;
},
_buttonHover: function(el){
var o = this.options;
el.bind({
'mouseover': function(){$(this).addClass(o.hoverClass);},
'mouseout': function(){$(this).removeClass(o.hoverClass);}
});
},
_headerHover: function(el){
var o = this.options;
var p = this;
el.bind({
'mouseover': function(p) {
if (!$(this).siblings().is(':visible'))
$(this).addClass(o.headerHoverClass);
},
'mouseout': function(p) {
if (!$(this).siblings().is(':visible'))
$(this).removeClass(o.headerHoverClass);}
});
}
});
$.extend($.ui.panel, {
version: '0.6'
});
})(jQuery);