8
0

inlineeditoruiview.js 4.9 KB

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