Adding series and scrolling to quickSwitch

Packages/ohif-core/client/components/scrollArea/scrollArea.js

@@ -7,7 +7,8 @@ Template.scrollArea.onCreated(() => {
     const defaultConfig = {
         hideScrollbar: true,
         scrollY: true,
-        scrollX: false
+        scrollX: false,
+        scrollStep: 100
     };
 
     instance.config = _.defaults(data || {}, defaultConfig);
@@ -26,4 +27,55 @@ Template.scrollArea.onRendered(() => {
             'margin-bottom': 0 - (scrollable.offsetHeight - scrollable.clientHeight) * x
         });
     }
+
+    instance.$scrollable = instance.$('.scrollable').first();
+    instance.scrollHandler = _.throttle(event => {
+        const $scrollable = event ? $(event.currentTarget) : instance.$scrollable;
+        const $scrollArea = $scrollable.closest('.scroll-area');
+        if ($scrollable[0] !== instance.$('.scrollable')[0]) return;
+        $scrollArea.removeClass('can-scroll-up can-scroll-down');
+        const height = $scrollable.outerHeight();
+        const scrollTop = $scrollable.scrollTop();
+        const { scrollHeight } = $scrollable[0];
+
+        // Stop here if unable to scroll
+        if (scrollHeight <= height) return;
+
+        // Check if can scroll up
+        if (scrollTop) {
+            $scrollArea.addClass('can-scroll-up');
+        }
+
+        // Check if can scroll down
+        if (scrollTop + height < scrollHeight) {
+            $scrollArea.addClass('can-scroll-down');
+        }
+    }, 300);
+
+    instance.scrollHandler();
+});
+
+Template.scrollArea.events({
+    'scroll .scrollable, mouseenter .scrollable, transitionend .scrollable'(event, instance) {
+        instance.scrollHandler(event);
+    },
+
+    'click .scroll-nav-down'(event, instance) {
+        const $scrollable = $(event.currentTarget).siblings('.scrollable');
+        const height = $scrollable.outerHeight();
+        const currentTop = $scrollable.scrollTop();
+        const { scrollHeight } = $scrollable[0];
+        const limit = scrollHeight - height;
+        let scrollTop = currentTop + instance.data.scrollStep;
+        scrollTop = scrollTop > limit ? limit : scrollTop;
+        $scrollable.stop().animate({ scrollTop }, 150, 'swing');
+    },
+
+    'click .scroll-nav-up'(event, instance) {
+        const $scrollable = $(event.currentTarget).siblings('.scrollable');
+        const currentTop = $scrollable.scrollTop();
+        let scrollTop = currentTop - instance.data.scrollStep;
+        scrollTop = scrollTop < 0 ? 0 : scrollTop;
+        $scrollable.stop().animate({ scrollTop }, 150, 'swing');
+    },
 });