CC-3360 : Timeline Css
adding Css to timeline.
This commit is contained in:
Naomi Aro
parent
b4e9f9699c
commit
1fdb3cf163
17 changed files with 3182 additions and 2832 deletions
|
|
@ -104,7 +104,7 @@ function buildScheduleDialog (json) {
|
|||
width = Math.floor(viewport.width * 0.96),
|
||||
fnServer = AIRTIME.showbuilder.fnServerData,
|
||||
//subtract padding in pixels
|
||||
widgetWidth = width - 50,
|
||||
widgetWidth = width - 60,
|
||||
libWidth = Math.floor(widgetWidth * 0.5),
|
||||
builderWidth = Math.floor(widgetWidth * 0.5),
|
||||
libLength,
|
||||
|
|
@ -112,11 +112,11 @@ function buildScheduleDialog (json) {
|
|||
libFilter;
|
||||
|
||||
dialog.find("#library_content")
|
||||
.height(height - 110)
|
||||
.height(height - 115)
|
||||
.width(libWidth);
|
||||
|
||||
dialog.find("#show_builder")
|
||||
.height(height - 110)
|
||||
.height(height - 115)
|
||||
.width(builderWidth);
|
||||
|
||||
dialog.dialog({
|
||||
|
|
@ -141,9 +141,13 @@ function buildScheduleDialog (json) {
|
|||
AIRTIME.library.libraryInit();
|
||||
AIRTIME.showbuilder.builderDataTable();
|
||||
|
||||
dialog.find(".dataTables_scrolling")
|
||||
//set max heights of datatables.
|
||||
dialog.find(".lib-content .dataTables_scrolling")
|
||||
.css("max-height", height - 110 - 155);
|
||||
|
||||
dialog.find(".sb-content .dataTables_scrolling")
|
||||
.css("max-height", height - 110 - 60);
|
||||
|
||||
dialog.dialog('open');
|
||||
|
||||
//calculate dynamically width for the library search input.
|
||||
|
|
|
|||
|
|
@ -128,18 +128,18 @@ var AIRTIME = (function(AIRTIME){
|
|||
|
||||
oTable = tableDiv.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", "sWidth": "25px", "bVisible": true},
|
||||
/* starts */{"mDataProp": "starts", "sTitle": "Start"},
|
||||
/* ends */{"mDataProp": "ends", "sTitle": "End"},
|
||||
/* runtime */{"mDataProp": "runtime", "sTitle": "Duration", "sClass": "library_length"},
|
||||
/* title */{"mDataProp": "title", "sTitle": "Title"},
|
||||
/* creator */{"mDataProp": "creator", "sTitle": "Creator"},
|
||||
/* album */{"mDataProp": "album", "sTitle": "Album"},
|
||||
/* cue in */{"mDataProp": "cuein", "sTitle": "Cue In", "bVisible": false},
|
||||
/* cue out */{"mDataProp": "cueout", "sTitle": "Cue Out", "bVisible": false},
|
||||
/* fade in */{"mDataProp": "fadein", "sTitle": "Fade In", "bVisible": false},
|
||||
/* fade out */{"mDataProp": "fadeout", "sTitle": "Fade Out", "bVisible": false}
|
||||
/* 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},
|
||||
/* starts */{"mDataProp": "starts", "sTitle": "Start", "sClass": "sb-starts"},
|
||||
/* ends */{"mDataProp": "ends", "sTitle": "End", "sClass": "sb-ends"},
|
||||
/* runtime */{"mDataProp": "runtime", "sTitle": "Duration", "sClass": "library_length sb-length"},
|
||||
/* title */{"mDataProp": "title", "sTitle": "Title", "sClass": "sb-title"},
|
||||
/* creator */{"mDataProp": "creator", "sTitle": "Creator", "sClass": "sb-creator"},
|
||||
/* album */{"mDataProp": "album", "sTitle": "Album", "sClass": "sb-album"},
|
||||
/* cue in */{"mDataProp": "cuein", "sTitle": "Cue In", "bVisible": false, "sClass": "sb-cue-in"},
|
||||
/* cue out */{"mDataProp": "cueout", "sTitle": "Cue Out", "bVisible": false, "sClass": "sb-cue-out"},
|
||||
/* fade in */{"mDataProp": "fadein", "sTitle": "Fade In", "bVisible": false, "sClass": "sb-fade-in"},
|
||||
/* fade out */{"mDataProp": "fadeout", "sTitle": "Fade Out", "bVisible": false, "sClass": "sb-fade-out"}
|
||||
],
|
||||
|
||||
"bJQueryUI": true,
|
||||
|
|
@ -213,10 +213,13 @@ var AIRTIME = (function(AIRTIME){
|
|||
sSeparatorHTML,
|
||||
fnPrepareSeparatorRow,
|
||||
node,
|
||||
cl="";
|
||||
cl="",
|
||||
//background-color to imitate calendar color.
|
||||
r,g,b,a,
|
||||
$nRow = $(nRow);
|
||||
|
||||
//call the context menu so we can prevent the event from propagating.
|
||||
$(nRow).find('td:not(.sb_checkbox)').click(function(e){
|
||||
$(nRow).find('td:not(.sb-checkbox)').click(function(e){
|
||||
|
||||
$(this).contextMenu({x: e.pageX, y: e.pageY});
|
||||
|
||||
|
|
@ -226,9 +229,12 @@ var AIRTIME = (function(AIRTIME){
|
|||
//save some info for reordering purposes.
|
||||
$(nRow).data({"aData": aData});
|
||||
|
||||
if (aData.current === true) {
|
||||
if (aData.scheduled === 1) {
|
||||
$(nRow).addClass("sb-now-playing");
|
||||
}
|
||||
else if (aData.scheduled === 0) {
|
||||
$(nRow).addClass("sb-past");
|
||||
}
|
||||
|
||||
if (aData.allowed !== true) {
|
||||
$(nRow).addClass("sb-not-allowed");
|
||||
|
|
@ -266,10 +272,13 @@ var AIRTIME = (function(AIRTIME){
|
|||
});
|
||||
|
||||
if (aData.header === true) {
|
||||
node = nRow.children[0];
|
||||
node.innerHTML = '';
|
||||
cl = 'sb-header';
|
||||
|
||||
sSeparatorHTML = '<span>'+aData.title+'</span><span>'+aData.starts+'</span><span>'+aData.ends+'</span>';
|
||||
fnPrepareSeparatorRow(sSeparatorHTML, cl, 0);
|
||||
sSeparatorHTML = '<span class="show-title">'+aData.title+'</span>';
|
||||
sSeparatorHTML += '<span class="push-right"><span class="show-time">'+aData.starts+'</span>-<span class="show-time">'+aData.ends+'</span></span>';
|
||||
fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
|
||||
}
|
||||
else if (aData.footer === true) {
|
||||
node = nRow.children[0];
|
||||
|
|
@ -289,18 +298,22 @@ var AIRTIME = (function(AIRTIME){
|
|||
fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
|
||||
}
|
||||
else if (aData.empty === true) {
|
||||
node = nRow.children[0];
|
||||
node.innerHTML = '';
|
||||
|
||||
sSeparatorHTML = '<span>Show Empty</span>';
|
||||
cl = cl + " sb-empty odd";
|
||||
|
||||
fnPrepareSeparatorRow(sSeparatorHTML, cl, 0);
|
||||
fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
|
||||
}
|
||||
else if (aData.record === true) {
|
||||
node = nRow.children[0];
|
||||
node.innerHTML = '';
|
||||
|
||||
sSeparatorHTML = '<span>Recording From Line In</span>';
|
||||
cl = cl + " sb-record odd";
|
||||
|
||||
fnPrepareSeparatorRow(sSeparatorHTML, cl, 0);
|
||||
fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
|
||||
}
|
||||
else {
|
||||
|
||||
|
|
@ -312,6 +325,27 @@ var AIRTIME = (function(AIRTIME){
|
|||
node.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
//add the show colour to the leftmost td
|
||||
if (aData.footer !== true) {
|
||||
|
||||
if ($nRow.hasClass('sb-header')) {
|
||||
a = 1;
|
||||
}
|
||||
else if ($nRow.hasClass('odd')) {
|
||||
a = 0.3;
|
||||
}
|
||||
else if ($nRow.hasClass('even')) {
|
||||
a = 0.4;
|
||||
}
|
||||
|
||||
//convert from hex to rgb.
|
||||
r = parseInt((aData.backgroundColor).substring(0,2), 16);
|
||||
g = parseInt((aData.backgroundColor).substring(2,4), 16);
|
||||
b = parseInt((aData.backgroundColor).substring(4,6), 16);
|
||||
|
||||
$nRow.find('td.sb-checkbox').css('background', 'rgba('+r+', '+g+', '+b+', '+a+')');
|
||||
}
|
||||
},
|
||||
"fnDrawCallback": function(oSettings, json) {
|
||||
var wrapperDiv,
|
||||
|
|
@ -440,7 +474,7 @@ var AIRTIME = (function(AIRTIME){
|
|||
},
|
||||
|
||||
// R = ColReorderResize, C = ColVis, T = TableTools
|
||||
"sDom": 'Rr<"H"CT>t',
|
||||
"sDom": 'Rr<"sb-padded"<"H"CT>><"dataTables_scrolling sb-padded"t>',
|
||||
|
||||
"sAjaxDataProp": "schedule",
|
||||
"sAjaxSource": "/showbuilder/builder-feed"
|
||||
|
|
@ -641,7 +675,7 @@ var AIRTIME = (function(AIRTIME){
|
|||
|
||||
//begin context menu initialization.
|
||||
$.contextMenu({
|
||||
selector: '#show_builder_table td:not(.sb_checkbox)',
|
||||
selector: '#show_builder_table td:not(.sb-checkbox)',
|
||||
trigger: "left",
|
||||
ignoreRightClick: true,
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,36 @@
|
|||
$(document).ready(function(){
|
||||
|
||||
var viewport = AIRTIME.utilities.findViewportDimensions(),
|
||||
lib = $("#library_content"),
|
||||
builder = $("#show_builder"),
|
||||
$lib = $("#library_content"),
|
||||
$libWrapper,
|
||||
$builder = $("#show_builder"),
|
||||
widgetHeight = viewport.height - 185,
|
||||
screenWidth = Math.floor(viewport.width - 110),
|
||||
screenWidth = Math.floor(viewport.width - 120),
|
||||
oBaseDatePickerSettings,
|
||||
oBaseTimePickerSettings,
|
||||
oRange,
|
||||
dateStartId = "#sb_date_start",
|
||||
timeStartId = "#sb_time_start",
|
||||
dateEndId = "#sb_date_end",
|
||||
timeEndId = "#sb_time_end";
|
||||
timeEndId = "#sb_time_end",
|
||||
$toggleLib = $('<input />', {
|
||||
"class": "ui-button ui-state-default sb-edit",
|
||||
"id": "sb_edit",
|
||||
"type": "button",
|
||||
"value": "Add Files"
|
||||
}),
|
||||
$libClose = $('<a />', {
|
||||
"class": "close-round",
|
||||
"href": "#",
|
||||
"id": "sb_lib_close"
|
||||
});
|
||||
|
||||
//set the heights of the main widgets.
|
||||
lib.height(widgetHeight);
|
||||
$lib.height(widgetHeight);
|
||||
|
||||
//builder takes all the screen on first load
|
||||
builder.height(widgetHeight)
|
||||
$builder
|
||||
.height(widgetHeight)
|
||||
.width(screenWidth);
|
||||
|
||||
oBaseDatePickerSettings = {
|
||||
|
|
@ -34,12 +47,24 @@ $(document).ready(function(){
|
|||
defaultTime: '0:00'
|
||||
};
|
||||
|
||||
builder.find(dateStartId).datepicker(oBaseDatePickerSettings);
|
||||
builder.find(timeStartId).timepicker(oBaseTimePickerSettings);
|
||||
builder.find(dateEndId).datepicker(oBaseDatePickerSettings);
|
||||
builder.find(timeEndId).timepicker(oBaseTimePickerSettings);
|
||||
$builder.find(dateStartId).datepicker(oBaseDatePickerSettings);
|
||||
$builder.find(timeStartId).timepicker(oBaseTimePickerSettings);
|
||||
$builder.find(dateEndId).datepicker(oBaseDatePickerSettings);
|
||||
$builder.find(timeEndId).timepicker(oBaseTimePickerSettings);
|
||||
|
||||
$("#sb_submit").click(function(ev){
|
||||
oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
|
||||
AIRTIME.showbuilder.fnServerData.start = oRange.start;
|
||||
AIRTIME.showbuilder.fnServerData.end = oRange.end;
|
||||
|
||||
AIRTIME.library.libraryInit();
|
||||
AIRTIME.showbuilder.builderDataTable();
|
||||
|
||||
$libWrapper = $lib.find("#library_display_wrapper");
|
||||
$libWrapper.prepend($libClose);
|
||||
|
||||
$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 110);
|
||||
|
||||
$builder.on("click", "#sb_submit", function(ev){
|
||||
var fn,
|
||||
oRange,
|
||||
op,
|
||||
|
|
@ -67,44 +92,69 @@ $(document).ready(function(){
|
|||
oTable.fnDraw();
|
||||
});
|
||||
|
||||
$("#sb_edit").click(function(ev){
|
||||
var $button = $(this),
|
||||
$lib = $("#library_content"),
|
||||
$builder = $("#show_builder"),
|
||||
schedTable = $("#show_builder_table").dataTable();
|
||||
$builder.on("click","#sb_edit", function(ev){
|
||||
var schedTable = $("#show_builder_table").dataTable();
|
||||
|
||||
if ($button.hasClass("sb-edit")) {
|
||||
|
||||
//reset timestamp to redraw the cursors.
|
||||
AIRTIME.showbuilder.resetTimestamp();
|
||||
|
||||
$lib.show();
|
||||
$lib.width(Math.floor(screenWidth * 0.5));
|
||||
$builder.width(Math.floor(screenWidth * 0.5));
|
||||
|
||||
$button.removeClass("sb-edit");
|
||||
$button.addClass("sb-finish-edit");
|
||||
$button.val("Close Library");
|
||||
}
|
||||
else if ($button.hasClass("sb-finish-edit")) {
|
||||
|
||||
$lib.hide();
|
||||
$builder.width(screenWidth);
|
||||
|
||||
$button.removeClass("sb-finish-edit");
|
||||
$button.addClass("sb-edit");
|
||||
$button.val("Add Files");
|
||||
}
|
||||
//reset timestamp to redraw the cursors.
|
||||
AIRTIME.showbuilder.resetTimestamp();
|
||||
|
||||
$lib.show()
|
||||
.width(Math.floor(screenWidth * 0.5));
|
||||
|
||||
$builder.width(Math.floor(screenWidth * 0.5))
|
||||
.find("#sb_edit")
|
||||
.remove()
|
||||
.end();
|
||||
|
||||
schedTable.fnDraw();
|
||||
});
|
||||
|
||||
oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
|
||||
AIRTIME.showbuilder.fnServerData.start = oRange.start;
|
||||
AIRTIME.showbuilder.fnServerData.end = oRange.end;
|
||||
$lib.on("click", "#sb_lib_close", function(ev) {
|
||||
var schedTable = $("#show_builder_table").dataTable();
|
||||
|
||||
$lib.hide();
|
||||
$builder.width(screenWidth)
|
||||
.find(".sb-timerange")
|
||||
.append($toggleLib)
|
||||
.end();
|
||||
|
||||
schedTable.fnDraw();
|
||||
});
|
||||
|
||||
AIRTIME.library.libraryInit();
|
||||
AIRTIME.showbuilder.builderDataTable();
|
||||
$builder.find('legend').click(function(ev, item){
|
||||
|
||||
$fs = $(this).parents('fieldset');
|
||||
|
||||
if ($fs.hasClass("closed")) {
|
||||
|
||||
$fs.removeClass("closed");
|
||||
$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 150);
|
||||
}
|
||||
else {
|
||||
$fs.addClass("closed");
|
||||
|
||||
//set defaults for the options.
|
||||
$fs.find('select').val(0);
|
||||
$fs.find('input[type="checkbox"]').attr("checked", false);
|
||||
$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 110);
|
||||
}
|
||||
});
|
||||
|
||||
//set click event for all my shows checkbox.
|
||||
$builder.on("click", "#sb_my_shows", function(ev) {
|
||||
|
||||
if ($(this).is(':checked')) {
|
||||
$(ev.delegateTarget).find('#sb_show_filter').val(0);
|
||||
}
|
||||
});
|
||||
|
||||
//set select event for choosing a show.
|
||||
$builder.on("change", '#sb_show_filter', function(ev) {
|
||||
|
||||
if ($(this).val() !== 0) {
|
||||
$(ev.delegateTarget).find('#sb_my_shows').attr("checked", false);
|
||||
}
|
||||
});
|
||||
|
||||
//check if the timeline viewed needs updating.
|
||||
setInterval(function(){
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue