8
0

buttonview.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  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( 'icon' );
  43. this.set( 'isEnabled', true );
  44. this.set( 'isOn', false );
  45. this.set( 'isVisible', true );
  46. this.set( 'keystroke' );
  47. this.set( 'label' );
  48. this.set( 'tabindex', -1 );
  49. this.set( 'tooltip' );
  50. this.set( 'tooltipPosition', 's' );
  51. this.set( 'type', 'button' );
  52. this.set( 'withText', false );
  53. /**
  54. * Collection of the child views inside of the button {@link #element}.
  55. *
  56. * @readonly
  57. * @member {module:ui/viewcollection~ViewCollection}
  58. */
  59. this.children = this.createCollection();
  60. /**
  61. * Tooltip of the button view. It is configurable using the {@link #tooltip tooltip attribute}.
  62. *
  63. * @readonly
  64. * @member {module:ui/tooltip/tooltipview~TooltipView} #tooltipView
  65. */
  66. this.tooltipView = this._createTooltipView();
  67. /**
  68. * Label of the button view. It is configurable using the {@link #label label attribute}.
  69. *
  70. * @readonly
  71. * @member {module:ui/view~View} #labelView
  72. */
  73. this.labelView = this._createLabelView( ariaLabelUid );
  74. /**
  75. * The icon view of the button. Will be added to {@link #children} when the
  76. * {@link #icon icon attribute} is defined.
  77. *
  78. * @readonly
  79. * @member {module:ui/icon/iconview~IconView} #iconView
  80. */
  81. this.iconView = new IconView();
  82. this.iconView.extendTemplate( {
  83. attributes: {
  84. class: 'ck-button__icon'
  85. }
  86. } );
  87. /**
  88. * Tooltip of the button bound to the template.
  89. *
  90. * @see #tooltip
  91. * @see #_getTooltipString
  92. * @private
  93. * @observable
  94. * @member {Boolean} #_tooltipString
  95. */
  96. this.bind( '_tooltipString' ).to(
  97. this, 'tooltip',
  98. this, 'label',
  99. this, 'keystroke',
  100. this._getTooltipString.bind( this )
  101. );
  102. this.setTemplate( {
  103. tag: 'button',
  104. attributes: {
  105. class: [
  106. 'ck',
  107. 'ck-button',
  108. bind.to( 'isEnabled', value => value ? 'ck-enabled' : 'ck-disabled' ),
  109. bind.if( 'isVisible', 'ck-hidden', value => !value ),
  110. bind.to( 'isOn', value => value ? 'ck-on' : 'ck-off' ),
  111. bind.if( 'withText', 'ck-button_with-text' )
  112. ],
  113. type: bind.to( 'type', value => value ? value : 'button' ),
  114. tabindex: bind.to( 'tabindex' ),
  115. 'aria-labelledby': `ck-editor__aria-label_${ ariaLabelUid }`,
  116. 'aria-disabled': bind.if( 'isEnabled', true, value => !value ),
  117. 'aria-pressed': bind.if( 'isOn', true )
  118. },
  119. children: this.children,
  120. on: {
  121. mousedown: bind.to( evt => {
  122. evt.preventDefault();
  123. } ),
  124. click: bind.to( evt => {
  125. // We can't make the button disabled using the disabled attribute, because it won't be focusable.
  126. // Though, shouldn't this condition be moved to the button controller?
  127. if ( this.isEnabled ) {
  128. this.fire( 'execute' );
  129. } else {
  130. // Prevent the default when button is disabled, to block e.g.
  131. // automatic form submitting. See ckeditor/ckeditor5-link#74.
  132. evt.preventDefault();
  133. }
  134. } )
  135. }
  136. } );
  137. }
  138. /**
  139. * @inheritDoc
  140. */
  141. render() {
  142. super.render();
  143. if ( this.icon ) {
  144. this.iconView.bind( 'content' ).to( this, 'icon' );
  145. this.children.add( this.iconView );
  146. }
  147. this.children.add( this.tooltipView );
  148. this.children.add( this.labelView );
  149. }
  150. /**
  151. * Focuses the {@link #element} of the button.
  152. */
  153. focus() {
  154. this.element.focus();
  155. }
  156. /**
  157. * Creates a {@link module:ui/tooltip/tooltipview~TooltipView} instance and binds it with button
  158. * attributes.
  159. *
  160. * @private
  161. * @returns {module:ui/tooltip/tooltipview~TooltipView}
  162. */
  163. _createTooltipView() {
  164. const tooltipView = new TooltipView();
  165. tooltipView.bind( 'text' ).to( this, '_tooltipString' );
  166. tooltipView.bind( 'position' ).to( this, 'tooltipPosition' );
  167. return tooltipView;
  168. }
  169. /**
  170. * Creates a label view instance and binds it with button attributes.
  171. *
  172. * @private
  173. * @param {String} ariaLabelUid The aria label UID.
  174. * @returns {module:ui/view~View}
  175. */
  176. _createLabelView( ariaLabelUid ) {
  177. const labelView = new View();
  178. labelView.setTemplate( {
  179. tag: 'span',
  180. attributes: {
  181. class: [
  182. 'ck',
  183. 'ck-button__label'
  184. ],
  185. id: `ck-editor__aria-label_${ ariaLabelUid }`,
  186. },
  187. children: [
  188. {
  189. text: this.bindTemplate.to( 'label' )
  190. }
  191. ]
  192. } );
  193. return labelView;
  194. }
  195. /**
  196. * Gets the text for the {@link #tooltipView} from the combination of
  197. * {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.
  198. *
  199. * @private
  200. * @see #tooltip
  201. * @see #_tooltipString
  202. * @param {Boolean|String|Function} tooltip Button tooltip.
  203. * @param {String} label Button label.
  204. * @param {String} keystroke Button keystroke.
  205. * @returns {String}
  206. */
  207. _getTooltipString( tooltip, label, keystroke ) {
  208. if ( tooltip ) {
  209. if ( typeof tooltip == 'string' ) {
  210. return tooltip;
  211. } else {
  212. if ( keystroke ) {
  213. keystroke = getEnvKeystrokeText( keystroke );
  214. }
  215. if ( tooltip instanceof Function ) {
  216. return tooltip( label, keystroke );
  217. } else {
  218. return `${ label }${ keystroke ? ` (${ keystroke })` : '' }`;
  219. }
  220. }
  221. }
  222. return '';
  223. }
  224. }