|
@@ -3,6 +3,10 @@
|
|
|
* For licensing, see LICENSE.md.
|
|
* For licensing, see LICENSE.md.
|
|
|
*/
|
|
*/
|
|
|
|
|
|
|
|
|
|
+/**
|
|
|
|
|
+ * @module font/ui/colortableview
|
|
|
|
|
+ */
|
|
|
|
|
+
|
|
|
import View from '@ckeditor/ckeditor5-ui/src/view';
|
|
import View from '@ckeditor/ckeditor5-ui/src/view';
|
|
|
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
|
|
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
|
|
|
import ColorTile from './colortile';
|
|
import ColorTile from './colortile';
|
|
@@ -14,35 +18,87 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
|
|
|
import removeButtonIcon from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg';
|
|
import removeButtonIcon from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg';
|
|
|
import '../../theme/fontcolor.css';
|
|
import '../../theme/fontcolor.css';
|
|
|
|
|
|
|
|
|
|
+/**
|
|
|
|
|
+ * Class which represents view with {@link module:font/ui/colorgrid~ColorGrid}
|
|
|
|
|
+ * and remove buttons inside {@link module:ui/dropdown/dropdownview~DropdownView}.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @extends module:ui/view~View
|
|
|
|
|
+ */
|
|
|
export default class ColorTableView extends View {
|
|
export default class ColorTableView extends View {
|
|
|
- constructor( locale, { colors } ) {
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Construct view which will be inserted as child of {@link module:ui/dropdown/dropdownview~DropdownView}
|
|
|
|
|
+ * @param {module:utils/locale~Locale} [locale] The localization services instance.
|
|
|
|
|
+ * @param {Object} config Configuration object
|
|
|
|
|
+ * @param {Array.<Object>} config.colors Array with objects drawn as static set of available colors in color table.
|
|
|
|
|
+ * @param {Number} config.colorColumns Number of columns in color grid. Determines how many recent color will be displayed.
|
|
|
|
|
+ * @param {String} config.removeButtonTooltip Description of button responsible for removing color attributes.
|
|
|
|
|
+ */
|
|
|
|
|
+ constructor( locale, { colors, colorColumns, removeButtonTooltip } ) {
|
|
|
super( locale );
|
|
super( locale );
|
|
|
- this.locale = locale;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Collection of the child list views.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @readonly
|
|
|
|
|
+ * @member {module:ui/viewcollection~ViewCollection}
|
|
|
|
|
+ */
|
|
|
this.items = this.createCollection();
|
|
this.items = this.createCollection();
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Array with objects representing color to be drawn in color grid.
|
|
|
|
|
+ * @type {Arrray.<Object>}
|
|
|
|
|
+ */
|
|
|
this.colorsDefinition = colors;
|
|
this.colorsDefinition = colors;
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Tracks information about DOM focus in the list.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @readonly
|
|
|
|
|
+ * @member {module:utils/focustracker~FocusTracker}
|
|
|
|
|
+ */
|
|
|
this.focusTracker = new FocusTracker();
|
|
this.focusTracker = new FocusTracker();
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @readonly
|
|
|
|
|
+ * @member {module:utils/keystrokehandler~KeystrokeHandler}
|
|
|
|
|
+ */
|
|
|
this.keystrokes = new KeystrokeHandler();
|
|
this.keystrokes = new KeystrokeHandler();
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Keeps value of command for current selection.
|
|
|
|
|
+ * @type {String}
|
|
|
|
|
+ */
|
|
|
this.set( 'selectedColor' );
|
|
this.set( 'selectedColor' );
|
|
|
- this.set( 'removeButtonTooltip' );
|
|
|
|
|
- this.set( 'colorColumns', 5 );
|
|
|
|
|
- this.set( 'recentlyUsedColors', new Collection() );
|
|
|
|
|
-
|
|
|
|
|
- this.initRecentCollection();
|
|
|
|
|
-
|
|
|
|
|
- this.setTemplate( {
|
|
|
|
|
- tag: 'div',
|
|
|
|
|
- attributes: {
|
|
|
|
|
- class: [ 'ck-color-table' ]
|
|
|
|
|
- },
|
|
|
|
|
- children: this.items
|
|
|
|
|
- } );
|
|
|
|
|
-
|
|
|
|
|
- this.items.add( this.removeColorButton() );
|
|
|
|
|
- this.items.add( this.createColorTableTemplate() );
|
|
|
|
|
- this.items.add( this.recentlyUsed() );
|
|
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Description of button responsible for removing color attributes.
|
|
|
|
|
+ * @type {String}
|
|
|
|
|
+ */
|
|
|
|
|
+ this.removeButtonTooltip = removeButtonTooltip;
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Number of columns in color grid. Determines how many recent color will be displayed.
|
|
|
|
|
+ * @type {Number}
|
|
|
|
|
+ */
|
|
|
|
|
+ this.colorColumns = colorColumns;
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Collection kept model of colors used for Recent Colors section.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @readonly
|
|
|
|
|
+ * @member {module:utils/collection~Collection}
|
|
|
|
|
+ */
|
|
|
|
|
+ this.recentlyUsedColors = new Collection();
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Helps cycling over focusable {@link #items} in the list.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @readonly
|
|
|
|
|
+ * @protected
|
|
|
|
|
+ * @member {module:ui/focuscycler~FocusCycler}
|
|
|
|
|
+ */
|
|
|
this._focusCycler = new FocusCycler( {
|
|
this._focusCycler = new FocusCycler( {
|
|
|
focusables: this.items,
|
|
focusables: this.items,
|
|
|
focusTracker: this.focusTracker,
|
|
focusTracker: this.focusTracker,
|
|
@@ -55,16 +111,34 @@ export default class ColorTableView extends View {
|
|
|
focusNext: 'arrowdown',
|
|
focusNext: 'arrowdown',
|
|
|
}
|
|
}
|
|
|
} );
|
|
} );
|
|
|
|
|
+
|
|
|
|
|
+ this.initRecentCollection();
|
|
|
|
|
+ this.setTemplate( {
|
|
|
|
|
+ tag: 'div',
|
|
|
|
|
+ attributes: {
|
|
|
|
|
+ class: [ 'ck-color-table' ]
|
|
|
|
|
+ },
|
|
|
|
|
+ children: this.items
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ this.items.add( this.removeColorButton() );
|
|
|
|
|
+ this.items.add( this.createStaticColorTable() );
|
|
|
|
|
+ this.items.add( this.recentlyUsed() );
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Adds remove color button as child for current view.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @private
|
|
|
|
|
+ */
|
|
|
removeColorButton() {
|
|
removeColorButton() {
|
|
|
const btnView = new ButtonView();
|
|
const btnView = new ButtonView();
|
|
|
btnView.set( {
|
|
btnView.set( {
|
|
|
withText: true,
|
|
withText: true,
|
|
|
icon: removeButtonIcon,
|
|
icon: removeButtonIcon,
|
|
|
- tooltip: true
|
|
|
|
|
|
|
+ tooltip: true,
|
|
|
|
|
+ label: this.removeButtonTooltip
|
|
|
} );
|
|
} );
|
|
|
- btnView.bind( 'label' ).to( this, 'removeButtonTooltip' );
|
|
|
|
|
btnView.class = 'ck-color-table__remove-color';
|
|
btnView.class = 'ck-color-table__remove-color';
|
|
|
btnView.on( 'execute', () => {
|
|
btnView.on( 'execute', () => {
|
|
|
this.fire( 'execute', { value: null } );
|
|
this.fire( 'execute', { value: null } );
|
|
@@ -72,12 +146,20 @@ export default class ColorTableView extends View {
|
|
|
return btnView;
|
|
return btnView;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- createColorTableTemplate() {
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Creates static color table grid based on editor config.
|
|
|
|
|
+ * @private
|
|
|
|
|
+ */
|
|
|
|
|
+ createStaticColorTable() {
|
|
|
const colorGrid = new ColorGrid( this.locale, { colorsDefinition: this.colorsDefinition } );
|
|
const colorGrid = new ColorGrid( this.locale, { colorsDefinition: this.colorsDefinition } );
|
|
|
colorGrid.delegate( 'execute' ).to( this );
|
|
colorGrid.delegate( 'execute' ).to( this );
|
|
|
return colorGrid;
|
|
return colorGrid;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Adds recently used color section view and bind it to {@link #recentlyUsedColors}.
|
|
|
|
|
+ * @private
|
|
|
|
|
+ */
|
|
|
recentlyUsed() {
|
|
recentlyUsed() {
|
|
|
const recentViews = new ColorGrid( this.locale );
|
|
const recentViews = new ColorGrid( this.locale );
|
|
|
|
|
|
|
@@ -118,6 +200,10 @@ export default class ColorTableView extends View {
|
|
|
return recentViews;
|
|
return recentViews;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Populate {@link #recentlyUsedColors} with empty non-clickable buttons, which represents space for colors.
|
|
|
|
|
+ * @private
|
|
|
|
|
+ */
|
|
|
initRecentCollection() {
|
|
initRecentCollection() {
|
|
|
for ( let i = 0; i < this.colorColumns; i++ ) {
|
|
for ( let i = 0; i < this.colorColumns; i++ ) {
|
|
|
this.recentlyUsedColors.add( {
|
|
this.recentlyUsedColors.add( {
|
|
@@ -151,10 +237,16 @@ export default class ColorTableView extends View {
|
|
|
this.keystrokes.listenTo( this.element );
|
|
this.keystrokes.listenTo( this.element );
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Focuses the first focusable in {@link #items}.
|
|
|
|
|
+ */
|
|
|
focus() {
|
|
focus() {
|
|
|
this._focusCycler.focusFirst();
|
|
this._focusCycler.focusFirst();
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Focuses the last focusable in {@link #items}.
|
|
|
|
|
+ */
|
|
|
focusLast() {
|
|
focusLast() {
|
|
|
this._focusCycler.focusLast();
|
|
this._focusCycler.focusLast();
|
|
|
}
|
|
}
|