diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e84e56..0dd5a29 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,10 +4,9 @@ Changes made so far over v1.1.0. - Updated composer.json to specify valid jQuery versions (1.8+ / 2.0+). -- (UX improvement) Implemented drag-delay if the user clicks on the collapse handle then starts dragging. - Drag will not begin until mouse has moved past 5 pixels in either direction. -- (UX improvement) Prevent click event if the user started and ended their drag on the collapse handle. -- Respect CSS min/max-width/height. +- Implemented drag-delay if the user clicks on the collapse handle then starts dragging. Drag will not begin until mouse has moved past 5 pixels in either direction. (UX improvement) +- Prevent click event if the user started and ended their drag on the collapse handle. (UX improvement) +- Change splitter bar class from .splitter to .splitter_bar for consistency. ## Release v1.1.0 diff --git a/css/jquery.enhsplitter.css b/css/jquery.enhsplitter.css index 914bb3e..0b17703 100644 --- a/css/jquery.enhsplitter.css +++ b/css/jquery.enhsplitter.css @@ -47,19 +47,19 @@ /* Right panel */ right: 0; } -.splitter_container.splitter-fixed > .splitter { +.splitter_container.splitter-fixed > .splitter_bar { cursor: default; } -.splitter_container.splitter-handle-disabled > .splitter > .splitter_handle { +.splitter_container.splitter-handle-disabled > .splitter_bar > .splitter_handle { cursor: inherit; } -.splitter { +.splitter_bar { background-color: #c0c0c0; position: absolute; padding: 0 !important; box-sizing: border-box; } -.splitter > .splitter_handle { +.splitter_bar > .splitter_handle { cursor: pointer; background-color: #999999; position: relative; @@ -67,24 +67,24 @@ z-index: 1000; box-sizing: border-box; } -.splitter > .splitter_handle:hover { +.splitter_bar > .splitter_handle:hover { background-color: #666666; border-color: #666666; } -.splitter > .splitter_handle:active { +.splitter_bar > .splitter_handle:active { background-color: #000000; border-color: #000000; } -.splitter.splitter-invisible { +.splitter_bar.splitter-invisible { background: none!important; border: none!important; box-shadow: none!important; } -.splitter.splitter-invisible .splitter_handle, -.splitter.splitter-handle-none .splitter_handle { +.splitter_bar.splitter-invisible .splitter_handle, +.splitter_bar.splitter-handle-none .splitter_handle { display: none; } -.splitter-vertical > .splitter { +.splitter-vertical > .splitter_bar { border-left: 1px solid #eeeeee; border-right: 1px solid #666666; cursor: ew-resize; @@ -92,30 +92,30 @@ width: 7px; height: 100%; } -.splitter-vertical > .splitter > .splitter_handle { +.splitter-vertical > .splitter_bar > .splitter_handle { top: 50%; margin-top: -25px; height: 50px; } -.splitter-vertical > .splitter.splitter-handle-default > .splitter_handle { +.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle { width: 3px; border-left: 1px solid #999999; border-right: 1px solid #999999; background-color: transparent; } -.splitter-vertical > .splitter.splitter-handle-default > .splitter_handle:hover { +.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:hover { border-color: #666666; } -.splitter-vertical > .splitter.splitter-handle-default > .splitter_handle:active { +.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:active { border-color: #000000; } -.splitter-vertical > .splitter.splitter-handle-bar > .splitter_handle { +.splitter-vertical > .splitter_bar.splitter-handle-bar > .splitter_handle { width: 3px; } -.splitter-vertical > .splitter.splitter-handle-block > .splitter_handle { +.splitter-vertical > .splitter_bar.splitter-handle-block > .splitter_handle { width: 5px; } -.splitter-horizontal > .splitter { +.splitter-horizontal > .splitter_bar { border-top: 1px solid #eeeeee; border-bottom: 1px solid #666666; cursor: ns-resize; @@ -123,40 +123,40 @@ width: 100%; height: 7px; } -.splitter-horizontal > .splitter > .splitter_handle { +.splitter-horizontal > .splitter_bar > .splitter_handle { width: 50px; } -.splitter-horizontal > .splitter.splitter-handle-default > .splitter_handle { +.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle { height: 3px; margin-top: 1px; border-top: 1px solid #999999; border-bottom: 1px solid #999999; background-color: transparent; } -.splitter-horizontal > .splitter.splitter-handle-default > .splitter_handle:hover { +.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:hover { border-color: #666666; } -.splitter-horizontal > .splitter.splitter-handle-default > .splitter_handle:active { +.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:active { border-color: #000000; } -.splitter-horizontal > .splitter.splitter-handle-bar > .splitter_handle { +.splitter-horizontal > .splitter_bar.splitter-handle-bar > .splitter_handle { height: 3px; margin-top: 1px; } -.splitter-horizontal > .splitter.splitter-handle-block > .splitter_handle { +.splitter-horizontal > .splitter_bar.splitter-handle-block > .splitter_handle { height: 5px; margin-top: 1px; } -.splitter_container.splitter-active > .splitter { +.splitter_container.splitter-active > .splitter_bar { z-index: 1000; /* Important to keep z-index of active splitter above .splitterMask. */ } -.splitter_container.splitter-active > .splitter > .splitter_handle { +.splitter_container.splitter-active > .splitter_bar > .splitter_handle { border-color: #000000; cursor: inherit; } -.splitter_container.splitter-active > .splitter.splitter-handle-bar > .splitter_handle, -.splitter_container.splitter-active > .splitter.splitter-handle-block > .splitter_handle { +.splitter_container.splitter-active > .splitter_bar.splitter-handle-bar > .splitter_handle, +.splitter_container.splitter-active > .splitter_bar.splitter-handle-block > .splitter_handle { background-color: #000000; } .splitter_mask { diff --git a/css/jquery.enhsplitter.less b/css/jquery.enhsplitter.less index a6576ba..a9c7567 100644 --- a/css/jquery.enhsplitter.less +++ b/css/jquery.enhsplitter.less @@ -71,16 +71,16 @@ } - &.splitter-fixed > .splitter { + &.splitter-fixed > .splitter_bar { cursor: default; } - &.splitter-handle-disabled > .splitter > .splitter_handle { + &.splitter-handle-disabled > .splitter_bar > .splitter_handle { cursor: inherit; } } -.splitter { +.splitter_bar { background-color: @splitter_color; position: absolute; padding: 0 !important; @@ -120,7 +120,7 @@ } .splitter-vertical { - > .splitter { + > .splitter_bar { border-left: 1px solid @splitter_highlight; border-right: 1px solid @splitter_shadow; cursor: ew-resize; @@ -166,7 +166,7 @@ } .splitter-horizontal { - > .splitter { + > .splitter_bar { border-top: 1px solid @splitter_highlight; border-bottom: 1px solid @splitter_shadow; cursor: ns-resize; @@ -212,7 +212,7 @@ } } -.splitter_container.splitter-active > .splitter { +.splitter_container.splitter-active > .splitter_bar { z-index: 1000; /* Important to keep z-index of active splitter above .splitterMask. */ > .splitter_handle { diff --git a/js/jquery.enhsplitter.js b/js/jquery.enhsplitter.js index 420e2d9..ffa3ae7 100644 --- a/js/jquery.enhsplitter.js +++ b/js/jquery.enhsplitter.js @@ -98,7 +98,7 @@ this.addClass('splitter-fixed'); } - splitter = $('
') + splitter = $('
') .insertAfter(panelOne); handle = $('
') .appendTo(splitter); @@ -264,12 +264,12 @@ e.preventDefault(); // This mousedown event gets called first because it is on top, but we need the other one to fire // first - or duplicate the code, which is bad, m'kay? - $(this).closest('.splitter').trigger('mousedown'); + $(this).closest('.splitter_bar').trigger('mousedown'); dragStartPosition = (currentSplitter.settings.vertical) ? e.pageX : e.pageY; }) - .on('mousedown.splitter touchstart.splitter', '.splitter_container > .splitter', function (e) { + .on('mousedown.splitter touchstart.splitter', '.splitter_container > .splitter_bar', function (e) { e.preventDefault(); currentSplitter = $(this).closest('.splitter_container').data('splitter'); if (currentSplitter.settings.fixed) { @@ -281,7 +281,7 @@ } }) - .on('mouseup.splitter touchend.splitter touchleave.splitter touchcancel.splitter', '.splitter_mask, .splitter_container > .splitter', function (e) { + .on('mouseup.splitter touchend.splitter touchleave.splitter touchcancel.splitter', '.splitter_mask, .splitter_container > .splitter_bar', function (e) { if (currentSplitter) { e.preventDefault(); dragStartPosition = null; @@ -315,7 +315,7 @@ } }) - .on('mousemove.splitter touchmove.splitter', '.splitter_mask, .splitter', function (e) { + .on('mousemove.splitter touchmove.splitter', '.splitter_mask, .splitter_bar', function (e) { if (currentSplitter !== null) { currentSplitter.data('savedPosition', null);