Adding series and scrolling to quickSwitch

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

@@ -1,2 +1,3 @@
 import './scrollArea.html';
 import './scrollArea.js';
+import './scrollArea.styl';

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

@@ -3,5 +3,7 @@
         <div class="scrollable {{this.scrollableClass}} {{#if instance.config.scrollX}}scroll-x{{/if}} {{#if instance.config.scrollY}}scroll-y{{/if}}">
             {{>Template.contentBlock}}
         </div>
+        <div class="scroll-nav scroll-nav-up"></div>
+        <div class="scroll-nav scroll-nav-down"></div>
     </div>
 </template>

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');
+    },
 });

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

@@ -0,0 +1,78 @@
+@require '{ohif:design}/app'
+
+$scrollNavSize = 24px
+
+.scroll-area
+  overflow: hidden
+  position: relative
+
+  .scrollable
+    max-height: inherit
+    overflow: hidden
+
+    &.scroll-x
+      overflow-x: scroll
+
+    &.scroll-y
+      overflow-y: scroll
+
+  &.fit
+    height: 100%
+    width: 100%
+
+    .scrollable
+      bottom: 0
+      left: 0
+      max-height: none
+      position: absolute
+      right: 0
+      top: 0
+
+  .scroll-nav
+    background-color: rgba(0, 0, 0, 0.75)
+    box-shadow(0 0 10px 10px rgba(0, 0, 0, 0.75))
+    cursor: pointer
+    height: $scrollNavSize
+    left: 10px
+    opacity: 0
+    position: absolute
+    right: 10px
+    transition(transform 0.3s ease\, opacity 0.3s ease\, background-color 0.3s ease\, box-shadow 0.3s ease)
+
+    &:after
+      theme('color', '$activeColor')
+      display: block
+      font-family: FontAwesome
+      font-size: 20px
+      text-align: center
+      transition(color 0.3s ease)
+
+    &:hover
+      background-color: rgba(0, 0, 0, 0.9)
+      box-shadow(0 0 10px 10px rgba(0, 0, 0, 0.9))
+
+      &:after
+        theme('color', '$hoverColor')
+
+  .scroll-nav-up
+    border-bottom-left-radius($scrollNavSize / 2)
+    border-bottom-right-radius($scrollNavSize / 2)
+    top: 0
+    transform(translateY(- $scrollNavSize))
+
+    &:after
+      content: '\f102'
+
+  .scroll-nav-down
+    border-top-left-radius($scrollNavSize / 2)
+    border-top-right-radius($scrollNavSize / 2)
+    bottom: 0
+    transform(translateY($scrollNavSize))
+
+    &:after
+      content: '\f103'
+
+  &.can-scroll-up .scroll-nav-up,
+  &.can-scroll-down .scroll-nav-down
+    opacity: 1
+    transform(translateY(0))