Implement and document 'dots' handle style.

hiltonjanfield · Sep 14, 2015 · 5067a6e · 5067a6e
1 parent e923ac2
commit 5067a6e
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 3 deletions.
diff --git a/css/jquery.enhsplitter.css b/css/jquery.enhsplitter.css
@@ -118,6 +118,14 @@
 .splitter-vertical > .splitter_bar.splitter-handle-block > .splitter_handle {
   width: 5px;
 }
+.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle {
+  background-color: #c0c0c0;
+  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-horizontal > .splitter_bar {
   border-top: 1px solid #eeeeee;
   border-bottom: 1px solid #666666;
@@ -153,6 +161,15 @@
   height: 5px;
   margin-top: 1px;
 }
+.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
+  height: 100%;
+  background-color: #c0c0c0;
+  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_container.splitter-active > .splitter_bar {
   z-index: 1000;
   /* Important to keep z-index of active splitter above .splitterMask. */
@@ -165,6 +182,12 @@
 .splitter_container.splitter-active > .splitter_bar.splitter-handle-block > .splitter_handle {
   background-color: #000000;
 }
+.splitter_container.splitter-active.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle {
+  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_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_mask {
   position: fixed;
   left: 0;

diff --git a/css/jquery.enhsplitter.less b/css/jquery.enhsplitter.less
@@ -163,6 +163,27 @@
         width: @splitter_size - 2;
       }
     }
+
+    &.splitter-handle-dots {
+      > .splitter_handle {
+        background-color: @splitter_color;
+        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),
+        radial-gradient(circle 3px at 50% 70%, @splitter_shadow 1.5px, transparent 2px),
+        radial-gradient(circle 3px at 50% 90%, @splitter_shadow 1.5px, transparent 2px);
+
+        &:hover,
+        &:active {
+          background-image: radial-gradient(circle 3px at 50% 10%, @handle_active 1.5px, transparent 2px),
+          radial-gradient(circle 3px at 50% 30%, @handle_active 1.5px, transparent 2px),
+          radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
+          radial-gradient(circle 3px at 50% 70%, @handle_active 1.5px, transparent 2px),
+          radial-gradient(circle 3px at 50% 90%, @handle_active 1.5px, transparent 2px);
+        }
+      }
+    }
+
   }
 }
 
@@ -211,6 +232,28 @@
         margin-top: 1px;
       }
     }
+
+    &.splitter-handle-dots {
+      > .splitter_handle {
+        height: 100%;
+        background-color: @splitter_color;
+        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),
+        radial-gradient(circle 3px at 70% 50%, @splitter_shadow 1.5px, transparent 2px),
+        radial-gradient(circle 3px at 90% 50%, @splitter_shadow 1.5px, transparent 2px);
+
+        &:hover,
+        &:active {
+          background-image: radial-gradient(circle 3px at 10% 50%, @handle_active 1.5px, transparent 2px),
+          radial-gradient(circle 3px at 30% 50%, @handle_active 1.5px, transparent 2px),
+          radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
+          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);
+        }
+      }
+    }
+
   }
 }
 
@@ -228,6 +271,22 @@
       background-color: @handle_active;
     }
   }
+
+  &.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle {
+    background-image: radial-gradient(circle 3px at 50% 10%, @handle_active 1.5px, transparent 2px),
+    radial-gradient(circle 3px at 50% 30%, @handle_active 1.5px, transparent 2px),
+    radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
+    radial-gradient(circle 3px at 50% 70%, @handle_active 1.5px, transparent 2px),
+    radial-gradient(circle 3px at 50% 90%, @handle_active 1.5px, transparent 2px);
+  }
+
+  &.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
+    background-image: radial-gradient(circle 3px at 10% 50%, @handle_active 1.5px, transparent 2px),
+    radial-gradient(circle 3px at 30% 50%, @handle_active 1.5px, transparent 2px),
+    radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
+    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_mask {

diff --git a/demo.html b/demo.html
@@ -390,16 +390,18 @@ <h1>Options</h1>
 
         <dt>handle</dt>
         <dd>
-            <code>['default'|'bar'|'block'|'none'|&lt;user-defined&gt;]</code>
+            <code>['default'|'stripes'|'bar'|'block'|'dots'|'none'|&lt;user-defined&gt;]</code>
             <code class="default">Default: 'default'</code>
 
             <p>
                 Defines how the the collapse is drawn.
             </p>
             <ul>
-                <li><code>'default'</code> draws a striped handle, as shown in the first two examples above.</li>
+                <li><code>'default'</code> is currently equivalent to 'stripes' but may change in the future.</li>
+                <li><code>'stripes'</code> draws a striped handle, as shown in the first two examples above.</li>
                 <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>'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
@@ -159,6 +159,7 @@ <h1>jquery.enhsplitter Features Tests</h1>
 
     addTest(
             {
+                handle: 'dots',
                 onDragStart: function (e, splitter) {
                     handle = splitter.find('.splitter_handle');
                 },
@@ -171,7 +172,7 @@ <h1>jquery.enhsplitter Features Tests</h1>
                 }
             },
             'Demonstration of onDrag event by setting up a crappy handle size animation.<br>' +
-            'Handle should pulsate in size as mouse moves left/right.<br>' +
+            'Handle should be dotted ("dots" style) and pulsate in size as mouse moves left/right.<br>' +
             'This entire page also demonstrates the onDrag event; an onDrag function is used to show the panel pixel' +
             'sizes when dragging splitters around.'
     );