|
|
@@ -49,7 +49,8 @@ export default class ListItemView extends View {
|
|
|
'ck',
|
|
|
'ck-list__item',
|
|
|
bind.to( 'class' ),
|
|
|
- bind.if( 'isActive', 'ck-list__item_active' )
|
|
|
+ bind.if( 'isActive', 'ck-list__item_active' ),
|
|
|
+ bind.if( 'isEnabled', 'ck-disabled', value => !value )
|
|
|
],
|
|
|
style: bind.to( 'style' ),
|
|
|
tabindex: bind.to( 'tabindex' )
|
|
|
@@ -62,11 +63,30 @@ export default class ListItemView extends View {
|
|
|
],
|
|
|
|
|
|
on: {
|
|
|
- click: bind.to( 'execute' )
|
|
|
+ click: bind.to( evt => {
|
|
|
+ // We can't make the button disabled using the disabled attribute, because it won't be focusable.
|
|
|
+ // Though, shouldn't this condition be moved to the button controller?
|
|
|
+ if ( this.isEnabled ) {
|
|
|
+ this.fire( 'execute' );
|
|
|
+ } else {
|
|
|
+ // Prevent the default when button is disabled, to block e.g.
|
|
|
+ // automatic form submitting. See ckeditor/ckeditor5-link#74.
|
|
|
+ evt.preventDefault();
|
|
|
+ }
|
|
|
+ } )
|
|
|
}
|
|
|
} );
|
|
|
|
|
|
/**
|
|
|
+ * (Optional) Controls whether the list item is enabled, i.e. it can be clicked and execute an action.
|
|
|
+ *
|
|
|
+ * @observable
|
|
|
+ * @default true
|
|
|
+ * @member {Boolean} #isEnabled
|
|
|
+ */
|
|
|
+ this.set( 'isEnabled', true );
|
|
|
+
|
|
|
+ /**
|
|
|
* The label of the list item.
|
|
|
*
|
|
|
* @observable
|