Improving new study browser and moving studies services to ohif:studies

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

@@ -3,3 +3,4 @@ import './bootstrap';
 import './playground/playground.html';
 import './playground/playground.styl';
 import './playground/playground.js';
+import './scrollArea';

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

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

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

@@ -0,0 +1,7 @@
+<template name="scrollArea">
+    <div class="scroll-area {{this.class}}">
+        <div class="scrollable {{#if instance.config.scrollX}}scroll-x{{/if}} {{#if instance.config.scrollY}}scroll-y{{/if}}">
+            {{>Template.contentBlock}}
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,29 @@
+import { Template } from 'meteor/templating';
+import { _ } from 'meteor/underscore';
+
+Template.scrollArea.onCreated(() => {
+    const instance = Template.instance();
+    const { data } = instance;
+    const defaultConfig = {
+        hideScrollbar: true,
+        scrollY: true,
+        scrollX: false
+    };
+
+    instance.config = _.defaults(data || {}, defaultConfig);
+});
+
+Template.scrollArea.onRendered(() => {
+    const instance = Template.instance();
+    const { config } = instance;
+    if (config.hideScrollbar) {
+        const $scrollable = instance.$('.scrollable').first();
+        const scrollable = $scrollable[0];
+        const x = config.scrollX ? 1 : 0;
+        const y = config.scrollY ? 1 : 0;
+        $scrollable.css({
+            right: 0 - (scrollable.offsetWidth - scrollable.clientWidth) * y,
+            bottom: 0 - (scrollable.offsetHeight - scrollable.clientHeight) * x
+        });
+    }
+});