8
0

buttonview.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module ui/button/buttonview
  7. */
  8. import View from '../view';
  9. import IconView from '../icon/iconview';
  10. import TooltipView from '../tooltip/tooltipview';
  11. import uid from '@ckeditor/ckeditor5-utils/src/uid';
  12. import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
  13. import '../../theme/components/button/button.css';
  14. /**
  15. * The button view class.
  16. *
  17. * const view = new ButtonView();
  18. *
  19. * view.set( {
  20. * label: 'A button',
  21. * keystroke: 'Ctrl+B',
  22. * tooltip: true,
  23. * withText: true
  24. * } );
  25. *
  26. * view.render();
  27. *
  28. * document.body.append( view.element );
  29. *
  30. * @extends module:ui/view~View
  31. * @implements module:ui/button/button~Button
  32. */
  33. export default class ButtonView extends View {
  34. /**
  35. * @inheritDoc
  36. */
  37. constructor( locale ) {
  38. super( locale );
  39. const bind = this.bindTemplate;
  40. const ariaLabelUid = uid();
  41. // Implement the Button interface.
  42. this.set( 'class' );
  43. this.set( 'labelStyle' );
  44. this.set( 'icon' );
  45. this.set( 'isEnabled', true );
  46. this.set( 'isOn', false );
  47. this.set( 'isVisible', true );
  48. this.set( 'isToggleable', false );
  49. this.set( 'keystroke' );
  50. this.set( 'label' );
  51. this.set( 'tabindex', -1 );
  52. this.set( 'tooltip' );
  53. this.set( 'tooltipPosition', 's' );
  54. this.set( 'type', 'button' );
  55. this.set( 'withText', false );
  56. this.set( 'withKeystroke', false );
  57. /**
  58. * Collection of the child views inside of the button {@link #element}.
  59. *
  60. * @readonly
  61. * @member {module:ui/viewcollection~ViewCollection}
  62. */
  63. this.children = this.createCollection();
  64. /**
  65. * Tooltip of the button view. It is configurable using the {@link #tooltip tooltip attribute}.
  66. *
  67. * @readonly
  68. * @member {module:ui/tooltip/tooltipview~TooltipView} #tooltipView
  69. */
  70. this.tooltipView = this._createTooltipView();
  71. /**
  72. * Label of the button view. It is configurable using the {@link #label label attribute}.
  73. *
  74. * @readonly
  75. * @member {module:ui/view~View} #labelView
  76. */
  77. this.labelView = this._createLabelView( ariaLabelUid );
  78. /**
  79. * The icon view of the button. Will be added to {@link #children} when the
  80. * {@link #icon icon attribute} is defined.
  81. *
  82. * @readonly
  83. * @member {module:ui/icon/iconview~IconView} #iconView
  84. */
  85. this.iconView = new IconView();
  86. this.iconView.extendTemplate( {
  87. attributes: {
  88. class: 'ck-button__icon'
  89. }
  90. } );
  91. /**
  92. * A view displaying the keystroke of the button next to the {@link #labelView label}.
  93. * Added to {@link #children} when the {@link #withKeystroke `withKeystroke` attribute}
  94. * is defined.
  95. *
  96. * @readonly
  97. * @member {module:ui/view/view~View} #keystrokeView
  98. */
  99. this.keystrokeView = this._createKeystrokeView();
  100. /**
  101. * Tooltip of the button bound to the template.
  102. *
  103. * @see #tooltip
  104. * @see #_getTooltipString
  105. * @private
  106. * @observable
  107. * @member {Boolean} #_tooltipString
  108. */
  109. this.bind( '_tooltipString' ).to(
  110. this, 'tooltip',
  111. this, 'label',
  112. this, 'keystroke',
  113. this._getTooltipString.bind( this )
  114. );
  115. this.setTemplate( {
  116. tag: 'button',
  117. attributes: {
  118. class: [
  119. 'ck',
  120. 'ck-button',
  121. bind.to( 'class' ),
  122. bind.if( 'isEnabled', 'ck-disabled', value => !value ),
  123. bind.if( 'isVisible', 'ck-hidden', value => !value ),
  124. bind.to( 'isOn', value => value ? 'ck-on' : 'ck-off' ),
  125. bind.if( 'withText', 'ck-button_with-text' ),
  126. bind.if( 'withKeystroke', 'ck-button_with-keystroke' )
  127. ],
  128. type: bind.to( 'type', value => value ? value : 'button' ),
  129. tabindex: bind.to( 'tabindex' ),
  130. 'aria-labelledby': `ck-editor__aria-label_${ ariaLabelUid }`,
  131. 'aria-disabled': bind.if( 'isEnabled', true, value => !value ),
  132. 'aria-pressed': bind.to( 'isOn', value => this.isToggleable ? String( value ) : false )
  133. },
  134. children: this.children,
  135. on: {
  136. mousedown: bind.to( evt => {
  137. evt.preventDefault();
  138. } ),
  139. click: bind.to( evt => {
  140. // We can't make the button disabled using the disabled attribute, because it won't be focusable.
  141. // Though, shouldn't this condition be moved to the button controller?
  142. if ( this.isEnabled ) {
  143. this.fire( 'execute' );
  144. } else {
  145. // Prevent the default when button is disabled, to block e.g.
  146. // automatic form submitting. See ckeditor/ckeditor5-link#74.
  147. evt.preventDefault();
  148. }
  149. } )
  150. }
  151. } );
  152. }
  153. /**
  154. * @inheritDoc
  155. */
  156. render() {
  157. super.render();
  158. if ( this.icon ) {
  159. this.iconView.bind( 'content' ).to( this, 'icon' );
  160. this.children.add( this.iconView );
  161. }
  162. this.children.add( this.tooltipView );
  163. this.children.add( this.labelView );
  164. if ( this.withKeystroke ) {
  165. this.children.add( this.keystrokeView );
  166. }
  167. }
  168. /**
  169. * Focuses the {@link #element} of the button.
  170. */
  171. focus() {
  172. this.element.focus();
  173. }
  174. /**
  175. * Creates a {@link module:ui/tooltip/tooltipview~TooltipView} instance and binds it with button
  176. * attributes.
  177. *
  178. * @private
  179. * @returns {module:ui/tooltip/tooltipview~TooltipView}
  180. */
  181. _createTooltipView() {
  182. const tooltipView = new TooltipView();
  183. tooltipView.bind( 'text' ).to( this, '_tooltipString' );
  184. tooltipView.bind( 'position' ).to( this, 'tooltipPosition' );
  185. return tooltipView;
  186. }
  187. /**
  188. * Creates a label view instance and binds it with button attributes.
  189. *
  190. * @private
  191. * @param {String} ariaLabelUid The aria label UID.
  192. * @returns {module:ui/view~View}
  193. */
  194. _createLabelView( ariaLabelUid ) {
  195. const labelView = new View();
  196. const bind = this.bindTemplate;
  197. labelView.setTemplate( {
  198. tag: 'span',
  199. attributes: {
  200. class: [
  201. 'ck',
  202. 'ck-button__label'
  203. ],
  204. style: bind.to( 'labelStyle' ),
  205. id: `ck-editor__aria-label_${ ariaLabelUid }`
  206. },
  207. children: [
  208. {
  209. text: this.bindTemplate.to( 'label' )
  210. }
  211. ]
  212. } );
  213. return labelView;
  214. }
  215. /**
  216. * Creates a view that displays a keystroke next to a {@link #labelView label }
  217. * and binds it with button attributes.
  218. *
  219. * @private
  220. * @returns {module:ui/view~View}
  221. */
  222. _createKeystrokeView() {
  223. const keystrokeView = new View();
  224. keystrokeView.setTemplate( {
  225. tag: 'span',
  226. attributes: {
  227. class: [
  228. 'ck',
  229. 'ck-button__keystroke'
  230. ]
  231. },
  232. children: [
  233. {
  234. text: this.bindTemplate.to( 'keystroke', text => getEnvKeystrokeText( text ) )
  235. }
  236. ]
  237. } );
  238. return keystrokeView;
  239. }
  240. /**
  241. * Gets the text for the {@link #tooltipView} from the combination of
  242. * {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.
  243. *
  244. * @private
  245. * @see #tooltip
  246. * @see #_tooltipString
  247. * @param {Boolean|String|Function} tooltip Button tooltip.
  248. * @param {String} label Button label.
  249. * @param {String} keystroke Button keystroke.
  250. * @returns {String}
  251. */
  252. _getTooltipString( tooltip, label, keystroke ) {
  253. if ( tooltip ) {
  254. if ( typeof tooltip == 'string' ) {
  255. return tooltip;
  256. } else {
  257. if ( keystroke ) {
  258. keystroke = getEnvKeystrokeText( keystroke );
  259. }
  260. if ( tooltip instanceof Function ) {
  261. return tooltip( label, keystroke );
  262. } else {
  263. return `${ label }${ keystroke ? ` (${ keystroke })` : '' }`;
  264. }
  265. }
  266. }
  267. return '';
  268. }
  269. }