| 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/ui/colorinputview
|
| 7 | */
|
| 8 | import { View, InputTextView, FocusCycler, ViewCollection, type ColorDefinition, type DropdownView } from 'ckeditor5/src/ui';
|
| 9 | import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
|
| 10 | import '../../theme/colorinput.css';
|
| 11 | export type ColorInputViewOptions = {
|
| 12 | colorDefinitions: Array<ColorDefinition>;
|
| 13 | columns: number;
|
| 14 | defaultColorValue?: string;
|
| 15 | };
|
| 16 | /**
|
| 17 | * The color input view class. It allows the user to type in a color (hex, rgb, etc.)
|
| 18 | * or choose it from the configurable color palette with a preview.
|
| 19 | *
|
| 20 | * @internal
|
| 21 | */
|
| 22 | export default class ColorInputView extends View {
|
| 23 | /**
|
| 24 | * The value of the input.
|
| 25 | *
|
| 26 | * @observable
|
| 27 | * @default ''
|
| 28 | */
|
| 29 | value: string;
|
| 30 | /**
|
| 31 | * Controls whether the input view is in read-only mode.
|
| 32 | *
|
| 33 | * @observable
|
| 34 | * @default false
|
| 35 | */
|
| 36 | isReadOnly: boolean;
|
| 37 | /**
|
| 38 | * An observable flag set to `true` when the input is focused by the user.
|
| 39 | * `false` otherwise.
|
| 40 | *
|
| 41 | * @observable
|
| 42 | * @default false
|
| 43 | */
|
| 44 | readonly isFocused: boolean;
|
| 45 | /**
|
| 46 | * An observable flag set to `true` when the input contains no text.
|
| 47 | *
|
| 48 | * @observable
|
| 49 | * @default true
|
| 50 | */
|
| 51 | readonly isEmpty: boolean;
|
| 52 | /**
|
| 53 | * @observable
|
| 54 | */
|
| 55 | hasError: boolean;
|
| 56 | /**
|
| 57 | * A cached reference to the options passed to the constructor.
|
| 58 | */
|
| 59 | options: ColorInputViewOptions;
|
| 60 | /**
|
| 61 | * Tracks information about the DOM focus in the view.
|
| 62 | */
|
| 63 | readonly focusTracker: FocusTracker;
|
| 64 | /**
|
| 65 | * A collection of views that can be focused in the view.
|
| 66 | */
|
| 67 | protected readonly _focusables: ViewCollection;
|
| 68 | /**
|
| 69 | * An instance of the dropdown allowing to select a color from a grid.
|
| 70 | */
|
| 71 | dropdownView: DropdownView;
|
| 72 | /**
|
| 73 | * An instance of the input allowing the user to type a color value.
|
| 74 | */
|
| 75 | inputView: InputTextView;
|
| 76 | /**
|
| 77 | * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
|
| 78 | */
|
| 79 | readonly keystrokes: KeystrokeHandler;
|
| 80 | /**
|
| 81 | * The flag that indicates whether the user is still typing.
|
| 82 | * If set to true, it means that the text input field ({@link #inputView}) still has the focus.
|
| 83 | * So, we should interrupt the user by replacing the input's value.
|
| 84 | */
|
| 85 | protected _stillTyping: boolean;
|
| 86 | /**
|
| 87 | * Helps cycling over focusable items in the view.
|
| 88 | */
|
| 89 | protected readonly _focusCycler: FocusCycler;
|
| 90 | /**
|
| 91 | * Creates an instance of the color input view.
|
| 92 | *
|
| 93 | * @param locale The locale instance.
|
| 94 | * @param options The input options.
|
| 95 | * @param options.colorDefinitions The colors to be displayed in the palette inside the input's dropdown.
|
| 96 | * @param options.columns The number of columns in which the colors will be displayed.
|
| 97 | * @param options.defaultColorValue If specified, the color input view will replace the "Remove color" button with
|
| 98 | * the "Restore default" button. Instead of clearing the input field, the default color value will be set.
|
| 99 | */
|
| 100 | constructor(locale: Locale, options: ColorInputViewOptions);
|
| 101 | /**
|
| 102 | * @inheritDoc
|
| 103 | */
|
| 104 | render(): void;
|
| 105 | /**
|
| 106 | * Focuses the input.
|
| 107 | */
|
| 108 | focus(): void;
|
| 109 | /**
|
| 110 | * @inheritDoc
|
| 111 | */
|
| 112 | destroy(): void;
|
| 113 | /**
|
| 114 | * Creates and configures the { #dropdownView}.
|
| 115 | */
|
| 116 | private _createDropdownView;
|
| 117 | /**
|
| 118 | * Creates and configures an instance of {@link module:ui/inputtext/inputtextview~InputTextView}.
|
| 119 | *
|
| 120 | * @returns A configured instance to be set as {@link #inputView}.
|
| 121 | */
|
| 122 | private _createInputTextView;
|
| 123 | /**
|
| 124 | * Creates and configures the button that clears the color.
|
| 125 | */
|
| 126 | private _createRemoveColorButton;
|
| 127 | /**
|
| 128 | * Creates and configures the color grid inside the {@link #dropdownView}.
|
| 129 | */
|
| 130 | private _createColorGrid;
|
| 131 | /**
|
| 132 | * Sets {@link #inputView}'s value property to the color value or color label,
|
| 133 | * if there is one and the user is not typing.
|
| 134 | *
|
| 135 | * Handles cases like:
|
| 136 | *
|
| 137 | * * Someone picks the color in the grid.
|
| 138 | * * The color is set from the plugin level.
|
| 139 | *
|
| 140 | * @param inputValue Color value to be set.
|
| 141 | */
|
| 142 | private _setInputValue;
|
| 143 | }
|