Congegni
/
sintonia
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CC-3463 : Usability of timeline 

changing buttons to be jquery ui icons.

adding button to trim overbooked
adding button toscroll current item to top.
This commit is contained in:
Naomi Aro 2012-03-23 16:42:08 +01:00
parent 13bbdc327e
commit 711d1f202a
9 changed files with 223 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
airtime_mvc/application/layouts/scripts/library.phtml
View File

@ -27,8 +27,8 @@
<div class="wrapper">
<!--Set to z-index 254 to make it lower than the top-panel and the ZFDebug info bar, but higher than the side-playlist-->
<div id="library_content" class="ui-widget ui-widget-content block-shadow alpha-block padded" style="z-index:254"><?php echo $this->layout()->library ?></div>
<div id="side_playlist" class="ui-widget ui-widget-content block-shadow omega-block padded"><?php echo $this->layout()->spl ?></div>
<div id="library_content" class="lib-content ui-widget ui-widget-content block-shadow alpha-block padded" style="z-index:254"><?php echo $this->layout()->library ?></div>
<div id="side_playlist" class="pl-content ui-widget ui-widget-content block-shadow omega-block padded"><?php echo $this->layout()->spl ?></div>
</div>
</body>
</html>

12
airtime_mvc/public/css/media_library.css
View File

