@ckeditor/ckeditor5-ui 39.0.2 → 40.0.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.
- package/lang/contexts.json +5 -1
- package/lang/translations/ar.po +16 -0
- package/lang/translations/ast.po +16 -0
- package/lang/translations/az.po +16 -0
- package/lang/translations/bg.po +16 -0
- package/lang/translations/bn.po +16 -0
- package/lang/translations/ca.po +16 -0
- package/lang/translations/cs.po +16 -0
- package/lang/translations/da.po +16 -0
- package/lang/translations/de-ch.po +16 -0
- package/lang/translations/de.po +16 -0
- package/lang/translations/el.po +16 -0
- package/lang/translations/en-au.po +16 -0
- package/lang/translations/en-gb.po +16 -0
- package/lang/translations/en.po +16 -0
- package/lang/translations/eo.po +16 -0
- package/lang/translations/es.po +16 -0
- package/lang/translations/et.po +16 -0
- package/lang/translations/eu.po +16 -0
- package/lang/translations/fa.po +16 -0
- package/lang/translations/fi.po +16 -0
- package/lang/translations/fr.po +16 -0
- package/lang/translations/gl.po +16 -0
- package/lang/translations/he.po +16 -0
- package/lang/translations/hi.po +16 -0
- package/lang/translations/hr.po +16 -0
- package/lang/translations/hu.po +16 -0
- package/lang/translations/id.po +16 -0
- package/lang/translations/it.po +16 -0
- package/lang/translations/ja.po +16 -0
- package/lang/translations/km.po +16 -0
- package/lang/translations/kn.po +16 -0
- package/lang/translations/ko.po +16 -0
- package/lang/translations/ku.po +16 -0
- package/lang/translations/lt.po +16 -0
- package/lang/translations/lv.po +16 -0
- package/lang/translations/ms.po +16 -0
- package/lang/translations/nb.po +16 -0
- package/lang/translations/ne.po +16 -0
- package/lang/translations/nl.po +16 -0
- package/lang/translations/no.po +16 -0
- package/lang/translations/pl.po +16 -0
- package/lang/translations/pt-br.po +16 -0
- package/lang/translations/pt.po +16 -0
- package/lang/translations/ro.po +16 -0
- package/lang/translations/ru.po +16 -0
- package/lang/translations/sk.po +16 -0
- package/lang/translations/sl.po +16 -0
- package/lang/translations/sq.po +16 -0
- package/lang/translations/sr-latn.po +16 -0
- package/lang/translations/sr.po +16 -0
- package/lang/translations/sv.po +16 -0
- package/lang/translations/th.po +16 -0
- package/lang/translations/tk.po +16 -0
- package/lang/translations/tr.po +16 -0
- package/lang/translations/tt.po +16 -0
- package/lang/translations/ug.po +16 -0
- package/lang/translations/uk.po +16 -0
- package/lang/translations/ur.po +16 -0
- package/lang/translations/uz.po +16 -0
- package/lang/translations/vi.po +16 -0
- package/lang/translations/zh-cn.po +16 -0
- package/lang/translations/zh.po +16 -0
- package/package.json +3 -3
- package/src/augmentation.d.ts +86 -86
- package/src/augmentation.js +5 -5
- package/src/autocomplete/autocompleteview.d.ts +81 -0
- package/src/autocomplete/autocompleteview.js +146 -0
- package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
- package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
- package/src/bindings/clickoutsidehandler.d.ts +28 -28
- package/src/bindings/clickoutsidehandler.js +36 -36
- package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
- package/src/bindings/csstransitiondisablermixin.js +55 -55
- package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
- package/src/bindings/injectcsstransitiondisabler.js +71 -71
- package/src/bindings/preventdefault.d.ts +33 -33
- package/src/bindings/preventdefault.js +34 -34
- package/src/bindings/submithandler.d.ts +57 -57
- package/src/bindings/submithandler.js +47 -47
- package/src/button/button.d.ts +178 -178
- package/src/button/button.js +5 -5
- package/src/button/buttonlabel.d.ts +34 -0
- package/src/button/buttonlabel.js +5 -0
- package/src/button/buttonlabelview.d.ts +31 -0
- package/src/button/buttonlabelview.js +42 -0
- package/src/button/buttonview.d.ts +185 -177
- package/src/button/buttonview.js +219 -231
- package/src/button/switchbuttonview.d.ts +45 -45
- package/src/button/switchbuttonview.js +75 -75
- package/src/colorgrid/colorgridview.d.ts +132 -132
- package/src/colorgrid/colorgridview.js +124 -124
- package/src/colorgrid/colortileview.d.ts +28 -28
- package/src/colorgrid/colortileview.js +40 -40
- package/src/colorgrid/utils.d.ts +47 -47
- package/src/colorgrid/utils.js +84 -84
- package/src/colorpicker/colorpickerview.d.ts +137 -137
- package/src/colorpicker/colorpickerview.js +270 -270
- package/src/colorpicker/utils.d.ts +43 -43
- package/src/colorpicker/utils.js +99 -99
- package/src/colorselector/colorgridsfragmentview.d.ts +194 -194
- package/src/colorselector/colorgridsfragmentview.js +289 -289
- package/src/colorselector/colorpickerfragmentview.d.ts +128 -128
- package/src/colorselector/colorpickerfragmentview.js +205 -205
- package/src/colorselector/colorselectorview.d.ts +242 -242
- package/src/colorselector/colorselectorview.js +256 -256
- package/src/colorselector/documentcolorcollection.d.ts +70 -70
- package/src/colorselector/documentcolorcollection.js +42 -42
- package/src/componentfactory.d.ts +81 -81
- package/src/componentfactory.js +104 -104
- package/src/dropdown/button/dropdownbutton.d.ts +25 -25
- package/src/dropdown/button/dropdownbutton.js +5 -5
- package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
- package/src/dropdown/button/dropdownbuttonview.js +66 -66
- package/src/dropdown/button/splitbuttonview.d.ts +161 -161
- package/src/dropdown/button/splitbuttonview.js +152 -152
- package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
- package/src/dropdown/dropdownpanelfocusable.js +5 -5
- package/src/dropdown/dropdownpanelview.d.ts +62 -62
- package/src/dropdown/dropdownpanelview.js +97 -97
- package/src/dropdown/dropdownview.d.ts +315 -315
- package/src/dropdown/dropdownview.js +379 -378
- package/src/dropdown/utils.d.ts +235 -221
- package/src/dropdown/utils.js +458 -437
- package/src/editableui/editableuiview.d.ts +72 -72
- package/src/editableui/editableuiview.js +112 -112
- package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
- package/src/editableui/inline/inlineeditableuiview.js +48 -48
- package/src/editorui/bodycollection.d.ts +55 -55
- package/src/editorui/bodycollection.js +84 -84
- package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
- package/src/editorui/boxed/boxededitoruiview.js +81 -81
- package/src/editorui/editorui.d.ts +282 -282
- package/src/editorui/editorui.js +410 -410
- package/src/editorui/editoruiview.d.ts +39 -39
- package/src/editorui/editoruiview.js +38 -38
- package/src/editorui/poweredby.d.ts +71 -71
- package/src/editorui/poweredby.js +276 -299
- package/src/focuscycler.d.ts +226 -183
- package/src/focuscycler.js +245 -220
- package/src/formheader/formheaderview.d.ts +59 -53
- package/src/formheader/formheaderview.js +69 -63
- package/src/highlightedtext/highlightedtextview.d.ts +38 -0
- package/src/highlightedtext/highlightedtextview.js +102 -0
- package/src/icon/iconview.d.ts +85 -78
- package/src/icon/iconview.js +114 -112
- package/src/iframe/iframeview.d.ts +50 -50
- package/src/iframe/iframeview.js +63 -63
- package/src/index.d.ts +73 -63
- package/src/index.js +70 -62
- package/src/input/inputbase.d.ts +107 -0
- package/src/input/inputbase.js +110 -0
- package/src/input/inputview.d.ts +36 -121
- package/src/input/inputview.js +24 -106
- package/src/inputnumber/inputnumberview.d.ts +49 -49
- package/src/inputnumber/inputnumberview.js +40 -40
- package/src/inputtext/inputtextview.d.ts +18 -18
- package/src/inputtext/inputtextview.js +27 -27
- package/src/label/labelview.d.ts +36 -36
- package/src/label/labelview.js +41 -41
- package/src/labeledfield/labeledfieldview.d.ts +187 -182
- package/src/labeledfield/labeledfieldview.js +157 -157
- package/src/labeledfield/utils.d.ts +123 -93
- package/src/labeledfield/utils.js +176 -131
- package/src/labeledinput/labeledinputview.d.ts +125 -125
- package/src/labeledinput/labeledinputview.js +125 -125
- package/src/list/listitemgroupview.d.ts +51 -0
- package/src/list/listitemgroupview.js +75 -0
- package/src/list/listitemview.d.ts +36 -35
- package/src/list/listitemview.js +42 -40
- package/src/list/listseparatorview.d.ts +18 -18
- package/src/list/listseparatorview.js +28 -28
- package/src/list/listview.d.ts +122 -65
- package/src/list/listview.js +187 -90
- package/src/model.d.ts +22 -22
- package/src/model.js +31 -31
- package/src/notification/notification.d.ts +211 -211
- package/src/notification/notification.js +187 -187
- package/src/panel/balloon/balloonpanelview.d.ts +685 -685
- package/src/panel/balloon/balloonpanelview.js +1010 -988
- package/src/panel/balloon/contextualballoon.d.ts +299 -299
- package/src/panel/balloon/contextualballoon.js +572 -572
- package/src/panel/sticky/stickypanelview.d.ts +156 -158
- package/src/panel/sticky/stickypanelview.js +234 -231
- package/src/search/filteredview.d.ts +31 -0
- package/src/search/filteredview.js +5 -0
- package/src/search/searchinfoview.d.ts +45 -0
- package/src/search/searchinfoview.js +59 -0
- package/src/search/searchresultsview.d.ts +54 -0
- package/src/search/searchresultsview.js +65 -0
- package/src/search/text/searchtextqueryview.d.ts +76 -0
- package/src/search/text/searchtextqueryview.js +75 -0
- package/src/search/text/searchtextview.d.ts +219 -0
- package/src/search/text/searchtextview.js +201 -0
- package/src/spinner/spinnerview.d.ts +25 -0
- package/src/spinner/spinnerview.js +38 -0
- package/src/template.d.ts +942 -942
- package/src/template.js +1294 -1294
- package/src/textarea/textareaview.d.ts +88 -0
- package/src/textarea/textareaview.js +140 -0
- package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
- package/src/toolbar/balloon/balloontoolbar.js +300 -300
- package/src/toolbar/block/blockbuttonview.d.ts +35 -35
- package/src/toolbar/block/blockbuttonview.js +41 -41
- package/src/toolbar/block/blocktoolbar.d.ts +161 -161
- package/src/toolbar/block/blocktoolbar.js +395 -391
- package/src/toolbar/normalizetoolbarconfig.d.ts +40 -39
- package/src/toolbar/normalizetoolbarconfig.js +51 -51
- package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
- package/src/toolbar/toolbarlinebreakview.js +28 -28
- package/src/toolbar/toolbarseparatorview.d.ts +18 -18
- package/src/toolbar/toolbarseparatorview.js +28 -28
- package/src/toolbar/toolbarview.d.ts +266 -265
- package/src/toolbar/toolbarview.js +719 -717
- package/src/tooltipmanager.d.ts +180 -180
- package/src/tooltipmanager.js +353 -353
- package/src/view.d.ts +422 -422
- package/src/view.js +396 -396
- package/src/viewcollection.d.ts +139 -139
- package/src/viewcollection.js +206 -206
- package/theme/components/autocomplete/autocomplete.css +22 -0
- package/theme/components/formheader/formheader.css +8 -0
- package/theme/components/highlightedtext/highlightedtext.css +12 -0
- package/theme/components/search/search.css +43 -0
- package/theme/components/spinner/spinner.css +23 -0
- package/theme/components/textarea/textarea.css +10 -0
|
@@ -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;
|