8
0
فهرست منبع

Change color model to be 2 dimension array and fix all references to it.

Mateusz Samsel 6 سال پیش
والد
کامیت
47d6d6f1cd

+ 22 - 97
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorediting.js

@@ -21,103 +21,28 @@ export default class FontBackgroundColorEditing extends Plugin {
 		super( editor );
 
 		editor.config.define( FONT_BACKGROUND_COLOR, {
-			options: [
-				{
-					label: 'Strong Cyan',
-					color: '#1ABC9C'
-				},
-				{
-					label: 'Emerald',
-					color: '#2ECC71'
-				},
-				{
-					label: 'Bright Blue',
-					color: '#3498DB'
-				},
-				{
-					label: 'Amethyst',
-					color: '#9B59B6'
-				},
-				{
-					label: 'Grayish Blue',
-					color: '#4E5F70'
-				},
-				{
-					label: 'Vivid Yellow',
-					color: '#F1C40F'
-				},
-				{
-					label: 'Dark Cyan',
-					color: '#16A085'
-				},
-				{
-					label: 'Dark Emerald',
-					color: '#27AE60'
-				},
-				{
-					label: 'Strong Blue',
-					color: '#2980B9'
-				},
-				{
-					label: 'Dark Violet',
-					color: '#8E44AD'
-				},
-				{
-					label: 'Desaturated Blue',
-					color: '#2C3E50'
-				},
-				{
-					label: 'Orange',
-					color: '#F39C12'
-				},
-				{
-					label: 'Carrot',
-					color: '#E67E22'
-				},
-				{
-					label: 'Pale Red',
-					color: '#E74C3C'
-				},
-				{
-					label: 'Bright Silver',
-					color: '#ECF0F1'
-				},
-				{
-					label: 'Light Grayish Cyan',
-					color: '#95A5A6'
-				},
-				{
-					label: 'Light Gray',
-					color: '#DDD'
-				},
-				{
-					label: 'White',
-					color: '#FFF'
-				},
-				{
-					label: 'Pumpkin',
-					color: '#D35400'
-				},
-				{
-					label: 'Strong Red',
-					color: '#C0392B'
-				},
-				{
-					label: 'Silver',
-					color: '#BDC3C7'
-				},
-				{
-					label: 'Grayish Cyan',
-					color: '#7F8C8D'
-				},
-				{
-					label: 'Dark Gray',
-					color: '#999'
-				},
-				{
-					label: 'Black',
-					color: '#000'
-				}
+			colors: [
+				[
+					'hsl(0, 0%, 0%)',
+					'hsl(0, 0%, 30%)',
+					'hsl(0, 0%, 60%)',
+					'hsl(0, 0%, 90%)',
+					'hsl(0, 0%, 100%)'
+				],
+				[
+					'hsl(360, 75%, 60%)',
+					'hsl(30, 75%, 60%)',
+					'hsl(60, 75%, 60%)',
+					'hsl(90, 75%, 60%)',
+					'hsl(120, 75%, 60%)'
+				],
+				[
+					'hsl(150, 75%, 60%)',
+					'hsl(180, 75%, 60%)',
+					'hsl(210, 75%, 60%)',
+					'hsl(240, 75%, 60%)',
+					'hsl(270, 75%, 60%)'
+				]
 			]
 		} );
 

+ 5 - 5
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -30,13 +30,14 @@ export default class FontBackgroundColorUI extends Plugin {
 			const splitButtonView = dropdownView.buttonView;
 			const colorTableView = colorUI.addColorsToDropdown(
 				dropdownView,
-				options.map( item => ( { name: item.label, color: item.model } ) )
+				options.map( row => row.map( element => ( { name: element.label, color: element.model } ) ) )
 			);
 			colorTableView.set( 'removeButtonTooltip', t( 'Remove background color' ) );
 
 			colorTableView.bind( 'selectedColor' ).to( command, 'value' );
 
-			dropdownView.set( 'lastlySelectedColor', { value: options[ 0 ].model } );
+			// Preselect first element on color list.
+			dropdownView.set( 'lastlySelectedColor', { value: options[ 0 ][ 0 ].model } );
 
 			dropdownView.buttonView.set( {
 				label: t( 'Font Background Color' ),
@@ -78,8 +79,7 @@ export default class FontBackgroundColorUI extends Plugin {
 	 */
 	_getLocalizedOptions() {
 		const editor = this.editor;
-		const options = normalizeOptions( editor.config.get( `${ FONT_BACKGROUND_COLOR }.options` ) );
-
-		return options;
+		const colors = editor.config.get( `${ FONT_BACKGROUND_COLOR }.colors` ).map( colorRow => normalizeOptions( colorRow ) );
+		return colors;
 	}
 }

+ 22 - 97
packages/ckeditor5-font/src/fontcolor/fontcolorediting.js

@@ -21,103 +21,28 @@ export default class FontColorEditing extends Plugin {
 		super( editor );
 
 		editor.config.define( FONT_COLOR, {
-			options: [
-				{
-					label: 'Strong Cyan',
-					color: '#1ABC9C'
-				},
-				{
-					label: 'Emerald',
-					color: '#2ECC71'
-				},
-				{
-					label: 'Bright Blue',
-					color: '#3498DB'
-				},
-				{
-					label: 'Amethyst',
-					color: '#9B59B6'
-				},
-				{
-					label: 'Grayish Blue',
-					color: '#4E5F70'
-				},
-				{
-					label: 'Vivid Yellow',
-					color: '#F1C40F'
-				},
-				{
-					label: 'Dark Cyan',
-					color: '#16A085'
-				},
-				{
-					label: 'Dark Emerald',
-					color: '#27AE60'
-				},
-				{
-					label: 'Strong Blue',
-					color: '#2980B9'
-				},
-				{
-					label: 'Dark Violet',
-					color: '#8E44AD'
-				},
-				{
-					label: 'Desaturated Blue',
-					color: '#2C3E50'
-				},
-				{
-					label: 'Orange',
-					color: '#F39C12'
-				},
-				{
-					label: 'Carrot',
-					color: '#E67E22'
-				},
-				{
-					label: 'Pale Red',
-					color: '#E74C3C'
-				},
-				{
-					label: 'Bright Silver',
-					color: '#ECF0F1'
-				},
-				{
-					label: 'Light Grayish Cyan',
-					color: '#95A5A6'
-				},
-				{
-					label: 'Light Gray',
-					color: '#DDD'
-				},
-				{
-					label: 'White',
-					color: '#FFF'
-				},
-				{
-					label: 'Pumpkin',
-					color: '#D35400'
-				},
-				{
-					label: 'Strong Red',
-					color: '#C0392B'
-				},
-				{
-					label: 'Silver',
-					color: '#BDC3C7'
-				},
-				{
-					label: 'Grayish Cyan',
-					color: '#7F8C8D'
-				},
-				{
-					label: 'Dark Gray',
-					color: '#999'
-				},
-				{
-					label: 'Black',
-					color: '#000'
-				}
+			colors: [
+				[
+					'hsl(0, 0%, 0%)',
+					'hsl(0, 0%, 30%)',
+					'hsl(0, 0%, 60%)',
+					'hsl(0, 0%, 90%)',
+					'hsl(0, 0%, 100%)'
+				],
+				[
+					'hsl(360, 75%, 60%)',
+					'hsl(30, 75%, 60%)',
+					'hsl(60, 75%, 60%)',
+					'hsl(90, 75%, 60%)',
+					'hsl(120, 75%, 60%)'
+				],
+				[
+					'hsl(150, 75%, 60%)',
+					'hsl(180, 75%, 60%)',
+					'hsl(210, 75%, 60%)',
+					'hsl(240, 75%, 60%)',
+					'hsl(270, 75%, 60%)'
+				]
 			]
 		} );
 

+ 5 - 5
packages/ckeditor5-font/src/fontcolor/fontcolorui.js

@@ -30,13 +30,14 @@ export default class FontColorUI extends Plugin {
 			const splitButtonView = dropdownView.buttonView;
 			const colorTableView = colorUI.addColorsToDropdown(
 				dropdownView,
-				options.map( item => ( { name: item.label, color: item.model } ) )
+				options.map( row => row.map( element => ( { name: element.label, color: element.model } ) ) )
 			);
 			colorTableView.set( 'removeButtonTooltip', t( 'Remove text color' ) );
 
 			colorTableView.bind( 'selectedColor' ).to( command, 'value' );
 
-			dropdownView.set( 'lastlySelectedColor', { value: options[ 0 ].model } );
+			// Preselect first element on color list.
+			dropdownView.set( 'lastlySelectedColor', { value: options[ 0 ][ 0 ].model } );
 
 			dropdownView.buttonView.set( {
 				label: t( 'Font Color' ),
@@ -78,8 +79,7 @@ export default class FontColorUI extends Plugin {
 	 */
 	_getLocalizedOptions() {
 		const editor = this.editor;
-		const options = normalizeOptions( editor.config.get( `${ FONT_COLOR }.options` ) );
-
-		return options;
+		const colors = editor.config.get( `${ FONT_COLOR }.colors` ).map( colorRow => normalizeOptions( colorRow ) );
+		return colors;
 	}
 }

+ 30 - 48
packages/ckeditor5-font/src/ui/colortableview.js

@@ -11,7 +11,6 @@ import '../../theme/fontcolor.css';
 export default class ColorTableView extends View {
 	constructor( locale, { colors } ) {
 		super( locale );
-		const bind = this.bindTemplate;
 
 		this.COLUMNS = 6;
 		this.colorsDefinition = colors;
@@ -27,10 +26,7 @@ export default class ColorTableView extends View {
 			},
 			children: [
 				this.createColorTableTemplate(),
-				this.removeColorButton(),
-				{
-					text: bind.to( 'hoveredColor' )
-				}
+				this.removeColorButton()
 			]
 		} );
 	}
@@ -52,58 +48,44 @@ export default class ColorTableView extends View {
 	createColorTableTemplate() {
 		return new Template( {
 			tag: 'table',
-			children: this._colorRows(),
+			children: this._colorRows( this.colorsDefinition ),
 			attributes: {
 				class: 'ck-color-table__table'
 			}
 		} );
 	}
 
-	_colorRows() {
-		const rows = [];
-		for ( let i = 0; i < Math.ceil( this.colorsDefinition.length / this.COLUMNS ); i++ ) {
-			rows.push( new Template( {
-				tag: 'tr',
-				children: this._colorElements( i )
-			} ) );
-		}
-		return rows;
+	_colorRows( colorTable ) {
+		return colorTable.map( rowArr => new Template( {
+			tag: 'tr',
+			children: this._colorElements( rowArr )
+		} ) );
 	}
 
-	_colorElements( index ) {
-		const elements = [];
+	_colorElements( rowArr ) {
 		const bind = this.bindTemplate;
-		for ( let i = 0; i < this.COLUMNS; i++ ) {
-			elements.push( new Template( {
-				tag: 'td',
-				attributes: {
-					style: {
-						backgroundColor: `${ this.colorsDefinition[ index * this.COLUMNS + i ].color }`
-					},
-					class: [
-						'ck-color-table__cell-color',
-						bind.if(
-							'selectedColor',
-							'ck-color-table__cell-color_active',
-							value => {
-								return value === this.colorsDefinition[ index * this.COLUMNS + i ].color;
-							}
-						)
-					]
+		return rowArr.map( element => new Template( {
+			tag: 'td',
+			attributes: {
+				style: {
+					backgroundColor: element.color
 				},
-				on: {
-					click: bind.to( () => {
-						this.fire( 'execute', { value: this.colorsDefinition[ index * this.COLUMNS + i ].color } );
-					} ),
-					mouseover: bind.to( () => {
-						this.set( 'hoveredColor', this.colorsDefinition[ index * this.COLUMNS + i ].name );
-					} ),
-					mouseout: bind.to( () => {
-						this.set( 'hoveredColor', undefined );
-					} )
-				}
-			} ) );
-		}
-		return elements;
+				class: [
+					'ck-color-table__cell-color',
+					bind.if(
+						'selectedColor',
+						'ck-color-table__cell-color_active',
+						value => {
+							return value === element.color;
+						}
+					)
+				]
+			},
+			on: {
+				click: bind.to( () => {
+					this.fire( 'execute', { value: element.color } );
+				} )
+			}
+		} ) );
 	}
 }

+ 28 - 16
packages/ckeditor5-font/src/utils.js

@@ -58,25 +58,37 @@ function normalizeColorCode( value ) {
 	return value.replace( /\s/g, '' );
 }
 
-export function normalizeOptions( configuredOptions ) {
-	return configuredOptions
-		.map( getOptionDefinition )
+export function normalizeOptions( colorRow ) {
+	return colorRow
+		.map( getColorsDefinition )
 		.filter( option => !!option );
 }
 
-function getOptionDefinition( option ) {
-	return {
-		title: option.label,
-		model: option.color,
-		label: option.label,
-		view: {
-			name: 'span',
-			styles: {
-				color: `${ option.color }`
-			},
-			priority: 5
-		}
-	};
+function getColorsDefinition( color ) {
+	if ( typeof color === 'string' ) {
+		return {
+			model: color,
+			view: {
+				name: 'span',
+				styles: {
+					color
+				},
+				priority: 5
+			}
+		};
+	} else {
+		return {
+			model: color.color,
+			label: color.label,
+			view: {
+				name: 'span',
+				styles: {
+					color: `${ color.color }`
+				},
+				priority: 5
+			}
+		};
+	}
 }
 
 export const colorUI = {