buttonview.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. /**
  2. * @license Copyright (c) 2003-2017, 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 Template from '../template';
  10. import IconView from '../icon/iconview';
  11. import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
  12. /**
  13. * The button view class.
  14. *
  15. * @extends module:ui/view~View
  16. */
  17. export default class ButtonView extends View {
  18. /**
  19. * @inheritDoc
  20. */
  21. constructor( locale ) {
  22. super( locale );
  23. /**
  24. * The label of the button view visible to the user.
  25. *
  26. * @observable
  27. * @member {String} #label
  28. */
  29. this.set( 'label' );
  30. /**
  31. * (Optional) The keystroke associated with the button, i.e. <kbd>CTRL+B</kbd>,
  32. * in the string format compatible with {@link module:utils/keyboard}.
  33. *
  34. * @observable
  35. * @member {Boolean} #keystroke
  36. */
  37. this.set( 'keystroke' );
  38. /**
  39. * (Optional) Tooltip of the button, i.e. displayed when hovering the button with the mouse cursor.
  40. *
  41. * * If defined as a `Boolean` (e.g. `true`), then combination of `label` and `keystroke` will be set as a tooltip.
  42. * * If defined as a `String`, tooltip will equal the exact text of that `String`.
  43. * * If defined as a `Function`, `label` and `keystroke` will be passed to that function, which is to return
  44. * a string with the tooltip text.
  45. *
  46. * const view = new ButtonView( locale );
  47. * view.tooltip = ( label, keystroke ) => `A tooltip for ${ label } and ${ keystroke }.`
  48. *
  49. * @observable
  50. * @default false
  51. * @member {Boolean|String|Function} #tooltip
  52. */
  53. this.set( 'tooltip' );
  54. /**
  55. * The HTML type of the button. Default `button`.
  56. *
  57. * @observable
  58. * @member {'button'|'submit'|'reset'|'menu'} #type
  59. */
  60. this.set( 'type', 'button' );
  61. /**
  62. * Controls whether the button view is "on", e.g. some feature which it represents
  63. * is currently enabled.
  64. *
  65. * @observable
  66. * @member {Boolean} #isOn
  67. */
  68. this.set( 'isOn', false );
  69. /**
  70. * Controls whether the button view is enabled (can be clicked).
  71. *
  72. * @observable
  73. * @member {Boolean} #isEnabled
  74. */
  75. this.set( 'isEnabled', true );
  76. /**
  77. * (Optional) Whether the label of the button is hidden (e.g. button with icon only).
  78. *
  79. * @observable
  80. * @member {Boolean} #withText
  81. */
  82. this.set( 'withText', false );
  83. /**
  84. * (Optional) Source of the icon. See {@link module:ui/icon/iconview~IconView#content}.
  85. *
  86. * @observable
  87. * @member {String} #icon
  88. */
  89. this.set( 'icon' );
  90. /**
  91. * Controls the `tabindex` attribute of the button.
  92. *
  93. * @observable
  94. * @default -1
  95. * @member {String} #tabindex
  96. */
  97. this.set( 'tabindex', -1 );
  98. /**
  99. * Tooltip of the button bound to the template.
  100. *
  101. * @see #tooltip
  102. * @see #_getTooltipString
  103. * @private
  104. * @observable
  105. * @member {Boolean} #_tooltipString
  106. */
  107. this.bind( '_tooltipString' ).to(
  108. this, 'tooltip',
  109. this, 'label',
  110. this, 'keystroke',
  111. this._getTooltipString.bind( this )
  112. );
  113. /**
  114. * Icon of the button view.
  115. *
  116. * @readonly
  117. * @member {module:ui/icon/iconview~IconView} #iconView
  118. */
  119. const bind = this.bindTemplate;
  120. this.template = new Template( {
  121. tag: 'button',
  122. attributes: {
  123. class: [
  124. 'ck-button',
  125. bind.if( '_tooltipString', 'ck-tooltip_s' ),
  126. bind.to( 'isEnabled', value => value ? 'ck-enabled' : 'ck-disabled' ),
  127. bind.to( 'isOn', value => value ? 'ck-on' : 'ck-off' ),
  128. bind.if( 'withText', 'ck-button_with-text' )
  129. ],
  130. type: bind.to( 'type', value => value ? value : 'button' ),
  131. 'data-ck-tooltip': [
  132. bind.to( '_tooltipString' )
  133. ],
  134. tabindex: bind.to( 'tabindex' )
  135. },
  136. children: [
  137. {
  138. tag: 'span',
  139. attributes: {
  140. class: [ 'ck-button__label' ]
  141. },
  142. children: [
  143. {
  144. text: bind.to( 'label' )
  145. }
  146. ]
  147. }
  148. ],
  149. on: {
  150. mousedown: bind.to( evt => {
  151. evt.preventDefault();
  152. } ),
  153. click: bind.to( evt => {
  154. // We can't make the button disabled using the disabled attribute, because it won't be focusable.
  155. // Though, shouldn't this condition be moved to the button controller?
  156. if ( this.isEnabled ) {
  157. this.fire( 'execute' );
  158. } else {
  159. // Prevent the default when button is disabled, to block e.g.
  160. // automatic form submitting. See ckeditor/ckeditor5-link#74.
  161. evt.preventDefault();
  162. }
  163. } )
  164. }
  165. } );
  166. /**
  167. * Fired when the button view is clicked. It won't be fired when the button is disabled.
  168. *
  169. * @event #execute
  170. */
  171. }
  172. /**
  173. * @inheritDoc
  174. */
  175. init() {
  176. let promise = Promise.resolve();
  177. if ( this.icon && !this.iconView ) {
  178. const iconView = this.iconView = new IconView();
  179. iconView.bind( 'content' ).to( this, 'icon' );
  180. this.element.insertBefore( iconView.element, this.element.firstChild );
  181. // Make sure the icon view will be destroyed along with button.
  182. promise = promise.then( () => this.addChildren( iconView ) );
  183. }
  184. return promise.then( () => super.init() );
  185. }
  186. /**
  187. * Focuses the button.
  188. */
  189. focus() {
  190. this.element.focus();
  191. }
  192. /**
  193. * Gets value for the `data-ck-tooltip` attribute from the combination of
  194. * {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.
  195. *
  196. * @private
  197. * @see #tooltip
  198. * @see #_tooltipString
  199. * @param {Boolean|String|Function} tooltip Button tooltip.
  200. * @param {String} label Button label.
  201. * @param {String} keystroke Button keystroke.
  202. * @returns {String}
  203. */
  204. _getTooltipString( tooltip, label, keystroke ) {
  205. if ( tooltip ) {
  206. if ( typeof tooltip == 'string' ) {
  207. return tooltip;
  208. } else {
  209. if ( keystroke ) {
  210. keystroke = getEnvKeystrokeText( keystroke );
  211. }
  212. if ( tooltip instanceof Function ) {
  213. return tooltip( label, keystroke );
  214. } else if ( tooltip === true ) {
  215. return `${ label }${ keystroke ? ` (${ keystroke })` : '' }`;
  216. }
  217. }
  218. }
  219. return false;
  220. }
  221. }