PWV-1: Refactoring ohif:studylist package

Packages/ohif-core/client/components/base/mixins/button.js

@@ -12,7 +12,7 @@ OHIF.mixins.button = new OHIF.Mixin({
             const component = instance.component;
 
             // Set the element to be controlled
-            component.$element = instance.$('button:first');
+            component.$element = instance.$('button').first();
         }
     }
 });

Packages/ohif-core/client/components/base/mixins/form.js

@@ -54,7 +54,7 @@ OHIF.mixins.form = new OHIF.Mixin({
             const component = instance.component;
 
             // Set the component main and style elements
-            component.$style = component.$element = instance.$('form:first');
+            component.$style = component.$element = instance.$('form').first();
 
             // Block page redirecting on submit
             component.$element[0].onsubmit = () => false;
@@ -66,7 +66,7 @@ OHIF.mixins.form = new OHIF.Mixin({
                 const targetKey = $(event.currentTarget).attr('data-target');
 
                 // Focus the first input inside the element with error state
-                instance.$(`.state-error[data-key="${targetKey}"] :input:first`).focus();
+                instance.$(`.state-error[data-key="${targetKey}"]`).find(':input:first').focus();
             }
         },
 

Packages/ohif-core/client/components/base/mixins/group.js

@@ -147,7 +147,7 @@ OHIF.mixins.group = new OHIF.Mixin({
             const component = instance.component;
 
             // Set the element to be controlled
-            component.$element = instance.$('.component-group:first');
+            component.$element = instance.$('.component-group').first();
         }
     }
 });

Packages/ohif-core/client/components/base/mixins/input.js

@@ -12,7 +12,7 @@ OHIF.mixins.input = new OHIF.Mixin({
             const component = instance.component;
 
             // Set the element to be controlled
-            component.$element = instance.$('input:first');
+            component.$element = instance.$('input').first();
         }
     }
 });

Packages/ohif-core/client/components/base/mixins/link.js

@@ -12,7 +12,7 @@ OHIF.mixins.link = new OHIF.Mixin({
             const component = instance.component;
 
             // Set the element to be controlled
-            component.$element = instance.$('a:first');
+            component.$element = instance.$('a').first();
         },
 
         events: {

Packages/ohif-core/client/components/base/mixins/select.js

@@ -12,7 +12,7 @@ OHIF.mixins.select = new OHIF.Mixin({
             const component = instance.component;
 
             // Set the element to be controlled
-            component.$element = instance.$('select:first');
+            component.$element = instance.$('select').first();
         }
     }
 });

Packages/ohif-core/client/components/bootstrap/dropdown/backdrop.html

@@ -0,0 +1,3 @@
+<template name="dropdownBackdrop">
+    <div class="dropdown-backdrop"></div>
+</template>

Packages/ohif-core/client/components/bootstrap/dropdown/form.html

