@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,152 +1,152 @@
|
|
|
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/dropdown/button/splitbuttonview
|
|
7
|
-
*/
|
|
8
|
-
import View from '../../view';
|
|
9
|
-
import ButtonView from '../../button/buttonview';
|
|
10
|
-
import { KeystrokeHandler, FocusTracker } from '@ckeditor/ckeditor5-utils';
|
|
11
|
-
import dropdownArrowIcon from '../../../theme/icons/dropdown-arrow.svg';
|
|
12
|
-
import '../../../theme/components/dropdown/splitbutton.css';
|
|
13
|
-
/**
|
|
14
|
-
* The split button view class.
|
|
15
|
-
*
|
|
16
|
-
* ```ts
|
|
17
|
-
* const view = new SplitButtonView();
|
|
18
|
-
*
|
|
19
|
-
* view.set( {
|
|
20
|
-
* label: 'A button',
|
|
21
|
-
* keystroke: 'Ctrl+B',
|
|
22
|
-
* tooltip: true
|
|
23
|
-
* } );
|
|
24
|
-
*
|
|
25
|
-
* view.render();
|
|
26
|
-
*
|
|
27
|
-
* document.body.append( view.element );
|
|
28
|
-
* ```
|
|
29
|
-
*
|
|
30
|
-
* Also see the {@link module:ui/dropdown/utils~createDropdown `createDropdown()` util}.
|
|
31
|
-
*/
|
|
32
|
-
export default class SplitButtonView extends View {
|
|
33
|
-
/**
|
|
34
|
-
* @inheritDoc
|
|
35
|
-
*/
|
|
36
|
-
constructor(locale) {
|
|
37
|
-
super(locale);
|
|
38
|
-
const bind = this.bindTemplate;
|
|
39
|
-
// Implement the Button interface.
|
|
40
|
-
this.set('class', undefined);
|
|
41
|
-
this.set('labelStyle', undefined);
|
|
42
|
-
this.set('icon', undefined);
|
|
43
|
-
this.set('isEnabled', true);
|
|
44
|
-
this.set('isOn', false);
|
|
45
|
-
this.set('isToggleable', false);
|
|
46
|
-
this.set('isVisible', true);
|
|
47
|
-
this.set('keystroke', undefined);
|
|
48
|
-
this.set('withKeystroke', false);
|
|
49
|
-
this.set('label', undefined);
|
|
50
|
-
this.set('tabindex', -1);
|
|
51
|
-
this.set('tooltip', false);
|
|
52
|
-
this.set('tooltipPosition', 's');
|
|
53
|
-
this.set('type', 'button');
|
|
54
|
-
this.set('withText', false);
|
|
55
|
-
this.children = this.createCollection();
|
|
56
|
-
this.actionView = this._createActionView();
|
|
57
|
-
this.arrowView = this._createArrowView();
|
|
58
|
-
this.keystrokes = new KeystrokeHandler();
|
|
59
|
-
this.focusTracker = new FocusTracker();
|
|
60
|
-
this.setTemplate({
|
|
61
|
-
tag: 'div',
|
|
62
|
-
attributes: {
|
|
63
|
-
class: [
|
|
64
|
-
'ck',
|
|
65
|
-
'ck-splitbutton',
|
|
66
|
-
bind.to('class'),
|
|
67
|
-
bind.if('isVisible', 'ck-hidden', value => !value),
|
|
68
|
-
this.arrowView.bindTemplate.if('isOn', 'ck-splitbutton_open')
|
|
69
|
-
]
|
|
70
|
-
},
|
|
71
|
-
children: this.children
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
/**
|
|
75
|
-
* @inheritDoc
|
|
76
|
-
*/
|
|
77
|
-
render() {
|
|
78
|
-
super.render();
|
|
79
|
-
this.children.add(this.actionView);
|
|
80
|
-
this.children.add(this.arrowView);
|
|
81
|
-
this.focusTracker.add(this.actionView.element);
|
|
82
|
-
this.focusTracker.add(this.arrowView.element);
|
|
83
|
-
this.keystrokes.listenTo(this.element);
|
|
84
|
-
// Overrides toolbar focus cycling behavior.
|
|
85
|
-
this.keystrokes.set('arrowright', (evt, cancel) => {
|
|
86
|
-
if (this.focusTracker.focusedElement === this.actionView.element) {
|
|
87
|
-
this.arrowView.focus();
|
|
88
|
-
cancel();
|
|
89
|
-
}
|
|
90
|
-
});
|
|
91
|
-
// Overrides toolbar focus cycling behavior.
|
|
92
|
-
this.keystrokes.set('arrowleft', (evt, cancel) => {
|
|
93
|
-
if (this.focusTracker.focusedElement === this.arrowView.element) {
|
|
94
|
-
this.actionView.focus();
|
|
95
|
-
cancel();
|
|
96
|
-
}
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
/**
|
|
100
|
-
* @inheritDoc
|
|
101
|
-
*/
|
|
102
|
-
destroy() {
|
|
103
|
-
super.destroy();
|
|
104
|
-
this.focusTracker.destroy();
|
|
105
|
-
this.keystrokes.destroy();
|
|
106
|
-
}
|
|
107
|
-
/**
|
|
108
|
-
* Focuses the {@link module:ui/button/buttonview~ButtonView#element} of the action part of split button.
|
|
109
|
-
*/
|
|
110
|
-
focus() {
|
|
111
|
-
this.actionView.focus();
|
|
112
|
-
}
|
|
113
|
-
/**
|
|
114
|
-
* Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #actionView} and binds it with main split button
|
|
115
|
-
* attributes.
|
|
116
|
-
*/
|
|
117
|
-
_createActionView() {
|
|
118
|
-
const actionView = new ButtonView();
|
|
119
|
-
actionView.bind('icon', 'isEnabled', 'isOn', 'isToggleable', 'keystroke', 'label', 'tabindex', 'tooltip', 'tooltipPosition', 'type', 'withText').to(this);
|
|
120
|
-
actionView.extendTemplate({
|
|
121
|
-
attributes: {
|
|
122
|
-
class: 'ck-splitbutton__action'
|
|
123
|
-
}
|
|
124
|
-
});
|
|
125
|
-
actionView.delegate('execute').to(this);
|
|
126
|
-
return actionView;
|
|
127
|
-
}
|
|
128
|
-
/**
|
|
129
|
-
* Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #arrowView} and binds it with main split button
|
|
130
|
-
* attributes.
|
|
131
|
-
*/
|
|
132
|
-
_createArrowView() {
|
|
133
|
-
const arrowView = new ButtonView();
|
|
134
|
-
const bind = arrowView.bindTemplate;
|
|
135
|
-
arrowView.icon = dropdownArrowIcon;
|
|
136
|
-
arrowView.extendTemplate({
|
|
137
|
-
attributes: {
|
|
138
|
-
class: [
|
|
139
|
-
'ck-splitbutton__arrow'
|
|
140
|
-
],
|
|
141
|
-
'data-cke-tooltip-disabled': bind.to('isOn'),
|
|
142
|
-
'aria-haspopup': true,
|
|
143
|
-
'aria-expanded': bind.to('isOn', value => String(value))
|
|
144
|
-
}
|
|
145
|
-
});
|
|
146
|
-
arrowView.bind('isEnabled').to(this);
|
|
147
|
-
arrowView.bind('label').to(this);
|
|
148
|
-
arrowView.bind('tooltip').to(this);
|
|
149
|
-
arrowView.delegate('execute').to(this, 'open');
|
|
150
|
-
return arrowView;
|
|
151
|
-
}
|
|
152
|
-
}
|
|
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/dropdown/button/splitbuttonview
|
|
7
|
+
*/
|
|
8
|
+
import View from '../../view';
|
|
9
|
+
import ButtonView from '../../button/buttonview';
|
|
10
|
+
import { KeystrokeHandler, FocusTracker } from '@ckeditor/ckeditor5-utils';
|
|
11
|
+
import dropdownArrowIcon from '../../../theme/icons/dropdown-arrow.svg';
|
|
12
|
+
import '../../../theme/components/dropdown/splitbutton.css';
|
|
13
|
+
/**
|
|
14
|
+
* The split button view class.
|
|
15
|
+
*
|
|
16
|
+
* ```ts
|
|
17
|
+
* const view = new SplitButtonView();
|
|
18
|
+
*
|
|
19
|
+
* view.set( {
|
|
20
|
+
* label: 'A button',
|
|
21
|
+
* keystroke: 'Ctrl+B',
|
|
22
|
+
* tooltip: true
|
|
23
|
+
* } );
|
|
24
|
+
*
|
|
25
|
+
* view.render();
|
|
26
|
+
*
|
|
27
|
+
* document.body.append( view.element );
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
30
|
+
* Also see the {@link module:ui/dropdown/utils~createDropdown `createDropdown()` util}.
|
|
31
|
+
*/
|
|
32
|
+
export default class SplitButtonView extends View {
|
|
33
|
+
/**
|
|
34
|
+
* @inheritDoc
|
|
35
|
+
*/
|
|
36
|
+
constructor(locale) {
|
|
37
|
+
super(locale);
|
|
38
|
+
const bind = this.bindTemplate;
|
|
39
|
+
// Implement the Button interface.
|
|
40
|
+
this.set('class', undefined);
|
|
41
|
+
this.set('labelStyle', undefined);
|
|
42
|
+
this.set('icon', undefined);
|
|
43
|
+
this.set('isEnabled', true);
|
|
44
|
+
this.set('isOn', false);
|
|
45
|
+
this.set('isToggleable', false);
|
|
46
|
+
this.set('isVisible', true);
|
|
47
|
+
this.set('keystroke', undefined);
|
|
48
|
+
this.set('withKeystroke', false);
|
|
49
|
+
this.set('label', undefined);
|
|
50
|
+
this.set('tabindex', -1);
|
|
51
|
+
this.set('tooltip', false);
|
|
52
|
+
this.set('tooltipPosition', 's');
|
|
53
|
+
this.set('type', 'button');
|
|
54
|
+
this.set('withText', false);
|
|
55
|
+
this.children = this.createCollection();
|
|
56
|
+
this.actionView = this._createActionView();
|
|
57
|
+
this.arrowView = this._createArrowView();
|
|
58
|
+
this.keystrokes = new KeystrokeHandler();
|
|
59
|
+
this.focusTracker = new FocusTracker();
|
|
60
|
+
this.setTemplate({
|
|
61
|
+
tag: 'div',
|
|
62
|
+
attributes: {
|
|
63
|
+
class: [
|
|
64
|
+
'ck',
|
|
65
|
+
'ck-splitbutton',
|
|
66
|
+
bind.to('class'),
|
|
67
|
+
bind.if('isVisible', 'ck-hidden', value => !value),
|
|
68
|
+
this.arrowView.bindTemplate.if('isOn', 'ck-splitbutton_open')
|
|
69
|
+
]
|
|
70
|
+
},
|
|
71
|
+
children: this.children
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* @inheritDoc
|
|
76
|
+
*/
|
|
77
|
+
render() {
|
|
78
|
+
super.render();
|
|
79
|
+
this.children.add(this.actionView);
|
|
80
|
+
this.children.add(this.arrowView);
|
|
81
|
+
this.focusTracker.add(this.actionView.element);
|
|
82
|
+
this.focusTracker.add(this.arrowView.element);
|
|
83
|
+
this.keystrokes.listenTo(this.element);
|
|
84
|
+
// Overrides toolbar focus cycling behavior.
|
|
85
|
+
this.keystrokes.set('arrowright', (evt, cancel) => {
|
|
86
|
+
if (this.focusTracker.focusedElement === this.actionView.element) {
|
|
87
|
+
this.arrowView.focus();
|
|
88
|
+
cancel();
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
// Overrides toolbar focus cycling behavior.
|
|
92
|
+
this.keystrokes.set('arrowleft', (evt, cancel) => {
|
|
93
|
+
if (this.focusTracker.focusedElement === this.arrowView.element) {
|
|
94
|
+
this.actionView.focus();
|
|
95
|
+
cancel();
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
/**
|
|
100
|
+
* @inheritDoc
|
|
101
|
+
*/
|
|
102
|
+
destroy() {
|
|
103
|
+
super.destroy();
|
|
104
|
+
this.focusTracker.destroy();
|
|
105
|
+
this.keystrokes.destroy();
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Focuses the {@link module:ui/button/buttonview~ButtonView#element} of the action part of split button.
|
|
109
|
+
*/
|
|
110
|
+
focus() {
|
|
111
|
+
this.actionView.focus();
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #actionView} and binds it with main split button
|
|
115
|
+
* attributes.
|
|
116
|
+
*/
|
|
117
|
+
_createActionView() {
|
|
118
|
+
const actionView = new ButtonView();
|
|
119
|
+
actionView.bind('icon', 'isEnabled', 'isOn', 'isToggleable', 'keystroke', 'label', 'tabindex', 'tooltip', 'tooltipPosition', 'type', 'withText').to(this);
|
|
120
|
+
actionView.extendTemplate({
|
|
121
|
+
attributes: {
|
|
122
|
+
class: 'ck-splitbutton__action'
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
actionView.delegate('execute').to(this);
|
|
126
|
+
return actionView;
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #arrowView} and binds it with main split button
|
|
130
|
+
* attributes.
|
|
131
|
+
*/
|
|
132
|
+
_createArrowView() {
|
|
133
|
+
const arrowView = new ButtonView();
|
|
134
|
+
const bind = arrowView.bindTemplate;
|
|
135
|
+
arrowView.icon = dropdownArrowIcon;
|
|
136
|
+
arrowView.extendTemplate({
|
|
137
|
+
attributes: {
|
|
138
|
+
class: [
|
|
139
|
+
'ck-splitbutton__arrow'
|
|
140
|
+
],
|
|
141
|
+
'data-cke-tooltip-disabled': bind.to('isOn'),
|
|
142
|
+
'aria-haspopup': true,
|
|
143
|
+
'aria-expanded': bind.to('isOn', value => String(value))
|
|
144
|
+
}
|
|
145
|
+
});
|
|
146
|
+
arrowView.bind('isEnabled').to(this);
|
|
147
|
+
arrowView.bind('label').to(this);
|
|
148
|
+
arrowView.bind('tooltip').to(this);
|
|
149
|
+
arrowView.delegate('execute').to(this, 'open');
|
|
150
|
+
return arrowView;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
@@ -1,21 +1,21 @@
|
|
|
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/dropdown/dropdownpanelfocusable
|
|
7
|
-
*/
|
|
8
|
-
/**
|
|
9
|
-
* The dropdown panel interface for focusable contents. It provides two methods for managing focus of the contents
|
|
10
|
-
* of dropdown's panel.
|
|
11
|
-
*/
|
|
12
|
-
export default interface DropdownPanelFocusable {
|
|
13
|
-
/**
|
|
14
|
-
* Focuses the view element or first item in view collection on opening dropdown's panel.
|
|
15
|
-
*/
|
|
16
|
-
focus(): void;
|
|
17
|
-
/**
|
|
18
|
-
* Focuses the view element or last item in view collection on opening dropdown's panel.
|
|
19
|
-
*/
|
|
20
|
-
focusLast(): void;
|
|
21
|
-
}
|
|
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/dropdown/dropdownpanelfocusable
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* The dropdown panel interface for focusable contents. It provides two methods for managing focus of the contents
|
|
10
|
+
* of dropdown's panel.
|
|
11
|
+
*/
|
|
12
|
+
export default interface DropdownPanelFocusable {
|
|
13
|
+
/**
|
|
14
|
+
* Focuses the view element or first item in view collection on opening dropdown's panel.
|
|
15
|
+
*/
|
|
16
|
+
focus(): void;
|
|
17
|
+
/**
|
|
18
|
+
* Focuses the view element or last item in view collection on opening dropdown's panel.
|
|
19
|
+
*/
|
|
20
|
+
focusLast(): void;
|
|
21
|
+
}
|
|
@@ -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,62 +1,62 @@
|
|
|
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/dropdown/dropdownpanelview
|
|
7
|
-
*/
|
|
8
|
-
import View from '../view';
|
|
9
|
-
import type ViewCollection from '../viewcollection';
|
|
10
|
-
import type DropdownPanelFocusable from './dropdownpanelfocusable';
|
|
11
|
-
import { type Locale } from '@ckeditor/ckeditor5-utils';
|
|
12
|
-
/**
|
|
13
|
-
* The dropdown panel view class.
|
|
14
|
-
*
|
|
15
|
-
* See {@link module:ui/dropdown/dropdownview~DropdownView} to learn about the common usage.
|
|
16
|
-
*/
|
|
17
|
-
export default class DropdownPanelView extends View implements DropdownPanelFocusable {
|
|
18
|
-
/**
|
|
19
|
-
* Collection of the child views in this panel.
|
|
20
|
-
*
|
|
21
|
-
* A common child type is the {@link module:ui/list/listview~ListView} and {@link module:ui/toolbar/toolbarview~ToolbarView}.
|
|
22
|
-
* See {@link module:ui/dropdown/utils~addListToDropdown} and
|
|
23
|
-
* {@link module:ui/dropdown/utils~addToolbarToDropdown} to learn more about child views of dropdowns.
|
|
24
|
-
*/
|
|
25
|
-
readonly children: ViewCollection;
|
|
26
|
-
/**
|
|
27
|
-
* Controls whether the panel is visible.
|
|
28
|
-
*
|
|
29
|
-
* @observable
|
|
30
|
-
*/
|
|
31
|
-
isVisible: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* The position of the panel, relative to the parent.
|
|
34
|
-
*
|
|
35
|
-
* This property is reflected in the CSS class set to {@link #element} that controls
|
|
36
|
-
* the position of the panel.
|
|
37
|
-
*
|
|
38
|
-
* @observable
|
|
39
|
-
* @default 'se'
|
|
40
|
-
*/
|
|
41
|
-
position: PanelPosition;
|
|
42
|
-
/**
|
|
43
|
-
* @inheritDoc
|
|
44
|
-
*/
|
|
45
|
-
constructor(locale?: Locale);
|
|
46
|
-
/**
|
|
47
|
-
* Focuses the first view in the {@link #children} collection.
|
|
48
|
-
*
|
|
49
|
-
* See also {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable}.
|
|
50
|
-
*/
|
|
51
|
-
focus(): void;
|
|
52
|
-
/**
|
|
53
|
-
* Focuses the view element or last item in view collection on opening dropdown's panel.
|
|
54
|
-
*
|
|
55
|
-
* See also {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable}.
|
|
56
|
-
*/
|
|
57
|
-
focusLast(): void;
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* The position of the panel, relative to the parent.
|
|
61
|
-
*/
|
|
62
|
-
export type PanelPosition = 's' | 'se' | 'sw' | 'sme' | 'smw' | 'n' | 'ne' | 'nw' | 'nme' | 'nmw';
|
|
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/dropdown/dropdownpanelview
|
|
7
|
+
*/
|
|
8
|
+
import View from '../view';
|
|
9
|
+
import type ViewCollection from '../viewcollection';
|
|
10
|
+
import type DropdownPanelFocusable from './dropdownpanelfocusable';
|
|
11
|
+
import { type Locale } from '@ckeditor/ckeditor5-utils';
|
|
12
|
+
/**
|
|
13
|
+
* The dropdown panel view class.
|
|
14
|
+
*
|
|
15
|
+
* See {@link module:ui/dropdown/dropdownview~DropdownView} to learn about the common usage.
|
|
16
|
+
*/
|
|
17
|
+
export default class DropdownPanelView extends View implements DropdownPanelFocusable {
|
|
18
|
+
/**
|
|
19
|
+
* Collection of the child views in this panel.
|
|
20
|
+
*
|
|
21
|
+
* A common child type is the {@link module:ui/list/listview~ListView} and {@link module:ui/toolbar/toolbarview~ToolbarView}.
|
|
22
|
+
* See {@link module:ui/dropdown/utils~addListToDropdown} and
|
|
23
|
+
* {@link module:ui/dropdown/utils~addToolbarToDropdown} to learn more about child views of dropdowns.
|
|
24
|
+
*/
|
|
25
|
+
readonly children: ViewCollection;
|
|
26
|
+
/**
|
|
27
|
+
* Controls whether the panel is visible.
|
|
28
|
+
*
|
|
29
|
+
* @observable
|
|
30
|
+
*/
|
|
31
|
+
isVisible: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* The position of the panel, relative to the parent.
|
|
34
|
+
*
|
|
35
|
+
* This property is reflected in the CSS class set to {@link #element} that controls
|
|
36
|
+
* the position of the panel.
|
|
37
|
+
*
|
|
38
|
+
* @observable
|
|
39
|
+
* @default 'se'
|
|
40
|
+
*/
|
|
41
|
+
position: PanelPosition;
|
|
42
|
+
/**
|
|
43
|
+
* @inheritDoc
|
|
44
|
+
*/
|
|
45
|
+
constructor(locale?: Locale);
|
|
46
|
+
/**
|
|
47
|
+
* Focuses the first view in the {@link #children} collection.
|
|
48
|
+
*
|
|
49
|
+
* See also {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable}.
|
|
50
|
+
*/
|
|
51
|
+
focus(): void;
|
|
52
|
+
/**
|
|
53
|
+
* Focuses the view element or last item in view collection on opening dropdown's panel.
|
|
54
|
+
*
|
|
55
|
+
* See also {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable}.
|
|
56
|
+
*/
|
|
57
|
+
focusLast(): void;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* The position of the panel, relative to the parent.
|
|
61
|
+
*/
|
|
62
|
+
export type PanelPosition = 's' | 'se' | 'sw' | 'sme' | 'smw' | 'n' | 'ne' | 'nw' | 'nme' | 'nmw';
|