boxededitoruiview.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module ui/editorui/boxed/boxededitoruiview
  7. */
  8. import EditorUIView from '../../editorui/editoruiview';
  9. import uid from '@ckeditor/ckeditor5-utils/src/uid';
  10. import Template from '../../template';
  11. /**
  12. * The boxed editor UI view class. This class represents an editor interface
  13. * consisting of a toolbar and an editable area, enclosed within a box.
  14. *
  15. * @extends module:ui/editorui/editoruiview~EditorUIView
  16. */
  17. export default class BoxedEditorUIView extends EditorUIView {
  18. /**
  19. * Creates an instance of the boxed editor UI view class.
  20. *
  21. * @param {module:utils/locale~Locale} locale The locale instance..
  22. */
  23. constructor( locale ) {
  24. super( locale );
  25. const t = this.t;
  26. const ariaLabelUid = uid();
  27. /**
  28. * The UI's width.
  29. *
  30. * @observable
  31. * @member {Number} #width
  32. */
  33. this.set( 'width', null );
  34. /**
  35. * The UI's height.
  36. *
  37. * @observable
  38. * @member {Number} #height
  39. */
  40. this.set( 'height', null );
  41. /**
  42. * Collection of the child views located in the top (`.ck-editor__top`)
  43. * area of the UI.
  44. *
  45. * @readonly
  46. * @member {module:ui/viewcollection~ViewCollection}
  47. */
  48. this.top = this.createCollection();
  49. /**
  50. * Collection of the child views located in the main (`.ck-editor__main`)
  51. * area of the UI.
  52. *
  53. * @readonly
  54. * @member {module:ui/viewcollection~ViewCollection}
  55. */
  56. this.main = this.createCollection();
  57. this.template = new Template( {
  58. tag: 'div',
  59. attributes: {
  60. class: [
  61. 'ck-reset',
  62. 'ck-editor',
  63. 'ck-rounded-corners'
  64. ],
  65. role: 'application',
  66. dir: 'ltr',
  67. lang: locale.lang,
  68. 'aria-labelledby': `cke-editor__aria-label_${ ariaLabelUid }`
  69. },
  70. children: [
  71. {
  72. tag: 'span',
  73. attributes: {
  74. id: `cke-editor__aria-label_${ ariaLabelUid }`,
  75. class: 'cke-voice-label'
  76. },
  77. children: [
  78. // TODO: Editor name?
  79. t( 'Rich Text Editor' )
  80. ]
  81. },
  82. {
  83. tag: 'div',
  84. attributes: {
  85. class: 'ck-editor__top ck-reset_all',
  86. role: 'presentation'
  87. },
  88. children: this.top
  89. },
  90. {
  91. tag: 'div',
  92. attributes: {
  93. class: 'ck-editor__main',
  94. role: 'presentation'
  95. },
  96. children: this.main
  97. }
  98. ]
  99. } );
  100. }
  101. }