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

Fix: It should be possible to use "dirty" third-party SVGs as the content of the IconView. Closes #350.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
eb8e534931

+ 7 - 3
packages/ckeditor5-ui/src/icon/iconview.js

@@ -75,9 +75,13 @@ export default class IconView extends View {
 	 */
 	_updateXMLContent() {
 		if ( this.content ) {
-			const svg = new DOMParser()
-				.parseFromString( this.content.trim(), 'image/svg+xml' )
-				.firstChild;
+			const parsed = new DOMParser().parseFromString( this.content.trim(), 'image/svg+xml' );
+			const svg = parsed.querySelector( 'svg' );
+			const viewBox = svg.getAttribute( 'viewBox' );
+
+			if ( viewBox ) {
+				this.viewBox = viewBox;
+			}
 
 			this.element.innerHTML = '';
 

+ 6 - 6
packages/ckeditor5-ui/tests/button/buttonview.js

@@ -99,7 +99,7 @@ describe( 'ButtonView', () => {
 
 			it( 'it reacts to #tooltipPosition attribute', () => {
 				view.tooltip = 'foo';
-				view.icon = 'bar';
+				view.icon = '<svg></svg>';
 
 				expect( view.tooltipPosition ).to.equal( 's' );
 				expect( view.tooltipView.position ).to.equal( 's' );
@@ -240,22 +240,22 @@ describe( 'ButtonView', () => {
 
 		it( 'is set when view#icon is defined', () => {
 			view = new ButtonView( locale );
-			view.icon = 'foo';
+			view.icon = '<svg></svg>';
 			view.render();
 
 			expect( view.element.childNodes ).to.have.length( 3 );
 			expect( view.element.childNodes[ 0 ] ).to.equal( view.iconView.element );
 
 			expect( view.iconView ).to.instanceOf( IconView );
-			expect( view.iconView.content ).to.equal( 'foo' );
+			expect( view.iconView.content ).to.equal( '<svg></svg>' );
 
-			view.icon = 'bar';
-			expect( view.iconView.content ).to.equal( 'bar' );
+			view.icon = '<svg>bar</svg>';
+			expect( view.iconView.content ).to.equal( '<svg>bar</svg>' );
 		} );
 
 		it( 'is destroyed with the view', () => {
 			view = new ButtonView( locale );
-			view.icon = 'foo';
+			view.icon = '<svg></svg>';
 			view.render();
 
 			const spy = sinon.spy( view.iconView, 'destroy' );

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

@@ -50,6 +50,21 @@ describe( 'IconView', () => {
 				view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>';
 				expect( view.element.innerHTML = '' );
 			} );
+
+			it( 'works for #content with more than <svg> declaration', () => {
+				expect( view.element.innerHTML = '' );
+
+				view.content =
+					'<?xml version="1.0" encoding="utf-8"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="test"></g></svg>';
+				expect( view.element.innerHTML = '<g id="test"></g>' );
+			} );
+
+			it( 'should respect parsed <svg>\'s viewBox attribute', () => {
+				expect( view.element.innerHTML = '' );
+
+				view.content = '<svg version="1.1" viewBox="10 20 30 40" xmlns="http://www.w3.org/2000/svg"><g id="test"></g></svg>';
+				expect( view.viewBox ).to.equal( '10 20 30 40' );
+			} );
 		} );
 	} );
 } );