8
0

inlineeditoruiview.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  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 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. import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
  13. import ResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/resizeobserver';
  14. import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
  15. const toPx = toUnit( 'px' );
  16. /**
  17. * Inline editor UI view. Uses an nline editable and a floating toolbar.
  18. *
  19. * @extends module:ui/editorui/editoruiview~EditorUIView
  20. */
  21. export default class InlineEditorUIView extends EditorUIView {
  22. /**
  23. * Creates an instance of the inline editor UI view.
  24. *
  25. * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
  26. * @param {module:engine/view/view~View} editingView The editing view instance this view is related to.
  27. * @param {HTMLElement} [editableElement] The editable element. If not specified, it will be automatically created by
  28. * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
  29. * @param {Object} [options={}] Configuration options for the view instance.
  30. * @param {Boolean} [options.shouldToolbarGroupWhenFull] When set `true` enables automatic items grouping
  31. * in the main {@link module:editor-inline/inlineeditoruiview~InlineEditorUIView#toolbar toolbar}.
  32. * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
  33. */
  34. constructor( locale, editingView, editableElement, options = {} ) {
  35. super( locale );
  36. /**
  37. * A floating toolbar view instance.
  38. *
  39. * @readonly
  40. * @member {module:ui/toolbar/toolbarview~ToolbarView}
  41. */
  42. this.toolbar = new ToolbarView( locale, {
  43. shouldGroupWhenFull: options.shouldToolbarGroupWhenFull
  44. } );
  45. /**
  46. * The offset from the top edge of the web browser's viewport which makes the
  47. * UI become sticky. The default value is `0`, which means that the UI becomes
  48. * sticky when its upper edge touches the top of the page viewport.
  49. *
  50. * This attribute is useful when the web page has UI elements positioned to the top
  51. * either using `position: fixed` or `position: sticky`, which would cover the
  52. * UI or vice–versa (depending on the `z-index` hierarchy).
  53. *
  54. * @readonly
  55. * @observable
  56. * @member {Number} #viewportTopOffset
  57. */
  58. this.set( 'viewportTopOffset', 0 );
  59. this.toolbar.extendTemplate( {
  60. attributes: {
  61. class: [
  62. // https://github.com/ckeditor/ckeditor5-editor-inline/issues/11
  63. 'ck-toolbar_floating'
  64. ]
  65. }
  66. } );
  67. /**
  68. * A balloon panel view instance.
  69. *
  70. * @readonly
  71. * @member {module:ui/panel/balloon/balloonpanelview~BalloonPanelView}
  72. */
  73. this.panel = new BalloonPanelView( locale );
  74. this.panel.withArrow = false;
  75. /**
  76. * A set of positioning functions used by the {@link #panel} to float around
  77. * {@link #element editableElement}.
  78. *
  79. * The positioning functions are as follows:
  80. *
  81. * * West:
  82. *
  83. * [ Panel ]
  84. * +------------------+
  85. * | #editableElement |
  86. * +------------------+
  87. *
  88. * +------------------+
  89. * | #editableElement |
  90. * |[ Panel ] |
  91. * | |
  92. * +------------------+
  93. *
  94. * +------------------+
  95. * | #editableElement |
  96. * +------------------+
  97. * [ Panel ]
  98. *
  99. * * East:
  100. *
  101. * [ Panel ]
  102. * +------------------+
  103. * | #editableElement |
  104. * +------------------+
  105. *
  106. * +------------------+
  107. * | #editableElement |
  108. * | [ Panel ]|
  109. * | |
  110. * +------------------+
  111. *
  112. * +------------------+
  113. * | #editableElement |
  114. * +------------------+
  115. * [ Panel ]
  116. *
  117. * See: {@link module:utils/dom/position~Options#positions}.
  118. *
  119. * @readonly
  120. * @type {Array.<Function>}
  121. */
  122. this.panelPositions = this._getPanelPositions();
  123. this.panel.extendTemplate( {
  124. attributes: {
  125. class: 'ck-toolbar-container'
  126. }
  127. } );
  128. /**
  129. * Editable UI view.
  130. *
  131. * @readonly
  132. * @member {module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}
  133. */
  134. this.editable = new InlineEditableUIView( locale, editingView, editableElement );
  135. /**
  136. * An instance of the resize observer that helps dynamically determine the geometry of the toolbar
  137. * and manage items that do not fit into a single row.
  138. *
  139. * **Note:** Created in {@link #render}.
  140. *
  141. * @private
  142. * @member {module:utils/dom/resizeobserver~ResizeObserver}
  143. */
  144. this._resizeObserver = null;
  145. }
  146. /**
  147. * @inheritDoc
  148. */
  149. render() {
  150. super.render();
  151. this.body.add( this.panel );
  152. this.registerChild( this.editable );
  153. this.panel.content.add( this.toolbar );
  154. const options = this.toolbar.options;
  155. // Set toolbar's max-width on the initialization and update it on the editable resize,
  156. // if 'shouldToolbarGroupWhenFull' in config is set to 'true'.
  157. if ( options.shouldGroupWhenFull ) {
  158. const editableElement = this.editable.element;
  159. this._resizeObserver = new ResizeObserver( editableElement, () => {
  160. this.toolbar.maxWidth = toPx( new Rect( editableElement ).width );
  161. } );
  162. }
  163. }
  164. /**
  165. * @inheritDoc
  166. */
  167. destroy() {
  168. super.destroy();
  169. if ( this._resizeObserver ) {
  170. this._resizeObserver.destroy();
  171. }
  172. }
  173. /**
  174. * Determines the panel top position of the {@link #panel} in {@link #panelPositions}.
  175. *
  176. * @private
  177. * @param {module:utils/dom/rect~Rect} editableRect Rect of the {@link #element}.
  178. * @param {module:utils/dom/rect~Rect} panelRect Rect of the {@link #panel}.
  179. */
  180. _getPanelPositionTop( editableRect, panelRect ) {
  181. let top;
  182. if ( editableRect.top > panelRect.height + this.viewportTopOffset ) {
  183. top = editableRect.top - panelRect.height;
  184. } else if ( editableRect.bottom > panelRect.height + this.viewportTopOffset + 50 ) {
  185. top = this.viewportTopOffset;
  186. } else {
  187. top = editableRect.bottom;
  188. }
  189. return top;
  190. }
  191. /**
  192. * Returns the positions for {@link #panelPositions}.
  193. *
  194. * See: {@link module:utils/dom/position~Options#positions}.
  195. *
  196. * @private
  197. * @returns {Array.<Function>}
  198. */
  199. _getPanelPositions() {
  200. const positions = [
  201. ( editableRect, panelRect ) => {
  202. return {
  203. top: this._getPanelPositionTop( editableRect, panelRect ),
  204. left: editableRect.left,
  205. name: 'toolbar_west'
  206. };
  207. },
  208. ( editableRect, panelRect ) => {
  209. return {
  210. top: this._getPanelPositionTop( editableRect, panelRect ),
  211. left: editableRect.left + editableRect.width - panelRect.width,
  212. name: 'toolbar_east'
  213. };
  214. }
  215. ];
  216. if ( this.locale.uiLanguageDirection === 'ltr' ) {
  217. return positions;
  218. } else {
  219. return positions.reverse();
  220. }
  221. }
  222. }