Skip to content

Commit

Permalink
StickyTable Headers throughout UI and addition of search on script br…
Browse files Browse the repository at this point in the history 
…owser (#1829)

* addition of jquery.floatThead to aid in having sticky table headers on page scroll
* Add sticky theads throughout the data input tables in UI
* formatting changes to make easier to read debugging
* set modal thead to have white background
* refactor handling of page ready events to allow control of common and page specific DOM manipulation functions prior to running the setup of UI widgets and actions - fixes conflicts in timings off events onload
* migrate filemanager js from inline to included js file
* changePreview schedule to Ajax data load to aid modal rendering with sticky header
* add class for fppStickyModalTheadTable so they process differently to non modal tables
* change page ready function setup and started work on tab setup
* move troubleshooting pageload commands to new DOM population / action setting routine
* make height calc take into account margins when determining sticky header positions
* remove redundant code
* change tablePageHeader layout to padding in favour of margin to correct appearance of scrolling divs
* add a little extra spacing to host name in header
* adjust header Hostname text size for better mobile display
* remove code moved to file-manager.js
* standardise nav pill appearance on troubleshoot page
* update to handle multiple stickyhead tables on single displayed page/tab
* add sticky headers to the 2 tables on backup.php
* set background color for thead on backups tables (for stickythead)
* remove empty rules (good practise) added appearance for compatibility with webkit appearance
* make headers on 2 backup files tables sticky and responsive
* added search functionality for script browser
* manual setup of stickyHeaders due to 2 on overlaymodels page
* window resizing behaviour for stickyHead, annotation of commands and removing debugging
* added missing alt tag for images - (HTML standard alignment)
* target changed from _new to _blank for HTML validation
* fix multiple divs with same id for html validation
* Fix aria-labelledby not referencing a page element
* adding sticky table headers to pixeloverlaymodels page (2 tables)
* fixes for display of syncStatsTable on index.php
  • Loading branch information
@OnlineDynamic
OnlineDynamic committed Apr 20, 2024
1 parent dc53bd5 commit 2fc1862
Show file tree
Hide file tree
Showing 28 changed files with 1,745 additions and 322 deletions.
36 changes: 33 additions & 3 deletions www/backup.php
View file
Expand Up @@ -2556,6 +2556,7 @@ function is_array_empty($InputVariable)
//See if we should skip spitting out the HTML code below
if ($skipHTMLCodeOutput === false) {
?>

<!DOCTYPE html>
<html lang="en">
<head>
Expand Down Expand Up @@ -3536,11 +3537,40 @@ function GetBackupRemoteStorageDevice() {
});
}

$(document).ready(function() {


function pageSpecific_PageLoad_DOM_Setup() {
$('#backup\\.Path').attr('list', 'usbDirectories');
GetBackupDevices();
GetJSONConfigBackupList();
});
}

function pageSpecific_PageLoad_PostDOMLoad_ActionsSetup(){
$('a[data-bs-toggle="pill"]').on('shown.bs.tab', function (e) {
$('table').floatThead('reflow');
});

//float th thead on download existing backups table
$('.table-download-existing-backups').floatThead({
zIndex: 990,
debug: true ,
scrollContainer: function() {
return $('.table-download-existing-backups').closest(".table-download-existing-backups-container");
}
});


//float th thead on restore existing backups table
$('.table-restore-existing-backups').floatThead({
zIndex: 990,
debug: false ,
scrollContainer: function() {
return $('.table-restore-existing-backups').closest(".table-restore-existing-backups-container");
}
});


}

var activeTabNumber =
<?php
Expand Down Expand Up @@ -3758,7 +3788,7 @@ class="fas fa-fw fa-nbsp fa-download"></i>Download
</div>

<div class="row">
<div class="col-md-12 table-download-existing-backups-container">
<div class="col-md-12 table-download-existing-backups-container table-responsive">
<table class="table table-download-existing-backups">
<thead>
<tr>
Expand Down
6 changes: 1 addition & 5 deletions www/channelinputs.php
View file
Expand Up @@ -246,7 +246,7 @@ function handleCIKeypress(e)

<div class='fppTableWrapper'>
<div class='fppTableContents' role="region" aria-labelledby="tblUniverses" tabindex="0">
<table id="tblUniverses" class='universeTable fullWidth fppSelectableRowTable'>
<table id="tblUniverses" class='universeTable fullWidth fppSelectableRowTable fppStickyTheadTable'>
<thead id='tblUniversesHead'>
<th class="tblScheduleHeadGrip"></th>
<th>Input</th>
Expand Down Expand Up @@ -282,10 +282,6 @@ function handleCIKeypress(e)
<div id='debugOutput'>
</div>

<div id="dialog-panelLayout" title="panelLayout" style="display: none">
<div id="layoutText">
</div>
</div>
</div>
</div>

Expand Down
34 changes: 17 additions & 17 deletions www/channeloutputs.php
View file
Expand Up @@ -164,8 +164,7 @@ function handleCOKeypress(e)
}


