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

Commit

Permalink
Merge pull request #1816 from ckeditor/i/6132
Browse files Browse the repository at this point in the history 
Docs: Introduce `BoxSides` type definition. Closes ckeditor/ckeditor5#6132.
  • Loading branch information
@oleq
oleq committed Jan 24, 2020
2 parents b2a8189 + b488001 commit 48bea53
Show file tree
Hide file tree
Showing 7 changed files with 64 additions and 37 deletions.
16 changes: 8 additions & 8 deletions src/view/styles/border.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @module engine/view/styles/border
*/

import { getShorthandValues, getTopRightBottomLeftValueReducer, getTopRightBottomLeftValues, isLength, isLineStyle } from './utils';
import { getShorthandValues, getBoxSidesValueReducer, getBoxSidesValues, isLength, isLineStyle } from './utils';

/**
* Adds a border CSS styles processing rules.
Expand Down Expand Up @@ -95,9 +95,9 @@ export function addBorderRules( stylesProcessor ) {
stylesProcessor.setExtractor( 'border-bottom-style', 'border.style.bottom' );
stylesProcessor.setExtractor( 'border-left-style', 'border.style.left' );

stylesProcessor.setReducer( 'border-color', getTopRightBottomLeftValueReducer( 'border-color' ) );
stylesProcessor.setReducer( 'border-style', getTopRightBottomLeftValueReducer( 'border-style' ) );
stylesProcessor.setReducer( 'border-width', getTopRightBottomLeftValueReducer( 'border-width' ) );
stylesProcessor.setReducer( 'border-color', getBoxSidesValueReducer( 'border-color' ) );
stylesProcessor.setReducer( 'border-style', getBoxSidesValueReducer( 'border-style' ) );
stylesProcessor.setReducer( 'border-width', getBoxSidesValueReducer( 'border-width' ) );
stylesProcessor.setReducer( 'border-top', getBorderPositionReducer( 'top' ) );
stylesProcessor.setReducer( 'border-right', getBorderPositionReducer( 'right' ) );
stylesProcessor.setReducer( 'border-bottom', getBorderPositionReducer( 'bottom' ) );
Expand Down Expand Up @@ -134,9 +134,9 @@ function borderNormalizer( value ) {
return {
path: 'border',
value: {
color: getTopRightBottomLeftValues( color ),
style: getTopRightBottomLeftValues( style ),
width: getTopRightBottomLeftValues( width )
color: getBoxSidesValues( color ),
style: getBoxSidesValues( style ),
width: getBoxSidesValues( width )
}
};
}
Expand Down Expand Up @@ -177,7 +177,7 @@ function getBorderPropertyNormalizer( propertyName ) {

function toBorderPropertyShorthand( value, property ) {
return {
[ property ]: getTopRightBottomLeftValues( value )
[ property ]: getBoxSidesValues( value )
};
}

Expand Down
4 changes: 2 additions & 2 deletions src/view/styles/margin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @module engine/view/styles/margin
*/

import { getPositionShorthandNormalizer, getTopRightBottomLeftValueReducer } from './utils';
import { getPositionShorthandNormalizer, getBoxSidesValueReducer } from './utils';

/**
* Adds a margin CSS styles processing rules.
Expand Down Expand Up @@ -35,7 +35,7 @@ export function addMarginRules( stylesProcessor ) {
stylesProcessor.setNormalizer( 'margin-bottom', value => ( { path: 'margin.bottom', value } ) );
stylesProcessor.setNormalizer( 'margin-left', value => ( { path: 'margin.left', value } ) );

stylesProcessor.setReducer( 'margin', getTopRightBottomLeftValueReducer( 'margin' ) );
stylesProcessor.setReducer( 'margin', getBoxSidesValueReducer( 'margin' ) );

stylesProcessor.setStyleRelation( 'margin', [ 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' ] );
}
4 changes: 2 additions & 2 deletions src/view/styles/padding.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @module engine/view/styles/padding
*/

import { getPositionShorthandNormalizer, getTopRightBottomLeftValueReducer } from './utils';
import { getPositionShorthandNormalizer, getBoxSidesValueReducer } from './utils';

