function initVSplitter(_name, _left, _right, _alignTo = null) { var minSplitWidth = 300; if($('.v-split[data-name="' + _name + '"]').length) return; if(localStorage['v-split-rounded-' + _name]) { var tempFinalLeft = Math.round(parseFloat(localStorage['v-split-rounded-' + _name])); _left.css({flex: '0 0 ' + tempFinalLeft + '%'}); _right.css({flex: '0 0 ' + (100 - tempFinalLeft) + '%'}); $(document).trigger('v-splitter-change'); } var origLeft = -1, finalLeft = -1, origX = -1, vMoving = false, totalWidth = _left.parent().width(); _left.parent().css({position: 'relative'}); _left.addClass('v-split-panel').css({maxWidth: 'unset', minWidth: 'unset'}); _right.addClass('v-split-panel').css({maxWidth: 'unset', minWidth: 'unset'}); const vSplit = $('
').addClass('v-split').attr('data-name', _name).insertAfter(_left); function _setSplitterHeight() { if(!_alignTo) return; vSplit.css({marginTop: (_alignTo.position().top + 'px'), height: (_alignTo.outerHeight())}); } _setSplitterHeight(); vSplit.css({left: (_left.outerWidth() * 100 / totalWidth) + '%'}) .off('mousedown.' + _name).on('mousedown.' + _name, function(_e) { totalWidth = _left.parent().width(); origLeft = finalLeft = vSplit.position().left; origX = _e.screenX; vMoving = true; $('body').addClass('v-moving'); $(this).addClass('v-split-active'); return false; }); $(document) .off('mousemove.' + _name).on('mousemove.' + _name, function(_e) { if(!vMoving) return; var tempFinalLeft = origLeft + (_e.screenX - origX); if(tempFinalLeft < minSplitWidth || tempFinalLeft > (totalWidth - minSplitWidth)) return; finalLeft = tempFinalLeft; vSplit.css({left: ((tempFinalLeft * 100) / totalWidth) + '%'}); }) .off('mouseup.' + _name).on('mouseup.' + _name, function(_e) { if(!vMoving) return; vMoving = false; $('body').removeClass('v-moving'); var tempFinalLeft = ((_left.outerWidth() + (finalLeft - origLeft)) * 100 / totalWidth); tempFinalLeft = Math.round(tempFinalLeft); _left.css({flex: '0 0 ' + tempFinalLeft + '%'}); vSplit.css({left: tempFinalLeft + '%'}) // (_left.outerWidth() * 100 / totalWidth) + '%'}) _right.css({flex: '0 0 ' + (100 - tempFinalLeft) + '%'}); $('.v-split-active').removeClass('v-split-active'); localStorage['v-split-rounded-' + _name] = tempFinalLeft; $(document).trigger('v-splitter-change'); }); $(window).off('resize.' + _name).on('resize.' + _name, function(_e) { _setSplitterHeight(); }); $(window).off('scroll.' + _name).on('scroll.' + _name, function(_e) { _setSplitterHeight(); }); }