فهرست منبع

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

Enrico Berti 10 سال پیش
والد
کامیت
4d9a172

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 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: {

برخی فایل ها در این مقایسه diff نمایش داده نمی شوند زیرا تعداد فایل ها بسیار زیاد است