@ckeditor/ckeditor5-ui 40.0.0 → 40.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (165) hide show
  1. package/LICENSE.md +3 -3
  2. package/lang/translations/pt-br.po +1 -1
  3. package/lang/translations/ug.po +26 -26
  4. package/package.json +3 -3
  5. package/src/arialiveannouncer.d.ts +94 -0
  6. package/src/arialiveannouncer.js +113 -0
  7. package/src/augmentation.d.ts +86 -86
  8. package/src/augmentation.js +5 -5
  9. package/src/autocomplete/autocompleteview.d.ts +81 -81
  10. package/src/autocomplete/autocompleteview.js +153 -146
  11. package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
  12. package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
  13. package/src/bindings/clickoutsidehandler.d.ts +28 -28
  14. package/src/bindings/clickoutsidehandler.js +36 -36
  15. package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
  16. package/src/bindings/csstransitiondisablermixin.js +55 -55
  17. package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
  18. package/src/bindings/injectcsstransitiondisabler.js +71 -71
  19. package/src/bindings/preventdefault.d.ts +33 -33
  20. package/src/bindings/preventdefault.js +34 -34
  21. package/src/bindings/submithandler.d.ts +57 -57
  22. package/src/bindings/submithandler.js +47 -47
  23. package/src/button/button.d.ts +172 -178
  24. package/src/button/button.js +5 -5
  25. package/src/button/buttonlabel.d.ts +34 -34
  26. package/src/button/buttonlabel.js +5 -5
  27. package/src/button/buttonlabelview.d.ts +31 -31
  28. package/src/button/buttonlabelview.js +42 -42
  29. package/src/button/buttonview.d.ts +181 -185
  30. package/src/button/buttonview.js +217 -219
  31. package/src/button/switchbuttonview.d.ts +45 -45
  32. package/src/button/switchbuttonview.js +75 -75
  33. package/src/colorgrid/colorgridview.d.ts +132 -132
  34. package/src/colorgrid/colorgridview.js +124 -124
  35. package/src/colorgrid/colortileview.d.ts +28 -28
  36. package/src/colorgrid/colortileview.js +40 -40
  37. package/src/colorgrid/utils.d.ts +47 -47
  38. package/src/colorgrid/utils.js +84 -84
  39. package/src/colorpicker/colorpickerview.d.ts +137 -137
  40. package/src/colorpicker/colorpickerview.js +270 -270
  41. package/src/colorpicker/utils.d.ts +43 -43
  42. package/src/colorpicker/utils.js +99 -99
  43. package/src/colorselector/colorgridsfragmentview.d.ts +194 -194
  44. package/src/colorselector/colorgridsfragmentview.js +289 -289
  45. package/src/colorselector/colorpickerfragmentview.d.ts +128 -128
  46. package/src/colorselector/colorpickerfragmentview.js +205 -205
  47. package/src/colorselector/colorselectorview.d.ts +242 -242
  48. package/src/colorselector/colorselectorview.js +256 -256
  49. package/src/colorselector/documentcolorcollection.d.ts +70 -70
  50. package/src/colorselector/documentcolorcollection.js +42 -42
  51. package/src/componentfactory.d.ts +81 -81
  52. package/src/componentfactory.js +104 -104
  53. package/src/dropdown/button/dropdownbutton.d.ts +25 -25
  54. package/src/dropdown/button/dropdownbutton.js +5 -5
  55. package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
  56. package/src/dropdown/button/dropdownbuttonview.js +66 -66
  57. package/src/dropdown/button/splitbuttonview.d.ts +161 -161
  58. package/src/dropdown/button/splitbuttonview.js +152 -152
  59. package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
  60. package/src/dropdown/dropdownpanelfocusable.js +5 -5
  61. package/src/dropdown/dropdownpanelview.d.ts +62 -62
  62. package/src/dropdown/dropdownpanelview.js +97 -97
  63. package/src/dropdown/dropdownview.d.ts +315 -315
  64. package/src/dropdown/dropdownview.js +379 -379
  65. package/src/dropdown/utils.d.ts +235 -235
  66. package/src/dropdown/utils.js +463 -458
  67. package/src/editableui/editableuiview.d.ts +72 -72
  68. package/src/editableui/editableuiview.js +112 -112
  69. package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
  70. package/src/editableui/inline/inlineeditableuiview.js +48 -48
  71. package/src/editorui/bodycollection.d.ts +55 -55
  72. package/src/editorui/bodycollection.js +84 -84
  73. package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
  74. package/src/editorui/boxed/boxededitoruiview.js +81 -81
  75. package/src/editorui/editorui.d.ts +288 -282
  76. package/src/editorui/editorui.js +412 -410
  77. package/src/editorui/editoruiview.d.ts +39 -39
  78. package/src/editorui/editoruiview.js +38 -38
  79. package/src/editorui/poweredby.d.ts +71 -71
  80. package/src/editorui/poweredby.js +276 -276
  81. package/src/focuscycler.d.ts +226 -226
  82. package/src/focuscycler.js +245 -245
  83. package/src/formheader/formheaderview.d.ts +59 -59
  84. package/src/formheader/formheaderview.js +69 -69
  85. package/src/highlightedtext/highlightedtextview.d.ts +38 -38
  86. package/src/highlightedtext/highlightedtextview.js +102 -102
  87. package/src/icon/iconview.d.ts +85 -85
  88. package/src/icon/iconview.js +114 -114
  89. package/src/iframe/iframeview.d.ts +50 -50
  90. package/src/iframe/iframeview.js +63 -63
  91. package/src/index.d.ts +73 -73
  92. package/src/index.js +70 -70
  93. package/src/input/inputbase.d.ts +107 -107
  94. package/src/input/inputbase.js +110 -110
  95. package/src/input/inputview.d.ts +36 -36
  96. package/src/input/inputview.js +24 -24
  97. package/src/inputnumber/inputnumberview.d.ts +49 -49
  98. package/src/inputnumber/inputnumberview.js +40 -40
  99. package/src/inputtext/inputtextview.d.ts +18 -18
  100. package/src/inputtext/inputtextview.js +27 -27
  101. package/src/label/labelview.d.ts +36 -36
  102. package/src/label/labelview.js +41 -41
  103. package/src/labeledfield/labeledfieldview.d.ts +187 -187
  104. package/src/labeledfield/labeledfieldview.js +157 -157
  105. package/src/labeledfield/utils.d.ts +123 -123
  106. package/src/labeledfield/utils.js +176 -176
  107. package/src/labeledinput/labeledinputview.d.ts +125 -125
  108. package/src/labeledinput/labeledinputview.js +125 -125
  109. package/src/list/listitemgroupview.d.ts +59 -51
  110. package/src/list/listitemgroupview.js +63 -75
  111. package/src/list/listitemview.d.ts +36 -36
  112. package/src/list/listitemview.js +42 -42
  113. package/src/list/listseparatorview.d.ts +18 -18
  114. package/src/list/listseparatorview.js +28 -28
  115. package/src/list/listview.d.ts +122 -122
  116. package/src/list/listview.js +187 -187
  117. package/src/model.d.ts +22 -22
  118. package/src/model.js +31 -31
  119. package/src/notification/notification.d.ts +211 -211
  120. package/src/notification/notification.js +187 -187
  121. package/src/panel/balloon/balloonpanelview.d.ts +685 -685
  122. package/src/panel/balloon/balloonpanelview.js +1010 -1010
  123. package/src/panel/balloon/contextualballoon.d.ts +299 -299
  124. package/src/panel/balloon/contextualballoon.js +572 -572
  125. package/src/panel/sticky/stickypanelview.d.ts +156 -156
  126. package/src/panel/sticky/stickypanelview.js +234 -234
  127. package/src/search/filteredview.d.ts +31 -31
  128. package/src/search/filteredview.js +5 -5
  129. package/src/search/searchinfoview.d.ts +45 -45
  130. package/src/search/searchinfoview.js +59 -59
  131. package/src/search/searchresultsview.d.ts +54 -54
  132. package/src/search/searchresultsview.js +65 -65
  133. package/src/search/text/searchtextqueryview.d.ts +76 -76
  134. package/src/search/text/searchtextqueryview.js +75 -75
  135. package/src/search/text/searchtextview.d.ts +219 -219
  136. package/src/search/text/searchtextview.js +201 -201
  137. package/src/spinner/spinnerview.d.ts +25 -25
  138. package/src/spinner/spinnerview.js +38 -38
  139. package/src/template.d.ts +942 -942
  140. package/src/template.js +1294 -1294
  141. package/src/textarea/textareaview.d.ts +88 -88
  142. package/src/textarea/textareaview.js +142 -140
  143. package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
  144. package/src/toolbar/balloon/balloontoolbar.js +300 -300
  145. package/src/toolbar/block/blockbuttonview.d.ts +35 -35
  146. package/src/toolbar/block/blockbuttonview.js +41 -41
  147. package/src/toolbar/block/blocktoolbar.d.ts +161 -161
  148. package/src/toolbar/block/blocktoolbar.js +395 -395
  149. package/src/toolbar/normalizetoolbarconfig.d.ts +40 -40
  150. package/src/toolbar/normalizetoolbarconfig.js +52 -51
  151. package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
  152. package/src/toolbar/toolbarlinebreakview.js +28 -28
  153. package/src/toolbar/toolbarseparatorview.d.ts +18 -18
  154. package/src/toolbar/toolbarseparatorview.js +28 -28
  155. package/src/toolbar/toolbarview.d.ts +266 -266
  156. package/src/toolbar/toolbarview.js +719 -719
  157. package/src/tooltipmanager.d.ts +180 -180
  158. package/src/tooltipmanager.js +353 -353
  159. package/src/view.d.ts +422 -422
  160. package/src/view.js +396 -396
  161. package/src/viewcollection.d.ts +139 -139
  162. package/src/viewcollection.js +206 -206
  163. package/theme/components/arialiveannouncer/arialiveannouncer.css +10 -0
  164. package/theme/components/button/button.css +9 -1
  165. package/theme/components/formheader/formheader.css +0 -4
