OIS-24: changed perfect scroll to native which supports RTL

package-yarn.json

@@ -15,7 +15,6 @@
     "pouchdb": "^7.2.2",
     "pouchdb-find": "^7.2.2",
     "js-shortid": "^0.1.1",
-    "perfect-scrollbar": "^0.6.16",
     "font-awesome": "^4.6.3",
     "bootstrap-sass": "3.3.7",
     "react": "^17.0.2",

src/openlmis-table/_openlmis-table-container-shortener.scss

@@ -1,22 +1,23 @@
+$custom-scroll-br: 10px;
+$custom-scroll-height: 12px;
+$custom-scroll-color: #333;
+$custom-scroll-track-bg: #d7d7d7;
 
 .openlmis-table-container {
-  .ps-scrollbar-x {
-    z-index: 5;
-    height: 10px !important;
-    background-color: #333 !important;
+  ::-webkit-scrollbar {
+    height: $custom-scroll-height;
   }
 
-  .ps-scrollbar-x-rail, .ps-scrollbar-x-rail:not(hover) {
-    bottom: calc(var(--bottom-offset) * 1px) !important;
-    background-color: darken($light-gray, 5) !important;
-    height: 14px !important;
-    opacity: 1.0 !important;
-    z-index: 10;
-    border-radius: unset;
+  ::-webkit-scrollbar-track {
+    background-color: $custom-scroll-track-bg;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: $custom-scroll-br;
+    background: #333;
   }
 }
 
-// default bottom-offset
 html {
   --bottom-offset: 0;
 }

src/openlmis-table/openlmis-table-container-shortener.directive.js

@@ -14,87 +14,157 @@
  */
 
 (function() {
-
     'use strict';
 
-    /**
-     * @ngdoc directive
-     * @restrict C
-     * @name openlmis-table.directive:openlmisTableContainerHorizontalScroll
-     *
-     * @description
-     * Adds a fake horizontal scroll bar to the table container
-     *
-     */
     angular
         .module('openlmis-table')
         .directive('openlmisTableContainer', directive);
 
-    directive.$inject = ['jQuery', '$window'];
+    directive.$inject = ['jQuery'];
 
-    function directive(jQuery, $window) {
+    function directive(jQuery) {
         var directive = {
             link: link,
             restrict: 'C',
             priority: 15
         };
         return directive;
 
+        function showHideScroll(active) {
+            var css = '#fixed-scrollbar::-webkit-scrollbar {' +
+                'height: 12px;' +
+            '}';
+            if (!active.length) {
+                css = '#fixed-scrollbar::-webkit-scrollbar {' +
+                'height: 0px;}';
+            }
+            $('<style>')
+                .prop('type', 'text/css')
+                .html(css)
+                .appendTo('head');
+        }
+
+        function appendStyles() {
+            var customScrollbarStyles = '#fixed-scrollbar::-webkit-scrollbar {' +
+                    'height: 12px; }' +
+
+                '#fixed-scrollbar::-webkit-scrollbar-track {' +
+                    'background-color: #d7d7d7;}' +
+
+                '#fixed-scrollbar::-webkit-scrollbar-thumb {' +
+                    'background-color: #333;' +
+                    'border-radius: 10px;}';
+
+            $('<style>')
+                .prop('type', 'text/css')
+                .html(customScrollbarStyles)
+                .appendTo('head');
+        }
+
         function link(scope, element) {
-            var xScrollbar,
-                flexTable,
-                window = jQuery($window);
-
-            flexTable = jQuery('.openlmis-flex-table', element);
-
-            window.ready(function() {
-                if (flexTable.length > 0) {
-                    $(flexTable[0]).perfectScrollbar({
-                        handlers: ['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch'],
-                        suppressScrollY: true,
-                        wheelPropagation: true
-                    });
-                    xScrollbar = jQuery('.ps-scrollbar-x-rail', element);
+            var flexTable = jQuery('.openlmis-flex-table', element),
+                debounceTime = 50;
+            flexTable.addClass('fixed-scrollbar');
+            var scrollbar = $('<div id="fixed-scrollbar"><div></div></div>')
+                .appendTo($(document.body));
+            var defaultCss = {
+                overflowX: 'auto',
+                position: 'fixed',
+                width: '100%',
+                bottom: '0px'
+            };
+            scrollbar.hide().css(defaultCss);
+            var scrollContent = scrollbar.find('div');
+            var throttled = _.throttle(scroll, debounceTime);
+            appendStyles();
+
+            function getTop(e) {
+                return e.offset().top;
+            }
+
+            function getBottom(e) {
+                return e.offset().top + e.height();
+            }
+
+            var active = $([]);
+
+            function findActive() {
+                scrollbar.show();
+                active = $([]);
+                $('.fixed-scrollbar').each(function() {
+                    if (getTop($(this)) < getTop(scrollbar) && getBottom($(this)) > getBottom(scrollbar)) {
+                        scrollContent.width = $(this).get(0).scrollWidth;
+                        scrollContent.height = 1;
+                        active = $(this);
+                    }
+                });
+                fitScroll(active);
+                return active;
+            }
+
+            function fitScroll(active) {
+                showHideScroll(active);
+                if (!active.length) {
+                    return scrollbar.hide();
                 }
-            });
 
-            window.on('scroll', blit);
-            window.on('resize', update);
+                var $scrollContent = $(scrollContent);
+                var toolbar = $('.openlmis-toolbar');
+                var withToolbar = toolbar && toolbar.innerHeight();
+                if (withToolbar) {
+                    defaultCss.bottom = withToolbar ? toolbar.innerHeight() + 'px' : '0px';
+                    scrollbar.css(defaultCss);
+                }
+                scrollbar.css({
+                    left: active.offset().left,
+                    width: active.width()
+                });
 
-            element.on('$destroy', function() {
-                window.off('resize', update);
-                window.off('scroll', blit);
-            });
+                $scrollContent.width(active.get(0).scrollWidth);
+                $scrollContent.height(1);
 
-            function update() {
-                if (flexTable.length > 0) {
-                    $(flexTable[0]).perfectScrollbar('update');
-                    blit();
+                lastScroll = undefined;
+            }
+            function onscroll() {
+                var oldactive = active;
+                active = findActive();
+                if (oldactive.not(active).length) {
+                    oldactive.unbind('scroll', update);
+                }
+                if (active.not(oldactive).length) {
+                    active.scroll(update);
                 }
+                update();
             }
 
-            function blit() {
-                if (xScrollbar) {
-                    var parent = xScrollbar.parent();
-                    var windowHeight = window.height(),
-                        containerOffset = parent[0].getBoundingClientRect().bottom;
-
-                    // remove height of floating toolbar
-                    jQuery('.openlmis-toolbar')
-                        .each(function() {
-                            var div = jQuery(this);
-                            containerOffset += div.outerHeight();
-                        });
-
-                    if (containerOffset < windowHeight) {
-                        xScrollbar[0].style.setProperty('--bottom-offset', 0);
-                        return;
-                    }
+            var lastScroll;
+            function scroll() {
+                if (!active.length) {
+                    return;
+                }
+                if (scrollbar.scrollLeft() === lastScroll) {
+                    return;
+                }
+                lastScroll = scrollbar.scrollLeft();
+                active.scrollLeft(lastScroll);
+            }
 
-                    xScrollbar[0].style.setProperty('--bottom-offset', (containerOffset - windowHeight));
+            function update() {
+                if (!active.length) {
+                    return;
+                }
+                if (active.scrollLeft() === lastScroll) {
+                    return;
                 }
+                lastScroll = active.scrollLeft();
+                scrollbar.scrollLeft(lastScroll);
             }
+
+            scrollbar.scroll(throttled);
+
+            onscroll();
+            $(window).scroll(onscroll);
+            $(window).resize(onscroll);
         }
     }
-
 })();