Skip to content

Commit

Permalink
fix shifting of headers using Polyfill Stickyfill
Browse files Browse the repository at this point in the history 
Signed-off-by: Rajat Jain <rajatjain.ix@gmail.com>
  • Loading branch information
@rajat315315
rajat315315 committed Jul 27, 2020
1 parent 63926d6 commit 50f31ab
Show file tree
Hide file tree
Showing 7 changed files with 43 additions and 112 deletions.
115 changes: 11 additions & 104 deletions js/sql.js
View file
Expand Up @@ -411,25 +411,6 @@ AJAX.registerOnload('sql.js', function () {
});
});

/*
* Attach a custom event for sticky column headings which will be
* triggered manually everytime the table of results is reloaded
* @memberOf jQuery
*/
$(document).on('stickycolumns', '.sqlqueryresults', function () {
$('.sticky_columns').remove();
$('.table_results').each(function () {
var $tableResults = $(this);
// add sticky columns div
var $stickColumns = Sql.initStickyColumns($tableResults);
Sql.rearrangeStickyColumns($stickColumns, $tableResults);
// adjust sticky columns on scroll
$(document).on('scroll', window, function () {
Sql.handleStickyColumns($stickColumns, $tableResults);
});
});
});

/**
* Append the "Show/Hide query box" message to the query input form
*
Expand Down Expand Up @@ -657,7 +638,7 @@ AJAX.registerOnload('sql.js', function () {
});
}

$('.sqlqueryresults').trigger('makegrid').trigger('stickycolumns');
$('.sqlqueryresults').trigger('makegrid');
$('#togglequerybox').show();
Functions.initSlider();

Expand Down Expand Up @@ -696,8 +677,7 @@ AJAX.registerOnload('sql.js', function () {
var $sqlqueryresults = $form.parents('.sqlqueryresults');
$sqlqueryresults
.html(data.message)
.trigger('makegrid')
.trigger('stickycolumns');
.trigger('makegrid');
Functions.initSlider();
Functions.highlightSql($sqlqueryresults);
}); // end $.post()
Expand Down Expand Up @@ -980,7 +960,7 @@ AJAX.registerOnload('sql.js', function () {
/**
* create resizable table
*/
$('.sqlqueryresults').trigger('makegrid').trigger('stickycolumns');
$('.sqlqueryresults').trigger('makegrid');

/**
* Check if there is any saved query
Expand Down Expand Up @@ -1054,88 +1034,15 @@ Sql.initProfilingTables = function () {
});
};

/**
* Set position, left, top, width of sticky_columns div
*/
Sql.setStickyColumnsPosition = function ($stickyColumns, $tableResults, position, top, left, marginLeft) {
$stickyColumns
.css('position', position)
.css('top', top)
.css('left', left ? left : 'auto')
.css('margin-left', marginLeft ? marginLeft : '0px')
.css('width', $tableResults.width());
};

/**
* Initialize sticky columns
*/
Sql.initStickyColumns = function ($tableResults) {
return $('<table class="sticky_columns"></table>')
.insertBefore($tableResults)
.css('position', 'fixed')
.css('z-index', '98')
.css('width', $tableResults.width())
.css('margin-left', $('#page_content').css('margin-left'))
.css('top', $('#floating_menubar').height())
.css('display', 'none');
};

/**
* Arrange/Rearrange columns in sticky header
*/
Sql.rearrangeStickyColumns = function ($stickyColumns, $tableResults) {
var $originalHeader = $tableResults.find('thead');
var $originalColumns = $originalHeader.find('tr:first').children();
var $clonedHeader = $originalHeader.clone();
var isFirefox = navigator.userAgent.indexOf('Firefox') > -1;
var isSafari = navigator.userAgent.indexOf('Safari') > -1;
// clone width per cell
$clonedHeader.find('tr:first').children().each(function (i) {
var width = $originalColumns.eq(i).width();
if (! isFirefox && ! isSafari) {
width += 1;
}
$(this).width(width);
if (isSafari) {
$(this).css('min-width', width).css('max-width', width);
}
});
$stickyColumns.empty().append($clonedHeader);
};

/**
* Adjust sticky columns on horizontal/vertical scroll for all tables
*/
Sql.handleAllStickyColumns = function () {
$('.sticky_columns').each(function () {
Sql.handleStickyColumns($(this), $(this).next('.table_results'));
});
};