@@ -1,107 +1,107 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
7
- *
8
- * @param options Configuration options.
9
- * @param options.keystrokeHandler Keystroke handler to register navigation with arrow keys.
10
- * @param options.focusTracker A focus tracker for grid elements.
11
- * @param options.gridItems A collection of grid items.
12
- * @param options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
13
- * the number (e.g. for responsive grids).
14
- * @param options.uiLanguageDirection String of ui language direction.
15
- */
16
- export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }) {
17
- const getNumberOfColumns = typeof numberOfColumns === 'number' ? () => numberOfColumns : numberOfColumns;
18
- keystrokeHandler.set('arrowright', getGridItemFocuser((focusedElementIndex, gridItems) => {
19
- return uiLanguageDirection === 'rtl' ?
20
- getLeftElementIndex(focusedElementIndex, gridItems.length) :
21
- getRightElementIndex(focusedElementIndex, gridItems.length);
22
- }));
23
- keystrokeHandler.set('arrowleft', getGridItemFocuser((focusedElementIndex, gridItems) => {
24
- return uiLanguageDirection === 'rtl' ?
25
- getRightElementIndex(focusedElementIndex, gridItems.length) :
26
- getLeftElementIndex(focusedElementIndex, gridItems.length);
27
- }));
28
- keystrokeHandler.set('arrowup', getGridItemFocuser((focusedElementIndex, gridItems) => {
29
- let nextIndex = focusedElementIndex - getNumberOfColumns();
30
- if (nextIndex < 0) {
31
- nextIndex = focusedElementIndex + getNumberOfColumns() * Math.floor(gridItems.length / getNumberOfColumns());
32
- if (nextIndex > gridItems.length - 1) {
33
- nextIndex -= getNumberOfColumns();
34
- }
35
- }
36
- return nextIndex;
37
- }));
38
- keystrokeHandler.set('arrowdown', getGridItemFocuser((focusedElementIndex, gridItems) => {
39
- let nextIndex = focusedElementIndex + getNumberOfColumns();
40
- if (nextIndex > gridItems.length - 1) {
41
- nextIndex = focusedElementIndex % getNumberOfColumns();
42
- }
43
- return nextIndex;
44
- }));
45
- function getGridItemFocuser(getIndexToFocus) {
46
- return (evt) => {
47
- const focusedElement = gridItems.find(item => item.element === focusTracker.focusedElement);
48
- const focusedElementIndex = gridItems.getIndex(focusedElement);
49
- const nextIndexToFocus = getIndexToFocus(focusedElementIndex, gridItems);
50
- gridItems.get(nextIndexToFocus).focus();
51
- evt.stopPropagation();
52
- evt.preventDefault();
53
- };
54
- }
55
- /**
56
- * Function returning the next index.
57
- *
58
- * ```
59
- * before: [ ][x][ ] after: [ ][ ][x]
60
- * index = 1 index = 2
61
- * ```
62
- *
63
- * If current index is last, function returns first index.
64
- *
65
- * ```
66
- * before: [ ][ ][x] after: [x][ ][ ]
67
- * index = 2 index = 0
68
- * ```
69
- *
70
- * @param elementIndex Number of current index.
71
- * @param collectionLength A count of collection items.
72
- */
73
- function getRightElementIndex(elementIndex, collectionLength) {
74
- if (elementIndex === collectionLength - 1) {
75
- return 0;
76
- }
77
- else {
78
- return elementIndex + 1;
79
- }
80
- }
81
- /**
82
- * Function returning the previous index.
83
- *
84
- * ```
85
- * before: [ ][x][ ] after: [x][ ][ ]
86
- * index = 1 index = 0
87
- * ```
88
- *
89
- * If current index is first, function returns last index.
90
- *
91
- * ```
92
- * before: [x][ ][ ] after: [ ][ ][x]
93
- * index = 0 index = 2
94
- * ```
95
- *
96
- * @param elementIndex Number of current index.
97
- * @param collectionLength A count of collection items.
98
- */
99
- function getLeftElementIndex(elementIndex, collectionLength) {
100
- if (elementIndex === 0) {
101
- return collectionLength - 1;
102
- }
103
- else {
104
- return elementIndex - 1;
105
- }
106
- }
107
- }
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
7
+ *
8
+ * @param options Configuration options.
9
+ * @param options.keystrokeHandler Keystroke handler to register navigation with arrow keys.
10
+ * @param options.focusTracker A focus tracker for grid elements.
11
+ * @param options.gridItems A collection of grid items.
12
+ * @param options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
13
+ * the number (e.g. for responsive grids).
14
+ * @param options.uiLanguageDirection String of ui language direction.
15
+ */
16
+ export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }) {
17
+ const getNumberOfColumns = typeof numberOfColumns === 'number' ? () => numberOfColumns : numberOfColumns;
18
+ keystrokeHandler.set('arrowright', getGridItemFocuser((focusedElementIndex, gridItems) => {
19
+ return uiLanguageDirection === 'rtl' ?
20
+ getLeftElementIndex(focusedElementIndex, gridItems.length) :
21
+ getRightElementIndex(focusedElementIndex, gridItems.length);
22
+ }));
23
+ keystrokeHandler.set('arrowleft', getGridItemFocuser((focusedElementIndex, gridItems) => {
24
+ return uiLanguageDirection === 'rtl' ?
25
+ getRightElementIndex(focusedElementIndex, gridItems.length) :
26
+ getLeftElementIndex(focusedElementIndex, gridItems.length);
27
+ }));
28
+ keystrokeHandler.set('arrowup', getGridItemFocuser((focusedElementIndex, gridItems) => {
29
+ let nextIndex = focusedElementIndex - getNumberOfColumns();
30
+ if (nextIndex < 0) {
31
+ nextIndex = focusedElementIndex + getNumberOfColumns() * Math.floor(gridItems.length / getNumberOfColumns());
32
+ if (nextIndex > gridItems.length - 1) {
33
+ nextIndex -= getNumberOfColumns();
34
+ }
35
+ }
36
+ return nextIndex;
37
+ }));
38
+ keystrokeHandler.set('arrowdown', getGridItemFocuser((focusedElementIndex, gridItems) => {
39
+ let nextIndex = focusedElementIndex + getNumberOfColumns();
40
+ if (nextIndex > gridItems.length - 1) {
41
+ nextIndex = focusedElementIndex % getNumberOfColumns();
42
+ }
43
+ return nextIndex;
44
+ }));
45
+ function getGridItemFocuser(getIndexToFocus) {
46
+ return (evt) => {
47
+ const focusedElement = gridItems.find(item => item.element === focusTracker.focusedElement);
48
+ const focusedElementIndex = gridItems.getIndex(focusedElement);
49
+ const nextIndexToFocus = getIndexToFocus(focusedElementIndex, gridItems);
50
+ gridItems.get(nextIndexToFocus).focus();
51
+ evt.stopPropagation();
52
+ evt.preventDefault();
53
+ };
54
+ }
55
+ /**
56
+ * Function returning the next index.
57
+ *
58
+ * ```
59
+ * before: [ ][x][ ] after: [ ][ ][x]
60
+ * index = 1 index = 2
61
+ * ```
62
+ *
63
+ * If current index is last, function returns first index.
64
+ *
65
+ * ```
66
+ * before: [ ][ ][x] after: [x][ ][ ]
67
+ * index = 2 index = 0
68
+ * ```
69
+ *
70
+ * @param elementIndex Number of current index.
71
+ * @param collectionLength A count of collection items.
72
+ */
73
+ function getRightElementIndex(elementIndex, collectionLength) {
74
+ if (elementIndex === collectionLength - 1) {
75
+ return 0;
76
+ }
77
+ else {
78
+ return elementIndex + 1;
79
+ }
80
+ }
81
+ /**
82
+ * Function returning the previous index.
83
+ *
84
+ * ```
85
+ * before: [ ][x][ ] after: [x][ ][ ]
86
+ * index = 1 index = 0
87
+ * ```
88
+ *
89
+ * If current index is first, function returns last index.
90
+ *
91
+ * ```
92
+ * before: [x][ ][ ] after: [ ][ ][x]
93
+ * index = 0 index = 2
94
+ * ```
95
+ *
96
+ * @param elementIndex Number of current index.
97
+ * @param collectionLength A count of collection items.
98
+ */
99
+ function getLeftElementIndex(elementIndex, collectionLength) {
100
+ if (elementIndex === 0) {
101
+ return collectionLength - 1;
102
+ }
103
+ else {
104
+ return elementIndex - 1;
105
+ }
106
+ }
107
+ }
@@ -1,28 +1,28 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module ui/bindings/clickoutsidehandler
7
- */
8
- import type { DomEmitter } from '@ckeditor/ckeditor5-utils';
9
- /**
10
- * Handles clicking **outside** of a specified set of elements, then fires an action.
11
- *
12
- * **Note**: Actually, the action is executed upon `mousedown`, not `click`. It prevents
13
- * certain issues when the user keeps holding the mouse button and the UI cannot react
14
- * properly.
15
- *
16
- * @param options Configuration options.
17
- * @param options.emitter The emitter to which this behavior should be added.
18
- * @param options.activator Function returning a `Boolean`, to determine whether the handler is active.
19
- * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
20
- * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
21
- * @param options.callback An action executed by the handler.
22
- */
23
- export default function clickOutsideHandler({ emitter, activator, callback, contextElements }: {
24
- emitter: DomEmitter;
25
- activator: () => boolean;
26
- contextElements: Array<HTMLElement> | (() => Array<HTMLElement>);
27
- callback: () => void;
28
- }): void;
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module ui/bindings/clickoutsidehandler
7
+ */
8
+ import type { DomEmitter } from '@ckeditor/ckeditor5-utils';
9
+ /**
10
+ * Handles clicking **outside** of a specified set of elements, then fires an action.
11
+ *
12
+ * **Note**: Actually, the action is executed upon `mousedown`, not `click`. It prevents
13
+ * certain issues when the user keeps holding the mouse button and the UI cannot react
14
+ * properly.
15
+ *
16
+ * @param options Configuration options.
17
+ * @param options.emitter The emitter to which this behavior should be added.
18
+ * @param options.activator Function returning a `Boolean`, to determine whether the handler is active.
19
+ * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
20
+ * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
21
+ * @param options.callback An action executed by the handler.
22
+ */
23
+ export default function clickOutsideHandler({ emitter, activator, callback, contextElements }: {
24
+ emitter: DomEmitter;
25
+ activator: () => boolean;
26
+ contextElements: Array<HTMLElement> | (() => Array<HTMLElement>);
27
+ callback: () => void;
28
+ }): void;
@@ -1,36 +1,36 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /* global document */
6
- /**
7
- * Handles clicking **outside** of a specified set of elements, then fires an action.
8
- *
9
- * **Note**: Actually, the action is executed upon `mousedown`, not `click`. It prevents
10
- * certain issues when the user keeps holding the mouse button and the UI cannot react
11
- * properly.
12
- *
13
- * @param options Configuration options.
14
- * @param options.emitter The emitter to which this behavior should be added.
15
- * @param options.activator Function returning a `Boolean`, to determine whether the handler is active.
16
- * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
17
- * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
18
- * @param options.callback An action executed by the handler.
19
- */
20
- export default function clickOutsideHandler({ emitter, activator, callback, contextElements }) {
21
- emitter.listenTo(document, 'mousedown', (evt, domEvt) => {
22
- if (!activator()) {
23
- return;
24
- }
25
- // Check if `composedPath` is `undefined` in case the browser does not support native shadow DOM.
26
- // Can be removed when all supported browsers support native shadow DOM.
27
- const path = typeof domEvt.composedPath == 'function' ? domEvt.composedPath() : [];
28
- const contextElementsList = typeof contextElements == 'function' ? contextElements() : contextElements;
29
- for (const contextElement of contextElementsList) {
30
- if (contextElement.contains(domEvt.target) || path.includes(contextElement)) {
31
- return;
32
- }
33
- }
34
- callback();
35
- });
36
- }
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /* global document */
6
+ /**
7
+ * Handles clicking **outside** of a specified set of elements, then fires an action.
8
+ *
9
+ * **Note**: Actually, the action is executed upon `mousedown`, not `click`. It prevents
10
+ * certain issues when the user keeps holding the mouse button and the UI cannot react
11
+ * properly.
12
+ *
13
+ * @param options Configuration options.
14
+ * @param options.emitter The emitter to which this behavior should be added.
15
+ * @param options.activator Function returning a `Boolean`, to determine whether the handler is active.
16
+ * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
17
+ * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
18
+ * @param options.callback An action executed by the handler.
19
+ */
20
+ export default function clickOutsideHandler({ emitter, activator, callback, contextElements }) {
21
+ emitter.listenTo(document, 'mousedown', (evt, domEvt) => {
22
+ if (!activator()) {
23
+ return;
24
+ }
25
+ // Check if `composedPath` is `undefined` in case the browser does not support native shadow DOM.
26
+ // Can be removed when all supported browsers support native shadow DOM.
27
+ const path = typeof domEvt.composedPath == 'function' ? domEvt.composedPath() : [];
28
+ const contextElementsList = typeof contextElements == 'function' ? contextElements() : contextElements;
29
+ for (const contextElement of contextElementsList) {
30
+ if (contextElement.contains(domEvt.target) || path.includes(contextElement)) {
31
+ return;
32
+ }
33
+ }
34
+ callback();
35
+ });
36
+ }
@@ -1,40 +1,40 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module ui/bindings/csstransitiondisablermixin
7
- */
8
- import type { Constructor, Mixed } from '@ckeditor/ckeditor5-utils';
9
- import type View from '../view';
10
- /**
11
- * A mixin that brings the possibility to temporarily disable CSS transitions using
12
- * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen
13
- * when the view is first displayed but they should work normal in other cases.
14
- *
15
- * The methods to control the CSS transitions are:
16
- * * `disableCssTransitions()` – Adds the `.ck-transitions-disabled` class to the
17
- * {@link module:ui/view~View#element view element}.
18
- * * `enableCssTransitions()` – Removes the `.ck-transitions-disabled` class from the
19
- * {@link module:ui/view~View#element view element}.
20
- *
21
- * The usage comes down to:
22
- *
23
- * ```ts
24
- * const MyViewWithCssTransitionDisabler = CssTransitionDisablerMixin( MyView );
25
- * const view = new MyViewWithCssTransitionDisabler();
26
- *
27
- * // ...
28
- *
29
- * view.disableCssTransitions();
30
- * view.show();
31
- * view.enableCssTransitions();
32
- * ```
33
- *
34
- * @param view View instance that should get this functionality.
35
- */
36
- export default function CssTransitionDisablerMixin<Base extends Constructor<View>>(view: Base): Mixed<Base, ViewWithCssTransitionDisabler>;
37
- export type ViewWithCssTransitionDisabler = View & {
38
- disableCssTransitions(): void;
39
- enableCssTransitions(): void;
40
- };
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module ui/bindings/csstransitiondisablermixin
7
+ */
8
+ import type { Constructor, Mixed } from '@ckeditor/ckeditor5-utils';
9
+ import type View from '../view';
10
+ /**
11
+ * A mixin that brings the possibility to temporarily disable CSS transitions using
12
+ * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen
13
+ * when the view is first displayed but they should work normal in other cases.
14
+ *
15
+ * The methods to control the CSS transitions are:
16
+ * * `disableCssTransitions()` – Adds the `.ck-transitions-disabled` class to the
17
+ * {@link module:ui/view~View#element view element}.
18
+ * * `enableCssTransitions()` – Removes the `.ck-transitions-disabled` class from the
19
+ * {@link module:ui/view~View#element view element}.
20
+ *
21
+ * The usage comes down to:
22
+ *
23
+ * ```ts
24
+ * const MyViewWithCssTransitionDisabler = CssTransitionDisablerMixin( MyView );
25
+ * const view = new MyViewWithCssTransitionDisabler();
26
+ *
27
+ * // ...
28
+ *
29
+ * view.disableCssTransitions();
30
+ * view.show();
31
+ * view.enableCssTransitions();
32
+ * ```
33
+ *
34
+ * @param view View instance that should get this functionality.
35
+ */
36
+ export default function CssTransitionDisablerMixin<Base extends Constructor<View>>(view: Base): Mixed<Base, ViewWithCssTransitionDisabler>;
37
+ export type ViewWithCssTransitionDisabler = View & {
38
+ disableCssTransitions(): void;
39
+ enableCssTransitions(): void;
40
+ };
@@ -1,55 +1,55 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * A mixin that brings the possibility to temporarily disable CSS transitions using
7
- * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen
8
- * when the view is first displayed but they should work normal in other cases.
9
- *
10
- * The methods to control the CSS transitions are:
11
- * * `disableCssTransitions()` – Adds the `.ck-transitions-disabled` class to the
12
- * {@link module:ui/view~View#element view element}.
13
- * * `enableCssTransitions()` – Removes the `.ck-transitions-disabled` class from the
14
- * {@link module:ui/view~View#element view element}.
15
- *
16
- * The usage comes down to:
17
- *
18
- * ```ts
19
- * const MyViewWithCssTransitionDisabler = CssTransitionDisablerMixin( MyView );
20
- * const view = new MyViewWithCssTransitionDisabler();
21
- *
22
- * // ...
23
- *
24
- * view.disableCssTransitions();
25
- * view.show();
26
- * view.enableCssTransitions();
27
- * ```
28
- *
29
- * @param view View instance that should get this functionality.
30
- */
31
- export default function CssTransitionDisablerMixin(view) {
32
- class Mixin extends view {
33
- disableCssTransitions() {
34
- this._isCssTransitionsDisabled = true;
35
- }
36
- enableCssTransitions() {
37
- this._isCssTransitionsDisabled = false;
38
- }
39
- constructor(...args) {
40
- super(...args);
41
- this.set('_isCssTransitionsDisabled', false);
42
- this.initializeCssTransitionDisablerMixin();
43
- }
44
- initializeCssTransitionDisablerMixin() {
45
- this.extendTemplate({
46
- attributes: {
47
- class: [
48
- this.bindTemplate.if('_isCssTransitionsDisabled', 'ck-transitions-disabled')
49
- ]
50
- }
51
- });
52
- }
53
- }
54
- return Mixin;
55
- }
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * A mixin that brings the possibility to temporarily disable CSS transitions using
7
+ * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen
8
+ * when the view is first displayed but they should work normal in other cases.
9
+ *
10
+ * The methods to control the CSS transitions are:
11
+ * * `disableCssTransitions()` – Adds the `.ck-transitions-disabled` class to the
12
+ * {@link module:ui/view~View#element view element}.
13
+ * * `enableCssTransitions()` – Removes the `.ck-transitions-disabled` class from the
14
+ * {@link module:ui/view~View#element view element}.
15
+ *
16
+ * The usage comes down to:
17
+ *
18
+ * ```ts
19
+ * const MyViewWithCssTransitionDisabler = CssTransitionDisablerMixin( MyView );
20
+ * const view = new MyViewWithCssTransitionDisabler();
21
+ *
22
+ * // ...
23
+ *
24
+ * view.disableCssTransitions();
25
+ * view.show();
26
+ * view.enableCssTransitions();
27
+ * ```
28
+ *
29
+ * @param view View instance that should get this functionality.
30
+ */
31
+ export default function CssTransitionDisablerMixin(view) {
32
+ class Mixin extends view {
33
+ disableCssTransitions() {
34
+ this._isCssTransitionsDisabled = true;
35
+ }
36
+ enableCssTransitions() {
37
+ this._isCssTransitionsDisabled = false;
38
+ }
39
+ constructor(...args) {
40
+ super(...args);
41
+ this.set('_isCssTransitionsDisabled', false);
42
+ this.initializeCssTransitionDisablerMixin();
43
+ }
44
+ initializeCssTransitionDisablerMixin() {
45
+ this.extendTemplate({
46
+ attributes: {
47
+ class: [
48
+ this.bindTemplate.if('_isCssTransitionsDisabled', 'ck-transitions-disabled')
49
+ ]
50
+ }
51
+ });
52
+ }
53
+ }
54
+ return Mixin;
55
+ }
@@ -1,59 +1,59 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module ui/bindings/injectcsstransitiondisabler
7
- */
8
- import type View from '../view';
9
- /**
10
- * A decorator that brings the possibility to temporarily disable CSS transitions using
11
- * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen
12
- * when the view is first displayed but they should work normal in other cases.
13
- *
14
- * The methods to control the CSS transitions are:
15
- * * `disableCssTransitions()` – Adds the `.ck-transitions-disabled` class to the
16
- * {@link module:ui/view~View#element view element}.
17
- * * `enableCssTransitions()` – Removes the `.ck-transitions-disabled` class from the
18
- * {@link module:ui/view~View#element view element}.
19
- *
20
- * **Note**: This helper extends the {@link module:ui/view~View#template template} and must be used **after**
21
- * {@link module:ui/view~View#setTemplate} is called:
22
- *
23
- * ```ts
24
- * import injectCssTransitionDisabler from '@ckeditor/ckeditor5-ui/src/bindings/injectcsstransitiondisabler';
25
- *
26
- * class MyView extends View {
27
- * constructor() {
28
- * super();
29
- *
30
- * // ...
31
- *
32
- * this.setTemplate( { ... } );
33
- *
34
- * // ...
35
- *
36
- * injectCssTransitionDisabler( this );
37
- *
38
- * // ...
39
- * }
40
- * }
41
- * ```
42
- *
43
- * The usage comes down to:
44
- *
45
- * ```ts
46
- * const view = new MyView();
47
- *
48
- * // ...
49
- *
50
- * view.disableCssTransitions();
51
- * view.show();
52
- * view.enableCssTransitions();
53
- * ```
54
- *
55
- * @deprecated
56
- * @see module:ui/bindings/csstransitiondisablermixin~CssTransitionDisablerMixin
57
- * @param view View instance that should get this functionality.
58
- */
59
- export default function injectCssTransitionDisabler(view: View): void;
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module ui/bindings/injectcsstransitiondisabler
7
+ */
8
+ import type View from '../view';
9
+ /**
10
+ * A decorator that brings the possibility to temporarily disable CSS transitions using
11
+ * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen
12
+ * when the view is first displayed but they should work normal in other cases.
13
+ *
14
+ * The methods to control the CSS transitions are:
15
+ * * `disableCssTransitions()` – Adds the `.ck-transitions-disabled` class to the
16
+ * {@link module:ui/view~View#element view element}.
17
+ * * `enableCssTransitions()` – Removes the `.ck-transitions-disabled` class from the
18
+ * {@link module:ui/view~View#element view element}.
19
+ *
20
+ * **Note**: This helper extends the {@link module:ui/view~View#template template} and must be used **after**
21
+ * {@link module:ui/view~View#setTemplate} is called:
22
+ *
23
+ * ```ts
24
+ * import injectCssTransitionDisabler from '@ckeditor/ckeditor5-ui/src/bindings/injectcsstransitiondisabler';
25
+ *
26
+ * class MyView extends View {
27
+ * constructor() {
28
+ * super();
29
+ *
30
+ * // ...
31
+ *
32
+ * this.setTemplate( { ... } );
33
+ *
34
+ * // ...
35
+ *
36
+ * injectCssTransitionDisabler( this );
37
+ *
38
+ * // ...
39
+ * }
40
+ * }
41
+ * ```
42
+ *
43
+ * The usage comes down to:
44
+ *
45
+ * ```ts
46
+ * const view = new MyView();
47
+ *
48
+ * // ...
49
+ *
50
+ * view.disableCssTransitions();
51
+ * view.show();
52
+ * view.enableCssTransitions();
53
+ * ```
54
+ *
55
+ * @deprecated
56
+ * @see module:ui/bindings/csstransitiondisablermixin~CssTransitionDisablerMixin
57
+ * @param view View instance that should get this functionality.
58
+ */
59
+ export default function injectCssTransitionDisabler(view: View): void;