@ckeditor/ckeditor5-ui 38.0.1 → 38.1.1

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 (127) hide show
  1. package/lang/translations/it.po +1 -1
  2. package/package.json +3 -32
  3. package/src/augmentation.d.ts +86 -86
  4. package/src/augmentation.js +5 -5
  5. package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
  6. package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
  7. package/src/bindings/clickoutsidehandler.d.ts +28 -28
  8. package/src/bindings/clickoutsidehandler.js +36 -36
  9. package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
  10. package/src/bindings/csstransitiondisablermixin.js +55 -55
  11. package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
  12. package/src/bindings/injectcsstransitiondisabler.js +71 -71
  13. package/src/bindings/preventdefault.d.ts +33 -33
  14. package/src/bindings/preventdefault.js +34 -34
  15. package/src/bindings/submithandler.d.ts +57 -57
  16. package/src/bindings/submithandler.js +47 -47
  17. package/src/button/button.d.ts +178 -178
  18. package/src/button/button.js +5 -5
  19. package/src/button/buttonview.d.ts +177 -177
  20. package/src/button/buttonview.js +231 -231
  21. package/src/button/switchbuttonview.d.ts +45 -45
  22. package/src/button/switchbuttonview.js +75 -75
  23. package/src/colorgrid/colorgridview.d.ts +132 -132
  24. package/src/colorgrid/colorgridview.js +124 -124
  25. package/src/colorgrid/colortileview.d.ts +28 -28
  26. package/src/colorgrid/colortileview.js +40 -40
  27. package/src/colorgrid/utils.d.ts +47 -47
  28. package/src/colorgrid/utils.js +84 -84
  29. package/src/colorpicker/colorpickerview.d.ts +110 -110
  30. package/src/colorpicker/colorpickerview.js +253 -250
  31. package/src/colorpicker/utils.d.ts +35 -35
  32. package/src/colorpicker/utils.js +99 -99
  33. package/src/componentfactory.d.ts +81 -81
  34. package/src/componentfactory.js +104 -104
  35. package/src/dropdown/button/dropdownbutton.d.ts +25 -25
  36. package/src/dropdown/button/dropdownbutton.js +5 -5
  37. package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
  38. package/src/dropdown/button/dropdownbuttonview.js +66 -66
  39. package/src/dropdown/button/splitbuttonview.d.ts +161 -161
  40. package/src/dropdown/button/splitbuttonview.js +152 -152
  41. package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
  42. package/src/dropdown/dropdownpanelfocusable.js +5 -5
  43. package/src/dropdown/dropdownpanelview.d.ts +62 -62
  44. package/src/dropdown/dropdownpanelview.js +96 -96
  45. package/src/dropdown/dropdownview.d.ts +315 -315
  46. package/src/dropdown/dropdownview.js +378 -378
  47. package/src/dropdown/utils.d.ts +221 -221
  48. package/src/dropdown/utils.js +434 -434
  49. package/src/editableui/editableuiview.d.ts +72 -72
  50. package/src/editableui/editableuiview.js +112 -112
  51. package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
  52. package/src/editableui/inline/inlineeditableuiview.js +48 -48
  53. package/src/editorui/bodycollection.d.ts +55 -51
  54. package/src/editorui/bodycollection.js +84 -78
  55. package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
  56. package/src/editorui/boxed/boxededitoruiview.js +81 -81
  57. package/src/editorui/editorui.d.ts +282 -274
  58. package/src/editorui/editorui.js +410 -388
  59. package/src/editorui/editoruiview.d.ts +39 -39
  60. package/src/editorui/editoruiview.js +38 -38
  61. package/src/editorui/poweredby.d.ts +71 -76
  62. package/src/editorui/poweredby.js +294 -291
  63. package/src/focuscycler.d.ts +183 -183
  64. package/src/focuscycler.js +220 -220
  65. package/src/formheader/formheaderview.d.ts +53 -53
  66. package/src/formheader/formheaderview.js +63 -63
  67. package/src/icon/iconview.d.ts +78 -78
  68. package/src/icon/iconview.js +112 -112
  69. package/src/iframe/iframeview.d.ts +50 -50
  70. package/src/iframe/iframeview.js +63 -63
  71. package/src/index.d.ts +62 -61
  72. package/src/index.js +61 -60
  73. package/src/input/inputview.d.ts +121 -121
  74. package/src/input/inputview.js +106 -106
  75. package/src/inputnumber/inputnumberview.d.ts +49 -49
  76. package/src/inputnumber/inputnumberview.js +40 -40
  77. package/src/inputtext/inputtextview.d.ts +18 -18
  78. package/src/inputtext/inputtextview.js +27 -27
  79. package/src/label/labelview.d.ts +36 -36
  80. package/src/label/labelview.js +41 -41
  81. package/src/labeledfield/labeledfieldview.d.ts +182 -182
  82. package/src/labeledfield/labeledfieldview.js +157 -157
  83. package/src/labeledfield/utils.d.ts +93 -93
  84. package/src/labeledfield/utils.js +131 -131
  85. package/src/labeledinput/labeledinputview.d.ts +125 -125
  86. package/src/labeledinput/labeledinputview.js +125 -125
  87. package/src/list/listitemview.d.ts +35 -35
  88. package/src/list/listitemview.js +40 -40
  89. package/src/list/listseparatorview.d.ts +18 -18
  90. package/src/list/listseparatorview.js +28 -28
  91. package/src/list/listview.d.ts +65 -65
  92. package/src/list/listview.js +90 -90
  93. package/src/model.d.ts +22 -22
  94. package/src/model.js +31 -31
  95. package/src/notification/notification.d.ts +211 -211
  96. package/src/notification/notification.js +187 -187
  97. package/src/panel/balloon/balloonpanelview.d.ts +685 -685
  98. package/src/panel/balloon/balloonpanelview.js +988 -988
  99. package/src/panel/balloon/contextualballoon.d.ts +299 -299
  100. package/src/panel/balloon/contextualballoon.js +572 -572
  101. package/src/panel/sticky/stickypanelview.d.ts +132 -132
  102. package/src/panel/sticky/stickypanelview.js +139 -139
  103. package/src/template.d.ts +942 -942
  104. package/src/template.js +1294 -1294
  105. package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
  106. package/src/toolbar/balloon/balloontoolbar.js +300 -300
  107. package/src/toolbar/block/blockbuttonview.d.ts +35 -35
  108. package/src/toolbar/block/blockbuttonview.js +41 -41
  109. package/src/toolbar/block/blocktoolbar.d.ts +161 -153
  110. package/src/toolbar/block/blocktoolbar.js +391 -374
  111. package/src/toolbar/normalizetoolbarconfig.d.ts +39 -39
  112. package/src/toolbar/normalizetoolbarconfig.js +51 -51
  113. package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
  114. package/src/toolbar/toolbarlinebreakview.js +28 -28
  115. package/src/toolbar/toolbarseparatorview.d.ts +18 -18
  116. package/src/toolbar/toolbarseparatorview.js +28 -28
  117. package/src/toolbar/toolbarview.d.ts +265 -265
  118. package/src/toolbar/toolbarview.js +717 -717
  119. package/src/tooltipmanager.d.ts +180 -180
  120. package/src/tooltipmanager.js +353 -353
  121. package/src/view.d.ts +422 -422
  122. package/src/view.js +396 -396
  123. package/src/viewcollection.d.ts +139 -139
  124. package/src/viewcollection.js +206 -206
  125. package/theme/components/colorpicker/colorpicker.css +4 -4
  126. package/theme/globals/_poweredby.css +5 -1
  127. package/theme/icons/project-logo.svg +1 -1
