Forráskód Böngészése

[core] Added fixed first column to jHueTableExtender

Enrico Berti 10 éve
szülő
commit
76e8e7b

+ 12 - 0
apps/beeswax/src/beeswax/templates/execute.mako

@@ -971,6 +971,7 @@ ${ tableStats.tableStats() }
 
   #resultTable td, #resultTable th {
     white-space: nowrap;
+    border-right: 1px solid #e5e5e5;
   }
 
   .tab-content {
@@ -1188,6 +1189,7 @@ function placeResizePanelHandle() {
 function reinitializeTableExtenders() {
   $("#resultTable").jHueTableExtender({
      fixedHeader: true,
+     fixedFirstColumn: true,
      includeNavigator: false
   });
   $("#recentQueries").jHueTableExtender({
@@ -1206,9 +1208,13 @@ $(document).ready(function () {
     drag: function (e, ui) {
       draggableHelper($(this), e, ui);
       $(".jHueTableExtenderClonedContainer").hide();
+      $(".jHueTableExtenderClonedContainerColumn").hide();
+      $(".jHueTableExtenderClonedContainerCell").hide();
     },
     stop: function (e, ui) {
       $(".jHueTableExtenderClonedContainer").show();
+      $(".jHueTableExtenderClonedContainerColumn").show();
+      $(".jHueTableExtenderClonedContainerCell").show();
       draggableHelper($(this), e, ui);
       reinitializeTableExtenders();
     }
@@ -1327,6 +1333,8 @@ $(document).ready(function () {
 
   $("#expandResults").on("click", function(){
     $("#resultTablejHueTableExtenderClonedContainer").remove();
+    $("#resultTablejHueTableExtenderClonedContainerColumn").remove();
+    $("#resultTablejHueTableExtenderClonedContainerCell").remove();
     if ($(this).find("i").hasClass("fa-expand")){
       $(this).find("i").removeClass("fa-expand").addClass("fa-compress");
       $(this).parent().parent().addClass("fullscreen");
@@ -2130,6 +2138,8 @@ var errorWidgets = [];
 
 function clearErrorWidgets() {
   $(".jHueTableExtenderClonedContainer").hide();
+  $(".jHueTableExtenderClonedContainerColumn").hide();
+  $(".jHueTableExtenderClonedContainerCell").hide();
   $.each(errorWidgets, function(index, errorWidget) {
     errorWidget.clear();
   });
@@ -2233,6 +2243,8 @@ function tryExecuteQuery() {
   viewModel.scrollNotWorking(true);
   $("#results .dataTables_wrapper").off("scroll", datatableScroll);
   $(".jHueTableExtenderClonedContainer").hide();
+  $(".jHueTableExtenderClonedContainerColumn").hide();
+  $(".jHueTableExtenderClonedContainerCell").hide();
   $(".tooltip").remove();
   var query = getHighlightedQuery() || codeMirror.getValue();
   viewModel.design.query.value(query);

+ 8 - 0
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -1140,6 +1140,10 @@ a#advanced-btn:hover {
   background-color: #DDDDDD !important;
 }
 
+.jHueTableExtenderClonedContainerColumn {
+  border-right: 1px solid #CCC;
+}
+
 #jHueTableExtenderNavigator {
   position: absolute;
   left: 0;
@@ -2248,6 +2252,10 @@ div.navigator .pull-right .nav {
   vertical-align: middle;
 }
 
+table.resultTable td {
+  border-right: 1px solid #e5e5e5;
+}
+
 /*
 Transition to Hue 4
 */

+ 110 - 24
desktop/core/src/desktop/static/desktop/js/jquery.tableextender.js

@@ -21,16 +21,17 @@
 (function ($, window, document, undefined) {
 
   var pluginName = "jHueTableExtender",
-      defaults = {
-        fixedHeader:false,
-        firstColumnTooltip:false,
-        hintElement:null,
-        includeNavigator: true,
-        labels:{
-          GO_TO_COLUMN:"Go to column:",
-          PLACEHOLDER:"column name..."
-        }
-      };
+    defaults = {
+      fixedHeader: false,
+      fixedFirstColumn: false,
+      firstColumnTooltip: false,
+      hintElement: null,
+      includeNavigator: true,
+      labels: {
+        GO_TO_COLUMN: "Go to column:",
+        PLACEHOLDER: "column name..."
+      }
+    };
 
   function Plugin(element, options) {
     this.element = element;
@@ -56,12 +57,17 @@
 
   Plugin.prototype.setOptions = function (options) {
     this.options = $.extend({}, defaults, options);
-    drawHeader(this);
+    if (this.options.fixedHeader) {
+      drawHeader(this);
+    }
+    if (this.options.fixedFirstColumn) {
+      drawFirstColumn(this);
+    }
   };
 
-  Plugin.prototype.resetSource = function() {
+  Plugin.prototype.resetSource = function () {
     var _this = this;
-    if (_this.options.includeNavigator){
+    if (_this.options.includeNavigator) {
       var source = [];
       $(this.element).find("th").each(function () {
         source.push($(this).text());
@@ -78,7 +84,7 @@
     }
 
     var _this = this;
-    if (_this.options.includeNavigator){
+    if (_this.options.includeNavigator) {
       var jHueTableExtenderNavigator = $("<div>").attr("id", "jHueTableExtenderNavigator");
       $("<a>").attr("href", "#").addClass("pull-right").html("&times;").click(function (e) {
         e.preventDefault();
@@ -97,8 +103,8 @@
             $(event.target.parentNode).addClass("rowSelected");
             $(event.target.parentNode).find("td").addClass("rowSelected");
             jHueTableExtenderNavigator
-                .css("left", (event.pageX + jHueTableExtenderNavigator.width() > $(window).width() - 10 ? event.pageX - jHueTableExtenderNavigator.width() - 10 : event.pageX) + "px")
-                .css("top", (event.pageY + 10) + "px").show();
+              .css("left", (event.pageX + jHueTableExtenderNavigator.width() > $(window).width() - 10 ? event.pageX - jHueTableExtenderNavigator.width() - 10 : event.pageX) + "px")
+              .css("top", (event.pageY + 10) + "px").show();
             jHueTableExtenderNavigator.find("input").focus();
           }, 100);
         }
@@ -110,19 +116,19 @@
       });
 
       jHueTableExtenderNavigator.find("input").typeahead({
-        source:source,
-        updater:function (item) {
+        source: source,
+        updater: function (item) {
           jHueTableExtenderNavigator.hide();
           $(_this.element).find("tr td:nth-child(" + ($(_this.element).find("th:econtains(" + item + ")").index() + 1) + ")").addClass("columnSelected");
           if (_this.options.firstColumnTooltip) {
             $(_this.element).find("tr td:nth-child(" + ($(_this.element).find("th:econtains(" + item + ")").index() + 1) + ")").each(function () {
               $(this).attr("rel", "tooltip").attr("title", "#" + $(this).parent().find("td:first-child").text()).tooltip({
-                placement:'left'
+                placement: 'left'
               });
             });
           }
           $(_this.element).parent().animate({
-            scrollLeft:$(_this.element).find("th:econtains(" + item + ")").position().left + $(_this.element).parent().scrollLeft() - $(_this.element).parent().offset().left - 30
+            scrollLeft: $(_this.element).find("th:econtains(" + item + ")").position().left + $(_this.element).parent().scrollLeft() - $(_this.element).parent().offset().left - 30
           }, 300);
           $(_this.element).find("tr.rowSelected td:nth-child(" + ($(_this.element).find("th:econtains(" + item + ")").index() + 1) + ")").addClass("cellSelected");
         }
@@ -156,13 +162,16 @@
     if (_this.options.fixedHeader) {
       drawHeader(_this);
     }
+    if (_this.options.fixedFirstColumn) {
+      drawFirstColumn(_this);
+    }
 
   };
 
   function s4() {
-  return Math.floor((1 + Math.random()) * 0x10000)
-        .toString(16)
-        .substring(1);
+    return Math.floor((1 + Math.random()) * 0x10000)
+      .toString(16)
+      .substring(1);
   }
 
 
@@ -170,9 +179,86 @@
     return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
   }
 
+  function drawFirstColumn(plugin) {
+    if (!$(plugin.element).attr("id") && plugin.options.parentId) {
+      $(plugin.element).attr("id", "eT" + plugin.options.parentId);
+    }
+
+    var originalTh = $(plugin.element).find("thead>tr th:eq(0)");
+    var topPosition;
+    if (plugin.options.clonedContainerPosition == 'absolute') {
+      topPosition = $(plugin.element).parent().position().top - $(window).scrollTop();
+    } else {
+      topPosition = $(plugin.element).parent().offset().top - $(window).scrollTop();
+    }
+
+    $("#" + $(plugin.element).attr("id") + "jHueTableExtenderClonedContainerCell").remove();
+    var clonedCell = $(plugin.element).clone();
+    clonedCell.css("margin-bottom", "0").css("table-layout", "fixed");
+    clonedCell.removeAttr("id").removeClass("resultTable").find("tbody").remove();
+    clonedCell.find("thead>tr th:not(:eq(0))").remove();
+    clonedCell.find("thead>tr th:eq(0)").width(originalTh.width()).css("background-color", "#FFFFFF");
+    clonedCell.find("thead>tr th:eq(0)").click(function () {
+      originalTh.click();
+      clonedCell.find("thead>tr th").attr("class", "sorting");
+      $(this).attr("class", originalTh.attr("class"));
+    });
+
+    var clonedCellContainer = $("<div>").css("background-color", "#FFCC00").width(originalTh.outerWidth()).height(originalTh.outerHeight());
+    clonedCell.appendTo(clonedCellContainer);
+
+    var clonedCellVisibleContainer = $("<div>").attr("id", $(plugin.element).attr("id") + "jHueTableExtenderClonedContainerCell").addClass("jHueTableExtenderClonedContainerCell").width(originalTh.outerWidth()).css("overflow", "hidden").css("top", topPosition + "px");
+    clonedCellVisibleContainer.css("position", plugin.options.clonedContainerPosition || "fixed");
+
+    clonedCellContainer.appendTo(clonedCellVisibleContainer);
+
+    $("#" + $(plugin.element).attr("id") + "jHueTableExtenderClonedContainerColumn").remove();
+    var clonedTable = $(plugin.element).clone();
+    clonedTable.css("margin-bottom", "0").css("table-layout", "fixed");
+    clonedTable.removeAttr("id").removeClass("resultTable");
+    clonedTable.find("thead>tr th:not(:eq(0))").remove();
+    clonedTable.find("tbody>tr").each(function () {
+      $(this).find("td:not(:eq(0))").remove();
+    });
+    clonedTable.find("thead>tr th:eq(0)").width(originalTh.width()).css("background-color", "#FFFFFF");
+
+    var clonedTableContainer = $("<div>").css("background-color", "#FFFFFF").width(originalTh.outerWidth()).height($(plugin.element).parent().get(0).scrollHeight);
+    clonedTable.appendTo(clonedTableContainer);
+
+    var clonedTableVisibleContainer = $("<div>").attr("id", $(plugin.element).attr("id") + "jHueTableExtenderClonedContainerColumn").addClass("jHueTableExtenderClonedContainerColumn").width(originalTh.outerWidth()).height($(plugin.element).parent().height()).css("overflow", "hidden").css("top", topPosition + "px");
+    clonedTableVisibleContainer.css("position", plugin.options.clonedContainerPosition || "fixed");
+
+    clonedTableContainer.appendTo(clonedTableVisibleContainer);
+    clonedTableVisibleContainer.appendTo($(plugin.element).parent());
+
+    clonedCellVisibleContainer.appendTo($(plugin.element).parent());
+
+    window.setInterval(function () {
+      if ($(plugin.element).parent().height() != $(plugin.element).parent().data("h")) {
+        clonedTableContainer.height($(plugin.element).parent().get(0).scrollHeight);
+        clonedTableVisibleContainer.height($(plugin.element).parent().height());
+        $(plugin.element).parent().data("h", clonedTableVisibleContainer.height());
+      }
+    }, 250);
+
+    $(plugin.element).parent().resize(function () {
+      clonedTableContainer.height($(plugin.element).parent().get(0).scrollHeight);
+      clonedTableVisibleContainer.height($(plugin.element).parent().height());
+    });
+
+    $(plugin.element).parent().scroll(function () {
+      clonedTableContainer.css("marginTop", (-$(plugin.element).parent().scrollTop()) + "px");
+    });
+
+    $(window).scroll(function () {
+      clonedTableVisibleContainer.css("top", ($(plugin.element).parent().offset().top - $(window).scrollTop()) + "px");
+      clonedCellVisibleContainer.css("top", ($(plugin.element).parent().offset().top - $(window).scrollTop()) + "px");
+    });
+  }
+
 
   function drawHeader(plugin) {
-    if (!$(plugin.element).attr("id") && plugin.options.parentId){
+    if (!$(plugin.element).attr("id") && plugin.options.parentId) {
       $(plugin.element).attr("id", "eT" + plugin.options.parentId);
     }
     $("#" + $(plugin.element).attr("id") + "jHueTableExtenderClonedContainer").remove();

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

@@ -1301,6 +1301,7 @@ ${ require.config() }
 
         $(el).jHueTableExtender({
           fixedHeader: true,
+          fixedFirstColumn: true,
           includeNavigator: false,
           parentId: 'snippet_' + snippet.id(),
           clonedContainerPosition: "absolute"
@@ -1357,6 +1358,7 @@ ${ require.config() }
 
     $(el).jHueTableExtender({
       fixedHeader: true,
+      fixedFirstColumn: true,
       includeNavigator: false,
       parentId: 'snippet_' + snippet.id(),
       clonedContainerPosition: "absolute"
@@ -1779,6 +1781,7 @@ ${ require.config() }
           var _el = $("#snippet_" + snippet.id()).find(".resultTable");
           _el.jHueTableExtender({
             fixedHeader: true,
+            fixedFirstColumn: true,
             includeNavigator: false,
             parentId: 'snippet_' + snippet.id(),
             clonedContainerPosition: "absolute"
@@ -2066,9 +2069,13 @@ ${ require.config() }
           drag: function (e, ui) {
             draggableHelper($(this), e, ui);
             $(".jHueTableExtenderClonedContainer").hide();
+            $(".jHueTableExtenderClonedContainerColumn").hide();
+            $(".jHueTableExtenderClonedContainerCell").hide();
           },
           stop: function (e, ui) {
             $(".jHueTableExtenderClonedContainer").show();
+            $(".jHueTableExtenderClonedContainerColum").show();
+            $(".jHueTableExtenderClonedContainerCell").show();
             draggableHelper($(this), e, ui, true);
             redrawFixedHeaders();
             ui.helper.first().removeAttr("style");
@@ -2110,6 +2117,8 @@ ${ require.config() }
         if (_el.hasClass("dt")) {
           _el.removeClass("dt");
           $("#eT" + snippet.id() + "jHueTableExtenderClonedContainer").remove();
+          $("#eT" + snippet.id() + "jHueTableExtenderClonedContainerColumn").remove();
+          $("#eT" + snippet.id() + "jHueTableExtenderClonedContainerCell").remove();
           _el.dataTable().fnClearTable();
           _el.dataTable().fnDestroy();
           _el.find("thead tr").empty();