Browse Source

Rearrange code, fix template for hidden docuemnt colors.

Mateusz Samsel 6 years ago
parent
commit
15c9011b4a
1 changed files with 57 additions and 51 deletions
  1. 57 51
      packages/ckeditor5-font/src/ui/colortableview.js

+ 57 - 51
packages/ckeditor5-font/src/ui/colortableview.js

@@ -188,6 +188,57 @@ export default class ColorTableView extends View {
 	}
 
 	/**
+	 * Method scans through editor's content and searches for text node attributes with the name defined in {@link #commandName}.
+	 * Found entries are set as document colors.
+	 *
+	 * All the previously stored document colors will be lost in the process.
+	 *
+	 * @param {model:engine/model/model~Model} model used as source to obtain document colors
+	 * @param {String} componentName determines what is name of related model's attribute for given dropdown
+	 */
+	updateDocumentColors( model, componentName ) {
+		const document = model.document;
+		const maxCount = this.documentColorsCount;
+
+		this.documentColors.clear();
+
+		for ( const rootName of document.getRootNames() ) {
+			const root = document.getRoot( rootName );
+			const range = model.createRangeIn( root );
+			for ( const node of range.getItems() ) {
+				if ( node.is( 'textProxy' ) && node.hasAttribute( componentName ) ) {
+					this._addColorToDocumentColors( node.getAttribute( componentName ) );
+					if ( this.documentColors.length >= maxCount ) {
+						return;
+					}
+				}
+			}
+		}
+	}
+
+	/**
+	 * Method refresh state of `selectedColor` in single or both {@link module:ui/colorgrid/colorgridview~ColorGridView}
+	 * available in {@link module:font/ui/colortableview~ColorTableView}. It guarantees that selection will occur only in one of them.
+	 */
+	updateSelectedColors() {
+		const documentColorsGrid = this.documentColorsGrid;
+		const staticColorsGrid = this.staticColorsGrid;
+		const selectedColor = this.selectedColor;
+
+		if ( documentColorsGrid ) {
+			if ( isInDocumentColors( documentColorsGrid.items, selectedColor ) ) {
+				documentColorsGrid.selectedColor = selectedColor;
+				staticColorsGrid.selectedColor = null;
+			} else {
+				documentColorsGrid.selectedColor = null;
+				staticColorsGrid.selectedColor = selectedColor;
+			}
+		} else {
+			staticColorsGrid.selectedColor = selectedColor;
+		}
+	}
+
+	/**
 	 * @inheritDoc
 	 */
 	render() {
@@ -270,6 +321,12 @@ export default class ColorTableView extends View {
 
 		documentColors.delegate( 'execute' ).to( this );
 
+		documentColors.extendTemplate( {
+			attributes: {
+				class: Template.bind( this.documentColors, this.documentColors ).if( 'isEmpty', 'ck-hidden' )
+			}
+		} );
+
 		documentColors.items.bindTo( this.documentColors ).using(
 			colorObj => {
 				const colorTile = new ColorTileView();
@@ -300,57 +357,6 @@ export default class ColorTableView extends View {
 	}
 
 	/**
-	 * Method scans through editor's content and searches for text node attributes with the name defined in {@link #commandName}.
-	 * Found entries are set as document colors.
-	 *
-	 * All the previously stored document colors will be lost in the process.
-	 *
-	 * @param {model:engine/model/model~Model} model used as source to obtain document colors
-	 * @param {String} componentName determines what is name of related model's attribute for given dropdown
-	 */
-	updateDocumentColors( model, componentName ) {
-		const document = model.document;
-		const maxCount = this.documentColorsCount;
-
-		this.documentColors.clear();
-
-		for ( const rootName of document.getRootNames() ) {
-			const root = document.getRoot( rootName );
-			const range = model.createRangeIn( root );
-			for ( const node of range.getItems() ) {
-				if ( node.is( 'textProxy' ) && node.hasAttribute( componentName ) ) {
-					this._addColorToDocumentColors( node.getAttribute( componentName ) );
-					if ( this.documentColors.length >= maxCount ) {
-						return;
-					}
-				}
-			}
-		}
-	}
-
-	/**
-	 * Method refresh state of `selectedColor` in single or both {@link module:ui/colorgrid/colorgridview~ColorGridView}
-	 * available in {@link module:font/ui/colortableview~ColorTableView}. It guarantees that selection will occur only in one of them.
-	 */
-	updateSelectedColors() {
-		const documentColorsGrid = this.documentColorsGrid;
-		const staticColorsGrid = this.staticColorsGrid;
-		const selectedColor = this.selectedColor;
-
-		if ( documentColorsGrid ) {
-			if ( isInDocumentColors( documentColorsGrid.items, selectedColor ) ) {
-				documentColorsGrid.selectedColor = selectedColor;
-				staticColorsGrid.selectedColor = null;
-			} else {
-				documentColorsGrid.selectedColor = null;
-				staticColorsGrid.selectedColor = selectedColor;
-			}
-		} else {
-			staticColorsGrid.selectedColor = selectedColor;
-		}
-	}
-
-	/**
 	 * Method adds the `color` to document colors list. If possible, it will attempt to use data from the
 	 * {@link #colorDefinitions} (label, color options). If color is found, then it is added to the
 	 * {@link module:font/ui/colortableview~ColorTableView#documentColors} model.