@@ -114,4 +114,4 @@ msgstr "Barra degli strumenti contestuale dell'editor"
114
114
 
115
115
  msgctxt "Label of an input field for typing colors in the HEX color format."
116
116
  msgid "HEX"
117
- msgstr ""
117
+ msgstr "HEX"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ckeditor/ckeditor5-ui",
3
- "version": "38.0.1",
3
+ "version": "38.1.1",
4
4
  "description": "The UI framework and standard UI library of CKEditor 5.",
5
5
  "keywords": [
6
6
  "ckeditor",
@@ -11,38 +11,13 @@
11
11
  ],
12
12
  "main": "src/index.js",
13
13
  "dependencies": {
14
- "@ckeditor/ckeditor5-core": "^38.0.1",
15
- "@ckeditor/ckeditor5-utils": "^38.0.1",
14
+ "@ckeditor/ckeditor5-core": "38.1.1",
15
+ "@ckeditor/ckeditor5-utils": "38.1.1",
16
16
  "color-convert": "2.0.1",
17
17
  "color-parse": "1.4.2",
18
18
  "lodash-es": "^4.17.15",
19
19
  "vanilla-colorful": "0.7.2"
20
20
  },
21
- "devDependencies": {
22
- "@ckeditor/ckeditor5-basic-styles": "^38.0.1",
23
- "@ckeditor/ckeditor5-block-quote": "^38.0.1",
24
- "@ckeditor/ckeditor5-editor-balloon": "^38.0.1",
25
- "@ckeditor/ckeditor5-editor-classic": "^38.0.1",
26
- "@ckeditor/ckeditor5-engine": "^38.0.1",
27
- "@ckeditor/ckeditor5-enter": "^38.0.1",
28
- "@ckeditor/ckeditor5-essentials": "^38.0.1",
29
- "@ckeditor/ckeditor5-find-and-replace": "^38.0.1",
30
- "@ckeditor/ckeditor5-font": "^38.0.1",
31
- "@ckeditor/ckeditor5-heading": "^38.0.1",
32
- "@ckeditor/ckeditor5-horizontal-line": "^38.0.1",
33
- "@ckeditor/ckeditor5-image": "^38.0.1",
34
- "@ckeditor/ckeditor5-link": "^38.0.1",
35
- "@ckeditor/ckeditor5-list": "^38.0.1",
36
- "@ckeditor/ckeditor5-mention": "^38.0.1",
37
- "@ckeditor/ckeditor5-paragraph": "^38.0.1",
38
- "@ckeditor/ckeditor5-source-editing": "^38.0.1",
39
- "@ckeditor/ckeditor5-table": "^38.0.1",
40
- "@ckeditor/ckeditor5-typing": "^38.0.1",
41
- "@types/color-convert": "2.0.0",
42
- "typescript": "^4.8.4",
43
- "webpack": "^5.58.1",
44
- "webpack-cli": "^4.9.0"
45
- },
46
21
  "engines": {
47
22
  "node": ">=16.0.0",
48
23
  "npm": ">=5.7.1"
@@ -64,9 +39,5 @@
64
39
  "ckeditor5-metadata.json",
65
40
  "CHANGELOG.md"
66
41
  ],
