Просмотр исходного кода

HUE-9000 [editor] Have the column selection stick to top of window when scrolling the results

Johan Ahlen 6 лет назад
Родитель
Сommit
b0722bfb4d

+ 2 - 18
desktop/core/src/desktop/js/apps/notebook2/components/resultGrid/ko.resultGrid.js

@@ -74,8 +74,8 @@ const TEMPLATE = `
 </div>
 
 <div class="split-result-container">
-  <div class="result-settings-panel" style="display: none;" data-bind="visible: columnsVisible">
-    <div class="snippet-grid-settings" data-bind="delayedOverflow">
+  <div class="result-settings-panel" style="display: none; height: auto; position:relative" data-bind="visible: columnsVisible">
+    <div class="snippet-grid-settings" data-bind="delayedOverflow, stickVertical: { scrollContainer: MAIN_SCROLLABLE }">
       <table class="table table-condensed margin-top-10 no-border">
         <thead>
         <tr>
@@ -531,22 +531,6 @@ class ResultGrid extends DisposableComponent {
     const $snippet = this.getSnippetElement();
     if ($snippet.find('.resultTable').is(':visible')) {
       $datatablesWrapper = $snippet.find('.dataTables_wrapper');
-      const topCoord =
-        this.isPresentationMode() || this.isResultFullScreenMode()
-          ? window.BANNER_TOP_HTML
-            ? 31
-            : 1
-          : 73;
-      const $resultSettings = $('.result-settings');
-      $snippet.find('.snippet-grid-settings').css({
-        height:
-          this.isPresentationMode() || !this.editorMode()
-            ? '330px'
-            : Math.ceil(
-                $(window).height() -
-                  Math.max($resultSettings.length ? $resultSettings.offset().top : 0, topCoord)
-              ) + 'px'
-      });
     } else {
       $datatablesWrapper = $snippet.find('.chart:visible');
     }

+ 7 - 0
desktop/core/src/desktop/js/ko/bindings/__snapshots__/ko.stickVertical.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ko.stickVertical.js should render binding 1`] = `
+"<div class=\\"scroll-container\\">
+              <div data-bind=\\"scrollVertical: { scrollContainer: '.scroll-container' }\\"></div>
+            </div>"
+`;

+ 46 - 0
desktop/core/src/desktop/js/ko/bindings/ko.stickVertical.js

@@ -0,0 +1,46 @@
+import $ from 'jquery';
+import * as ko from 'knockout';
+
+/**
+ * This binding can be used to emulate position sticky for any element.
+ *
+ * Example:
+ *
+ * <div databind="stickVertical: { scrollContainer: '.some-container' }">...</div>
+ *
+ * @type {{init: ko.bindingHandlers.stickVertical.init}}
+ */
+ko.bindingHandlers.stickVertical = {
+  init: function(element, valueAccessor) {
+    const options = valueAccessor() || {};
+
+    const $scrollContainer = $(options.scrollContainer || window);
+    const $element = $(element);
+    const $parent = $element.parent();
+
+    let active = false;
+
+    let throttleTimeout = -1;
+    const throttledReposition = () => {
+      window.clearTimeout(throttleTimeout);
+      throttleTimeout = window.setTimeout(() => {
+        const diff = $scrollContainer.offset().top - $parent.offset().top;
+        if (diff > 0) {
+          $element.animate({ 'margin-top': diff + 'px' }, 40);
+          active = true;
+        } else if (active) {
+          $element.css({ 'margin-top': '' });
+          active = false;
+        }
+      }, 50);
+    };
+
+    $scrollContainer.on('scroll.stickVertical', throttledReposition);
+    $(window).on('resize.stickVertical', throttledReposition);
+
+    ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
+      $scrollContainer.off('scroll.stickVertical');
+      $(window).off('resize.stickVertical');
+    });
+  }
+};

+ 33 - 0
desktop/core/src/desktop/js/ko/bindings/ko.stickVertical.test.js

@@ -0,0 +1,33 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { koSetup } from 'jest/koTestUtils';
+import './ko.stickVertical';
+
+describe('ko.stickVertical.js', () => {
+  const setup = koSetup();
+
+  it('should render binding', async () => {
+    const wrapper = await setup.renderKo(
+      `<div class="scroll-container">
+              <div data-bind="scrollVertical: { scrollContainer: '.scroll-container' }"></div>
+            </div>`,
+      {}
+    );
+
+    expect(wrapper.innerHTML).toMatchSnapshot();
+  });
+});

+ 1 - 0
desktop/core/src/desktop/js/ko/ko.all.js

@@ -112,6 +112,7 @@ import 'ko/bindings/ko.spinEdit';
 import 'ko/bindings/ko.splitDraggable';
 import 'ko/bindings/ko.splitFlexDraggable';
 import 'ko/bindings/ko.sqlContextPopover';
+import 'ko/bindings/ko.stickVertical';
 import 'ko/bindings/ko.storageContextPopover';
 import 'ko/bindings/ko.stretchDown';
 import 'ko/bindings/ko.tagEditor';