and append it to $jplayer_playlist
$newSong = $("
" + // added class="li" because it used to be
"" + // "play"
"" +
"" + $.jp_playlist[i].name + "" +
"" +
$.jp_playlist[i].song_credits_html + $.jp_playlist[i].album_credits_html +
"" +
"
" +
"" + // the 'handle' for re-ordering
"" + // the 'delete' button
""+
"")
.data( "index", i ) // Save song's index into the $.jp_playlist array so we can reference it's properties later
.appendTo( $jplayer_playlist )
.qtip({
// show tooltip when song is moused over. Get content dynamically from qtip-song-rollover.php
content: {
url: "/scripts/jplayer/qtip-song-rollover.php",
data: {
song_id: $.jp_playlist[i].song_id,
song_title: $.jp_playlist[i].song_title,
band_name: $.jp_playlist[i].band_name,
album_credits: $.jp_playlist[i].album_credits_html,
song_credits: $.jp_playlist[i].song_credits_html,
album_title: $.jp_playlist[i].album_title,
album_copyright: $.jp_playlist[i].album_copyright
},
method: 'get'
},
show: { when: 'mouseover', delay: 500 },
hide: { when: 'mouseout', fixed: true },
position: {
corner: { target: 'leftMiddle', tooltip: 'rightMiddle' }
},
style: {
border: { width: 3, radius: 10, color: '#E17009'},
width: 250
}
});
// $newSong.find(".credits-scroll").serialScroll({
// items: 'div',
// duration: 2000,
// force: true,
// axis: 'y',
// easing: 'linear',
// lazy: true,// NOTE: when true, you can add/remove/reorder items and the changes are taken into account.
// interval:1, // yeah! I now added auto-scrolling (ba: was 1 initially, changed to 0)
// step:1, // scroll this many items each time
//
// cycle: true,
// event: 'click'
// });
}
};
$.playListInit = function(autoplay) {
var $firstItem = $jplayer_playlist.find("div:first");
if(autoplay) {
$.jp_playListChange( $firstItem );
} else {
playListConfig( $firstItem );
}
};
// Sets up the current track
function playListConfig($liSong) {
// give active css class to new track ($liSong) after removing it from prior active track.
$jplayer_playlist.find(".jplayer_playlist_current").removeClass("jplayer_playlist_current");
$liSong.addClass("jplayer_playlist_current");
if ( $liSong.length > 0) {
playItem = $liSong.data("index");
$("#jquery_jplayer").jPlayer("setFile", $.jp_playlist[playItem].mp3, $.jp_playlist[playItem].ogg);
kMarkedAlready = false; // reset play flag (knerd)
}
}
$.jp_playListChange = function ( $liSong ) {
playListConfig($liSong);
$("#jquery_jplayer").jPlayer("play"); // TODO: re-enable
kpl.trackSong( $liSong ); // adds to the Songs I've Played tracker list..
};
function playListNext() {
var $next = $jplayer_playlist.find("div.jplayer_playlist_current").next();
if ($next.length == 0) {
// last song ...
$("#jquery_jplayer").jPlayer("stop");
}
else {
$.jp_playListChange($next);
}
}
function playListPrev() {
var $prev = $("#jplayer_playlist .ul .li.jplayer_playlist_current").prev();
if ($prev.length == 0) {
// can't go any further back - at first song.
$("#jquery_jplayer").jPlayer("stop");
}
else {
$.jp_playListChange($prev);
}
}
/////// BEGIN: click event bindings for buttons and icons across the different playlist dialogs
//////////// Bindings for playlist buttons Add, Update, Clear ///////
$("#btn-update-playlist").click( kPlaylistButtons.clickUpdatePlaylist );
$("#btn-clear-playlist") .click( kPlaylistButtons.clickClearPlaylist );
$("#btn-add-to-playlist").click( kPlaylistButtons.clickAddToPlaylist );
///////////// Bindings for "playlist manager" dialog (visible when user clicks the 'current playlist' bar ///////////
$("#jp_playlist_manager .playlist .btn-pl-play") .live("click", plManager.clickPlayPlaylist ); // switch player to new playlist
$("#jp_playlist_manager .playlist .btn-pl-share-toggle") .live("click", plManager.shareMyPlaylist ); // will toggle sharedness
$("#jp_playlist_manager .pl-group-playlists .playlist .playlist-title").live("click", plManager.renamePlaylist ); // bring up dialog to rename //
$("#jp_playlist_manager .playlist .btn-copy-to-my-playlists").live("click", plManager.copyBookmarkToMyPlaylists );
$("#jp_playlist_manager .playlist .btn-pl-delete") .live("click", plManager.deletePlaylist );
/////////////////// Bindings for the active/main playlist ////////////////
$(".btn-remove-song").live("click", ActivePlaylist.removeSong ); // Remove a song from active playlist
$(".btn-play-song") .live("click", ActivePlaylist.switchToSong ); // "play" icon for individual songs
//////////// Bindings for 'Add to playlist' dialog /////////////
$("#jp_add_to_playlist_dlg .close-btn") .click( dlgAddToPlaylist.closeDialog ); // (go back to active playlist)
$("#jp_add_to_playlist_dlg #btn-go-new-playlist").click( dlgAddToPlaylist.createNewPlaylist ); // clicked "Go" button in "add to playlist"
////////////// END click bindings
// playlist song list needs to be 'sortable' (allows elements to be dragged and re-ordered)
// and selectable (for adding multiple songs to a given playlist)
$("#jplayer_playlist .ul")
.sortable({
handle: ".drag-handle", // CSS class of the element user can "drag" song by to re-order
stop: function() { // Called after songs are re-ordered
$("#btn-update-playlist").button("enable"); // enable "Update Playlist" button
}
})
.selectable({
// Events originating in an element with one of the styles
// listed below in the 'cancel' property will be ignored by 'selectable'
// (Allows you to click icons without 'selectable' interfering!)
cancel: ".drag-handle,.ui-icon,.kconfirm-message",
// Enable "Add to playlist" button if ANY songs are selected.
// Otherwise disable the button.
stop: function(event,ui) {
if ($("#jp_active_playlist > .ui-selected").size() > 0) {
$("#btn-add-to-playlist").button("enable");
} else {
$("#btn-add-to-playlist").button("disable");
}
}
}); // end .selectable()
// knerd "accordion" functionality for playlist
$("#jplayer_knerd_pl_credit_line").click(function() {
$(".jp_accordion_part").slideToggle();
$(this).find(".triangle").toggle();
});
// do an initial "update" of the playlist list, just to get it populated initially
dlgPlaylistManager.refreshLists();
}); // end ready()
/**
* Custom jquery function that turns any element into an in-place delete/confirmation
* widget. The first click triggers an inplace confirmation message, and the second
* click triggers the intended delete. The ultimate delete action is defined
* by the delete_func function reference (can be an anonymous function or a reference
* to a function already defined)
*
* Note: meant to be run on a SINGLE element!
*
* @param settings override default settings if you want
* @param delete_func the callback function to be called when user confirms in the positive
* @return this
*/
function kConfirmDelete(settings) {
//
// BEGIN: Config
//
var config = { // Set up the default settings (user can override)
confmsg: "Click to Confirm",
classesToRemove: [],
delete_func: function() {
// This function should pretty much always be overridden.. still
// here's a reasonable default: fade out and remove the parent element from the DOM
debugLog("kConfirmDelete:: this method should be overridden!");
//debugLog(config.target_delete_obj);
config.target_delete_obj.fadeOut("slow", function() { $(this).remove(); } );
},
target_delete_obj: $(this).parent(), // the element to remove from the DOM
confirm_container: $(this).parent() // element in which to append the kconfirm-message message (must be positioned)
};
if (typeof(settings) != "undefined" && settings) { $.extend(config, settings); }
if (config.classesToRemove == "" || config.classesToRemove == null) { config.classesToRemove = []; }
//
// END: config
//
// Note: wrapping in $.each() to comply with jQuery standards, but results
// would be unpredictable if kConfirmDelete were applied to more than one element
// at a time anyway.
this.each(function()
{
$icon = $(this);
// "Empty" the icon's contents, removing any prior messages
$icon.empty();
// Remove icon class(es) so we can show text rather than icon image
var removedClasses = []; // keep track of which classes we removed (if any), so we can add them back later
for (var c=0; c < config.classesToRemove.length; c++) {
var cssClass = config.classesToRemove[c];
if ($icon.hasClass( cssClass )) {
$icon.removeClass ( cssClass );
removedClasses.push( cssClass );
}
}
// Build and show confirmation with one-time bindings for the final click OR a 'mouseout' indicating an 'abort'
// of the delete process.
$("
"+config.confmsg+"
")
.one("click", { icon: $icon }, config.delete_func) // bind 'delete_func' to the 2nd (confirming) click.
.one("mouseout", function() { // revert, user left 'delete' area, so abort the delete process.
for (var c=0; c < removedClasses.length; c++) {
$icon.addClass( removedClasses[c] ); // add back the css classes we removed, if any..
}
$(this).remove(); // remove confirmation message (reverting to icon image only)
})
.appendTo( config.confirm_container ); // now we're adding to the icon's parent by default..
});
return this;
} // end kConfirmDelete custom jquery fn
$.fn.kConfirmDelete = kConfirmDelete;