67
- "scripts": {
68
- "build": "tsc -p ./tsconfig.json",
69
- "postversion": "npm run build"
70
- },
71
42
  "types": "src/index.d.ts"
72
43
  }
@@ -1,86 +1,86 @@
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
- import type { BalloonToolbar, BlockToolbar, ContextualBalloon, Notification } from './index';
6
- import type { ToolbarConfig } from '@ckeditor/ckeditor5-core';
7
- declare module '@ckeditor/ckeditor5-core' {
8
- interface EditorConfig {
9
- /**
10
- * Contextual toolbar configuration. Used by the {@link module:ui/toolbar/balloon/balloontoolbar~BalloonToolbar}
11
- * feature.
12
- *
13
- * ## Configuring toolbar items
14
- *
15
- * ```ts
16
- * const config = {
17
- * balloonToolbar: [ 'bold', 'italic', 'undo', 'redo' ]
18
- * };
19
- * ```
20
- *
21
- * You can also use `'|'` to create a separator between groups of items:
22
- *
23
- * ```ts
24
- * const config = {
25
- * balloonToolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
26
- * };
27
- * ```
28
- *
29
- * Read also about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
30
- *
31
- * ## Configuring items grouping
32
- *
33
- * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
34
- *
35
- * ```ts
36
- * const config = {
37
- * balloonToolbar: {
38
- * items: [ 'bold', 'italic', 'undo', 'redo' ],
39
- * shouldNotGroupWhenFull: true
40
- * },
41
- * };
42
- * ```
43
- */
44
- balloonToolbar?: ToolbarConfig;
45
- /**
46
- * The block toolbar configuration. Used by the {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}
47
- * feature.
48
- *
49
- * ```ts
50
- * const config = {
51
- * blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList' ]
52
- * };
53
- * ```
54
- *
55
- * You can also use `'|'` to create a separator between groups of items:
56
- *
57
- * ```ts
58
- * const config = {
59
- * blockToolbar: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ]
60
- * };
61
- * ```
62
- *
63
- * ## Configuring items grouping
64
- *
65
- * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
66
- *
67
- * ```ts
68
- * const config = {
69
- * blockToolbar: {
70
- * items: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ],
71
- * shouldNotGroupWhenFull: true
72
- * },
73
- * };
74
- * ```
75
- *
76
- * Read more about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
77
- */
78
- blockToolbar?: ToolbarConfig;
79
- }
80
- interface PluginsMap {
81
- [BalloonToolbar.pluginName]: BalloonToolbar;
82
- [BlockToolbar.pluginName]: BlockToolbar;
83
- [ContextualBalloon.pluginName]: ContextualBalloon;
84
- [Notification.pluginName]: Notification;
85
- }
86
- }
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
+ import type { BalloonToolbar, BlockToolbar, ContextualBalloon, Notification } from './index';
6
+ import type { ToolbarConfig } from '@ckeditor/ckeditor5-core';
7
+ declare module '@ckeditor/ckeditor5-core' {
8
+ interface EditorConfig {
9
+ /**
10
+ * Contextual toolbar configuration. Used by the {@link module:ui/toolbar/balloon/balloontoolbar~BalloonToolbar}
11
+ * feature.
12
+ *
13
+ * ## Configuring toolbar items
14
+ *
15
+ * ```ts
16
+ * const config = {
17
+ * balloonToolbar: [ 'bold', 'italic', 'undo', 'redo' ]
18
+ * };
19
+ * ```
20
+ *
21
+ * You can also use `'|'` to create a separator between groups of items:
22
+ *
23
+ * ```ts
24
+ * const config = {
25
+ * balloonToolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
26
+ * };
27
+ * ```
28
+ *
29
+ * Read also about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
30
+ *
31
+ * ## Configuring items grouping
32
+ *
33
+ * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
34
+ *
35
+ * ```ts
36
+ * const config = {
37
+ * balloonToolbar: {
38
+ * items: [ 'bold', 'italic', 'undo', 'redo' ],
39
+ * shouldNotGroupWhenFull: true
40
+ * },
41
+ * };
42
+ * ```
43
+ */
44
+ balloonToolbar?: ToolbarConfig;
45
+ /**
46
+ * The block toolbar configuration. Used by the {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}
47
+ * feature.
48
+ *
49
+ * ```ts
50
+ * const config = {
51
+ * blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList' ]
52
+ * };
53
+ * ```
54
+ *
55
+ * You can also use `'|'` to create a separator between groups of items:
56
+ *
57
+ * ```ts
58
+ * const config = {
59
+ * blockToolbar: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ]
60
+ * };
61
+ * ```
62
+ *
63
+ * ## Configuring items grouping
64
+ *
65
+ * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
66
+ *
67
+ * ```ts
68
+ * const config = {
69
+ * blockToolbar: {
70
+ * items: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ],
71
+ * shouldNotGroupWhenFull: true
72
+ * },
73
+ * };
74
+ * ```
75
+ *
76
+ * Read more about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
77
+ */
78
+ blockToolbar?: ToolbarConfig;
79
+ }
80
+ interface PluginsMap {
81
+ [BalloonToolbar.pluginName]: BalloonToolbar;
82
+ [BlockToolbar.pluginName]: BlockToolbar;
83
+ [ContextualBalloon.pluginName]: ContextualBalloon;
84
+ [Notification.pluginName]: Notification;
85
+ }
86
+ }
@@ -1,5 +1,5 @@
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
- export {};
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
+ export {};
@@ -1,27 +1,27 @@
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/addkeyboardhandlingforgrid
7
- */
8
- import type { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
9
- import type ViewCollection from '../viewcollection';
10
- /**
11
- * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
12
- *
13
- * @param options Configuration options.
14
- * @param options.keystrokeHandler Keystroke handler to register navigation with arrow keys.
15
- * @param options.focusTracker A focus tracker for grid elements.
16
- * @param options.gridItems A collection of grid items.
17
- * @param options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
18
- * the number (e.g. for responsive grids).
19
- * @param options.uiLanguageDirection String of ui language direction.
20
- */
21
- export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }: {
22
- keystrokeHandler: KeystrokeHandler;
23
- focusTracker: FocusTracker;
24
- gridItems: ViewCollection;
25
- numberOfColumns: number | (() => number);
26
- uiLanguageDirection?: string;
27
- }): 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/addkeyboardhandlingforgrid
7
+ */
8
+ import type { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
9
+ import type ViewCollection from '../viewcollection';
10
+ /**
11
+ * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
12
+ *
13
+ * @param options Configuration options.
14
+ * @param options.keystrokeHandler Keystroke handler to register navigation with arrow keys.
15
+ * @param options.focusTracker A focus tracker for grid elements.
16
+ * @param options.gridItems A collection of grid items.
17
+ * @param options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
18
+ * the number (e.g. for responsive grids).
19
+ * @param options.uiLanguageDirection String of ui language direction.
20
+ */
21
+ export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }: {
22
+ keystrokeHandler: KeystrokeHandler;
23
+ focusTracker: FocusTracker;
24
+ gridItems: ViewCollection;
25
+ numberOfColumns: number | (() => number);
26
+ uiLanguageDirection?: string;
27
+ }): void;
@@ -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
+ }