Skip to content
This repository was archived by the owner on Jun 26, 2020. It is now read-only.

Commit 0f26ca8

Browse files
ReinmarReinmar
authored
Merge pull request #361 from ckeditor/t/344
Other: Introduced `SplitButtonView` and new dropdown creation helpers (`createDropdown()`, `addListToDropdown()` and `addToolbarToDropdown()`) Closes #344. Closes #356. BREAKING CHANGE: Removed `DropdownModel` interface – you can use dropdown properties directly now. See #356. BREAKING CHANGE: Removed `createButtonDropdown()` and `ButtonDropdownView`. See #356. BREAKING CHANGE: Removed `createListDropdown()` and `ListDropdownView`. See #356.
2 parents 7973f83 + 7c0e6c9 commit 0f26ca8

31 files changed

+1573
-1217
lines changed

‎src/button/button.jsdoc

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
/**
2+
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
3+
* For licensing, see LICENSE.md.
4+
*/
5+
6+
/**
7+
* @module ui/button/button
8+
*/
9+
10+
/**
11+
* The button interface. Implemented by, among others, {@link module:ui/button/buttonview~ButtonView},
12+
* {@link module:ui/dropdown/button/splitbuttonview~SplitButtonView} and
13+
* {@link module:ui/dropdown/button/dropdownbuttonview~DropdownButtonView}.
14+
*
15+
* @interface module:ui/button/button~Button
16+
*/
17+
18+
/**
19+
* The label of the button view visible to the user when {@link #withText} is `true`.
20+
* It can also be used to create a {@link #tooltip}.
21+
*
22+
* @observable
23+
* @member {String} #label
24+
*/
25+
26+
/**
27+
* (Optional) The keystroke associated with the button, i.e. <kbd>CTRL+B</kbd>,
28+
* in the string format compatible with {@link module:utils/keyboard}.
29+
*
30+
* @observable
31+
* @member {Boolean} #keystroke
32+
*/
33+
34+
/**
35+
* (Optional) Tooltip of the button, i.e. displayed when hovering the button with the mouse cursor.
36+
*
37+
* * If defined as a `Boolean` (e.g. `true`), then combination of `label` and `keystroke` will be set as a tooltip.
38+
* * If defined as a `String`, tooltip will equal the exact text of that `String`.
39+
* * If defined as a `Function`, `label` and `keystroke` will be passed to that function, which is to return
40+
* a string with the tooltip text.
41+
*
42+
* const view = new ButtonView( locale );
43+
* view.tooltip = ( label, keystroke ) => `A tooltip for ${ label } and ${ keystroke }.`
44+
*
45+
* @observable
46+
* @default false
47+
* @member {Boolean|String|Function} #tooltip
48+
*/
49+
50+
/**
51+
* (Optional) The position of the tooltip. See {@link module:ui/tooltip/tooltipview~TooltipView#position}
52+
* to learn more about the available position values.
53+
*
54+
* **Note:** It makes sense only when the {@link #tooltip `tooltip` attribute} is defined.
55+
*
56+
* @observable
57+
* @default 's'
58+
* @member {'s'|'n'} #tooltipPosition
59+
*/
60+
61+
/**
62+
* The HTML type of the button. Default `button`.
63+
*
64+
* @observable
65+
* @member {'button'|'submit'|'reset'|'menu'} #type
66+
*/
67+
68+
/**
69+
* Controls whether the button view is "on". It makes sense when a feature it represents
70+
* is currently active, e.g. a bold button is "on" when the selection is in the bold text.
71+
*
72+
* To disable the button, use {@link #isEnabled} instead.
73+
*
74+
* @observable
75+
* @default true
76+
* @member {Boolean} #isOn
77+
*/
78+
79+
/**
80+
* Controls whether the button view is enabled, i.e. it can be clicked and execute an action.
81+
*
82+
* To change the "on" state of the button, use {@link #isOn} instead.
83+
*
84+
* @observable
85+
* @default true
86+
* @member {Boolean} #isEnabled
87+
*/
88+
89+
/**
90+
* Controls whether the button view is visible. Visible by default, buttons are hidden
91+
* using a CSS class.
92+
*
93+
* @observable
94+
* @default true
95+
* @member {Boolean} #isVisible
96+
*/
97+
98+
/**
99+
* (Optional) Controls whether the label of the button is hidden (e.g. an icon–only button).
100+
*
101+
* @observable
102+
* @default false
103+
* @member {Boolean} #withText
104+
*/
105+
106+
/**
107+
* (Optional) An XML {@link module:ui/icon/iconview~IconView#content content} of the icon.
108+
* When defined, an `iconView` should be added to the button.
109+
*
110+
* @observable
111+
* @member {String} #icon
112+
*/
113+
114+
/**
115+
* (Optional) Controls the `tabindex` HTML attribute of the button. By default, the button is focusable
116+
* but does not included in the <kbd>Tab</kbd> order.
117+
*
118+
* @observable
119+
* @default -1
120+
* @member {String} #tabindex
121+
*/
122+
123+
/**
124+
* Fired when the button view is clicked. It won't be fired when the button {@link #isEnabled}
125+
* is `false`.
126+
*
127+
* @event execute
128+
*/

‎src/button/buttonview.js

