From 50f31ab8e201ef70a1de4c12772afb293930a079 Mon Sep 17 00:00:00 2001 From: Rajat Jain Date: Mon, 27 Jul 2020 13:58:49 +0530 Subject: [PATCH] fix shifting of headers using Polyfill Stickyfill Signed-off-by: Rajat Jain --- js/sql.js | 115 +++----------------------- js/vendor/stickyfill.min.js | 6 ++ libraries/classes/Display/Results.php | 6 +- sql.php | 1 + themes/metro/scss/_common.scss | 9 +- themes/original/scss/_common.scss | 9 +- themes/pmahomme/scss/_common.scss | 9 +- 7 files changed, 43 insertions(+), 112 deletions(-) create mode 100644 js/vendor/stickyfill.min.js diff --git a/js/sql.js b/js/sql.js index 7c2b573988..d50bfe53c4 100644 --- a/js/sql.js +++ b/js/sql.js @@ -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 * @@ -657,7 +638,7 @@ AJAX.registerOnload('sql.js', function () { }); } - $('.sqlqueryresults').trigger('makegrid').trigger('stickycolumns'); + $('.sqlqueryresults').trigger('makegrid'); $('#togglequerybox').show(); Functions.initSlider(); @@ -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() @@ -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 @@ -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 $('
') - .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); diff --git a/js/vendor/stickyfill.min.js b/js/vendor/stickyfill.min.js new file mode 100644 index 0000000000..6da138d188 --- /dev/null +++ b/js/vendor/stickyfill.min.js @@ -0,0 +1,6 @@ +/*! + * Stickyfill – `position: sticky` polyfill + * v. 2.1.0 | https://github.com/wilddeer/stickyfill + * MIT License + */ +!function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function d(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c])}function e(a){return parseFloat(a)||0}function f(a){for(var b=0;a;)b+=a.offsetTop,a=a.offsetParent;return b}function g(){function c(){a.pageXOffset!=m.left?(m.top=a.pageYOffset,m.left=a.pageXOffset,p.refreshAll()):a.pageYOffset!=m.top&&(m.top=a.pageYOffset,m.left=a.pageXOffset,n.forEach(function(a){return a._recalcPosition()}))}function d(){f=setInterval(function(){n.forEach(function(a){return a._fastCheck()})},500)}function e(){clearInterval(f)}if(!k){k=!0,c(),a.addEventListener("scroll",c),a.addEventListener("resize",p.refreshAll),a.addEventListener("orientationchange",p.refreshAll);var f=void 0,g=void 0,h=void 0;"hidden"in b?(g="hidden",h="visibilitychange"):"webkitHidden"in b&&(g="webkitHidden",h="webkitvisibilitychange"),h?(b[g]||d(),b.addEventListener(h,function(){b[g]?e():d()})):d()}}var h=function(){function a(a,b){for(var c=0;c=this._limits.end?"end":"middle";if(this._stickyMode!=a){switch(a){case"start":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:this._offsetToParent.top+"px",bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"middle":d(this._node.style,{position:"fixed",left:this._offsetToWindow.left+"px",right:this._offsetToWindow.right+"px",top:this._styles.top,bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"end":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:"auto",bottom:0,width:"auto",marginLeft:0,marginRight:0})}this._stickyMode=a}}}},{key:"_fastCheck",value:function(){this._active&&!this._removed&&(Math.abs(f(this._clone.node)-this._clone.docOffsetTop)>1||Math.abs(this._parent.node.offsetHeight-this._parent.offsetHeight)>1)&&this.refresh()}},{key:"_deactivate",value:function(){var a=this;this._active&&!this._removed&&(this._clone.node.parentNode.removeChild(this._clone.node),delete this._clone,d(this._node.style,this._styles),delete this._styles,n.some(function(b){return b!==a&&b._parent&&b._parent.node===a._parent.node})||d(this._parent.node.style,this._parent.styles),delete this._parent,this._stickyMode=null,this._active=!1,delete this._offsetToWindow,delete this._offsetToParent,delete this._limits)}},{key:"remove",value:function(){var a=this;this._deactivate(),n.some(function(b,c){if(b._node===a._node)return n.splice(c,1),!0}),this._removed=!0}}]),g}(),p={stickies:n,Sticky:o,forceSticky:function(){i=!1,g(),this.refreshAll()},addOne:function(a){if(!(a instanceof HTMLElement)){if(!a.length||!a[0])return;a=a[0]}for(var b=0;b' . $full_or_partial_text_link . ''; } elseif ($leftOrBoth && (($displayParts['edit_lnk'] != self::NO_EDIT_OR_DELETE) @@ -1434,7 +1434,7 @@ class Results } 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 .= ''; + $button_html .= ''; } $this->__set('display_params', $display_params); @@ -2127,6 +2127,7 @@ class Results } $th_class[] = 'column_heading'; + $th_class[] = 'sticky'; if ($GLOBALS['cfg']['BrowsePointerEnable'] == true) { $th_class[] = 'pointer'; } @@ -2170,6 +2171,7 @@ class Results $draggable_html = '_getClassForNumericColumnType($fields_meta, $th_class); if ($col_visib && ! $col_visib_j) { $th_class[] = 'hide'; diff --git a/sql.php b/sql.php index 46c386567c..3da6a51e7b 100644 --- a/sql.php +++ b/sql.php @@ -44,6 +44,7 @@ $scripts = $header->getScripts(); $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'); diff --git a/themes/metro/scss/_common.scss b/themes/metro/scss/_common.scss index 64b1c0dd62..de4adfb1a0 100644 --- a/themes/metro/scss/_common.scss +++ b/themes/metro/scss/_common.scss @@ -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; diff --git a/themes/original/scss/_common.scss b/themes/original/scss/_common.scss index 401525d9af..fbbc3809ca 100644 --- a/themes/original/scss/_common.scss +++ b/themes/original/scss/_common.scss @@ -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; diff --git a/themes/pmahomme/scss/_common.scss b/themes/pmahomme/scss/_common.scss index 8bf241b0bb..0aa3aefa7e 100644 --- a/themes/pmahomme/scss/_common.scss +++ b/themes/pmahomme/scss/_common.scss @@ -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;