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

Drag events on tracks with new style

Browse Source
This commit is contained in:
James Barnsley
2018-11-09 22:47:55 +13:00
parent 2dbdd42143
commit 5fa7e2fe09
11 changed files with 255 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/js/components/List.js
View File

@ -95,6 +95,14 @@ class List extends React.Component{
class_name += " list__item--has-middle-column";
}
if (this.props.thumbnail){
class_name += " list__item--has-thumbnail";
}
if (this.props.details){
class_name += " list__item--has-details";
}
return (
<div
className={class_name}

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

@ -183,14 +183,8 @@ export default class Track extends React.Component{
var track = this.props.track;
var className = 'list__item list__item--track mouse-draggable mouse-selectable mouse-contextable';
if (this.props.selected) className += ' list__item--selected';
if (this.props.can_sort) className += ' list__item--can-sort';
if (track.type !== undefined) className += ' list__item--'+track.type;
if (track.playing) className += ' list__item--playing';
if (this.state.hover) className += ' list__item--hover';
let track_details = [];
let track_actions = [];
var track_details = [];
var track_actions = [];
if (track.artists){
track_details.push(
@ -246,7 +240,7 @@ export default class Track extends React.Component{
var track_middle_column = (
<div className="list__item__column__item list__item__column__item--added">
<span className="by">{track.added_by} </span>
<span className="from">(from {link})</span>
<span className="from">from {link}</span>
</div>
);
@ -262,7 +256,7 @@ export default class Track extends React.Component{
// If we're touchable, and can sort this tracklist
var drag_zone = null;
if (helpers.isTouchDevice() && this.props.can_sort){
className += " has-touch-drag-zone"
className += " list__item--has-drag-zone"
drag_zone = (
<span
@ -273,9 +267,13 @@ export default class Track extends React.Component{
);
}
if (track_middle_column){
className += " list__item--has-middle-column";
}
if (this.props.selected) className += ' list__item--selected';
if (this.props.can_sort) className += ' list__item--can-sort';
if (track.type !== undefined) className += ' list__item--'+track.type;
if (track.playing) className += ' list__item--playing';
if (this.state.hover) className += ' list__item--hover';
if (track_middle_column) className += " list__item--has-middle-column";
if (track_details.length > 0) className += " list__item--has-details";
return (
<ErrorBoundary>
@ -306,9 +304,9 @@ export default class Track extends React.Component{
{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
{track.playing ? <Icon className={"js--"+this.props.play_state} name="playing" type="css"></Icon> : null}
</div>
<ul className="list__item__column__item--details">
{track_details ? <ul className="list__item__column__item--details">
{track_details}
</ul>
</ul> : null}
</div>
{track_middle_column ? <div className="list__item__column list__item__column--middle">{track_middle_column}</div> : null}
</div>

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

@ -134,7 +134,7 @@ class TrackList extends React.Component{
let touch = e.touches[0];
let over = $(document.elementFromPoint(touch.clientX, touch.clientY));
if (!over.is('.track')){
over = over.closest('.track');
over = over.closest('.list__item--track');
}
$(document).find('.touch-drag-hover').removeClass('touch-drag-hover');
if (over.length > 0){
@ -153,12 +153,12 @@ class TrackList extends React.Component{
if (this.touch_dragging_tracks_keys){
let touch = e.changedTouches[0];
let over = $(document.elementFromPoint(touch.clientX, touch.clientY));
if (!over.is('.track')){
over = over.closest('.track');
if (!over.is('.list__item--track')){
over = over.closest('.list__item--track');
}
if (over.length > 0){
let siblings = over.parent().children('.track');
let dropped_at = siblings.index(over) - 1;
let siblings = over.parent().children('.list__item--track');
let dropped_at = siblings.index(over);
if (this.props.reorderTracks !== undefined){
this.props.reorderTracks(helpers.arrayOf('index',this.digestTracksKeys()),dropped_at);
@ -389,7 +389,7 @@ class TrackList extends React.Component{
return null;
}
var className = 'list track-list '+this.props.context
var className = 'list list--tracks '+this.props.context
if (this.props.className){
className += ' '+this.props.className
}