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

SAAS-999 - Change Advanced Search Options to dropdown

This commit is contained in:
Duncan Sommerville 2015-08-04 15:38:48 -04:00
parent f138dc6b47
commit 4200f56265
6 changed files with 191 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
airtime_mvc/application/controllers/ShowBuilderController.php
View File

@ -18,6 +18,7 @@ class ShowBuilderController extends Zend_Controller_Action {
$this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.pluginAPI.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.fnSetFilteringDelay.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.ColVis.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.ColReorder.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.FixedColumns.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.columnFilter.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');

19
airtime_mvc/application/views/scripts/show-builder/index.phtml
View File

@ -30,13 +30,18 @@
<div id="library_content" class="lib-content tabs content-pane wide-panel">
<div class="panel-header">
<fieldset class="toggle closed" id="filter_options">
<legend style="cursor: pointer;">
<span class="ui-icon ui-icon-triangle-2-n-s"></span>
<?php echo _("Advanced Search Options") ?>
</legend>
<div id="advanced_search" class="advanced_search form-horizontal"></div>
</fieldset>
<!-- <fieldset class="toggle closed" id="filter_options">-->
<!-- <legend style="cursor: pointer;">-->
<!-- <span class="ui-icon ui-icon-triangle-2-n-s"></span>-->
<!-- --><?php //echo _("Advanced Search Options") ?>
<!-- </legend>-->
<!-- </fieldset>-->
<div id="advanced-options" class="btn-group">
<button class="btn btn-small dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<div id="advanced_search" class="advanced_search form-horizontal dropdown-menu"></div>
</div>
</div>
<div class="outer-datatable-wrapper">
<table id="library_display" cellpadding="0" cellspacing="0" class="datatable"></table>

99
airtime_mvc/public/css/_showbuilder.css
View File

@ -43,15 +43,19 @@ div.ColVis_collectionBackground {
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
/*border-radius: 10px;*/
}
::-webkit-scrollbar-thumb {
background-color: #ff5d1a;
border-radius: 10px;
/*border-radius: 10px;*/
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.75);
}
::-webkit-scrollbar-corner {
-webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0.75);
}
/* Show Builder*/
.content-pane {
@ -91,15 +95,6 @@ div.ColVis_collectionBackground {
flex: 1;
}
@media screen and (max-height: 650px) {
#master-panel {
display: none;
}
.wrapper {
top: 40px !important;
}
}
@media screen and (max-width: 1475px) {
.wrapper {
-webkit-flex-flow: column !important;
@ -168,10 +163,13 @@ div.ColVis_collectionBackground {
}
#library_content .dataTables_filter input[type="text"], #library_content .dataTables_filter select {
margin-top: 6px;
width: 20%;
float: right;
height: 26px;
margin: 0;
border: 0;
float: left;
position: absolute;
width: 100%;
}
#library_content label {
@ -194,7 +192,7 @@ div.ColVis_collectionBackground {
font-size: 14px;
}
#library_content legend, #library_content span, #library_content label {
#library_content legend, #library_content span {
font-weight: normal;
color: #efefef;
}
@ -206,9 +204,13 @@ div.ColVis_collectionBackground {
bottom: 0;
}
#library_display_processing {
z-index: 1;
}
#library_display_wrapper, #show_builder_table_wrapper {
position: absolute;
top: 4px;
top: 34px;
bottom: 4px;
right: 4px;
left: 4px;
@ -216,12 +218,18 @@ div.ColVis_collectionBackground {
.dataTables_scrolling {
position: absolute;
bottom: 38px; /* 38 px is the size of the header/footer */
top: 38px;
bottom: 39px; /* 38 px is the size of the header/footer + 1px because there's no internal border */
top: 39px;
left: 1px; /* Border */
right: 0;
}
#library_display {
border: none;
}
/* Library Search */
#filter_options {
text-align: center;
padding: 15px 0 15px 15px;
@ -230,12 +238,60 @@ div.ColVis_collectionBackground {
}
#advanced_search {
margin-top: 15px;
position: absolute;
left: -500px;
padding: 5px;
margin-top: -2px;
}
#advanced_search label, #advanced_search span {
font-weight: normal;
font-size: 14px;
line-height: 24px;
color: #242424;
}
#advanced_search .controls {
text-align: right;
}
#advanced_search .control-group {
padding: 5px;
margin-bottom: 0;
}
#advanced_search .sp-checked-icon {
position: absolute;
margin-top: 4px;
}
#advanced-options {
float: right;
z-index: 1;
}
#advanced-options > button {
background: transparent none;
color: transparent;
border: none;
padding: 4px 8px 4px 4px;
box-shadow: none;
}
#advanced-options > button:focus {
outline-width: 0;
}
#advanced-options > button > span {
border-top: 4px solid #242424;
}
.panel-header {
position: relative;
position: absolute;
top: 4px;
right: 4px;
left: 4px;
z-index: 1; /* Display above the content wrapper */
}
/* Timeline */
@ -281,7 +337,7 @@ div.ColVis_collectionBackground {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 0;
margin: 0 4px 0;
margin: 0;
}
.nav-tabs a {
@ -313,6 +369,7 @@ div.ColVis_collectionBackground {
/* Media editors */
#side_playlist {
margin-top: 34px;
width: 100%; /* Override because we're using flexbox */
overflow-x: hidden;

53
airtime_mvc/public/js/airtime/library/_library.js
View File

@ -148,6 +148,13 @@ var AIRTIME = (function(AIRTIME) {
"</div>");
};
mod.moveSearchBarToHeader = function() {
$("#library_display_filter").appendTo("#library_content > .panel-header");
$("#advanced_search").click(function(e) {
e.stopPropagation();
});
};
mod.createToolbarDropDown = function() {
$('#sb-select-page').click(function(){mod.selectCurrentPage();});
$('#sb-dselect-page').click(function(){mod.deselectCurrentPage();});
@ -449,7 +456,7 @@ var AIRTIME = (function(AIRTIME) {
if (ele.bVisible) {
advanceSearchDiv.append(
"<div id='advanced_search_col_"+currentColId+"' class='control-group'>" +
"<label class='control-label'"+labelStyle+">"+ele.sTitle+" : </label>" +
"<label class='control-label'"+labelStyle+">"+ele.sTitle+"</label>" +
"<div id='"+ele.mDataProp+"' class='controls "+inputClass+"'></div>" +
"</div>");
} else {
@ -501,7 +508,7 @@ var AIRTIME = (function(AIRTIME) {
"aoColumns": [
/* ftype */ { "sTitle" : "" , "mDataProp" : "ftype" , "bSearchable" : false , "bVisible" : false } ,
/* Type */ { "sTitle" : "" , "mDataProp" : "image" , "bSearchable" : false , "sWidth" : "16px" , "sClass" : "library_type" , "iDataSort" : 0 } ,
///* Is Scheduled */ { "sTitle" : $.i18n._("Scheduled") , "mDataProp" : "is_scheduled" , "bVisible" : false , "bSearchable" : false , "sWidth" : "90px" , "sClass" : "library_is_scheduled"} ,
/* Is Scheduled */ { "sTitle" : $.i18n._("Scheduled") , "mDataProp" : "is_scheduled" , "bVisible" : false , "bSearchable" : false , "sWidth" : "90px" , "sClass" : "library_is_scheduled"} ,
/* Is Playlist */ { "sTitle" : $.i18n._("Playlist / Block") , "mDataProp" : "is_playlist" , "bSearchable" : false , "sWidth" : "110px" , "sClass" : "library_is_playlist"} ,
/* Title */ { "sTitle" : $.i18n._("Title") , "mDataProp" : "track_title" , "sClass" : "library_title" , "sWidth" : "170px" } ,
/* Creator */ { "sTitle" : $.i18n._("Creator") , "mDataProp" : "artist_name" , "sClass" : "library_creator" , "sWidth" : "160px" } ,
@ -575,7 +582,7 @@ var AIRTIME = (function(AIRTIME) {
// sure everything works properly.
for (i = 0, length = a.length; i < length; i++) {
if (typeof(a[i]) === "string") {
a[i] = (a[i] === "true") ? true : false;
a[i] = (a[i] === "true");
}
}
}
@ -685,7 +692,7 @@ var AIRTIME = (function(AIRTIME) {
"oLanguage": datatables_dict,
// R = ColReorder, C = ColVis
"sDom": 'R<"dt-process-rel"r><"H"<"library_toolbar"Cf>><"dataTables_scrolling"t><"F"ilp>>',
"sDom": 'Rf<"dt-process-rel"r><"H"<"library_toolbar"C>><"dataTables_scrolling"t><"F"ilp>>',
"oColVis": {
"sAlign": "right",
@ -1044,7 +1051,7 @@ function validateAdvancedSearch(divs) {
searchTerm[0] = "";
searchTerm[1] = "";
$.each(divs, function(i, div){
fieldName = $(div).children(':nth-child(2)').attr('id');
fieldName = $(div).children('div').attr('id');
fields = $(div).children().find('input');
searchTermType = validationTypes[fieldName];
valid = true;
@ -1088,9 +1095,9 @@ function validateAdvancedSearch(divs) {
*/
} else if (searchTerm[0] === "" && searchTerm[1] !== "" ||
searchTerm[0] === "" && searchTerm[1] === ""){
if ($(field).closest('div').children(':last-child').hasClass('checked-icon') ||
$(field).closest('div').children(':last-child').hasClass('not-available-icon')) {
$(field).closest('div').children(':last-child').remove();
if ($(field).closest('div').prev().hasClass('checked-icon') ||
$(field).closest('div').prev().hasClass('not-available-icon')) {
$(field).closest('div').prev().remove();
}
}
@ -1119,24 +1126,30 @@ function addRemoveValidationIcons(valid, field, searchTermType) {
invalidIndicator = " <span title='"+title+"' class='not-available-icon sp-checked-icon'></span>";
if (valid) {
if (!field.closest('div').children(':last-child').hasClass('checked-icon')) {
if (!field.closest('div').prev().hasClass('checked-icon')) {
// remove invalid icon before adding valid icon
if (field.closest('div').children(':last-child').hasClass('not-available-icon')) {
field.closest('div').children(':last-child').remove();
if (field.closest('div').prev().hasClass('not-available-icon')) {
field.closest('div').prev().remove();
}
field.closest('div').append(validIndicator);
field.closest('div').before(validIndicator);
}
} else {
if (!field.closest('div').children(':last-child').hasClass('not-available-icon')) {
if (!field.closest('div').prev().hasClass('not-available-icon')) {
// remove valid icon before adding invalid icon
if (field.closest('div').children(':last-child').hasClass('checked-icon')) {
field.closest('div').children(':last-child').remove();
if (field.closest('div').prev().hasClass('checked-icon')) {
field.closest('div').prev().remove();
}
field.closest('div').append(invalidIndicator);
field.closest('div').before(invalidIndicator);
}
}
}
function resizeAdvancedSearch() {
var s = $("#advanced_search");
s.css("max-height", $(window).height() / 4);
s.css("overflow", "auto");
}
/*
* Validation types: s => string i => integer n => numeric (positive/negative,
* whole/decimals) t => timestamp l => length
@ -1212,5 +1225,13 @@ $(document).ready(function() {
oTable.fnDraw();
}
});
$("#advanced-options").on("click", function() {
resizeAdvancedSearch();
});
$(window).resize(function() {
resizeAdvancedSearch();
});
});

1
airtime_mvc/public/js/airtime/library/events/_library_showbuilder.js
View File

@ -224,6 +224,7 @@ var AIRTIME = (function(AIRTIME) {
var $toolbar = $(".lib-content .fg-toolbar:first");
mod.createToolbarButtons();
mod.moveSearchBarToHeader();
$toolbar.append($menu);
// add to timeline button

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

@ -434,7 +434,7 @@ var AIRTIME = (function(AIRTIME){
/* fade out */ {"mDataProp": "fadeout", "sTitle": $.i18n._("Fade Out"), "bVisible": false, "sClass": "sb-fade-out"},
/* Mime */ {"mDataProp" : "mime", "sTitle" : $.i18n._("Mime"), "bVisible": false, "sClass": "sb-mime"}
],
"bJQueryUI": true,
"bSort": false,
"bFilter": false,
@ -443,7 +443,7 @@ var AIRTIME = (function(AIRTIME){
"bInfo": false,
"bAutoWidth": false,
"bDeferRender": true,
"bStateSave": true,
"fnStateSaveParams": function (oSettings, oData) {
//remove oData components we don't want to save.
@ -451,7 +451,7 @@ var AIRTIME = (function(AIRTIME){
delete oData.aoSearchCols;
},
"fnStateSave": function fnStateSave(oSettings, oData) {
localStorage.setItem('datatables-timeline', JSON.stringify(oData));
/*
@ -464,19 +464,19 @@ var AIRTIME = (function(AIRTIME){
},
"fnStateLoad": function fnBuilderStateLoad(oSettings) {
var settings = localStorage.getItem('datatables-timeline');
if (settings !== "") {
return JSON.parse(settings);
}
}
},
"fnStateLoadParams": function (oSettings, oData) {
var i,
length,
a = oData.abVisCols;
//putting serialized data back into the correct js type to make
//sure everything works properly.
for (i = 0, length = a.length; i < length; i++) {
for (i = 0, length = a.length; i < length; i++) {
if (typeof(a[i]) === "string") {
a[i] = (a[i] === "true") ? true : false;
}
@ -491,10 +491,10 @@ var AIRTIME = (function(AIRTIME){
}
}
}*/
oData.iCreate = parseInt(oData.iCreate, 10);
},
"fnServerData": mod.fnServerData,
"fnRowCallback": function fnRowCallback( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
var i, length,
@ -523,19 +523,19 @@ var AIRTIME = (function(AIRTIME){
$node.html("");
$node.attr("style", "display : none");
}
$nRow.addClass(sClass);
};
if (aData.header === true) {
//remove the column classes from all tds.
$nRow.find('td').removeClass();
$node = $(nRow.children[0]);
$node.html("");
cl = 'sb-header';
if (aData.record === true) {
$div = $("<div/>", {
"class": "small-icon " + headerIcon
@ -548,15 +548,15 @@ var AIRTIME = (function(AIRTIME){
});
$node.append($div);
}
sSeparatorHTML = '<span class="show-title">'+aData.title+'</span>';
if (aData.rebroadcast === true) {
sSeparatorHTML += '<span>'+aData.rebroadcast_title+'</span>';
}
sSeparatorHTML += '<span class="push-right">';
if (aData.startDate === aData.endDate) {
sSeparatorHTML += '<span class="show-date">'+aData.startDate+'</span><span class="show-time">'+aData.startTime+'</span>';
sSeparatorHTML +='-<span class="show-time">'+aData.endTime+'</span>';
@ -565,18 +565,18 @@ var AIRTIME = (function(AIRTIME){
sSeparatorHTML += '<span class="show-date">'+aData.startDate+'</span><span class="show-time">'+aData.startTime+'</span>';
sSeparatorHTML +='-<span class="show-date">'+aData.endDate+'</span><span class="show-time">'+aData.endTime+'</span>';
}
sSeparatorHTML += '</span>';
fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
}
else if (aData.footer === true) {
//remove the column classes from all tds.
$nRow.find('td').removeClass();
$node = $(nRow.children[0]);
cl = 'sb-footer';
//check the show's content status.
if (aData.runtime >= 0) {
$node.html('<span class="ui-icon ui-icon-check"></span>');
@ -586,37 +586,37 @@ var AIRTIME = (function(AIRTIME){
$node.html('<span class="ui-icon ui-icon-notice"></span>');
cl = cl + ' ui-state-error';
}
sSeparatorHTML = '<span>'+aData.fRuntime+'</span>';
fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
}
else if (aData.empty === true) {
//remove the column classes from all tds.
$nRow.find('td').removeClass();
$node = $(nRow.children[0]);
if ($node) {
$node.empty();
}
sSeparatorHTML = '<span>'+$.i18n._("Show Empty")+'</span>';
cl = cl + " sb-empty odd";
fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
}
else if (aData.record === true) {
//remove the column classes from all tds.
$nRow.find('td').removeClass();
$node = $(nRow.children[0]);
$node.html('');
sSeparatorHTML = '<span>'+$.i18n._("Recording From Line In")+'</span>';
cl = cl + " sb-record odd";
fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
}
else {
//add the play function if the file exists on disk.
$image = $nRow.find('td.sb-image');
$image.empty();
@ -663,10 +663,10 @@ var AIRTIME = (function(AIRTIME){
$node.empty();
}
}
//add the show colour to the leftmost td
if (aData.footer !== true) {
if ($nRow.hasClass('sb-header')) {
a = 1;
}
@ -676,15 +676,15 @@ var AIRTIME = (function(AIRTIME){
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:first').css('background', 'rgba('+r+', '+g+', '+b+', '+a+')');
}
//save some info for reordering purposes.
$nRow.data({"aData": aData});
@ -697,7 +697,7 @@ var AIRTIME = (function(AIRTIME){
else {
$nRow.addClass("sb-future");
}
if (aData.allowed !== true || aData.linked_allowed === false) {
$nRow.addClass("sb-not-allowed");
}
@ -706,7 +706,7 @@ var AIRTIME = (function(AIRTIME){
$nRow.attr("id", aData.id);
$nRow.attr("si_id", aData.instance);
}
//status used to colour tracks.
if (aData.status === 2) {
$nRow.addClass("sb-boundry");
@ -714,22 +714,22 @@ var AIRTIME = (function(AIRTIME){
else if (aData.status === 0) {
$nRow.addClass("sb-over");
}
if (aData.currentShow === true) {
$nRow.addClass("sb-current-show");
}
//call the context menu so we can prevent the event from propagating.
$nRow.find('td:gt(1)').click(function(e){
$(this).contextMenu({x: e.pageX, y: e.pageY});
return false;
});
},
//remove any selected nodes before the draw.
"fnPreDrawCallback": function( oSettings ) {
//make sure any dragging helpers are removed or else they'll be stranded on the screen.
$("#draggingContainer").remove();
},
@ -756,7 +756,7 @@ var AIRTIME = (function(AIRTIME){
$tr,
//use this array to cache DOM heights then we can detach the table to manipulate it to increase speed.
heights = [];
clearTimeout(mod.timeout);
/*
@ -764,24 +764,24 @@ var AIRTIME = (function(AIRTIME){
if ($lib.length > 0 && $lib.filter(":visible").length > 0) {
$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": {
@ -791,11 +791,11 @@ var AIRTIME = (function(AIRTIME){
markerDiv = $("<div />", {
"class": "marker"
});
$td.append(markerDiv).wrapInner(wrapperDiv);
}
//re-highlight selected cursors before draw took place
for (i = 0; i < cursorIds.length; i++) {
if (headerFooter[i] == "f") {
@ -803,7 +803,7 @@ var AIRTIME = (function(AIRTIME){
} else {
$tr = $table.find("tr[id="+cursorIds[i]+"][si_id="+showInstanceIds[i]+"]");
}
//If the currently playing track's cursor is selected,
//and that track is deleted, the cursor position becomes
//unavailble. We have to check the position is available
@ -811,16 +811,16 @@ var AIRTIME = (function(AIRTIME){
//
if ($tr.find(".sb-checkbox").children().hasClass("innerWrapper")) {
mod.selectCursor($tr);
// If the selected cursor is the footer row we need to
//explicitly select it because that row does not have
// innerWrapper class
//
} 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 ($cursorRows.length === 1) {
$td = $cursorRows.find("td:first");
@ -828,7 +828,7 @@ var AIRTIME = (function(AIRTIME){
$cursorRows.addClass("cursor-selected-row");
}
}
$parent.append($table);
}
@ -838,11 +838,11 @@ var AIRTIME = (function(AIRTIME){
$sbTable.find("tr."+NOW_PLAYING_CLASS),
$sbTable.find("tbody").find("tr.sb-future.sb-footer, tr.sb-future.sb-header").filter(":first")
];
//check which element we should set a timeout relative to.
for (i = 0, length = elements.length; i < length; i++) {
temp = elements[i];
if (temp.length > 0) {
aData = temp.data("aData");
// max time interval
@ -857,25 +857,25 @@ var AIRTIME = (function(AIRTIME){
}
}
mod.checkToolBarIcons();
},
// R = ColReorder, C = ColVis
"sDom": 'R<"dt-process-rel"r><"sb-padded"<"H"C>><"dataTables_scrolling sb-padded"t>',
"oColVis": {
"aiExclude": [ 0, 1 ],
"buttonText": $.i18n._("Show / hide columns"),
},
"oColReorder": {
"iFixedColumns": 2
},
"sAjaxDataProp": "schedule",
"oLanguage": datatables_dict,
"sAjaxSource": baseUrl+"showbuilder/builder-feed"
"sAjaxSource": baseUrl+"showbuilder/builder-feed"
});
$sbTable.find("tbody").on("click", "input:checkbox", function(ev) {