|
|
@@ -118,19 +118,21 @@ export default class ColorTableView extends View {
|
|
|
* Preserves the reference to {@link module:ui/colorgrid/colorgrid~ColorGridView} used to create
|
|
|
* the default (static) color set.
|
|
|
*
|
|
|
+ * The property is loaded once the the parent dropdown is opened the first time.
|
|
|
+ *
|
|
|
* @readonly
|
|
|
- * @member {module:ui/colorgrid/colorgrid~ColorGridView}
|
|
|
+ * @member {module:ui/colorgrid/colorgrid~ColorGridView|undefined} staticColorsGrid
|
|
|
*/
|
|
|
- this.staticColorsGrid = this._createStaticColorsGrid();
|
|
|
|
|
|
/**
|
|
|
* Preserves the reference to {@link module:ui/colorgrid/colorgrid~ColorGridView} used to create
|
|
|
* the document colors. It remains undefined if the document colors feature is disabled.
|
|
|
*
|
|
|
+ * The property is loaded once the the parent dropdown is opened the first time.
|
|
|
+ *
|
|
|
* @readonly
|
|
|
- * @member {module:ui/colorgrid/colorgrid~ColorGridView}
|
|
|
+ * @member {module:ui/colorgrid/colorgrid~ColorGridView|undefined} documentColorsGrid
|
|
|
*/
|
|
|
- this.documentColorsGrid;
|
|
|
|
|
|
/**
|
|
|
* Helps cycling over focusable {@link #items} in the list.
|
|
|
@@ -152,6 +154,15 @@ export default class ColorTableView extends View {
|
|
|
}
|
|
|
} );
|
|
|
|
|
|
+ /**
|
|
|
+ * Document color section's label.
|
|
|
+ *
|
|
|
+ * @private
|
|
|
+ * @readonly
|
|
|
+ * @type {String}
|
|
|
+ */
|
|
|
+ this._documentColorsLabel = documentColorsLabel;
|
|
|
+
|
|
|
this.setTemplate( {
|
|
|
tag: 'div',
|
|
|
attributes: {
|
|
|
@@ -164,29 +175,6 @@ export default class ColorTableView extends View {
|
|
|
} );
|
|
|
|
|
|
this.items.add( this._removeColorButton() );
|
|
|
- this.items.add( this.staticColorsGrid );
|
|
|
-
|
|
|
- if ( documentColorsCount ) {
|
|
|
- // Create a label for document colors.
|
|
|
- const bind = Template.bind( this.documentColors, this.documentColors );
|
|
|
- const label = new LabelView( this.locale );
|
|
|
-
|
|
|
- label.text = documentColorsLabel;
|
|
|
- label.extendTemplate( {
|
|
|
- attributes: {
|
|
|
- class: [
|
|
|
- 'ck',
|
|
|
- 'ck-color-grid__label',
|
|
|
- bind.if( 'isEmpty', 'ck-hidden' )
|
|
|
- ]
|
|
|
- }
|
|
|
- } );
|
|
|
-
|
|
|
- this.items.add( label );
|
|
|
-
|
|
|
- this.documentColorsGrid = this._createDocumentColorsGrid();
|
|
|
- this.items.add( this.documentColorsGrid );
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
@@ -253,6 +241,38 @@ export default class ColorTableView extends View {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
+ * Appends {@link #staticColorsGrid} and {@link #documentColorsGrid} views.
|
|
|
+ */
|
|
|
+ appendGrids() {
|
|
|
+ if ( this.staticColorsGrid ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.staticColorsGrid = this._createStaticColorsGrid();
|
|
|
+
|
|
|
+ this.items.add( this.staticColorsGrid );
|
|
|
+
|
|
|
+ if ( this.documentColorsCount ) {
|
|
|
+ // Create a label for document colors.
|
|
|
+ const bind = Template.bind( this.documentColors, this.documentColors );
|
|
|
+ const label = new LabelView( this.locale );
|
|
|
+ label.text = this._documentColorsLabel;
|
|
|
+ label.extendTemplate( {
|
|
|
+ attributes: {
|
|
|
+ class: [
|
|
|
+ 'ck',
|
|
|
+ 'ck-color-grid__label',
|
|
|
+ bind.if( 'isEmpty', 'ck-hidden' )
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ } );
|
|
|
+ this.items.add( label );
|
|
|
+ this.documentColorsGrid = this._createDocumentColorsGrid();
|
|
|
+ this.items.add( this.documentColorsGrid );
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
* Focuses the first focusable element in {@link #items}.
|
|
|
*/
|
|
|
focus() {
|