feat(handle): added option to enable a handle on a splitbar for dragging

Author: widmoser

README.md

@@ -100,6 +100,13 @@ Default: `false`
 
 Like `disableToggle` above but only removes the arrows on mobile devices (max-device-width: 480px).
 
+### showHandle
+
+Type: `Boolean`
+Default: `false`
+
+Whether to show a handle in the middle of a splitbar. If toggle is enabled at the same time, the handle is shown between
+the two toggle buttons. The handle has the css class `.ui-splitbar-handle`.
 
 ## Child Attributes
 

src/ui-layout.css

@@ -73,9 +73,13 @@
   overflow-x: hidden;
 }
 
+.ui-layout-column > .ui-splitbar > a:not(.ui-splitbar-handle-container),
+.ui-layout-row > .ui-splitbar > a:not(.ui-splitbar-handle-container) {
+  cursor: pointer;
+}
+
 .ui-layout-column > .ui-splitbar > a,
 .ui-layout-row > .ui-splitbar > a {
-  cursor: pointer;
   text-align: center;
   font-size: 16px;
   color: #aaa;
@@ -127,8 +131,19 @@
   margin-top: 0.45em;
 }
 
+.ui-splitbar-handle {
+  width: 10px;
+  height: 2px;
+  box-shadow: inset 0 0 0 32px, 0 -6px, 0 6px;
+  margin: 12px 0;
+}
+
 /* Allow disabling of icons */
-.no-toggle .ui-splitbar-icon {
+.no-toggle .ui-splitbar-toggle {
+  display: none;
+}
+
+.no-handle .ui-splitbar-handle {
   display: none;
 }
 

src/ui-layout.js

@@ -52,6 +52,9 @@ angular.module('ui.layout', [])
     if (opts.disableMobileToggle) {
       $element.addClass('no-mobile-toggle');
     }
+    if (!opts.showHandle) {
+      $element.addClass('no-handle');
+    }
 
     // Initial global size definition
     opts.sizes = opts.sizes || [];
@@ -422,7 +425,7 @@ angular.module('ui.layout', [])
         el = splitter.element[0].children[0];
       } else {
         splitter = ctrl.containers[index - 1];
-        el = splitter.element[0].children[1];
+        el = splitter.element[0].children[2];
       }
 
       $timeout(function(){
@@ -688,7 +691,7 @@ angular.module('ui.layout', [])
 
         //icon <a> elements
         var prevButton = angular.element(element.children()[0]);
-        var afterButton = angular.element(element.children()[1]);
+        var afterButton = angular.element(element.children()[2]);
 
         //icon <span> elements
         var prevIcon = angular.element(prevButton.children()[0]);
@@ -714,7 +717,7 @@ angular.module('ui.layout', [])
 
           if(previousSplitbar !== null) {
             prevSplitbarBeforeButton = angular.element(previousSplitbar.element.children()[0]);
-            prevSplitbarAfterButton = angular.element(previousSplitbar.element.children()[1]);
+            prevSplitbarAfterButton = angular.element(previousSplitbar.element.children()[2]);
           }
 
           if(ctrl.isUsingColumnFlow) {
@@ -774,7 +777,7 @@ angular.module('ui.layout', [])
 
           if(nextSplitbar !== null) {
             nextSplitbarBeforeButton = angular.element(nextSplitbar.element.children()[0]);
-            nextSplitbarAfterButton = angular.element(nextSplitbar.element.children()[1]);
+            nextSplitbarAfterButton = angular.element(nextSplitbar.element.children()[2]);
           }
 
           if(ctrl.isUsingColumnFlow) {
@@ -947,8 +950,9 @@ angular.module('ui.layout', [])
                 var children = parent.children();
                 var index = ctrl.indexOfElement(element);
                 var splitbar = angular.element('<div ui-splitbar>' +
-                  '<a><span class="ui-splitbar-icon"></span></a>' +
-                  '<a><span class="ui-splitbar-icon"></span></a>' +
+                  '<a><span class="ui-splitbar-icon ui-splitbar-toggle"></span></a>' +
+                  '<a class="ui-splitbar-handle-container"><span class="ui-splitbar-icon ui-splitbar-handle"></span></a>' +
+                  '<a><span class="ui-splitbar-icon ui-splitbar-toggle"></span></a>' +
                   '</div>');
                 if(0 < index && !ctrl.hasSplitbarBefore(scope.container)) {
                   angular.element(children[index-1]).after(splitbar);

test/layout-scenar.spec.js

@@ -141,7 +141,7 @@ function splitMoveTests(description, startEvent, moveEvent, endEvent) {
 
         beforeEach(function() {
           toggleBeforeButton = $splitbar.children()[0];
-          toggleAfterButton = $splitbar.children()[1];
+          toggleAfterButton = $splitbar.children()[2];
         });
 
         it('should exist', function() {