/**
* Adds a margin CSS styles processing rules.
Expand All @@ -34,7 +34,7 @@ export function addPaddingRules( stylesProcessor ) {
stylesProcessor.setNormalizer( 'padding-bottom', value => ( { path: 'padding.bottom', value } ) );
stylesProcessor.setNormalizer( 'padding-left', value => ( { path: 'padding.left', value } ) );

stylesProcessor.setReducer( 'padding', getTopRightBottomLeftValueReducer( 'padding' ) );
stylesProcessor.setReducer( 'padding', getBoxSidesValueReducer( 'padding' ) );

stylesProcessor.setStyleRelation( 'padding', [ 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' ] );
}
19 changes: 10 additions & 9 deletions src/view/styles/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export function isURL( string ) {
return urlRegExp.test( string );
}

export function getTopRightBottomLeftValues( value = '' ) {
export function getBoxSidesValues( value = '' ) {
if ( value === '' ) {
return { top: undefined, right: undefined, bottom: undefined, left: undefined };
}
Expand All @@ -110,12 +110,12 @@ export function getTopRightBottomLeftValues( value = '' ) {
* Default reducer for CSS properties that concerns edges of a box
* [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) notations:
*
* stylesProcessor.setReducer( 'padding', getTopRightBottomLeftValueReducer( 'padding' ) );
* stylesProcessor.setReducer( 'padding', getBoxSidesValueReducer( 'padding' ) );
*
* @param {String} styleShorthand
* @returns {Function}
*/
export function getTopRightBottomLeftValueReducer( styleShorthand ) {
export function getBoxSidesValueReducer( styleShorthand ) {
return value => {
const { top, right, bottom, left } = value;

Expand All @@ -138,23 +138,24 @@ export function getTopRightBottomLeftValueReducer( styleShorthand ) {
reduced.push( [ styleShorthand + '-left', left ] );
}
} else {
reduced.push( [ styleShorthand, getTopRightBottomLeftShorthandValue( value ) ] );
reduced.push( [ styleShorthand, getBoxSidesShorthandValue( value ) ] );
}

return reduced;
};
}

/**
* Returns a proper 1-to-4 value of a CSS [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) notation.
* Returns a [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) notation
* of a CSS property value.
*
* getTopRightBottomLeftShorthandValue( { top: '1px', right: '1px', bottom: '2px', left: '1px' } );
* getBoxSidesShorthandValue( { top: '1px', right: '1px', bottom: '2px', left: '1px' } );
* // will return '1px 1px 2px'
*
* @param {String} styleShorthand
* @param {module:engine/view/stylesmap~BoxSides} styleShorthand
* @returns {Function}
*/
export function getTopRightBottomLeftShorthandValue( { top, right, bottom, left } ) {
export function getBoxSidesShorthandValue( { top, right, bottom, left } ) {
const out = [];

if ( left !== right ) {
Expand Down Expand Up @@ -182,7 +183,7 @@ export function getPositionShorthandNormalizer( shorthand ) {
return value => {
return {
path: shorthand,
value: getTopRightBottomLeftValues( value )
value: getBoxSidesValues( value )
};
};
}
Expand Down
26 changes: 26 additions & 0 deletions src/view/stylesmap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -885,3 +885,29 @@ function appendStyleValue( stylesObject, nameOrPath, valueOrObject ) {
*
* @typedef {Array.<String, String>} module:engine/view/stylesmap~PropertyDescriptor
*/

/**
* An object describing values associated with the sides of a box, for instance margins, paddings,
* border widths, border colors, etc.
*
* const margin = {
* top: '1px',
* right: '3px',
* bottom: '3px',
* left: '7px'
* };
*
* const borderColor = {
* top: 'red',
* right: 'blue',
* bottom: 'blue',
* left: 'red'
* };
*
* @typedef {Object} module:engine/view/stylesmap~BoxSides
*
* @property {String} top Top side value.
* @property {String} right Right side value.
* @property {String} bottom Bottom side value.
* @property {String} left Left side value.
*/
28 changes: 14 additions & 14 deletions tests/view/styles/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@

import {
getShorthandValues,
getTopRightBottomLeftShorthandValue,
getTopRightBottomLeftValues,
getBoxSidesShorthandValue,
getBoxSidesValues,
isColor,
isLength,
isLineStyle
Expand Down Expand Up @@ -69,29 +69,29 @@ describe( 'Styles utils', () => {
} );
} );

describe( 'getTopRightBottomLeftShorthandValue()', () => {
describe( 'getBoxSidesShorthandValue()', () => {
it( 'should output one value for same values', () => {
expect( getTopRightBottomLeftShorthandValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'foo' } ) ).to.equal( 'foo' );
expect( getBoxSidesShorthandValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'foo' } ) ).to.equal( 'foo' );
} );

it( 'should output two value for top == bottom and right == left', () => {
expect( getTopRightBottomLeftShorthandValue( { top: 'foo', right: 'bar', bottom: 'foo', left: 'bar' } ) ).to.equal( 'foo bar' );
expect( getBoxSidesShorthandValue( { top: 'foo', right: 'bar', bottom: 'foo', left: 'bar' } ) ).to.equal( 'foo bar' );
} );

it( 'should output three values if bottom is different then top', () => {
expect( getTopRightBottomLeftShorthandValue( { top: 'foo', right: 'foo', bottom: 'bar', left: 'foo' } ) )
expect( getBoxSidesShorthandValue( { top: 'foo', right: 'foo', bottom: 'bar', left: 'foo' } ) )
.to.equal( 'foo foo bar' );
} );

it( 'should output four values if left is different then right', () => {
expect( getTopRightBottomLeftShorthandValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'bar' } ) )
expect( getBoxSidesShorthandValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'bar' } ) )
.to.equal( 'foo foo foo bar' );
} );
} );

