Add 'lotsofdots' handle type, and minor fix for 'dots'.

hiltonjanfield · Sep 14, 2015 · baecd7d · baecd7d
1 parent 7dc0180
commit baecd7d
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 8 deletions.
diff --git a/css/jquery.enhsplitter.css b/css/jquery.enhsplitter.css
@@ -5,6 +5,11 @@
  *
  * https://github.com/hiltonjanfield/jquery.enhsplitter
  *
+ * All classes to begin with 'splitter'.
+ * Standard container/object classes use _ separator (.splitter_container, .splitter_panel, etc.)
+ * Modifier/option classes use - separator (.splitter-vertical, .splitter-handle-dots, etc.)
+ *
+ * Do not make changes to the CSS file; edit the LESS file and compile.
  */
 .splitter_container {
   position: relative;
@@ -119,13 +124,25 @@
   width: 5px;
 }
 .splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle {
-  background-color: #c0c0c0;
+  margin-left: -1px;
+  background-color: transparent;
   background-image: radial-gradient(circle 3px at 50% 10%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #666666 1.5px, transparent 2px);
 }
 .splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle:hover,
 .splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle:active {
   background-image: radial-gradient(circle 3px at 50% 10%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #000000 1.5px, transparent 2px);
 }
+.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
+  height: 100px;
+  margin-top: -50px;
+  margin-left: -1px;
+  background-color: transparent;
+  background-image: radial-gradient(circle 1px at 50% 5%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 10%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 15%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 20%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 25%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 30%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 35%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 40%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 45%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 55%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 60%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 65%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 70%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 75%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 80%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 85%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 90%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 95%, #666666 1.5px, transparent 1.5px);
+}
+.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:hover,
+.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:active {
+  background-color: #f0f0f0;
+}
 .splitter-horizontal > .splitter_bar {
   border-top: 1px solid #eeeeee;
   border-bottom: 1px solid #666666;
@@ -163,13 +180,24 @@
 }
 .splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
   height: 100%;
-  background-color: #c0c0c0;
+  margin-top: -1px;
+  background-color: transparent;
   background-image: radial-gradient(circle 3px at 10% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #666666 1.5px, transparent 2px);
 }
 .splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle:hover,
 .splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle:active {
   background-image: radial-gradient(circle 3px at 10% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #000000 1.5px, transparent 2px);
 }
+.splitter-horizontal > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
+  height: 100%;
+  width: 100px;
+  background-color: transparent;
+  background-image: radial-gradient(circle 1px at 5% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 10% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 15% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 20% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 25% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 30% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 35% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 40% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 45% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 55% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 60% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 65% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 70% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 75% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 80% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 85% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 90% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 95% 50%, #666666 1.5px, transparent 1.5px);
+}
+.splitter-horizontal > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:hover,
+.splitter-horizontal > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:active {
+  background-color: #f0f0f0;
+}
 .splitter_container.splitter-active > .splitter_bar {
   z-index: 1000;
   /* Important to keep z-index of active splitter above .splitterMask. */
@@ -188,6 +216,9 @@
 .splitter_container.splitter-active.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
   background-image: radial-gradient(circle 3px at 10% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #000000 1.5px, transparent 2px);
 }
+.splitter_container.splitter-active.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
+  background-color: #f0f0f0;
+}
 .splitter_mask {
   position: fixed;
   left: 0;

diff --git a/css/jquery.enhsplitter.less b/css/jquery.enhsplitter.less
@@ -5,6 +5,11 @@
  *
  * https://github.com/hiltonjanfield/jquery.enhsplitter
  *
+ * All classes to begin with 'splitter'.
+ * Standard container/object classes use _ separator (.splitter_container, .splitter_panel, etc.)
+ * Modifier/option classes use - separator (.splitter-vertical, .splitter-handle-dots, etc.)
+ *
+ * Do not make changes to the CSS file; edit the LESS file and compile.
  */
 
 @splitter_color: silver;
@@ -166,7 +171,8 @@
 
     &.splitter-handle-dots {
       > .splitter_handle {
-        background-color: @splitter_color;
+        margin-left: -1px;
+        background-color: transparent;
         background-image: radial-gradient(circle 3px at 50% 10%, @splitter_shadow 1.5px, transparent 2px),
         radial-gradient(circle 3px at 50% 30%, @splitter_shadow 1.5px, transparent 2px),
         radial-gradient(circle 3px at 50% 50%, @splitter_shadow 1.5px, transparent 2px),
@@ -184,6 +190,38 @@
       }
     }
 
+    &.splitter-handle-lotsofdots {
+      > .splitter_handle {
+        height: 100px;
+        margin-top: -50px;
+        margin-left: -1px;
+        background-color: transparent;
+        background-image: radial-gradient(circle 1px at 50% 5%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 10%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 15%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 20%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 25%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 30%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 35%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 40%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 45%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 55%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 60%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 65%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 70%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 75%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 80%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 85%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 90%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 95%, @splitter_shadow 1.5px, transparent 1.5px);
+
+        &:hover,
+        &:active {
+          background-color: #f0f0f0;
+        }
+      }
+    }
   }
 }
 
@@ -236,7 +274,8 @@
     &.splitter-handle-dots {
       > .splitter_handle {
         height: 100%;
-        background-color: @splitter_color;
+        margin-top: -1px;
+        background-color: transparent;
         background-image: radial-gradient(circle 3px at 10% 50%, @splitter_shadow 1.5px, transparent 2px),
         radial-gradient(circle 3px at 30% 50%, @splitter_shadow 1.5px, transparent 2px),
         radial-gradient(circle 3px at 50% 50%, @splitter_shadow 1.5px, transparent 2px),
@@ -254,6 +293,37 @@
       }
     }
 
+    &.splitter-handle-lotsofdots {
+      > .splitter_handle {
+        height: 100%;
+        width: 100px;
+        background-color: transparent;
+        background-image: radial-gradient(circle 1px at 5% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 10% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 15% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 20% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 25% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 30% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 35% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 40% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 45% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 55% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 60% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 65% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 70% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 75% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 80% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 85% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 90% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 95% 50%, @splitter_shadow 1.5px, transparent 1.5px);
+
+        &:hover,
+        &:active {
+          background-color: #f0f0f0;
+        }
+      }
+    }
   }
 }
 
