Merge pull request #414 from ckeditor/t/402

Feature: Implemented the `SwitchButtonView`. Closes #402. Closes #403.

Also:
* Simplified the `ListItemView` class, which is now just a container for `ButtonView` (and others),
* Moved `ListItemView#style` and `#class` to the `ButtonView` (as `#class` and `#labelStyle`),
* Enhanced the `addListToDropdown` utility with a better configuration (`ListDropdownItemDefinition`) and the support for buttons, switch buttons, and separators,
* `.ck-button` and `.ck-list` became `flex` containers; the first one to allow complex inner structures (like the toggle) and the later to take control of complex list items (like `.ck-switchbutton`).

BREAKING CHANGE: Most of the `ListItemView` functionality is now handled by the `ButtonView`,
BREAKING CHANGE: The API of the `addListToDropdown` has changed; see `ListDropdownItemDefinition` to learn more,
BREAKING CHANGE: The `.ck-button` and `.ck-list` classes are using `flex` which may have an impact on rendering.

Author: jodator

src/button/button.jsdoc

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

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( 'labelStyle' );
 		this.set( 'icon' );
 		this.set( 'isEnabled', true );
 		this.set( 'isOn', false );
@@ -120,6 +122,7 @@ 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' ),
@@ -201,6 +204,7 @@ export default class ButtonView extends View {
 	 */
 	_createLabelView( ariaLabelUid ) {
 		const labelView = new View();
+		const bind = this.bindTemplate;
 
 		labelView.setTemplate( {
 			tag: 'span',
@@ -210,6 +214,7 @@ export default class ButtonView extends View {
 					'ck',
 					'ck-button__label'
 				],
+				style: bind.to( 'labelStyle' ),
 				id: `ck-editor__aria-label_${ ariaLabelUid }`,
 			},
 

src/button/switchbuttonview.js

@@ -0,0 +1,97 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module ui/button/switchbuttonview
+ */
+
+import View from '../view';
+import ButtonView from './buttonview';
+
+import '../../theme/components/button/switchbutton.css';
+
+/**
+ * The switch button view class.
+ *
+ *		const view = new SwitchButtonView();
+ *
+ *		view.set( {
+ *			withText: true,
+ *			label: 'Switch me!'
+ *		} );
+ *
+ *		view.render();
+ *
+ *		document.body.append( view.element );
+ *
+ * @extends module:ui/buttonview~ButtonView
+ */
+export default class SwitchButtonView extends ButtonView {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale ) {
+		super( locale );
+
+		/**
+		 * The toggle switch of the button.
+		 *
+		 * @readonly
+		 * @member {module:ui/view~View} #toggleSwitchView
+		 */
+		this.toggleSwitchView = this._createToggleView();
+
+		this.extendTemplate( {
+			attributes: {
+				class: 'ck-switchbutton'
+			}
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		this.children.add( this.toggleSwitchView );
+	}
+
+	/**
+	 * Creates a toggle child view.
+	 *
+	 * @private
+	 * @returns {module:ui/view~View}
+	 */
+	_createToggleView() {
+		const toggleSwitchView = new View();
+
+		toggleSwitchView.setTemplate( {
+			tag: 'span',
+
+			attributes: {
+				class: [
+					'ck',
+					'ck-button__toggle'
+				],
+			},
+
+			children: [
+				{
+					tag: 'span',
+
+					attributes: {
+						class: [
+							'ck',
+							'ck-button__toggle__inner'
+						],
+					}
+				}
+			]
+		} );
+
+		return toggleSwitchView;
+	}
+}

src/dropdown/dropdownview.js

@@ -188,8 +188,8 @@ export default class DropdownView extends View {
 		/**
 		 * Fired when the toolbar button or list item is executed.
 		 *
-		 * For {@link #listView} It fires when one of the list items has been
-		 * {@link module:ui/list/listitemview~ListItemView#event:execute executed}.
+		 * For {@link #listView} It fires when a child of some {@link module:ui/list/listitemview~ListItemView}
+		 * fired `execute`.
 		 *
 		 * For {@link #toolbarView} It fires when one of the buttons has been
 		 * {@link module:ui/button/buttonview~ButtonView#event:execute executed}.

src/dropdown/utils.js

@@ -14,6 +14,8 @@ 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 SwitchButtonView from '../button/switchbuttonview';
 
 import clickOutsideHandler from '../bindings/clickoutsidehandler';
 
@@ -146,8 +148,15 @@ export function addToolbarToDropdown( dropdownView, buttons ) {
  *
  *		const items = new Collection();
  *
- *		items.add( new Model( { label: 'First item', style: 'color: red' } ) );
- *		items.add( new Model( { label: 'Second item', style: 'color: green', class: 'foo' } ) );
+ *		items.add( {
+ *			type: 'button',
+ *			model: new Model( { label: 'First item', labelStyle: 'color: red' } )
+ *		} );
+ *
+ *		items.add( {
+ *			 type: 'button',
+ *			 model: new Model( { label: 'Second item', labelStyle: 'color: green', class: 'foo' } )
+ * 		} );
  *
  *		const dropdown = createDropdown( locale );
  *
@@ -164,28 +173,34 @@ export function addToolbarToDropdown( dropdownView, buttons ) {
  * See {@link module:ui/dropdown/utils~createDropdown} and {@link module:list/list~List}.
  *
  * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView A dropdown instance to which `ListVIew` will be added.
- * @param {module:utils/collection~Collection} items
- * that the inner dropdown {@link module:ui/list/listview~ListView} children are created from.
- *
- * Usually, it is a collection of {@link module:ui/model~Model models}.
+ * @param {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>} items
+ * A collection of the list item definitions to populate the list.
  */
 export function addListToDropdown( dropdownView, items ) {
 	const locale = dropdownView.locale;
 	const listView = dropdownView.listView = new ListView( locale );
 
-	listView.items.bindTo( items ).using( itemModel => {
-		let item;
+	listView.items.bindTo( items ).using( ( { type, model } ) => {
+		if ( type === 'separator' ) {
+			return new ListSeparatorView( locale );
+		} else if ( type === 'button' || type === 'switchbutton' ) {
+			const listItemView = new ListItemView( locale );
+			let buttonView;
 
-		if ( itemModel.isSeparator ) {
-			item = new ListSeparatorView( locale );
-		} else {
-			item = new ListItemView( locale );
+			if ( type === 'button' ) {
+				buttonView = new ButtonView( locale );
+			} else {
+				buttonView = new SwitchButtonView( locale );
+			}
 
-			// Bind all attributes of the model to the item view.
-			item.bind( ...Object.keys( itemModel ) ).to( itemModel );
-		}
+			// Bind all model properties to the button view.
+			buttonView.bind( ...Object.keys( model ) ).to( model );
+			buttonView.delegate( 'execute' ).to( listItemView );
+
+			listItemView.children.add( buttonView );
 
-		return item;
+			return listItemView;
+		}
 	} );
 
 	dropdownView.panelView.children.add( listView );
@@ -223,7 +238,12 @@ function closeDropdownOnBlur( dropdownView ) {
 // @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
 function closeDropdownOnExecute( dropdownView ) {
 	// Close the dropdown when one of the list items has been executed.
-	dropdownView.on( 'execute', () => {
+	dropdownView.on( 'execute', evt => {
+		// Toggling a switch button view should not close the dropdown.
+		if ( evt.source instanceof SwitchButtonView ) {
+			return;
+		}
+
 		dropdownView.isOpen = false;
 	} );
 }
@@ -248,3 +268,14 @@ function focusDropdownContentsOnArrows( dropdownView ) {
 		}
 	} );
 }
+
+/**
+ * A definition of the list item used by the {@link module:ui/dropdown/utils~addListToDropdown}
+ * utility.
+ *
+ * @typedef {Object} module:ui/dropdown/utils~ListDropdownItemDefinition
+ *
+ * @property {String} type Either `'separator'`, `'button'` or `'switchbutton'`.
+ * @property {module:ui/model~Model} [model] Model of the item (when **not** `'separator'`).
+ * Its properties fuel the newly created list item (or its children, depending on the `type`).
+ */