CC-1939 Ability to edit name & description of a playlist, display the description somewhere
now can edit title/description of a playlist without leaving the main playlist builder screen
This commit is contained in:
Naomi
martin
parent
a48f467de7
commit
d4a4c4be2a
7 changed files with 344 additions and 96 deletions
BIN
airtime_mvc/public/css/images/icon_edit_l.png
Normal file
BIN
airtime_mvc/public/css/images/icon_edit_l.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -121,7 +121,7 @@
|
|||
font-size:15px;
|
||||
margin:8px 0 10px 0;
|
||||
padding:0;
|
||||
color:#6e6e6e;
|
||||
color:#4f4f4f;
|
||||
font-weight:normal;
|
||||
clear:both;
|
||||
float:left;
|
||||
|
|
@ -314,4 +314,124 @@
|
|||
#spl_sortable li .spl_cue.ui-state-active, #spl_sortable li .spl_cue.ui-state-active:hover {
|
||||
background: transparent url(images/cue_playlist.png) no-repeat 0 -30px;
|
||||
border:none;
|
||||
}
|
||||
}
|
||||
|
||||
/*--/////////////// Changes 16.05.2011 ////////////--*/
|
||||
|
||||
.playlist_title {
|
||||
margin: 16px 0 10px 0;
|
||||
height:26px;
|
||||
clear:both;
|
||||
}
|
||||
#side_playlist .playlist_title h3, #side_playlist .playlist_title h4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#side_playlist .playlist_title h3 {
|
||||
float:left;
|
||||
width:84%;
|
||||
}
|
||||
#side_playlist .playlist_title h4 {
|
||||
float:right;
|
||||
clear:none;
|
||||
font-size: 16px;
|
||||
padding-top:4px;
|
||||
}
|
||||
|
||||
#side_playlist .playlist_title h3 a {
|
||||
padding: 0 22px 0 2px;
|
||||
background:url(images/icon_edit_l.png) no-repeat right center;
|
||||
text-decoration:none;
|
||||
|
||||
}
|
||||
#side_playlist .playlist_title h3 a:hover {
|
||||
background-color:#D8D8D8;
|
||||
}
|
||||
.element_hidden {
|
||||
display: none;
|
||||
}
|
||||
#side_playlist .playlist_title h3 input[type="text"] {
|
||||
background-color: #dddddd;
|
||||
border: 1px solid #8F8F8F;
|
||||
font-family: Arial,Helvetica,sans-serif;
|
||||
font-size: 12px;
|
||||
height: 23px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-indent: 3px;
|
||||
-moz-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
|
||||
-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
|
||||
width:95%;
|
||||
}
|
||||
|
||||
#side_playlist .zend_form {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#side_playlist .zend_form dt, #side_playlist .zend_form dd {
|
||||
display: block;
|
||||
float: none;
|
||||
margin: 4px 0 0;
|
||||
padding: 0;
|
||||
width:100%;
|
||||
}
|
||||
#side_playlist .zend_form dd.buttons {
|
||||
margin-top: 8px;
|
||||
text-align:right;
|
||||
}
|
||||
#side_playlist .zend_form dd.buttons .ui-button {
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
#side_playlist .zend_form dt {
|
||||
color:#5B5B5B;
|
||||
font-weight: bold;
|
||||
margin: 9px 0 0;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
#side_playlist .zend_form dt:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#side_playlist .zend_form dd textarea {
|
||||
background-color: #dddddd;
|
||||
border: 1px solid #5B5B5B;
|
||||
font-family: Arial,Helvetica,sans-serif;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
padding: 2px 0 0 0;
|
||||
text-indent: 3px;
|
||||
-moz-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
|
||||
-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
|
||||
width:99.7%;
|
||||
}
|
||||
|
||||
#side_playlist fieldset {
|
||||
border: 1px solid #9a9a9a;
|
||||
margin: 0 0 8px 0;
|
||||
padding: 8px;
|
||||
}
|
||||
#side_playlist fieldset.closed .zend_form{
|
||||
display:none;
|
||||
}
|
||||
#side_playlist fieldset.closed {
|
||||
border-width: 1px 0 0;
|
||||
margin-bottom: -6px;
|
||||
margin-left:1px;
|
||||
}
|
||||
fieldset > legend {
|
||||
color: #4f4f4f;
|
||||
font-size: 12px;
|
||||
line-height: 140%;
|
||||
}
|
||||
.ui-widget-content fieldset legend .ui-icon {
|
||||
float: left;
|
||||
background-image:url(redmond/images/ui-icons_454545_256x240.png);
|
||||
}
|
||||
#side_playlist .zend_form input, #side_playlist .zend_form textarea {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
|
@ -133,7 +133,7 @@ function changeFadeOut(event) {
|
|||
if(json.response.error) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
hideError(span);
|
||||
});
|
||||
}
|
||||
|
|
@ -147,7 +147,7 @@ function submitOnEnter(event) {
|
|||
}
|
||||
|
||||
function setCueEvents(el) {
|
||||
|
||||
|
||||
$(el).find(".spl_cue_in span:last").blur(changeCueIn);
|
||||
$(el).find(".spl_cue_out span:last").blur(changeCueOut);
|
||||
|
||||
|
|
@ -173,7 +173,7 @@ function openFadeEditor(event) {
|
|||
event.stopPropagation();
|
||||
|
||||
var pos, url, li;
|
||||
|
||||
|
||||
li = $(this).parent().parent();
|
||||
pos = parseInt(li.attr("id").split("_").pop());
|
||||
|
||||
|
|
@ -228,40 +228,47 @@ function openCueEditor(event) {
|
|||
highlightActive(li);
|
||||
|
||||
$.get(url, {format: "json", pos: pos}, function(json){
|
||||
|
||||
|
||||
$("#cues_"+pos)
|
||||
.empty()
|
||||
.append(json.html)
|
||||
.show();
|
||||
|
||||
setCueEvents(li);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function redrawDataTablePage() {
|
||||
var dt;
|
||||
dt = $("#library_display").dataTable();
|
||||
dt.fnStandingRedraw();
|
||||
}
|
||||
|
||||
function setSPLContent(json) {
|
||||
|
||||
if(json.message) {
|
||||
|
||||
if(json.message) {
|
||||
alert(json.message);
|
||||
return;
|
||||
return;
|
||||
}
|
||||
|
||||
$('#spl_name').empty()
|
||||
$('#spl_name > a').empty()
|
||||
.append(json.name);
|
||||
$('#spl_length').empty()
|
||||
.append(json.length);
|
||||
.append(json.length);
|
||||
$('#fieldset-metadate_change textarea')
|
||||
.empty()
|
||||
.val(json.description);
|
||||
$('#spl_sortable').empty()
|
||||
.append(json.html);
|
||||
.append(json.html);
|
||||
$("#spl_editor")
|
||||
.empty();
|
||||
|
||||
$("#spl_sortable .ui-icon-closethick").click(deleteSPLItem);
|
||||
$(".spl_fade_control").click(openFadeEditor);
|
||||
//$(".spl_playlength").click(openCueEditor);
|
||||
$(".spl_cue").click(openCueEditor);
|
||||
|
||||
|
||||
//redraw the library list
|
||||
dt = $("#library_display").dataTable();
|
||||
dt.fnStandingRedraw();
|
||||
redrawDataTablePage();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
|
@ -269,8 +276,8 @@ function setSPLContent(json) {
|
|||
function addSPLItem(event, ui){
|
||||
var url, tr, id, items, draggableOffset, elOffset, pos;
|
||||
|
||||
tr = ui.helper;
|
||||
|
||||
tr = ui.helper;
|
||||
|
||||
if(tr.get(0).tagName === 'LI')
|
||||
return;
|
||||
|
||||
|
|
@ -286,7 +293,7 @@ function addSPLItem(event, ui){
|
|||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
id = tr.attr('id').split("_").pop();
|
||||
|
||||
url = '/Playlist/add-item';
|
||||
|
|
@ -305,13 +312,13 @@ function deleteSPLItem(event){
|
|||
$.post(url, {format: "json", pos: pos}, setSPLContent);
|
||||
}
|
||||
|
||||
function moveSPLItem(event, ui) {
|
||||
function moveSPLItem(event, ui) {
|
||||
var li, newPos, oldPos, url;
|
||||
|
||||
li = ui.item;
|
||||
|
||||
|
||||
newPos = li.index();
|
||||
oldPos = li.attr('id').split("_").pop();
|
||||
oldPos = li.attr('id').split("_").pop();
|
||||
|
||||
url = '/Playlist/move-item';
|
||||
|
||||
|
|
@ -359,21 +366,20 @@ function createPlaylistMetaForm(json) {
|
|||
var url, data;
|
||||
|
||||
url = '/Playlist/metadata/format/json';
|
||||
data = $("#side_playlist form").serialize();
|
||||
data = $("#side_playlist form").serialize();
|
||||
|
||||
$.post(url, data, function(json){
|
||||
openDiffSPL(json);
|
||||
//redraw the library list
|
||||
dt = $("#library_display").dataTable();
|
||||
dt.fnStandingRedraw();
|
||||
redrawDataTablePage();
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
|
||||
$("#side_playlist")
|
||||
.empty()
|
||||
.append(form);
|
||||
|
||||
|
||||
currentlyOpenedSplId = json.pl_id;
|
||||
}
|
||||
|
||||
|
|
@ -393,24 +399,44 @@ function deleteSPL() {
|
|||
$.post(url, function(){
|
||||
noOpenPL;
|
||||
//redraw the library list
|
||||
dt = $("#library_display").dataTable();
|
||||
dt.fnStandingRedraw();
|
||||
redrawDataTablePage();
|
||||
});
|
||||
}
|
||||
|
||||
function openDiffSPL(json) {
|
||||
|
||||
|
||||
$("#side_playlist")
|
||||
.empty()
|
||||
.append(json.html);
|
||||
|
||||
|
||||
currentlyOpenedSplId = json.pl_id;
|
||||
|
||||
setUpSPL();
|
||||
}
|
||||
|
||||
function editName() {
|
||||
var nameElement = $(this);
|
||||
var playlistName = nameElement.text();
|
||||
|
||||
$("#playlist_name_input")
|
||||
.removeClass('element_hidden')
|
||||
.val(playlistName)
|
||||
.blur(function(){
|
||||
var input = $(this);
|
||||
var url;
|
||||
url = '/Playlist/set-playlist-name';
|
||||
|
||||
$.post(url, {format: "json", name: input.val()}, function(json){
|
||||
input.addClass('element_hidden');
|
||||
nameElement.text(json.playlistName);
|
||||
redrawDataTablePage();
|
||||
});
|
||||
})
|
||||
.keydown(submitOnEnter);
|
||||
}
|
||||
|
||||
function setUpSPL() {
|
||||
|
||||
|
||||
$("#spl_sortable").sortable({
|
||||
handle: 'div.list-item-container'
|
||||
});
|
||||
|
|
@ -448,6 +474,39 @@ function setUpSPL() {
|
|||
}
|
||||
});
|
||||
|
||||
$("#playlist_name_display").click(editName);
|
||||
$("#fieldset-metadate_change > legend").click(function(){
|
||||
var descriptionElement = $(this).parent();
|
||||
|
||||
if(descriptionElement.hasClass("closed")) {
|
||||
descriptionElement.removeClass("closed");
|
||||
}
|
||||
else {
|
||||
descriptionElement.addClass("closed");
|
||||
}
|
||||
});
|
||||
|
||||
$("#description_save").click(function(){
|
||||
var textarea = $("#fieldset-metadate_change textarea");
|
||||
var description = textarea.val();
|
||||
var url;
|
||||
url = '/Playlist/set-playlist-description';
|
||||
|
||||
$.post(url, {format: "json", description: description}, function(json){
|
||||
textarea.val(json.playlistDescription);
|
||||
});
|
||||
});
|
||||
|
||||
$("#description_cancel").click(function(){
|
||||
var textarea = $("#fieldset-metadate_change textarea");
|
||||
var url;
|
||||
url = '/Playlist/set-playlist-description';
|
||||
|
||||
$.post(url, {format: "json"}, function(json){
|
||||
textarea.val(json.playlistDescription);
|
||||
});
|
||||
});
|
||||
|
||||
$("#spl_fade_in_main span:first").blur(function(event){
|
||||
event.stopPropagation();
|
||||
|
||||
|
|
@ -508,7 +567,6 @@ function setUpSPL() {
|
|||
|
||||
$("#spl_sortable .ui-icon-closethick").click(deleteSPLItem);
|
||||
$(".spl_fade_control").click(openFadeEditor);
|
||||
//$(".spl_playlength").click(openCueEditor);
|
||||
$(".spl_cue").click(openCueEditor);
|
||||
|
||||
$("#spl_sortable").droppable();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue