Skip to content
This repository was archived by the owner on Mar 13, 2018. It is now read-only.

Disable selection when dragging the splitter. #4

Open
arv wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Disable selection when dragging the splitter. #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 8 additions & 23 deletions core-splitter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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".

Expand All @@ -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}}">
Copy link
Copy Markdown
Contributor

@frankiefu frankiefu Jul 9, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is better to use on-down here for both mouse and touch events


<template>

Expand Down Expand Up @@ -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();
},
Expand Down Expand Up @@ -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) {
Expand All @@ -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) {
Copy link
Copy Markdown
Author

@arv arv Jul 9, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was surprised that we do not use leading/trailing underscores for these. They are clearly not part of any public API and it would be nice if we could mark them as such.

e.preventDefault();
}
});

</script>
Expand Down
32 changes: 16 additions & 16 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,54 +10,54 @@
<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>
<div>left</div>
<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>
Expand All @@ -67,16 +67,16 @@
<div flex>3</div>
</div>
</div>

<br>

<div class="container" horizontal layout>
<div id="box5">left</div>
<core-splitter direction="left"></core-splitter>
<div flex>center</div>
<core-splitter direction="right"></core-splitter>
<div id="box6">right</div>
</div>

</body>
</html>