Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

I/6106: Moved normalizeColorOptions() and getLocalizedColorOptions() #59

Merged
merged 3 commits into from
Feb 12, 2020
Merged

I/6106: Moved normalizeColorOptions() and getLocalizedColorOptions() #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7623842
Fix paths and move some of the tests after moving color normalization…
panr Feb 11, 2020
8f1935d
Tests: Removed .only().
oleq Feb 12, 2020
387d6c2
Moved normalizeColorCode() helper from ckeditor5-ui.
oleq Feb 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions src/ui/colorui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,8 @@

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
import {
addColorTableToDropdown,
normalizeColorOptions,
getLocalizedColorOptions
} from '../utils';
import { normalizeColorOptions, getLocalizedColorOptions } from '@ckeditor/ckeditor5-ui/src/colorgrid/utils';
import { addColorTableToDropdown } from '../utils';

/**
* The color UI plugin which isolates the common logic responsible for displaying dropdowns with color grids.
Expand Down Expand Up @@ -86,10 +83,11 @@ export default class ColorUI extends Plugin {
*/
init() {
const editor = this.editor;
const t = editor.t;
const locale = editor.locale;
const t = locale.t;
const command = editor.commands.get( this.commandName );
const colorsConfig = normalizeColorOptions( editor.config.get( this.componentName ).colors );
const localizedColors = getLocalizedColorOptions( editor, colorsConfig );
const localizedColors = getLocalizedColorOptions( locale, colorsConfig );
const documentColorsCount = editor.config.get( `${ this.componentName }.documentColors` );

// Register the UI component.
Expand Down
88 changes: 0 additions & 88 deletions src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,19 +87,6 @@ export function renderDowncastElement( styleAttr ) {
}, { priority: 7 } );
}

/**
* Creates a unified color definition object from color configuration options.
* The object contains the information necessary to both render the UI and initialize the conversion.
*
* @param {module:ui/colorgrid/colorgrid~ColorDefinition} options
* @returns {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>}
*/
export function normalizeColorOptions( options ) {
return options
.map( normalizeSingleColorDefinition )
.filter( option => !!option );
}

/**
* A helper that adds {@link module:font/ui/colortableview~ColorTableView} to the color dropdown with proper initial values.
*
Expand All @@ -125,85 +112,10 @@ export function addColorTableToDropdown( { dropdownView, colors, columns, remove
return colorTableView;
}

/**
* Returns color configuration options as defined in `editor.config.(fontColor|fontBackgroundColor).colors`
* but processed to account for editor localization, i.e. to display {@link module:font/fontcolor~FontColorConfig}
* or {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig} 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.
*
* @param {module:core/editor/editor~Editor} editor An editor instance.
* @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} options
* @returns {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>}.
*/
export function getLocalizedColorOptions( editor, options ) {
const t = editor.t;
const localizedColorNames = {
Black: t( 'Black' ),
'Dim grey': t( 'Dim grey' ),
Grey: t( 'Grey' ),
'Light grey': t( 'Light grey' ),
White: t( 'White' ),
Red: t( 'Red' ),
Orange: t( 'Orange' ),
Yellow: t( 'Yellow' ),
'Light green': t( 'Light green' ),
Green: t( 'Green' ),
Aquamarine: t( 'Aquamarine' ),
Turquoise: t( 'Turquoise' ),
'Light blue': t( 'Light blue' ),
Blue: t( 'Blue' ),
Purple: t( 'Purple' )
};

return options.map( colorOption => {
const label = localizedColorNames[ colorOption.label ];

if ( label && label != colorOption.label ) {
colorOption.label = label;
}

return colorOption;
} );
}

// Fixes the color value string.
//
// @param {String} value
// @returns {String}
function normalizeColorCode( value ) {
return value.replace( /\s/g, '' );
}

// Creates a normalized color definition from the user-defined configuration.
//
// @param {String|module:ui/colorgrid/colorgrid~ColorDefinition}
// @returns {module:ui/colorgrid/colorgrid~ColorDefinition}
function normalizeSingleColorDefinition( color ) {
if ( typeof color === 'string' ) {
return {
model: color.replace( / /g, '' ),
label: color,
hasBorder: false,
view: {
name: 'span',
styles: {
color
}
}
};
} else {
return {
model: color.color.replace( / /g, '' ),
label: color.label || color.color,
hasBorder: color.hasBorder === undefined ? false : color.hasBorder,
view: {
name: 'span',
styles: {
color: `${ color.color }`
}
}
};
}
}
109 changes: 0 additions & 109 deletions tests/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
import {
FONT_COLOR,
FONT_BACKGROUND_COLOR,
normalizeColorOptions,
addColorTableToDropdown,
renderDowncastElement
} from './../src/utils';
Expand All @@ -22,114 +21,6 @@ describe( 'utils', () => {
expect( FONT_BACKGROUND_COLOR ).to.equal( 'fontBackgroundColor' );
} );

describe( 'normalizeColorOptions()', () => {
it( 'should return normalized config object from string', () => {
const normalizedOption = normalizeColorOptions( [ 'black' ] );

expect( normalizedOption ).to.deep.equal( [
{
model: 'black',
label: 'black',
hasBorder: false,
view: {
name: 'span',
styles: {
color: 'black'
}
}
}
] );
} );

it( 'should return normalized config object from object( color )', () => {
const normalizedOption = normalizeColorOptions( [ { color: 'black' } ] );

expect( normalizedOption ).to.deep.equal( [
{
model: 'black',
label: 'black',
hasBorder: false,
view: {
name: 'span',
styles: {
color: 'black'
}
}
}
] );
} );

it( 'should return normalized config object from object( color, label )', () => {
const normalizedOption = normalizeColorOptions( [
{
color: 'black',
label: 'Black'
}
] );

expect( normalizedOption ).to.deep.equal( [
{
model: 'black',
label: 'Black',
hasBorder: false,
view: {
name: 'span',
styles: {
color: 'black'
}
}
}
] );
} );

it( 'should return normalized config object from object( color, label, hasBorder )', () => {
const normalizedOption = normalizeColorOptions( [
{
color: 'black',
label: 'Black',
hasBorder: true
}
] );

expect( normalizedOption ).to.deep.equal( [
{
model: 'black',
label: 'Black',
hasBorder: true,
view: {
name: 'span',
styles: {
color: 'black'
}
}
}
] );
} );

it( 'should return normalized config object from object( color, hasBorder )', () => {
const normalizedOption = normalizeColorOptions( [
{
color: 'black',
hasBorder: true
}
] );

expect( normalizedOption ).to.deep.equal( [
{
model: 'black',
label: 'black',
hasBorder: true,
view: {
name: 'span',
styles: {
color: 'black'
}
}
}
] );
} );
} );

describe( 'addColorTableToDropdown()', () => {
it( 'should create dropdown with color table', () => {
const dropdown = createDropdown();
Expand Down