Procházet zdrojové kódy

Refactor styles outputting.

Maciej Gołaszewski před 6 roky
rodič
revize
2a74ff9f0b

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

@@ -144,7 +144,10 @@ export default class Styles {
 			parsed.push( ...newNewGetStyleFromNormalized( key, normalized ) );
 		}
 
-		return parsed.map( arr => arr.join( ':' ) ).join( ';' ) + ';';
+		return parsed
+			.filter( v => Array.isArray( v ) )// TODO: not needed?
+			.map( arr => arr.join( ':' ) )
+			.join( ';' ) + ';';
 	}
 
 	getInlineProperty( propertyName ) {
@@ -358,19 +361,20 @@ function shBorderProperty( which ) {
 	};
 }
 
-function getABCDEDGHIJK( { left, right, top, bottom } ) {
+function getTopRightBottomLeftShorthand( { left, right, top, bottom } ) {
 	const out = [];
 
 	if ( left !== right ) {
 		out.push( top, right, bottom, left );
 	} else if ( bottom !== top ) {
 		out.push( top, right, bottom );
-	} else if ( right != top ) {
+	} else if ( right !== top ) {
 		out.push( top, right );
 	} else {
 		out.push( top );
 	}
-	return out;
+
+	return out.join( ' ' );
 }
 
 function outputShorthandableValue( styleObject = {}, strict, styleShorthand ) {
@@ -382,15 +386,11 @@ function outputShorthandableValue( styleObject = {}, strict, styleShorthand ) {
 			return [];
 		}
 
-		return [
-			[ styleShorthand, top ]
-		];
+		return [ [ styleShorthand, top ] ];
 	} else if ( ![ top, right, left, bottom ].every( value => !!value ) ) {
-		return printSingleValues( { top, right, bottom, left }, 'margin' );
+		return printSingleValues( { top, right, bottom, left }, styleShorthand );
 	} else {
-		const out = getABCDEDGHIJK( styleObject );
-
-		return `${ strict ? '' : styleShorthand + ':' }${ out.join( ' ' ) }`;
+		return [ [ styleShorthand, getTopRightBottomLeftShorthand( styleObject ) ] ];
 	}
 }
 
@@ -410,6 +410,18 @@ function newNewGetStyleFromNormalized( styleName, styleObjectOrString ) {
 		return ret;
 	} );
 