$(document).ready(function(){
$(document).on('keydown', handleCOKeypress);
function pageSpecific_PageLoad_DOM_Setup(){

var channelOutputsJSON = "<?echo $channelOutputsJSON; ?>";

Expand All @@ -175,8 +174,13 @@ function handleCOKeypress(e)
channelOutputs.channelOutputs = [];

UpdateChannelOutputLookup();
}

function pageSpecific_PageLoad_PostDOMLoad_ActionsSetup(){
$(document).on('keydown', handleCOKeypress);
}


});

</script>
<title><?echo $pageTitle; ?></title>
Expand Down Expand Up @@ -228,9 +232,8 @@ function handleCOKeypress(e)
$lpTabStyleActive = "active";
}
?>

<ul class="nav nav-pills pageContent-tabs" id="channelOutputTabs" role="tablist">
<li class="nav-item <?=$e131TabStyle?>" id="tab-e131-LI">
<ul class="ui-tabs-nav nav nav-pills pageContent-tabs" id="channelOutputTabs" role="tablist">
<li class="ui-tabs-tab nav-item <?=$e131TabStyle?>" id="tab-e131-LI">
<a class="nav-link <?=$e131TabStyleActive?>" id="tab-e131-tab" tabType='UDP' data-bs-toggle="pill" href="#tab-e131" role="tab" aria-controls="tab-e131" aria-selected="true">
E1.31 / ArtNet / DDP / KiNet
</a>
Expand All @@ -253,7 +256,7 @@ function handleCOKeypress(e)
}
}
?>
<li class="nav-item <?=$stringTabStyle?>" id="tab-strings-LI" >
<li class="ui-tabs-tab nav-item <?=$stringTabStyle?>" id="tab-strings-LI" >
<a class="nav-link <?=$stringTabStyleActive?>" id="stringTab-tab" tabType='strings' data-bs-toggle="pill" href='#stringTab' role="tab" aria-controls="stringTab">
<?echo $stringTabText; ?>
</a>
Expand All @@ -263,7 +266,7 @@ function handleCOKeypress(e)
if ($settings['Platform'] == "Raspberry Pi") {
if (in_array('fpd', $currentCapeInfo["provides"])) {
?>
<li class="nav-item">
<li class="ui-tabs-tab nav-item">
<a class="nav-link" id="tab-fpd-tab" tabType='FPD' data-bs-toggle="pill" href='#tab-fpd' role="tab" aria-controls="tab-fpd">
Falcon Pixelnet/DMX
</a>
Expand All @@ -283,18 +286,19 @@ function handleCOKeypress(e)

}
?>
<li class="nav-item <?=$lpTabStyle?>" id="tab-LEDPanels-LI">
<li class="ui-tabs-tab nav-item <?=$lpTabStyle?>" id="tab-LEDPanels-LI">
<a class="nav-link <?=$lpTabStyleActive?>" id="tab-LEDPanels-tab" tabType='panels' data-bs-toggle="pill" href='#tab-LEDPanels' role="tab" aria-controls="tab-LEDPanels">
<?echo $ledTabText; ?>
</a>
</li>
<li class="nav-item">
<li class="ui-tabs-tab nav-item">
<a class="nav-link" id="tab-other-tab" tabType='other' data-bs-toggle="pill" href='#tab-other' role="tab" aria-controls="tab-other">
Other
</a>
</li>
</ul>


<!-- --------------------------------------------------------------------- -->
<?
if ($e131TabStyle == "") {
Expand All @@ -306,7 +310,7 @@ function handleCOKeypress(e)
}
?>

<div class="tab-content" id="channelOutputTabsContent">
<div id="channelOutputTabsContent" class="tab-content">
<div class="tab-pane fade <?=$e131TabStyleActive?>" id="tab-e131" role="tabpanel" aria-labelledby="tab-e131-tab">
<?include_once 'co-universes.php';?>
</div>
Expand Down Expand Up @@ -342,7 +346,8 @@ function handleCOKeypress(e)
<?include_once "co-other.php";?>
</div>

</div>
</div> <!-- tabcontent close -->

<!-- --------------------------------------------------------------------- -->


Expand All @@ -355,11 +360,6 @@ function handleCOKeypress(e)
<div id='debugOutput'>
</div>

<!-- FIXME, can we put this in co-ledPanels.php? -->
<div id="dialog-panelLayout" title="panelLayout" style="display: none">
<div id="layoutText">
</div>
</div>
</div>

<?php include 'common/footer.inc';?>
Expand Down
17 changes: 12 additions & 5 deletions www/co-ledPanels.php
View file
Expand Up @@ -1307,22 +1307,26 @@ function TogglePanelTestPattern() {
<div class="row">
<div class="col-md-auto">
<div class="backdrop-dark form-inline enableCheckboxWrapper">
<div><b>Enable <span class='capeNamePanels'>Led Panels</span>:&nbsp;</b></div><div><input id='LEDPanelsEnabled' type='checkbox'></div>
<div><b>Enable <span class='capeNamePanels'>Led Panels</span>:&nbsp;</b></div>
<div><input id='LEDPanelsEnabled' type='checkbox'></div>
</div>
</div>
<div class="col-md-auto form-inline">
<div id='LEDPanelsConnectionLabel'><b>Connection:&nbsp;</b></div><div>
<div id='LEDPanelsConnectionLabel'><b>Connection:&nbsp;</b></div>
<div>
<select id='LEDPanelsConnection' onChange='LEDPanelsConnectionChanged();'>
<?
if (in_array('all', $currentCapeInfo["provides"])
|| in_array('panels', $currentCapeInfo["provides"])) {
if ($settings['Platform'] == "Raspberry Pi") {
?>
<option value='RGBMatrix'>Hat/Cap/Cape</option>
<?} else if ($settings['Platform'] == "BeagleBone Black") {?>
<?
} else if ($settings['Platform'] == "BeagleBone Black") {?>
<option value='LEDscapeMatrix'>Hat/Cap/Cape</option>
<?}?>
<?}?>
<?
}?>
<option value='ColorLight5a75'>ColorLight</option>
<?
if ((file_exists('/usr/include/X11/Xlib.h')) && ($settings['Platform'] == "Linux")) {
Expand Down Expand Up @@ -1357,7 +1361,8 @@ function TogglePanelTestPattern() {
<option value='v1'>Standard v1.x</option>
<option value='v2'>v2.x</option>
<?}?>
<?}?>
<?
}?>
</select>
</div>
</div>
Expand Down Expand Up @@ -1602,3 +1607,5 @@ function LEDPanelsSizeChanged() {
</div>
</div>
</div>


2 changes: 1 addition & 1 deletion www/co-other.php
View file
Expand Up @@ -1044,7 +1044,7 @@ function DeleteOtherOutput() {

<div class='fppTableWrapper'>
<div class='fppTableContents' role="region" aria-labelledby="tblOtherOutputs" tabindex="0">
<table id="tblOtherOutputs" class="fppSelectableRowTable">
<table id="tblOtherOutputs" class="fppSelectableRowTable fppStickyTheadTable">
<thead>
<tr class='tblheader'>
<th>#</th>
Expand Down
3 changes: 2 additions & 1 deletion www/co-pixelStrings.php
View file
Expand Up @@ -1468,7 +1468,7 @@ function populatePixelStringOutputs(data) {
var str = "";
str += "<div class='fppTableWrapper'>" +
"<div class='fppTableContents' role='region' aria-labelledby='PixelString' tabindex='0'>";
str += "<table id='PixelString' class='fppSelectableRowTable' type='" + output.subType + "' ports='" + outputCount + "'>";
str += "<table id='PixelString' class='fppSelectableRowTable fppStickyTheadTable' type='" + output.subType + "' ports='" + outputCount + "'>";
str += pixelOutputTableHeader();
str += "<tbody>";

Expand Down Expand Up @@ -2697,3 +2697,4 @@ function pinTableHeader() {
<span class='capeNotes capeTypeRow' id='capeNotes' style='display: none;'></span>



2 changes: 1 addition & 1 deletion www/co-universes.php
View file
Expand Up @@ -177,7 +177,7 @@ function PopulateInterfaces()

<div class='fppTableWrapper'>
<div class='fppTableContents' class='universeTable fullWidth' role="region" aria-labelledby="tblUniverses" tabindex="0">
<table id="tblUniverses" class="fppSelectableRowTable">
<table id="tblUniverses" class="fppSelectableRowTable fppStickyTheadTable">
<thead id='tblUniversesHead'>
<tr>
<th class="tblScheduleHeadGrip"></th>
Expand Down
2 changes: 1 addition & 1 deletion www/commandPresets.php
View file
Expand Up @@ -212,7 +212,7 @@ function SaveCommands()
</tr>
</table>

<table class="fppSelectableRowTable">
<table class="fppSelectableRowTable fppStickyTheadTable">
<thead>
<tr>
<th class="tblCommandsHeadGrip"></th>
Expand Down
2 changes: 1 addition & 1 deletion www/common/footer.inc
View file
Expand Up @@ -28,7 +28,7 @@
<button class="buttons btn-outline-light dropdown-toggle" type="button" id="fppModeDropdownButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
FPP Mode: <span id="fppModeDropdownButtonModeText"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton" >
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="fppModeDropdownButton" >
<button class="dropdown-item" onClick="SetFPPDmode('player');" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="This FPP will control itself and not be controlled by another FPP">Player</button>
<button class="dropdown-item" onClick="SetFPPDmode('remote');" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="This FPP will be controlled by a Player FPP Instance">Remote</button>
</div>
Expand Down
1 change: 1 addition & 0 deletions www/common/menuHead.inc
View file
Expand Up @@ -13,6 +13,7 @@ if (((!isset($settings['initialSetup-02'])) || ($settings['initialSetup-02'] ==
<script type="text/javascript" src="js/jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="js/jquery.jgrowl.min.js"></script>
<script type="text/javascript" src="js/zebra_pin.min.js"></script>
<script type="text/javascript" src="jquery/jquery.floatThead/jquery.floatThead.min.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.min.js?ref=<?= filemtime('js/bootstrap.bundle.min.js'); ?>"></script>

<link rel="stylesheet" href="css/jquery-ui.css" />
Expand Down

0 comments on commit 2fc1862

Please sign in to comment.