Congegni
/
libretime
mirror of https://github.com/libretime/libretime.git
7
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

CC-5778 : Improving Builder Rendering Time 

fix css missing a td, not querying DOM for height/width.
This commit is contained in:
Naomi 2014-04-03 17:30:30 -04:00
parent 9d11d2a6a7
commit 090258e45b
2 changed files with 39 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -120,10 +120,10 @@ div.sb-timerange input.error {
} }
.marker { .marker {
background: url(images/tl-arrow.png) no-repeat scroll 3px 4px; background: url(images/tl-arrow.png) no-repeat scroll 3px 4px;
top: -14px; top: -9px;
display: block; display: block;
height: 9px; height: 9px;
left: -17px; left: -13px;
padding: 4px 0 4px 3px; padding: 4px 0 4px 3px;
position: absolute; position: absolute;
width: 9px; width: 9px;
@ -162,7 +162,8 @@ table.datatable tr.cursor-selected-row td, table.datatable tr.cursor-selected-ro
.sb-boundry td.sb-cue-in, .sb-boundry td.sb-cue-in,
.sb-boundry td.sb-cue-out, .sb-boundry td.sb-cue-out,
.sb-boundry td.sb-fade-in, .sb-boundry td.sb-fade-in,
.sb-boundry td.sb-fade-out { .sb-boundry td.sb-fade-out,
.sb-boundry td.sb-mime {
background-color: rgba(230, 106, 49, 0.5); background-color: rgba(230, 106, 49, 0.5);
} }
@ -176,7 +177,8 @@ table.datatable tr.cursor-selected-row td, table.datatable tr.cursor-selected-ro
.sb-over td.sb-cue-in, .sb-over td.sb-cue-in,
.sb-over td.sb-cue-out, .sb-over td.sb-cue-out,
.sb-over td.sb-fade-in, .sb-over td.sb-fade-in,
.sb-over td.sb-fade-out { .sb-over td.sb-fade-out,
.sb-over td.sb-mime {
background-color: rgba(255, 0, 0, 0.5); background-color: rgba(255, 0, 0, 0.5);
} }
@ -254,6 +256,10 @@ table.datatable tr.sb-header.odd:hover td, table.datatable tr.sb-header.even:hov
margin-right:5px; margin-right:5px;
} }
.sb-checkbox {
position: relative;
}
/* /*
* keep the dialog css at the bottom so it can override previous rules if needed. * keep the dialog css at the bottom so it can override previous rules if needed.
*/ */

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

