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 link/ui/linkformview
|
7 | */
|
8 | import { ButtonView, LabeledFieldView, View, ViewCollection, type InputTextView } from 'ckeditor5/src/ui';
|
9 | import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
|
10 | import type LinkCommand from '../linkcommand';
|
11 | import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
|
12 | import '../../theme/linkform.css';
|
13 | /**
|
14 | * The link form view controller class.
|
15 | *
|
16 | * See {@link module:link/ui/linkformview~LinkFormView}.
|
17 | */
|
18 | export default class LinkFormView extends View {
|
19 | /**
|
20 | * Tracks information about DOM focus in the form.
|
21 | */
|
22 | readonly focusTracker: FocusTracker;
|
23 | /**
|
24 | * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
|
25 | */
|
26 | readonly keystrokes: KeystrokeHandler;
|
27 | /**
|
28 | * The URL input view.
|
29 | */
|
30 | urlInputView: LabeledFieldView<InputTextView>;
|
31 | /**
|
32 | * The Save button view.
|
33 | */
|
34 | saveButtonView: ButtonView;
|
35 | /**
|
36 | * The Cancel button view.
|
37 | */
|
38 | cancelButtonView: ButtonView;
|
39 | /**
|
40 | * A collection of {@link module:ui/button/switchbuttonview~SwitchButtonView},
|
41 | * which corresponds to {@link module:link/linkcommand~LinkCommand#manualDecorators manual decorators}
|
42 | * configured in the editor.
|
43 | */
|
44 | private readonly _manualDecoratorSwitches;
|
45 | /**
|
46 | * A collection of child views in the form.
|
47 | */
|
48 | readonly children: ViewCollection;
|
49 | /**
|
50 | * A collection of views that can be focused in the form.
|
51 | */
|
52 | private readonly _focusables;
|
53 | /**
|
54 | * Helps cycling over {@link #_focusables} in the form.
|
55 | */
|
56 | private readonly _focusCycler;
|
57 | /**
|
58 | * Creates an instance of the {@link module:link/ui/linkformview~LinkFormView} class.
|
59 | *
|
60 | * Also see {@link #render}.
|
61 | *
|
62 | * @param locale The localization services instance.
|
63 | * @param linkCommand Reference to {@link module:link/linkcommand~LinkCommand}.
|
64 | */
|
65 | constructor(locale: Locale, linkCommand: LinkCommand);
|
66 | /**
|
67 | * Obtains the state of the {module:ui/button/switchbuttonview~SwitchButtonView switch buttons} representing
|
68 | * {module:link/linkcommand~LinkCommand#manualDecorators manual link decorators}
|
69 | * in the {module:link/ui/linkformview~LinkFormView}.
|
70 | *
|
71 | * @returns Key-value pairs, where the key is the name of the decorator and the value is its state.
|
72 | */
|
73 | getDecoratorSwitchesState(): Record<string, boolean>;
|
74 | /**
|
75 | * @inheritDoc
|
76 | */
|
77 | render(): void;
|
78 | /**
|
79 | * @inheritDoc
|
80 | */
|
81 | destroy(): void;
|
82 | /**
|
83 | * Focuses the fist {in the form.
#_focusables} |
84 | */
|
85 | focus(): void;
|
86 | /**
|
87 | * Creates a labeled input view.
|
88 | *
|
89 | * @returns Labeled field view instance.
|
90 | */
|
91 | private _createUrlInput;
|
92 | /**
|
93 | * Creates a button view.
|
94 | *
|
95 | * @param label The button label.
|
96 | * @param icon The button icon.
|
97 | * @param className The additional button CSS class name.
|
98 | * @param eventName An event name that the `ButtonView#execute` event will be delegated to.
|
99 | * @returns The button view instance.
|
100 | */
|
101 | private _createButton;
|
102 | /**
|
103 | * Populates {@link module:ui/viewcollection~ViewCollection} of {@link module:ui/button/switchbuttonview~SwitchButtonView}
|
104 | * made based on {@link module:link/linkcommand~LinkCommand#manualDecorators}.
|
105 | *
|
106 | * @param linkCommand A reference to the link command.
|
107 | * @returns ViewCollection of switch buttons.
|
108 | */
|
109 | private _createManualDecoratorSwitches;
|
110 | /**
|
111 | * Populates the {@link #children} collection of the form.
|
112 | *
|
113 | * If {@link module:link/linkcommand~LinkCommand#manualDecorators manual decorators} are configured in the editor, it creates an
|
114 | * additional `View` wrapping all {@link #_manualDecoratorSwitches} switch buttons corresponding
|
115 | * to these decorators.
|
116 | *
|
117 | * @param manualDecorators A reference to
|
118 | * the collection of manual decorators stored in the link command.
|
119 | * @returns The children of link form view.
|
120 | */
|
121 | private _createFormChildren;
|
122 | }
|
123 | /**
|
124 | * Fired when the form view is submitted (when one of the children triggered the submit event),
|
125 | * for example with a click on {@link ~LinkFormView#saveButtonView}.
|
126 | *
|
127 | * @eventName ~LinkFormView#submit
|
128 | */
|
129 | export type SubmitEvent = {
|
130 | name: 'submit';
|
131 | args: [];
|
132 | };
|
133 | /**
|
134 | * Fired when the form view is canceled, for example with a click on {@link ~LinkFormView#cancelButtonView}.
|
135 | *
|
136 | * @eventName ~LinkFormView#cancel
|
137 | */
|
138 | export type CancelEvent = {
|
139 | name: 'cancel';
|
140 | args: [];
|
141 | };
|