Creating popover component

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

@@ -19,6 +19,7 @@ import './mixins/group.js';
 import './mixins/groupRadio.js';
 import './mixins/input.js';
 import './mixins/link.js';
+import './mixins/popover.js';
 import './mixins/schemaData.js';
 import './mixins/select.js';
 import './mixins/select2.js';

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

@@ -0,0 +1,40 @@
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import { $ } from 'meteor/jquery';
+import { OHIF } from 'meteor/ohif:core';
+
+/*
+ * popover: controls a popover
+ */
+OHIF.mixins.popover = new OHIF.Mixin({
+    dependencies: 'form',
+    composition: {
+        onRendered() {
+            const instance = Template.instance();
+            instance.$form = instance.$('form').first();
+            instance.$form.find(':input:first').focus();
+        },
+
+        events: {
+            'blur form'(event, instance) {
+                Meteor.defer(() => {
+                    const $focus = $(':focus');
+                    if (!$.contains(instance.$form[0], $focus[0])) {
+                        instance.data.promiseReject();
+                    }
+                });
+            },
+
+            'click .btn-cancel'(event, instance) {
+                event.stopPropagation();
+                instance.data.promiseReject();
+            },
+
+            'click .btn-confirm'(event, instance) {
+                event.stopPropagation();
+                const form = instance.$('form').data('component');
+                instance.data.promiseResolve(form.value());
+            }
+        }
+    }
+});

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

@@ -31,3 +31,5 @@ import './input/radio.html';
 import './input/range.html';
 import './input/select.html';
 import './input/text.html';
+
+import './popover/form.html';

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

@@ -0,0 +1,17 @@
+<template name="popoverForm">
+    {{#form (extend this mixins='popover' hideValidationBox=true)}}
+        {{#if this.message}}
+            <p>{{this.message}}</p>
+        {{/if}}
+        {{>UI.contentBlock}}
+        <div class="popover-form-buttons {{#if eq this.placement 'left'}}text-right{{/if}}">
+            {{#button action='cancel'
+                class=(concat 'btn btn-cancel ' (choose this.cancelClass 'btn-secondary'))
+                tagAttributes=(extend this.tagAttributes data-dismiss='modal')
+            }}{{choose this.cancelLabel 'Cancel'}}{{/button}}
+            {{#button action='confirm'
+                class=(concat 'btn btn-confirm ' (choose this.confirmClass 'btn-primary'))
+            }}{{choose this.confirmLabel 'Confirm'}}{{/button}}
+        </div>
+    {{/form}}
+</template>