Эх сурвалжийг харах

HUE-919 [core] Create 'scroll to top' jQuery plugin

$.jHueScrollUp() will create the plugin with a default threshold of 100px scroll
Enrico Berti 12 жил өмнө
parent
commit
1081ada

+ 1 - 29
apps/help/src/help/templates/display.mako

@@ -32,35 +32,7 @@ ${ commonheader("Hue Help", "help", user, "100px") | n,unicode }
 
   <script>
     $(document).ready(function () {
-      $("a").click(function (e) {
-        var _link = $(this);
-        if (_link.attr("href").indexOf("#") == 0) {
-          e.preventDefault();
-          $(".returnHome").remove();
-          var _anchor = $("a[name='" + decodeURIComponent(_link.attr("href").substring(1)) + "']").last();
-          $("html, body").animate({
-            scrollTop:(_anchor.position().top - $(".navbar-fixed-top").height() - $(".subnav-fixed").height()) + "px"
-          }, 300);
-          createTopArrow(_anchor);
-        }
-      });
-
-      if (window.location.hash != ""){
-        var _anchor = $("a[name='" + decodeURIComponent(window.location.hash.substring(1)) + "']").last();
-        window.setTimeout(function(){
-          $("html, body").scrollTop(_anchor.position().top - $(".navbar-fixed-top").height() - $(".subnav-fixed").height());
-          createTopArrow(_anchor);
-        }, 10);
-      }
-
-      function createTopArrow(anchor){
-        $("<i>").css("cursor", "pointer").css("margin-left", "10px").attr("class", "returnHome icon icon-arrow-up").click(function () {
-          $(this).remove();
-          $("html, body").animate({
-            scrollTop:"0px"
-          }, 300);
-        }).appendTo(anchor.parent());
-      }
+      $.jHueScrollUp();
     });
   </script>
 

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

@@ -91,6 +91,7 @@ from django.utils.translation import ugettext as _
   <script src="/static/js/Source/jHue/jquery.notify.js"></script>
   <script src="/static/js/Source/jHue/jquery.tablescroller.js"></script>
   <script src="/static/js/Source/jHue/jquery.tableextender.js"></script>
+  <script src="/static/js/Source/jHue/jquery.scrollup.js"></script>
   <script src="/static/ext/js/jquery/plugins/jquery.cookie.js"></script>
   <script src="/static/ext/js/jquery/plugins/jquery.simpleplaceholder.js"></script>
   <script src="/static/ext/js/jquery/plugins/jquery.dataTables.1.8.2.min.js"></script>

+ 24 - 0
desktop/core/static/css/hue2.css

@@ -1066,3 +1066,27 @@ a#advanced-btn:hover {
   margin-right: -14px;
   margin-top: -12px;
 }
+
+#jHueScrollUpAnchor {
+  color: #FFFFFF;
+  opacity: 0.65;
+  filter: alpha(opacity=65);
+  display: none;
+  position: fixed;
+  z-index: 2147483647;
+  bottom: 20px;
+  right: 20px;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  background-color: #333333;
+  padding: 10px;
+  padding-left: 14px;
+  padding-right: 14px;
+}
+
+#jHueScrollUpAnchor:hover {
+  text-decoration: none;
+  opacity: 0.85;
+  filter: alpha(opacity=85);
+}

+ 80 - 0
desktop/core/static/js/Source/jHue/jquery.scrollup.js

@@ -0,0 +1,80 @@
+// 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 top plugin
+ * Can be used globally with
+ *   $.jHueScrollUp()
+ * or with a target for the scroll up
+ *   $(element).jHueScrollUp()
+ *
+ *   options:
+ *    - threshold: (default 100) value in pixels, scroll amount before the link appears
+ */
+;
+(function ($, window, document, undefined) {
+
+  var pluginName = "jHueScrollUp",
+      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.init();
+  }
+
+  Plugin.prototype.setOptions = function (options) {
+    this.options = $.extend({}, defaults, options);
+  };
+
+  Plugin.prototype.init = function () {
+    var _this = this;
+
+    if ($("#jHueScrollUpAnchor").length > 0) { // just one scroll up per page
+      return;
+    }
+
+    var link = $("<a/>").attr("id", "jHueScrollUpAnchor").attr("href", "javascript:void(0)").html("<i class='icon-chevron-up'></i>").appendTo("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;
+    });
+  };
+
+  $.fn[pluginName] = function (options) {
+    return this.each(function () {
+      if (!$.data(this, 'plugin_' + pluginName)) {
+        $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
+      }
+      else {
+        $.data(this, 'plugin_' + pluginName).setOptions(options);
+      }
+    });
+  }
+
+  $[pluginName] = function (options) {
+    new Plugin($("body"), options);
+  };
+
+})(jQuery, window, document);