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

Removing touch listeners, use window width instead

Browse Source
This commit is contained in:
James Barnsley
2017-05-17 09:07:09 +12:00
parent 30b5b1674d
commit efd7286916
4 changed files with 99 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -135,8 +135,10 @@ export default class Track extends React.Component{
onMouseUp={ e => this.props.handleMouseUp(e) }
onDoubleClick={ e => this.props.handleDoubleClick(e) }
onContextMenu={ e => this.handleContextMenu(e) }>
{ this.props.track.selected ? <FontAwesome name="check" className="select-state" fixedWidth /> : null }
{ this.props.track.playing ? <FontAwesome name="play" className="play-state" fixedWidth /> : null }
<span className="state-icon">
{ this.props.track.selected ? <FontAwesome name="check" className="selected" fixedWidth /> : null }
{ this.props.track.playing && !this.props.track.selected ? <FontAwesome name="play" className="playing" fixedWidth /> : null }
</span>
{ track_columns }
</div>
);

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

@ -14,16 +14,11 @@ import * as uiActions from '../services/ui/actions'
class TrackList extends React.Component{
constructor(props) {
super(props);
this._touch_threshold = 10
this._touch_x = null
this._touch_y = null
super(props)
this.state = {
tracks: [],
last_selected_track: false,
edit_mode: false
last_selected_track: false
}
this.handleKeyUp = this.handleKeyUp.bind(this)
@ -45,6 +40,25 @@ class TrackList extends React.Component{
this.setState({ tracks: this.keyifyTracks(nextProps.tracks) });
}
/**
* Figure out if our click/touch event is valid and we can act accordingly
*
* @param e = event obj
* @return string
**/
triggerType(e){
var target = $(e.target)
// Wide screen, so no worries
if ($(window).width() > 800){
return 'default'
} else if (target.is('.state-icon') || target.closest('.state-icon').length > 0){
return 'mobile'
}
return false
}
handleKeyUp(e){
if( this.selectedTracks().length <= 0 ) return;
@ -61,29 +75,9 @@ class TrackList extends React.Component{
}
handleTouchStart(e,index){
this._touch_x = Math.round(e.changedTouches[0].pageX)
this._touch_y = Math.round(e.changedTouches[0].pageY)
}
handleTouchEnd(e,index){
var pageX = Math.round(e.changedTouches[0].pageX)
var pageY = Math.round(e.changedTouches[0].pageY)
clearTimeout(this._touch_hold_timer)
// make sure our touch was within the threshold of the touch start
// this helps us differentiate between taps and drags but doesn't consider
// multi-finger touches
if( this.state.edit_mode &&
this._touch_x < ( pageX + this._touch_threshold ) &&
this._touch_x > ( pageX - this._touch_threshold ) &&
this._touch_y < ( pageY + this._touch_threshold ) &&
this._touch_y > ( pageY - this._touch_threshold ) ){
var tracks = this.state.tracks
tracks[index].selected = !tracks[index].selected
this.setState({ tracks: tracks, last_selected_track: index })
}
e.preventDefault()
}
handleDoubleClick(e,index){
@ -92,53 +86,57 @@ class TrackList extends React.Component{
}
handleMouseDown(e,index){
if (this.props.emulate_touch){
this.handleTouchContextMenu(e,index)
}else{
if (this.props.context_menu) this.props.uiActions.hideContextMenu()
if (!this.state.tracks[index].selected && !this.isRightClick(e) && !e.ctrlKey) this.toggleTrackSelections(e, index)
if (this.props.context_menu) this.props.uiActions.hideContextMenu()
var selected_tracks = this.selectedTracks()
this.props.uiActions.dragStart( e, this.props.context, this.props.uri, selected_tracks, this.tracksIndexes(selected_tracks) )
// Regular clicking an un-selected element
// This selects the track before we potentially drag
switch (this.triggerType(e)){
case 'mobile':
// simple toggle
var tracks = this.state.tracks
tracks[index].selected = !tracks[index].selected
this.setState({tracks: tracks, last_selected_track: index})
break
case 'default':
if (!this.state.tracks[index].selected && !this.isRightClick(e) && !e.ctrlKey){
this.toggleTrackSelections(e, index)
}
break
}
var selected_tracks = this.selectedTracks()
this.props.uiActions.dragStart( e, this.props.context, this.props.uri, selected_tracks, this.tracksIndexes(selected_tracks) )
}
handleMouseUp(e,index){
if (this.triggerType(e) == 'default'){
// right-clicking on an un-highlighted track
if (!this.state.tracks[index].selected && this.isRightClick(e)){
this.toggleTrackSelections(e, index)
// right-clicking on an un-highlighted track
if( !this.state.tracks[index].selected && this.isRightClick(e) ){
this.toggleTrackSelections(e, index)
// selected track, regular click
}else if (this.state.tracks[index].selected && !this.isRightClick(e)){
this.toggleTrackSelections(e, index)
// selected track, regular click
}else if( this.state.tracks[index].selected && !this.isRightClick(e) ){
this.toggleTrackSelections(e, index)
// ctrl key
} else if(e.ctrlKey){
this.toggleTrackSelections(e, index)
}
// ctrl key
}else if( e.ctrlKey ){
this.toggleTrackSelections(e, index)
}
if( this.props.dragger && this.props.dragger.active ){
// if this tracklist handles sorting, handle it
if( typeof(this.props.reorderTracks) !== 'undefined' ){
var indexes = this.props.dragger.victims_indexes
return this.props.reorderTracks( indexes, index );
if (this.props.dragger && this.props.dragger.active){
// if this tracklist handles sorting, handle it
if (typeof(this.props.reorderTracks) !== 'undefined'){
var indexes = this.props.dragger.victims_indexes
return this.props.reorderTracks( indexes, index )
}
}
}
}
handleContextMenu(e, native_event = true){
// touch events fired? we assume the user is primarily touching,
// so for touch devices we disable direct context menus
// hybrid devices will only work with touch OR mouse, not both in this case
if (this._touch_x && this._touch_y && native_event){
this.setState({edit_mode: true})
e.preventDefault()
return false
}
var selected_tracks = this.selectedTracks()
var data = {
e: e,
@ -327,9 +325,6 @@ class TrackList extends React.Component{
if (this.props.className){
className += ' '+this.props.className
}
if (this.state.edit_mode){
className += ' edit-mode'
}
return (
<div className={className}>
@ -342,12 +337,12 @@ class TrackList extends React.Component{
key={track.key}
track={track}
context={this.props.context}
handleDoubleClick={ e => self.handleDoubleClick(e, index)}
handleMouseUp={ e => self.handleMouseUp(e, index)}
handleMouseDown={ e => self.handleMouseDown(e, index)}
handleTouchStart={ e => self.handleTouchStart(e, index)}
handleTouchEnd={ e => self.handleTouchEnd(e, index)}
handleContextMenu={ e => self.handleContextMenu(e)} />
handleDoubleClick={e => self.handleDoubleClick(e, index)}
handleMouseUp={e => self.handleMouseUp(e, index)}
handleMouseDown={e => self.handleMouseDown(e, index)}
handleTouchStart={e => self.handleTouchStart(e, index)}
handleTouchEnd={e => self.handleTouchEnd(e, index)}
handleContextMenu={e => self.handleContextMenu(e)} />
}
)
}

5
src/scss/components/_context-menu.scss
View File

@ -249,11 +249,8 @@
}
.list {
.context-menu-trigger {
display: none;
}
&.track-list.edit-mode {
&.track-list {
.context-menu-trigger {
display: block;
position: fixed;

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

@ -22,6 +22,13 @@
background: $yellow !important;
}
.state-icon {
position: absolute;
top: 15px;
left: 15px;
font-size: 10px;
}
:root .notouch:not(.dragging) &:not(.header):not(.no-click):hover {
background: rgba(150,150,150,0.1);
cursor: pointer;
@ -71,35 +78,6 @@
}
}
.select-state {
position: absolute;
top: 15px;
left: 15px;
font-size: 10px;
}
.play-state {
display: none;
position: absolute;
top: 16px;
left: 15px;
font-size: 10px;
}
&.playing {
font-weight: 600;
.play-state {
display: block;
opacity: 1;
}
}
&.playing.selected {
.play-state {
display: none;
}
}
:root .dragging &:hover {
border-top: 3px solid $blue;
margin-top: -3px;
@ -222,13 +200,34 @@
@include responsive( $bp_medium ){
.list-item {
padding: 7px 30px 7px 16px !important;
padding: 7px 30px 7px 48px !important;
.source {
position: static;
float: none;
}
.state-icon {
top: 0;
left: 0;
padding: 19px 17px 15px 17px;
&:after {
display: block;
content: '';
border: 1px solid $darkest_grey;
width: 15px;
height: 15px;
position: absolute;
top: 15px;
left: 15px;
}
.playing {
display: none !important;
}
}
.col {
&.name {
width: 90% !important;
@ -275,13 +274,6 @@
&.header {
display: none;
}
&.track {
.select-state,
.play-state {
display: none !important;
}
}
}
&.queue-track-list {
@ -300,17 +292,5 @@
}
}
}
&.edit-mode {
.list-item {
padding-left: 40px !important;
&.track {
.select-state {
display: block !important;
}
}
}
}
}
}