+	styleGetters.set( 'margin', value => {
+		return outputShorthandableValue( value, false, 'margin' );
+	} );
+
+	styleGetters.set( 'background', value => {
+		const ret = [];
+
+		ret.push( [ 'background-color', value.color ] );
+
+		return ret;
+	} );
+
 	let stylesArray;
 
 	if ( styleGetters.has( styleName ) ) {
@@ -417,7 +429,7 @@ function newNewGetStyleFromNormalized( styleName, styleObjectOrString ) {
 
 		stylesArray = styleGetter( styleObjectOrString );
 	} else {
-		// console.warn( 'no default' );
+		stylesArray = [ [ styleName, styleObjectOrString ] ];
 	}
 
 	return stylesArray || [];

+ 14 - 14
packages/ckeditor5-engine/tests/view/styles.js

@@ -21,7 +21,7 @@ describe( 'Styles', () => {
 		it( 'should output full names for known style names', () => {
 			styles.setStyle( 'margin: 1px;margin-left: 2em;' );
 
-			expect( styles.getStyleNames() ).to.deep.equal( [ 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' ] );
+			expect( styles.getStyleNames() ).to.deep.equal( [ 'margin' ] );
 		} );
 	} );
 
@@ -56,7 +56,7 @@ describe( 'Styles', () => {
 				expect( styles.getInlineProperty( 'border-width' ) ).to.equal( '1px' );
 			} );
 
-			it.only( 'should output inline shorthand rules #2', () => {
+			it( 'should output inline shorthand rules #2', () => {
 				styles.setStyle( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' );
 
 				expect( styles.getInlineStyle() ).to.equal(
@@ -317,8 +317,8 @@ describe( 'Styles', () => {
 			it( 'should output inline style (1 value defined)', () => {
 				styles.setStyle( 'margin:1px;' );
 
-				expect( styles.getInlineStyle() ).to.equal( 'margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px;' );
-				// expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px' );
+				expect( styles.getInlineStyle() ).to.equal( 'margin:1px;' );
+				expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px' );
 				expect( styles.getInlineProperty( 'margin-top' ) ).to.equal( '1px' );
 				expect( styles.getInlineProperty( 'margin-right' ) ).to.equal( '1px' );
 				expect( styles.getInlineProperty( 'margin-bottom' ) ).to.equal( '1px' );
@@ -328,8 +328,8 @@ describe( 'Styles', () => {
 			it( 'should output inline style (2 values defined)', () => {
 				styles.setStyle( 'margin:1px .34cm;' );
 
-				expect( styles.getInlineStyle() ).to.equal( 'margin-top:1px;margin-right:.34cm;margin-bottom:1px;margin-left:.34cm;' );
-				// expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px .34cm' );
+				expect( styles.getInlineStyle() ).to.equal( 'margin:1px .34cm;' );
+				expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px .34cm' );
 				expect( styles.getInlineProperty( 'margin-top' ) ).to.equal( '1px' );
 				expect( styles.getInlineProperty( 'margin-right' ) ).to.equal( '.34cm' );
 				expect( styles.getInlineProperty( 'margin-bottom' ) ).to.equal( '1px' );
@@ -339,8 +339,8 @@ describe( 'Styles', () => {
 			it( 'should output inline style (3 values defined)', () => {
 				styles.setStyle( 'margin:1px .34cm 90.1rem;' );
 
-				expect( styles.getInlineStyle() ).to.equal( 'margin-top:1px;margin-right:.34cm;margin-bottom:90.1rem;margin-left:.34cm;' );
-				// expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px .34cm 90.1rem' );
+				expect( styles.getInlineStyle() ).to.equal( 'margin:1px .34cm 90.1rem;' );
+				expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px .34cm 90.1rem' );
 				expect( styles.getInlineProperty( 'margin-top' ) ).to.equal( '1px' );
 				expect( styles.getInlineProperty( 'margin-right' ) ).to.equal( '.34cm' );
 				expect( styles.getInlineProperty( 'margin-bottom' ) ).to.equal( '90.1rem' );
@@ -350,8 +350,8 @@ describe( 'Styles', () => {
 			it( 'should output inline style (3 values defined, only last different)', () => {
 				styles.setStyle( 'margin:1px 1px 90.1rem;' );
 
-				expect( styles.getInlineStyle() ).to.equal( 'margin-top:1px;margin-right:1px;margin-bottom:90.1rem;margin-left:1px;' );
-				// expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px 1px 90.1rem' );
+				expect( styles.getInlineStyle() ).to.equal( 'margin:1px 1px 90.1rem;' );
+				expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px 1px 90.1rem' );
 				expect( styles.getInlineProperty( 'margin-top' ) ).to.equal( '1px' );
 				expect( styles.getInlineProperty( 'margin-right' ) ).to.equal( '1px' );
 				expect( styles.getInlineProperty( 'margin-bottom' ) ).to.equal( '90.1rem' );
@@ -361,8 +361,8 @@ describe( 'Styles', () => {
 			it( 'should output inline style (4 values defined)', () => {
 				styles.setStyle( 'margin:1px .34cm 90.1rem thick;' );
 
-				expect( styles.getInlineStyle() ).to.equal( 'margin-top:1px;margin-right:.34cm;margin-bottom:90.1rem;margin-left:thick;' );
-				// expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px .34cm 90.1rem thick' );
+				expect( styles.getInlineStyle() ).to.equal( 'margin:1px .34cm 90.1rem thick;' );
+				expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px .34cm 90.1rem thick' );
 				expect( styles.getInlineProperty( 'margin-top' ) ).to.equal( '1px' );
 				expect( styles.getInlineProperty( 'margin-right' ) ).to.equal( '.34cm' );
 				expect( styles.getInlineProperty( 'margin-bottom' ) ).to.equal( '90.1rem' );
@@ -372,8 +372,8 @@ describe( 'Styles', () => {
 			it( 'should output inline style (4 values defined, only last different)', () => {
 				styles.setStyle( 'margin:1px 1px 1px thick;' );
 
-				expect( styles.getInlineStyle() ).to.equal( 'margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:thick;' );
-				// expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px 1px 1px thick' );
+				expect( styles.getInlineStyle() ).to.equal( 'margin:1px 1px 1px thick;' );
+				expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px 1px 1px thick' );
 				expect( styles.getInlineProperty( 'margin-top' ) ).to.equal( '1px' );
 				expect( styles.getInlineProperty( 'margin-right' ) ).to.equal( '1px' );
 				expect( styles.getInlineProperty( 'margin-bottom' ) ).to.equal( '1px' );