8
0
Просмотр исходного кода

Added styles method to core.treeView.Element.

Szymon Kupś 9 лет назад
Родитель
Сommit
4e87a083a8

+ 54 - 1
packages/ckeditor5-engine/src/treeview/element.js

@@ -89,7 +89,6 @@ export default class Element extends Node {
 		this._styles = new Map();
 
 		if ( this._attrs.has( 'style' ) ) {
-			// TODO: Maybe parsing style string should be moved to utils?
 			const styleString = this._attrs.get( 'style' );
 			const regex = /\s*([^:;\s]+)\s*:\s*([^;]+)\s*(?=;|$)/g;
 			let matchStyle;
@@ -391,4 +390,58 @@ export default class Element extends Node {
 
 		return true;
 	}
+
+	/**
+	 * Adds style to the element.
+	 *
+	 * @param {String} property
+	 * @param {String} value
+	 */
+	setStyle( property, value ) {
+		this._styles.set( property, value );
+	}
+
+	/**
+	 * Returns style value for given property.
+	 * Undefined is returned if style does not exist.
+	 *
+	 * @param {String} property
+	 * @returns {String|undefined}
+	 */
+	getStyle( property ) {
+		return this._styles.get( property );
+	}
+
+	/**
+	 * Returns true if style property is present.
+	 * If more then one style property is provided - returns true only when all properties are present.
+	 *
+	 * @example
+	 * element.hasStyle( 'color' ); // Returns true if 'border-top' style is present.
+	 * element.hasStyle( 'color', 'border-top' ); // Returns true if 'color' and 'border-top' styles are both present.
+	 *
+	 * @param {...String} property
+	 */
+	hasStyle( ...property ) {
+		for ( let name of property ) {
+			if ( !this._styles.has( name ) ) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	/**
+	 * Removes specified style.
+	 *
+	 * @example
+	 * element.removeStyle( 'color' );  // Removes 'color' style.
+	 * element.removeStyle( 'color', 'border-top' ); // Removes both 'color' and 'border-top' styles.
+	 *
+	 * @param {...String} property
+	 */
+	removeStyle( ...property ) {
+		property.forEach( name => this._styles.delete( name ) );
+	}
 }

+ 64 - 0
packages/ckeditor5-engine/tests/treeview/element.js

@@ -481,4 +481,68 @@ describe( 'Element', () => {
 			expect( el.hasClass( 'three', 'one', 'two', 'zero' ) ).to.be.false;
 		} );
 	} );
+
+	describe( 'setStyle', () => {
+		it( 'should set element style', () => {
+			const el = new ViewElement( 'p' );
+			el.setStyle( 'color', 'red' );
+
+			expect( el._styles.has( 'color' ) ).to.be.true;
+			expect( el._styles.get( 'color' ) ).to.equal( 'red' );
+		} );
+	} );
+
+	describe( 'getStyle', () => {
+		it( 'should get style', () => {
+			const el = new ViewElement( 'p' );
+			el.setStyle( 'color', 'red' );
+			el.setStyle( 'border', '1px solid red' );
+
+			expect( el.getStyle( 'color' ) ).to.equal( 'red' );
+			expect( el.getStyle( 'border' ) ).to.equal( '1px solid red' );
+		} );
+	} );
+
+	describe( 'hasStyle', () => {
+		it( 'should check if element has a style', () => {
+			const el = new ViewElement( 'p' );
+			el.setStyle( 'padding-top', '10px' );
+
+			expect( el.hasStyle( 'padding-top' ) ).to.be.true;
+			expect( el.hasStyle( 'padding-left' ) ).to.be.false;
+		} );
+
+		it( 'should check if element has multiple styles', () => {
+			const el = new ViewElement( 'p' );
+			el.setStyle( 'padding-top', '10px' );
+			el.setStyle( 'margin-left', '10px' );
+			el.setStyle( 'color', '10px;' );
+
+			expect( el.hasStyle( 'padding-top', 'margin-left' ) ).to.be.true;
+			expect( el.hasStyle( 'padding-top', 'margin-left', 'color' ) ).to.be.true;
+			expect( el.hasStyle( 'padding-top', 'padding-left' ) ).to.be.false;
+		} );
+	} );
+
+	describe( 'removeStyle', () => {
+		it( 'should remove style', () => {
+			const el = new ViewElement();
+			el.setStyle( 'padding-top', '10px' );
+			el.removeStyle( 'padding-top' );
+
+			expect( el.hasStyle( 'padding-top' ) ).to.be.false;
+		} );
+
+		it( 'should remove multiple styles', () => {
+			const el = new ViewElement();
+			el.setStyle( 'padding-top', '10px' );
+			el.setStyle( 'margin-top', '10px' );
+			el.setStyle( 'color', 'red' );
+			el.removeStyle( 'padding-top', 'margin-top' );
+
+			expect( el.hasStyle( 'padding-top' ) ).to.be.false;
+			expect( el.hasStyle( 'margin-top' ) ).to.be.false;
+			expect( el.hasStyle( 'color' ) ).to.be.true;
+		} );
+	} );
 } );