(function($, undefined) {
var splitter_count = 0;
var splitter_id = null;
var splitters = [];
var current_splitter = null;
$.fn.split = function(options) {
var data = this.data('splitter');
if (data) {
return data;
}
var panel_1;
var panel_2;
var settings = $.extend({
rightIsFixed: false, //BOROO added this line
limit: 100,
orientation: 'horizontal',
position: '25%',
onDragStart: $.noop,
onDragEnd: $.noop,
onDrag: $.noop,
onRefresh: $.noop,
onShowing: $.noop,
onHidding: $.noop
}, options || {});
var cls;
var children = this.children();
if (settings.orientation == 'vertical') {
panel_1 = children.first().addClass('left_panel');
panel_2 = panel_1.next().addClass('right_panel');
cls = 'vsplitter';
} else if (settings.orientation == 'horizontal') {
panel_1 = children.first().addClass('top_panel')
panel_2 = panel_1.next().addClass('bottom_panel');
cls = 'hsplitter';
}
var width = this.width();
var height = this.height();
var id = splitter_count;
splitter_count++;
this.addClass('splitter_panel');
var splitter = $('<div/>').addClass(cls).data('splitter-id', id).mouseenter(function() {
splitter_id = $(this).data('splitter-id');
}).mouseleave(function() {
splitter_id = null;
}).insertAfter(panel_1);
var position;
function get_position(position) {
if (typeof position === 'number') {
return position;
} else if (typeof position === 'string') {
var match = position.match(/^([0-9]+)(px|%)$/);
if (match) {
if (match[2] == 'px') {
return +match[1];
} else {
if (settings.orientation == 'vertical') {
return (width * +match[1]) / 100;
} else if (settings.orientation == 'horizontal') {
return (height * +match[1]) / 100;
}
}
} else {
//throw position + ' is invalid value';
}
} else {
//throw 'position have invalid type';
}
}
var self = $.extend(this, {
splitControl: splitter,
onRefresh: settings.onRefresh,
onShowing: settings.onShowing,
onHidding: settings.onHidding
});
self = $.extend(self, {
refresh: function() {
var new_width = this.width();
var new_height = this.height();
if (width != new_width || height != new_height) {
width = this.width();
height = this.height();
self.position(position);
} else {
//BOROO added this code [start]
var p1_none = $(splitter).prev().css('display') === 'none';
if (p1_none) {
splitter.css('cursor', 'pointer');
} else {
var n1_none = $(splitter).next().css('display') === 'none';
if (n1_none) {
splitter.css('cursor', 'pointer');
} else {
splitter.css('cursor', 'col-resize');
}
}
self.position(position);
//BOROO added this code [end]
}
//BOROO added this code [start]
self.find('.splitter_panel').trigger('splitter.refresh');
//BOROO added this code [end]
},
position: (function() {
if (settings.orientation == 'vertical') {
return function(n, silent) {
if (n === undefined) {
return position;
} else {
position = get_position(n);
var sw = splitter.width() / 2;
//BOROO edited this code [start]
var p1_none = $(splitter).prev().css('display') === 'none';
if (p1_none) {
self.find('.splitter_panel').trigger('splitter.hidding');
splitter.css('left', 0);
panel_2.width(self.width() - splitter.width());
} else {
var n1_none = $(splitter).next().css('display') === 'none';
if (n1_none) {
self.find('.splitter_panel').trigger('splitter.hidding');
splitter.css('left', self.width() - splitter.width());
panel_1.width(self.width() - splitter.width());
} else {
splitter.css('left', position - sw);
panel_1.width(position - sw);
panel_2.width(self.width() - position - sw);
}
}
//BOROO edited this code [end]
}
if (!silent) {
self.find('.splitter_panel').trigger('splitter.resize');
}
return self;
};
} else if (settings.orientation == 'horizontal') {
return function(n, silent) {
if (n === undefined) {
return position;
} else {
position = get_position(n);
var sw = splitter.height() / 2;
splitter.css('top', position - sw);
panel_1.height(position - sw);
panel_2.height(self.height() - position - sw);
}
if (!silent) {
self.find('.splitter_panel').trigger('splitter.resize');
}
return self;
};
} else {
return $.noop;
}
})(),
orientation: settings.orientation,
limit: settings.limit,
rightIsFixed: settings.rightIsFixed, //BOROO added this line
isActive: function() {
return splitter_id === id;
},
destroy: function() {
self.removeClass('splitter_panel');
splitter.unbind('mouseenter');
splitter.unbind('mouseleave');
if (settings.orientation == 'vertical') {
panel_1.removeClass('left_panel');
panel_2.removeClass('right_panel');
} else if (settings.orientation == 'horizontal') {
panel_1.removeClass('top_panel');
panel_2.removeClass('bottom_panel');
}
self.unbind('splitter.resize');
self.find('.splitter_panel').trigger('splitter.resize');
splitters[id] = null;
splitter.remove();
var not_null = false;
for (var i = splitters.length; i--; ) {
if (splitters[i] !== null) {
not_null = true;
break;
}
}
//remove document events when no splitters
if (!not_null) {
$(document.documentElement).unbind('.splitter');
$(window).unbind('resize.splitter');
splitters = [];
}
//BOROO added this code [start]
var data = self.data('splitter');
if (data) {
self.removeData('splitter');
}
return self;
//BOROO added this code [end]
}
});
self.bind('splitter.refresh', function() {
//call refresh method
self.onRefresh();
});
self.bind('splitter.showing', function() {
//call refresh method
self.onShowing();
});
self.bind('splitter.hidding', function() {
//call refresh method
self.onHidding();
});
self.bind('splitter.resize', function(e) {
var pos = self.position();
//BOROO added this code [start]
if (self.orientation === 'vertical') {
if (self.rightIsFixed) {
var oldw = self.data('old-width');
if (typeof oldw !== 'undefined' && oldw !== self.width()) {
pos = pos + (self.width() - oldw);
//self.width() - panel_2.width() - sw;
}
}
}
//BOROO added this code [end]
if (self.orientation == 'vertical' && pos > self.width()) {
pos = self.width() - self.limit - 1;
} else if (self.orientation == 'horizontal' && pos > self.height()) {
pos = self.height() - self.limit - 1;
}
if (pos < self.limit) {
pos = self.limit + 1;
}
self.data('old-width', self.width());
self.position(pos, true);
});
//inital position of splitter
var pos;
if (settings.orientation == 'vertical') {
if (pos > width - settings.limit) {
pos = width - settings.limit;
} else {
pos = get_position(settings.position);
}
} else if (settings.orientation == 'horizontal') {
//position = height/2;
if (pos > height - settings.limit) {
pos = height - settings.limit;
} else {
pos = get_position(settings.position);
}
}
if (pos < settings.limit) {
pos = settings.limit;
}
self.position(pos, true);
if (splitters.length == 0) { // first time bind events to document
$(window).bind('resize.splitter', function() {
$.each(splitters, function(i, splitter) {
splitter.refresh();
});
});
$(document.documentElement).bind('mousedown.splitter', function(e) {
if (splitter_id !== null) {
current_splitter = splitters[splitter_id];
//BOROO added this code [start]
if ($(current_splitter.splitControl).attr('class') === 'vsplitter') {
var p1_none = $(current_splitter.splitControl).prev().css('display') === 'none';
if (p1_none) {
$(current_splitter.splitControl)
.css('cursor', 'col-resize')
.prev().show();
$(current_splitter).trigger('splitter.showing');
current_splitter.refresh();
} else {
var n1_none = $(current_splitter.splitControl).next().css('display') === 'none';
if (n1_none) {
$(current_splitter.splitControl)
.css('cursor', 'col-resize')
.next().show();
$(current_splitter).trigger('splitter.showing');
current_splitter.refresh();
}
}
}
//BOROO added this code [end]
$('<div class="splitterMask"></div>').insertAfter(current_splitter);
if (current_splitter.orientation == 'horizontal') {
$('body').css('cursor', 'row-resize');
} else if (current_splitter.orientation == 'vertical') {
$('body').css('cursor', 'col-resize');
}
settings.onDragStart(e);
return false;
}
}).bind('mouseup.splitter', function(e) {
$('.splitterMask').remove();
current_splitter = null;
$('body').css('cursor', 'auto');
settings.onDragEnd(e);
}).bind('mousemove.splitter', function(e) {
if (current_splitter !== null) {
var limit = current_splitter.limit;
var offset = current_splitter.offset();
if (current_splitter.orientation == 'vertical') {
var x = e.pageX - offset.left;
if (x <= current_splitter.limit) {
x = current_splitter.limit + 1;
}
else if (x >= current_splitter.width() - limit) {
x = current_splitter.width() - limit - 1;
}
if (x > current_splitter.limit &&
x < current_splitter.width() - limit) {
current_splitter.position(x, true);
current_splitter.find('.splitter_panel').trigger('splitter.resize');
return false;
}
} else if (current_splitter.orientation == 'horizontal') {
var y = e.pageY - offset.top;
if (y <= current_splitter.limit) {
y = current_splitter.limit + 1;
}
else if (y >= current_splitter.height() - limit) {
y = current_splitter.height() - limit - 1;
}
if (y > current_splitter.limit &&
y < current_splitter.height() - limit) {
current_splitter.position(y, true);
current_splitter.trigger('splitter.resize');
return false;
}
}
settings.onDrag(e);
}
});
}
splitters.push(self);
self.data('splitter', self);
return self;
};
})(jQuery);
CSS
#nav-panel {
display: block;
position: relative;
width: 100%;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
}
#nav-panel ul.rightnav{
position: fixed;
list-style: none;
padding: 0 10px;
top: 0;
right: 0;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
font-size: 1.2em;
}
ul.rightnav li {
border-left: 1px solid #444;
border-right: 1px solid #333;
display: inline-block;
float: left;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
position: relative;
text-shadow: 0 0 2px #000000;
}
ul.rightnav li div{
color: #E6E6E6;
display: block;
font-style: normal;
font-weight: normal;
padding: 8px 12px;
vertical-align: middle;
text-decoration: none;
}
ul.rightnav li div a:hover{
text-decoration: underline;
}
ul.rightnav li div.time {
position: relative;
line-height: 11px;
width: 140px;
padding: 6px 2px;
text-align: right;
font-size: 11px;
}
ul.rightnav li div.time i {
position: relative;
font-style: normal;
white-space: nowrap;
top: -2px;
}
ul.rightnav li div#test {
padding: 0;
margin: 0;
}
#nav-panel ul.topnav {
list-style: none;
padding: 0 10px;
margin: 0;
float: left;
display: block;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
font-size: 1.2em;
}
ul.topnav li {
border-left: 1px solid #444;
border-right: 1px solid #333;
cursor: pointer;
display: inline-block;
float: left;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
position: relative;
text-shadow: 0 0 2px #000000;
}
ul.topnav li a{
color: #E6E6E6;
display: block;
font-style: normal;
font-weight: normal;
padding: 8px 12px;
vertical-align: middle;
text-decoration: none;
}
ul.topnav li a.hover{
background: url(images/bg-noise.jpg) repeat-x scroll 0 0 #1B1B1B;
}
ul.topnav li.parnav a{
padding-right: 30px;
}
ul.topnav li.parnav a span { /*--Drop down trigger styles--*/
position: absolute;
right: 10px;
top: 0;
width: 10px;
height: 34px;
background: url(images/subnav10.gif) no-repeat center top;
}
ul.topnav li.subnav a{
padding-right: 30px;
}
ul.topnav li.subnav a span {
position: absolute;
right: 10px;
top: 0;
width: 10px;
height: 34px;
background: url(images/dropdo10.gif) no-repeat center center;
}
ul.topnav li ul.subul {
list-style: none;
position: absolute;
left: -2px; top: 32px;
margin: 0; padding: 0;
display: none;
float: left;
border: 1px solid #111;
border-top: none;
background: url(images/bg-noise.jpg) repeat scroll 0 0 #1B1B1B;
z-index: 10000;
}
ul.topnav li.subnav ul.subul {
border: 1px solid #111;
}
ul.topnav li ul.subul li{
margin: 0; padding: 0;
color: #E6E6E6;
display: block;
float: none;
clear: both;
}
ul.topnav li ul.subul li a {
white-space: nowrap;
padding-left: 15px;
}
ul.topnav li ul.subul li a:hover {
background: #111;
}
ul.topnav li ul.subul li.sepline{
border-top: 1px solid #444;
}
No comments:
Post a Comment