Sfoglia il codice sorgente

Aligned IconView to the View#render API. Enhanced icon content management.

Aleksander Nowodzinski 8 anni fa
parent
commit
80c5012737

+ 25 - 6
packages/ckeditor5-ui/src/icon/iconview.js

@@ -10,7 +10,6 @@
  */
 
 import View from '../view';
-import Template from '../template';
 
 /**
  * The icon view class.
@@ -32,7 +31,7 @@ export default class IconView extends View {
 		 * @observable
 		 * @member {String} #content
 		 */
-		this.set( 'content' );
+		this.set( 'content', '' );
 
 		/**
 		 * This attribute specifies the boundaries to which the
@@ -44,7 +43,7 @@ export default class IconView extends View {
 		 */
 		this.set( 'viewBox', '0 0 20 20' );
 
-		this.template = new Template( {
+		this.setTemplate( {
 			tag: 'svg',
 			ns: 'http://www.w3.org/2000/svg',
 			attributes: {
@@ -52,17 +51,37 @@ export default class IconView extends View {
 				viewBox: bind.to( 'viewBox' )
 			}
 		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		this._updateXMLContent();
 
 		// This is a hack for lack of innerHTML binding.
 		// See: https://github.com/ckeditor/ckeditor5-ui/issues/99.
-		this.on( 'change:content', ( evt, name, value ) => {
+		this.on( 'change:content', () => this._updateXMLContent() );
+	}
+
+	/**
+	 * Updates the {@link #element} with the value of {@link #content}.
+	 *
+	 * @private
+	 */
+	_updateXMLContent() {
+		if ( this.content ) {
 			const svg = new DOMParser()
-				.parseFromString( value.trim(), 'image/svg+xml' )
+				.parseFromString( this.content.trim(), 'image/svg+xml' )
 				.firstChild;
 
+			this.element.innerHTML = '';
+
 			while ( svg.childNodes.length > 0 ) {
 				this.element.appendChild( svg.childNodes[ 0 ] );
 			}
-		} );
+		}
 	}
 }

+ 15 - 2
packages/ckeditor5-ui/tests/icon/iconview.js

@@ -9,10 +9,19 @@ describe( 'IconView', () => {
 	let view;
 
 	beforeEach( () => {
-		return ( view = new IconView() ).init();
+		view = new IconView();
+		view.render();
 	} );
 
 	describe( 'constructor()', () => {
+		it( 'sets #content', () => {
+			expect( view.content ).to.equal( '' );
+		} );
+
+		it( 'sets #viewBox', () => {
+			expect( view.viewBox ).to.equal( '0 0 20 20' );
+		} );
+
 		it( 'creates element from template', () => {
 			expect( view.element.tagName ).to.equal( 'svg' );
 			expect( view.element.getAttribute( 'class' ) ).to.equal( 'ck-icon' );
@@ -33,9 +42,13 @@ describe( 'IconView', () => {
 
 		describe( 'inline svg', () => {
 			it( 'should react to changes in view#content', () => {
-				view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="test"></g></svg>';
+				expect( view.element.innerHTML = '' );
 
+				view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="test"></g></svg>';
 				expect( view.element.innerHTML = '<g id="test"></g>' );
+
+				view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>';
+				expect( view.element.innerHTML = '' );
 			} );
 		} );
 	} );