소스 검색

HUE-1889 [beeswax] Slickier editor layout

Fixed results size and scroll
Improved infinite scroll
The editor now expands itself for queries bigger than 7 lines
Improved recent queries behavior
Enrico Berti 11 년 전
부모
커밋
6481060a21
2개의 변경된 파일110개의 추가작업 그리고 78개의 파일을 삭제
  1. 50 21
      apps/beeswax/src/beeswax/templates/execute.mako
  2. 60 57
      desktop/core/static/js/jquery.tableextender.js

+ 50 - 21
apps/beeswax/src/beeswax/templates/execute.mako

@@ -905,7 +905,7 @@ $(document).ready(function () {
       "bInfo": false,
       "bFilter": false,
       "aoColumns": [
-        { "sWidth" : "20%"},
+        { "sWidth" : "10%"},
         { "sWidth" : "75%"},
         { "sWidth" : "5%", "bSortable": false }
       ],
@@ -930,16 +930,17 @@ $(document).ready(function () {
   renderRecent = function() {
     $("#recentLoader").show();
     recentQueries.fnClearTable();
-    $.getJSON("${ url(app_name + ':list_query_history') }?format=json", function(data) {
+    $.getJSON("${ url(app_name + ':list_query_history') }?format=json&"+Math.random(), function(data) {
       if (data && data.queries) {
         $(data.queries).each(function(cnt, item){
           recentQueries.fnAddData([
             '<span data-time="' + item.timeInMs + '">' + item.timeFormatted + '</span>',
             '<code style="cursor:pointer">' + item.query + '</code>',
-            (item.resultsUrl != "" ? '<a href="' + item.resultsUrl + '">${_('See results...')}</a>': '')
+            (item.resultsUrl != "" ? '<a href="' + item.resultsUrl + '" data-row-selector="true">${_('See results...')}</a>': '')
           ]);
         });
       }
+      $("a[data-row-selector='true']").jHueRowSelector();
       $("#recentLoader").hide();
       $("#recentQueries").css("width", "100%");
     });
@@ -1138,19 +1139,23 @@ function reinitializeTable(max) {
 
   function fn(){
     var container = $($("a[data-toggle='tab']:not(.sidetab)").parent(".active").find("a").attr("href"));
-    if ($(".dataTables_wrapper").height() > 0) {
-      $(".dataTables_wrapper").jHueTableScroller({
-        minHeight: $(window).height() - 190,
+    if ($("#results .dataTables_wrapper").height() > 0) {
+      $("#results .dataTables_wrapper").jHueTableScroller({
+        minHeight: $(window).height() - 150,
         heightAfterCorrection: 0
       });
-      container.height($(".dataTables_wrapper").height());
-      $(".dataTables_wrapper").jHueScrollUp();
+      $(".resultTable").jHueTableExtender({
+         fixedHeader: true,
+         includeNavigator: false
+      });
+      container.height($("#results .dataTables_wrapper").height());
+      $("#results .dataTables_wrapper").jHueScrollUp();
     } else if ($('#resultEmpty').height() > 0) {
       container.height($('#resultEmpty').height());
     }
 
-    if ($(".dataTables_wrapper").data('original-height') == 0 && --_max != 0) {
-      $(".dataTables_wrapper").data('original-height', $(".dataTables_wrapper").height());
+    if ($("#results .dataTables_wrapper").data('original-height') == 0 && --_max != 0) {
+      $("#results .dataTables_wrapper").data('original-height', $("#results .dataTables_wrapper").height());
       window.setTimeout(fn, 100);
     }
   }
@@ -1347,6 +1352,13 @@ $(document).ready(function () {
     $(document.body).off("contextmenu");
   });
 
+  codeMirror.on("update", function () {
+    if (CURRENT_CODEMIRROR_SIZE == 100 && codeMirror.lineCount() > 7){
+      CURRENT_CODEMIRROR_SIZE = 270;
+      codeMirror.setSize("99%", CURRENT_CODEMIRROR_SIZE);
+    }
+  });
+
 });
 
 var editables = function() {
@@ -1618,6 +1630,7 @@ function cleanResultsTable() {
 }
 
 function addResults(viewModel, dataTable, index, pageSize) {
+  var _scrollPos = $("#results .dataTables_wrapper").data("scrollPosition");
   if (viewModel.hasMoreResults() && index + pageSize > viewModel.design.results.rows().length) {
     $(document).one('fetched.results', function () {
       $.totalStorage("${app_name}_temp_query", null);
@@ -1627,6 +1640,15 @@ function addResults(viewModel, dataTable, index, pageSize) {
   } else {
     dataTable.fnAddData(viewModel.design.results.rows.slice(index, index + pageSize));
   }
+  if ($.browser.msie){
+    if (_scrollPos != null && typeof _scrollPos != "undefined"){
+      window.setTimeout(function(){
+        $("#results .dataTables_wrapper").scrollTop(_scrollPos);
+        $(".spinner").hide();
+        $("#results .dataTables_wrapper").animate({opacity: '1'}, 50);
+      }, 1000)
+    }
+  }
 }
 
 function resultsTable(e, data) {
@@ -1669,18 +1691,25 @@ function resultsTable(e, data) {
     $(".blueprintSelect").html(_options);
 
     // Automatic results grower
-    var dataTableEl = $(".dataTables_wrapper");
+    var dataTableEl = $("#results .dataTables_wrapper");
     var index = 0;
     var pageSize = 100;
+    var _scrollTimeout = -1;
     dataTableEl.on("scroll", function (e) {
-      if (dataTableEl.scrollTop() + dataTableEl.outerHeight() + 20 > dataTableEl[0].scrollHeight && dataTable) {
-        dataTableEl.animate({opacity: '0.55'}, 200);
-        $(".spinner").show();
-        addResults(viewModel, dataTable, index, pageSize);
-        index += pageSize;
-        $(".spinner").hide();
-        dataTableEl.animate({opacity: '1'}, 50);
-      }
+      window.clearTimeout(_scrollTimeout);
+      _scrollTimeout = window.setTimeout(function(){
+        dataTableEl.data("scrollPosition", dataTableEl.scrollTop());
+        if (dataTableEl.scrollTop() + dataTableEl.outerHeight() + 20 > dataTableEl[0].scrollHeight && dataTable) {
+          dataTableEl.animate({opacity: '0.55'}, 200);
+          $(".spinner").show();
+          addResults(viewModel, dataTable, index, pageSize);
+          index += pageSize;
+          if (typeof $.browser.msie == "undefined"){
+            $(".spinner").hide();
+            dataTableEl.animate({opacity: '1'}, 50);
+          }
+        }
+      }, 100);
     });
     addResults(viewModel, dataTable, index, pageSize);
     index += pageSize;
@@ -1785,8 +1814,8 @@ function tryExecuteQuery() {
   $(".tooltip").remove();
   var query = getHighlightedQuery() || codeMirror.getValue();
   viewModel.design.query.value(query);
-  if ($(".dataTables_wrapper").length > 0) { // forces results to be up
-    $(".dataTables_wrapper").scrollTop(0);
+  if ($("#results .dataTables_wrapper").length > 0) { // forces results to be up
+    $("#results .dataTables_wrapper").scrollTop(0);
   }
   graphHasBeenPredicted = false;
   if (viewModel.design.isParameterized()) {

+ 60 - 57
desktop/core/static/js/jquery.tableextender.js

@@ -25,6 +25,7 @@
         fixedHeader:false,
         firstColumnTooltip:false,
         hintElement:null,
+        includeNavigator: true,
         labels:{
           GO_TO_COLUMN:"Go to column:",
           PLACEHOLDER:"column name..."
@@ -60,13 +61,14 @@
 
   Plugin.prototype.resetSource = function() {
     var _this = this;
+    if (_this.options.includeNavigator){
+      var source = [];
+      $(this.element).find("th").each(function () {
+        source.push($(this).text());
+      });
 
-    var source = [];
-    $(this.element).find("th").each(function () {
-      source.push($(this).text());
-    });
-
-    $("#jHueTableExtenderNavigator").find("input").data('typeahead').source = source;
+      $("#jHueTableExtenderNavigator").find("input").data('typeahead').source = source;
+    }
   };
 
   Plugin.prototype.init = function () {
@@ -76,63 +78,64 @@
     }
 
     var _this = this;
+    if (_this.options.includeNavigator){
+      var jHueTableExtenderNavigator = $("<div>").attr("id", "jHueTableExtenderNavigator");
+      $("<a>").attr("href", "#").addClass("pull-right").html("&times;").click(function (e) {
+        e.preventDefault();
+        $(this).parent().hide();
+      }).appendTo(jHueTableExtenderNavigator);
+      $("<label>").html(_this.options.labels.GO_TO_COLUMN + " <input type=\"text\" placeholder=\"" + _this.options.labels.PLACEHOLDER + "\" />").appendTo(jHueTableExtenderNavigator);
+
+      jHueTableExtenderNavigator.appendTo($("body"));
+
+      $(_this.element).find("tbody").click(function (event) {
+        if ($.trim(getSelection()) == "") {
+          window.setTimeout(function () {
+            $(".rowSelected").removeClass("rowSelected");
+            $(".columnSelected").removeClass("columnSelected");
+            $(".cellSelected").removeClass("cellSelected");
+            $(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();
+            jHueTableExtenderNavigator.find("input").focus();
+          }, 100);
+        }
+      });
 
-    var jHueTableExtenderNavigator = $("<div>").attr("id", "jHueTableExtenderNavigator");
-    $("<a>").attr("href", "#").addClass("pull-right").html("&times;").click(function (e) {
-      e.preventDefault();
-      $(this).parent().hide();
-    }).appendTo(jHueTableExtenderNavigator);
-    $("<label>").html(_this.options.labels.GO_TO_COLUMN + " <input type=\"text\" placeholder=\"" + _this.options.labels.PLACEHOLDER + "\" />").appendTo(jHueTableExtenderNavigator);
-
-    jHueTableExtenderNavigator.appendTo($("body"));
-
-    $(_this.element).find("tbody").click(function (event) {
-      if ($.trim(getSelection()) == "") {
-        window.setTimeout(function () {
-          $(".rowSelected").removeClass("rowSelected");
-          $(".columnSelected").removeClass("columnSelected");
-          $(".cellSelected").removeClass("cellSelected");
-          $(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();
-          jHueTableExtenderNavigator.find("input").focus();
-        }, 100);
-      }
-    });
-
-    var source = [];
-    $(_this.element).find("th").each(function () {
-      source.push($(this).text());
-    });
+      var source = [];
+      $(_this.element).find("th").each(function () {
+        source.push($(this).text());
+      });
 
-    jHueTableExtenderNavigator.find("input").typeahead({
-      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'
+      jHueTableExtenderNavigator.find("input").typeahead({
+        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'
+              });
             });
-          });
+          }
+          $(_this.element).parent().animate({
+            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");
         }
-        $(_this.element).parent().animate({
-          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");
-      }
-    });
+      });
 
-    $(_this.element).parent().bind("mouseleave", function () {
-      jHueTableExtenderNavigator.hide();
-    });
+      $(_this.element).parent().bind("mouseleave", function () {
+        jHueTableExtenderNavigator.hide();
+      });
 
-    jHueTableExtenderNavigator.bind("mouseenter", function (e) {
-      jHueTableExtenderNavigator.show();
-    });
+      jHueTableExtenderNavigator.bind("mouseenter", function (e) {
+        jHueTableExtenderNavigator.show();
+      });
+    }
 
     if (_this.options.hintElement != null) {
       var showAlertTimeout = -1;