inlineeditableuiview.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module ui/editableui/inline/inlineeditableuiview
  7. */
  8. import EditableUIView from '../../editableui/editableuiview';
  9. /**
  10. * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.
  11. *
  12. * @extends module:ui/editableui/editableuiview~EditableUIView
  13. */
  14. export default class InlineEditableUIView extends EditableUIView {
  15. /**
  16. * Creates an instance of the InlineEditableUIView class.
  17. *
  18. * @param {module:utils/locale~Locale} [locale] The locale instance.
  19. * @param {HTMLElement} [editableElement] The editable element. If not specified, the
  20. * {@link module:ui/editableui/editableuiview~EditableUIView}
  21. * will create it. Otherwise, the existing element will be used.
  22. */
  23. constructor( locale, editingView, editableElement ) {
  24. super( locale, editingView, editableElement );
  25. /**
  26. * The name of the editable UI view.
  27. *
  28. * @observable
  29. * @member {String} #name
  30. */
  31. this.set( 'name', null );
  32. this.extendTemplate( {
  33. attributes: {
  34. role: 'textbox',
  35. class: 'ck-editor__editable_inline'
  36. }
  37. } );
  38. }
  39. render() {
  40. super.render();
  41. const t = this.t;
  42. const updateAriaLabelAttribute = () => {
  43. this.editingView.change( writer => {
  44. const viewRoot = this.editingView.document.getRoot( this.name );
  45. if ( this.name ) {
  46. writer.setAttribute( 'aria-label', t( 'Rich Text Editor, %0', [ this.name ] ), viewRoot );
  47. } else {
  48. writer.removeAttribute( 'aria-label', viewRoot );
  49. }
  50. } );
  51. };
  52. this.on( 'change:name', updateAriaLabelAttribute );
  53. updateAriaLabelAttribute();
  54. }
  55. }