Rename .splitter class to .splitter_bar for consistency.

hiltonjanfield · Sep 12, 2015 · 0be0b15 · 0be0b15
1 parent da41b2d
commit 0be0b15
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 42 deletions.
diff --git 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
@@ -47,116 +47,116 @@
   /* 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;
   margin: auto;
   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;
   z-index: 900;
   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;
   z-index: 800;
   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
@@ -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
@@ -98,7 +98,7 @@
             this.addClass('splitter-fixed');
         }
 
-        splitter = $('<div class="splitter splitter-handle-' + settings.handle + '"/>')
+        splitter = $('<div class="splitter_bar splitter-handle-' + settings.handle + '"/>')
             .insertAfter(panelOne);
         handle = $('<div class="splitter_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);