inlineeditableuiview.js 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. /**
  2. * @license Copyright (c) 2003-2016, 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. import Template from '../../template';
  10. /**
  11. * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.
  12. *
  13. * @extends module:ui/editableui/editableuiview~EditableUIView
  14. */
  15. export default class InlineEditableUIView extends EditableUIView {
  16. /**
  17. * Creates an instance of the InlineEditableUIView class.
  18. *
  19. * @param {module:utils/locale~Locale} [locale] The locale instance.
  20. * @param {HTMLElement} [editableElement] The editable element. If not specified, the
  21. * {@link module:ui/editableui/editableuiview~EditableUIView}
  22. * should create it. Otherwise, the existing element should be used.
  23. */
  24. constructor( locale, editableElement ) {
  25. super( locale, editableElement );
  26. const bind = this.bindTemplate;
  27. const t = this.t;
  28. /**
  29. * The name of the editable UI view.
  30. *
  31. * @observable
  32. * @member {String} #name
  33. */
  34. this.set( 'name', null );
  35. const getLabel = ( value ) => {
  36. return t( 'Rich Text Editor, %0', [ value ] );
  37. };
  38. Template.extend( this.template, {
  39. attributes: {
  40. role: 'textbox',
  41. 'aria-label': bind.to( 'name', getLabel ),
  42. title: bind.to( 'name', getLabel ),
  43. class: 'ck-editor__editable_inline'
  44. }
  45. } );
  46. }
  47. }