|
|
@@ -0,0 +1,59 @@
|
|
|
+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) + '%'});
|
|
|
+ }
|
|
|
+
|
|
|
+ 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 = $('<div/>').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 = 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: (_left.outerWidth() * 100 / totalWidth) + '%'})
|
|
|
+ _right.css({flex: '0 0 ' + (100 - tempFinalLeft) + '%'});
|
|
|
+ $('.v-split-active').removeClass('v-split-active');
|
|
|
+ localStorage['v-split-rounded-' + _name] = tempFinalLeft;
|
|
|
+ });
|
|
|
+
|
|
|
+ $(window).off('resize.' + _name).on('resize.' + _name, function(_e) { _setSplitterHeight(); });
|
|
|
+ $(window).off('scroll.' + _name).on('scroll.' + _name, function(_e) { _setSplitterHeight(); });
|
|
|
+}
|
