secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Touchend detection of taps, removes need for select zone

Browse Source
This commit is contained in:
James Barnsley
2017-12-19 21:14:01 +13:00
parent 46381d2319
commit f96437e8a9
3 changed files with 47 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/js/components/Track.js
View File

@ -158,11 +158,29 @@ export default class Track extends React.Component{
handleTouchEnd(e){
var target = $(e.target);
var timestamp = Math.floor(Date.now());
var tap_distance_threshold = 10; // Max distance (px) between touchstart and touchend to qualify as a tap
var tap_time_threshold = 200; // Max time (ms) between touchstart and touchend to qualify as a tap
var end_position = {
x: e.changedTouches[0].clientX,
y: e.changedTouches[0].clientY
}
// Clicked a nested link (ie Artist name), so no dragging required
if (!target.is('a')){
e.preventDefault();
}
// Too long between touchstart and touchend
if (this.start_time + tap_time_threshold < timestamp){
return false;
}
if (this.start_position.x + tap_distance_threshold > end_position.x &&
this.start_position.x - tap_distance_threshold < end_position.x &&
this.start_position.y + tap_distance_threshold > end_position.y &&
this.start_position.y - tap_distance_threshold < end_position.y){
this.props.handleSelection(e, true);
}
}
handleContextMenu(e){
@ -299,27 +317,17 @@ export default class Track extends React.Component{
<ContextMenuTrigger key="context" onTrigger={e => this.handleContextMenu(e)} />
)
if (this.props.mini_zones){
// If we're touchable, and can sort this tracklist
if (helpers.isTouchDevice() && this.props.can_sort){
className += " has-touch-drag-zone"
// Select zone handles selection events only
// We use onClick to capture touch as well as mouse events in one tidy parcel
track_actions.push(
<span
className="select-zone touch-selectable mouse-selectable"
key="select-zone">
{this.props.selected ? <FontAwesome name="check" className="selected" fixedWidth /> : null}
className="drag-zone touch-draggable mouse-draggable"
key="drag-zone">
<FontAwesome name="bars" fixedWidth />
</span>
)
if (this.props.can_sort){
track_actions.push(
<span
className="drag-zone touch-draggable mouse-draggable"
key="drag-zone">
<FontAwesome name="bars" fixedWidth />
</span>
)
}
}
return (

2
src/js/components/TrackList.js
View File

@ -184,8 +184,6 @@ class TrackList extends React.Component{
handleContextMenu(e, track_key = null){
let selected_tracks = this.props.selected_tracks;
console.log(selected_tracks);
// Not already selected, so select it prior to triggering menu
if (track_key && !selected_tracks.includes(track_key)){
selected_tracks = [track_key];

88
src/scss/components/_lists.scss
View File

@ -118,6 +118,29 @@
margin-top: -3px;
background: transparent;
}
&.has-touch-drag-zone {
padding-left: 45px;
.drag-zone {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 34px;
font-size: 14px;
display: block;
color: $mid_grey;
.fa {
position: absolute;
top: 50%;
left: 10px;
margin-top: -6px;
pointer-events: none;
}
}
}
}
}
@ -240,71 +263,6 @@
}
}
.touch &.track-list {
.list-item {
&.can-sort {
padding-left: 70px !important;
}
&:not(.can-sort){
padding-left: 45px !important;
}
.select-zone {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 34px;
font-size: 8px;
display: block;
.fa {
position: absolute;
top: 50%;
left: 17px;
margin-top: -3px;
pointer-events: none;
color: $white;
z-index: 1;
}
&:after {
display: block;
content: '';
border: 1px solid $mid_grey;
border-radius: 50%;
width: 14px;
height: 14px;
position: absolute;
top: 50%;
left: 14px;
margin-top: -7px;
}
}
.drag-zone {
position: absolute;
top: 0;
left: 34px;
height: 100%;
width: 34px;
font-size: 14px;
display: block;
color: $mid_grey;
.fa {
position: absolute;
top: 50%;
left: 6px;
margin-top: -6px;
pointer-events: none;
}
}
}
}
@include responsive($bp_medium){
.list-item {