othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Using popover component to confirm hotkeys replacement

Browse Source
This commit is contained in:
Bruno Alves de Faria 2017-05-04 18:08:22 -03:00 committed by Erik Ziegler
parent 661f5b1e4c
commit ecef6d5af2
5 changed files with 97 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
if (component.$wrapper.next('.tooltip').length) {
return;
const tooltipId = component.$wrapper.attr('aria-describedby');
const $tooltip = $(document.getElementById(tooltipId));
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');

4
Packages/ohif-core/client/ui/popover/display.js
View File

@ -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);

5
Packages/ohif-hotkeys/client/components/confirmReplacementPopover.html
View File

@ -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>

4
Packages/ohif-hotkeys/client/components/form.html
View File

@ -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>

87
Packages/ohif-hotkeys/client/components/form.js
View File

@ -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('');
// TODO: show warning
$target.focus();
// Clean the input and show error if combination is not allowed
formItem.error(`The "${combination}" shortcut combination is not allowed`);
$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);
}
}
});