| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210 |
- /**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
- import { getShorthandValues, getTopRightBottomLeftValueReducer, getTopRightBottomLeftValues, isLength, isLineStyle } from './utils';
- /**
- * @module engine/view/styles/borderstyle
- */
- export function addBorderStylesProcessor( stylesProcessor ) {
- stylesProcessor.on( 'normalize:border', borderNormalizer );
- // Border-position shorthands.
- stylesProcessor.on( 'normalize:border-top', getBorderPositionNormalizer( 'top' ) );
- stylesProcessor.on( 'normalize:border-right', getBorderPositionNormalizer( 'right' ) );
- stylesProcessor.on( 'normalize:border-bottom', getBorderPositionNormalizer( 'bottom' ) );
- stylesProcessor.on( 'normalize:border-left', getBorderPositionNormalizer( 'left' ) );
- // Border-property shorthands.
- stylesProcessor.on( 'normalize:border-color', getBorderPropertyNormalizer( 'color' ) );
- stylesProcessor.on( 'normalize:border-width', getBorderPropertyNormalizer( 'width' ) );
- stylesProcessor.on( 'normalize:border-style', getBorderPropertyNormalizer( 'style' ) );
- // Border longhands.
- stylesProcessor.on( 'normalize:border-top-color', getBorderPropertyPositionNormalizer( 'color', 'top' ) );
- stylesProcessor.on( 'normalize:border-top-style', getBorderPropertyPositionNormalizer( 'style', 'top' ) );
- stylesProcessor.on( 'normalize:border-top-width', getBorderPropertyPositionNormalizer( 'width', 'top' ) );
- stylesProcessor.on( 'normalize:border-right-color', getBorderPropertyPositionNormalizer( 'color', 'right' ) );
- stylesProcessor.on( 'normalize:border-right-style', getBorderPropertyPositionNormalizer( 'style', 'right' ) );
- stylesProcessor.on( 'normalize:border-right-width', getBorderPropertyPositionNormalizer( 'width', 'right' ) );
- stylesProcessor.on( 'normalize:border-bottom-color', getBorderPropertyPositionNormalizer( 'color', 'bottom' ) );
- stylesProcessor.on( 'normalize:border-bottom-style', getBorderPropertyPositionNormalizer( 'style', 'bottom' ) );
- stylesProcessor.on( 'normalize:border-bottom-width', getBorderPropertyPositionNormalizer( 'width', 'bottom' ) );
- stylesProcessor.on( 'normalize:border-left-color', getBorderPropertyPositionNormalizer( 'color', 'left' ) );
- stylesProcessor.on( 'normalize:border-left-style', getBorderPropertyPositionNormalizer( 'style', 'left' ) );
- stylesProcessor.on( 'normalize:border-left-width', getBorderPropertyPositionNormalizer( 'width', 'left' ) );
- stylesProcessor.on( 'extract:border-top', getBorderPositionExtractor( 'top' ) );
- stylesProcessor.on( 'extract:border-right', getBorderPositionExtractor( 'right' ) );
- stylesProcessor.on( 'extract:border-bottom', getBorderPositionExtractor( 'bottom' ) );
- stylesProcessor.on( 'extract:border-left', getBorderPositionExtractor( 'left' ) );
- stylesProcessor.on( 'extract:border-top-color', ( evt, data ) => ( data.path = 'border.color.top' ) );
- stylesProcessor.on( 'extract:border-right-color', ( evt, data ) => ( data.path = 'border.color.right' ) );
- stylesProcessor.on( 'extract:border-bottom-color', ( evt, data ) => ( data.path = 'border.color.bottom' ) );
- stylesProcessor.on( 'extract:border-left-color', ( evt, data ) => ( data.path = 'border.color.left' ) );
- stylesProcessor.on( 'extract:border-top-width', ( evt, data ) => ( data.path = 'border.width.top' ) );
- stylesProcessor.on( 'extract:border-right-width', ( evt, data ) => ( data.path = 'border.width.right' ) );
- stylesProcessor.on( 'extract:border-bottom-width', ( evt, data ) => ( data.path = 'border.width.bottom' ) );
- stylesProcessor.on( 'extract:border-left-width', ( evt, data ) => ( data.path = 'border.width.left' ) );
- stylesProcessor.on( 'extract:border-top-style', ( evt, data ) => ( data.path = 'border.style.top' ) );
- stylesProcessor.on( 'extract:border-right-style', ( evt, data ) => ( data.path = 'border.style.right' ) );
- stylesProcessor.on( 'extract:border-bottom-style', ( evt, data ) => ( data.path = 'border.style.bottom' ) );
- stylesProcessor.on( 'extract:border-left-style', ( evt, data ) => ( data.path = 'border.style.left' ) );
- stylesProcessor.on( 'reduce:border-color', getTopRightBottomLeftValueReducer( 'border-color' ) );
- stylesProcessor.on( 'reduce:border-style', getTopRightBottomLeftValueReducer( 'border-style' ) );
- stylesProcessor.on( 'reduce:border-width', getTopRightBottomLeftValueReducer( 'border-width' ) );
- stylesProcessor.on( 'reduce:border-top', getBorderPositionReducer( 'top' ) );
- stylesProcessor.on( 'reduce:border-right', getBorderPositionReducer( 'right' ) );
- stylesProcessor.on( 'reduce:border-bottom', getBorderPositionReducer( 'bottom' ) );
- stylesProcessor.on( 'reduce:border-left', getBorderPositionReducer( 'left' ) );
- stylesProcessor.on( 'reduce:border', borderReducer );
- }
- function borderNormalizer( evt, data ) {
- const { color, style, width } = normalizeBorderShorthand( data.value );
- data.path = 'border';
- data.value = {
- color: getTopRightBottomLeftValues( color ),
- style: getTopRightBottomLeftValues( style ),
- width: getTopRightBottomLeftValues( width )
- };
- }
- function getBorderPositionNormalizer( side ) {
- return ( evt, data ) => {
- const { color, style, width } = normalizeBorderShorthand( data.value );
- const border = {};
- if ( color !== undefined ) {
- border.color = { [ side ]: color };
- }
- if ( style !== undefined ) {
- border.style = { [ side ]: style };
- }
- if ( width !== undefined ) {
- border.width = { [ side ]: width };
- }
- data.path = 'border';
- data.value = border;
- };
- }
- function getBorderPropertyNormalizer( propertyName ) {
- return ( evt, data ) => {
- data.path = 'border';
- data.value = toBorderPropertyShorthand( data.value, propertyName );
- };
- }
- function toBorderPropertyShorthand( value, property ) {
- return {
- [ property ]: getTopRightBottomLeftValues( value )
- };
- }
- function getBorderPropertyPositionNormalizer( property, side ) {
- return ( evt, data ) => {
- data.path = 'border';
- data.value = {
- [ property ]: {
- [ side ]: data.value
- }
- };
- };
- }
- function getBorderPositionExtractor( which ) {
- return ( evt, data ) => {
- if ( data.styles.border ) {
- data.value = extractBorderPosition( data.styles.border, which, data );
- }
- };
- }
- function extractBorderPosition( border, which ) {
- const value = {};
- if ( border.width && border.width[ which ] ) {
- value.width = border.width[ which ];
- }
- if ( border.style && border.style[ which ] ) {
- value.style = border.style[ which ];
- }
- if ( border.color && border.color[ which ] ) {
- value.color = border.color[ which ];
- }
- return value;
- }
- function normalizeBorderShorthand( string ) {
- const result = {};
- const parts = getShorthandValues( string );
- for ( const part of parts ) {
- if ( isLength( part ) || /thin|medium|thick/.test( part ) ) {
- result.width = part;
- } else if ( isLineStyle( part ) ) {
- result.style = part;
- } else {
- result.color = part;
- }
- }
- return result;
- }
- function borderReducer( evt, data ) {
- const ret = [];
- ret.push( ...reduceBorderPosition( extractBorderPosition( data.value, 'top' ), 'top' ) );
- ret.push( ...reduceBorderPosition( extractBorderPosition( data.value, 'right' ), 'right' ) );
- ret.push( ...reduceBorderPosition( extractBorderPosition( data.value, 'bottom' ), 'bottom' ) );
- ret.push( ...reduceBorderPosition( extractBorderPosition( data.value, 'left' ), 'left' ) );
- data.reduced = ret;
- }
- function getBorderPositionReducer( which ) {
- return ( evt, data ) => ( data.reduced = reduceBorderPosition( data.value, which ) );
- }
- function reduceBorderPosition( value, which ) {
- const reduced = [];
- if ( value && value.width !== undefined ) {
- reduced.push( value.width );
- }
- if ( value && value.style !== undefined ) {
- reduced.push( value.style );
- }
- if ( value && value.color !== undefined ) {
- reduced.push( value.color );
- }
- if ( reduced.length ) {
- return [ [ `border-${ which }`, reduced.join( ' ' ) ] ];
- }
- return [];
- }
|