+15-120
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import '../../theme/components/button/button.css';
3232
* document.body.append( view.element );
3333
*
3434
* @extends module:ui/view~View
35+
* @implements module:ui/button/button~Button
3536
*/
3637
export default class ButtonView extends View {
3738
/**
@@ -42,118 +43,19 @@ export default class ButtonView extends View {
4243

4344
const bind = this.bindTemplate;
4445

45-
/**
46-
* The label of the button view visible to the user when {@link #withText} is `true`.
47-
* It can also be used to create a {@link #tooltip}.
48-
*
49-
* @observable
50-
* @member {String} #label
51-
*/
52-
this.set( 'label' );
53-
54-
/**
55-
* (Optional) The keystroke associated with the button, i.e. <kbd>CTRL+B</kbd>,
56-
* in the string format compatible with {@link module:utils/keyboard}.
57-
*
58-
* @observable
59-
* @member {Boolean} #keystroke
60-
*/
46+
// Implement the Button interface.
47+
this.set( 'icon' );
48+
this.set( 'isEnabled', true );
49+
this.set( 'isOn', false );
50+
this.set( 'isVisible', true );
6151
this.set( 'keystroke' );
62-
63-
/**
64-
* (Optional) Tooltip of the button, i.e. displayed when hovering the button with the mouse cursor.
65-
*
66-
* * If defined as a `Boolean` (e.g. `true`), then combination of `label` and `keystroke` will be set as a tooltip.
67-
* * If defined as a `String`, tooltip will equal the exact text of that `String`.
68-
* * If defined as a `Function`, `label` and `keystroke` will be passed to that function, which is to return
69-
* a string with the tooltip text.
70-
*
71-
* const view = new ButtonView( locale );
72-
* view.tooltip = ( label, keystroke ) => `A tooltip for ${ label } and ${ keystroke }.`
73-
*
74-
* @observable
75-
* @default false
76-
* @member {Boolean|String|Function} #tooltip
77-
*/
52+
this.set( 'label' );
53+
this.set( 'tabindex', -1 );
7854
this.set( 'tooltip' );
79-
80-
/**
81-
* (Optional) The position of the tooltip. See {@link module:ui/tooltip/tooltipview~TooltipView#position}
82-
* to learn more about the available position values.
83-
*
84-
* **Note:** It makes sense only when the {@link #tooltip `tooltip` attribute} is defined.
85-
*
86-
* @observable
87-
* @default 's'
88-
* @member {'s'|'n'} #position
89-
*/
9055
this.set( 'tooltipPosition', 's' );
91-
92-
/**
93-
* The HTML type of the button. Default `button`.
94-
*
95-
* @observable
96-
* @member {'button'|'submit'|'reset'|'menu'} #type
97-
*/
9856
this.set( 'type', 'button' );
99-
100-
/**
101-
* Controls whether the button view is "on". It makes sense when a feature it represents
102-
* is currently active, e.g. a bold button is "on" when the selection is in the bold text.
103-
*
104-
* To disable the button, use {@link #isEnabled} instead.
105-
*
106-
* @observable
107-
* @member {Boolean} #isOn
108-
*/
109-
this.set( 'isOn', false );
110-
111-
/**
112-
* Controls whether the button view is enabled, i.e. it can be clicked and execute an action.
113-
*
114-
* To change the "on" state of the button, use {@link #isOn} instead.
115-
*
116-
* @observable
117-
* @member {Boolean} #isEnabled
118-
*/
119-
this.set( 'isEnabled', true );
120-
121-
/**
122-
* Controls whether the button view is visible. Visible by default, buttons are hidden
123-
* using a CSS class.
124-
*
125-
* @observable
126-
* @member {Boolean} #isVisible
127-
*/
128-
this.set( 'isVisible', true );
129-
130-
/**
131-
* (Optional) Controls whether the label of the button is hidden (e.g. an icon–only button).
132-
*
133-
* @observable
134-
* @member {Boolean} #withText
135-
*/
13657
this.set( 'withText', false );
13758

138-
/**
139-
* (Optional) An XML {@link module:ui/icon/iconview~IconView#content content} of the icon.
140-
* When defined, an {@link #iconView} will be added to the button.
141-
*
142-
* @observable
143-
* @member {String} #icon
144-
*/
145-
this.set( 'icon' );
146-
147-
/**
148-
* (Optional) Controls the `tabindex` HTML attribute of the button. By default, the button is focusable
149-
* but does not included in the <kbd>Tab</kbd> order.
150-
*
151-
* @observable
152-
* @default -1
153-
* @member {String} #tabindex
154-
*/
155-
this.set( 'tabindex', -1 );
156-
15759
/**
15860
* Collection of the child views inside of the button {@link #element}.
15961
*
@@ -178,6 +80,13 @@ export default class ButtonView extends View {
17880
*/
17981
this.labelView = this._createLabelView();
18082

83+
/**
84+
* (Optional) The icon view of the button. Only present when the {@link #icon icon attribute} is defined.
85+
*
86+
* @readonly
87+
* @member {module:ui/icon/iconview~IconView} #iconView
88+
*/
89+
18190
/**
18291
* Tooltip of the button bound to the template.
18392
*
@@ -194,13 +103,6 @@ export default class ButtonView extends View {
194103
this._getTooltipString.bind( this )
195104
);
196105

197-
/**
198-
* (Optional) The icon view of the button. Only present when the {@link #icon icon attribute} is defined.
199-
*
200-
* @readonly
201-
* @member {module:ui/icon/iconview~IconView} #iconView
202-
*/
203-
204106
this.setTemplate( {
205107
tag: 'button',
206108

@@ -236,13 +138,6 @@ export default class ButtonView extends View {
236138
} )
237139
}
238140
} );
239-
240-
/**
241-
* Fired when the button view is clicked. It won't be fired when the button {@link #isEnabled}
242-
* is `false`.
243-
*
244-
* @event execute
245-
*/
246141
}
247142

248143
/**

‎src/dropdown/button/buttondropdownmodel.jsdoc

-71
This file was deleted.

0 commit comments

Comments
 (0)