Browse Source

Introduce one-time callbacks registering for styles converter.

Maciej Gołaszewski 6 years ago
parent
commit
ddd9e80dfe

+ 12 - 0
packages/ckeditor5-engine/src/view/styles.js

@@ -248,6 +248,10 @@ export default class Styles {
 }
 
 export class StylesProcessor {
+	constructor() {
+		this._groups = new Set();
+	}
+
 	/**
 	 * Returns reduced form of style property form normalized object.
 	 *
@@ -317,6 +321,14 @@ export class StylesProcessor {
 
 		appendStyleValue( styles, data.path, data.value );
 	}
+
+	registerListeners( groupName, callback ) {
+		if ( this._groups.has( groupName ) ) {
+			return;
+		}
+
+		callback( this );
+	}
 }
 
 mix( StylesProcessor, EmitterMixin );

+ 8 - 6
packages/ckeditor5-engine/src/view/styles/backgroundstyles.js

@@ -10,14 +10,16 @@ import { isAttachment, isColor, isPosition, isRepeat, isURL } from './utils';
  */
 
 export function addBackgroundStylesProcessor( stylesProcessor ) {
-	stylesProcessor.on( 'normalize:background', normalizeBackground );
-	stylesProcessor.on( 'normalize:background-color', ( evt, data ) => ( data.path = 'background.color' ) );
-	stylesProcessor.on( 'reduce:background', ( evt, data ) => {
-		const ret = [];
+	stylesProcessor.registerListeners( 'background', stylesProcessor => {
+		stylesProcessor.on( 'normalize:background', normalizeBackground );
+		stylesProcessor.on( 'normalize:background-color', ( evt, data ) => ( data.path = 'background.color' ) );
+		stylesProcessor.on( 'reduce:background', ( evt, data ) => {
+			const ret = [];
 
-		ret.push( [ 'background-color', data.value.color ] );
+			ret.push( [ 'background-color', data.value.color ] );
 
-		data.reduced = ret;
+			data.reduced = ret;
+		} );
 	} );
 }
 

+ 60 - 58
packages/ckeditor5-engine/src/view/styles/borderstyles.js

@@ -10,64 +10,66 @@ import { getShorthandValues, getTopRightBottomLeftValueReducer, getTopRightBotto
  */
 
 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 );
+	stylesProcessor.registerListeners( 'border', 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 ) {

+ 8 - 7
packages/ckeditor5-engine/src/view/styles/marginstyles.js

@@ -10,13 +10,14 @@ import { getPositionShorthandNormalizer, getTopRightBottomLeftValueReducer } fro
  */
 
 export function addMarginStylesProcessor( stylesProcessor ) {
-	stylesProcessor.on( 'normalize:margin', getPositionShorthandNormalizer( 'margin' ) );
+	stylesProcessor.registerListeners( 'margin', stylesProcessor => {
+		stylesProcessor.on( 'normalize:margin', getPositionShorthandNormalizer( 'margin' ) );
 
-	stylesProcessor.on( 'normalize:margin-top', ( evt, data ) => ( data.path = 'margin.top' ) );
-	stylesProcessor.on( 'normalize:margin-right', ( evt, data ) => ( data.path = 'margin.right' ) );
-	stylesProcessor.on( 'normalize:margin-bottom', ( evt, data ) => ( data.path = 'margin.bottom' ) );
-	stylesProcessor.on( 'normalize:margin-left', ( evt, data ) => ( data.path = 'margin.left' ) );
+		stylesProcessor.on( 'normalize:margin-top', ( evt, data ) => ( data.path = 'margin.top' ) );
+		stylesProcessor.on( 'normalize:margin-right', ( evt, data ) => ( data.path = 'margin.right' ) );
+		stylesProcessor.on( 'normalize:margin-bottom', ( evt, data ) => ( data.path = 'margin.bottom' ) );
+		stylesProcessor.on( 'normalize:margin-left', ( evt, data ) => ( data.path = 'margin.left' ) );
 
-	stylesProcessor.on( 'reduce:margin', getTopRightBottomLeftValueReducer( 'margin' ) );
+		stylesProcessor.on( 'reduce:margin', getTopRightBottomLeftValueReducer( 'margin' ) );
+	} );
 }
-

+ 8 - 6
packages/ckeditor5-engine/src/view/styles/paddingstyles.js

@@ -10,11 +10,13 @@ import { getPositionShorthandNormalizer, getTopRightBottomLeftValueReducer } fro
  */
 
 export function addPaddingStylesProcessor( stylesProcessor ) {
-	stylesProcessor.on( 'normalize:padding', getPositionShorthandNormalizer( 'padding' ) );
-	stylesProcessor.on( 'normalize:padding-top', ( evt, data ) => ( data.path = 'padding.top' ) );
-	stylesProcessor.on( 'normalize:padding-right', ( evt, data ) => ( data.path = 'padding.right' ) );
-	stylesProcessor.on( 'normalize:padding-bottom', ( evt, data ) => ( data.path = 'padding.bottom' ) );
-	stylesProcessor.on( 'normalize:padding-left', ( evt, data ) => ( data.path = 'padding.left' ) );
+	stylesProcessor.registerListeners( 'padding', stylesProcessor => {
+		stylesProcessor.on( 'normalize:padding', getPositionShorthandNormalizer( 'padding' ) );
+		stylesProcessor.on( 'normalize:padding-top', ( evt, data ) => ( data.path = 'padding.top' ) );
+		stylesProcessor.on( 'normalize:padding-right', ( evt, data ) => ( data.path = 'padding.right' ) );
+		stylesProcessor.on( 'normalize:padding-bottom', ( evt, data ) => ( data.path = 'padding.bottom' ) );
+		stylesProcessor.on( 'normalize:padding-left', ( evt, data ) => ( data.path = 'padding.left' ) );
 
-	stylesProcessor.on( 'reduce:padding', getTopRightBottomLeftValueReducer( 'padding' ) );
+		stylesProcessor.on( 'reduce:padding', getTopRightBottomLeftValueReducer( 'padding' ) );
+	} );
 }

+ 3 - 3
packages/ckeditor5-engine/tests/view/styles/backgroundstyles.js

@@ -10,9 +10,9 @@ describe( 'Background styles normalization', () => {
 	let styles;
 
 	beforeEach( () => {
-		const converter = new StylesProcessor();
-		addBackgroundStylesProcessor( converter );
-		styles = new Styles( converter );
+		const stylesProcessor = new StylesProcessor();
+		addBackgroundStylesProcessor( stylesProcessor );
+		styles = new Styles( stylesProcessor );
 	} );
 
 	it( 'should normalize background', () => {