Sfoglia il codice sorgente

HUE-5609 [core] Create a jHueScrollLeft plugin

Enrico Berti 9 anni fa
parent
commit
3543f0c

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

@@ -1301,6 +1301,12 @@ a#advanced-btn:hover {
   display: none;
 }
 
+#jHueScrollLeftAnchor {
+  bottom: 20px;
+  right: 20px;
+  display: none;
+}
+
 #jHueTourMask {
   position: absolute;
   display: none;

+ 8 - 1
desktop/core/src/desktop/static/desktop/js/jquery.huedatatable.js

@@ -141,7 +141,6 @@
         var search = $('<div>').css({
           'position': 'fixed',
           'bottom': '20px',
-          'right': '70px',
           'opacity': 0.85
         }).addClass('hueAnchor hue-datatable-search').appendTo($('body'));
         search.html('<input type="text"> <i class="fa fa-chevron-up pointer muted"></i> <i class="fa fa-chevron-down pointer muted"></i> &nbsp; <span></span> &nbsp; <i class="fa fa-times pointer inactive-action"></i>');
@@ -190,6 +189,14 @@
         $('.hue-datatable-search').show();
         $('.hue-datatable-search').find('input').focus();
       }
+      var right = -30;
+      $('.hueAnchorScroller:visible').each(function () {
+        var visibleRight = $(this).css('right').replace(/px/gi, '') * 1;
+        if (!isNaN(visibleRight) && visibleRight > right) {
+          right = visibleRight;
+        }
+      });
+      $('.hue-datatable-search').css('right', (right + 50) + 'px');
     }
 
     self.fnSearch = function (what, avoidScroll) {

+ 145 - 0
desktop/core/src/desktop/static/desktop/js/jquery.scrollleft.js

@@ -0,0 +1,145 @@
+// 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.
+/*
+ * jHue scroll to left plugin
+ * Can be used globally with
+ *   $.jHueScrollLeft()
+ * or with a target for the scroll left
+ *   $(element).jHueScrollLeft()
+ *
+ *   options:
+ *    - threshold: (default 100) value in pixels, scroll amount before the link appears
+ */
+
+(function ($, window, document, undefined) {
+
+  var pluginName = "jHueScrollLeft",
+      defaults = {
+        threshold: 100 // it displays it after 100 px of scroll
+      };
+
+  function Plugin(element, options) {
+    this.element = element;
+    this.options = $.extend({}, defaults, options);
+    this._defaults = defaults;
+    this._name = pluginName;
+    this.setupScrollLeft();
+  }
+
+  Plugin.prototype.setOptions = function (options) {
+    this.options = $.extend({}, defaults, options);
+  };
+
+  Plugin.prototype.setupScrollLeft = function () {
+    var _this = this,
+      link = null;
+
+    if ($("#jHueScrollLeftAnchor").length > 0) { // just one scroll up per page
+      link = $("#jHueScrollLeftAnchor");
+      $(document).off("click", "#jHueScrollLeftAnchor");
+    }
+    else {
+      link = $("<a/>").attr("id", "jHueScrollLeftAnchor").addClass("hueAnchor hueAnchorScroller").attr("href", "javascript:void(0)").html("<i class='fa fa-fw fa-chevron-left'></i>").appendTo("body");
+    }
+
+    if ($(_this.element).is("body")) {
+      setScrollBehavior($(window), $("body, html"));
+    }
+    else {
+      setScrollBehavior($(_this.element), $(_this.element));
+    }
+
+    function positionOtherAnchors() {
+      var right = -30;
+      if ($('#jHueScrollUpAnchor').is(':visible')){
+        right = 20;
+      }
+
+      if ($('#jHueScrollLeftAnchor').is(':visible')){
+        $('#jHueScrollLeftAnchor').css('right', (right + 50) + 'px');
+        right += 50;
+      }
+
+      $('.hue-datatable-search').css('right', (right + 50) + 'px');
+    }
+
+
+    function setScrollBehavior(scrolled, scrollable) {
+      scrolled.scroll(function () {
+        if (scrolled.scrollLeft() > _this.options.threshold) {
+          if (link.is(":hidden")) {
+            positionOtherAnchors();
+            link.fadeIn(200, positionOtherAnchors);
+          }
+          if ($(_this.element).data("lastScrollLeft") == null || $(_this.element).data("lastScrollLeft") < scrolled.scrollLeft()) {
+            $("#jHueScrollLeftAnchor").data("caller", scrollable);
+          }
+          $(_this.element).data("lastScrollLeft", scrolled.scrollTop());
+        }
+        else {
+          checkForAllScrolls();
+        }
+      });
+    }
+
+    function checkForAllScrolls() {
+      var _allOk = true;
+      $(document).find("[jHueScrollified='true']").each(function (cnt, item) {
+        if ($(item).is("body")) {
+          if ($(window).scrollLeft() > _this.options.threshold) {
+            _allOk = false;
+            $("#jHueScrollLeftAnchor").data("caller", $("body, html"));
+          }
+        }
+        else {
+          if ($(item).scrollLeft() > _this.options.threshold) {
+            _allOk = false;
+            $("#jHueScrollLeftAnchor").data("caller", $(item));
+          }
+        }
+      });
+      if (_allOk) {
+        link.fadeOut(200, positionOtherAnchors);
+        $("#jHueScrollLeftAnchor").data("caller", null);
+      }
+    }
+
+    $(document).on("click", "#jHueScrollLeftAnchor", function (event) {
+      if ($("#jHueScrollLeftAnchor").data("caller") != null) {
+        $("#jHueScrollLeftAnchor").data("caller").animate({scrollLeft: 0}, 300, function () {
+          if ($(document).find("[jHueScrollified='true']").not($("#jHueScrollLeftAnchor").data("caller")).is("body") && $(window).scrollLeft() > _this.options.threshold) {
+            $("#jHueScrollLeftAnchor").data("caller", $("body, html"));
+          }
+          else {
+            checkForAllScrolls();
+          }
+        });
+      }
+      return false;
+    });
+  };
+
+  $.fn[pluginName] = function (options) {
+    return this.each(function () {
+      $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
+    });
+  }
+
+  $[pluginName] = function (options) {
+    new Plugin($("body"), options);
+  };
+
+})(jQuery, window, document);

+ 25 - 6
desktop/core/src/desktop/static/desktop/js/jquery.scrollup.js

@@ -28,7 +28,8 @@
 
   var pluginName = "jHueScrollUp",
       defaults = {
-        threshold: 100 // it displays it after 100 px of scroll
+        threshold: 100, // it displays it after 100 px of scroll
+        scrollLeft: false
       };
 
   function Plugin(element, options) {
@@ -36,14 +37,17 @@
     this.options = $.extend({}, defaults, options);
     this._defaults = defaults;
     this._name = pluginName;
-    this.init();
+    this.setupScrollUp();
+    if (this.options.scrollLeft) {
+      $(element).jHueScrollLeft(this.options.threshold);
+    }
   }
 
   Plugin.prototype.setOptions = function (options) {
     this.options = $.extend({}, defaults, options);
   };
 
-  Plugin.prototype.init = function () {
+  Plugin.prototype.setupScrollUp = function () {
     var _this = this,
       link = null;
 
@@ -52,7 +56,7 @@
       $(document).off("click", "#jHueScrollUpAnchor");
     }
     else {
-      link = $("<a/>").attr("id", "jHueScrollUpAnchor").addClass("hueAnchor").attr("href", "javascript:void(0)").html("<i class='fa fa-chevron-up'></i>").appendTo("body");
+      link = $("<a/>").attr("id", "jHueScrollUpAnchor").addClass("hueAnchor hueAnchorScroller").attr("href", "javascript:void(0)").html("<i class='fa fa-fw fa-chevron-up'></i>").appendTo("body");
     }
 
     $(_this.element).attr("jHueScrollified", "true");
@@ -64,11 +68,26 @@
       setScrollBehavior($(_this.element), $(_this.element));
     }
 
+    function positionOtherAnchors() {
+      var right = -30;
+      if ($('#jHueScrollUpAnchor').is(':visible')){
+        right = 20;
+      }
+
+      if ($('#jHueScrollLeftAnchor').is(':visible')){
+        $('#jHueScrollLeftAnchor').css('right', (right + 50) + 'px');
+        right += 50;
+      }
+
+      $('.hue-datatable-search').css('right', (right + 50) + 'px');
+    }
+
     function setScrollBehavior(scrolled, scrollable) {
       scrolled.scroll(function () {
         if (scrolled.scrollTop() > _this.options.threshold) {
           if (link.is(":hidden")) {
-            link.fadeIn(200);
+            positionOtherAnchors();
+            link.fadeIn(200, positionOtherAnchors);
           }
           if ($(_this.element).data("lastScrollTop") == null || $(_this.element).data("lastScrollTop") < scrolled.scrollTop()) {
             $("#jHueScrollUpAnchor").data("caller", scrollable);
@@ -98,7 +117,7 @@
         }
       });
       if (_allOk) {
-        link.fadeOut(200);
+        link.fadeOut(200, positionOtherAnchors);
         $("#jHueScrollUpAnchor").data("caller", null);
       }
     }

+ 1 - 0
desktop/core/src/desktop/templates/common_header.mako

@@ -123,6 +123,7 @@ if USE_NEW_EDITOR.get():
   <script src="${ static('desktop/js/jquery.tablescroller.js') }"></script>
   <script src="${ static('desktop/js/jquery.tableextender.js') }"></script>
   <script src="${ static('desktop/js/jquery.tableextender2.js') }"></script>
+  <script src="${ static('desktop/js/jquery.scrollleft.js') }"></script>
   <script src="${ static('desktop/js/jquery.scrollup.js') }"></script>
   <script src="${ static('desktop/js/jquery.tour.js') }"></script>
   <script src="${ static('desktop/ext/js/jquery/plugins/jquery.cookie.js') }"></script>

+ 1 - 0
desktop/core/src/desktop/templates/responsive.mako

@@ -386,6 +386,7 @@ ${ hueIcons.symbols() }
 <script src="${ static('desktop/ext/js/knockout.validation.min.js') }"></script>
 <script src="${ static('desktop/js/ko.editable.js') }"></script>
 <script src="${ static('desktop/js/ko.hue-bindings.js') }"></script>
+<script src="${ static('desktop/js/jquery.scrollleft.js') }"></script>
 <script src="${ static('desktop/js/jquery.scrollup.js') }"></script>
 <script src="${ static('desktop/js/jquery.tour.js') }"></script>
 <script src="${ static('desktop/js/sqlFunctions.js') }"></script>

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

@@ -2579,6 +2579,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
           DATATABLES_MAX_HEIGHT = $(window).height() - $(el).parent().offset().top - 40;
           $(el).parents('.dataTables_wrapper').css('overflow-x', 'hidden');
           $(el).jHueHorizontalScrollbar();
+          $(el).parents('.dataTables_wrapper').jHueScrollLeft();
         }
         else {
           if ($(el).data('fnDraws') === 1) {