/*!
|
|
Split Pane v0.9.4
|
|
Copyright (c) 2014 - 2016 Simon Hagström
|
|
Released under the MIT license
|
https://raw.github.com/shagstrom/split-pane/master/LICENSE
|
|
*/
|
|
(function ($) {
|
|
'use strict';
|
|
var methods = {};
|
|
methods.init = function() {
|
var $splitPanes = this;
|
$splitPanes.each(setMinHeightAndMinWidth);
|
$splitPanes.children('.split-pane-divider').html('<div class="split-pane-divider-inner"></div>');
|
$splitPanes.children('.split-pane-divider').on('touchstart mousedown', mousedownHandler);
|
setTimeout(function() {
|
// Doing this later because of an issue with Chrome (v23.0.1271.64) returning split-pane width = 0
|
// and triggering multiple resize events when page is being opened from an <a target="_blank"> .
|
$splitPanes.each(attachResizeHandler);
|
$(window).trigger('resize');
|
}, 100);
|
};
|
|
methods.firstComponentSize = function(value) {
|
this.each(function() {
|
var $splitPane = $(this),
|
components = getComponents($splitPane);
|
if ($splitPane.is('.fixed-top')) {
|
fixedTopHandler(components, components.divider.offsetTop)({pageY: value});
|
} else if ($splitPane.is('.fixed-bottom')) {
|
value = components.splitPane.offsetHeight -components.divider.offsetHeight - value;
|
fixedBottomHandler(components, -components.last.offsetHeight)({pageY: -value});
|
} else if ($splitPane.is('.horizontal-percent')) {
|
value = components.splitPane.offsetHeight -components.divider.offsetHeight - value;
|
horizontalPercentHandler(components, -components.last.offsetHeight)({pageY: -value});
|
} else if ($splitPane.is('.fixed-left')) {
|
fixedLeftHandler(components, components.divider.offsetLeft)({pageX: value});
|
} else if ($splitPane.is('.fixed-right')) {
|
value = components.splitPane.offsetWidth -components.divider.offsetWidth - value;
|
fixedRightHandler(components, -components.last.offsetWidth)({pageX: -value});
|
} else if ($splitPane.is('.vertical-percent')) {
|
value = components.splitPane.offsetWidth -components.divider.offsetWidth - value;
|
verticalPercentHandler(components, -components.last.offsetWidth)({pageX: -value});
|
}
|
});
|
};
|
|
methods.lastComponentSize = function(value) {
|
this.each(function() {
|
var $splitPane = $(this),
|
components = getComponents($splitPane);
|
if ($splitPane.is('.fixed-top')) {
|
value = components.splitPane.offsetHeight -components.divider.offsetHeight - value;
|
fixedTopHandler(components, components.divider.offsetTop)({pageY: value});
|
} else if ($splitPane.is('.fixed-bottom')) {
|
fixedBottomHandler(components, -components.last.offsetHeight)({pageY: -value});
|
} else if ($splitPane.is('.horizontal-percent')) {
|
horizontalPercentHandler(components, -components.last.offsetHeight)({pageY: -value});
|
} else if ($splitPane.is('.fixed-left')) {
|
value = components.splitPane.offsetWidth -components.divider.offsetWidth - value;
|
fixedLeftHandler(components, components.divider.offsetLeft)({pageX: value});
|
} else if ($splitPane.is('.fixed-right')) {
|
fixedRightHandler(components, -components.last.offsetWidth)({pageX: -value});
|
} else if ($splitPane.is('.vertical-percent')) {
|
verticalPercentHandler(components, -components.last.offsetWidth)({pageX: -value});
|
}
|
});
|
};
|
|
$.fn.splitPane = function(method) {
|
methods[method || 'init'].apply(this, $.grep(arguments, function(it, i) { return i > 0; }));
|
};
|
|
function setMinHeightAndMinWidth() {
|
var $splitPane = $(this),
|
components = getComponents($splitPane);
|
if ($splitPane.is('.fixed-top, .fixed-bottom, .horizontal-percent')) {
|
$splitPane.css('min-height', (minHeight(components.first) + minHeight(components.last) + $(components.divider).height()) + 'px');
|
} else {
|
$splitPane.css('min-width', (minWidth(components.first) + minWidth(components.last) + $(components.divider).width()) + 'px');
|
}
|
}
|
|
function mousedownHandler(event) {
|
event.preventDefault();
|
var $divider = $(this),
|
$splitPane = $divider.parent();
|
$divider.addClass('dragged');
|
if (event.type.match(/^touch/)) {
|
$divider.addClass('touch');
|
}
|
var moveEventHandler = createMousemove($splitPane, pageXof(event), pageYof(event));
|
$(document).on('touchmove mousemove', moveEventHandler);
|
$(document).one('touchend mouseup', function(event) {
|
$(document).off('touchmove mousemove', moveEventHandler);
|
$divider.removeClass('dragged touch');
|
$splitPane.trigger('dividerdragend', [ getComponentsSizes($splitPane) ]);
|
});
|
$splitPane.trigger('dividerdragstart', [ getComponentsSizes($splitPane) ]);
|
}
|
|
function getComponentsSizes($splitPane) {
|
var property = $splitPane.is('.fixed-top, .fixed-bottom, .horizontal-percent') ?
|
'height' : 'width';
|
return {
|
firstComponentSize: parseInt($splitPane.find('.split-pane-component:first').css(property), 10),
|
lastComponentSize: parseInt($splitPane.find('.split-pane-component:last').css(property), 10)
|
};
|
}
|
|
function attachResizeHandler() {
|
var $splitPane = $(this),
|
internalHandler = createParentresizeHandler($splitPane),
|
parent = $splitPane.parent().closest('.split-pane')[0] || window;
|
$(parent).on(parent === window ? 'resize' : 'splitpaneresize', function(event) {
|
var target = event.target === document ? window : event.target;
|
if (target === parent) {
|
internalHandler(event);
|
}
|
});
|
}
|
|
function createParentresizeHandler($splitPane) {
|
var components = getComponents($splitPane);
|
if ($splitPane.is('.fixed-top')) {
|
return function(event) {
|
var lastComponentMinHeight = minHeight(components.last),
|
maxfirstComponentHeight = components.splitPane.offsetHeight - lastComponentMinHeight - components.divider.offsetHeight;
|
if (components.first.offsetHeight > maxfirstComponentHeight) {
|
setTop(components, maxfirstComponentHeight + 'px');
|
}
|
$splitPane.trigger('splitpaneresize', [ getComponentsSizes($splitPane) ]);
|
};
|
} else if ($splitPane.is('.fixed-bottom')) {
|
return function(event) {
|
var firstComponentMinHeight = minHeight(components.first),
|
maxLastComponentHeight = components.splitPane.offsetHeight - firstComponentMinHeight - components.divider.offsetHeight;
|
if (components.last.offsetHeight > maxLastComponentHeight) {
|
setBottom(components, maxLastComponentHeight + 'px');
|
}
|
$splitPane.trigger('splitpaneresize', [ getComponentsSizes($splitPane) ]);
|
};
|
} else if ($splitPane.is('.horizontal-percent')) {
|
return function(event) {
|
var lastComponentMinHeight = minHeight(components.last),
|
firstComponentMinHeight = minHeight(components.first),
|
maxLastComponentHeight = components.splitPane.offsetHeight - firstComponentMinHeight - components.divider.offsetHeight;
|
if (components.last.offsetHeight > maxLastComponentHeight) {
|
setBottom(components, (maxLastComponentHeight / components.splitPane.offsetHeight * 100) + '%');
|
} else {
|
if (components.splitPane.offsetHeight - components.first.offsetHeight - components.divider.offsetHeight < lastComponentMinHeight) {
|
setBottom(components, (lastComponentMinHeight / components.splitPane.offsetHeight * 100) + '%');
|
}
|
}
|
$splitPane.trigger('splitpaneresize', [ getComponentsSizes($splitPane) ]);
|
};
|
} else if ($splitPane.is('.fixed-left')) {
|
return function(event) {
|
var lastComponentMinWidth = minWidth(components.last),
|
maxFirstComponentWidth = components.splitPane.offsetWidth - lastComponentMinWidth - components.divider.offsetWidth;
|
if (components.first.offsetWidth > maxFirstComponentWidth) {
|
setLeft(components, maxFirstComponentWidth + 'px');
|
}
|
$splitPane.trigger('splitpaneresize', [ getComponentsSizes($splitPane) ]);
|
};
|
} else if ($splitPane.is('.fixed-right')) {
|
return function(event) {
|
var firstComponentMinWidth = minWidth(components.first),
|
maxLastComponentWidth = components.splitPane.offsetWidth - firstComponentMinWidth - components.divider.offsetWidth;
|
if (components.last.offsetWidth > maxLastComponentWidth) {
|
setRight(components, maxLastComponentWidth + 'px');
|
}
|
$splitPane.trigger('splitpaneresize', [ getComponentsSizes($splitPane) ]);
|
};
|
} else if ($splitPane.is('.vertical-percent')) {
|
return function(event) {
|
var lastComponentMinWidth = minWidth(components.last),
|
firstComponentMinWidth = minWidth(components.first),
|
maxLastComponentWidth = components.splitPane.offsetWidth - firstComponentMinWidth - components.divider.offsetWidth;
|
if (components.last.offsetWidth > maxLastComponentWidth) {
|
setRight(components, (maxLastComponentWidth / components.splitPane.offsetWidth * 100) + '%');
|
} else {
|
if (components.splitPane.offsetWidth - components.first.offsetWidth - components.divider.offsetWidth < lastComponentMinWidth) {
|
setRight(components, (lastComponentMinWidth / components.splitPane.offsetWidth * 100) + '%');
|
}
|
}
|
$splitPane.trigger('splitpaneresize', [ getComponentsSizes($splitPane) ]);
|
};
|
}
|
}
|
|
function createMousemove($splitPane, pageX, pageY) {
|
var components = getComponents($splitPane);
|
if ($splitPane.is('.fixed-top')) {
|
return fixedTopHandler(components, pageY);
|
} else if ($splitPane.is('.fixed-bottom')) {
|
return fixedBottomHandler(components, pageY);
|
} else if ($splitPane.is('.horizontal-percent')) {
|
return horizontalPercentHandler(components, pageY);
|
} else if ($splitPane.is('.fixed-left')) {
|
return fixedLeftHandler(components, pageX);
|
} else if ($splitPane.is('.fixed-right')) {
|
return fixedRightHandler(components, pageX);
|
} else if ($splitPane.is('.vertical-percent')) {
|
return verticalPercentHandler(components, pageX);
|
}
|
}
|
|
function fixedTopHandler(components, pageY) {
|
var firstComponentMinHeight = minHeight(components.first),
|
maxFirstComponentHeight = components.splitPane.offsetHeight - minHeight(components.last) - components.divider.offsetHeight,
|
topOffset = components.divider.offsetTop - pageY;
|
return function(event) {
|
event.preventDefault && event.preventDefault();
|
var top = newTop(firstComponentMinHeight, maxFirstComponentHeight, topOffset + pageYof(event));
|
setTop(components, top + 'px');
|
$(components.splitPane).trigger('splitpaneresize', [ getComponentsSizes($(components.splitPane)) ]);
|
};
|
}
|
|
function fixedBottomHandler(components, pageY) {
|
var lastComponentMinHeight = minHeight(components.last),
|
maxLastComponentHeight = components.splitPane.offsetHeight - minHeight(components.first) - components.divider.offsetHeight,
|
bottomOffset = components.last.offsetHeight + pageY;
|
return function(event) {
|
event.preventDefault && event.preventDefault();
|
var bottom = Math.min(Math.max(lastComponentMinHeight, bottomOffset - pageYof(event)), maxLastComponentHeight);
|
setBottom(components, bottom + 'px');
|
$(components.splitPane).trigger('splitpaneresize', [ getComponentsSizes($(components.splitPane)) ]);
|
};
|
}
|
|
function horizontalPercentHandler(components, pageY) {
|
var splitPaneHeight = components.splitPane.offsetHeight,
|
lastComponentMinHeight = minHeight(components.last),
|
maxLastComponentHeight = splitPaneHeight - minHeight(components.first) - components.divider.offsetHeight,
|
bottomOffset = components.last.offsetHeight + pageY;
|
return function(event) {
|
event.preventDefault && event.preventDefault();
|
var bottom = Math.min(Math.max(lastComponentMinHeight, bottomOffset - pageYof(event)), maxLastComponentHeight);
|
setBottom(components, (bottom / splitPaneHeight * 100) + '%');
|
$(components.splitPane).trigger('splitpaneresize', [ getComponentsSizes($(components.splitPane)) ]);
|
};
|
}
|
|
function fixedLeftHandler(components, pageX) {
|
var firstComponentMinWidth = minWidth(components.first),
|
maxFirstComponentWidth = components.splitPane.offsetWidth - minWidth(components.last) - components.divider.offsetWidth,
|
leftOffset = components.divider.offsetLeft - pageX;
|
return function(event) {
|
event.preventDefault && event.preventDefault();
|
var left = newLeft(firstComponentMinWidth, maxFirstComponentWidth, leftOffset + pageXof(event));
|
setLeft(components, left + 'px');
|
$(components.splitPane).trigger('splitpaneresize', [ getComponentsSizes($(components.splitPane)) ]);
|
};
|
}
|
|
function fixedRightHandler(components, pageX) {
|
var lastComponentMinWidth = minWidth(components.last),
|
maxLastComponentWidth = components.splitPane.offsetWidth - minWidth(components.first) - components.divider.offsetWidth,
|
rightOffset = components.last.offsetWidth + pageX;
|
return function(event) {
|
event.preventDefault && event.preventDefault();
|
var right = Math.min(Math.max(lastComponentMinWidth, rightOffset - pageXof(event)), maxLastComponentWidth);
|
setRight(components, right + 'px');
|
$(components.splitPane).trigger('splitpaneresize', [ getComponentsSizes($(components.splitPane)) ]);
|
};
|
}
|
|
function verticalPercentHandler(components, pageX) {
|
var splitPaneWidth = components.splitPane.offsetWidth,
|
lastComponentMinWidth = minWidth(components.last),
|
maxLastComponentWidth = splitPaneWidth - minWidth(components.first) - components.divider.offsetWidth,
|
rightOffset = components.last.offsetWidth + pageX;
|
return function(event) {
|
event.preventDefault && event.preventDefault();
|
var right = Math.min(Math.max(lastComponentMinWidth, rightOffset - pageXof(event)), maxLastComponentWidth);
|
setRight(components, (right / splitPaneWidth * 100) + '%');
|
$(components.splitPane).trigger('splitpaneresize', [ getComponentsSizes($(components.splitPane)) ]);
|
};
|
}
|
|
function getComponents($splitPane) {
|
return {
|
splitPane: $splitPane[0],
|
first: $splitPane.children('.split-pane-component:first')[0],
|
divider: $splitPane.children('.split-pane-divider')[0],
|
last: $splitPane.children('.split-pane-component:last')[0]
|
};
|
}
|
|
function pageXof(event) {
|
if (event.pageX !== undefined) {
|
return event.pageX;
|
} else if (event.originalEvent.pageX !== undefined) {
|
return event.originalEvent.pageX;
|
} else if (event.originalEvent.touches) {
|
return event.originalEvent.touches[0].pageX;
|
}
|
}
|
|
function pageYof(event) {
|
if (event.pageY !== undefined) {
|
return event.pageY;
|
} else if (event.originalEvent.pageY !== undefined) {
|
return event.originalEvent.pageY;
|
} else if (event.originalEvent.touches) {
|
return event.originalEvent.touches[0].pageY;
|
}
|
}
|
|
function minHeight(element) {
|
return parseInt($(element).css('min-height'), 10) || 0;
|
}
|
|
function minWidth(element) {
|
return parseInt($(element).css('min-width'), 10) || 0;
|
}
|
|
function maxHeight(element) {
|
return parseInt($(element).css('max-height'), 10);
|
}
|
|
function maxWidth(element) {
|
return parseInt($(element).css('max-width'), 10);
|
}
|
|
function newTop(firstComponentMinHeight, maxFirstComponentHeight, value) {
|
return Math.min(Math.max(firstComponentMinHeight, value), maxFirstComponentHeight);
|
}
|
|
function newLeft(firstComponentMinWidth, maxFirstComponentWidth, value) {
|
return Math.min(Math.max(firstComponentMinWidth, value), maxFirstComponentWidth);
|
}
|
function setTop(components, top) {
|
components.first.style.height = top;
|
components.divider.style.top = top;
|
components.last.style.top = top;
|
}
|
|
function setBottom(components, bottom) {
|
components.first.style.bottom = bottom;
|
components.divider.style.bottom = bottom;
|
components.last.style.height = bottom;
|
}
|
|
function setLeft(components, left) {
|
components.first.style.width = left;
|
components.divider.style.left = left;
|
components.last.style.left = left;
|
}
|
|
function setRight(components, right) {
|
components.first.style.right = right;
|
components.divider.style.right = right;
|
components.last.style.width = right;
|
}
|
|
})(jQuery);
|
