Browse Source

Added ToolbarView#className attribute.

Aleksander Nowodzinski 8 years ago
parent
commit
e56de70d2e

+ 10 - 1
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -65,6 +65,14 @@ export default class ToolbarView extends View {
 		this.set( 'isVertical', false );
 
 		/**
+		 * An additional CSS class added to the {@link #element}.
+		 *
+		 * @observable
+		 * @member {String} #className
+		 */
+		this.set( 'className' );
+
+		/**
 		 * Helps cycling over focusable {@link #items} in the toolbar.
 		 *
 		 * @readonly
@@ -89,7 +97,8 @@ export default class ToolbarView extends View {
 			attributes: {
 				class: [
 					'ck-toolbar',
-					bind.if( 'isVertical', 'ck-toolbar_vertical' )
+					bind.if( 'isVertical', 'ck-toolbar_vertical' ),
+					bind.to( 'className' )
 				]
 			},
 

+ 12 - 0
packages/ckeditor5-ui/tests/toolbar/toolbarview.js

@@ -83,6 +83,18 @@ describe( 'ToolbarView', () => {
 				view.isVertical = true;
 				expect( view.element.classList.contains( 'ck-toolbar_vertical' ) ).to.be.true;
 			} );
+
+			it( 'reacts on view#className', () => {
+				view.className = 'foo';
+				expect( view.element.classList.contains( 'foo' ) ).to.be.true;
+
+				view.className = 'bar';
+				expect( view.element.classList.contains( 'bar' ) ).to.be.true;
+
+				view.className = false;
+				expect( view.element.classList.contains( 'foo' ) ).to.be.false;
+				expect( view.element.classList.contains( 'bar' ) ).to.be.false;
+			} );
 		} );
 	} );