buttonview.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. /**
  2. * @license Copyright (c) 2003-2016, 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 '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) Title of the button displayed in the tooltip, i.e. when
  40. * hovering the button with the mouse cursor. When `title` property is not defined
  41. * then combination of `label` and `keystroke` will be set as title.
  42. *
  43. * @observable
  44. * @member {Boolean} #title
  45. */
  46. this.set( 'title' );
  47. /**
  48. * The HTML type of the button. Default `button`.
  49. *
  50. * @observable
  51. * @member {'button'|'submit'|'reset'|'menu'} #type
  52. */
  53. this.set( 'type', 'button' );
  54. /**
  55. * Controls whether the button view is "on", e.g. some feature which it represents
  56. * is currently enabled.
  57. *
  58. * @observable
  59. * @member {Boolean} #isOn
  60. */
  61. this.set( 'isOn', false );
  62. /**
  63. * Controls whether the button view is enabled (can be clicked).
  64. *
  65. * @observable
  66. * @member {Boolean} #isEnabled
  67. */
  68. this.set( 'isEnabled', true );
  69. /**
  70. * (Optional) Whether the label of the button is hidden (e.g. button with icon only).
  71. *
  72. * @observable
  73. * @member {Boolean} #withText
  74. */
  75. this.set( 'withText', false );
  76. /**
  77. * (Optional) Source of the icon. See {@link module:ui/icon/iconview~IconView#content}.
  78. *
  79. * @observable
  80. * @member {String} #icon
  81. */
  82. this.set( 'icon' );
  83. /**
  84. * Title of the button bound to the template.
  85. *
  86. * @see #title
  87. * @private
  88. * @observable
  89. * @member {Boolean} #_tooltip
  90. */
  91. this.bind( '_tooltip' ).to( this, 'title', this, 'label', this, 'keystroke', this._getTooltip.bind( this ) );
  92. /**
  93. * Icon of the button view.
  94. *
  95. * @readonly
  96. * @member {module:ui/icon/iconview~IconView} #iconView
  97. */
  98. const bind = this.bindTemplate;
  99. this.template = new Template( {
  100. tag: 'button',
  101. attributes: {
  102. class: [
  103. 'ck-button',
  104. 'ck-tooltip_s',
  105. bind.to( 'isEnabled', value => value ? 'ck-enabled' : 'ck-disabled' ),
  106. bind.to( 'isOn', value => value ? 'ck-on' : 'ck-off' ),
  107. bind.if( 'withText', 'ck-button_with-text' )
  108. ],
  109. type: bind.to( 'type', value => value ? value : 'button' ),
  110. 'data-ck-tooltip': [
  111. bind.to( '_tooltip' )
  112. ]
  113. },
  114. children: [
  115. {
  116. tag: 'span',
  117. attributes: {
  118. class: [ 'ck-button__label' ]
  119. },
  120. children: [
  121. {
  122. text: bind.to( 'label' )
  123. }
  124. ]
  125. }
  126. ],
  127. on: {
  128. mousedown: bind.to( evt => {
  129. evt.preventDefault();
  130. } ),
  131. click: bind.to( evt => {
  132. // We can't make the button disabled using the disabled attribute, because it won't be focusable.
  133. // Though, shouldn't this condition be moved to the button controller?
  134. if ( this.isEnabled ) {
  135. this.fire( 'execute' );
  136. } else {
  137. // Prevent the default when button is disabled, to block e.g.
  138. // automatic form submitting. See ckeditor/ckeditor5-link#74.
  139. evt.preventDefault();
  140. }
  141. } )
  142. }
  143. } );
  144. /**
  145. * Fired when the button view is clicked. It won't be fired when the button is disabled.
  146. *
  147. * @event #execute
  148. */
  149. }
  150. /**
  151. * @inheritDoc
  152. */
  153. init() {
  154. let promise = Promise.resolve();
  155. if ( this.icon && !this.iconView ) {
  156. const iconView = this.iconView = new IconView();
  157. iconView.bind( 'content' ).to( this, 'icon' );
  158. this.element.insertBefore( iconView.element, this.element.firstChild );
  159. // Make sure the icon view will be destroyed along with button.
  160. promise = promise.then( () => this.addChildren( iconView ) );
  161. }
  162. return promise.then( () => super.init() );
  163. }
  164. /**
  165. * Gets value for the `data-ck-tooltip` attribute from title, label and keystroke properties.
  166. *
  167. * @private
  168. * @param {String} title Button title.
  169. * @param {String} label Button label.
  170. * @param {String} keystroke Button keystroke.
  171. * @returns {String}
  172. */
  173. _getTooltip( title, label, keystroke ) {
  174. if ( title ) {
  175. return title;
  176. }
  177. if ( keystroke ) {
  178. label += ` (${ getEnvKeystrokeText( keystroke ) })`;
  179. }
  180. return label;
  181. }
  182. }