Преглед на файлове

Extract color UI to same class.

Mateusz Samsel преди 6 години
родител
ревизия
ddff6f2126

+ 10 - 80
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -4,12 +4,11 @@
  */
 
 /**
- * @module font/fontbackgroundcolor/fontbackgroundolorui
+ * @module font/fontcolor/fontcolorui
  */
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-import { FONT_BACKGROUND_COLOR, normalizeOptions, addColorsToDropdown } from '../utils';
+import ColorUI from '../ui/colorui';
+import { FONT_BACKGROUND_COLOR } from '../utils';
 import fontBackgroundColorIcon from '../../theme/icons/font-background.svg';
 
 /**
@@ -17,82 +16,13 @@ import fontBackgroundColorIcon from '../../theme/icons/font-background.svg';
  *
  * @extends module:core/plugin~Plugin
  */
-export default class FontBackgroundColorUI extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		const t = editor.t;
-		const command = editor.commands.get( FONT_BACKGROUND_COLOR );
-
-		const options = this._getLocalizedOptions();
-
-		// Register UI component.
-		editor.ui.componentFactory.add( FONT_BACKGROUND_COLOR, locale => {
-			const dropdownView = createDropdown( locale );
-			const colorTableView = addColorsToDropdown(
-				dropdownView,
-				options.map( element => ( {
-					label: element.label,
-					color: element.model,
-					options: {
-						hasBorder: element.hasBorder
-					}
-				} ) )
-			);
-			colorTableView.set( 'removeButtonTooltip', t( 'Remove color' ) );
-
-			colorTableView.bind( 'selectedColor' ).to( command, 'value' );
-
-			dropdownView.buttonView.set( {
-				label: t( 'Font Background Color' ),
-				icon: fontBackgroundColorIcon,
-				tooltip: true
-			} );
-
-			dropdownView.extendTemplate( {
-				attributes: {
-					class: 'ck-font-background-color-dropdown'
-				}
-			} );
-
-			dropdownView.bind( 'isEnabled' ).to( command );
-
-			dropdownView.on( 'execute', ( evt, data ) => {
-				if ( data.value !== null ) {
-					colorTableView.recentlyUsedColors.add( {
-						color: data.value,
-						hasBorder: data.hasBorder,
-						label: data.label
-					}, 0 );
-				}
-				editor.execute( FONT_BACKGROUND_COLOR, data );
-				editor.editing.view.focus();
-			} );
-
-			return dropdownView;
-		} );
-	}
-
-	/**
-	 * Returns options as defined in `config.fontBackgroundColor.colors` but processed to account for
-	 * editor localization, i.e. to display {@link module:font/fontBackgroundColor~FontBackgroundColorOption}
-	 * in the correct language.
-	 *
-	 * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
-	 * when the user configuration is defined because the editor does not exist yet.
-	 *
-	 * @private
-	 * @returns {Array.<module:font/fontbackgroundcolor~FontBackgroundColorOption>}.
-	 */
-	_getLocalizedOptions() {
-		const editor = this.editor;
-		const t = editor.t;
-		const options = normalizeOptions( editor.config.get( `${ FONT_BACKGROUND_COLOR }.colors` ) );
-		options.forEach( option => {
-			option.label = t( option.label );
+export default class FontColorUI extends ColorUI {
+	constructor( editor ) {
+		super( editor, {
+			commandName: FONT_BACKGROUND_COLOR,
+			componentName: FONT_BACKGROUND_COLOR,
+			icon: fontBackgroundColorIcon,
+			dropdownLabel: 'Font Background Color'
 		} );
-		return options;
 	}
 }

+ 9 - 75
packages/ckeditor5-font/src/fontcolor/fontcolorui.js

@@ -7,9 +7,8 @@
  * @module font/fontcolor/fontcolorui
  */
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-import { FONT_COLOR, normalizeOptions, addColorsToDropdown } from '../utils';
+import ColorUI from '../ui/colorui';
+import { FONT_COLOR } from '../utils';
 import fontColorIcon from '../../theme/icons/font-color.svg';
 
 /**
@@ -17,78 +16,13 @@ import fontColorIcon from '../../theme/icons/font-color.svg';
  *
  * @extends module:core/plugin~Plugin
  */
-export default class FontColorUI extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		const t = editor.t;
-		const command = editor.commands.get( FONT_COLOR );
-
-		const options = this._getLocalizedOptions();
-
-		// Register UI component.
-		editor.ui.componentFactory.add( FONT_COLOR, locale => {
-			const dropdownView = createDropdown( locale );
-			const colorTableView = addColorsToDropdown(
-				dropdownView,
-				options.map( element => ( {
-					label: element.label,
-					color: element.model,
-					options: {
-						hasBorder: element.hasBorder
-					}
-				} ) )
-			);
-			colorTableView.set( 'removeButtonTooltip', t( 'Remove color' ) );
-
-			colorTableView.bind( 'selectedColor' ).to( command, 'value' );
-
-			dropdownView.buttonView.set( {
-				label: t( 'Font Color' ),
-				icon: fontColorIcon,
-				tooltip: true
-			} );
-
-			dropdownView.extendTemplate( {
-				attributes: {
-					class: 'ck-font-color-dropdown'
-				}
-			} );
-
-			dropdownView.bind( 'isEnabled' ).to( command );
-
-			dropdownView.on( 'execute', ( evt, val ) => {
-				if ( val.value !== null ) {
-					colorTableView.recentlyUsedColors.add( { color: val.value, hasBorder: val.hasBorder, label: val.label }, 0 );
-				}
-				editor.execute( FONT_COLOR, val );
-				editor.editing.view.focus();
-			} );
-
-			return dropdownView;
-		} );
-	}
-
-	/**
-	 * Returns options as defined in `config.fontColor.colors` but processed to account for
-	 * editor localization, i.e. to display {@link module:font/fontColor~FontColorOption}
-	 * in the correct language.
-	 *
-	 * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
-	 * when the user configuration is defined because the editor does not exist yet.
-	 *
-	 * @private
-	 * @returns {Array.<module:font/fontbackgroundcolor~FontBackgroundColorOption>}.
-	 */
-	_getLocalizedOptions() {
-		const editor = this.editor;
-		const t = editor.t;
-		const options = normalizeOptions( editor.config.get( `${ FONT_COLOR }.colors` ) );
-		options.forEach( option => {
-			option.label = t( option.label );
+export default class FontColorUI extends ColorUI {
+	constructor( editor ) {
+		super( editor, {
+			commandName: FONT_COLOR,
+			componentName: FONT_COLOR,
+			icon: fontColorIcon,
+			dropdownLabel: 'Font Color'
 		} );
-		return options;
 	}
 }

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

@@ -0,0 +1,102 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module font/fontcolor/fontcolorui
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import { normalizeOptions, addColorsToDropdown } from '../utils';
+
+/**
+ * The font background color UI plugin. It introduces the `'fontBackgroundColor'` dropdown.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ColorUI extends Plugin {
+	constructor( editor, { commandName, icon, componentName, dropdownLabel } ) {
+		super( editor );
+
+		this.commandName = commandName;
+		this.icon = icon;
+		this.componentName = componentName;
+		this.dropdownLabel = dropdownLabel;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+		const command = editor.commands.get( this.commandName );
+
+		const options = this._getLocalizedOptions();
+
+		// Register UI component.
+		editor.ui.componentFactory.add( this.componentName, locale => {
+			const dropdownView = createDropdown( locale );
+			const colorTableView = addColorsToDropdown(
+				dropdownView,
+				options.map( element => ( {
+					label: element.label,
+					color: element.model,
+					options: {
+						hasBorder: element.hasBorder
+					}
+				} ) )
+			);
+			colorTableView.set( 'removeButtonTooltip', t( 'Remove color' ) );
+
+			colorTableView.bind( 'selectedColor' ).to( command, 'value' );
+
+			dropdownView.buttonView.set( {
+				label: t( this.dropdownLabel ),
+				icon: this.icon,
+				tooltip: true
+			} );
+
+			dropdownView.extendTemplate( {
+				attributes: {
+					class: 'ck-color-ui-dropdown'
+				}
+			} );
+
+			dropdownView.bind( 'isEnabled' ).to( command );
+
+			dropdownView.on( 'execute', ( evt, val ) => {
+				if ( val.value !== null ) {
+					colorTableView.recentlyUsedColors.add( { color: val.value, hasBorder: val.hasBorder, label: val.label }, 0 );
+				}
+				editor.execute( this.commandName, val );
+				editor.editing.view.focus();
+			} );
+
+			return dropdownView;
+		} );
+	}
+
+	/**
+	 * Returns options as defined in `config.fontColor.colors` but processed to account for
+	 * editor localization, i.e. to display {@link module:font/fontColor~FontColorOption}
+	 * in the correct language.
+	 *
+	 * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
+	 * when the user configuration is defined because the editor does not exist yet.
+	 *
+	 * @private
+	 * @returns {Array.<module:font/fontbackgroundcolor~FontBackgroundColorOption>}.
+	 */
+	_getLocalizedOptions() {
+		const editor = this.editor;
+		const t = editor.t;
+		const options = normalizeOptions( editor.config.get( `${ this.componentName }.colors` ) );
+		options.forEach( option => {
+			option.label = t( option.label );
+		} );
+		return options;
+	}
+}