Browse Source

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

Enrico Berti 10 năm trước cách đây
mục cha
commit
4d9a172

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
desktop/core/src/desktop/static/desktop/ext/css/jquery.mCustomScrollbar.min.css


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1 - 0
desktop/core/src/desktop/static/desktop/ext/css/perfect-scrollbar.min.css


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 1
desktop/core/src/desktop/static/desktop/ext/js/jquery/plugins/jquery.mCustomScrollbar.concat.min.js


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 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: {

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác