From 247715d59066794233c98ae51833776505697787 Mon Sep 17 00:00:00 2001
From: Erik Arvidsson <arv@chromium.org>
Date: Wed, 9 Jul 2014 19:03:35 -0400
Subject: [PATCH] Disable selection when dragging the splitter.

Use preventDefault in mousedown instead of mutating the style
---
 core-splitter.html | 31 ++++++++-----------------------
 demo.html          | 32 ++++++++++++++++----------------
 2 files changed, 24 insertions(+), 39 deletions(-)
diff --git a/core-splitter.html b/core-splitter.html
index 15daa98..abdaa83 100644
--- a/core-splitter.html
+++ b/core-splitter.html
@@ -8,7 +8,7 @@
 -->
 
 <!--
-`core-splitter` provides a spilt bar and dragging on the split bar
+`core-splitter` provides a split bar and dragging on the split bar
 will resize the sibling element.  Use its `direction` property to indicate
 which sibling element to be resized and the orientation.  Usually you would want
 to use `core-splitter` along with flex layout so that the other sibling
@@ -24,7 +24,7 @@
 
 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
-`flex`, the _right_ elemnt will be auto-resized.
+`flex`, the _right_ element will be auto-resized.
 
 For horizontal splitter set `direction` to "up" or "down".
 
@@ -43,7 +43,8 @@
 
 <link rel="import" href="../polymer/polymer.html">
 
-<polymer-element name="core-splitter" attributes="direction locked minSize allowOverflow disableSelection" on-trackstart="{{trackStart}}" on-track="{{track}}" on-trackend={{trackEnd}}>
+<polymer-element name="core-splitter" attributes="direction locked minSize allowOverflow"
+    on-trackstart="{{trackStart}}" on-track="{{track}}" on-mousedown="{{preventSelection}}">
 
 <template>
 
@@ -92,15 +93,6 @@
      */
     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();
     },
@@ -135,10 +127,6 @@
     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) {
@@ -147,15 +135,12 @@
       }
       var d = e[this.horizontal ? 'dy' : 'dx'];
       this.target.style[this.dimension] =
-        this.size + (this.isNext ? -d : d) + 'px';
+          this.size + (this.isNext ? -d : d) + 'px';
     },
-    trackEnd: function (e) {
-      if (this.disableSelection) {
-        var s = this.parentNode.style;
-        s.webkitUserSelect = s.MozUserSelect = s.msUserSelect = '';
-      }
-    }
 
+    preventSelection: function(e) {
+      e.preventDefault();
+    }
   });
 
 </script>
diff --git a/demo.html b/demo.html
index 2cdb9d6..bc13332 100644
--- a/demo.html
+++ b/demo.html
@@ -10,36 +10,36 @@
 <html>
 <head>
   <title>core-splitter</title>
-  
+
   <script src="../platform/platform.js"></script>
-  
+
   <link rel="import" href="core-splitter.html">
-  
+
   <style>
-  
+
     body {
       -webkit-user-select: none;
       -moz-user-select: none;
       -webkit-tap-highlight-color: rgba(0,0,0,0);
       margin: 24px;
     }
-    
+
     .container {
       width: 400px;
       height: 200px;
       border: 4px solid #aaa;
     }
-    
+
     #box1, #box3, #box5, #box6 {
       width: 100px;
     }
-    
+
     #box2, #box4 {
       height: 40px;
     }
-    
+
   </style>
-  
+
 </head>
 <body unresolved>
   <div class="container" horizontal layout>
@@ -47,17 +47,17 @@
     <core-splitter direction="left"  minSize="128"></core-splitter>
     <div flex>right</div>
   </div>
-  
+
   <br>
-  
+
   <div class="container" vertical layout>
     <div id="box2">top</div>
     <core-splitter direction="up"></core-splitter>
     <div flex>bottom</div>
   </div>
-  
+
   <br>
-  
+
   <div class="container" horizontal layout>
     <div id="box3">1</div>
     <core-splitter direction="left"></core-splitter>
@@ -67,9 +67,9 @@
       <div flex>3</div>
     </div>
   </div>
-  
+
   <br>
-  
+
   <div class="container" horizontal layout>
     <div id="box5">left</div>
     <core-splitter direction="left"></core-splitter>
@@ -77,6 +77,6 @@
     <core-splitter direction="right"></core-splitter>
     <div id="box6">right</div>
   </div>
-  
+
 </body>
 </html>
