Explorar el Código

Bootstrap IconManagerView using Template class.

Aleksander Nowodzinski hace 9 años
padre
commit
0471e14d30

+ 4 - 18
packages/ckeditor5-ui/src/iconmanagerview.js

@@ -19,31 +19,17 @@ export default class IconManagerView extends View {
 		super( model, locale );
 
 		this.template = {
-			tag: 'div',
+			tag: 'svg',
+			ns: 'http://www.w3.org/2000/svg',
 			attributes: {
-				class: 'ck-icon-manager'
+				class: 'ck-icon-manager-sprite'
 			}
 		};
 	}
 
 	init() {
-		this._setupSprite();
+		this.element.innerHTML = this.model.sprite;
 
 		return super.init();
 	}
-
-	/**
-	 * Injects icon sprite into DOM.
-	 *
-	 * @protected
-	 */
-	_setupSprite() {
-		// Note: Creating SVG icons with with Template class is not possible
-		// because of CSS limitations of document.createEleentNS–created elements.
-		this.element.innerHTML = `<svg
-				xmlns="http://www.w3.org/2000/svg"
-				xmlns:xlink="http://www.w3.org/1999/xlink"
-				class="ck-icon-manager-sprite"
-			>${ this.model.sprite }</svg>`;
-	}
 }

+ 7 - 16
packages/ckeditor5-ui/tests/iconmanagerview.js

@@ -22,27 +22,18 @@ describe( 'IconManagerView', () => {
 		} ) );
 	} );
 
-	describe( 'init', () => {
-		it( 'calls _setupSprite', () => {
-			const spy = testUtils.sinon.spy( view, '_setupSprite' );
-
-			view.init();
-			expect( spy.calledOnce ).to.be.true;
+	describe( 'constructor', () => {
+		it( 'creates element from template', () => {
+			expect( view.element.tagName ).to.be.equal( 'svg' );
+			expect( view.element.getAttribute( 'class' ) ).to.be.equal( 'ck-icon-manager-sprite' );
 		} );
 	} );
 
-	describe( '_setupSprite', () => {
+	describe( 'init', () => {
 		it( 'initializes the sprite', () => {
-			view._setupSprite();
-
-			const el = view.element;
-			const svg = view.element.firstChild;
+			view.init();
 
-			expect( el.tagName ).to.be.equal( 'DIV' );
-			expect( el.classList.item( 0 ) ).to.be.equal( 'ck-icon-manager' );
-			expect( svg.tagName ).to.be.equal( 'svg' );
-			expect( svg.innerHTML ).to.be.equal( 'foo' );
-			expect( svg.classList.item( 0 ) ).to.be.equal( 'ck-icon-manager-sprite' );
+			expect( view.element.innerHTML ).to.be.equal( 'foo' );
 		} );
 	} );
 } );