浏览代码

[core] Changed custom scrollbar plugin and wired it on the new foreachVisible

Enrico Berti 9 年之前
父节点
当前提交
4d9a172e1e

文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/ext/css/jquery.mCustomScrollbar.min.css


文件差异内容过多而无法显示
+ 1 - 0
desktop/core/src/desktop/static/desktop/ext/css/perfect-scrollbar.min.css


文件差异内容过多而无法显示
+ 0 - 1
desktop/core/src/desktop/static/desktop/ext/js/jquery/plugins/jquery.mCustomScrollbar.concat.min.js


文件差异内容过多而无法显示
+ 1 - 0
desktop/core/src/desktop/static/desktop/ext/js/jquery/plugins/perfect-scrollbar.jquery.min.js


+ 31 - 26
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -3043,7 +3043,6 @@
       }
 
       var $wrapper = $element.parent();
-
       if (!$wrapper.hasClass('foreach-wrapper')) {
         $wrapper = $('<div>').css({
           'position': 'relative',
@@ -3054,6 +3053,22 @@
           'top': 0,
           'width': '100%'
         }).appendTo($wrapper);
+
+        $container.perfectScrollbar({
+          minScrollbarLength: options.minScrollbarLength || 20,
+          suppressScrollX: options.suppressScrollX || true
+        });
+        $container.on('ps-scroll-x', function () {
+          $(element).trigger('scroll');
+        });
+        $container.on('ps-scroll-y', function () {
+          $(element).trigger('scroll');
+        });
+      }
+      else {
+        window.setTimeout(function(){
+          $container.perfectScrollbar('update');
+        }, 200);
       }
 
       // This is kept up to date with the currently rendered elements, it's used to keep track of any
@@ -3075,6 +3090,7 @@
           totalHeight += height;
         });
         $wrapper.height(totalHeight + 'px');
+        $container.perfectScrollbar('update');
       };
       resizeWrapper();
 
@@ -3221,11 +3237,10 @@
       var renderThrottle = -1;
       var lastScrollTop = -1;
       var onScroll = function () {
-        var scrollTop = $container.data('scrollTop') || $container.scrollTop();
-        if (startIndex > incrementLimit && Math.abs(lastScrollTop - scrollTop) < (incrementLimit * options.minHeight)) {
+        if (startIndex > incrementLimit && Math.abs(lastScrollTop - $container.scrollTop()) < (incrementLimit * options.minHeight)) {
           return;
         }
-        lastScrollTop = scrollTop;
+        lastScrollTop = $container.scrollTop();;
         setStartAndEndFromScrollTop();
         clearTimeout(renderThrottle);
         if (Math.abs($parentFVOwnerElement.data('startIndex') - startIndex) > incrementLimit ||
@@ -3324,7 +3339,7 @@
       var render = function () {
         if ($parent.parents('.hueach').length === 0) {
           var heightCorrection = 0, fluidCorrection = 0;
-          var scrollTop = wrappable.data('scrollTop') || $parent.parents(scrollable).scrollTop();
+          var scrollTop = $parent.parents(scrollable).scrollTop();
           if (wrappable.is('table')) {
             if (scrollTop < scrollableOffset + itemHeight) {
               wrappable.find('thead').css('opacity', '1');
@@ -3401,28 +3416,18 @@
     }
   };
 
-  ko.bindingHandlers.customScrollbar = {
+  ko.bindingHandlers.perfectScrollbar = {
     init: function (element, valueAccessor, allBindings) {
-      $(element).mCustomScrollbar({
-        autoHideScrollbar: true,
-        theme: 'minimal-dark',
-        autoExpandScrollbar: true,
-        callbacks: {
-          onInit: function () {
-            huePubSub.publish('customScrollbar.init', {
-              element: element,
-              mcs: this.mcs
-            });
-            $(element).trigger('scroll');
-          },
-          whileScrolling: function () {
-            huePubSub.publish('customScrollbar.scroll', {
-              element: element,
-              mcs: this.mcs
-            });
-            $(element).trigger('scroll');
-          }
-        }
+      var options = valueAccessor() || {};
+      $(element).perfectScrollbar({
+        minScrollbarLength: options.minScrollbarLength || 20,
+        suppressScrollX: options.suppressScrollX || true
+      });
+      $(element).on('ps-scroll-x', function () {
+        $(element).trigger('scroll');
+      });
+      $(element).on('ps-scroll-y', function () {
+        $(element).trigger('scroll');
       });
     }
   };

+ 2 - 2
desktop/core/src/desktop/templates/common_header.mako

@@ -53,7 +53,7 @@ from django.utils.translation import ugettext as _
   <link href="${ static('desktop/ext/css/font-awesome.min.css') }" rel="stylesheet">
   <link href="${ static('desktop/css/hue3.css') }" rel="stylesheet">
   <link href="${ static('desktop/ext/css/fileuploader.css') }" rel="stylesheet">
-  <link href="${ static('desktop/ext/css/jquery.mCustomScrollbar.min.css') }" rel="stylesheet">
+  <link href="${ static('desktop/ext/css/perfect-scrollbar.min.css') }" rel="stylesheet">
 
   <style type="text/css">
     % if conf.CUSTOM.BANNER_TOP_HTML.get():
@@ -189,7 +189,7 @@ from django.utils.translation import ugettext as _
   <script src="${ static('desktop/ext/js/jquery/plugins/jquery.total-storage.min.js') }"></script>
   <script src="${ static('desktop/ext/js/jquery/plugins/jquery.placeholder.min.js') }"></script>
   <script src="${ static('desktop/ext/js/jquery/plugins/jquery.dataTables.1.8.2.min.js') }"></script>
-  <script src="${ static('desktop/ext/js/jquery/plugins/jquery.mCustomScrollbar.concat.min.js') }"></script>
+  <script src="${ static('desktop/ext/js/jquery/plugins/perfect-scrollbar.jquery.min.js') }"></script>
   <script src="${ static('desktop/ext/js/jquery/plugins/floatlabels.min.js') }"></script>
   <script src="${ static('desktop/js/jquery.datatables.sorting.js') }"></script>
   <script src="${ static('desktop/ext/js/bootstrap.min.js') }"></script>

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

@@ -337,7 +337,7 @@ ${ require.config() }
       }"></div>
   </div>
   <div class="resizer" data-bind="visible: $root.isLeftPanelVisible() && $root.assistAvailable(), splitDraggable : { appName: 'notebook', leftPanelVisible: $root.isLeftPanelVisible }"><div class="resize-bar">&nbsp;</div></div>
-  <div class="right-panel" data-bind="event: { scroll: function(){ $(document).trigger('hideAutocomplete'); } }, customScrollbar">
+  <div class="right-panel" data-bind="event: { scroll: function(){ $(document).trigger('hideAutocomplete'); } }, perfectScrollbar">
     <div>
       <div class="row-fluid row-container sortable-snippets" data-bind="css: {'is-editing': $root.isEditing},
         sortable: {

部分文件因为文件数量过多而无法显示