8
0
Просмотр исходного кода

Internal: Lazy loading for font dropdown.

Tests will need to be adjusted.
Marek Lewandowski 6 лет назад
Родитель
Сommit
d8a17e8ede
2 измененных файлов с 17 добавлено и 6 удалено
  1. 15 6
      packages/ckeditor5-font/src/ui/colortableview.js
  2. 2 0
      packages/ckeditor5-font/src/ui/colorui.js

+ 15 - 6
packages/ckeditor5-font/src/ui/colortableview.js

@@ -121,7 +121,7 @@ export default class ColorTableView extends View {
 		 * @readonly
 		 * @readonly
 		 * @member {module:ui/colorgrid/colorgrid~ColorGridView}
 		 * @member {module:ui/colorgrid/colorgrid~ColorGridView}
 		 */
 		 */
-		this.staticColorsGrid = this._createStaticColorsGrid();
+		this.staticColorsGrid;
 
 
 		/**
 		/**
 		 * Preserves the reference to {@link module:ui/colorgrid/colorgrid~ColorGridView} used to create
 		 * Preserves the reference to {@link module:ui/colorgrid/colorgrid~ColorGridView} used to create
@@ -164,14 +164,25 @@ export default class ColorTableView extends View {
 		} );
 		} );
 
 
 		this.items.add( this._removeColorButton() );
 		this.items.add( this._removeColorButton() );
+
+		this._documentColorsCount = documentColorsCount;
+		this._documentColorsLabel = documentColorsLabel;
+	}
+
+	renderGrids() {
+		if ( this.staticColorsGrid ) {
+			return;
+		}
+
+		this.staticColorsGrid = this._createStaticColorsGrid();
+
 		this.items.add( this.staticColorsGrid );
 		this.items.add( this.staticColorsGrid );
 
 
-		if ( documentColorsCount ) {
+		if ( this._documentColorsCount ) {
 			// Create a label for document colors.
 			// Create a label for document colors.
 			const bind = Template.bind( this.documentColors, this.documentColors );
 			const bind = Template.bind( this.documentColors, this.documentColors );
 			const label = new LabelView( this.locale );
 			const label = new LabelView( this.locale );
-
-			label.text = documentColorsLabel;
+			label.text = this._documentColorsLabel;
 			label.extendTemplate( {
 			label.extendTemplate( {
 				attributes: {
 				attributes: {
 					class: [
 					class: [
@@ -181,9 +192,7 @@ export default class ColorTableView extends View {
 					]
 					]
 				}
 				}
 			} );
 			} );
-
 			this.items.add( label );
 			this.items.add( label );
-
 			this.documentColorsGrid = this._createDocumentColorsGrid();
 			this.documentColorsGrid = this._createDocumentColorsGrid();
 			this.items.add( this.documentColorsGrid );
 			this.items.add( this.documentColorsGrid );
 		}
 		}

+ 2 - 0
packages/ckeditor5-font/src/ui/colorui.js

@@ -132,6 +132,8 @@ export default class ColorUI extends Plugin {
 			} );
 			} );
 
 
 			dropdownView.on( 'change:isOpen', ( evt, name, isVisible ) => {
 			dropdownView.on( 'change:isOpen', ( evt, name, isVisible ) => {
+				dropdownView.colorTableView.renderGrids();
+
 				if ( isVisible ) {
 				if ( isVisible ) {
 					if ( documentColorsCount !== 0 ) {
 					if ( documentColorsCount !== 0 ) {
 						this.colorTableView.updateDocumentColors( editor.model, this.componentName );
 						this.colorTableView.updateDocumentColors( editor.model, this.componentName );