escapeActions.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. // Pressing `Escape` should close the last opened “element” and only the last
  2. // one. Components can register themselves using a label a condition, and an
  3. // action. This is used by Popup or inlinedForm for instance. When we press
  4. // escape we execute the action which have a valid condition and his the highest
  5. // in the label hierarchy.
  6. EscapeActions = {
  7. _nextclickPrevented: false,
  8. _actions: [],
  9. // Executed in order
  10. hierarchy: [
  11. 'textcomplete',
  12. 'popup-back',
  13. 'popup-close',
  14. 'modalWindow',
  15. 'inlinedForm',
  16. 'detailsPane',
  17. 'multiselection',
  18. 'sidebarView',
  19. ],
  20. register(label, action, condition = () => true, options = {}) {
  21. const priority = this.hierarchy.indexOf(label);
  22. if (priority === -1) {
  23. throw Error('You must define the label in the EscapeActions hierarchy');
  24. }
  25. let enabledOnClick = options.enabledOnClick;
  26. if (_.isUndefined(enabledOnClick)) {
  27. enabledOnClick = true;
  28. }
  29. const noClickEscapeOn = options.noClickEscapeOn;
  30. this._actions = _.sortBy([...this._actions, {
  31. priority,
  32. condition,
  33. action,
  34. noClickEscapeOn,
  35. enabledOnClick,
  36. }], (action) => action.priority);
  37. },
  38. executeLowest() {
  39. return this._execute({
  40. multipleAction: false,
  41. });
  42. },
  43. executeAll() {
  44. return this._execute({
  45. multipleActions: true,
  46. });
  47. },
  48. executeUpTo(maxLabel) {
  49. return this._execute({
  50. maxLabel,
  51. multipleActions: true,
  52. });
  53. },
  54. clickExecute(target, maxLabel) {
  55. if (this._nextclickPrevented) {
  56. this._nextclickPrevented = false;
  57. } else {
  58. return this._execute({
  59. maxLabel,
  60. multipleActions: false,
  61. isClick: true,
  62. clickTarget: target,
  63. });
  64. }
  65. },
  66. preventNextClick() {
  67. this._nextclickPrevented = true;
  68. },
  69. _stopClick(action, clickTarget) {
  70. if (!_.isString(action.noClickEscapeOn))
  71. return false;
  72. else
  73. return $(clickTarget).closest(action.noClickEscapeOn).length > 0;
  74. },
  75. _execute(options) {
  76. const maxLabel = options.maxLabel;
  77. const multipleActions = options.multipleActions;
  78. const isClick = Boolean(options.isClick);
  79. const clickTarget = options.clickTarget;
  80. let executedAtLeastOne = false;
  81. let maxPriority;
  82. if (!maxLabel)
  83. maxPriority = Infinity;
  84. else
  85. maxPriority = this.hierarchy.indexOf(maxLabel);
  86. for (const currentAction of this._actions) {
  87. if (currentAction.priority > maxPriority)
  88. return executedAtLeastOne;
  89. if (isClick && this._stopClick(currentAction, clickTarget))
  90. return executedAtLeastOne;
  91. const isEnabled = currentAction.enabledOnClick || !isClick;
  92. if (isEnabled && currentAction.condition()) {
  93. currentAction.action();
  94. executedAtLeastOne = true;
  95. if (!multipleActions)
  96. return executedAtLeastOne;
  97. }
  98. }
  99. return executedAtLeastOne;
  100. },
  101. };
  102. // Pressing escape to execute one escape action. We use `bindGloabal` vecause
  103. // the shortcut sould work on textarea and inputs as well.
  104. Mousetrap.bindGlobal('esc', () => {
  105. EscapeActions.executeLowest();
  106. });
  107. // On a left click on the document, we try to exectute one escape action (eg,
  108. // close the popup). We don't execute any action if the user has clicked on a
  109. // link or a button.
  110. $(document).on('click', (evt) => {
  111. if (evt.button === 0 &&
  112. $(evt.target).closest('a,button,.is-editable').length === 0) {
  113. EscapeActions.clickExecute(evt.target, 'multiselection');
  114. }
  115. });