Răsfoiți Sursa

HUE-4910 [editor] Fix header issues when selecting columns

This also takes care of some other smaller issues and improves scroll performance.
Johan Ahlen 9 ani în urmă
părinte
comite
2a2ffa0

+ 2 - 6
desktop/core/src/desktop/static/desktop/js/jquery.huedatatable.js

@@ -39,9 +39,7 @@
       if (self.$table.data('plugin_jHueTableExtender')) {
         self.$table.data('plugin_jHueTableExtender').drawLockedRows(true);
       } else if (self.$table.data('plugin_jHueTableExtender2')) {
-        self.$table.data('plugin_jHueTableExtender2').drawHeader();
-        self.$table.data('plugin_jHueTableExtender2').drawLockedRows(true);
-        self.$table.data('plugin_jHueTableExtender2').repositionHeader();
+        self.$table.data('plugin_jHueTableExtender2').redraw();
       }
     };
 
@@ -61,9 +59,7 @@
       if (self.$table.data('plugin_jHueTableExtender')) {
         self.$table.data('plugin_jHueTableExtender').drawLockedRows(true);
       } else if (self.$table.data('plugin_jHueTableExtender2')) {
-        self.$table.data('plugin_jHueTableExtender2').drawHeader();
-        self.$table.data('plugin_jHueTableExtender2').drawLockedRows(true);
-        self.$table.data('plugin_jHueTableExtender2').repositionHeader();
+        self.$table.data('plugin_jHueTableExtender2').redraw();
       }
     };
 

+ 143 - 66
desktop/core/src/desktop/static/desktop/js/jquery.tableextender2.js

@@ -47,14 +47,74 @@
     self.$element = $(element);
     self.$parent = self.$element.parent();
     self.$mainScrollable = $(self.options.mainScrollable);
+    self.lastHeaderWidth = 0;
 
     self.drawHeader(); // Sets self.headerRowContainer
     self.drawFirstColumn(); // Sets self.firstColumnInner, self.firstColumnTopCell and self.firstColumn
     self.drawLockedRows();
 
-    var lastHeight = -1;
-    var currentHeight;
+    var isFireFox = navigator.userAgent.toLowerCase().indexOf("firefox") > 0;
 
