Disble selection

core-splitter.css

@@ -14,14 +14,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   box-shadow: inset 0 0 2px 1px #ccc;
   cursor: col-resize;
 }
-  
+
 :host(.horizontal) {
   width: auto;
   height: 12px;
   cursor: row-resize;
   background-image: url(handle-h.svg);
 }
-  
+
 :host(:hover, :active) {
   background-color: #ddd;
-}
+}

core-splitter.html

@@ -21,9 +21,9 @@
       <core-splitter direction="left"></core-splitter>
       <div flex>right</div>
     </div>
-    
+
 In the above example, dragging the splitter will resize the _left_ element.  And
-since the parent container is a flexbox and the _right_ element has 
+since the parent container is a flexbox and the _right_ element has
 `flex`, the _right_ elemnt will be auto-resized.
 
 For horizontal splitter set `direction` to "up" or "down".
@@ -43,17 +43,17 @@
 
 <link rel="import" href="../polymer/polymer.html">
 
-<polymer-element name="core-splitter" attributes="direction locked minSize allowOverflow" on-trackstart="{{trackStart}}" on-track="{{track}}">
-    
+<polymer-element name="core-splitter" attributes="direction locked minSize allowOverflow disableSelection" on-trackstart="{{trackStart}}" on-track="{{track}}" on-trackend={{trackEnd}}>
+
 <template>
 
   <link rel="stylesheet" href="core-splitter.css">
-  
+
 </template>
 <script>
 
   Polymer('core-splitter', {
-    
+
     /**
      * Possible values are "left", "right", "up" and "down".
      *
@@ -71,7 +71,7 @@
      * @default 0
      */
     minSize: 0,
-    
+
     /**
      * Locks the split bar so it can't be dragged.
      *
@@ -91,7 +91,16 @@
      * @default false
      */
     allowOverflow: false,
-
+
+    /**
+     * Disables the selection of text while the splitter is being moved
+     *
+     * @attribute disableSelection
+     * @type boolean
+     * @type default false
+     */
+     disableSelection: false,
+
     ready: function() {
       this.directionChanged();
     },
@@ -102,13 +111,13 @@
             this.previousElementSibling.style.overflow = 'hidden';
       }
     },
-    
+
     directionChanged: function() {
       this.isNext = this.direction === 'right' || this.direction === 'down';
       this.horizontal = this.direction === 'up' || this.direction === 'down';
       this.update();
     },
-    
+
     update: function() {
       this.target = this.isNext ? this.nextElementSibling : this.previousElementSibling;
       this.dimension = this.horizontal ? 'height' : 'width';
@@ -122,22 +131,32 @@
       var min = this.target.__splitterMinSize = this.horizontal ? 'minHeight' : 'minWidth';
       this.target.style[min] = this.minSize + 'px';
     },
-    
+
     trackStart: function() {
       this.update();
       this.size = parseInt(getComputedStyle(this.target)[this.dimension]);
+      if (this.disableSelection) {
+        var s = this.parentNode.style;
+        s.webkitUserSelect = s.MozUserSelect = s.msUserSelect = 'none';
+      }
     },
-    
+
     track: function(e) {
       if (this.locked) {
         return;
       }
       var d = e[this.horizontal ? 'dy' : 'dx'];
-      this.target.style[this.dimension] = 
-          this.size + (this.isNext ? -d : d) + 'px';
+      this.target.style[this.dimension] =
+        this.size + (this.isNext ? -d : d) + 'px';
+    },
+    trackEnd: function (e) {
+      if (this.disableSelection) {
+        var s = this.parentNode.style;
+        s.webkitUserSelect = s.MozUserSelect = s.msUserSelect = '';
+      }
     }
-    
+
   });
-  
+
 </script>
 </polymer-element>