Version 1.1.0 Update with several bug fixes, numerous new options, an…

…d a few UX tweaks. It's now very pretty and sleek. Not going to list all the changes here, as they are far too numerous, but will be sure to do small updates from here on for your peace of mind.
hiltonjanfield · Sep 8, 2015 · eeb4de1 · eeb4de1
1 parent db08040
commit eeb4de1
Show file tree

Hide file tree

Showing 5 changed files with 355 additions and 304 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,18 @@
 # jQuery Enhanced Splitter
 
 jquery.enhsplitter is a plugin to generate sliding splitters on your page. Useful for separating content, emulating the
-look of frames, and more. Completely customizable look and feel, and touchscreen friendly.
+look of frames, collapsable tool windows, and more. Completely customizable look and feel, and touchscreen friendly.
+
+Release v1.1.0
+------
+
+This release adds a number of new options, as well as a few fixes and overall UX improvements.
+But since nobody is using this yet, I won't bother documenting all the changes here. Rest assured that any changes
+from here forward will be properly documented!
 
 # Demo
 
-Demo and basic documentation is available at:
+A demo and basic documentation of options are available at:
 
 <http://janfield.ca/github/jquery.enhsplitter/demo.html>
 
@@ -51,7 +58,7 @@ available options.
 ```javascript
 jQuery(function ($) {
     $('#panels').enhsplitter({
-        orientation: 'horizontal',
+        vertical: true,
         limit: 125,
         handle: 'striped'
     });

diff --git a/css/jquery.enhsplitter.css b/css/jquery.enhsplitter.css
@@ -1,7 +1,7 @@
 /*!
  * jQuery Enhanced Splitter Plugin
  * LESS / CSS File
- * Version 1.0.0
+ * Version 1.1.0
  *
  * https://github.com/hiltonjanfield/jquery.enhsplitter
  *
@@ -47,6 +47,12 @@
   /* Right panel */
   right: 0;
 }
+.splitter_container.splitter-fixed > .splitter {
+  cursor: default;
+}
+.splitter_container.splitter-handle-disabled > .splitter > .splitter_handle {
+  cursor: inherit;
+}
 .splitter {
   background-color: #c0c0c0;
   position: absolute;
@@ -70,14 +76,45 @@
   border-color: #000000;
 }
 .splitter.splitter-invisible {
-  background: none;
-  border: none;
-  box-shadow: none;
+  background: none!important;
+  border: none!important;
+  box-shadow: none!important;
 }
 .splitter.splitter-invisible .splitter_handle,
 .splitter.splitter-handle-none .splitter_handle {
   display: none;
 }
+.splitter-vertical > .splitter {
+  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 {
+  top: 50%;
+  margin-top: -25px;
+  height: 50px;
+}
+.splitter-vertical > .splitter.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 {
+  border-color: #666666;
+}
+.splitter-vertical > .splitter.splitter-handle-default > .splitter_handle:active {
+  border-color: #000000;
+}
+.splitter-vertical > .splitter.splitter-handle-bar > .splitter_handle {
+  width: 3px;
+}
+.splitter-vertical > .splitter.splitter-handle-block > .splitter_handle {
+  width: 5px;
+}
 .splitter-horizontal > .splitter {
   border-top: 1px solid #eeeeee;
   border-bottom: 1px solid #666666;
@@ -110,37 +147,6 @@
   height: 5px;
   margin-top: 1px;
 }
-.splitter-vertical > .splitter {
-  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 {
-  top: 50%;
-  margin-top: -25px;
-  height: 50px;
-}
-.splitter-vertical > .splitter.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 {
-  border-color: #666666;
-}
-.splitter-vertical > .splitter.splitter-handle-default > .splitter_handle:active {
-  border-color: #000000;
-}
-.splitter-vertical > .splitter.splitter-handle-bar > .splitter_handle {
-  width: 3px;
-}
-.splitter-vertical > .splitter.splitter-handle-block > .splitter_handle {
-  width: 5px;
-}
 .splitter_container.splitter-active > .splitter {
   z-index: 1000;
   /* Important to keep z-index of active splitter above .splitterMask. */

diff --git a/css/jquery.enhsplitter.less b/css/jquery.enhsplitter.less
@@ -1,7 +1,7 @@
 /*!
  * jQuery Enhanced Splitter Plugin
  * LESS / CSS File
- * Version 1.0.0
+ * Version 1.1.0
  *
  * https://github.com/hiltonjanfield/jquery.enhsplitter
  *
@@ -70,6 +70,14 @@
     }
 
   }
+
+  &.splitter-fixed > .splitter {
+    cursor: default;
+  }
+
+  &.splitter-handle-disabled > .splitter > .splitter_handle {
+    cursor: inherit;
+  }
 }
 
 .splitter {
@@ -98,9 +106,9 @@
   }
 
   &.splitter-invisible {
-    background: none;
-    border: none;
-    box-shadow: none;
+    background: none!important;
+    border: none!important;
+    box-shadow: none!important;
   }
 
   &.splitter-invisible,
@@ -111,25 +119,26 @@
   }
 }
 
-.splitter-horizontal {
+.splitter-vertical {
   > .splitter {
-    border-top: 1px solid @splitter_highlight;
-    border-bottom: 1px solid @splitter_shadow;
-    cursor: ns-resize;
-    z-index: 800;
-    width: 100%;
-    height: @splitter_size;
+    border-left: 1px solid @splitter_highlight;
+    border-right: 1px solid @splitter_shadow;
+    cursor: ew-resize;
+    z-index: 900;
+    width: @splitter_size;
+    height: 100%;
 
     > .splitter_handle {
-      width: @handle_size;
+      top: 50%;
+      margin-top: -25px;
+      height: @handle_size;
     }
 
     &.splitter-handle-default {
       > .splitter_handle {
-        height: 3px;
-        margin-top: 1px;
-        border-top: 1px solid @handle_color;
-        border-bottom: 1px solid @handle_color;
+        width: 3px;
+        border-left: 1px solid @handle_color;
+        border-right: 1px solid @handle_color;
         background-color: transparent;
 
         &:hover {
@@ -144,40 +153,37 @@
 
     &.splitter-handle-bar {
       > .splitter_handle {
-        height: 3px;
-        margin-top: 1px;
+        width: 3px;
       }
     }
 
     &.splitter-handle-block {
       > .splitter_handle {
-        height: @splitter_size - 2;
-        margin-top: 1px;
+        width: @splitter_size - 2;
       }
     }
   }
 }
 
-.splitter-vertical {
+.splitter-horizontal {
   > .splitter {
-    border-left: 1px solid @splitter_highlight;
-    border-right: 1px solid @splitter_shadow;
-    cursor: ew-resize;
-    z-index: 900;
-    width: @splitter_size;
-    height: 100%;
+    border-top: 1px solid @splitter_highlight;
+    border-bottom: 1px solid @splitter_shadow;
+    cursor: ns-resize;
+    z-index: 800;
+    width: 100%;
+    height: @splitter_size;
 
     > .splitter_handle {
-      top: 50%;
-      margin-top: -25px;
-      height: @handle_size;
+      width: @handle_size;
     }
 
     &.splitter-handle-default {
       > .splitter_handle {
-        width: 3px;
-        border-left: 1px solid @handle_color;
-        border-right: 1px solid @handle_color;
+        height: 3px;
+        margin-top: 1px;
+        border-top: 1px solid @handle_color;
+        border-bottom: 1px solid @handle_color;
         background-color: transparent;
 
         &:hover {
@@ -192,13 +198,15 @@
 
     &.splitter-handle-bar {
       > .splitter_handle {
-        width: 3px;
+        height: 3px;
+        margin-top: 1px;
       }
     }
 
     &.splitter-handle-block {
       > .splitter_handle {
-        width: @splitter_size - 2;
+        height: @splitter_size - 2;
+        margin-top: 1px;
       }
     }
   }