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 table/tablecellproperties/ui/tablecellpropertiesview
|
7 | */
|
8 | import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, type FocusableView, type NormalizedColorOption } from 'ckeditor5/src/ui';
|
9 | import { KeystrokeHandler, FocusTracker, type Locale } from 'ckeditor5/src/utils';
|
10 | import type ColorInputView from '../../ui/colorinputview';
|
11 | import type { TableCellPropertiesOptions } from '../../tableconfig';
|
12 | import '../../../theme/form.css';
|
13 | import '../../../theme/tableform.css';
|
14 | import '../../../theme/tablecellproperties.css';
|
15 | export interface TableCellPropertiesViewOptions {
|
16 | borderColors: Array<NormalizedColorOption>;
|
17 | backgroundColors: Array<NormalizedColorOption>;
|
18 | defaultTableCellProperties: TableCellPropertiesOptions;
|
19 | }
|
20 | /**
|
21 | * The class representing a table cell properties form, allowing users to customize
|
22 | * certain style aspects of a table cell, for instance, border, padding, text alignment, etc..
|
23 | */
|
24 | export default class TableCellPropertiesView extends View {
|
25 | /**
|
26 | * The value of the cell border style.
|
27 | *
|
28 | * @observable
|
29 | * @default ''
|
30 | */
|
31 | borderStyle: string;
|
32 | /**
|
33 | * The value of the cell border width style.
|
34 | *
|
35 | * @observable
|
36 | * @default ''
|
37 | */
|
38 | borderWidth: string;
|
39 | /**
|
40 | * The value of the cell border color style.
|
41 | *
|
42 | * @observable
|
43 | * @default ''
|
44 | */
|
45 | borderColor: string;
|
46 | /**
|
47 | * The value of the cell padding style.
|
48 | *
|
49 | * @observable
|
50 | * @default ''
|
51 | */
|
52 | padding: string;
|
53 | /**
|
54 | * The value of the cell background color style.
|
55 | *
|
56 | * @observable
|
57 | * @default ''
|
58 | */
|
59 | backgroundColor: string;
|
60 | /**
|
61 | * The value of the table cell width style.
|
62 | *
|
63 | * @observable
|
64 | * @default ''
|
65 | */
|
66 | width: string;
|
67 | /**
|
68 | * The value of the table cell height style.
|
69 | *
|
70 | * @observable
|
71 | * @default ''
|
72 | */
|
73 | height: string;
|
74 | /**
|
75 | * The value of the horizontal text alignment style.
|
76 | *
|
77 | * @observable
|
78 | * @default ''
|
79 | */
|
80 | horizontalAlignment: string;
|
81 | /**
|
82 | * The value of the vertical text alignment style.
|
83 | *
|
84 | * @observable
|
85 | * @default ''
|
86 | */
|
87 | verticalAlignment: string;
|
88 | /**
|
89 | * Options passed to the view. See {@link #constructor} to learn more.
|
90 | */
|
91 | readonly options: TableCellPropertiesViewOptions;
|
92 | /**
|
93 | * Tracks information about the DOM focus in the form.
|
94 | */
|
95 | readonly focusTracker: FocusTracker;
|
96 | /**
|
97 | * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
|
98 | */
|
99 | readonly keystrokes: KeystrokeHandler;
|
100 | /**
|
101 | * A collection of child views in the form.
|
102 | */
|
103 | readonly children: ViewCollection;
|
104 | /**
|
105 | * A dropdown that allows selecting the style of the table cell border.
|
106 | */
|
107 | readonly borderStyleDropdown: LabeledFieldView<FocusableView>;
|
108 | /**
|
109 | * An input that allows specifying the width of the table cell border.
|
110 | */
|
111 | readonly borderWidthInput: LabeledFieldView<FocusableView>;
|
112 | /**
|
113 | * An input that allows specifying the color of the table cell border.
|
114 | */
|
115 | readonly borderColorInput: LabeledFieldView<ColorInputView>;
|
116 | /**
|
117 | * An input that allows specifying the table cell background color.
|
118 | */
|
119 | readonly backgroundInput: LabeledFieldView<ColorInputView>;
|
120 | /**
|
121 | * An input that allows specifying the table cell padding.
|
122 | */
|
123 | readonly paddingInput: LabeledFieldView;
|
124 | /**
|
125 | * An input that allows specifying the table cell width.
|
126 | */
|
127 | readonly widthInput: LabeledFieldView<FocusableView>;
|
128 | /**
|
129 | * An input that allows specifying the table cell height.
|
130 | */
|
131 | readonly heightInput: LabeledFieldView<FocusableView>;
|
132 | /**
|
133 | * A toolbar with buttons that allow changing the horizontal text alignment in a table cell.
|
134 | */
|
135 | readonly horizontalAlignmentToolbar: View<HTMLElement>;
|
136 | /**
|
137 | * A toolbar with buttons that allow changing the vertical text alignment in a table cell.
|
138 | */
|
139 | readonly verticalAlignmentToolbar: View<HTMLElement>;
|
140 | /**
|
141 | * The "Save" button view.
|
142 | */
|
143 | saveButtonView: ButtonView;
|
144 | /**
|
145 | * The "Cancel" button view.
|
146 | */
|
147 | cancelButtonView: ButtonView;
|
148 | /**
|
149 | * A collection of views that can be focused in the form.
|
150 | */
|
151 | protected readonly _focusables: ViewCollection;
|
152 | /**
|
153 | * Helps cycling over {@link #_focusables} in the form.
|
154 | */
|
155 | protected readonly _focusCycler: FocusCycler;
|
156 | /**
|
157 | * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
|
158 | * @param options Additional configuration of the view.
|
159 | * @param options.borderColors A configuration of the border color palette used by the
|
160 | * {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView#borderColorInput}.
|
161 | * @param options.backgroundColors A configuration of the background color palette used by the
|
162 | * {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView#backgroundInput}.
|
163 | * @param options.defaultTableCellProperties The default table cell properties.
|
164 | */
|
165 | constructor(locale: Locale, options: TableCellPropertiesViewOptions);
|
166 | /**
|
167 | * @inheritDoc
|
168 | */
|
169 | render(): void;
|
170 | /**
|
171 | * @inheritDoc
|
172 | */
|
173 | destroy(): void;
|
174 | /**
|
175 | * Focuses the fist focusable field in the form.
|
176 | */
|
177 | focus(): void;
|
178 | /**
|
179 | * Creates the following form fields:
|
180 | *
|
181 | * * { #borderStyleDropdown},
|
182 | * * { #borderWidthInput},
|
183 | * * { #borderColorInput}.
|
184 | */
|
185 | private _createBorderFields;
|
186 | /**
|
187 | * Creates the following form fields:
|
188 | *
|
189 | * * {@link #backgroundInput}.
|
190 | */
|
191 | private _createBackgroundFields;
|
192 | /**
|
193 | * Creates the following form fields:
|
194 | *
|
195 | * * {@link #widthInput}.
|
196 | * * {@link #heightInput}.
|
197 | */
|
198 | private _createDimensionFields;
|
199 | /**
|
200 | * Creates the following form fields:
|
201 | *
|
202 | * * {@link #paddingInput}.
|
203 | */
|
204 | private _createPaddingField;
|
205 | /**
|
206 | * Creates the following form fields:
|
207 | *
|
208 | * * {@link #horizontalAlignmentToolbar},
|
209 | * * {@link #verticalAlignmentToolbar}.
|
210 | */
|
211 | private _createAlignmentFields;
|
212 | /**
|
213 | * Creates the following form controls:
|
214 | *
|
215 | * * {@link #saveButtonView},
|
216 | * * {@link #cancelButtonView}.
|
217 | */
|
218 | private _createActionButtons;
|
219 | /**
|
220 | * Provides localized labels for {@link #horizontalAlignmentToolbar} buttons.
|
221 | */
|
222 | private get _horizontalAlignmentLabels();
|
223 | /**
|
224 | * Provides localized labels for {@link #verticalAlignmentToolbar} buttons.
|
225 | */
|
226 | private get _verticalAlignmentLabels();
|
227 | }
|