8
0

textalternativeformview.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module image/imagetextalternative/ui/textalternativeformview
  7. */
  8. import View from '@ckeditor/ckeditor5-ui/src/view';
  9. import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
  10. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  11. import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinputview';
  12. import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
  13. import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
  14. import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
  15. import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
  16. import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
  17. import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
  18. import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
  19. import '../../../theme/textalternativeform.css';
  20. /**
  21. * The TextAlternativeFormView class.
  22. *
  23. * @extends module:ui/view~View
  24. */
  25. export default class TextAlternativeFormView extends View {
  26. /**
  27. * @inheritDoc
  28. */
  29. constructor( locale ) {
  30. super( locale );
  31. const t = this.locale.t;
  32. /**
  33. * Tracks information about the DOM focus in the form.
  34. *
  35. * @readonly
  36. * @member {module:utils/focustracker~FocusTracker}
  37. */
  38. this.focusTracker = new FocusTracker();
  39. /**
  40. * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
  41. *
  42. * @readonly
  43. * @member {module:utils/keystrokehandler~KeystrokeHandler}
  44. */
  45. this.keystrokes = new KeystrokeHandler();
  46. /**
  47. * A textarea with a label.
  48. *
  49. * @member {module:ui/labeledinput/labeledinputview~LabeledInputView} #labeledTextarea
  50. */
  51. this.labeledInput = this._createLabeledInputView();
  52. /**
  53. * A button used to submit the form.
  54. *
  55. * @member {module:ui/button/buttonview~ButtonView} #saveButtonView
  56. */
  57. this.saveButtonView = this._createButton( t( 'Save' ), checkIcon, 'ck-button-save' );
  58. this.saveButtonView.type = 'submit';
  59. /**
  60. * A button used to cancel the form.
  61. *
  62. * @member {module:ui/button/buttonview~ButtonView} #cancelButtonView
  63. */
  64. this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'ck-button-cancel', 'cancel' );
  65. /**
  66. * A collection of views which can be focused in the form.
  67. *
  68. * @readonly
  69. * @protected
  70. * @member {module:ui/viewcollection~ViewCollection}
  71. */
  72. this._focusables = new ViewCollection();
  73. /**
  74. * Helps cycling over {@link #_focusables} in the form.
  75. *
  76. * @readonly
  77. * @protected
  78. * @member {module:ui/focuscycler~FocusCycler}
  79. */
  80. this._focusCycler = new FocusCycler( {
  81. focusables: this._focusables,
  82. focusTracker: this.focusTracker,
  83. keystrokeHandler: this.keystrokes,
  84. actions: {
  85. // Navigate form fields backwards using the Shift + Tab keystroke.
  86. focusPrevious: 'shift + tab',
  87. // Navigate form fields forwards using the Tab key.
  88. focusNext: 'tab'
  89. }
  90. } );
  91. this.setTemplate( {
  92. tag: 'form',
  93. attributes: {
  94. class: [
  95. 'ck',
  96. 'ck-text-alternative-form',
  97. ],
  98. // https://github.com/ckeditor/ckeditor5-image/issues/40
  99. tabindex: '-1'
  100. },
  101. children: [
  102. this.labeledInput,
  103. this.saveButtonView,
  104. this.cancelButtonView
  105. ]
  106. } );
  107. }
  108. /**
  109. * @inheritDoc
  110. */
  111. render() {
  112. super.render();
  113. this.keystrokes.listenTo( this.element );
  114. submitHandler( { view: this } );
  115. [ this.labeledInput, this.saveButtonView, this.cancelButtonView ]
  116. .forEach( v => {
  117. // Register the view as focusable.
  118. this._focusables.add( v );
  119. // Register the view in the focus tracker.
  120. this.focusTracker.add( v.element );
  121. } );
  122. }
  123. /**
  124. * Creates the button view.
  125. *
  126. * @private
  127. * @param {String} label The button label
  128. * @param {String} icon The button's icon.
  129. * @param {String} className The additional button CSS class name.
  130. * @param {String} [eventName] The event name that the ButtonView#execute event will be delegated to.
  131. * @returns {module:ui/button/buttonview~ButtonView} The button view instance.
  132. */
  133. _createButton( label, icon, className, eventName ) {
  134. const button = new ButtonView( this.locale );
  135. button.set( {
  136. label,
  137. icon,
  138. tooltip: true
  139. } );
  140. button.extendTemplate( {
  141. attributes: {
  142. class: className
  143. }
  144. } );
  145. if ( eventName ) {
  146. button.delegate( 'execute' ).to( this, eventName );
  147. }
  148. return button;
  149. }
  150. /**
  151. * Creates an input with a label.
  152. *
  153. * @private
  154. * @returns {module:ui/labeledinput/labeledinputview~LabeledInputView}
  155. */
  156. _createLabeledInputView() {
  157. const t = this.locale.t;
  158. const labeledInput = new LabeledInputView( this.locale, InputTextView );
  159. labeledInput.label = t( 'Text alternative' );
  160. labeledInput.inputView.placeholder = t( 'Text alternative' );
  161. return labeledInput;
  162. }
  163. }