/*! 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('
'); $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 . $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);