button.jsdoc

/**
 * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

/**
 * @module ui/button/button
 */

/**
 * The button interface. Implemented by, among others, {@link module:ui/button/buttonview~ButtonView},
 * {@link module:ui/dropdown/button/splitbuttonview~SplitButtonView} and
 * {@link module:ui/dropdown/button/dropdownbuttonview~DropdownButtonView}.
 *
 * @interface module:ui/button/button~Button
 */

/**
 * The label of the button view visible to the user when {@link #withText} is `true`.
 * It can also be used to create a {@link #tooltip}.
 *
 * @observable
 * @member {String} #label
 */

/**
 * (Optional) The keystroke associated with the button, i.e. <kbd>CTRL+B</kbd>,
 * in the string format compatible with {@link module:utils/keyboard}.
 *
 * **Note**: Use {@link module:ui/button/button~Button#withKeystroke} if you want to display
 * the keystroke information next to the {@link module:ui/button/button~Button#label label}.
 *
 * @observable
 * @member {Boolean} #keystroke
 */

/**
 * (Optional) Tooltip of the button, i.e. displayed when hovering the button with the mouse cursor.
 *
 * * If defined as a `Boolean` (e.g. `true`), then combination of `label` and `keystroke` will be set as a tooltip.
 * * If defined as a `String`, tooltip will equal the exact text of that `String`.
 * * If defined as a `Function`, `label` and `keystroke` will be passed to that function, which is to return
 * a string with the tooltip text.
 *
 *		const view = new ButtonView( locale );
 *		view.tooltip = ( label, keystroke ) => `A tooltip for ${ label } and ${ keystroke }.`
 *
 * @observable
 * @default false
 * @member {Boolean|String|Function} #tooltip
 */

/**
 * (Optional) The position of the tooltip. See {@link module:ui/tooltip/tooltipview~TooltipView#position}
 * to learn more about the available position values.
 *
 * **Note:** It makes sense only when the {@link #tooltip `tooltip` attribute} is defined.
 *
 * @observable
 * @default 's'
 * @member {'s'|'n'} #tooltipPosition
 */

/**
 * The HTML type of the button. Default `button`.
 *
 * @observable
 * @member {'button'|'submit'|'reset'|'menu'} #type
 */

/**
 * Controls whether the button view is "on". It makes sense when a feature it represents
 * is currently active, e.g. a bold button is "on" when the selection is in the bold text.
 *
 * To disable the button, use {@link #isEnabled} instead.
 *
 * @observable
 * @default true
 * @member {Boolean} #isOn
 */

/**
 * Controls whether the button view is enabled, i.e. it can be clicked and execute an action.
 *
 * To change the "on" state of the button, use {@link #isOn} instead.
 *
 * @observable
 * @default true
 * @member {Boolean} #isEnabled
 */

/**
 * Controls whether the button view is visible. Visible by default, buttons are hidden
 * using a CSS class.
 *
 * @observable
 * @default true
 * @member {Boolean} #isVisible
 */

/**
 * Controls whether the button view is a toggle button (two–state) for assistive technologies.
 *
 * @observable
 * @default false
 * @member {Boolean} #isToggleable
 */

/**
 * (Optional) Controls whether the label of the button is hidden (e.g. an icon–only button).
 *
 * @observable
 * @default false
 * @member {Boolean} #withText
 */

/**
 * (Optional) Controls whether the keystroke of the button is displayed next to its
 * {@link module:ui/button/button~Button#label label}.
 *
 * **Note**: This property requires a {@link module:ui/button/button~Button#keystroke keystroke}
 * to be defined in the first place.
 *
 * @observable
 * @default false
 * @member {Boolean} #withKeystroke
 */

/**
 * (Optional) An XML {@link module:ui/icon/iconview~IconView#content content} of the icon.
 * When defined, an `iconView` should be added to the button.
 *
 * @observable
 * @member {String} #icon
 */

/**
 * (Optional) Controls the `tabindex` HTML attribute of the button. By default, the button is focusable
 * but does not included in the <kbd>Tab</kbd> order.
 *
 * @observable
 * @default -1
 * @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`.
 *
 * @event execute
 */