').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 (ctrlBox)
ctrlBox.hide();
contentBox.hide();
} else {
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');
if (typeof (o.callback) == "function") {
if (o.collapseSpeed == 0)
o.callback(this, o.collapsed);
else
setTimeout(function () { o.callback(this, o.collapsed); }, 150);
}
},
// 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).removeClass("ui-priority-primary"); },
'mouseout': function () { $(this).removeClass(o.hoverClass).addClass("ui-priority-primary"); }
});
}
});
$.extend($.ui.panel, {
version: '0.6'
});
})(jQuery);