inlineeditoruiview.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module editor-inline/inlineeditoruiview
  7. */
  8. import EditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/editoruiview';
  9. import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
  10. import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
  11. import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
  12. /**
  13. * Inline editor UI view. Uses an nline editable and a floating toolbar.
  14. *
  15. * @extends module:ui/editorui/editoruiview~EditorUIView
  16. */
  17. export default class InlineEditorUIView extends EditorUIView {
  18. /**
  19. * Creates an instance of the inline editor UI view.
  20. *
  21. * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
  22. * @param {HTMLElement} [editableElement] The editable element. If not specified, it will be automatically created by
  23. * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
  24. */
  25. constructor( locale, editableElement ) {
  26. super( locale );
  27. /**
  28. * A floating toolbar view instance.
  29. *
  30. * @readonly
  31. * @member {module:ui/toolbar/toolbarview~ToolbarView}
  32. */
  33. this.toolbar = new ToolbarView( locale );
  34. /**
  35. * The offset from the top edge of the web browser's viewport which makes the
  36. * UI become sticky. The default value is `0`, which means that the UI becomes
  37. * sticky when its upper edge touches the top of the page viewport.
  38. *
  39. * This attribute is useful when the web page has UI elements positioned to the top
  40. * either using `position: fixed` or `position: sticky`, which would cover the
  41. * UI or vice–versa (depending on the `z-index` hierarchy).
  42. *
  43. * @readonly
  44. * @observable
  45. * @member {Number} #viewportTopOffset
  46. */
  47. this.set( 'viewportTopOffset', 0 );
  48. this.toolbar.extendTemplate( {
  49. attributes: {
  50. class: [
  51. // https://github.com/ckeditor/ckeditor5-editor-inline/issues/11
  52. 'ck-toolbar_floating'
  53. ]
  54. }
  55. } );
  56. /**
  57. * A balloon panel view instance.
  58. *
  59. * @readonly
  60. * @member {module:ui/panel/balloon/balloonpanelview~BalloonPanelView}
  61. */
  62. this.panel = new BalloonPanelView( locale );
  63. this.panel.withArrow = false;
  64. /**
  65. * A set of positioning functions used by the {@link #panel} to float around
  66. * {@link #editableElement}.
  67. *
  68. * The positioning functions are as follows:
  69. *
  70. * * West:
  71. *
  72. * [ Panel ]
  73. * +------------------+
  74. * | #editableElement |
  75. * +------------------+
  76. *
  77. * +------------------+
  78. * | #editableElement |
  79. * |[ Panel ] |
  80. * | |
  81. * +------------------+
  82. *
  83. * +------------------+
  84. * | #editableElement |
  85. * +------------------+
  86. * [ Panel ]
  87. *
  88. * * East:
  89. *
  90. * [ Panel ]
  91. * +------------------+
  92. * | #editableElement |
  93. * +------------------+
  94. *
  95. * +------------------+
  96. * | #editableElement |
  97. * | [ Panel ]|
  98. * | |
  99. * +------------------+
  100. *
  101. * +------------------+
  102. * | #editableElement |
  103. * +------------------+
  104. * [ Panel ]
  105. *
  106. * @readonly
  107. * @type {module:utils/dom/position~Options#positions}
  108. */
  109. this.panelPositions = this._getPanelPositions();
  110. this.panel.extendTemplate( {
  111. attributes: {
  112. class: 'ck-toolbar-container'
  113. }
  114. } );
  115. /**
  116. * Editable UI view.
  117. *
  118. * @readonly
  119. * @member {module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}
  120. */
  121. this.editable = new InlineEditableUIView( locale, editableElement );
  122. }
  123. /**
  124. * @inheritDoc
  125. */
  126. render() {
  127. super.render();
  128. this.body.add( this.panel );
  129. this.registerChild( this.editable );
  130. this.panel.content.add( this.toolbar );
  131. }
  132. /**
  133. * @inheritDoc
  134. */
  135. get editableElement() {
  136. return this.editable.element;
  137. }
  138. /**
  139. * Determines the panel top position of the {@link #panel} in {@link #panelPositions}.
  140. *
  141. * @private
  142. * @param {module:utils/dom/rect~Rect} editableRect Rect of the {@link #editableElement}.
  143. * @param {module:utils/dom/rect~Rect} panelRect Rect of the {@link #panel}.
  144. */
  145. _getPanelPositionTop( editableRect, panelRect ) {
  146. let top;
  147. if ( editableRect.top > panelRect.height + this.viewportTopOffset ) {
  148. top = editableRect.top - panelRect.height;
  149. } else if ( editableRect.bottom > panelRect.height + this.viewportTopOffset + 50 ) {
  150. top = this.viewportTopOffset;
  151. } else {
  152. top = editableRect.bottom;
  153. }
  154. return top;
  155. }
  156. /**
  157. * Returns the positions for {@link #panelPositions}.
  158. *
  159. * @private
  160. * @returns {module:utils/dom/position~Options#positions}
  161. */
  162. _getPanelPositions() {
  163. return [
  164. ( editableRect, panelRect ) => {
  165. return {
  166. top: this._getPanelPositionTop( editableRect, panelRect ),
  167. left: editableRect.left,
  168. name: 'toolbar_west'
  169. };
  170. },
  171. ( editableRect, panelRect ) => {
  172. return {
  173. top: this._getPanelPositionTop( editableRect, panelRect ),
  174. left: editableRect.left + editableRect.width - panelRect.width,
  175. name: 'toolbar_east'
  176. };
  177. }
  178. ];
  179. }
  180. }