diff --git a/src/button/buttonview.js b/src/button/buttonview.js index f8f03a43..abbbc256 100644 --- a/src/button/buttonview.js +++ b/src/button/buttonview.js @@ -118,7 +118,7 @@ export default class ButtonView extends View { class: [ 'ck', 'ck-button', - bind.to( 'isEnabled', value => value ? 'ck-enabled' : 'ck-disabled' ), + bind.if( 'isEnabled', 'ck-disabled', value => !value ), bind.if( 'isVisible', 'ck-hidden', value => !value ), bind.to( 'isOn', value => value ? 'ck-on' : 'ck-off' ), bind.if( 'withText', 'ck-button_with-text' ) diff --git a/src/dropdown/dropdownview.js b/src/dropdown/dropdownview.js index 3cb7d79a..7d884d75 100644 --- a/src/dropdown/dropdownview.js +++ b/src/dropdown/dropdownview.js @@ -147,7 +147,7 @@ export default class DropdownView extends View { class: [ 'ck', 'ck-dropdown', - bind.to( 'isEnabled', isEnabled => isEnabled ? '' : 'ck-disabled' ) + bind.if( 'isEnabled', 'ck-disabled', value => !value ) ] }, diff --git a/src/list/listitemview.js b/src/list/listitemview.js index 11e8ab5c..60ceb59d 100644 --- a/src/list/listitemview.js +++ b/src/list/listitemview.js @@ -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,10 +63,29 @@ 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. * diff --git a/tests/button/buttonview.js b/tests/button/buttonview.js index 14616402..cb00c381 100644 --- a/tests/button/buttonview.js +++ b/tests/button/buttonview.js @@ -47,10 +47,10 @@ describe( 'ButtonView', () => { describe( '