@ -1,5 +1,15 @@
.lib-content {
.lib-content .fg-toolbar ul {
float: left;
padding: 0;
margin: 0.5em 0 0 0;
cursor: pointer;
}
.lib-content .fg-toolbar ul li {
list-style-type: none;
float: left;
padding: 1px 2px;
margin-right: 5px;
}
#library_content {

4
airtime_mvc/public/css/showbuilder.css
View File

@ -53,6 +53,10 @@
top: 3px;
}
.sb-content fieldset {
margin-bottom: 8px;
}
.sb-content fieldset.closed {
border-width: 1px 0 0;
margin-bottom: -16px;

3
airtime_mvc/public/css/styles.css
View File

@ -776,7 +776,6 @@ dl.inline-list dd {
#library_display thead th.library_title {
cursor: default;
}
.ColVis.TableTools .ui-button {
height: 21px;
}
@ -790,7 +789,7 @@ button.ColVis_Button.ColVis_ShowAll {
font-size:12px;
font-weight:normal;
padding: 0.2em 1em;
margin: 0.5em 0.2em -0.5em 0.2em;
margin: 0.5em 7px -0.5em -2px;
}
.library_length {

14
airtime_mvc/public/js/airtime/buttons/buttons.js
View File

@ -8,8 +8,18 @@ var AIRTIME = (function(AIRTIME){
}
mod = AIRTIME.button;
mod.isDisabled = function(c) {
var button = $("."+c);
if (button.hasClass(DISABLED_CLASS)) {
return true;
}
return false;
};
mod.enableButton = function(c) {
var button = $("."+c).find("button");
var button = $("."+c);
if (button.hasClass(DISABLED_CLASS)) {
button.removeClass(DISABLED_CLASS);
@ -17,7 +27,7 @@ var AIRTIME = (function(AIRTIME){
};
mod.disableButton = function(c) {
var button = $("."+c).find("button");
var button = $("."+c);
if (!button.hasClass(DISABLED_CLASS)) {
button.addClass(DISABLED_CLASS);

72
airtime_mvc/public/js/airtime/library/events/library_playlistbuilder.js
View File

@ -19,10 +19,10 @@ var AIRTIME = (function(AIRTIME){
}
if (check === true) {
AIRTIME.button.enableButton("library_group_add");
AIRTIME.button.enableButton("lib-button-add");
}
else {
AIRTIME.button.disableButton("library_group_add");
AIRTIME.button.disableButton("lib-button-add");
}
};
@ -76,43 +76,53 @@ var AIRTIME = (function(AIRTIME){
});
};
/*
* @param oTable the datatables instance for the library.
*/
mod.setupLibraryToolbar = function( oLibTable ) {
var aButtons,
fnAddSelectedItems;
mod.setupLibraryToolbar = function() {
var $toolbar = $(".lib-content .fg-toolbar:first");
fnAddSelectedItems = function() {
var oLibTT = TableTools.fnGetInstance('library_display'),
aData = oLibTT.fnGetSelectedData(),
i,
temp,
length,
aMediaIds = [];
$toolbar
.append("<ul />")
.find('ul')
.append('<li class="ui-state-default ui-state-disabled lib-button-add" title="add selected items to playlist"><span class="ui-icon ui-icon-plusthick"></span></li>')
.append('<li class="ui-state-default ui-state-disabled lib-button-delete" title="delete selected items"><span class="ui-icon ui-icon-trash"></span></li>');
//process selected files/playlists.
for (i = 0, length = aData.length; i < length; i++) {
temp = aData[i];
if (temp.ftype === "audioclip") {
aMediaIds.push(temp.id);
//add to playlist button
$toolbar.find('.lib-button-add')
.click(function() {
if (AIRTIME.button.isDisabled('lib-button-add') === true) {
return;
}
}
AIRTIME.playlist.fnAddItems(aMediaIds, undefined, 'after');
};
var oLibTT = TableTools.fnGetInstance('library_display'),
aData = oLibTT.fnGetSelectedData(),
i,
temp,
length,
aMediaIds = [];
//[0] = button text
//[1] = id
//[2] = enabled
//[3] = click event
aButtons = [["Delete", "library_group_delete", false, AIRTIME.library.fnDeleteSelectedItems],
["Add", "library_group_add", false, fnAddSelectedItems]];
//process selected files/playlists.
for (i = 0, length = aData.length; i < length; i++) {
temp = aData[i];
if (temp.ftype === "audioclip") {
aMediaIds.push(temp.id);
}
}
addToolBarButtonsLibrary(aButtons);
AIRTIME.playlist.fnAddItems(aMediaIds, undefined, 'after');
});
//delete from library.
$toolbar.find('.lib-button-delete')
.click(function() {
if (AIRTIME.button.isDisabled('lib-button-delete') === true) {
return;
}
AIRTIME.library.fnDeleteSelectedItems();
});
};
return AIRTIME;
}(AIRTIME || {}));

86
airtime_mvc/public/js/airtime/library/events/library_showbuilder.js
View File

@ -19,10 +19,10 @@ var AIRTIME = (function(AIRTIME){
}
if (check === true) {
AIRTIME.button.enableButton("library_group_add");
AIRTIME.button.enableButton("lib-button-add");
}
else {
AIRTIME.button.disableButton("library_group_add");
AIRTIME.button.disableButton("lib-button-add");
}
};
@ -76,47 +76,61 @@ var AIRTIME = (function(AIRTIME){
});
};
mod.setupLibraryToolbar = function(oLibTable) {
var aButtons,
fnAddSelectedItems,
mod.setupLibraryToolbar = function() {
var $toolbar = $(".lib-content .fg-toolbar:first");
fnAddSelectedItems = function() {
var oLibTT = TableTools.fnGetInstance('library_display'),
aData = oLibTT.fnGetSelectedData(),
i,
length,
temp,
aMediaIds = [],
aSchedIds = [];
$toolbar
.append("<ul />")
.find('ul')
.append('<li class="ui-state-default ui-state-disabled lib-button-add" title="add selected items to playlist"><span class="ui-icon ui-icon-plusthick"></span></li>')
.append('<li class="ui-state-default ui-state-disabled lib-button-delete" title="delete selected items"><span class="ui-icon ui-icon-trash"></span></li>');
//process selected files/playlists.
for (i = 0, length = aData.length; i < length; i++) {
temp = aData[i];
aMediaIds.push({"id": temp.id, "type": temp.ftype});
}
//add to timeline button
$toolbar.find('.lib-button-add')
.click(function() {
aData = [];
$("#show_builder_table tr.cursor-selected-row").each(function(i, el){
aData.push($(el).data("aData"));
if (AIRTIME.button.isDisabled('lib-button-add') === true) {
return;
}
var oLibTT = TableTools.fnGetInstance('library_display'),
aData = oLibTT.fnGetSelectedData(),
i,
length,
temp,
aMediaIds = [],
aSchedIds = [];
//process selected files/playlists.
for (i = 0, length = aData.length; i < length; i++) {
temp = aData[i];
aMediaIds.push({"id": temp.id, "type": temp.ftype});
}
aData = [];
$("#show_builder_table tr.cursor-selected-row").each(function(i, el){
aData.push($(el).data("aData"));
});
//process selected schedule rows to add media after.
for (i=0, length = aData.length; i < length; i++) {
temp = aData[i];
aSchedIds.push({"id": temp.id, "instance": temp.instance, "timestamp": temp.timestamp});
}
AIRTIME.showbuilder.fnAdd(aMediaIds, aSchedIds);
});
//process selected schedule rows to add media after.
for (i=0, length = aData.length; i < length; i++) {
temp = aData[i];
aSchedIds.push({"id": temp.id, "instance": temp.instance, "timestamp": temp.timestamp});
}
//delete from library.
$toolbar.find('.lib-button-delete')
.click(function() {
AIRTIME.showbuilder.fnAdd(aMediaIds, aSchedIds);
};
if (AIRTIME.button.isDisabled('lib-button-delete') === true) {
return;
}
//[0] = button text
//[1] = id
//[2] = enabled
//[3] = click event
aButtons = [["Delete", "library_group_delete", false, AIRTIME.library.fnDeleteSelectedItems],
["Add", "library_group_add", false, fnAddSelectedItems]];
addToolBarButtonsLibrary(aButtons);
AIRTIME.library.fnDeleteSelectedItems();
});
};
return AIRTIME;

47
airtime_mvc/public/js/airtime/library/library.js
View File

@ -269,7 +269,7 @@ var AIRTIME = (function(AIRTIME) {
}
//checking to enable buttons
AIRTIME.button.enableButton("library_group_delete");
AIRTIME.button.enableButton("lib-button-delete");
AIRTIME.library.events.enableAddButtonCheck();
},
"fnRowDeselected": function ( node ) {
@ -287,14 +287,13 @@ var AIRTIME = (function(AIRTIME) {
//checking to disable buttons
if (selected.length === 0) {
AIRTIME.button.disableButton("library_group_delete");
AIRTIME.button.disableButton("lib-button-delete");
}
AIRTIME.library.events.enableAddButtonCheck();
}
},
"oColVis": {
"buttonText": "Show/Hide Columns",
"sAlign": "right",
"aiExclude": [0, 1, 2],
"sSize": "css"
@ -497,48 +496,6 @@ var AIRTIME = (function(AIRTIME) {
}(AIRTIME || {}));
function addToolBarButtonsLibrary(aButtons) {
var i,
length = aButtons.length,
libToolBar = $(".library_toolbar"),
html,
buttonClass = '',
DEFAULT_CLASS = 'ui-button ui-state-default',
DISABLED_CLASS = 'ui-state-disabled',
fn;
for ( i = 0; i < length; i += 1 ) {
buttonClass = '';
//add disabled class if not enabled.
if (aButtons[i][2] === false) {
buttonClass += DISABLED_CLASS;
}
html = '<div class="ColVis TableTools '+aButtons[i][1]+'"><button class="'+DEFAULT_CLASS+' '+buttonClass+'"><span>'+aButtons[i][0]+'</span></button></div>';
libToolBar.append(html);
//create a closure to preserve the state of i.
(function(index){
libToolBar.find("."+aButtons[index][1]).click(function(){
fn = function() {
var $button = $(this).find("button");
//only call the passed function if the button is enabled.
if (!$button.hasClass(DISABLED_CLASS)) {
aButtons[index][3]();
}
};
fn.call(this);
});
}(i));
}
}
function checkImportStatus(){
$.getJSON('/Preference/is-import-in-progress', function(data){
var div = $('#import_status');

121
airtime_mvc/public/js/airtime/showbuilder/builder.js
View File

@ -105,10 +105,12 @@ var AIRTIME = (function(AIRTIME){
mod.fnServerData = fnServerData;
mod.builderDataTable = function() {
var tableDiv = $('#show_builder_table'),
var $sbContent = $('#show_builder'),
$sbTable = $sbContent.find('table'),
oTable,
fnRemoveSelectedItems,
tableHeight;
tableHeight,
$toolbar;
fnRemoveSelectedItems = function() {
var oTT = TableTools.fnGetInstance('show_builder_table'),
@ -126,7 +128,7 @@ var AIRTIME = (function(AIRTIME){
AIRTIME.showbuilder.fnRemove(aItems);
};
oTable = tableDiv.dataTable( {
oTable = $sbTable.dataTable( {
"aoColumns": [
/* checkbox */ {"mDataProp": "allowed", "sTitle": "<input type='checkbox' name='sb_cb_all'>", "sWidth": "15px", "sClass": "sb-checkbox"},
/* Type */ {"mDataProp": "image", "sTitle": "", "sClass": "library_image sb-image", "sWidth": "25px", "bVisible": true},
@ -235,6 +237,9 @@ var AIRTIME = (function(AIRTIME){
else if (aData.scheduled === 0) {
$(nRow).addClass("sb-past");
}
else {
$(nRow).addClass("sb-future");
}
if (aData.allowed !== true) {
$(nRow).addClass("sb-not-allowed");
@ -362,7 +367,7 @@ var AIRTIME = (function(AIRTIME){
if ($lib.length > 0 && $lib.filter(":visible").length > 0) {
//create cursor arrows.
tableDiv.find("tr.sb-now-playing, tr:not(:first, .sb-footer, .sb-empty, .sb-not-allowed)").each(function(i, el) {
$sbTable.find("tr.sb-now-playing, tr:not(:first, .sb-footer, .sb-empty, .sb-not-allowed)").each(function(i, el) {
td = $(el).find("td:first");
if (td.hasClass("dataTables_empty")) {
return false;
@ -383,19 +388,25 @@ var AIRTIME = (function(AIRTIME){
}
//if the now playing song is visible set a timeout to redraw the table at the start of the next song.
tr = tableDiv.find("tr.sb-now-playing");
tr = $sbTable.find("tr.sb-now-playing");
if (tr.length > 0) {
//enable jump to current button.
AIRTIME.button.enableButton("sb-button-current");
aData = tr.data("aData");
setTimeout(function(){
AIRTIME.showbuilder.resetTimestamp();
oTable.fnDraw();
}, aData.refresh * 1000); //need refresh in milliseconds
//scroll now playing item to top.
$sbContent.find(".sb-button-current").click();
}
//current song is not set, set a timeout to refresh when the first item on the timeline starts.
else {
tr = tableDiv.find("tbody tr.sb-allowed.sb-header:first");
tr = $sbTable.find("tbody tr.sb-allowed.sb-header:first");
if (tr.length > 0) {
aData = tr.data("aData");
@ -406,6 +417,14 @@ var AIRTIME = (function(AIRTIME){
}, aData.timeUntil * 1000); //need refresh in milliseconds
}
}
//check if there are any overbooked tracks on screen to enable the trim button.
tr = $sbTable.find("tr.sb-over");
if (tr.length > 0) {
//enable deleting of overbooked tracks.
AIRTIME.button.enableButton("sb-button-trim");
}
},
"fnHeaderCallback": function(nHead) {
$(nHead).find("input[type=checkbox]").attr("checked", false);
@ -416,6 +435,11 @@ var AIRTIME = (function(AIRTIME){
oTT = TableTools.fnGetInstance('show_builder_table');
oTT.fnSelectNone();
//disable jump to current button.
AIRTIME.button.disableButton("sb-button-current");
//disable deleting of overbooked tracks.
AIRTIME.button.disableButton("sb-button-trim");
},
"oColVis": {
@ -451,24 +475,24 @@ var AIRTIME = (function(AIRTIME){
}
//checking to enable buttons
AIRTIME.button.enableButton("sb_delete");
AIRTIME.button.enableButton("sb-button-delete");
},
"fnRowDeselected": function ( node ) {
var selected;
//seems to happen if everything is deselected
if ( node === null) {
tableDiv.find("input[type=checkbox]").attr("checked", false);
$sbTable.find("input[type=checkbox]").attr("checked", false);
selected = [];
}
else {
$(node).find("input[type=checkbox]").attr("checked", false);
selected = tableDiv.find("input[type=checkbox]").filter(":checked");
selected = $sbTable.find("input[type=checkbox]").filter(":checked");
}
//checking to disable buttons
if (selected.length === 0) {
AIRTIME.button.disableButton("sb_delete");
AIRTIME.button.disableButton("sb-button-delete");
}
}
},
@ -572,7 +596,7 @@ var AIRTIME = (function(AIRTIME){
//item was dragged in
if (origTrs !== undefined) {
tableDiv.find("tr.ui-draggable")
$sbTable.find("tr.ui-draggable")
.empty()
.after(html);
@ -599,7 +623,7 @@ var AIRTIME = (function(AIRTIME){
helper: function(event, item) {
var oTT = TableTools.fnGetInstance('show_builder_table'),
selected = oTT.fnGetSelectedData(),
elements = tableDiv.find('tr:not(:first) input:checked').parents('tr'),
elements = $sbTable.find('tr:not(:first) input:checked').parents('tr'),
thead = $("#show_builder_table thead"),
colspan = thead.find("th").length,
trfirst = thead.find("tr:first"),
@ -640,33 +664,78 @@ var AIRTIME = (function(AIRTIME){
receive: fnReceive,
update: fnUpdate,
start: function(event, ui) {
var elements = tableDiv.find('tr:not(:first) input:checked').parents('tr');
var elements = $sbTable.find('tr:not(:first) input:checked').parents('tr');
elements.hide();
}
};
}());
tableDiv.sortable(sortableConf);
$sbTable.sortable(sortableConf);
$("#show_builder .fg-toolbar")
.append('<div class="ColVis TableTools sb_delete"><button class="ui-button ui-state-default ui-state-disabled"><span>Delete</span></button></div>')
.find('.sb_delete')
.click(fnRemoveSelectedItems)
.end();
//start setup of the builder toolbar.
$toolbar = $(".sb-content .fg-toolbar");
$("#show_builder .fg-toolbar")
.append("<ul />")
.find('ul')
.append('<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>')
.append('<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li>')
.end();
$toolbar
.append("<ul />")
.find('ul')
.append('<li class="ui-state-default ui-state-disabled sb-button-current" title="jump to current item"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>')
.append('<li class="ui-state-default ui-state-disabled sb-button-trim" title="delete all overbooked tracks"><span class="ui-icon ui-icon-scissors"></span></li>')
.append('<li class="ui-state-default ui-state-disabled sb-button-delete" title="delete selected items"><span class="ui-icon ui-icon-trash"></span></li>');
//jump to current
$toolbar.find('.sb-button-current')
.click(function() {
if (AIRTIME.button.isDisabled('sb-button-current') === true) {
return;
}
var $scroll = $sbContent.find(".dataTables_scrolling"),
scrolled = $scroll.scrollTop(),
scrollingTop = $scroll.offset().top,
current = $sbTable.find(".sb-now-playing"),
currentTop = current.offset().top;
$scroll.scrollTop(currentTop - scrollingTop + scrolled);
});
//delete overbooked tracks.
$toolbar.find('.sb-button-trim')
.click(function() {
if (AIRTIME.button.isDisabled('sb-button-trim') === true) {
return;
}
var temp,
aItems = [],
trs = $sbTable.find(".sb-over.sb-future");
trs.each(function(){
temp = $(this).data("aData");
aItems.push({"id": temp.id, "instance": temp.instance, "timestamp": temp.timestamp});
});
AIRTIME.showbuilder.fnRemove(aItems);
});
//delete selected tracks
$toolbar.find('.sb-button-delete')
.click(function() {
if (AIRTIME.button.isDisabled('sb-button-delete') === true) {
return;
}
fnRemoveSelectedItems();
});
//set things like a reference to the table.
AIRTIME.showbuilder.init(oTable);
//add event to cursors.
tableDiv.find("tbody").on("click", "div.marker", function(event){
$sbTable.find("tbody").on("click", "div.marker", function(event){
var tr = $(this).parents("tr"),
cursorSelClass = "cursor-selected-row";