Add track with drag-n-drop
This commit is contained in:
magnolia-fan
parent
f8d86216c8
commit
87dab3df57
|
|
@ -49,30 +49,31 @@ class window.Player
|
|||
self.setTrack next
|
||||
false
|
||||
|
||||
addTrack: (item, autoplay) ->
|
||||
if typeof item in ["number", "string"]
|
||||
item = @library[item]
|
||||
addTrack: (track, autoplay) ->
|
||||
if typeof track in ["number", "string"]
|
||||
track = @library[track]
|
||||
if not autoplay?
|
||||
autoplay = false
|
||||
initial_count = $('.playlist li').length
|
||||
len = parseInt(item.length, 10)
|
||||
m = Math.floor(len / 60)
|
||||
s = len - Math.floor(len / 60) * 60
|
||||
duration = m + ':' + (if s < 10 then '0' else '') + s
|
||||
item_class = (if item.available == false then 'unavailable' else '')
|
||||
$('.playlist').append "
|
||||
<li id='i#{Math.round(Math.random() * 999999)}' data-id='#{item.id}' class='#{item_class}'>
|
||||
<div class='song-duration'>#{duration}</div>
|
||||
<div class='label important remove'>remove</div>
|
||||
<div class='artist-name'><a class='data artist'>#{item.artist}</a></div>
|
||||
<div class='song-title'>#{item.name}</div>
|
||||
</li>"
|
||||
_player.playlist.push item
|
||||
$('.playlist').sortable axis: 'y', cursor: 'move'
|
||||
$('.playlist').append this.generateTrackHtml track
|
||||
$('.playlist').sortable "refresh"
|
||||
if initial_count == 0 and not _player.hasTrack()
|
||||
_player.setTrack($('.playlist li').first().attr('id').split('i')[1])
|
||||
false
|
||||
|
||||
generateTrackHtml: (track) ->
|
||||
len = parseInt(track.length, 10)
|
||||
m = Math.floor(len / 60)
|
||||
s = len - Math.floor(len / 60) * 60
|
||||
duration = m + ':' + (if s < 10 then '0' else '') + s
|
||||
item_class = (if track.available == false then 'unavailable' else '')
|
||||
"<li id='i#{Math.round(Math.random() * 999999)}' data-id='#{track.id}' class='#{item_class}'>
|
||||
<div class='song-duration'>#{duration}</div>
|
||||
<div class='label important remove'>remove</div>
|
||||
<div class='artist-name'><a class='data artist'>#{track.artist}</a></div>
|
||||
<div class='song-title'>#{track.name}</div>
|
||||
</li>"
|
||||
|
||||
getDataFromLi: (obj) ->
|
||||
id = $(obj).attr 'data-id'
|
||||
track_name = $(obj).find('.trackname').html()
|
||||
|
|
@ -207,6 +208,9 @@ class window.Player
|
|||
if data.tracks?
|
||||
for track in data.tracks
|
||||
@library[track.id] = track
|
||||
$('.track').draggable
|
||||
helper: 'clone'
|
||||
connectToSortable: '.playlist'
|
||||
false
|
||||
|
||||
|
||||
|
|
@ -242,6 +246,25 @@ $('.do_empty').live 'click', ->
|
|||
|
||||
# Playlist Actions
|
||||
|
||||
$ ->
|
||||
$('.playlist').sortable
|
||||
distance: 5
|
||||
axis: 'y'
|
||||
cursor: 'move'
|
||||
stop: (e, ui) ->
|
||||
if $(ui.item).prop("tagName") == "TR"
|
||||
ui.item.replaceWith(_player.generateTrackHtml(_player.library[$(ui.item).find('.s-add').data('id')]))
|
||||
false
|
||||
$('.playlist').droppable
|
||||
accept: '.track'
|
||||
drop: (e, ui) ->
|
||||
$(this).sortable "refresh"
|
||||
window.setTimeout ->
|
||||
$('.playlist tr.track').remove()
|
||||
, 0
|
||||
false
|
||||
false
|
||||
|
||||
$('.playlist li .remove').live 'click', (e) ->
|
||||
$li = $(this).parent()
|
||||
if $li.hasClass 'now'
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@
|
|||
|
||||
.playlist {
|
||||
margin: 20px 0 0 0;
|
||||
min-height: 300px;
|
||||
li {
|
||||
list-style: none;
|
||||
background-color: #ffffff;
|
||||
|
|
@ -117,4 +118,11 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
tr.track {
|
||||
display: block !important;
|
||||
background-color: #fff;
|
||||
width: 280px;
|
||||
height: 47px;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
%small= " ("+album[:year].to_s+")"
|
||||
%table.zebra-striped.tracklist
|
||||
- album[:tracks].each do |track|
|
||||
%tr{ class: (track[:available] == false ? "unavailable" : nil) }
|
||||
%tr.track{ class: (track[:available] == false ? "unavailable" : nil) }
|
||||
%td.song-title= track[:name]
|
||||
%td.song-duration
|
||||
.s-duration= (track[:duration] != '0:00' ? track[:duration] : ' '.html_safe)
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
%h3= @data[:name]
|
||||
%table.zebra-striped.tracklist
|
||||
- @data[:tracks].each do |track|
|
||||
%tr{ class: (track[:available] == false ? "unavailable" : nil) }
|
||||
%tr.track{ class: (track[:available] == false ? "unavailable" : nil) }
|
||||
%td.album-pic
|
||||
%img{ src: track[:album_pic]}
|
||||
%td.song-title
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
<div class="textpage">
|
||||
Now back to the good part!
|
||||
</div>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<div class="search-container">
|
||||
<form action="" method="post" id="search_form">
|
||||
<input type="text" id="search_field"/>
|
||||
<input type="submit" value="" id="search_button" class="button gray big" data-ls="SEARCH"/>
|
||||
</form>
|
||||
<img class="spinner" src="/images/loader.gif" alt=""/>
|
||||
<div class="artist_loading failed" data-ls="ARTIST_LOADING_FAILED"></div>
|
||||
<div class="artist_loading ok" data-ls="ARTIST_LOADING_IN_PROCESS"></div>
|
||||
<div class="artist_pics"></div>
|
||||
<div class="suggestions">
|
||||
<div data-ls="MISSPELLED"></div>
|
||||
<ul></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<div class="settings-container">
|
||||
<div class="tabs">
|
||||
<div class="left-space"></div>
|
||||
<div class="tab" data-fieldset="account" data-ls="SETTINGS_ACCOUNT"></div>
|
||||
<div class="middle-space"></div>
|
||||
<div class="tab" data-fieldset="lastfm" data-ls="SETTINGS_LASTFM"></div>
|
||||
</div>
|
||||
<div class="form-container"></div>
|
||||
<div class="forms">
|
||||
<div class="account">
|
||||
<div class="form">
|
||||
<div class="field">
|
||||
<div class="label" data-ls="USERNAME"></div>
|
||||
<div class="value"><input name="username" type="text"/></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="label" data-ls="EMAIL"></div>
|
||||
<div class="value"><input name="email" type="text"/></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="label" data-ls="LANG"></div>
|
||||
<div class="value">
|
||||
<select name="lang">
|
||||
<option value="ru">Русский</option>
|
||||
<option value="en">English</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="save">
|
||||
<div class="button gray" data-ls="USELESS_BUTTON"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="logout">
|
||||
<div class="button red" id="vk_logout" data-ls="LOGOUT"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lastfm">
|
||||
<div class="form">
|
||||
<div class="field">
|
||||
<div class="label" data-ls="USERNAME"></div>
|
||||
<div class="value"><input name="username" type="text" disabled="disabled" readonly="readonly" value="" data-ls="NOT_CONNECTED" /></div>
|
||||
<div class="action-button"><div class="lastfm-connect button gray big" data-ls="CONNECT"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<div id="error_page">
|
||||
<h1>WHEE!</h1>
|
||||
<span>We never known anything about this artist<br/>but now we found something interesting.<br/>Please come back in a minute.</span>
|
||||
</div>
|
||||
Loading…
Reference in New Issue