textalternativeformview.js 5.0 KB

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