Creating popover component

Packages/ohif-core/client/ui/popover/display.js

@@ -0,0 +1,82 @@
+import { Template } from 'meteor/templating';
+import { Blaze } from 'meteor/blaze';
+import { OHIF } from 'meteor/ohif:core';
+
+OHIF.ui.showPopover = (templateName, popoverData, options={}) => {
+    // Check if the given template exists
+    const template = Template[templateName];
+    if (!template) {
+        throw {
+            name: 'TEMPLATE_NOT_FOUND',
+            message: `Template ${templateName} not found.`
+        };
+    }
+
+    let promise;
+    let templateData;
+    if (popoverData && popoverData.promise instanceof Promise) {
+        // Use the given promise to control the modal
+        promise = popoverData.promise;
+        templateData = popoverData;
+    } else {
+        // Create a new promise to control the modal and store its resolve and reject callbacks
+        let promiseResolve;
+        let promiseReject;
+        promise = new Promise((resolve, reject) => {
+            promiseResolve = resolve;
+            promiseReject = reject;
+        });
+
+        // Render the dialog with the given template passing the promise object and callbacks
+        templateData = Object.assign({}, popoverData, {
+            promise,
+            promiseResolve,
+            promiseReject
+        });
+    }
+
+    const { element, event } = options;
+    const $element = $(element || event.currentTarget);
+
+    const defaults = {
+        content: '',
+        html: true,
+        trigger: 'manual',
+        placement: 'auto',
+        delay: {
+            show: 300,
+            hide: 300
+        }
+    };
+
+    const popoverOptions = Object.assign({} , defaults, options);
+    popoverOptions.content = Blaze.toHTMLWithData(template, popoverData);
+
+    $element.popover(popoverOptions);
+
+    $element.one('shown.bs.popover', function(event) {
+        const popoverId = $element.attr('aria-describedby');
+        const popover = document.getElementById(popoverId);
+        const $popover = $(popover);
+        const $popoverContent = $popover.find('.popover-content');
+        const dismissPopover = () => $element.popover('hide');
+
+        $popoverContent.html('');
+
+        const view = Blaze.renderWithData(template, templateData, $popoverContent[0]);
+        $element.one('hidden.bs.popover', () => {
+            Blaze.remove(view);
+            if (popoverOptions.trigger !== 'manual') {
+                $element.popover('destroy');
+            }
+        });
+
+        promise.then(dismissPopover).catch(dismissPopover);
+    });
+
+    if (popoverOptions.trigger === 'manual') {
+        $element.popover('show');
+    }
+
+    return promise;
+};