8
0
Просмотр исходного кода

Docs: Update `SplitButtonView` documentation.

Maciej Gołaszewski 8 лет назад
Родитель
Сommit
3e6eec3082

+ 57 - 3
packages/ckeditor5-ui/src/button/splitbuttonview.js

@@ -19,7 +19,21 @@ import arrowIcon from '@ckeditor/ckeditor5-core/theme/icons/low-vision.svg';
 import './../../theme/components/button/splitbutton.css';
 import './../../theme/components/button/splitbutton.css';
 
 
 /**
 /**
- * TODO
+ * The split button view class.
+ *
+ *		const view = new SplitButtonView();
+ *
+ *		view.set( {
+ *			label: 'A button',
+ *			keystroke: 'Ctrl+B',
+ *			tooltip: true
+ *		} );
+ *
+ *		view.render();
+ *
+ *		document.body.append( view.element );
+ *
+ * @extends module:ui/view~View
  */
  */
 export default class SplitButtonView extends View {
 export default class SplitButtonView extends View {
 	/**
 	/**
@@ -49,19 +63,42 @@ export default class SplitButtonView extends View {
 
 
 		/**
 		/**
 		 * (Optional) An XML {@link module:ui/icon/iconview~IconView#content content} of the icon.
 		 * (Optional) An XML {@link module:ui/icon/iconview~IconView#content content} of the icon.
-		 * When defined, an {@link #iconView} will be added to the button.
+		 * When defined, an {@link #iconView} will be added to the action button.
 		 *
 		 *
 		 * @observable
 		 * @observable
 		 * @member {String} #icon
 		 * @member {String} #icon
 		 */
 		 */
 		this.set( 'icon' );
 		this.set( 'icon' );
 
 
+		/**
+		 * Collection of the child views inside of the split button {@link #element}.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
 		this.children = this.createCollection();
 		this.children = this.createCollection();
 
 
 		this.actionView = this._createActionView();
 		this.actionView = this._createActionView();
 		this.selectView = this._createSelectView();
 		this.selectView = this._createSelectView();
 
 
+		/**
+		 * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}. It manages
+		 * keystrokes of the split button:
+		 *
+		 * * <kbd>▶</kbd> moves focus to select view when action view is focused,
+		 * * <kbd>◀</kbd> moves focus to action view when select view is focused.
+		 *
+		 * @readonly
+		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
+		 */
 		this.keystrokes = new KeystrokeHandler();
 		this.keystrokes = new KeystrokeHandler();
+
+		/**
+		 * Tracks information about DOM focus in the dropdown.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker}
+		 */
 		this.focusTracker = new FocusTracker();
 		this.focusTracker = new FocusTracker();
 
 
 		this.setTemplate( {
 		this.setTemplate( {
@@ -108,10 +145,20 @@ export default class SplitButtonView extends View {
 		} );
 		} );
 	}
 	}
 
 
+	/**
+	 * Focuses the {@link #actionView#element} of the action part of split button.
+	 */
 	focus() {
 	focus() {
 		this.actionView.focus();
 		this.actionView.focus();
 	}
 	}
 
 
+	/**
+	 * Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #actionView} and binds it with main split button
+	 * attributes.
+	 *
+	 * @private
+	 * @returns {module:ui/button/buttonview~ButtonView}
+	 */
 	_createActionView() {
 	_createActionView() {
 		const buttonView = new ButtonView();
 		const buttonView = new ButtonView();
 
 
@@ -122,6 +169,13 @@ export default class SplitButtonView extends View {
 		return buttonView;
 		return buttonView;
 	}
 	}
 
 
+	/**
+	 * Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #selectView} and binds it with main split button
+	 * attributes.
+	 *
+	 * @private
+	 * @returns {module:ui/button/buttonview~ButtonView}
+	 */
 	_createSelectView() {
 	_createSelectView() {
 		const selectView = new ButtonView();
 		const selectView = new ButtonView();
 
 
@@ -129,7 +183,7 @@ export default class SplitButtonView extends View {
 
 
 		selectView.extendTemplate( {
 		selectView.extendTemplate( {
 			attributes: {
 			attributes: {
-				class: 'ck-splitbutton-arrow'
+				class: 'ck-splitbutton-select'
 			}
 			}
 		} );
 		} );
 
 

+ 1 - 1
packages/ckeditor5-ui/tests/button/splitbuttonview.js

@@ -31,7 +31,7 @@ describe( 'SplitButtonView', () => {
 
 
 		it( 'creates view#selectView', () => {
 		it( 'creates view#selectView', () => {
 			expect( view.selectView ).to.be.instanceOf( ButtonView );
 			expect( view.selectView ).to.be.instanceOf( ButtonView );
-			expect( view.selectView.element.classList.contains( 'ck-splitbutton-arrow' ) ).to.be.true;
+			expect( view.selectView.element.classList.contains( 'ck-splitbutton-select' ) ).to.be.true;
 			expect( view.selectView.icon ).to.be.not.undefined;
 			expect( view.selectView.icon ).to.be.not.undefined;
 		} );
 		} );
 
 

+ 3 - 3
packages/ckeditor5-ui/theme/components/button/splitbutton.css

@@ -10,7 +10,7 @@
 	}
 	}
 }
 }
 
 
-.ck-rounded-corners .ck-splitbutton > .ck-button:not(.ck-splitbutton-arrow) {
+.ck-rounded-corners .ck-splitbutton > .ck-button:not(.ck-splitbutton-select) {
 	border-top-right-radius: unset;
 	border-top-right-radius: unset;
 	border-bottom-right-radius: unset;
 	border-bottom-right-radius: unset;
 
 
@@ -19,12 +19,12 @@
 	}
 	}
 }
 }
 
 
-.ck-rounded-corners .ck-splitbutton > .ck-splitbutton-arrow {
+.ck-rounded-corners .ck-splitbutton > .ck-splitbutton-select {
 	border-top-left-radius: unset;
 	border-top-left-radius: unset;
 	border-bottom-left-radius: unset;
 	border-bottom-left-radius: unset;
 }
 }
 
 
-.ck-splitbutton-arrow {
+.ck-splitbutton-select {
 	padding-right: var(--ck-spacing-standard);
 	padding-right: var(--ck-spacing-standard);
 
 
 	& svg {
 	& svg {