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

Implemented IconView#fillColor observable which fill with the color all the child path.ck-icon__fill.

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

+ 31 - 1
packages/ckeditor5-ui/src/icon/iconview.js

@@ -45,6 +45,15 @@ export default class IconView extends View {
 		 */
 		this.set( 'viewBox', '0 0 20 20' );
 
+		/**
+		 * The fill color of the child `path.ck-icon__fill`.
+		 *
+		 * @observable
+		 * @default ''
+		 * @member {String} #fillColor
+		 */
+		this.set( 'fillColor', '' );
+
 		this.setTemplate( {
 			tag: 'svg',
 			ns: 'http://www.w3.org/2000/svg',
@@ -62,10 +71,18 @@ export default class IconView extends View {
 		super.render();
 
 		this._updateXMLContent();
+		this._colorFillPaths();
 
 		// This is a hack for lack of innerHTML binding.
 		// See: https://github.com/ckeditor/ckeditor5-ui/issues/99.
-		this.on( 'change:content', () => this._updateXMLContent() );
+		this.on( 'change:content', () => {
+			this._updateXMLContent();
+			this._colorFillPaths();
+		} );
+
+		this.on( 'change:fillColor', () => {
+			this._colorFillPaths();
+		} );
 	}
 
 	/**
@@ -90,4 +107,17 @@ export default class IconView extends View {
 			}
 		}
 	}
+
+	/**
+	 * Fills all child `path.ck-icon__fill` with the `#fillColor`.
+	 *
+	 * @private
+	 */
+	_colorFillPaths() {
+		if ( this.fillColor ) {
+			this.element.querySelectorAll( '.ck-icon__fill' ).forEach( path => {
+				path.style.fill = this.fillColor;
+			} );
+		}
+	}
 }

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

@@ -4,6 +4,7 @@
  */
 
 import IconView from '../../src/icon/iconview';
+import normalizeHtml from '@ckeditor/ckeditor5-utils/tests/_utils/normalizehtml';
 
 describe( 'IconView', () => {
 	let view;
@@ -22,6 +23,10 @@ describe( 'IconView', () => {
 			expect( view.viewBox ).to.equal( '0 0 20 20' );
 		} );
 
+		it( 'sets #fillColor', () => {
+			expect( view.fillColor ).to.equal( '' );
+		} );
+
 		it( 'creates element from template', () => {
 			expect( view.element.tagName ).to.equal( 'svg' );
 			expect( view.element.getAttribute( 'class' ) ).to.equal( 'ck-icon' );
@@ -66,5 +71,50 @@ describe( 'IconView', () => {
 				expect( view.viewBox ).to.equal( '10 20 30 40' );
 			} );
 		} );
+
+		describe( 'fill color', () => {
+			it( 'should be set intially based on view#fillColor', () => {
+				view.fillColor = 'red';
+
+				view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
+					'<path class="ck-icon__fill"></path><path></path><path class="ck-icon__fill"></path></svg>';
+
+				expect( normalizeHtml( view.element.innerHTML ) )
+					.to.equal( '<path class="ck-icon__fill" style="fill:red"></path>' +
+						'<path></path>' +
+						'<path class="ck-icon__fill" style="fill:red"></path>' );
+			} );
+
+			it( 'should react to changes in view#fillColor', () => {
+				view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
+					'<path class="ck-icon__fill"></path><path></path><path class="ck-icon__fill"></path></svg>';
+
+				expect( normalizeHtml( view.element.innerHTML ) )
+					.to.equal( '<path class="ck-icon__fill"></path><path></path><path class="ck-icon__fill"></path>' );
+
+				view.fillColor = 'red';
+				expect( normalizeHtml( view.element.innerHTML ) )
+					.to.equal( '<path class="ck-icon__fill" style="fill:red"></path>' +
+						'<path></path>' +
+						'<path class="ck-icon__fill" style="fill:red"></path>' );
+			} );
+
+			it( 'should react to changes in view#content', () => {
+				view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
+					'<path class="ck-icon__fill"></path><path></path><path class="ck-icon__fill"></path></svg>';
+				view.fillColor = 'red';
+
+				expect( normalizeHtml( view.element.innerHTML ) )
+					.to.equal( '<path class="ck-icon__fill" style="fill:red"></path>' +
+						'<path></path>' +
+						'<path class="ck-icon__fill" style="fill:red"></path>' );
+
+				view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg">' +
+					'<path></path><path class="ck-icon__fill"></path></svg>';
+
+				expect( normalizeHtml( view.element.innerHTML ) )
+					.to.equal( '<path></path><path class="ck-icon__fill" style="fill:red"></path>' );
+			} );
+		} );
 	} );
 } );