/**
* Adjust sticky columns on horizontal/vertical scroll
*/
Sql.handleStickyColumns = function ($stickyColumns, $tableResults) {
var currentScrollX = $(window).scrollLeft();
var windowOffset = $(window).scrollTop();
var tableStartOffset = $tableResults.offset().top;
var tableEndOffset = tableStartOffset + $tableResults.height();
if (windowOffset >= tableStartOffset && windowOffset <= tableEndOffset) {
// for horizontal scrolling
if (prevScrollX !== currentScrollX) {
prevScrollX = currentScrollX;
Sql.setStickyColumnsPosition($stickyColumns, $tableResults, 'absolute', $('#floating_menubar').height() + windowOffset - tableStartOffset);
// for vertical scrolling
} else {
Sql.setStickyColumnsPosition($stickyColumns, $tableResults, 'fixed', $('#floating_menubar').height(), $('#pma_navigation').width() - currentScrollX, $('#page_content').css('margin-left'));
}
$stickyColumns.show();
} else {
$stickyColumns.hide();
}
};

AJAX.registerOnload('sql.js', function () {
Sql.makeProfilingChart();
Sql.initProfilingTables();
});


/**
* Polyfill to make table headers sticky.
*/

var elements = $('.sticky');
Stickyfill.add(elements);
6 changes: 6 additions & 0 deletions js/vendor/stickyfill.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 4 additions & 2 deletions libraries/classes/Display/Results.php
View file
Expand Up @@ -1420,7 +1420,7 @@ private function _getFieldVisibilityParams(

$display_params['emptypre'] = $emptyPreCondition ? 4 : 0;

$button_html .= '<th class="column_action print_ignore" ' . $colspan
$button_html .= '<th class="column_action sticky print_ignore" ' . $colspan
. '>' . $full_or_partial_text_link . '</th>';
} elseif ($leftOrBoth
&& (($displayParts['edit_lnk'] != self::NO_EDIT_OR_DELETE)
Expand All @@ -1434,7 +1434,7 @@ private function _getFieldVisibilityParams(
} elseif ($GLOBALS['cfg']['RowActionLinks'] == self::POSITION_NONE) {
// ... elseif display an empty column if the actions links are
// disabled to match the rest of the table
$button_html .= '<th class="column_action"></th>';
$button_html .= '<th class="column_action sticky"></th>';
}

$this->__set('display_params', $display_params);
Expand Down Expand Up @@ -2127,6 +2127,7 @@ private function _getDraggableClassForSortableColumns(
}

$th_class[] = 'column_heading';
$th_class[] = 'sticky';
if ($GLOBALS['cfg']['BrowsePointerEnable'] == true) {
$th_class[] = 'pointer';
}
Expand Down Expand Up @@ -2170,6 +2171,7 @@ private function _getDraggableClassForNonSortableColumns(
$draggable_html = '<th';
$th_class = [];
$th_class[] = 'draggable';
$th_class[] = 'sticky';
$this->_getClassForNumericColumnType($fields_meta, $th_class);
if ($col_visib && ! $col_visib_j) {
$th_class[] = 'hide';
Expand Down
1 change: 1 addition & 0 deletions sql.php
View file
Expand Up @@ -44,6 +44,7 @@
$scripts->addFile('vendor/jquery/jquery.uitablefilter.js');
$scripts->addFile('table/change.js');
$scripts->addFile('indexes.js');
$scripts->addFile('vendor/stickyfill.min.js');
$scripts->addFile('gis_data_editor.js');
$scripts->addFile('multi_column_sort.js');

Expand Down
9 changes: 7 additions & 2 deletions themes/metro/scss/_common.scss
View file
Expand Up @@ -3118,14 +3118,19 @@ form.append_fields_form .tblFooters {
border-#{$right}: 2px solid #a44;
}

.pma_table,
.sticky_columns {
.pma_table {
th.draggable span {
display: block;
overflow: hidden;
}
}

.sticky {
position: -webkit-sticky;
position: sticky;
top: 60px;
}

.pma_table {
td {
position: static;
Expand Down
9 changes: 7 additions & 2 deletions themes/original/scss/_common.scss
View file
Expand Up @@ -2484,14 +2484,19 @@ input#auto_increment_opt {
border-#{$right}: 2px solid #a44;
}

.pma_table,
.sticky_columns {
.pma_table {
th.draggable span {
display: block;
overflow: hidden;
}
}

.sticky {
position: -webkit-sticky;
position: sticky;
top: 60px;
}

.pma_table {
td {
position: static;
Expand Down
9 changes: 7 additions & 2 deletions themes/pmahomme/scss/_common.scss
View file
Expand Up @@ -2972,14 +2972,19 @@ input#auto_increment_opt {
border-#{$right}: 2px solid #a44;
}

.pma_table,
.sticky_columns {
.pma_table {
th.draggable span {
display: block;
overflow: hidden;
}
}

.sticky {
position: -webkit-sticky;
position: sticky;
top: 60px;
}

.pma_table {
td {
position: static;
Expand Down

0 comments on commit 50f31ab

Please sign in to comment.