|
|
@@ -3,11 +3,11 @@ import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
|
|
|
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
|
|
|
import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
|
|
|
import ColorGrid from '@ckeditor/ckeditor5-ui/src/colorgrid/colorgridview';
|
|
|
+import { getLocalizedColorOptions, normalizeColorOptions } from '@ckeditor/ckeditor5-ui/src/colorgrid/utils';
|
|
|
import '../../theme/colorinputview.css';
|
|
|
|
|
|
export default class ColorInputView extends View {
|
|
|
- // options?
|
|
|
- constructor( locale ) {
|
|
|
+ constructor( locale, options ) {
|
|
|
super( locale );
|
|
|
|
|
|
const bind = this.bindTemplate;
|
|
|
@@ -26,6 +26,8 @@ export default class ColorInputView extends View {
|
|
|
|
|
|
this.set( 'ariaDescribedById' );
|
|
|
|
|
|
+ this.set( 'options', options );
|
|
|
+
|
|
|
this._dropdownView = this._createDropdownView( locale );
|
|
|
this._inputView = this._createInputTextView( locale );
|
|
|
|
|
|
@@ -55,7 +57,7 @@ export default class ColorInputView extends View {
|
|
|
|
|
|
_createDropdownView( locale ) {
|
|
|
const bind = this.bindTemplate;
|
|
|
- const colorGrid = this._createColorGrid();
|
|
|
+ const colorGrid = this._createColorGrid( locale );
|
|
|
const dropdown = createDropdown( locale );
|
|
|
const colorPreview = new View();
|
|
|
const removeColorButton = this._createRemoveColorButton( locale );
|
|
|
@@ -140,8 +142,25 @@ export default class ColorInputView extends View {
|
|
|
}
|
|
|
|
|
|
_createColorGrid( locale ) {
|
|
|
- const options = {
|
|
|
- colorDefinitions: [
|
|
|
+ const config = this.options && this.options.config;
|
|
|
+ const parsedOptions = this._getParsedColorGridOptions( locale, config );
|
|
|
+
|
|
|
+ const colorGrid = new ColorGrid( locale, parsedOptions );
|
|
|
+
|
|
|
+ colorGrid.on( 'execute', ( evtData, data ) => {
|
|
|
+ this.value = data.value;
|
|
|
+ this._dropdownView.isOpen = false;
|
|
|
+ this.fire( 'input' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ colorGrid.bind( 'selectedColor' ).to( this, 'value' );
|
|
|
+
|
|
|
+ return colorGrid;
|
|
|
+ }
|
|
|
+
|
|
|
+ _getParsedColorGridOptions( locale, config ) {
|
|
|
+ const defaultOptions = {
|
|
|
+ colors: [
|
|
|
{
|
|
|
color: 'hsl(0, 0%, 0%)',
|
|
|
label: 'Black'
|
|
|
@@ -207,16 +226,27 @@ export default class ColorInputView extends View {
|
|
|
columns: 5
|
|
|
};
|
|
|
|
|
|
- const colorGrid = new ColorGrid( locale, options );
|
|
|
+ let options = config;
|
|
|
|
|
|
- colorGrid.on( 'execute', ( evtData, data ) => {
|
|
|
- this.value = data.value;
|
|
|
- this._dropdownView.isOpen = false;
|
|
|
- this.fire( 'input' );
|
|
|
- } );
|
|
|
+ if ( !config ) {
|
|
|
+ options = defaultOptions;
|
|
|
+ }
|
|
|
|
|
|
- colorGrid.bind( 'selectedColor' ).to( this, 'value' );
|
|
|
+ const colors = normalizeColorOptions( options.colors );
|
|
|
+ const columns = options.columns;
|
|
|
|
|
|
- return colorGrid;
|
|
|
+ const localizedColors = getLocalizedColorOptions( locale, colors );
|
|
|
+ const parsedColors = localizedColors.map( item => ( {
|
|
|
+ color: item.model,
|
|
|
+ label: item.label,
|
|
|
+ options: {
|
|
|
+ hasBorder: item.hasBorder
|
|
|
+ }
|
|
|
+ } ) );
|
|
|
+
|
|
|
+ return {
|
|
|
+ colorDefinitions: parsedColors,
|
|
|
+ columns
|
|
|
+ };
|
|
|
}
|
|
|
}
|