فهرست منبع

HUE-8106 [editor] Convert fixed headers and column to a more performant CSS solution

Unfortunately position:sticky is buggy for table elements in both Chrome and FF, but this commit reduces a lot the redrawing needed
Enrico Berti 7 سال پیش
والد
کامیت
b99f14e

+ 31 - 15
desktop/core/src/desktop/static/desktop/js/jquery.tableextender2.js

@@ -125,15 +125,7 @@
       hideSubscription.remove();
     });
 
-    var lastHeight = -1, currentHeight;
     var adjustSizes = function () {
-      currentHeight = self.$parent.height();
-      if (currentHeight != lastHeight) {
-        self.firstColumnInner.height(self.$parent.get(0).scrollHeight);
-        self.firstColumn.height(currentHeight);
-        lastHeight = currentHeight;
-      }
-
       if (self.lastHeaderWidth !== self.$parent.width()) {
         self.lastHeaderWidth = self.$parent.width();
         self.headerRowContainer.width(self.lastHeaderWidth);
@@ -238,14 +230,17 @@
     var pos = self.options.stickToTopPosition;
     var topPos = 0;
     var firstColTopPos = 0;
-    if (typeof pos === 'function'){
+    if (typeof pos === 'function') {
       pos = pos();
     }
+    var isFixed = false;
     if (pos > -1) {
       if (self.$element.offset().top < pos) {
         topPos = pos;
+        isFixed = true;
       } else {
         topPos = self.$element.offset().top;
+        isFixed = false;
       }
       firstColTopPos = self.$element.offset().top;
     } else if (self.options.clonedContainerPosition == 'absolute') {
@@ -255,10 +250,31 @@
       topPos = self.$parent.offset().top;
       firstColTopPos = topPos;
     }
-    self.firstColumn.scrollTop(self.$mainScrollable.scrollTop());
-    self.firstColumn.css("top", firstColTopPos + "px");
-    self.headerRowContainer.css("top", topPos + "px");
-    self.firstColumnTopCell.css("top", topPos + "px");
+
+    if (pos > -1) {
+      var fixCSS = {
+        "top": "",
+        "left": self.$parent.position().left + "px",
+        "position": "absolute"
+      };
+      self.firstColumn.css(fixCSS);
+      if (isFixed) {
+        fixCSS = {
+          "top": topPos + "px",
+          "left": "",
+          "position": "fixed"
+        };
+      }
+      self.firstColumnTopCell.css(fixCSS);
+      self.headerRowContainer.css(fixCSS);
+    }
+    else {
+      self.firstColumn.scrollTop(self.$mainScrollable.scrollTop());
+      self.firstColumn.css("top", firstColTopPos + "px");
+      self.headerRowContainer.css("top", topPos + "px");
+      self.firstColumnTopCell.css("top", topPos + "px");
+    }
+
   };
 
   Plugin.prototype.drawHeader = function () {
@@ -424,9 +440,9 @@
     firstColumn.css("position", self.options.clonedContainerPosition || "fixed");
 
     firstColumnInner.appendTo(firstColumn);
-    firstColumn.appendTo(self.$parent);
+    firstColumn.insertAfter(self.$element.prev());
 
-    firstColumnTopCell.appendTo(self.$parent);
+    firstColumnTopCell.insertAfter(firstColumn);
 
     self.firstColumnInner = firstColumnInner;
     self.firstColumnTopCell = firstColumnTopCell;

+ 9 - 12
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -2254,11 +2254,11 @@ function togglePresentation(value) {};
               snippetEl.find('.snippet-grid-settings').css({
                 "height": vm.isPresentationMode() || !vm.editorMode() ? '330px' : Math.max(100, Math.ceil($(window).height() - Math.max($('#queryResults').offset().top, topCoord)))+ 'px'
               });
-              snippetEl.find('.result-settings').animate({
+              snippetEl.find('.result-settings').css({
                 'marginTop': margin
               });
             }
-            snippetEl.find('.snippet-actions').animate({
+            snippetEl.find('.snippet-actions').css({
               'marginTop': margin + 25
             });
           }, 100);
@@ -2322,14 +2322,11 @@ function togglePresentation(value) {};
     var _colSel = $resultTable.find("tr th:nth-child(" + (_col.index() + 1) + ")");
     if (_colSel.length > 0) {
       $resultTable.find("tr td:nth-child(" + (_col.index() + 1) + ")").addClass("columnSelected");
-      $resultTable.parent().animate({
-        scrollLeft: _colSel.position().left + $resultTable.parent().scrollLeft() - $resultTable.parent().offset().left - 30
-      }, 300, function(){
-        $resultTable.data('scrollToCol', _col.index());
-        $resultTable.data('scrollToRow', null);
-        $resultTable.data('scrollAnimate', true);
-        $resultTable.parent().trigger('scroll');
-      });
+      $resultTable.parent().scrollLeft(_colSel.position().left + $resultTable.parent().scrollLeft() - $resultTable.parent().offset().left - 30);
+      $resultTable.data('scrollToCol', _col.index());
+      $resultTable.data('scrollToRow', null);
+      $resultTable.data('scrollAnimate', true);
+      $resultTable.parent().trigger('scroll');
     }
   }
 
@@ -3695,10 +3692,10 @@ function togglePresentation(value) {};
           "line-height": (_dtElement.height() - 30) + "px"
         });
         if (initial) {
-          $('#snippet_' + snippet.id()).find('.result-settings').animate({
+          $('#snippet_' + snippet.id()).find('.result-settings').css({
             'marginTop': 0
           });
-          $('#snippet_' + snippet.id()).find('.snippet-actions').animate({
+          $('#snippet_' + snippet.id()).find('.snippet-actions').css({
             'marginTop': 0
           });
           huePubSub.publish('resize.leaflet.map');