Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
<?php
/**
* Make columns and header sticky
* ==============================
* Helps you when working with very large tables. Allows you to keept important columns always in sight.
*
*
* 2 ways to control this:
* 1. You can define simple column names that will eighter stick to the left or to the right of the window. This approach will work if you have a lot of tables with the same structure.
*
* $plugins = array(
* new stickyColumns("ID","status") //in this example, column ID will stick to the left and column status will stick to the right.
* );
*
* 2. you can define sticky columns for each fully qualified table seperately:
*
* $stickyColumnsLeft=array( "information_schema.TABLES"=>"TABLE_NAME", //meaning: in database `information_schema` in table `TABLES` make column `TABLE_NAME` sticky to the left
* "mysql.user"=>"User");
* $stickyColumnsRight=array( "information_schema.TABLES"=>"CREATE_TIME",
* "mysql.proc"=>"created");
*
* $plugins = array(
* new stickyColumns($stickyColumnsLeft,$stickyColumnsRight)
* );
*
* If you want to stick your header on top of the window, you can define that in the third parameter (bool).
*
* Written in vanilla JavaScript, no jquery needed.
*
* Tested with Adminer 4.7.5 in FireFox 70 and Chrome 79.
*
* @author Stephan Herrmann, https://github.com/derStephan/AdminerPlugins
* @license MIT
*
*/
class stickyColumns
{
private $stickyColumnLeft;
private $stickyColumnRight;
private $stickyHeader;
/**
*
* @param mixed $stickyColumnLeft if not empty, make this column sticky to the left border of the window. Give an array here to set this for multiple tables.
* @param mixed $stickyColumnRight if not empty, make this column sticky to the right. Give an array here to set this for multiple tables.
* @param bool $stickyHeader if true, make header sticky as well
*/
public function __construct ($stickyColumnLeft="",$stickyColumnRight="",$stickyHeader=true)
{
$fullyQualifiedTableName=$_GET["db"].".".$_GET["select"];
if(is_array($stickyColumnLeft))
$this->stickyColumnLeft=@$stickyColumnLeft[$fullyQualifiedTableName];
else
$this->stickyColumnLeft=$stickyColumnLeft;
if(is_array($stickyColumnRight))
$this->stickyColumnRight=@$stickyColumnRight[$fullyQualifiedTableName];
else
$this->stickyColumnRight=$stickyColumnRight;
$this->stickyHeader=$stickyHeader;
}
public function head()
{
//all of this is only applicable in the simple table view
if(!isset($_GET["select"]))
return;
echo "<style>";
echo "#table {border-collapse: inherit;}";
echo ".footer {z-index:4;}";
echo ".js .checkable .checked td,.js .checkable .checked th {white-space: pre-wrap !important;overflow: unset;}";
//make left column sticky. Works only for data rows, not for headers
if($this->stickyColumnLeft!="")
echo "#table tbody td[id$='[{$this->stickyColumnLeft}]']{position:sticky;left:0px;z-index:2;border-right: 1px solid;} ";
//make right column sticky. Works only for data rows, not for headers
if($this->stickyColumnRight!="")
echo "#table tbody td[id$='[{$this->stickyColumnRight}]']{position:sticky;right:0px;z-index:2;border-left: 1px solid;} ";
//make header sticky.
if($this->stickyHeader)
echo "#table thead * {overflow: visible; position:sticky;top: 0;z-index:3;}";
echo "</style>";
?>
<script <?php echo nonce()?> type='text/javascript'>
//make column headers of table sticky on the left and right.
//Due to lack of any ID in thead, this has to be done in JS
function makeColumnHeadersSticky()
{
if(!document.getElementById('table'))
return;
//walk through all cells in table header
for (let header of document.getElementById('table').tHead.childNodes[0].cells )
{
//check if column name matches the configured column
if(header.childNodes[1].childNodes[0].innerHTML=='<?php echo $this->stickyColumnLeft ?>')
{
//set the styles
header.style.position="sticky";
header.style.left="0px";
header.style.zIndex="4";
}
if(header.childNodes[1].childNodes[0].innerHTML=='<?php echo $this->stickyColumnRight?>')
{
header.style.position="sticky";
header.style.right="0px";
header.style.zIndex="4";
}
};
//if a cell does not have any background, it will be shown as transparent
//to prevent this, set the background-color of the body for all transparent cells.
//this should work for all themes that do not have a background-image.
var bodyBackground=getComputedStyle(document.body).backgroundColor;
for (let cell of document.querySelectorAll("#table tbody td" ) )
{
if(getComputedStyle(cell).backgroundColor=="rgba(0, 0, 0, 0)")
cell.style.backgroundColor=bodyBackground;
}
}
document.addEventListener('DOMContentLoaded', makeColumnHeadersSticky);
</script>
<?php
}
}