Преглед на файлове

Added possibility to bing whole style attribute.

Oskar Wrobel преди 9 години
родител
ревизия
0c259003a9
променени са 2 файла, в които са добавени 32 реда и са изтрити 23 реда
  1. 18 13
      packages/ckeditor5-ui/src/template.js
  2. 14 10
      packages/ckeditor5-ui/tests/template.js

+ 18 - 13
packages/ckeditor5-ui/src/template.js

@@ -405,12 +405,20 @@ export default class Template {
 			attrValue = attributes[ attrName ];
 			attrNs = attrValue[ 0 ].ns || null;
 
-			// Attribute style has specific format so needs to be parsed in a specific way:
-			// 		input: { style: { property: value, otherProperty: Template.bind.to( ... ) } }
-			// 		output: style="property:value;other-property:otherValue"
+			// Attribute style might have specific format so needs to be parsed in a specific way.
+			// 		input: { style: { width: '100px', height: '200px' } }
+			// 		output: style="width:100px;height:200px"
 			if ( attrName == 'style' ) {
-				this._renderAttributeStyle( attrValue[ 0 ].value || attrValue[ 0 ], attrNs, el );
-				continue;
+				const styleValue = attrValue[ 0 ].value || attrValue[ 0 ];
+
+				// If whole attribute is binded we don't parse it.
+				// It means that style will be render the same way as the rest of attributes:
+				// 		input: { style: 'width:100px;height:200px' }
+				// 		output: style="width:100px;height:200px"
+				if ( !styleValue.observable ) {
+					this._renderAttributeStyle( styleValue, el );
+					continue;
+				}
 			}
 
 			// Activate binding if one is found. Cases:
@@ -459,19 +467,16 @@ export default class Template {
 	 * 		style="property:value;other-property:otherValue"
 	 *
 	 * Note: Multiple-word properties are always defined in camelCase format, and then are parsed to dash format.
+	 * Note: Attribute `style` is rendered without setting namespace because setting custom namespace seems to be not
+	 * necessary in this case.
 	 *
 	 * @private
 	 * @param {ui.TemplateDefinition.attributes.styles} styles Styles definition. Multiple-word properties needs to be
 	 * defined in camelCase format.
-	 * @param {String} attrNs Attribute namespace.
 	 * @param {HTMLElement} el Element which is rendered.
 	 */
-	_renderAttributeStyle( styles, attrNs, el ) {
-		// Normalization in case of style attribute is created with additional data as custom namespace.
-		styles = styles[ 0 ] || styles;
-
+	_renderAttributeStyle( styles, el ) {
 		// Iterate through every single style.
-		// Attach listener to style property if is observable and get initial value for each style.
 		const initialStyles = Object.keys( styles ).map( ( style ) => {
 			// If style value is not observable.
 			if ( !styles[ style ].observable ) {
@@ -482,7 +487,7 @@ export default class Template {
 			}
 
 			// If style value is observable.
-			let { emitter, observable, attribute } = styles[ style ];
+			const { emitter, observable, attribute } = styles[ style ];
 
 			// Add listener.
 			emitter.listenTo( observable, `change:${ attribute }`, ( eventInfo, property, value ) => {
@@ -496,7 +501,7 @@ export default class Template {
 			return `${ camelCaseToDash( style ) }:${ styles[ style ].observable[ attribute ] }`;
 		} );
 
-		el.setAttributeNS( attrNs, 'style', initialStyles.join( ';' ) );
+		el.style.cssText = `${ initialStyles.join( ';' ) }`;
 	}
 
 	/**

+ 14 - 10
packages/ckeditor5-ui/tests/template.js

@@ -223,7 +223,6 @@ describe( 'Template', () => {
 				}
 			} ).render();
 
-			expect( el.outerHTML ).to.be.equal( '<p style="width:100px;height:200px;background-color:yellow"></p>' );
 			expect( el.style.width ).to.be.equal( '100px' );
 			expect( el.style.height ).to.be.equal( '200px' );
 			expect( el.style.backgroundColor ).to.be.equal( 'yellow' );
@@ -236,21 +235,26 @@ describe( 'Template', () => {
 			expect( el.style.backgroundColor ).to.be.equal( 'green' );
 		} );
 
-		it( 'renders HTMLElement attribute style in a custom namespace', () => {
+		it( 'renders HTMLElement attribute style fully binded', () => {
+			const observable = new Model( {
+				style: 'width: 100px'
+			} );
+
+			const emitter = Object.create( EmitterMixin );
+			const bind = Template.bind( observable, emitter );
 			const el = new Template( {
 				tag: 'p',
 				attributes: {
-					style: {
-						ns: 'abc',
-						value: {
-							width: '100px'
-						}
-					}
+					style: bind.to( 'style' )
 				}
 			} ).render();
 
-			expect( el.outerHTML ).to.be.equal( '<p style="width:100px"></p>' );
-			expect( el.attributes.getNamedItem( 'style' ).namespaceURI ).to.equal( 'abc' );
+			expect( el.style.width ).to.be.equal( '100px' );
+
+			observable.style = 'width:20px;height:50px';
+
+			expect( el.style.width ).to.be.equal( '20px' );
+			expect( el.style.height ).to.be.equal( '50px' );
 		} );
 
 		it( 'creates HTMLElement children', () => {