|
|
@@ -1,10 +1,7 @@
|
|
|
import View from '@ckeditor/ckeditor5-ui/src/view';
|
|
|
-import LabelView from '../label/labelview';
|
|
|
import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
|
|
|
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
|
|
|
-import DropdownButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/dropdownbuttonview';
|
|
|
-import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
|
|
|
-import DropdownPanelView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownpanelview';
|
|
|
+import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
|
|
|
import ColorGrid from '@ckeditor/ckeditor5-ui/src/colorgrid/colorgridview';
|
|
|
import '../../theme/components/colorinputview/colorinputview.css';
|
|
|
|
|
|
@@ -13,6 +10,8 @@ export default class ColorInputView extends View {
|
|
|
constructor( locale ) {
|
|
|
super( locale );
|
|
|
|
|
|
+ const bind = this.bindTemplate;
|
|
|
+
|
|
|
this.set( 'label' );
|
|
|
|
|
|
this.set( 'value' );
|
|
|
@@ -21,104 +20,72 @@ export default class ColorInputView extends View {
|
|
|
|
|
|
this.set( 'placeholder' );
|
|
|
|
|
|
- this.set( 'isEnabled', false );
|
|
|
+ this.set( 'isReadOnly', false );
|
|
|
|
|
|
this.set( 'errorText', null );
|
|
|
|
|
|
this.set( 'ariaDescribedById' );
|
|
|
|
|
|
- this.dropdownButton = null;
|
|
|
-
|
|
|
- this.dropdownPanel = null;
|
|
|
-
|
|
|
- this.colorPicker = this._createTextInputWithDropdown( locale );
|
|
|
-
|
|
|
- this.label = this._createLabelView( this.id );
|
|
|
-
|
|
|
- const bind = this.bindTemplate;
|
|
|
-
|
|
|
- this.on( 'setColor:setValueFromPicker', ( evtData, data ) => {
|
|
|
- this.value = data.value;
|
|
|
- this._toggleColorPicker();
|
|
|
- } );
|
|
|
+ this._dropdownView = this._createDropdownView( locale );
|
|
|
+ this._inputView = this._createInputTextView( locale );
|
|
|
|
|
|
this.setTemplate( {
|
|
|
tag: 'div',
|
|
|
attributes: {
|
|
|
class: [
|
|
|
'ck',
|
|
|
- 'ck-input',
|
|
|
'ck-input-color-picker',
|
|
|
- 'ck-labeled-view',
|
|
|
bind.if( 'hasError', 'ck-error' )
|
|
|
],
|
|
|
id: bind.to( 'id' ),
|
|
|
placeholder: bind.to( 'placeholder' ),
|
|
|
- readonly: bind.to( 'isEnabled', isEnabled => !isEnabled ),
|
|
|
'aria-invalid': bind.if( 'hasError', true ),
|
|
|
'aria-describedby': bind.to( 'ariaDescribedById' )
|
|
|
},
|
|
|
children: [
|
|
|
- this.label,
|
|
|
- this.colorPicker
|
|
|
+ this._inputView,
|
|
|
+ this._dropdownView
|
|
|
],
|
|
|
} );
|
|
|
}
|
|
|
|
|
|
- _createTextInputWithDropdown( locale ) {
|
|
|
- const textInput = this._createInputTextView( locale );
|
|
|
- const dropdown = this._createDropdownView( locale );
|
|
|
- const colorInputPicker = new View();
|
|
|
-
|
|
|
- colorInputPicker.setTemplate( {
|
|
|
- tag: 'div',
|
|
|
- attributes: {
|
|
|
- class: [ 'ck', 'ck-dropdown__color-picker' ]
|
|
|
- },
|
|
|
- children: [
|
|
|
- textInput,
|
|
|
- dropdown,
|
|
|
- ]
|
|
|
- } );
|
|
|
-
|
|
|
- return colorInputPicker;
|
|
|
+ focus() {
|
|
|
+ this._inputView.focus();
|
|
|
}
|
|
|
|
|
|
_createDropdownView( locale ) {
|
|
|
const bind = this.bindTemplate;
|
|
|
const colorGrid = this._createColorGrid();
|
|
|
- const dropdownPanel = new DropdownPanelView( locale );
|
|
|
- const dropdownButton = new DropdownButtonView( locale );
|
|
|
+ const dropdown = createDropdown( locale );
|
|
|
const colorPreview = new View();
|
|
|
const removeColorButton = this._createRemoveColorButton( locale );
|
|
|
|
|
|
colorPreview.setTemplate( {
|
|
|
tag: 'span',
|
|
|
attributes: {
|
|
|
- class: [ 'ck', 'ck-dropdown__color-picker-preview' ],
|
|
|
+ class: [
|
|
|
+ 'ck',
|
|
|
+ 'ck-dropdown__color-picker-preview'
|
|
|
+ ],
|
|
|
style: {
|
|
|
backgroundColor: bind.to( 'value' )
|
|
|
}
|
|
|
}
|
|
|
} );
|
|
|
|
|
|
- dropdownButton.extendTemplate( {
|
|
|
+ dropdown.buttonView.extendTemplate( {
|
|
|
attributes: {
|
|
|
class: 'ck-dropdown__color-picker-button'
|
|
|
},
|
|
|
} );
|
|
|
- dropdownButton.withArrow = false;
|
|
|
- dropdownButton.children.add( colorPreview );
|
|
|
- dropdownButton.bind( 'isEnabled' ).to( this );
|
|
|
|
|
|
- const dropdown = new DropdownView( locale, dropdownButton, dropdownPanel );
|
|
|
+ dropdown.buttonView.children.add( colorPreview );
|
|
|
|
|
|
+ dropdown.panelPosition = 'sw';
|
|
|
dropdown.panelView.children.add( removeColorButton );
|
|
|
dropdown.panelView.children.add( colorGrid );
|
|
|
- dropdown.bind( 'isEnabled' ).to( this );
|
|
|
-
|
|
|
- this.dropdownButton = dropdownButton;
|
|
|
- this.dropdownPanel = dropdownPanel;
|
|
|
+ dropdown.bind( 'isReadOnly' ).to( this );
|
|
|
+ dropdown.bind( 'isEnabled' ).to( this, 'isReadOnly', value => !value );
|
|
|
|
|
|
return dropdown;
|
|
|
}
|
|
|
@@ -127,20 +94,16 @@ export default class ColorInputView extends View {
|
|
|
const input = new InputTextView( locale );
|
|
|
|
|
|
input.bind( 'value' ).to( this );
|
|
|
- input.bind( 'isReadOnly' ).to( this, 'isEnabled', value => !value );
|
|
|
+ input.bind( 'isReadOnly' ).to( this );
|
|
|
input.bind( 'placeholder' ).to( this );
|
|
|
input.bind( 'hasError' ).to( this, 'errorText', value => !!value );
|
|
|
|
|
|
- input.on( 'input', ( evt, input ) => {
|
|
|
- // UX: Make the error text disappear and disable the error indicator as the user
|
|
|
- // starts fixing the errors.
|
|
|
- this.errorText = null;
|
|
|
-
|
|
|
- this.fire( 'setColor:setInputValue', {
|
|
|
- value: input.target.value
|
|
|
- } );
|
|
|
+ input.on( 'input', () => {
|
|
|
+ this.value = input.element.value;
|
|
|
} );
|
|
|
|
|
|
+ input.delegate( 'input' ).to( this );
|
|
|
+
|
|
|
return input;
|
|
|
}
|
|
|
|
|
|
@@ -151,7 +114,10 @@ export default class ColorInputView extends View {
|
|
|
|
|
|
removeColor.extendTemplate( {
|
|
|
attributes: {
|
|
|
- class: [ 'ck', 'ck-dropdown__color-picker-remove-color' ]
|
|
|
+ class: [
|
|
|
+ 'ck',
|
|
|
+ 'ck-dropdown__color-picker-remove-color'
|
|
|
+ ]
|
|
|
},
|
|
|
} );
|
|
|
|
|
|
@@ -163,7 +129,7 @@ export default class ColorInputView extends View {
|
|
|
on: {
|
|
|
click: bind.to( () => {
|
|
|
this.value = '';
|
|
|
- this._toggleColorPicker();
|
|
|
+ this._dropdownView.isOpen = false;
|
|
|
} )
|
|
|
}
|
|
|
} );
|
|
|
@@ -173,14 +139,6 @@ export default class ColorInputView extends View {
|
|
|
return removeColor;
|
|
|
}
|
|
|
|
|
|
- _createLabelView( id ) {
|
|
|
- const label = new LabelView();
|
|
|
- label.for = id;
|
|
|
- label.bind( 'text' ).to( this, 'label' );
|
|
|
-
|
|
|
- return label;
|
|
|
- }
|
|
|
-
|
|
|
_createColorGrid( locale ) {
|
|
|
const options = {
|
|
|
colorDefinitions: [
|
|
|
@@ -248,14 +206,17 @@ export default class ColorInputView extends View {
|
|
|
],
|
|
|
columns: 5
|
|
|
};
|
|
|
+
|
|
|
const colorGrid = new ColorGrid( locale, options );
|
|
|
- colorGrid.delegate( 'execute' ).to( this, 'setColor:setValueFromPicker' );
|
|
|
+
|
|
|
+ colorGrid.on( 'execute', ( evtData, data ) => {
|
|
|
+ this.value = data.value;
|
|
|
+ this._dropdownView.isOpen = false;
|
|
|
+ this.fire( 'input' );
|
|
|
+ } );
|
|
|
+
|
|
|
colorGrid.bind( 'selectedColor' ).to( this, 'value' );
|
|
|
|
|
|
return colorGrid;
|
|
|
}
|
|
|
-
|
|
|
- _toggleColorPicker() {
|
|
|
- this.dropdownButton.fire( 'open' );
|
|
|
- }
|
|
|
}
|