@ckeditor/ckeditor5-ui 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/package.json +3 -3
- package/src/augmentation.d.ts +86 -86
- package/src/augmentation.js +5 -5
- 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/buttonview.d.ts +177 -177
- package/src/button/buttonview.js +231 -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 +110 -110
- package/src/colorpicker/colorpickerview.js +253 -253
- package/src/colorpicker/utils.d.ts +35 -35
- package/src/colorpicker/utils.js +99 -99
- 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 +96 -96
- package/src/dropdown/dropdownview.d.ts +315 -315
- package/src/dropdown/dropdownview.js +378 -378
- package/src/dropdown/utils.d.ts +221 -221
- package/src/dropdown/utils.js +434 -434
- 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 +294 -294
- package/src/focuscycler.d.ts +183 -183
- package/src/focuscycler.js +220 -220
- package/src/formheader/formheaderview.d.ts +53 -53
- package/src/formheader/formheaderview.js +63 -63
- package/src/icon/iconview.d.ts +78 -78
- package/src/icon/iconview.js +112 -112
- package/src/iframe/iframeview.d.ts +50 -50
- package/src/iframe/iframeview.js +63 -63
- package/src/index.d.ts +62 -62
- package/src/index.js +61 -61
- package/src/input/inputview.d.ts +121 -121
- package/src/input/inputview.js +106 -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 +182 -182
- package/src/labeledfield/labeledfieldview.js +157 -157
- package/src/labeledfield/utils.d.ts +93 -93
- package/src/labeledfield/utils.js +131 -131
- package/src/labeledinput/labeledinputview.d.ts +125 -125
- package/src/labeledinput/labeledinputview.js +125 -125
- package/src/list/listitemview.d.ts +35 -35
- package/src/list/listitemview.js +40 -40
- package/src/list/listseparatorview.d.ts +18 -18
- package/src/list/listseparatorview.js +28 -28
- package/src/list/listview.d.ts +65 -65
- package/src/list/listview.js +90 -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 +988 -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 +132 -132
- package/src/panel/sticky/stickypanelview.js +139 -139
- package/src/template.d.ts +942 -942
- package/src/template.js +1294 -1294
- 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 +391 -391
- package/src/toolbar/normalizetoolbarconfig.d.ts +39 -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 +265 -265
- package/src/toolbar/toolbarview.js +717 -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
|
@@ -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/colorgrid/colortileview
|
|
7
|
-
*/
|
|
8
|
-
import ButtonView from '../button/buttonview';
|
|
9
|
-
import type { Locale } from '@ckeditor/ckeditor5-utils';
|
|
10
|
-
/**
|
|
11
|
-
* This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
|
|
12
|
-
*/
|
|
13
|
-
export default class ColorTileView extends ButtonView {
|
|
14
|
-
/**
|
|
15
|
-
* String representing a color shown as tile's background.
|
|
16
|
-
*/
|
|
17
|
-
color: string | undefined;
|
|
18
|
-
/**
|
|
19
|
-
* A flag that toggles a special CSS class responsible for displaying
|
|
20
|
-
* a border around the button.
|
|
21
|
-
*/
|
|
22
|
-
hasBorder: boolean;
|
|
23
|
-
constructor(locale?: Locale);
|
|
24
|
-
/**
|
|
25
|
-
* @inheritDoc
|
|
26
|
-
*/
|
|
27
|
-
render(): void;
|
|
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/colorgrid/colortileview
|
|
7
|
+
*/
|
|
8
|
+
import ButtonView from '../button/buttonview';
|
|
9
|
+
import type { Locale } from '@ckeditor/ckeditor5-utils';
|
|
10
|
+
/**
|
|
11
|
+
* This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
|
|
12
|
+
*/
|
|
13
|
+
export default class ColorTileView extends ButtonView {
|
|
14
|
+
/**
|
|
15
|
+
* String representing a color shown as tile's background.
|
|
16
|
+
*/
|
|
17
|
+
color: string | undefined;
|
|
18
|
+
/**
|
|
19
|
+
* A flag that toggles a special CSS class responsible for displaying
|
|
20
|
+
* a border around the button.
|
|
21
|
+
*/
|
|
22
|
+
hasBorder: boolean;
|
|
23
|
+
constructor(locale?: Locale);
|
|
24
|
+
/**
|
|
25
|
+
* @inheritDoc
|
|
26
|
+
*/
|
|
27
|
+
render(): void;
|
|
28
|
+
}
|
|
@@ -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/colorgrid/colortileview
|
|
7
|
-
*/
|
|
8
|
-
import ButtonView from '../button/buttonview';
|
|
9
|
-
import checkIcon from '../../theme/icons/color-tile-check.svg';
|
|
10
|
-
/**
|
|
11
|
-
* This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
|
|
12
|
-
*/
|
|
13
|
-
export default class ColorTileView extends ButtonView {
|
|
14
|
-
constructor(locale) {
|
|
15
|
-
super(locale);
|
|
16
|
-
const bind = this.bindTemplate;
|
|
17
|
-
this.set('color', undefined);
|
|
18
|
-
this.set('hasBorder', false);
|
|
19
|
-
this.icon = checkIcon;
|
|
20
|
-
this.extendTemplate({
|
|
21
|
-
attributes: {
|
|
22
|
-
style: {
|
|
23
|
-
backgroundColor: bind.to('color')
|
|
24
|
-
},
|
|
25
|
-
class: [
|
|
26
|
-
'ck',
|
|
27
|
-
'ck-color-grid__tile',
|
|
28
|
-
bind.if('hasBorder', 'ck-color-table__color-tile_bordered')
|
|
29
|
-
]
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
/**
|
|
34
|
-
* @inheritDoc
|
|
35
|
-
*/
|
|
36
|
-
render() {
|
|
37
|
-
super.render();
|
|
38
|
-
this.iconView.fillColor = 'hsl(0, 0%, 100%)';
|
|
39
|
-
}
|
|
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/colorgrid/colortileview
|
|
7
|
+
*/
|
|
8
|
+
import ButtonView from '../button/buttonview';
|
|
9
|
+
import checkIcon from '../../theme/icons/color-tile-check.svg';
|
|
10
|
+
/**
|
|
11
|
+
* This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
|
|
12
|
+
*/
|
|
13
|
+
export default class ColorTileView extends ButtonView {
|
|
14
|
+
constructor(locale) {
|
|
15
|
+
super(locale);
|
|
16
|
+
const bind = this.bindTemplate;
|
|
17
|
+
this.set('color', undefined);
|
|
18
|
+
this.set('hasBorder', false);
|
|
19
|
+
this.icon = checkIcon;
|
|
20
|
+
this.extendTemplate({
|
|
21
|
+
attributes: {
|
|
22
|
+
style: {
|
|
23
|
+
backgroundColor: bind.to('color')
|
|
24
|
+
},
|
|
25
|
+
class: [
|
|
26
|
+
'ck',
|
|
27
|
+
'ck-color-grid__tile',
|
|
28
|
+
bind.if('hasBorder', 'ck-color-table__color-tile_bordered')
|
|
29
|
+
]
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* @inheritDoc
|
|
35
|
+
*/
|
|
36
|
+
render() {
|
|
37
|
+
super.render();
|
|
38
|
+
this.iconView.fillColor = 'hsl(0, 0%, 100%)';
|
|
39
|
+
}
|
|
40
|
+
}
|
package/src/colorgrid/utils.d.ts
CHANGED
|
@@ -1,47 +1,47 @@
|
|
|
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/colorgrid/utils
|
|
7
|
-
*/
|
|
8
|
-
import type { Locale } from '@ckeditor/ckeditor5-utils';
|
|
9
|
-
export type ColorOption = string | {
|
|
10
|
-
color: string;
|
|
11
|
-
label?: string;
|
|
12
|
-
hasBorder?: boolean;
|
|
13
|
-
};
|
|
14
|
-
export interface NormalizedColorOption {
|
|
15
|
-
model: string;
|
|
16
|
-
label: string;
|
|
17
|
-
hasBorder: boolean;
|
|
18
|
-
view: {
|
|
19
|
-
name: string;
|
|
20
|
-
styles: {
|
|
21
|
-
color: string;
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* Returns color configuration options as defined in `editor.config.(fontColor|fontBackgroundColor).colors` or
|
|
27
|
-
* `editor.config.table.(tableProperties|tableCellProperties).(background|border).colors
|
|
28
|
-
* but processed to account for editor localization in the correct language.
|
|
29
|
-
*
|
|
30
|
-
* Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
|
|
31
|
-
* when the user configuration is defined because the editor does not exist yet.
|
|
32
|
-
*
|
|
33
|
-
* @param locale The {@link module:core/editor/editor~Editor#locale} instance.
|
|
34
|
-
*/
|
|
35
|
-
export declare function getLocalizedColorOptions(locale: Locale, options: Array<NormalizedColorOption>): Array<NormalizedColorOption>;
|
|
36
|
-
/**
|
|
37
|
-
* Creates a unified color definition object from color configuration options.
|
|
38
|
-
* The object contains the information necessary to both render the UI and initialize the conversion.
|
|
39
|
-
*/
|
|
40
|
-
export declare function normalizeColorOptions(options: Array<ColorOption>): Array<NormalizedColorOption>;
|
|
41
|
-
/**
|
|
42
|
-
* Creates a normalized color definition from the user-defined configuration.
|
|
43
|
-
* The "normalization" means it will create full
|
|
44
|
-
* {@link module:ui/colorgrid/colorgridview~ColorDefinition `ColorDefinition-like`}
|
|
45
|
-
* object for string values, and add a `view` property, for each definition.
|
|
46
|
-
*/
|
|
47
|
-
export declare function normalizeSingleColorDefinition(color: ColorOption): NormalizedColorOption;
|
|
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/colorgrid/utils
|
|
7
|
+
*/
|
|
8
|
+
import type { Locale } from '@ckeditor/ckeditor5-utils';
|
|
9
|
+
export type ColorOption = string | {
|
|
10
|
+
color: string;
|
|
11
|
+
label?: string;
|
|
12
|
+
hasBorder?: boolean;
|
|
13
|
+
};
|
|
14
|
+
export interface NormalizedColorOption {
|
|
15
|
+
model: string;
|
|
16
|
+
label: string;
|
|
17
|
+
hasBorder: boolean;
|
|
18
|
+
view: {
|
|
19
|
+
name: string;
|
|
20
|
+
styles: {
|
|
21
|
+
color: string;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Returns color configuration options as defined in `editor.config.(fontColor|fontBackgroundColor).colors` or
|
|
27
|
+
* `editor.config.table.(tableProperties|tableCellProperties).(background|border).colors
|
|
28
|
+
* but processed to account for editor localization in the correct language.
|
|
29
|
+
*
|
|
30
|
+
* Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
|
|
31
|
+
* when the user configuration is defined because the editor does not exist yet.
|
|
32
|
+
*
|
|
33
|
+
* @param locale The {@link module:core/editor/editor~Editor#locale} instance.
|
|
34
|
+
*/
|
|
35
|
+
export declare function getLocalizedColorOptions(locale: Locale, options: Array<NormalizedColorOption>): Array<NormalizedColorOption>;
|
|
36
|
+
/**
|
|
37
|
+
* Creates a unified color definition object from color configuration options.
|
|
38
|
+
* The object contains the information necessary to both render the UI and initialize the conversion.
|
|
39
|
+
*/
|
|
40
|
+
export declare function normalizeColorOptions(options: Array<ColorOption>): Array<NormalizedColorOption>;
|
|
41
|
+
/**
|
|
42
|
+
* Creates a normalized color definition from the user-defined configuration.
|
|
43
|
+
* The "normalization" means it will create full
|
|
44
|
+
* {@link module:ui/colorgrid/colorgridview~ColorDefinition `ColorDefinition-like`}
|
|
45
|
+
* object for string values, and add a `view` property, for each definition.
|
|
46
|
+
*/
|
|
47
|
+
export declare function normalizeSingleColorDefinition(color: ColorOption): NormalizedColorOption;
|
package/src/colorgrid/utils.js
CHANGED
|
@@ -1,84 +1,84 @@
|
|
|
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
|
-
* Returns color configuration options as defined in `editor.config.(fontColor|fontBackgroundColor).colors` or
|
|
7
|
-
* `editor.config.table.(tableProperties|tableCellProperties).(background|border).colors
|
|
8
|
-
* but processed to account for editor localization in the correct language.
|
|
9
|
-
*
|
|
10
|
-
* Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
|
|
11
|
-
* when the user configuration is defined because the editor does not exist yet.
|
|
12
|
-
*
|
|
13
|
-
* @param locale The {@link module:core/editor/editor~Editor#locale} instance.
|
|
14
|
-
*/
|
|
15
|
-
export function getLocalizedColorOptions(locale, options) {
|
|
16
|
-
const t = locale.t;
|
|
17
|
-
const localizedColorNames = {
|
|
18
|
-
Black: t('Black'),
|
|
19
|
-
'Dim grey': t('Dim grey'),
|
|
20
|
-
Grey: t('Grey'),
|
|
21
|
-
'Light grey': t('Light grey'),
|
|
22
|
-
White: t('White'),
|
|
23
|
-
Red: t('Red'),
|
|
24
|
-
Orange: t('Orange'),
|
|
25
|
-
Yellow: t('Yellow'),
|
|
26
|
-
'Light green': t('Light green'),
|
|
27
|
-
Green: t('Green'),
|
|
28
|
-
Aquamarine: t('Aquamarine'),
|
|
29
|
-
Turquoise: t('Turquoise'),
|
|
30
|
-
'Light blue': t('Light blue'),
|
|
31
|
-
Blue: t('Blue'),
|
|
32
|
-
Purple: t('Purple')
|
|
33
|
-
};
|
|
34
|
-
return options.map(colorOption => {
|
|
35
|
-
const label = localizedColorNames[colorOption.label];
|
|
36
|
-
if (label && label != colorOption.label) {
|
|
37
|
-
colorOption.label = label;
|
|
38
|
-
}
|
|
39
|
-
return colorOption;
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
/**
|
|
43
|
-
* Creates a unified color definition object from color configuration options.
|
|
44
|
-
* The object contains the information necessary to both render the UI and initialize the conversion.
|
|
45
|
-
*/
|
|
46
|
-
export function normalizeColorOptions(options) {
|
|
47
|
-
return options
|
|
48
|
-
.map(normalizeSingleColorDefinition)
|
|
49
|
-
.filter(option => !!option);
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* Creates a normalized color definition from the user-defined configuration.
|
|
53
|
-
* The "normalization" means it will create full
|
|
54
|
-
* {@link module:ui/colorgrid/colorgridview~ColorDefinition `ColorDefinition-like`}
|
|
55
|
-
* object for string values, and add a `view` property, for each definition.
|
|
56
|
-
*/
|
|
57
|
-
export function normalizeSingleColorDefinition(color) {
|
|
58
|
-
if (typeof color === 'string') {
|
|
59
|
-
return {
|
|
60
|
-
model: color,
|
|
61
|
-
label: color,
|
|
62
|
-
hasBorder: false,
|
|
63
|
-
view: {
|
|
64
|
-
name: 'span',
|
|
65
|
-
styles: {
|
|
66
|
-
color
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
}
|
|
71
|
-
else {
|
|
72
|
-
return {
|
|
73
|
-
model: color.color,
|
|
74
|
-
label: color.label || color.color,
|
|
75
|
-
hasBorder: color.hasBorder === undefined ? false : color.hasBorder,
|
|
76
|
-
view: {
|
|
77
|
-
name: 'span',
|
|
78
|
-
styles: {
|
|
79
|
-
color: `${color.color}`
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
}
|
|
84
|
-
}
|
|
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
|
+
* Returns color configuration options as defined in `editor.config.(fontColor|fontBackgroundColor).colors` or
|
|
7
|
+
* `editor.config.table.(tableProperties|tableCellProperties).(background|border).colors
|
|
8
|
+
* but processed to account for editor localization in the correct language.
|
|
9
|
+
*
|
|
10
|
+
* Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
|
|
11
|
+
* when the user configuration is defined because the editor does not exist yet.
|
|
12
|
+
*
|
|
13
|
+
* @param locale The {@link module:core/editor/editor~Editor#locale} instance.
|
|
14
|
+
*/
|
|
15
|
+
export function getLocalizedColorOptions(locale, options) {
|
|
16
|
+
const t = locale.t;
|
|
17
|
+
const localizedColorNames = {
|
|
18
|
+
Black: t('Black'),
|
|
19
|
+
'Dim grey': t('Dim grey'),
|
|
20
|
+
Grey: t('Grey'),
|
|
21
|
+
'Light grey': t('Light grey'),
|
|
22
|
+
White: t('White'),
|
|
23
|
+
Red: t('Red'),
|
|
24
|
+
Orange: t('Orange'),
|
|
25
|
+
Yellow: t('Yellow'),
|
|
26
|
+
'Light green': t('Light green'),
|
|
27
|
+
Green: t('Green'),
|
|
28
|
+
Aquamarine: t('Aquamarine'),
|
|
29
|
+
Turquoise: t('Turquoise'),
|
|
30
|
+
'Light blue': t('Light blue'),
|
|
31
|
+
Blue: t('Blue'),
|
|
32
|
+
Purple: t('Purple')
|
|
33
|
+
};
|
|
34
|
+
return options.map(colorOption => {
|
|
35
|
+
const label = localizedColorNames[colorOption.label];
|
|
36
|
+
if (label && label != colorOption.label) {
|
|
37
|
+
colorOption.label = label;
|
|
38
|
+
}
|
|
39
|
+
return colorOption;
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Creates a unified color definition object from color configuration options.
|
|
44
|
+
* The object contains the information necessary to both render the UI and initialize the conversion.
|
|
45
|
+
*/
|
|
46
|
+
export function normalizeColorOptions(options) {
|
|
47
|
+
return options
|
|
48
|
+
.map(normalizeSingleColorDefinition)
|
|
49
|
+
.filter(option => !!option);
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Creates a normalized color definition from the user-defined configuration.
|
|
53
|
+
* The "normalization" means it will create full
|
|
54
|
+
* {@link module:ui/colorgrid/colorgridview~ColorDefinition `ColorDefinition-like`}
|
|
55
|
+
* object for string values, and add a `view` property, for each definition.
|
|
56
|
+
*/
|
|
57
|
+
export function normalizeSingleColorDefinition(color) {
|
|
58
|
+
if (typeof color === 'string') {
|
|
59
|
+
return {
|
|
60
|
+
model: color,
|
|
61
|
+
label: color,
|
|
62
|
+
hasBorder: false,
|
|
63
|
+
view: {
|
|
64
|
+
name: 'span',
|
|
65
|
+
styles: {
|
|
66
|
+
color
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
return {
|
|
73
|
+
model: color.color,
|
|
74
|
+
label: color.label || color.color,
|
|
75
|
+
hasBorder: color.hasBorder === undefined ? false : color.hasBorder,
|
|
76
|
+
view: {
|
|
77
|
+
name: 'span',
|
|
78
|
+
styles: {
|
|
79
|
+
color: `${color.color}`
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
}
|
|
@@ -1,110 +1,110 @@
|
|
|
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/colorpicker/colorpickerview
|
|
7
|
-
*/
|
|
8
|
-
import { type ColorPickerConfig } from './utils';
|
|
9
|
-
import { type Locale } from '@ckeditor/ckeditor5-utils';
|
|
10
|
-
import View from '../view';
|
|
11
|
-
import type ViewCollection from '../viewcollection';
|
|
12
|
-
import 'vanilla-colorful/hex-color-picker.js';
|
|
13
|
-
import '../../theme/components/colorpicker/colorpicker.css';
|
|
14
|
-
export default class ColorPickerView extends View {
|
|
15
|
-
/**
|
|
16
|
-
* Element with saturation and hue sliders.
|
|
17
|
-
*/
|
|
18
|
-
picker: HTMLElement;
|
|
19
|
-
/**
|
|
20
|
-
* Container for a `#` sign prefix and an input for displaying and defining custom colors
|
|
21
|
-
* in HEX format.
|
|
22
|
-
*/
|
|
23
|
-
hexInputRow: ColorPickerInputRowView;
|
|
24
|
-
/**
|
|
25
|
-
* Current color state in color picker.
|
|
26
|
-
*/
|
|
27
|
-
color: string;
|
|
28
|
-
/**
|
|
29
|
-
* List of slider views of the color picker.
|
|
30
|
-
*/
|
|
31
|
-
slidersView: ViewCollection<SliderView>;
|
|
32
|
-
/**
|
|
33
|
-
* An internal representation of a color.
|
|
34
|
-
*
|
|
35
|
-
* Since the picker uses a hex format, that's how we store it.
|
|
36
|
-
*
|
|
37
|
-
* Since this is unified color format it won't fire a change event if color is changed
|
|
38
|
-
* from `#f00` to `#ff0000` (same value, different format).
|
|
39
|
-
*
|
|
40
|
-
* @observable
|
|
41
|
-
* @private
|
|
42
|
-
*/
|
|
43
|
-
_hexColor: string;
|
|
44
|
-
/**
|
|
45
|
-
* Debounced event method. The `colorPickerEvent()` method is called the specified `waitingTime` after
|
|
46
|
-
* `debouncedPickerEvent()` is called, unless a new action happens in the meantime.
|
|
47
|
-
*/
|
|
48
|
-
private _debounceColorPickerEvent;
|
|
49
|
-
/**
|
|
50
|
-
* The output format (the one in which colors are applied in the model) of color picker.
|
|
51
|
-
*/
|
|
52
|
-
private _format;
|
|
53
|
-
/**
|
|
54
|
-
* Creates a view of color picker.
|
|
55
|
-
*
|
|
56
|
-
* @param locale
|
|
57
|
-
* @param config
|
|
58
|
-
*/
|
|
59
|
-
constructor(locale: Locale | undefined, config: ColorPickerConfig);
|
|
60
|
-
/**
|
|
61
|
-
* Renders color picker in the view.
|
|
62
|
-
*/
|
|
63
|
-
render(): void;
|
|
64
|
-
/**
|
|
65
|
-
* Focuses the first pointer in color picker.
|
|
66
|
-
*
|
|
67
|
-
*/
|
|
68
|
-
focus(): void;
|
|
69
|
-
/**
|
|
70
|
-
* Creates collection of sliders in color picker.
|
|
71
|
-
*
|
|
72
|
-
* @private
|
|
73
|
-
*/
|
|
74
|
-
private _createSlidersView;
|
|
75
|
-
/**
|
|
76
|
-
* Creates input row for defining custom colors in color picker.
|
|
77
|
-
*
|
|
78
|
-
* @private
|
|
79
|
-
*/
|
|
80
|
-
private _createInputRow;
|
|
81
|
-
/**
|
|
82
|
-
* Creates the input where user can type or paste the color in hex format.
|
|
83
|
-
*
|
|
84
|
-
* @private
|
|
85
|
-
*/
|
|
86
|
-
private _createColorInput;
|
|
87
|
-
}
|
|
88
|
-
declare class SliderView extends View {
|
|
89
|
-
/**
|
|
90
|
-
* @param element HTML elemnt of slider in color picker.
|
|
91
|
-
*/
|
|
92
|
-
constructor(element: HTMLElement);
|
|
93
|
-
/**
|
|
94
|
-
* Focuses element.
|
|
95
|
-
*/
|
|
96
|
-
focus(): void;
|
|
97
|
-
}
|
|
98
|
-
declare class ColorPickerInputRowView extends View {
|
|
99
|
-
/**
|
|
100
|
-
* A collection of row items (buttons, dropdowns, etc.).
|
|
101
|
-
*/
|
|
102
|
-
readonly children: ViewCollection;
|
|
103
|
-
/**
|
|
104
|
-
* Creates an instance of the form row class.
|
|
105
|
-
*
|
|
106
|
-
* @param locale The locale instance.
|
|
107
|
-
*/
|
|
108
|
-
constructor(locale: Locale, children?: Array<View>);
|
|
109
|
-
}
|
|
110
|
-
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
|
+
/**
|
|
6
|
+
* @module ui/colorpicker/colorpickerview
|
|
7
|
+
*/
|
|
8
|
+
import { type ColorPickerConfig } from './utils';
|
|
9
|
+
import { type Locale } from '@ckeditor/ckeditor5-utils';
|
|
10
|
+
import View from '../view';
|
|
11
|
+
import type ViewCollection from '../viewcollection';
|
|
12
|
+
import 'vanilla-colorful/hex-color-picker.js';
|
|
13
|
+
import '../../theme/components/colorpicker/colorpicker.css';
|
|
14
|
+
export default class ColorPickerView extends View {
|
|
15
|
+
/**
|
|
16
|
+
* Element with saturation and hue sliders.
|
|
17
|
+
*/
|
|
18
|
+
picker: HTMLElement;
|
|
19
|
+
/**
|
|
20
|
+
* Container for a `#` sign prefix and an input for displaying and defining custom colors
|
|
21
|
+
* in HEX format.
|
|
22
|
+
*/
|
|
23
|
+
hexInputRow: ColorPickerInputRowView;
|
|
24
|
+
/**
|
|
25
|
+
* Current color state in color picker.
|
|
26
|
+
*/
|
|
27
|
+
color: string;
|
|
28
|
+
/**
|
|
29
|
+
* List of slider views of the color picker.
|
|
30
|
+
*/
|
|
31
|
+
slidersView: ViewCollection<SliderView>;
|
|
32
|
+
/**
|
|
33
|
+
* An internal representation of a color.
|
|
34
|
+
*
|
|
35
|
+
* Since the picker uses a hex format, that's how we store it.
|
|
36
|
+
*
|
|
37
|
+
* Since this is unified color format it won't fire a change event if color is changed
|
|
38
|
+
* from `#f00` to `#ff0000` (same value, different format).
|
|
39
|
+
*
|
|
40
|
+
* @observable
|
|
41
|
+
* @private
|
|
42
|
+
*/
|
|
43
|
+
_hexColor: string;
|
|
44
|
+
/**
|
|
45
|
+
* Debounced event method. The `colorPickerEvent()` method is called the specified `waitingTime` after
|
|
46
|
+
* `debouncedPickerEvent()` is called, unless a new action happens in the meantime.
|
|
47
|
+
*/
|
|
48
|
+
private _debounceColorPickerEvent;
|
|
49
|
+
/**
|
|
50
|
+
* The output format (the one in which colors are applied in the model) of color picker.
|
|
51
|
+
*/
|
|
52
|
+
private _format;
|
|
53
|
+
/**
|
|
54
|
+
* Creates a view of color picker.
|
|
55
|
+
*
|
|
56
|
+
* @param locale
|
|
57
|
+
* @param config
|
|
58
|
+
*/
|
|
59
|
+
constructor(locale: Locale | undefined, config: ColorPickerConfig);
|
|
60
|
+
/**
|
|
61
|
+
* Renders color picker in the view.
|
|
62
|
+
*/
|
|
63
|
+
render(): void;
|
|
64
|
+
/**
|
|
65
|
+
* Focuses the first pointer in color picker.
|
|
66
|
+
*
|
|
67
|
+
*/
|
|
68
|
+
focus(): void;
|
|
69
|
+
/**
|
|
70
|
+
* Creates collection of sliders in color picker.
|
|
71
|
+
*
|
|
72
|
+
* @private
|
|
73
|
+
*/
|
|
74
|
+
private _createSlidersView;
|
|
75
|
+
/**
|
|
76
|
+
* Creates input row for defining custom colors in color picker.
|
|
77
|
+
*
|
|
78
|
+
* @private
|
|
79
|
+
*/
|
|
80
|
+
private _createInputRow;
|
|
81
|
+
/**
|
|
82
|
+
* Creates the input where user can type or paste the color in hex format.
|
|
83
|
+
*
|
|
84
|
+
* @private
|
|
85
|
+
*/
|
|
86
|
+
private _createColorInput;
|
|
87
|
+
}
|
|
88
|
+
declare class SliderView extends View {
|
|
89
|
+
/**
|
|
90
|
+
* @param element HTML elemnt of slider in color picker.
|
|
91
|
+
*/
|
|
92
|
+
constructor(element: HTMLElement);
|
|
93
|
+
/**
|
|
94
|
+
* Focuses element.
|
|
95
|
+
*/
|
|
96
|
+
focus(): void;
|
|
97
|
+
}
|
|
98
|
+
declare class ColorPickerInputRowView extends View {
|
|
99
|
+
/**
|
|
100
|
+
* A collection of row items (buttons, dropdowns, etc.).
|
|
101
|
+
*/
|
|
102
|
+
readonly children: ViewCollection;
|
|
103
|
+
/**
|
|
104
|
+
* Creates an instance of the form row class.
|
|
105
|
+
*
|
|
106
|
+
* @param locale The locale instance.
|
|
107
|
+
*/
|
|
108
|
+
constructor(locale: Locale, children?: Array<View>);
|
|
109
|
+
}
|
|
110
|
+
export {};
|