@@ -287,6 +357,10 @@
     radial-gradient(circle 3px at 70% 50%, @handle_active 1.5px, transparent 2px),
     radial-gradient(circle 3px at 90% 50%, @handle_active 1.5px, transparent 2px),
   }
+
+  &.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
+    background-color: #f0f0f0;
+  }
 }
 
 .splitter_mask {

diff --git a/demo.html b/demo.html
@@ -390,7 +390,7 @@ <h1>Options</h1>
 
         <dt>handle</dt>
         <dd>
-            <code>['default'|'stripes'|'bar'|'block'|'dots'|'none'|&lt;user-defined&gt;]</code>
+            <code>['default'|'stripes'|'bar'|'block'|'dots'|'lotsofdots'|'none'|&lt;user-defined&gt;]</code>
             <code class="default">Default: 'default'</code>
 
             <p>
@@ -402,6 +402,7 @@ <h1>Options</h1>
                 <li><code>'bar'</code> draws a narrow grey bar, as shown in the third example above.</li>
                 <li><code>'block'</code> draws a wide grey block that fills the width of the splitter.</li>
                 <li><code>'dots'</code> draws five small equidistant dots with no border.</li>
+                <li><code>'lotsofdots'</code> draws a series of small dots.</li>
                 <li><code>'none'</code> hides the handle completely, disabling it. This effect is also achieved
                     when setting <code>{invisible: true}</code>; it is not necessary to set both.
                 </li>

diff --git a/test.html b/test.html
@@ -128,10 +128,11 @@ <h1>jquery.enhsplitter Features Tests</h1>
     );
 
     addTest(
-            {rightMinSize: -10, position: '120%', splitterSize: 13, handle: 'block'},
-            'Attempt to break limit and position settings.<br>' +
+            {rightMinSize: -10, position: '120%', splitterSize: 13, handle: 'lotsofdots'},
+            'Touch screen example, plus attempt to break limit and position settings (out of range).<br>' +
             'Splitter should start within the container (at the edge, having been restricted to 100%), and remain unable to go beyond the edges.<br>' +
-            'Splitter bar itself should be twice as wide (13 pixels vs. default 7) but still remain fully within the panel.'
+            'Splitter bar itself should be twice as wide (13 pixels vs. default 7) but still remain fully within the panel.<br>' +
+            'Splitter handle should be "lotsofdots" style, twice as tall as normal with a line of dots. Despite its narrow appearance, this handle takes up the full width of the splitter and is easier to hit on touch screens.'
     );
 
     addTest(