escapeActions.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  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. multipleActions: 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. return false;
  58. } else {
  59. return this._execute({
  60. maxLabel,
  61. multipleActions: false,
  62. isClick: true,
  63. clickTarget: target,
  64. });
  65. }
  66. },
  67. preventNextClick() {
  68. this._nextclickPrevented = true;
  69. },
  70. _stopClick(action, clickTarget) {
  71. if (!_.isString(action.noClickEscapeOn))
  72. return false;
  73. else
  74. return $(clickTarget).closest(action.noClickEscapeOn).length > 0;
  75. },
  76. _execute(options) {
  77. const maxLabel = options.maxLabel;
  78. const multipleActions = options.multipleActions;
  79. const isClick = Boolean(options.isClick);
  80. const clickTarget = options.clickTarget;
  81. let executedAtLeastOne = false;
  82. let maxPriority;
  83. if (!maxLabel)
  84. maxPriority = Infinity;
  85. else
  86. maxPriority = this.hierarchy.indexOf(maxLabel);
  87. for (const currentAction of this._actions) {
  88. if (currentAction.priority > maxPriority)
  89. return executedAtLeastOne;
  90. if (isClick && this._stopClick(currentAction, clickTarget))
  91. return executedAtLeastOne;
  92. const isEnabled = currentAction.enabledOnClick || !isClick;
  93. if (isEnabled && currentAction.condition()) {
  94. currentAction.action();
  95. executedAtLeastOne = true;
  96. if (!multipleActions)
  97. return executedAtLeastOne;
  98. }
  99. }
  100. return executedAtLeastOne;
  101. },
  102. };
  103. // Pressing escape to execute one escape action. We use `bindGloabal` vecause
  104. // the shortcut sould work on textarea and inputs as well.
  105. Mousetrap.bindGlobal('esc', () => {
  106. EscapeActions.executeLowest();
  107. });
  108. // On a left click on the document, we try to exectute one escape action (eg,
  109. // close the popup). We don't execute any action if the user has clicked on a
  110. // link or a button.
  111. $(document).on('click', (evt) => {
  112. if (evt.button === 0 &&
  113. $(evt.target).closest('a,button,.is-editable').length === 0) {
  114. EscapeActions.clickExecute(evt.target, 'multiselection');
  115. }
  116. });