Kaynağa Gözat

Used ButtonView inside ListItemView.

Aleksander Nowodzinski 7 yıl önce
ebeveyn
işleme
55979182ef

+ 14 - 0
packages/ckeditor5-ui/src/button/button.jsdoc

@@ -121,6 +121,20 @@
  */
 
 /**
+ * (Optional) The additional class set on the button.
+ *
+ * @observable
+ * @member {String} #class
+ */
+
+/**
+ * (Optional) The value of the style attribute.
+ *
+ * @observable
+ * @member {String} #style
+ */
+
+/**
  * Fired when the button view is clicked. It won't be fired when the button {@link #isEnabled}
  * is `false`.
  *

+ 4 - 0
packages/ckeditor5-ui/src/button/buttonview.js

@@ -46,6 +46,8 @@ export default class ButtonView extends View {
 		const ariaLabelUid = uid();
 
 		// Implement the Button interface.
+		this.set( 'class' );
+		this.set( 'style' );
 		this.set( 'icon' );
 		this.set( 'isEnabled', true );
 		this.set( 'isOn', false );
@@ -120,11 +122,13 @@ export default class ButtonView extends View {
 				class: [
 					'ck',
 					'ck-button',
+					bind.to( 'class' ),
 					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' )
 				],
+				style: bind.to( 'style' ),
 				type: bind.to( 'type', value => value ? value : 'button' ),
 				tabindex: bind.to( 'tabindex' ),
 				'aria-labelledby': `ck-editor__aria-label_${ ariaLabelUid }`,

+ 6 - 2
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -14,6 +14,7 @@ import ToolbarView from '../toolbar/toolbarview';
 import ListView from '../list/listview';
 import ListItemView from '../list/listitemview';
 import ListSeparatorView from '../list/listseparatorview';
+import ButtonView from '../button/buttonview';
 
 import clickOutsideHandler from '../bindings/clickoutsidehandler';
 
@@ -179,10 +180,13 @@ export function addListToDropdown( dropdownView, items ) {
 		if ( itemModel.isSeparator ) {
 			item = new ListSeparatorView( locale );
 		} else {
-			item = new ListItemView( locale );
+			const buttonView = new ButtonView( locale );
+
+			item = new ListItemView( locale, buttonView );
 
 			// Bind all attributes of the model to the item view.
-			item.bind( ...Object.keys( itemModel ) ).to( itemModel );
+			buttonView.bind( ...Object.keys( itemModel ) ).to( itemModel );
+			buttonView.delegate( 'execute' ).to( item );
 		}
 
 		return item;

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

@@ -8,7 +8,6 @@
  */
 
 import View from '../view';
-import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
 /**
  * The list item view class.
@@ -19,27 +18,15 @@ export default class ListItemView extends View {
 	/**
 	 * @inheritDoc
 	 */
-	constructor() {
+	constructor( locale, childView ) {
 		super();
 
 		/**
-		 * Controls the `tabindex` attribute of the item.
+		 * The child view of the list item.
 		 *
-		 * @observable
-		 * @default -1
-		 * @member {String} #tabindex
+		 * @member {module:ui/view~View} #childView
 		 */
-		this.set( 'tabindex', -1 );
-
-		/**
-		 * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-		 *
-		 * @readonly
-		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
-		 */
-		this.keystrokes = new KeystrokeHandler();
-
-		const bind = this.bindTemplate;
+		this.childView = childView;
 
 		this.setTemplate( {
 			tag: 'li',
@@ -47,102 +34,20 @@ export default class ListItemView extends View {
 			attributes: {
 				class: [
 					'ck',
-					'ck-list__item',
-					bind.to( 'class' ),
-					bind.if( 'isActive', 'ck-list__item_active' ),
-					bind.if( 'isEnabled', 'ck-disabled', value => !value )
-				],
-				style: bind.to( 'style' ),
-				tabindex: bind.to( 'tabindex' )
+					'ck-list__item'
+				]
 			},
 
 			children: [
-				{
-					text: bind.to( 'label' )
-				}
-			],
-
-			on: {
-				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();
-					}
-				} )
-			}
+				childView
+			]
 		} );
-
-		/**
-		 * (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
-		 * @member {String} #label
-		 */
-
-		/**
-		 * (Optional) The DOM style attribute of the list item.
-		 *
-		 * @observable
-		 * @member {String} #style
-		 */
-
-		/**
-		 * (Optional) The additional class set on the {@link #element}.
-		 *
-		 * @observable
-		 * @member {String} #class
-		 */
-
-		/**
-		 * (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
-		 */
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		const onKeystrokePress = ( data, cancel ) => {
-			this.fire( 'execute' );
-			cancel();
-		};
-
-		this.keystrokes.listenTo( this.element );
-
-		// Execute on Enter and Space key press.
-		this.keystrokes.set( 'Enter', onKeystrokePress );
-		this.keystrokes.set( 'Space', onKeystrokePress );
 	}
 
 	/**
 	 * Focuses the list item.
 	 */
 	focus() {
-		this.element.focus();
+		this.childView.focus();
 	}
 }