+    var firstCellWidth, leftPosition, th, thi;
+    var throttledHeaderPadding = function () {
+      firstCellWidth = self.options.fixedFirstColumn ? self.firstColumnTopCell.outerWidth() : 0;
+      for (thi = 0; thi < self.thMapping.length; thi++) {
+        th = self.thMapping[thi];
+        if (!th.visible) {
+          continue;
+        }
+        leftPosition = th.clone.position().left - firstCellWidth;
+        if (leftPosition + th.clone.outerWidth() > 0 && leftPosition < 0) {
+          if (th.cloneSpan.width() - leftPosition < th.clone.outerWidth() - 20) { // 20 is the sorting css width
+            th.cloneSpan.css('paddingLeft', -leftPosition);
+          }
+        } else {
+          th.cloneSpan.css('paddingLeft', 0);
+        }
+      }
+    };
+
+    var scrollTimeout = -1;
+    var headerScroll = function () {
+      self.headerRowContainer.scrollLeft(self.$parent.scrollLeft());
+      window.clearTimeout(scrollTimeout);
+      scrollTimeout = window.setTimeout(throttledHeaderPadding, 200);
+    };
+    self.$parent.on('scroll', headerScroll);
+    self.disposeFunctions.push(function () {
+      self.$parent.off('scroll', headerScroll);
+    });
+
+    self.$element.bind('headerpadding', function () {
+      window.clearTimeout(scrollTimeout);
+      scrollTimeout = window.setTimeout(throttledHeaderPadding, 200);
+    });
+    self.disposeFunctions.push(function () {
+      self.$element.unbind('headerpadding');
+    });
+
+    var redrawSubscription = huePubSub.subscribe('table.extender.redraw', function (parentId) {
+      if (parentId == self.options.parentId) {
+        self.redraw();
+      }
+    });
+    self.disposeFunctions.push(function () {
+      redrawSubscription.remove();
+    });
+
+    var hideSubscription = huePubSub.subscribe('table.extender.hide', function (parentId) {
+      if (parentId == self.options.parentId) {
+        self.headerRowContainer.hide();
+        self.firstColumnInner.hide();
+        self.firstColumnTopCell.hide();
+        self.firstColumn.hide();
+      }
+    });
+    self.disposeFunctions.push(function () {
+      hideSubscription.remove();
+    });
+
+    var lastHeight = -1, currentHeight;
     var adjustSizes = function () {
       currentHeight = self.$parent.height();
       if (currentHeight != lastHeight) {
@@ -63,12 +123,25 @@
         lastHeight = currentHeight;
       }
 
-      self.headerRowContainer.width(self.$parent.width());
-      self.thMapping.forEach(function (mapping) {
-        if (mapping.clone.width() !== mapping.original.width()) {
-          mapping.clone.width(mapping.original.width())
+      if (self.lastHeaderWidth !== self.$parent.width()) {
+        self.lastHeaderWidth = self.$parent.width();
+        self.headerRowContainer.width(self.lastHeaderWidth);
+      }
+      for (thi = 0; thi < self.thMapping.length; thi++) {
+        th = self.thMapping[thi];
+        if (!th.visible) {
+          continue;
         }
-      });
+        if (th.clone.lastWidth !== th.original.width()) {
+          th.clone.lastWidth = th.original.width();
+          th.clone.width(th.clone.lastWidth)
+        }
+      }
+
+      if (self.headerRowContainer.scrollLeft() !== self.$parent.scrollLeft()) {
+        self.headerRowContainer.scrollLeft(self.$parent.scrollLeft());
+        throttledHeaderPadding();
+      }
     };
     adjustSizes();
     var sizeInterval = window.setInterval(adjustSizes, 300);
@@ -98,59 +171,38 @@
       self.$parent.off('dblclick', 'table tbody tr', dblClickHandler);
     });
 
-    self.repositionHeader();
 