@ -92,18 +92,7 @@ var AIRTIME = (function(AIRTIME){
mod.refresh = function(schedId) { mod.refresh = function(schedId) {
mod.resetTimestamp(); mod.resetTimestamp();
// once a track plays out we need to check if we can update
// the is_scheduled flag in cc_files
if (schedId > 0) { if (schedId > 0) {
//TODO work on this
/*
$.post(baseUrl+"schedule/update-future-is-scheduled",
{"format": "json", "schedId": schedId}, function(data) {
if (data.redrawLibTable !== undefined && data.redrawLibTable) {
$("#library_content").find("#library_display").dataTable().fnStandingRedraw();
}
});
*/
oSchedTable.fnDraw(); oSchedTable.fnDraw();
} }
}; };
@ -631,6 +620,13 @@ var AIRTIME = (function(AIRTIME){
$node = $(nRow.children[0]); $node = $(nRow.children[0]);
if (aData.allowed === true && aData.scheduled >= 1) { if (aData.allowed === true && aData.scheduled >= 1) {
$node.html('<input type="checkbox" name="'+aData.id+'"></input>'); $node.html('<input type="checkbox" name="'+aData.id+'"></input>');
//putting the cursor on the screen
if (aData.scheduled == 2) {
if ($lib.length > 0 && $lib.filter(":visible").length > 0) {
$node.append('<div class="marker"></div>');
}
}
} }
else { else {
$node.html(''); $node.html('');
@ -708,6 +704,7 @@ var AIRTIME = (function(AIRTIME){
}, },
"fnDrawCallback": function fnBuilderDrawCallback(oSettings, json) { "fnDrawCallback": function fnBuilderDrawCallback(oSettings, json) {
var isInitialized = false; var isInitialized = false;
//var timer1 = new Date().getTime();
if (!isInitialized) { if (!isInitialized) {
//when coming to 'Now Playing' page we want the page //when coming to 'Now Playing' page we want the page
@ -718,58 +715,22 @@ var AIRTIME = (function(AIRTIME){
} }
isInitialized = true; isInitialized = true;
var wrapperDiv, var $td,
markerDiv,
$td,
aData, aData,
elements, elements,
i, length, temp, i, length, temp,
$cursorRows, $cursorRows,
$table = $(this), $table = $(this);
$parent = $table.parent(),
$tr,
//use this array to cache DOM heights then we can detach the table to manipulate it to increase speed.
heights = [];
clearTimeout(mod.timeout); clearTimeout(mod.timeout);
//only create the cursor arrows if the library is on the page. //only create the cursor arrows if the library is on the page.
if ($lib.length > 0 && $lib.filter(":visible").length > 0) { if ($lib.length > 0 && $lib.filter(":visible").length > 0) {
$cursorRows = $sbTable.find("tbody tr.sb-future.sb-allowed:not(.sb-header, .sb-empty)"); $cursorRows = $sbTable.find("tbody tr.sb-future.sb-allowed:not(.sb-header, .sb-empty)");
//need to get heights of tds while elements are still in the DOM.
for (i = 0, length = $cursorRows.length; i < length; i++) {
$td = $($cursorRows.get(i)).find("td:first");
heights.push($td.height());
}
//detach the table to increase speed.
$table.detach();
for (i = 0, length = $cursorRows.length; i < length; i++) {
$td = $($cursorRows.get(i)).find("td:first");
if ($td.hasClass("dataTables_empty")) {
$parent.append($table);
return false;
}
wrapperDiv = $("<div />", {
"class": "innerWrapper",
"css": {
"height": heights[i]
}
});
markerDiv = $("<div />", {
"class": "marker"
});
$td.append(markerDiv).wrapInner(wrapperDiv);
}
//re-highlight selected cursors before draw took place //re-highlight selected cursors before draw took place
/*
for (i = 0; i < cursorIds.length; i++) { for (i = 0; i < cursorIds.length; i++) {
if (headerFooter[i] == "f") { if (headerFooter[i] == "f") {
$tr = $table.find("tbody tr.sb-footer[id="+cursorIds[i]+"][si_id="+showInstanceIds[i]+"]"); $tr = $table.find("tbody tr.sb-footer[id="+cursorIds[i]+"][si_id="+showInstanceIds[i]+"]");
@ -777,23 +738,24 @@ var AIRTIME = (function(AIRTIME){
$tr = $table.find("tr[id="+cursorIds[i]+"][si_id="+showInstanceIds[i]+"]"); $tr = $table.find("tr[id="+cursorIds[i]+"][si_id="+showInstanceIds[i]+"]");
} }
/* If the currently playing track's cursor is selected, // If the currently playing track's cursor is selected,
* and that track is deleted, the cursor position becomes //and that track is deleted, the cursor position becomes
* unavailble. We have to check the position is available //unavailble. We have to check the position is available
* before re-highlighting it. // before re-highlighting it.
*/ //
if ($tr.find(".sb-checkbox").children().hasClass("innerWrapper")) { if ($tr.find(".sb-checkbox").children().hasClass("innerWrapper")) {
mod.selectCursor($tr); mod.selectCursor($tr);
/* If the selected cursor is the footer row we need to // If the selected cursor is the footer row we need to
* explicitly select it because that row does not have //explicitly select it because that row does not have
* innerWrapper class // innerWrapper class
*/ //
} else if ($tr.hasClass("sb-footer")) { } else if ($tr.hasClass("sb-footer")) {
mod.selectCursor($tr); mod.selectCursor($tr);
} }
} }
*/
//if there is only 1 cursor on the page highlight it by default. //if there is only 1 cursor on the page highlight it by default.
if ($cursorRows.length === 1) { if ($cursorRows.length === 1) {
$td = $cursorRows.find("td:first"); $td = $cursorRows.find("td:first");
@ -801,10 +763,8 @@ var AIRTIME = (function(AIRTIME){
$cursorRows.addClass("cursor-selected-row"); $cursorRows.addClass("cursor-selected-row");
} }
} }
$parent.append($table);
} }
//order of importance of elements for setting the next timeout. //order of importance of elements for setting the next timeout.
elements = [ elements = [
$sbTable.find("tr."+NOW_PLAYING_CLASS), $sbTable.find("tr."+NOW_PLAYING_CLASS),
@ -830,6 +790,10 @@ var AIRTIME = (function(AIRTIME){
} }
mod.checkToolBarIcons(); mod.checkToolBarIcons();
//var timer2 = new Date().getTime();
//console.log(timer2 - timer1);
}, },
// R = ColReorder, C = ColVis // R = ColReorder, C = ColVis