Creating header package and dropdown component

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

@@ -12,6 +12,7 @@ import './mixins/action.js';
 import './mixins/button.js';
 import './mixins/checkbox.js';
 import './mixins/component.js';
+import './mixins/dropdown.js';
 import './mixins/form.js';
 import './mixins/formItem.js';
 import './mixins/group.js';

Packages/ohif-core/client/components/base/mixin.js

@@ -76,6 +76,9 @@ class Mixin {
     static initData(data) {
         // Split the mixins by space
         const mixinsArray = data.mixins.split(' ');
+
+        // Control and ignore the mixins that have already been applied
+        const appliedOnData = [];
         _.each(mixinsArray, mixinName => {
             // Ignore blank strings
             if (!mixinName) {
@@ -86,7 +89,7 @@ class Mixin {
             const mixin = Mixin.getMixin(mixinName);
 
             // Initialize the data manipulation composition
-            mixin.init(null, data, [], ['onData']);
+            mixin.init(null, data, appliedOnData, ['onData']);
         });
     }
 
@@ -94,6 +97,10 @@ class Mixin {
     static initAll(template, data) {
         // Split the mixins by space
         const mixinsArray = data.mixins.split(' ');
+
+        // Control and ignore the mixins that have already been applied
+        const appliedCommon = [];
+        const appliedOnMixins = [];
         _.each(mixinsArray, mixinName => {
             // Ignore blank strings
             if (!mixinName) {
@@ -104,10 +111,10 @@ class Mixin {
             const mixin = Mixin.getMixin(mixinName);
 
             // Initialize blaze default compositions
-            mixin.init(template, data, [], ['onCreated', 'onRendered', 'onDestroyed', 'events', 'helpers']);
+            mixin.init(template, data, appliedCommon, ['onCreated', 'onRendered', 'onDestroyed', 'events', 'helpers']);
 
             // Execute some behaviors after all mixins are applied
-            mixin.init(template, data, [], ['onMixins']);
+            mixin.init(template, data, appliedOnMixins, ['onMixins']);
         });
     }
 

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

@@ -1,5 +1,5 @@
-import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
+import { OHIF } from 'meteor/ohif:core';
 
 /*
  * action: controls an element that will trigger some form API's method
@@ -11,24 +11,32 @@ OHIF.mixins.action = new OHIF.Mixin({
             const instance = Template.instance();
             const component = instance.component;
 
+            // Add the form-action identification class
             component.$element.addClass('form-action');
         },
 
         events: {
             'click .form-action'(event, instance) {
+                event.preventDefault();
                 const component = instance.component;
 
-                // Extract the action and the params
-                const { action, params } = instance.data;
+                // Extract action, params and disabled state
+                const { action, params, disabled } = instance.data;
+
+                // Stop here if the component is disabled
+                if (disabled) return;
 
                 // Get the current component's API
                 const api = component.getApi();
 
-                // Stop here if no API or action was defined
-                if (!api || !action || typeof api[action] !== 'function') {
-                    return;
+                // Stop here calling the action if it's a function
+                if (typeof action === 'function') {
+                    return action.call(this, params);
                 }
 
+                // Stop here if no API or action was defined
+                if (!api || !action || typeof api[action] !== 'function') return;
+
                 // Call the defined action function
                 api[action].call(this, params);
             }

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

@@ -0,0 +1,81 @@
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import { Blaze } from 'meteor/blaze';
+import { OHIF } from 'meteor/ohif:core';
+
+/*
+ * dropdown: controls a dropdown
+ */
+OHIF.mixins.dropdown = new OHIF.Mixin({
+    dependencies: 'form',
+    composition: {
+        onRendered() {
+            const instance = Template.instance();
+            const { event, centered } = instance.data.options;
+
+            // Destroy the Blaze created view (either created with template calls or with renderWithData)
+            instance.destroyView = () => {
+                if (typeof instance.data.destroyView === 'function') {
+                    instance.data.destroyView();
+                } else {
+                    Blaze.remove(instance.view);
+                }
+            };
+
+            // Get the dropdown element to enable position manipulation
+            const $dropdown = instance.$('.dropdown');
+            const dropdown = $dropdown[0];
+            const $dropdownMenu = $dropdown.children('.dropdown-menu');
+
+            dropdown.oncontextmenu = () => false;
+
+            const cssBefore = {
+                'z-index': 10000
+            };
+            if (event) {
+                cssBefore.position = 'fixed';
+                $dropdownMenu.bounded();
+            }
+
+            $dropdownMenu.css(cssBefore).focus();
+
+            // Postpone visibility change to allow CSS transitions
+            Meteor.defer(() => {
+                // Show the dropdown
+                $dropdown.addClass('open');
+
+                // Change the dropdown position if mouse event was given
+                if (event) {
+                    const position = {
+                        left: event.clientX,
+                        top: event.clientY
+                    };
+
+                    if (centered) {
+                        position.left -= $dropdownMenu.outerWidth() / 2;
+                        position.top -= $dropdownMenu.outerHeight() / 2;
+                    }
+
+                    $dropdownMenu.css(position).trigger('spatialChanged');
+                }
+            });
+        },
+
+        events: {
+            'click .form-action.disabled'(event, instance) {
+                event.preventDefault();
+                event.stopPropagation();
+            },
+
+            'click .dropdown'(event, instance) {
+                const $target = $(event.target);
+                if ($target.hasClass('disabled')) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                } else {
+                    instance.destroyView();
+                }
+            }
+        }
+    }
+});

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

@@ -1,5 +1,5 @@
-import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
+import { OHIF } from 'meteor/ohif:core';
 
 /*
  * link: controls a link