@ckeditor/ckeditor5-special-characters 38.1.0 → 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.
- package/build/special-characters.js +1 -1
- package/build/special-characters.js.map +1 -0
- package/package.json +2 -2
- package/src/augmentation.d.ts +24 -24
- package/src/augmentation.js +5 -5
- package/src/index.d.ts +16 -16
- package/src/index.js +15 -15
- package/src/specialcharacters.d.ts +96 -96
- package/src/specialcharacters.js +206 -206
- package/src/specialcharactersarrows.d.ts +30 -30
- package/src/specialcharactersarrows.js +60 -60
- package/src/specialcharactersconfig.d.ts +51 -51
- package/src/specialcharactersconfig.js +5 -5
- package/src/specialcharacterscurrency.d.ts +30 -30
- package/src/specialcharacterscurrency.js +74 -74
- package/src/specialcharactersessentials.d.ts +35 -35
- package/src/specialcharactersessentials.js +45 -45
- package/src/specialcharacterslatin.d.ts +30 -30
- package/src/specialcharacterslatin.js +166 -166
- package/src/specialcharactersmathematical.d.ts +30 -30
- package/src/specialcharactersmathematical.js +82 -82
- package/src/specialcharacterstext.d.ts +30 -30
- package/src/specialcharacterstext.js +65 -65
- package/src/ui/charactergridview.d.ts +94 -94
- package/src/ui/charactergridview.js +129 -129
- package/src/ui/characterinfoview.d.ts +35 -35
- package/src/ui/characterinfoview.js +71 -71
- package/src/ui/specialcharactersnavigationview.d.ts +59 -59
- package/src/ui/specialcharactersnavigationview.js +95 -95
- package/src/ui/specialcharactersview.d.ts +65 -65
- package/src/ui/specialcharactersview.js +78 -78
|
@@ -1,35 +1,35 @@
|
|
|
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 special-characters/ui/characterinfoview
|
|
7
|
-
*/
|
|
8
|
-
import type { Locale } from 'ckeditor5/src/utils';
|
|
9
|
-
import { View } from 'ckeditor5/src/ui';
|
|
10
|
-
import '../../theme/characterinfo.css';
|
|
11
|
-
/**
|
|
12
|
-
* The view displaying detailed information about a special character glyph, e.g. upon
|
|
13
|
-
* hovering it with a mouse.
|
|
14
|
-
*/
|
|
15
|
-
export default class CharacterInfoView extends View<HTMLDivElement> {
|
|
16
|
-
/**
|
|
17
|
-
* The character whose information is displayed by the view. For instance, "∑" or "¿".
|
|
18
|
-
*
|
|
19
|
-
* @observable
|
|
20
|
-
*/
|
|
21
|
-
character: string | null;
|
|
22
|
-
/**
|
|
23
|
-
* The name of the {@link #character}. For instance, "N-ary summation" or "Inverted question mark".
|
|
24
|
-
*
|
|
25
|
-
* @observable
|
|
26
|
-
*/
|
|
27
|
-
name: string | null;
|
|
28
|
-
/**
|
|
29
|
-
* The "Unicode string" of the {@link #character}. For instance "U+0061".
|
|
30
|
-
*
|
|
31
|
-
* @observable
|
|
32
|
-
*/
|
|
33
|
-
readonly code: string;
|
|
34
|
-
constructor(locale: Locale);
|
|
35
|
-
}
|
|
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 special-characters/ui/characterinfoview
|
|
7
|
+
*/
|
|
8
|
+
import type { Locale } from 'ckeditor5/src/utils';
|
|
9
|
+
import { View } from 'ckeditor5/src/ui';
|
|
10
|
+
import '../../theme/characterinfo.css';
|
|
11
|
+
/**
|
|
12
|
+
* The view displaying detailed information about a special character glyph, e.g. upon
|
|
13
|
+
* hovering it with a mouse.
|
|
14
|
+
*/
|
|
15
|
+
export default class CharacterInfoView extends View<HTMLDivElement> {
|
|
16
|
+
/**
|
|
17
|
+
* The character whose information is displayed by the view. For instance, "∑" or "¿".
|
|
18
|
+
*
|
|
19
|
+
* @observable
|
|
20
|
+
*/
|
|
21
|
+
character: string | null;
|
|
22
|
+
/**
|
|
23
|
+
* The name of the {@link #character}. For instance, "N-ary summation" or "Inverted question mark".
|
|
24
|
+
*
|
|
25
|
+
* @observable
|
|
26
|
+
*/
|
|
27
|
+
name: string | null;
|
|
28
|
+
/**
|
|
29
|
+
* The "Unicode string" of the {@link #character}. For instance "U+0061".
|
|
30
|
+
*
|
|
31
|
+
* @observable
|
|
32
|
+
*/
|
|
33
|
+
readonly code: string;
|
|
34
|
+
constructor(locale: Locale);
|
|
35
|
+
}
|
|
@@ -1,71 +1,71 @@
|
|
|
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 { View } from 'ckeditor5/src/ui';
|
|
6
|
-
import '../../theme/characterinfo.css';
|
|
7
|
-
/**
|
|
8
|
-
* The view displaying detailed information about a special character glyph, e.g. upon
|
|
9
|
-
* hovering it with a mouse.
|
|
10
|
-
*/
|
|
11
|
-
export default class CharacterInfoView extends View {
|
|
12
|
-
constructor(locale) {
|
|
13
|
-
super(locale);
|
|
14
|
-
const bind = this.bindTemplate;
|
|
15
|
-
this.set('character', null);
|
|
16
|
-
this.set('name', null);
|
|
17
|
-
this.bind('code').to(this, 'character', characterToUnicodeString);
|
|
18
|
-
this.setTemplate({
|
|
19
|
-
tag: 'div',
|
|
20
|
-
children: [
|
|
21
|
-
{
|
|
22
|
-
tag: 'span',
|
|
23
|
-
attributes: {
|
|
24
|
-
class: [
|
|
25
|
-
'ck-character-info__name'
|
|
26
|
-
]
|
|
27
|
-
},
|
|
28
|
-
children: [
|
|
29
|
-
{
|
|
30
|
-
// Note: ZWSP to prevent vertical collapsing.
|
|
31
|
-
text: bind.to('name', name => name ? name : '\u200B')
|
|
32
|
-
}
|
|
33
|
-
]
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
tag: 'span',
|
|
37
|
-
attributes: {
|
|
38
|
-
class: [
|
|
39
|
-
'ck-character-info__code'
|
|
40
|
-
]
|
|
41
|
-
},
|
|
42
|
-
children: [
|
|
43
|
-
{
|
|
44
|
-
text: bind.to('code')
|
|
45
|
-
}
|
|
46
|
-
]
|
|
47
|
-
}
|
|
48
|
-
],
|
|
49
|
-
attributes: {
|
|
50
|
-
class: [
|
|
51
|
-
'ck',
|
|
52
|
-
'ck-character-info'
|
|
53
|
-
]
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
/**
|
|
59
|
-
* Converts a character into a "Unicode string", for instance:
|
|
60
|
-
*
|
|
61
|
-
* "$" -> "U+0024"
|
|
62
|
-
*
|
|
63
|
-
* Returns an empty string when the character is `null`.
|
|
64
|
-
*/
|
|
65
|
-
function characterToUnicodeString(character) {
|
|
66
|
-
if (character === null) {
|
|
67
|
-
return '';
|
|
68
|
-
}
|
|
69
|
-
const hexCode = character.codePointAt(0).toString(16);
|
|
70
|
-
return 'U+' + ('0000' + hexCode).slice(-4);
|
|
71
|
-
}
|
|
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 { View } from 'ckeditor5/src/ui';
|
|
6
|
+
import '../../theme/characterinfo.css';
|
|
7
|
+
/**
|
|
8
|
+
* The view displaying detailed information about a special character glyph, e.g. upon
|
|
9
|
+
* hovering it with a mouse.
|
|
10
|
+
*/
|
|
11
|
+
export default class CharacterInfoView extends View {
|
|
12
|
+
constructor(locale) {
|
|
13
|
+
super(locale);
|
|
14
|
+
const bind = this.bindTemplate;
|
|
15
|
+
this.set('character', null);
|
|
16
|
+
this.set('name', null);
|
|
17
|
+
this.bind('code').to(this, 'character', characterToUnicodeString);
|
|
18
|
+
this.setTemplate({
|
|
19
|
+
tag: 'div',
|
|
20
|
+
children: [
|
|
21
|
+
{
|
|
22
|
+
tag: 'span',
|
|
23
|
+
attributes: {
|
|
24
|
+
class: [
|
|
25
|
+
'ck-character-info__name'
|
|
26
|
+
]
|
|
27
|
+
},
|
|
28
|
+
children: [
|
|
29
|
+
{
|
|
30
|
+
// Note: ZWSP to prevent vertical collapsing.
|
|
31
|
+
text: bind.to('name', name => name ? name : '\u200B')
|
|
32
|
+
}
|
|
33
|
+
]
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
tag: 'span',
|
|
37
|
+
attributes: {
|
|
38
|
+
class: [
|
|
39
|
+
'ck-character-info__code'
|
|
40
|
+
]
|
|
41
|
+
},
|
|
42
|
+
children: [
|
|
43
|
+
{
|
|
44
|
+
text: bind.to('code')
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
],
|
|
49
|
+
attributes: {
|
|
50
|
+
class: [
|
|
51
|
+
'ck',
|
|
52
|
+
'ck-character-info'
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Converts a character into a "Unicode string", for instance:
|
|
60
|
+
*
|
|
61
|
+
* "$" -> "U+0024"
|
|
62
|
+
*
|
|
63
|
+
* Returns an empty string when the character is `null`.
|
|
64
|
+
*/
|
|
65
|
+
function characterToUnicodeString(character) {
|
|
66
|
+
if (character === null) {
|
|
67
|
+
return '';
|
|
68
|
+
}
|
|
69
|
+
const hexCode = character.codePointAt(0).toString(16);
|
|
70
|
+
return 'U+' + ('0000' + hexCode).slice(-4);
|
|
71
|
+
}
|
|
@@ -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 special-characters/ui/specialcharactersnavigationview
|
|
7
|
-
*/
|
|
8
|
-
import { type Locale } from 'ckeditor5/src/utils';
|
|
9
|
-
import { FormHeaderView, type DropdownView } from 'ckeditor5/src/ui';
|
|
10
|
-
/**
|
|
11
|
-
* A class representing the navigation part of the special characters UI. It is responsible
|
|
12
|
-
* for describing the feature and allowing the user to select a particular character group.
|
|
13
|
-
*/
|
|
14
|
-
export default class SpecialCharactersNavigationView extends FormHeaderView {
|
|
15
|
-
/**
|
|
16
|
-
* A dropdown that allows selecting a group of special characters to be displayed.
|
|
17
|
-
*/
|
|
18
|
-
groupDropdownView: GroupDropdownView;
|
|
19
|
-
/**
|
|
20
|
-
* Creates an instance of the {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}
|
|
21
|
-
* class.
|
|
22
|
-
*
|
|
23
|
-
* @param locale The localization services instance.
|
|
24
|
-
* @param groupNames The names of the character groups and their displayed labels.
|
|
25
|
-
*/
|
|
26
|
-
constructor(locale: Locale, groupNames: GroupNames);
|
|
27
|
-
/**
|
|
28
|
-
* Returns the name of the character group currently selected in the {@link #groupDropdownView}.
|
|
29
|
-
*/
|
|
30
|
-
get currentGroupName(): string;
|
|
31
|
-
/**
|
|
32
|
-
* Focuses the character categories dropdown.
|
|
33
|
-
*/
|
|
34
|
-
focus(): void;
|
|
35
|
-
/**
|
|
36
|
-
* Returns a dropdown that allows selecting character groups.
|
|
37
|
-
*
|
|
38
|
-
* @param groupNames The names of the character groups and their displayed labels.
|
|
39
|
-
*/
|
|
40
|
-
private _createGroupDropdown;
|
|
41
|
-
/**
|
|
42
|
-
* Returns list item definitions to be used in the character group dropdown
|
|
43
|
-
* representing specific character groups.
|
|
44
|
-
*
|
|
45
|
-
* @param dropdown Dropdown view element
|
|
46
|
-
* @param groupNames The names of the character groups and their displayed labels.
|
|
47
|
-
*/
|
|
48
|
-
private _getCharacterGroupListItemDefinitions;
|
|
49
|
-
}
|
|
50
|
-
/**
|
|
51
|
-
* The names of the character groups and their displayed labels.
|
|
52
|
-
*/
|
|
53
|
-
export type GroupNames = Map<string, string>;
|
|
54
|
-
/**
|
|
55
|
-
* `DropdownView` with additional field for the name of the currectly selected character group.
|
|
56
|
-
*/
|
|
57
|
-
export type GroupDropdownView = DropdownView & {
|
|
58
|
-
value: string;
|
|
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 special-characters/ui/specialcharactersnavigationview
|
|
7
|
+
*/
|
|
8
|
+
import { type Locale } from 'ckeditor5/src/utils';
|
|
9
|
+
import { FormHeaderView, type DropdownView } from 'ckeditor5/src/ui';
|
|
10
|
+
/**
|
|
11
|
+
* A class representing the navigation part of the special characters UI. It is responsible
|
|
12
|
+
* for describing the feature and allowing the user to select a particular character group.
|
|
13
|
+
*/
|
|
14
|
+
export default class SpecialCharactersNavigationView extends FormHeaderView {
|
|
15
|
+
/**
|
|
16
|
+
* A dropdown that allows selecting a group of special characters to be displayed.
|
|
17
|
+
*/
|
|
18
|
+
groupDropdownView: GroupDropdownView;
|
|
19
|
+
/**
|
|
20
|
+
* Creates an instance of the {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}
|
|
21
|
+
* class.
|
|
22
|
+
*
|
|
23
|
+
* @param locale The localization services instance.
|
|
24
|
+
* @param groupNames The names of the character groups and their displayed labels.
|
|
25
|
+
*/
|
|
26
|
+
constructor(locale: Locale, groupNames: GroupNames);
|
|
27
|
+
/**
|
|
28
|
+
* Returns the name of the character group currently selected in the {@link #groupDropdownView}.
|
|
29
|
+
*/
|
|
30
|
+
get currentGroupName(): string;
|
|
31
|
+
/**
|
|
32
|
+
* Focuses the character categories dropdown.
|
|
33
|
+
*/
|
|
34
|
+
focus(): void;
|
|
35
|
+
/**
|
|
36
|
+
* Returns a dropdown that allows selecting character groups.
|
|
37
|
+
*
|
|
38
|
+
* @param groupNames The names of the character groups and their displayed labels.
|
|
39
|
+
*/
|
|
40
|
+
private _createGroupDropdown;
|
|
41
|
+
/**
|
|
42
|
+
* Returns list item definitions to be used in the character group dropdown
|
|
43
|
+
* representing specific character groups.
|
|
44
|
+
*
|
|
45
|
+
* @param dropdown Dropdown view element
|
|
46
|
+
* @param groupNames The names of the character groups and their displayed labels.
|
|
47
|
+
*/
|
|
48
|
+
private _getCharacterGroupListItemDefinitions;
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* The names of the character groups and their displayed labels.
|
|
52
|
+
*/
|
|
53
|
+
export type GroupNames = Map<string, string>;
|
|
54
|
+
/**
|
|
55
|
+
* `DropdownView` with additional field for the name of the currectly selected character group.
|
|
56
|
+
*/
|
|
57
|
+
export type GroupDropdownView = DropdownView & {
|
|
58
|
+
value: string;
|
|
59
|
+
};
|
|
@@ -1,95 +1,95 @@
|
|
|
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 special-characters/ui/specialcharactersnavigationview
|
|
7
|
-
*/
|
|
8
|
-
import { Collection } from 'ckeditor5/src/utils';
|
|
9
|
-
import { addListToDropdown, createDropdown, Model, FormHeaderView } from 'ckeditor5/src/ui';
|
|
10
|
-
/**
|
|
11
|
-
* A class representing the navigation part of the special characters UI. It is responsible
|
|
12
|
-
* for describing the feature and allowing the user to select a particular character group.
|
|
13
|
-
*/
|
|
14
|
-
export default class SpecialCharactersNavigationView extends FormHeaderView {
|
|
15
|
-
/**
|
|
16
|
-
* Creates an instance of the {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}
|
|
17
|
-
* class.
|
|
18
|
-
*
|
|
19
|
-
* @param locale The localization services instance.
|
|
20
|
-
* @param groupNames The names of the character groups and their displayed labels.
|
|
21
|
-
*/
|
|
22
|
-
constructor(locale, groupNames) {
|
|
23
|
-
super(locale);
|
|
24
|
-
const t = locale.t;
|
|
25
|
-
this.set('class', 'ck-special-characters-navigation');
|
|
26
|
-
this.groupDropdownView = this._createGroupDropdown(groupNames);
|
|
27
|
-
this.groupDropdownView.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
|
|
28
|
-
this.label = t('Special characters');
|
|
29
|
-
this.children.add(this.groupDropdownView);
|
|
30
|
-
}
|
|
31
|
-
/**
|
|
32
|
-
* Returns the name of the character group currently selected in the {@link #groupDropdownView}.
|
|
33
|
-
*/
|
|
34
|
-
get currentGroupName() {
|
|
35
|
-
return this.groupDropdownView.value;
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Focuses the character categories dropdown.
|
|
39
|
-
*/
|
|
40
|
-
focus() {
|
|
41
|
-
this.groupDropdownView.focus();
|
|
42
|
-
}
|
|
43
|
-
/**
|
|
44
|
-
* Returns a dropdown that allows selecting character groups.
|
|
45
|
-
*
|
|
46
|
-
* @param groupNames The names of the character groups and their displayed labels.
|
|
47
|
-
*/
|
|
48
|
-
_createGroupDropdown(groupNames) {
|
|
49
|
-
const locale = this.locale;
|
|
50
|
-
const t = locale.t;
|
|
51
|
-
const dropdown = createDropdown(locale);
|
|
52
|
-
const groupDefinitions = this._getCharacterGroupListItemDefinitions(dropdown, groupNames);
|
|
53
|
-
const accessibleLabel = t('Character categories');
|
|
54
|
-
dropdown.set('value', groupDefinitions.first.model.name);
|
|
55
|
-
dropdown.buttonView.bind('label').to(dropdown, 'value', value => groupNames.get(value));
|
|
56
|
-
dropdown.buttonView.set({
|
|
57
|
-
isOn: false,
|
|
58
|
-
withText: true,
|
|
59
|
-
tooltip: accessibleLabel,
|
|
60
|
-
class: ['ck-dropdown__button_label-width_auto'],
|
|
61
|
-
ariaLabel: accessibleLabel,
|
|
62
|
-
ariaLabelledBy: undefined
|
|
63
|
-
});
|
|
64
|
-
dropdown.on('execute', evt => {
|
|
65
|
-
dropdown.value = evt.source.name;
|
|
66
|
-
});
|
|
67
|
-
dropdown.delegate('execute').to(this);
|
|
68
|
-
addListToDropdown(dropdown, groupDefinitions, {
|
|
69
|
-
ariaLabel: accessibleLabel,
|
|
70
|
-
role: 'menu'
|
|
71
|
-
});
|
|
72
|
-
return dropdown;
|
|
73
|
-
}
|
|
74
|
-
/**
|
|
75
|
-
* Returns list item definitions to be used in the character group dropdown
|
|
76
|
-
* representing specific character groups.
|
|
77
|
-
*
|
|
78
|
-
* @param dropdown Dropdown view element
|
|
79
|
-
* @param groupNames The names of the character groups and their displayed labels.
|
|
80
|
-
*/
|
|
81
|
-
_getCharacterGroupListItemDefinitions(dropdown, groupNames) {
|
|
82
|
-
const groupDefs = new Collection();
|
|
83
|
-
for (const [name, label] of groupNames) {
|
|
84
|
-
const model = new Model({
|
|
85
|
-
name,
|
|
86
|
-
label,
|
|
87
|
-
withText: true,
|
|
88
|
-
role: 'menuitemradio'
|
|
89
|
-
});
|
|
90
|
-
model.bind('isOn').to(dropdown, 'value', value => value === model.name);
|
|
91
|
-
groupDefs.add({ type: 'button', model });
|
|
92
|
-
}
|
|
93
|
-
return groupDefs;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
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 special-characters/ui/specialcharactersnavigationview
|
|
7
|
+
*/
|
|
8
|
+
import { Collection } from 'ckeditor5/src/utils';
|
|
9
|
+
import { addListToDropdown, createDropdown, Model, FormHeaderView } from 'ckeditor5/src/ui';
|
|
10
|
+
/**
|
|
11
|
+
* A class representing the navigation part of the special characters UI. It is responsible
|
|
12
|
+
* for describing the feature and allowing the user to select a particular character group.
|
|
13
|
+
*/
|
|
14
|
+
export default class SpecialCharactersNavigationView extends FormHeaderView {
|
|
15
|
+
/**
|
|
16
|
+
* Creates an instance of the {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}
|
|
17
|
+
* class.
|
|
18
|
+
*
|
|
19
|
+
* @param locale The localization services instance.
|
|
20
|
+
* @param groupNames The names of the character groups and their displayed labels.
|
|
21
|
+
*/
|
|
22
|
+
constructor(locale, groupNames) {
|
|
23
|
+
super(locale);
|
|
24
|
+
const t = locale.t;
|
|
25
|
+
this.set('class', 'ck-special-characters-navigation');
|
|
26
|
+
this.groupDropdownView = this._createGroupDropdown(groupNames);
|
|
27
|
+
this.groupDropdownView.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
|
|
28
|
+
this.label = t('Special characters');
|
|
29
|
+
this.children.add(this.groupDropdownView);
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Returns the name of the character group currently selected in the {@link #groupDropdownView}.
|
|
33
|
+
*/
|
|
34
|
+
get currentGroupName() {
|
|
35
|
+
return this.groupDropdownView.value;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Focuses the character categories dropdown.
|
|
39
|
+
*/
|
|
40
|
+
focus() {
|
|
41
|
+
this.groupDropdownView.focus();
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Returns a dropdown that allows selecting character groups.
|
|
45
|
+
*
|
|
46
|
+
* @param groupNames The names of the character groups and their displayed labels.
|
|
47
|
+
*/
|
|
48
|
+
_createGroupDropdown(groupNames) {
|
|
49
|
+
const locale = this.locale;
|
|
50
|
+
const t = locale.t;
|
|
51
|
+
const dropdown = createDropdown(locale);
|
|
52
|
+
const groupDefinitions = this._getCharacterGroupListItemDefinitions(dropdown, groupNames);
|
|
53
|
+
const accessibleLabel = t('Character categories');
|
|
54
|
+
dropdown.set('value', groupDefinitions.first.model.name);
|
|
55
|
+
dropdown.buttonView.bind('label').to(dropdown, 'value', value => groupNames.get(value));
|
|
56
|
+
dropdown.buttonView.set({
|
|
57
|
+
isOn: false,
|
|
58
|
+
withText: true,
|
|
59
|
+
tooltip: accessibleLabel,
|
|
60
|
+
class: ['ck-dropdown__button_label-width_auto'],
|
|
61
|
+
ariaLabel: accessibleLabel,
|
|
62
|
+
ariaLabelledBy: undefined
|
|
63
|
+
});
|
|
64
|
+
dropdown.on('execute', evt => {
|
|
65
|
+
dropdown.value = evt.source.name;
|
|
66
|
+
});
|
|
67
|
+
dropdown.delegate('execute').to(this);
|
|
68
|
+
addListToDropdown(dropdown, groupDefinitions, {
|
|
69
|
+
ariaLabel: accessibleLabel,
|
|
70
|
+
role: 'menu'
|
|
71
|
+
});
|
|
72
|
+
return dropdown;
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Returns list item definitions to be used in the character group dropdown
|
|
76
|
+
* representing specific character groups.
|
|
77
|
+
*
|
|
78
|
+
* @param dropdown Dropdown view element
|
|
79
|
+
* @param groupNames The names of the character groups and their displayed labels.
|
|
80
|
+
*/
|
|
81
|
+
_getCharacterGroupListItemDefinitions(dropdown, groupNames) {
|
|
82
|
+
const groupDefs = new Collection();
|
|
83
|
+
for (const [name, label] of groupNames) {
|
|
84
|
+
const model = new Model({
|
|
85
|
+
name,
|
|
86
|
+
label,
|
|
87
|
+
withText: true,
|
|
88
|
+
role: 'menuitemradio'
|
|
89
|
+
});
|
|
90
|
+
model.bind('isOn').to(dropdown, 'value', value => value === model.name);
|
|
91
|
+
groupDefs.add({ type: 'button', model });
|
|
92
|
+
}
|
|
93
|
+
return groupDefs;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
@@ -1,65 +1,65 @@
|
|
|
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 special-characters/ui/specialcharactersview
|
|
7
|
-
*/
|
|
8
|
-
import { View, FocusCycler, type ViewCollection } from 'ckeditor5/src/ui';
|
|
9
|
-
import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
|
|
10
|
-
import type CharacterGridView from './charactergridview';
|
|
11
|
-
import type CharacterInfoView from './characterinfoview';
|
|
12
|
-
import type SpecialCharactersNavigationView from './specialcharactersnavigationview';
|
|
13
|
-
/**
|
|
14
|
-
* A view that glues pieces of the special characters dropdown panel together:
|
|
15
|
-
*
|
|
16
|
-
* * the navigation view (allows selecting the category),
|
|
17
|
-
* * the grid view (displays characters as a grid),
|
|
18
|
-
* * and the info view (displays detailed info about a specific character).
|
|
19
|
-
*/
|
|
20
|
-
export default class SpecialCharactersView extends View<HTMLDivElement> {
|
|
21
|
-
/**
|
|
22
|
-
* A collection of the focusable children of the view.
|
|
23
|
-
*/
|
|
24
|
-
readonly items: ViewCollection;
|
|
25
|
-
/**
|
|
26
|
-
* Tracks information about the DOM focus in the view.
|
|
27
|
-
*/
|
|
28
|
-
readonly focusTracker: FocusTracker;
|
|
29
|
-
/**
|
|
30
|
-
* An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
|
|
31
|
-
*/
|
|
32
|
-
readonly keystrokes: KeystrokeHandler;
|
|
33
|
-
/**
|
|
34
|
-
* Helps cycling over focusable {@link #items} in the view.
|
|
35
|
-
*/
|
|
36
|
-
protected readonly _focusCycler: FocusCycler;
|
|
37
|
-
/**
|
|
38
|
-
* An instance of the `SpecialCharactersNavigationView`.
|
|
39
|
-
*/
|
|
40
|
-
navigationView: SpecialCharactersNavigationView;
|
|
41
|
-
/**
|
|
42
|
-
* An instance of the `CharacterGridView`.
|
|
43
|
-
*/
|
|
44
|
-
gridView: CharacterGridView;
|
|
45
|
-
/**
|
|
46
|
-
* An instance of the `CharacterInfoView`.
|
|
47
|
-
*/
|
|
48
|
-
infoView: CharacterInfoView;
|
|
49
|
-
/**
|
|
50
|
-
* Creates an instance of the `SpecialCharactersView`.
|
|
51
|
-
*/
|
|
52
|
-
constructor(locale: Locale, navigationView: SpecialCharactersNavigationView, gridView: CharacterGridView, infoView: CharacterInfoView);
|
|
53
|
-
/**
|
|
54
|
-
* @inheritDoc
|
|
55
|
-
*/
|
|
56
|
-
render(): void;
|
|
57
|
-
/**
|
|
58
|
-
* @inheritDoc
|
|
59
|
-
*/
|
|
60
|
-
destroy(): void;
|
|
61
|
-
/**
|
|
62
|
-
* Focuses the first focusable in {@link #items}.
|
|
63
|
-
*/
|
|
64
|
-
focus(): void;
|
|
65
|
-
}
|
|
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 special-characters/ui/specialcharactersview
|
|
7
|
+
*/
|
|
8
|
+
import { View, FocusCycler, type ViewCollection } from 'ckeditor5/src/ui';
|
|
9
|
+
import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
|
|
10
|
+
import type CharacterGridView from './charactergridview';
|
|
11
|
+
import type CharacterInfoView from './characterinfoview';
|
|
12
|
+
import type SpecialCharactersNavigationView from './specialcharactersnavigationview';
|
|
13
|
+
/**
|
|
14
|
+
* A view that glues pieces of the special characters dropdown panel together:
|
|
15
|
+
*
|
|
16
|
+
* * the navigation view (allows selecting the category),
|
|
17
|
+
* * the grid view (displays characters as a grid),
|
|
18
|
+
* * and the info view (displays detailed info about a specific character).
|
|
19
|
+
*/
|
|
20
|
+
export default class SpecialCharactersView extends View<HTMLDivElement> {
|
|
21
|
+
/**
|
|
22
|
+
* A collection of the focusable children of the view.
|
|
23
|
+
*/
|
|
24
|
+
readonly items: ViewCollection;
|
|
25
|
+
/**
|
|
26
|
+
* Tracks information about the DOM focus in the view.
|
|
27
|
+
*/
|
|
28
|
+
readonly focusTracker: FocusTracker;
|
|
29
|
+
/**
|
|
30
|
+
* An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
|
|
31
|
+
*/
|
|
32
|
+
readonly keystrokes: KeystrokeHandler;
|
|
33
|
+
/**
|
|
34
|
+
* Helps cycling over focusable {@link #items} in the view.
|
|
35
|
+
*/
|
|
36
|
+
protected readonly _focusCycler: FocusCycler;
|
|
37
|
+
/**
|
|
38
|
+
* An instance of the `SpecialCharactersNavigationView`.
|
|
39
|
+
*/
|
|
40
|
+
navigationView: SpecialCharactersNavigationView;
|
|
41
|
+
/**
|
|
42
|
+
* An instance of the `CharacterGridView`.
|
|
43
|
+
*/
|
|
44
|
+
gridView: CharacterGridView;
|
|
45
|
+
/**
|
|
46
|
+
* An instance of the `CharacterInfoView`.
|
|
47
|
+
*/
|
|
48
|
+
infoView: CharacterInfoView;
|
|
49
|
+
/**
|
|
50
|
+
* Creates an instance of the `SpecialCharactersView`.
|
|
51
|
+
*/
|
|
52
|
+
constructor(locale: Locale, navigationView: SpecialCharactersNavigationView, gridView: CharacterGridView, infoView: CharacterInfoView);
|
|
53
|
+
/**
|
|
54
|
+
* @inheritDoc
|
|
55
|
+
*/
|
|
56
|
+
render(): void;
|
|
57
|
+
/**
|
|
58
|
+
* @inheritDoc
|
|
59
|
+
*/
|
|
60
|
+
destroy(): void;
|
|
61
|
+
/**
|
|
62
|
+
* Focuses the first focusable in {@link #items}.
|
|
63
|
+
*/
|
|
64
|
+
focus(): void;
|
|
65
|
+
}
|