Using popover component to confirm hotkeys replacement

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

@@ -94,16 +94,18 @@ OHIF.mixins.formItem = new OHIF.Mixin({
             // Toggle the tooltip over the component
             component.toggleTooltip = (isShow, message) => {
                 if (isShow && message) {
-                    // Stop here if the tooltip is already created
+                    const tooltipId = component.$wrapper.attr('aria-describedby');
-                    if (component.$wrapper.next('.tooltip').length) {
+                    const $tooltip = $(document.getElementById(tooltipId));
-                        return;
+                    if ($tooltip.length) {
+                        // Change the message if the tooltip is already created
+                        $tooltip.find('.tooltip-inner').text(message);
+                    } else {
+                        // Destroy the tooltip if already created, creating it again
+                        component.$wrapper.tooltip('destroy').tooltip({
+                            trigger: 'manual',
+                            title: message
+                        }).tooltip('show');
                     }
-
-                    // Destroy the tooltip if created and create again
-                    component.$wrapper.tooltip('destroy').tooltip({
-                        trigger: 'manual',
-                        title: message
-                    }).tooltip('show');
                 } else {
                     // Destroy the tooltip
                     component.$wrapper.tooltip('destroy');

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

@@ -66,9 +66,7 @@ OHIF.ui.showPopover = (templateName, popoverData, options={}) => {
         const view = Blaze.renderWithData(template, templateData, $popoverContent[0]);
         $element.one('hidden.bs.popover', () => {
             Blaze.remove(view);
-            if (popoverOptions.trigger !== 'manual') {
+            $element.popover('destroy');
-                $element.popover('destroy');
-            }
         });
 
         promise.then(dismissPopover).catch(dismissPopover);

Packages/ohif-hotkeys/client/components/confirmReplacementPopover.html

@@ -1,3 +1,6 @@
 <template name="hotkeysConfirmReplacementPopover">
-
+    {{#popoverForm (extend this confirmLabel='Yes' cancelLabel='No' confirmClass='btn-danger')}}
+        <p><b>{{this.conflictedFunctionName}}</b> is already using the <b>{{this.hotkeyCombination}}</b> shortcut.</p>
+        <p>Do you want to use the shortcut to the <b>{{this.newFunctionName}}</b> function instead?</p>
+    {{/popoverForm}}
 </template>

Packages/ohif-hotkeys/client/components/form.html

@@ -3,10 +3,10 @@
         <div class="form-content">
             {{#let lists=getHotkeyInputInformationLists}}
                 <div class="row">
-                    <div class="col-lg-6">
+                    <div class="col-lg-6 hotkeys-left">
                         {{>hotkeysFormTable inputs=lists.left}}
                     </div>
-                    <div class="col-lg-6">
+                    <div class="col-lg-6 hotkeys-right">
                         {{>hotkeysFormTable inputs=lists.right}}
                     </div>
                 </div>

Packages/ohif-hotkeys/client/components/form.js

@@ -61,6 +61,20 @@ Template.hotkeysForm.onCreated(() => {
         return keysPressedArray;
     };
 
+    instance.getConflictingCommand = (currentCommand, currentCombination) => {
+        const form = instance.$('form').first().data('component');
+        const hotkeys = form.value();
+
+        let conflict = '';
+        _.each(hotkeys, (combination, command) => {
+            if (combination && combination === currentCombination && command !== currentCommand) {
+                conflict = command;
+            }
+        });
+
+        return conflict;
+    };
+
     instance.disallowedCombinations = {
         '': [],
         ALT: ['SPACE'],
@@ -74,7 +88,7 @@ Template.hotkeysForm.events({
     'keydown .hotkey'(event, instance) {
         if (instance.allowedKeys.indexOf(event.keyCode) > -1) {
             instance.updateInputText(event, true);
-            $(event.currentTarget).blur();
+            $(event.currentTarget).trigger('hotkeyChange');
         } else {
             instance.updateInputText(event);
         }
@@ -82,25 +96,82 @@ Template.hotkeysForm.events({
         event.preventDefault();
     },
 
-    'blur .hotkey'(event, instance) {
+    'hotkeyChange .hotkey'(event, instance, data={}) {
         const $target = $(event.currentTarget);
         const combination = $target.val();
         const keys = combination.split('+');
         const lastKey = keys.pop();
         const modifierCombination = keys.join('+');
         const isModifier = ['CTRL', 'ALT', 'SHIFT'].indexOf(lastKey) > -1;
-        // Clean the input if left with only a modifier key or browser specific command
+
+        const formItem = $target.data('component');
+        const conflictedCommand = instance.getConflictingCommand(this.key, combination);
         if (isModifier) {
-            $target.val('');
+            // Clean the input if left with only a modifier key or browser specific command
+            formItem.error(`It's not possible to define only modifier keys (CTRL, ALT and SHIFT) as a shortcut`);
+            $target.val('').focus();
         } else if (instance.disallowedCombinations[modifierCombination].indexOf(lastKey) > -1) {
-            $target.val('');
+            // Clean the input and show error if combination is not allowed
-            // TODO: show warning
+            formItem.error(`The "${combination}" shortcut combination is not allowed`);
-            $target.focus();
+            $target.val('').focus();
+        } else if (conflictedCommand) {
+            if (data.blurTrigger) return;
+
+            // Remove the error message
+            formItem.error(false);
+            formItem.toggleTooltip(false);
+
+            const placement = $target.closest('.hotkeys-left').length ? 'right' : 'left';
+            const commandsContext = OHIF.commands.getContext(instance.data.contextName);
+            const popoverData = {
+                conflictedFunctionName: commandsContext[conflictedCommand].name,
+                newFunctionName: commandsContext[this.key].name,
+                hotkeyCombination: combination,
+            };
+
+            const popoverOptions = {
+                event,
+                placement
+            };
+
+            const conflictedFormItem = instance.$('form').first().data('component').item(conflictedCommand);
+            formItem.state('error', true);
+            conflictedFormItem.state('error', true);
+
+            const cleanup = () => {
+                instance.popoverVisible = false;
+                formItem.state('error', false);
+                conflictedFormItem.state('error', false);
+            };
+
+            const popoverTemplate = 'hotkeysConfirmReplacementPopover';
+            instance.popoverVisible = true;
+            OHIF.ui.showPopover(popoverTemplate, popoverData, popoverOptions).then(() => {
+                cleanup();
+                formItem.value(combination);
+                conflictedFormItem.value('');
+                $target.blur();
+            }).catch(() => {
+                cleanup();
+                $target.val('').focus();
+            });
+        } else {
+            // Remove the error message and blur the component if everything is fine
+            formItem.error(false);
+            if (!data.blurTrigger) {
+                $target.blur();
+            }
         }
     },
 
+    'blur .hotkey'(event, instance, data={}) {
+        $(event.currentTarget).trigger('hotkeyChange', { blurTrigger: true });
+    },
+
     'keyup .hotkey'(event, instance) {
-        instance.updateInputText(event);
+        if (!instance.popoverVisible) {
+            instance.updateInputText(event);
+        }
     }
 });