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

Dragging vs context menu vs selection vs ctrl

Browse Source
This commit is contained in:
James Barnsley
2016-11-16 14:58:08 +13:00
parent 98770441cc
commit 86b9665ec8
9 changed files with 108 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,21 +12,15 @@ export default class Track extends React.Component{
super(props);
}
handleClick(e){
var target = $(e.target);
if( !target.is('a') && target.closest('a').length <= 0 ){
this.props.handleClick(e);
}
}
handleDoubleClick(e){
return this.props.handleDoubleClick(e);
}
handleMouseDown(e){
// if we're not selected, perform click behavior [first] << this is assumed
if( !this.props.track.selected ) this.handleClick(e)
this.props.handleMouseDown(e)
var target = $(e.target);
if( !target.is('a') && target.closest('a').length <= 0 ){
this.props.handleMouseDown(e);
}
}
handleMouseUp(e){
@ -35,11 +29,6 @@ export default class Track extends React.Component{
handleContextMenu(e){
e.preventDefault();
// trigger a regular click event
if( !this.props.track.selected ) this.handleClick(e);
// notify our tracklist
this.props.handleContextMenu(e);
}
@ -56,12 +45,11 @@ export default class Track extends React.Component{
className={className}
onMouseDown={ e => this.handleMouseDown(e) }
onMouseUp={ e => this.handleMouseUp(e) }
onClick={ e => this.handleClick(e) }
onDoubleClick={ e => this.handleDoubleClick(e) }
onContextMenu={ e => this.handleContextMenu(e) }>
{ this.props.track.selected ? <FontAwesome name="check" className="select-state" fixedWidth /> : null }
<span className="col name">
{ track.name ? track.name : track.uri }
{ track.name ? track.name : <span className="grey-text">{track.uri}</span> }
</span>
<span className="col artists">
{ track.artists ? <ArtistSentence artists={track.artists} /> : '-' }

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

@ -48,9 +48,55 @@ class TrackList extends React.Component{
}
}
handleClick( e, index ){
handleDoubleClick(e, index){
if( this.props.context_menu.show ) this.props.uiActions.hideContextMenu()
this.playTracks()
}
handleMouseDown(e, index){
if( this.props.context_menu.show ) this.props.uiActions.hideContextMenu()
if( !this.state.tracks[index].selected && !this.isRightClick(e) && !e.ctrlKey ) this.toggleTrackSelections(e, index)
var selected_tracks = this.selectedTracks()
this.props.uiActions.dragStart( e, this.props.context, selected_tracks, this.tracksIndexes(selected_tracks) )
}
handleMouseUp(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)
// 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 );
}
}
}
handleContextMenu(e, index){
var selected_tracks = this.selectedTracks()
var data = {
selected_tracks: selected_tracks,
selected_tracks_indexes: this.tracksIndexes( selected_tracks )
}
this.props.uiActions.showContextMenu( e, this.props.context, data )
}
toggleTrackSelections(e, index){
var tracks = this.state.tracks
if( e.ctrlKey ){
@ -83,34 +129,12 @@ class TrackList extends React.Component{
this.setState({ tracks: tracks, lastSelectedTrack: index })
}
handleDoubleClick(e, index){
if( this.props.context_menu.show ) this.props.uiActions.hideContextMenu()
this.playTracks()
}
handleMouseDown(e, index){
var selected_tracks = this.selectedTracks()
this.props.uiActions.dragStart( e, this.props.context, selected_tracks, this.tracksIndexes(selected_tracks) )
}
handleMouseUp(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 );
}
}
}
handleContextMenu(e, index){
var selected_tracks = this.selectedTracks()
var data = {
selected_tracks: selected_tracks,
selected_tracks_indexes: this.tracksIndexes( selected_tracks )
}
this.props.uiActions.showContextMenu( e, this.props.context, data )
isRightClick(e){
if( 'which' in e )
return e.which == 3
if( 'button' in e )
return e.button == 2
return false
}
keyifyTracks( tracks ){