describe( 'getTopRightBottomLeftValues()', () => {
describe( 'getBoxSidesValues()', () => {
it( 'should parse empty string', () => {
expect( getTopRightBottomLeftValues( '' ) ).to.deep.equal( {
expect( getBoxSidesValues( '' ) ).to.deep.equal( {
top: undefined,
right: undefined,
bottom: undefined,
Expand All @@ -100,7 +100,7 @@ describe( 'Styles utils', () => {
} );

it( 'should parse one value', () => {
expect( getTopRightBottomLeftValues( 'foo' ) ).to.deep.equal( {
expect( getBoxSidesValues( 'foo' ) ).to.deep.equal( {
top: 'foo',
right: 'foo',
bottom: 'foo',
Expand All @@ -109,7 +109,7 @@ describe( 'Styles utils', () => {
} );

it( 'should parse one value', () => {
expect( getTopRightBottomLeftValues( 'foo' ) ).to.deep.equal( {
expect( getBoxSidesValues( 'foo' ) ).to.deep.equal( {
top: 'foo',
right: 'foo',
bottom: 'foo',
Expand All @@ -118,7 +118,7 @@ describe( 'Styles utils', () => {
} );

it( 'should parse two value', () => {
expect( getTopRightBottomLeftValues( 'foo bar' ) ).to.deep.equal( {
expect( getBoxSidesValues( 'foo bar' ) ).to.deep.equal( {
top: 'foo',
right: 'bar',
bottom: 'foo',
Expand All @@ -127,7 +127,7 @@ describe( 'Styles utils', () => {
} );

it( 'should parse three values', () => {
expect( getTopRightBottomLeftValues( 'foo foo bar' ) ).to.deep.equal( {
expect( getBoxSidesValues( 'foo foo bar' ) ).to.deep.equal( {
top: 'foo',
right: 'foo',
bottom: 'bar',
Expand All @@ -136,7 +136,7 @@ describe( 'Styles utils', () => {
} );

it( 'should output four values if left is different then right', () => {
expect( getTopRightBottomLeftValues( 'foo foo foo bar' ) ).to.deep.equal( {
expect( getBoxSidesValues( 'foo foo foo bar' ) ).to.deep.equal( {
top: 'foo',
right: 'foo',
bottom: 'foo',
Expand Down
4 changes: 2 additions & 2 deletions tests/view/stylesmap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
import StylesMap, { StylesProcessor } from '../../src/view/stylesmap';
import encodedImage from './_utils/encodedimage.txt';
import { addPaddingRules } from '../../src/view/styles/padding';
import { getTopRightBottomLeftValueReducer } from '../../src/view/styles/utils';
import { getBoxSidesValueReducer } from '../../src/view/styles/utils';

describe( 'StylesMap', () => {
let stylesMap, stylesProcessor;
Expand All @@ -23,7 +23,7 @@ describe( 'StylesMap', () => {
path: 'foo.top',
value
} ) );
stylesProcessor.setReducer( 'foo', getTopRightBottomLeftValueReducer( 'foo' ) );
stylesProcessor.setReducer( 'foo', getBoxSidesValueReducer( 'foo' ) );

addPaddingRules( stylesProcessor );
StylesMap._setProcessor( stylesProcessor );
Expand Down

0 comments on commit 48bea53

Please sign in to comment.