buttonview.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  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 { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
  12. import '../../theme/components/button/button.css';
  13. /**
  14. * The button view class.
  15. *
  16. * const view = new ButtonView();
  17. *
  18. * view.set( {
  19. * label: 'A button',
  20. * keystroke: 'Ctrl+B',
  21. * tooltip: true,
  22. * withText: true
  23. * } );
  24. *
  25. * view.render();
  26. *
  27. * document.body.append( view.element );
  28. *
  29. * @extends module:ui/view~View
  30. * @implements module:ui/button/button~Button
  31. */
  32. export default class ButtonView extends View {
  33. /**
  34. * @inheritDoc
  35. */
  36. constructor( locale ) {
  37. super( locale );
  38. const bind = this.bindTemplate;
  39. // Implement the Button interface.
  40. this.set( 'icon' );
  41. this.set( 'isEnabled', true );
  42. this.set( 'isOn', false );
  43. this.set( 'isVisible', true );
  44. this.set( 'keystroke' );
  45. this.set( 'label' );
  46. this.set( 'tabindex', -1 );
  47. this.set( 'tooltip' );
  48. this.set( 'tooltipPosition', 's' );
  49. this.set( 'type', 'button' );
  50. this.set( 'withText', false );
  51. /**
  52. * Collection of the child views inside of the button {@link #element}.
  53. *
  54. * @readonly
  55. * @member {module:ui/viewcollection~ViewCollection}
  56. */
  57. this.children = this.createCollection();
  58. /**
  59. * Tooltip of the button view. It is configurable using the {@link #tooltip tooltip attribute}.
  60. *
  61. * @readonly
  62. * @member {module:ui/tooltip/tooltipview~TooltipView} #tooltipView
  63. */
  64. this.tooltipView = this._createTooltipView();
  65. /**
  66. * Label of the button view. It is configurable using the {@link #label label attribute}.
  67. *
  68. * @readonly
  69. * @member {module:ui/view~View} #labelView
  70. */
  71. this.labelView = this._createLabelView();
  72. /**
  73. * The icon view of the button. Will be added to {@link #children} when the
  74. * {@link #icon icon attribute} is defined.
  75. *
  76. * @readonly
  77. * @member {module:ui/icon/iconview~IconView} #iconView
  78. */
  79. this.iconView = new IconView();
  80. this.iconView.extendTemplate( {
  81. attributes: {
  82. class: 'ck-button__icon'
  83. }
  84. } );
  85. /**
  86. * Tooltip of the button bound to the template.
  87. *
  88. * @see #tooltip
  89. * @see #_getTooltipString
  90. * @private
  91. * @observable
  92. * @member {Boolean} #_tooltipString
  93. */
  94. this.bind( '_tooltipString' ).to(
  95. this, 'tooltip',
  96. this, 'label',
  97. this, 'keystroke',
  98. this._getTooltipString.bind( this )
  99. );
  100. this.setTemplate( {
  101. tag: 'button',
  102. attributes: {
  103. class: [
  104. 'ck',
  105. 'ck-button',
  106. bind.if( 'isEnabled', 'ck-disabled', value => !value ),
  107. bind.if( 'isVisible', 'ck-hidden', value => !value ),
  108. bind.to( 'isOn', value => value ? 'ck-on' : 'ck-off' ),
  109. bind.if( 'withText', 'ck-button_with-text' )
  110. ],
  111. type: bind.to( 'type', value => value ? value : 'button' ),
  112. tabindex: bind.to( 'tabindex' )
  113. },
  114. children: this.children,
  115. on: {
  116. mousedown: bind.to( evt => {
  117. evt.preventDefault();
  118. } ),
  119. click: bind.to( evt => {
  120. // We can't make the button disabled using the disabled attribute, because it won't be focusable.
  121. // Though, shouldn't this condition be moved to the button controller?
  122. if ( this.isEnabled ) {
  123. this.fire( 'execute' );
  124. } else {
  125. // Prevent the default when button is disabled, to block e.g.
  126. // automatic form submitting. See ckeditor/ckeditor5-link#74.
  127. evt.preventDefault();
  128. }
  129. } )
  130. }
  131. } );
  132. }
  133. /**
  134. * @inheritDoc
  135. */
  136. render() {
  137. super.render();
  138. if ( this.icon ) {
  139. this.iconView.bind( 'content' ).to( this, 'icon' );
  140. this.children.add( this.iconView );
  141. }
  142. this.children.add( this.tooltipView );
  143. this.children.add( this.labelView );
  144. }
  145. /**
  146. * Focuses the {@link #element} of the button.
  147. */
  148. focus() {
  149. this.element.focus();
  150. }
  151. /**
  152. * Creates a {@link module:ui/tooltip/tooltipview~TooltipView} instance and binds it with button
  153. * attributes.
  154. *
  155. * @private
  156. * @returns {module:ui/tooltip/tooltipview~TooltipView}
  157. */
  158. _createTooltipView() {
  159. const tooltipView = new TooltipView();
  160. tooltipView.bind( 'text' ).to( this, '_tooltipString' );
  161. tooltipView.bind( 'position' ).to( this, 'tooltipPosition' );
  162. return tooltipView;
  163. }
  164. /**
  165. * Creates a label view instance and binds it with button attributes.
  166. *
  167. * @private
  168. * @returns {module:ui/view~View}
  169. */
  170. _createLabelView() {
  171. const labelView = new View();
  172. labelView.setTemplate( {
  173. tag: 'span',
  174. attributes: {
  175. class: [
  176. 'ck',
  177. 'ck-button__label'
  178. ]
  179. },
  180. children: [
  181. {
  182. text: this.bindTemplate.to( 'label' )
  183. }
  184. ]
  185. } );
  186. return labelView;
  187. }
  188. /**
  189. * Gets the text for the {@link #tooltipView} from the combination of
  190. * {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.
  191. *
  192. * @private
  193. * @see #tooltip
  194. * @see #_tooltipString
  195. * @param {Boolean|String|Function} tooltip Button tooltip.
  196. * @param {String} label Button label.
  197. * @param {String} keystroke Button keystroke.
  198. * @returns {String}
  199. */
  200. _getTooltipString( tooltip, label, keystroke ) {
  201. if ( tooltip ) {
  202. if ( typeof tooltip == 'string' ) {
  203. return tooltip;
  204. } else {
  205. if ( keystroke ) {
  206. keystroke = getEnvKeystrokeText( keystroke );
  207. }
  208. if ( tooltip instanceof Function ) {
  209. return tooltip( label, keystroke );
  210. } else {
  211. return `${ label }${ keystroke ? ` (${ keystroke })` : '' }`;
  212. }
  213. }
  214. }
  215. return '';
  216. }
  217. }