@@ -0,0 +1,8 @@
+<template name="dropdownForm">
+    {{#form class='dropdown' api=this.api hideValidationBox=true}}
+        {{>dropdownBackdrop}}
+        <ul class="dropdown-menu">
+            {{>UI.contentBlock}}
+        </ul>
+    {{/form}}
+</template>

Packages/ohif-core/client/components/bootstrap/dropdown/form.js

@@ -0,0 +1,25 @@
+import { Template } from 'meteor/templating';
+import { Blaze } from 'meteor/blaze';
+import { _ } from 'meteor/underscore';
+
+Template.dropdownForm.onRendered(() => {
+    const instance = Template.instance();
+
+    // Show the dropdown
+    instance.$('.dropdown').addClass('open');
+
+    // Destroy the Blaze created view (either created with template calls or with renderWithData)
+    instance.destroyView = () => {
+        if (_.isFunction(instance.data.destroyView)) {
+            instance.data.destroyView();
+        } else {
+            Blaze.remove(instance.view);
+        }
+    };
+});
+
+Template.dropdownForm.events({
+    'click .dropdown'(event, instance) {
+        instance.destroyView();
+    }
+});

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

@@ -3,6 +3,10 @@ import './dialog/form.js';
 import './dialog/login.html';
 import './dialog/login.js';
 
+import './dropdown/backdrop.html';
+import './dropdown/form.html';
+import './dropdown/form.js';
+
 import './form/button.html';
 import './form/form.html';
 import './form/group.html';

Packages/ohif-core/client/ui/bounded/bounded.js

@@ -36,10 +36,15 @@ class Bounded {
     options(options={}) {
         // Process the given options and store it in the instance
         const { boundingElement, allowResizing } = options;
-        this.boundingElement = boundingElement || window;
+        this.boundingElement = boundingElement;
         this.$boundingElement = $(this.boundingElement);
         this.allowResizing = allowResizing;
 
+        // Check for fixed positioning
+        if (this.$element.css('position') === 'fixed') {
+            this.boundingElement = window;
+        }
+
         // Destroy and initialize again the instance
         this.destroy();
         this.init();
@@ -55,6 +60,9 @@ class Bounded {
 
         // Add the bounded class to the element
         this.$element.addClass('bounded');
+
+        // Trigger the bounding check for the first timepoint
+        setTimeout(() => this.$element.trigger('spatialChanged'));
     }
 
     // Destroy this instance, returning the element to its previous state
@@ -70,12 +78,26 @@ class Bounded {
         // Create the result object
         const result = {};
 
+        // Check if the element is the window
+        if (element === window) {
+            const $window = $(window);
+            const width = $window.outerWidth();
+            const height = $window.outerHeight();
+            return {
+                width,
+                height,
+                x0: 0,
+                y0: 0,
+                x1: width,
+                y1: height
+            };
+        }
+
         // Get the jQuery object for the element
-        const el = element === window ? window.document.body : element;
-        const $element = $(el);
+        const $element = $(element);
 
         // Get the element style
-        const style = el.style;
+        const style = element.style;
 
         // Get the integer numbers for element's width
         if (style.width && style.width.indexOf('px') > -1) {
@@ -91,10 +113,13 @@ class Bounded {
             result.height = $element.outerHeight();
         }
 
+        // Get the position property based on the element position CSS attribute
+        const positionProperty = $element.css('position') === 'fixed' ? 'position' : 'offset';
+
         // Get the element's start position
-        const offset = $element.offset();
-        result.x0 = offset.left;
-        result.y0 = offset.top;
+        const position = $element[positionProperty]();
+        result.x0 = position.left;
+        result.y0 = position.top;
 
         // Get the element's end position
         result.x1 = result.x0 + result.width;

Packages/ohif-core/client/ui/dropdown/form.js

@@ -0,0 +1,29 @@
+import { Template } from 'meteor/templating';
+import { Blaze } from 'meteor/blaze';
+import { _ } from 'meteor/underscore';
+import { OHIF } from 'meteor/ohif:core';
+
+OHIF.ui.showFormDropdown = (templateName, dropdownData) => {
+    // Check if the given template exists
+    const template = Template[templateName];
+    if (!template) {
+        throw {
+            name: 'TEMPLATE_NOT_FOUND',
+            message: `Template ${templateName} not found.`
+        };
+    }
+
+    // Prepare the method to destroy the view
+    let view;
+    const destroyView = () => Blaze.remove(view);
+    const templateData = _.extend({}, dropdownData, {
+        destroyView
+    });
+
+    // Render the dialog with the given template and data
+    view = Blaze.renderWithData(template, templateData, document.body);
+
+    // Return the dropdown element to enable position manipulation
+    const dropdown = view.firstNode();
+    return dropdown;
+};

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

@@ -1,4 +1,5 @@
 import './bounded/bounded.js';
 import './dialog/form.js';
 import './draggable/draggable.js';
+import './dropdown/form.js';
 import './resizable/resizable.js';

Packages/ohif-core/main.js

@@ -7,8 +7,7 @@ import { Meteor } from 'meteor/meteor';
 const OHIF = {
     log: {},
     ui: {},
-    viewer: {},
-    measurements: {}
+    viewer: {}
 };
 
 // Expose the OHIF object to the client if it is on development mode