-    var scrollFunction;
-    if (navigator.userAgent.toLowerCase().indexOf("firefox") > 0) {
-      var ffThrottle = -1;
-      var throttledPositionClones = function () {
-        window.clearTimeout(ffThrottle);
-        ffThrottle = window.setTimeout(self.repositionHeader.bind(self), 10);
-      };
-      scrollFunction = throttledPositionClones;
-    } else {
-      scrollFunction = self.repositionHeader.bind(self);
-    }
-    self.$mainScrollable.on('scroll', scrollFunction);
-    self.disposeFunctions.push(function () {
-      self.$mainScrollable.off('scroll', scrollFunction);
-    });
-
-    var firstCellWidth, leftPosition, $th;
-    var throttledHeaderPadding = function () {
-      firstCellWidth = self.options.fixedFirstColumn ? self.headerRowContainer.find("thead>tr th:eq(0)").outerWidth() : 0;
-      self.headerRowContainer.find("thead>tr th").each(function () {
-        $th = $(this);
-        leftPosition = $th.position().left - firstCellWidth;
-        if (leftPosition + $th.outerWidth() > 0 && leftPosition < 0) {
-          if ($th.find('span').width() - leftPosition < $th.outerWidth() - 20) { // 20 is the sorting css width
-            $th.find('span').css('paddingLeft', -leftPosition);
-          }
-        } else {
-          $th.find('span').css('paddingLeft', 0);
-        }
+    if (!self.options.disableTopPosition) {
+      self.repositionHeader();
+      var scrollFunction;
+      if (isFireFox) {
+        var ffThrottle = -1;
+        var throttledPositionClones = function () {
+          window.clearTimeout(ffThrottle);
+          ffThrottle = window.setTimeout(self.repositionHeader.bind(self), 10);
+        };
+        scrollFunction = throttledPositionClones;
+      } else {
+        scrollFunction = self.repositionHeader.bind(self);
+      }
+      self.$mainScrollable.on('scroll', scrollFunction);
+      self.disposeFunctions.push(function () {
+        self.$mainScrollable.off('scroll', scrollFunction);
       });
-    };
+    }
+  }
 
-    var scrollTimeout = -1;
-    var headerScroll = function () {
+  Plugin.prototype.redraw = function () {
+    var self = this;
+    self.drawHeader();
+    self.drawFirstColumn();
+    self.drawLockedRows(true);
+    self.repositionHeader();
+    window.setTimeout(function (){
       self.headerRowContainer.scrollLeft(self.$parent.scrollLeft());
-      window.clearTimeout(scrollTimeout);
-      scrollTimeout = window.setTimeout(throttledHeaderPadding, 200);
-    };
-    self.$parent.on('scroll', headerScroll);
-    self.disposeFunctions.push(function () {
-      self.$parent.off('scroll', headerScroll);
-    });
-
-    self.$element.bind('headerpadding', function () {
-      window.clearTimeout(scrollTimeout);
-      scrollTimeout = window.setTimeout(throttledHeaderPadding, 200);
-    });
-    self.disposeFunctions.push(function () {
-      self.$element.unbind('headerpadding');
-    });
-  }
+      self.$element.trigger('headerpadding');
+    }, 300);
+  };
 
   Plugin.prototype.destroy = function () {
     var self = this;
@@ -177,6 +229,9 @@
 
   Plugin.prototype.repositionHeader = function () {
     var self = this;
+    if (self.options.disableTopPosition) {
+      return;
+    }
     var pos = self.options.stickToTopPosition;
     var topPos = 0;
     if (typeof pos === 'function'){
@@ -202,7 +257,6 @@
 
   Plugin.prototype.drawHeader = function () {
     var self = this;
-
     if (!self.$element.attr("id") && self.options.parentId) {
       self.$element.attr("id", "eT" + self.options.parentId);
     }
@@ -228,19 +282,25 @@
     var totalThWidth = 0;
     self.$element.find("thead>tr th").each(function (i) {
       var originalTh = $(this);
+      var visible = originalTh.is(':visible');
       originalTh.removeAttr("data-bind");
-      var clonedTh = $(clonedThs[i]).css("background-color", "#FFFFFF").click(function () {
-        originalTh.click();
-        if (self.options.headerSorting) {
-          clonedThs.attr("class", "sorting");
-        }
-        $(this).attr("class", originalTh.attr("class"));
-      });
+      var clonedTh = $(clonedThs[i]).css("background-color", "#FFFFFF");
+      if (visible) {
+        clonedTh.click(function () {
+          originalTh.click();
+          if (self.options.headerSorting) {
+            clonedThs.attr("class", "sorting");
+          }
+          $(this).attr("class", originalTh.attr("class"));
+        });
+      }
       clonedTh.width(originalTh.width());
       totalThWidth += originalTh.width();
       self.thMapping.push({
         original: originalTh,
-        clone: clonedTh
+        clone: clonedTh,
+        cloneSpan: clonedTh.children().first(),
+        visible: visible
       })
     });
 
@@ -254,8 +314,13 @@
       topPosition = self.$parent.offset().top - self.$mainScrollable.scrollTop();
     }
     var headerRowContainer = $("<div>").attr("id", self.$element.attr("id") + "jHueTableExtenderClonedContainer")
-        .addClass("jHueTableExtenderClonedContainer").width(totalThWidth).css("overflow-x", "hidden").css("top", topPosition + "px");
+        .addClass("jHueTableExtenderClonedContainer").width(totalThWidth).css("overflow-x", "hidden")
+    if (!self.options.disableTopPosition) {
+      headerRowContainer.css("top", topPosition + "px");
+    }
     headerRowContainer.css("position", self.options.clonedContainerPosition || "fixed");
+    self.lastHeaderWidth = self.$parent.width();
+    headerRowContainer.width(self.lastHeaderWidth);
 
     headerRowDiv.appendTo(headerRowContainer);
     headerRowContainer.prependTo(self.$parent);
@@ -319,9 +384,21 @@
     var clonedTBody = clonedTable.find('tbody');
     var clones = self.$element.find("tbody>tr td:nth-child(1)").clone();
     var h = '';
+    var foundEmptyTh = false;
     clones.each(function(){
+      if ($(this).html() === '') {
+        foundEmptyTh = true;
+      }
       h+= '<tr><td>' + $(this).html() +'</td></tr>';
     });
+    if (foundEmptyTh) {
+      // In IE it's sometimes empty so we'll redraw in a bit
+      window.setTimeout(self.drawFirstColumn.bind(self), 200);
+      self.firstColumnInner = $();
+      self.firstColumnTopCell = $();
+      self.firstColumn = $();
+      return;
+    }
     clonedTBody.html(h);
     if (self.options.lockSelectedRow) {
       clonedTBody.find('td').each(function(){

+ 1 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -1512,6 +1512,7 @@
           ui.offset.top = 0;
           ui.position.top = 0;
           $.totalStorage('hue.editor.editor.size', $target.height());
+          huePubSub.publish('redraw.fixed.headers');
           $(document).trigger("editorSizeChanged");
         }
       });

+ 7 - 5
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1934,7 +1934,7 @@ ${ hueIcons.symbols() }
 </script>
 
 <script type="text/html" id="snippet-code-resizer">
-  <div class="snippet-code-resizer" data-bind="aceResizer : { ace: ace, target: '.ace-container-resizable', onStart: hideFixedHeaders }">
+  <div class="snippet-code-resizer" data-bind="aceResizer : { ace: ace, target: '.ace-container-resizable', onStart: hideFixedHeaders, onStop: redrawFixedHeaders }">
     <i class="fa fa-ellipsis-h"></i>
   </div>
 </script>
@@ -2942,6 +2942,8 @@ ${ hueIcons.symbols() }
               tableExtender.repositionHeader();
               tableExtender.drawLockedRows();
             }
+            $('.right-panel').data('lastScroll', $('.right-panel').scrollTop());
+            $('.right-panel').trigger('scroll');
           }
         });
         $(".jHueTableExtenderClonedContainer").show();
