Browse Source

Feature: Allowed marking ListItemView active using the #isActive attribute.

Aleksander Nowodzinski 8 years ago
parent
commit
2f3816bc3c

+ 9 - 1
packages/ckeditor5-ui/src/list/listitemview.js

@@ -39,7 +39,8 @@ export default class ListItemView extends View {
 			attributes: {
 				class: [
 					'ck-list__item',
-					bind.to( 'class' )
+					bind.to( 'class' ),
+					bind.if( 'isActive', 'ck-list__item_active' )
 				],
 				style: bind.to( 'style' ),
 				tabindex: bind.to( 'tabindex' )
@@ -78,6 +79,13 @@ export default class ListItemView extends View {
 		 */
 
 		/**
+		 * (Optional) When set, it marks the item as active among the others.
+		 *
+		 * @observable
+		 * @member {Boolean} #isActive
+		 */
+
+		/**
 		 * Fired when the list item has been clicked.
 		 *
 		 * @event #execute

+ 8 - 0
packages/ckeditor5-ui/tests/list/listitemview.js

@@ -35,6 +35,14 @@ describe( 'ListItemView', () => {
 
 				expect( view.element.classList.contains( 'foo' ) ).to.be.true;
 			} );
+
+			it( 'reacts on view#isActive', () => {
+				expect( view.element.classList ).to.have.length( 1 );
+
+				view.set( 'isActive', true );
+
+				expect( view.element.classList.contains( 'ck-list__item_active' ) ).to.be.true;
+			} );
 		} );
 
 		describe( '"style" attribute', () => {