Kaynağa Gözat

Move part of the logic from colorui to colortableview, fix docs and add some small fixes in code.

Mateusz Samsel 6 yıl önce
ebeveyn
işleme
80ab6069dd

+ 2 - 1
packages/ckeditor5-font/src/fontcolor/documentcolorscollection.js

@@ -21,6 +21,7 @@ export default class DocumentColorsCollection extends Collection {
 		 * Indicates whether the collection is empty.
 		 *
 		 * @observable
+		 * @readonly
 		 * @member {Boolean} #isEmpty
 		 */
 		this.set( 'isEmpty', true );
@@ -65,4 +66,4 @@ export default class DocumentColorsCollection extends Collection {
 	}
 }
 
-mix( Collection, ObservableMixin );
+mix( DocumentColorsCollection, ObservableMixin );

+ 107 - 14
packages/ckeditor5-font/src/ui/colortableview.js

@@ -91,13 +91,6 @@ export default class ColorTableView extends View {
 		this.removeButtonLabel = removeButtonLabel;
 
 		/**
-		 * The label of a section with document colors.
-		 *
-		 * @type {String}
-		 */
-		this.documentColorsLabel = documentColorsLabel;
-
-		/**
 		 * The number of columns in the color grid.
 		 *
 		 * @type {Number}
@@ -108,7 +101,7 @@ export default class ColorTableView extends View {
 		 * A collection of definitions stores document colors.
 		 *
 		 * @readonly
-		 * @member {module:utils/collection~Collection}
+		 * @member {module:font/fontcolor/documentcolorscollection~DocumentColorsCollection}
 		 */
 		this.documentColors = new DocumentColorsCollection();
 
@@ -122,6 +115,24 @@ export default class ColorTableView extends View {
 		this.documentColorsCount = documentColorsCount;
 
 		/**
+		 * Preserves reference to {@link module:ui/colorgrid/colorgridview~ColorGridView} used to create
+		 * default (static) colors set.
+		 *
+		 * @readonly
+		 * @member {module:ui/colorgrid/colorgridview~ColorGridView}
+		 */
+		this.staticColorsGrid = this._createStaticColorsGrid();
+
+		/**
+		 * Preserves reference to {@link module:ui/colorgrid/colorgridview~ColorGridView} used to create
+		 * document colors. It remains undefined if document colors are disabled.
+		 *
+		 * @readonly
+		 * @member {module:ui/colorgrid/colorgridview~ColorGridView}
+		 */
+		this.documentColorGrid;
+
+		/**
 		 * Helps cycling over focusable {@link #items} in the list.
 		 *
 		 * @readonly
@@ -153,11 +164,13 @@ export default class ColorTableView extends View {
 		} );
 
 		this.items.add( this._removeColorButton() );
-		this.items.add( this._createStaticColorsGrid() );
+		this.items.add( this.staticColorsGrid );
 
 		if ( documentColorsCount ) {
+			this.documentColorsGrid = this._createDocumentColorsGrid();
+
 			const label = new LabelView( this.locale );
-			label.text = this.documentColorsLabel;
+			label.text = documentColorsLabel;
 
 			label.extendTemplate( {
 				attributes: {
@@ -170,7 +183,7 @@ export default class ColorTableView extends View {
 			} );
 
 			this.items.add( label );
-			this.items.add( this._createDocumentColorsGrid() );
+			this.items.add( this.documentColorsGrid );
 		}
 	}
 
@@ -275,9 +288,7 @@ export default class ColorTableView extends View {
 
 				colorTile.on( 'execute', () => {
 					this.fire( 'execute', {
-						value: colorObj.color,
-						label: colorObj.label,
-						options: Object.assign( {}, colorObj.options )
+						value: colorObj.color
 					} );
 				} );
 
@@ -287,4 +298,86 @@ export default class ColorTableView extends View {
 
 		return documentColors;
 	}
+
+	/**
+	 * 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.
+	 * In other case it's created custom color, which is added to
+	 * {@link module:font/ui/colortableview~ColorTableView#documentColors} model.
+	 *
+	 * @private
+	 * @param {String} color String which stores value of recently applied color
+	 */
+	_addColorToDocumentColors( color ) {
+		const predefinedColor = this.colorDefinitions
+			.find( definition => definition.color === color );
+
+		if ( !predefinedColor ) {
+			this.documentColors.add( {
+				color,
+				label: color,
+				options: {
+					hasBorder: false
+				}
+			} );
+		} else {
+			this.documentColors.add( Object.assign( {}, predefinedColor ) );
+		}
+	}
+}
+
+function isInDocumentColors( collection, color ) {
+	return !!collection.find( item => item.color === color );
 }

+ 3 - 88
packages/ckeditor5-font/src/ui/colorui.js

@@ -76,7 +76,7 @@ export default class ColorUI extends Plugin {
 		/**
 		 * Keeps reference to {@link module:font/ui/colortableview~ColorTableView}.
 		 *
-		 * @type {module:font/ui/colortableview~ColorTableView}
+		 * @member {module:font/ui/colortableview~ColorTableView}
 		 */
 		this.colorTableView;
 	}
@@ -134,98 +134,13 @@ export default class ColorUI extends Plugin {
 			dropdownView.on( 'change:isOpen', ( evt, name, val ) => {
 				if ( val ) {
 					if ( documentColorsCount !== 0 ) {
-						this._updateDocumentColors();
+						this.colorTableView.updateDocumentColors( editor.model, this.componentName );
 					}
-					this._updateSelectedColors();
+					this.colorTableView.updateSelectedColors();
 				}
 			} );
 
 			return dropdownView;
 		} );
 	}
-
-	/**
-	 * 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.
-	 * In other case it's created custom color, which is added to
-	 * {@link module:font/ui/colortableview~ColorTableView#documentColors} model.
-	 *
-	 * @private
-	 * @param {String} color String which stores value of recently applied color
-	 */
-	_addColorToDocumentColors( color ) {
-		const predefinedColor = this.colorTableView.colorDefinitions
-			.find( definition => definition.color === color );
-
-		if ( !predefinedColor ) {
-			this.colorTableView.documentColors.add( {
-				color,
-				label: color,
-				options: {
-					hasBorder: false
-				}
-			} );
-		} else {
-			this.colorTableView.documentColors.add( Object.assign( {}, predefinedColor ) );
-		}
-	}
-
-	/**
-	 * 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.
-	 *
-	 * @private
-	 */
-	_updateDocumentColors() {
-		const model = this.editor.model;
-		const document = model.document;
-		const maxCount = this.colorTableView.documentColorsCount;
-		const documentColors = this.colorTableView.documentColors;
-
-		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( this.componentName ) ) {
-					this._addColorToDocumentColors( node.getAttribute( this.componentName ) );
-					if ( 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.
-	 *
-	 * @private
-	 */
-	_updateSelectedColors() {
-		const staticColorsGrid = this.colorTableView.items.get( 1 );
-		const documentColorGrid = this.colorTableView.items.get( 3 );
-		const selectedColor = this.colorTableView.selectedColor;
-
-		if ( documentColorGrid ) {
-			if ( isInDocumentColors( documentColorGrid.items, selectedColor ) ) {
-				documentColorGrid.selectedColor = selectedColor;
-				staticColorsGrid.selectedColor = null;
-			} else {
-				documentColorGrid.selectedColor = null;
-				staticColorsGrid.selectedColor = selectedColor;
-			}
-		} else {
-			staticColorsGrid.selectedColor = selectedColor;
-		}
-	}
-}
-
-function isInDocumentColors( collection, color ) {
-	return !!collection.find( item => item.color === color );
 }