فهرست منبع

HUE-1877 [beeswax] Smarter scroll to top button

Rewritten mostly of jHueScrollup, now you can declare multiple elements and body scrollers
Enrico Berti 11 سال پیش
والد
کامیت
40501d0
2فایلهای تغییر یافته به همراه56 افزوده شده و 35 حذف شده
  1. 4 6
      apps/beeswax/src/beeswax/templates/execute.mako
  2. 52 29
      desktop/core/static/js/jquery.scrollup.js

+ 4 - 6
apps/beeswax/src/beeswax/templates/execute.mako

@@ -961,9 +961,7 @@ function reinitializeTable(max) {
         firstColumnTooltip: true
       });
       container.height($(".dataTables_wrapper").height());
-      $(".dataTables_wrapper").jHueScrollUp({
-        secondClickScrollToTop: true
-      });
+      $(".dataTables_wrapper").jHueScrollUp();
     } else if ($('#resultEmpty').height() > 0) {
       container.height($('#resultEmpty').height());
     }
@@ -977,6 +975,8 @@ function reinitializeTable(max) {
 }
 
 $(document).ready(function () {
+  $.jHueScrollUp();
+
   var queryPlaceholder = "${_('Example: SELECT * FROM tablename, or press CTRL + space')}";
 
   $("#executeQuery").tooltip({
@@ -1496,9 +1496,7 @@ function resultsTable(e, data) {
     });
     addResults(viewModel, dataTable, index, pageSize);
     index += pageSize;
-    dataTableEl.jHueScrollUp({
-      secondClickScrollToTop: true
-    });
+    dataTableEl.jHueScrollUp();
   }
 }
 

+ 52 - 29
desktop/core/static/js/jquery.scrollup.js

@@ -22,15 +22,13 @@
  *
  *   options:
  *    - threshold: (default 100) value in pixels, scroll amount before the link appears
- *    - secondClickScrollToTop: (default false) if specified, the anchor stays for longer and you can re-click on it to scroll to this element
  */
 
 (function ($, window, document, undefined) {
 
   var pluginName = "jHueScrollUp",
       defaults = {
-        threshold: 100, // it displays it after 100 px of scroll
-        secondClickScrollToTop: false
+        threshold: 100 // it displays it after 100 px of scroll
       };
 
   function Plugin(element, options) {
@@ -51,45 +49,70 @@
     var link = $("<a/>").attr("id", "jHueScrollUpAnchor").attr("href", "javascript:void(0)").html("<i class='fa fa-chevron-up'></i>").appendTo("body");
     if ($("#jHueScrollUpAnchor").length > 0) { // just one scroll up per page
       link = $("#jHueScrollUpAnchor");
-      link.off("click");
+      $(document).off("click", "#jHueScrollUpAnchor");
     }
 
+    $(_this.element).attr("jHueScrollified", "true");
+
     if ($(_this.element).is("body")) {
-      $(window).scroll(function () {
-        $(($(window).scrollTop() > _this.options.threshold) ? link.fadeIn(200) : link.fadeOut(200));
-      });
-      link.click(function (event) {
-        $("body, html").animate({scrollTop: $(_this.element).position().top}, 300);
-        return false;
-      });
+      setScrollBehavior($(window), $("body, html"));
     }
     else {
-      $(_this.element).scroll(function () {
-        var _fadeOutMs = 200;
-        if (_this.options.secondClickScrollToTop) {
-          _fadeOutMs = 1000;
+      setScrollBehavior($(_this.element), $(_this.element));
+    }
+
+    function setScrollBehavior(scrolled, scrollable) {
+      scrolled.scroll(function () {
+        if (scrolled.scrollTop() > _this.options.threshold) {
+          if (link.is(":hidden")) {
+            link.fadeIn(200);
+          }
+          if ($(_this.element).data("lastScrollTop") == null || $(_this.element).data("lastScrollTop") < scrolled.scrollTop()) {
+            $("#jHueScrollUpAnchor").data("caller", scrollable);
+          }
+          $(_this.element).data("lastScrollTop", scrolled.scrollTop());
+        }
+        else {
+          checkForAllScrolls();
         }
-        $(($(_this.element).scrollTop() > _this.options.threshold) ? link.fadeIn(200) : link.fadeOut(_fadeOutMs));
       });
-      link.on("click", function (event) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-        if (_this.options.secondClickScrollToTop) {
-          if ($(_this.element).data("lastClick") == null || (new Date()).getTime() - $(_this.element).data("lastClick") > 1500) {
-            $(_this.element).animate({scrollTop: 0}, 300);
-          }
-          else {
-            $("body, html").animate({scrollTop: 0}, 300);
-            link.fadeOut(200);
+    }
+
+    function checkForAllScrolls() {
+      var _allOk = true;
+      $(document).find("[jHueScrollified='true']").each(function (cnt, item) {
+        if ($(item).is("body")) {
+          if ($(window).scrollTop() > _this.options.threshold) {
+            _allOk = false;
+            $("#jHueScrollUpAnchor").data("caller", $("body, html"));
           }
-          $(_this.element).data("lastClick", (new Date()).getTime());
         }
         else {
-          $(_this.element).animate({scrollTop: 0}, 300);
+          if ($(item).scrollTop() > _this.options.threshold) {
+            _allOk = false;
+            $("#jHueScrollUpAnchor").data("caller", $(item));
+          }
         }
-        return false;
       });
+      if (_allOk) {
+        link.fadeOut(200);
+        $("#jHueScrollUpAnchor").data("caller", null);
+      }
     }
+
+    $(document).on("click", "#jHueScrollUpAnchor", function (event) {
+      if ($("#jHueScrollUpAnchor").data("caller") != null) {
+        $("#jHueScrollUpAnchor").data("caller").animate({scrollTop: 0}, 300, function () {
+          if ($(document).find("[jHueScrollified='true']").not($("#jHueScrollUpAnchor").data("caller")).is("body") && $(window).scrollTop() > _this.options.threshold) {
+            $("#jHueScrollUpAnchor").data("caller", $("body, html"));
+          }
+          else {
+            checkForAllScrolls();
+          }
+        });
+      }
+      return false;
+    });
   };
 
   $.fn[pluginName] = function (options) {