@@ -3630,14 +3632,14 @@ ${ hueIcons.symbols() }
       $(document).on("hideAutocomplete", function () {
         window.clearTimeout(hideTimeout);
         hideTimeout = window.setTimeout(function () {
-          $aceAutocomplete = $(".ace_editor.ace_autocomplete");
+          var $aceAutocomplete = $(".ace_editor.ace_autocomplete");
           if ($aceAutocomplete.is(":visible")) {
             $aceAutocomplete.hide();
           }
         }, 100);
       });
 
-      function forceChartDraws() {
+      function forceChartDraws(initial) {
         if (viewModel.selectedNotebook()) {
           viewModel.selectedNotebook().snippets().forEach(function (snippet) {
             if (snippet.result.data().length > 0) {
@@ -3646,7 +3648,7 @@ ${ hueIcons.symbols() }
               _elCheckerInterval = window.setInterval(function () {
                 if (_el.find(".resultTable").length > 0) {
                   try {
-                    resizeToggleResultSettings(snippet, true);
+                    resizeToggleResultSettings(snippet, initial);
                     resetResultsResizer(snippet);
                     $(document).trigger("forceChartDraw", snippet);
                   } catch (e) { }
@@ -3658,7 +3660,7 @@ ${ hueIcons.symbols() }
         }
       }
 
-      forceChartDraws();
+      forceChartDraws(true);
 
       var _resizeTimeout = -1;
       $(window).on("resize", function () {