ckeditor5-editor-classic-floating 40.1.0

package/src/ui/ClassicFloatingEditorUI.js

@@ -0,0 +1,151 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { EditorUI, normalizeToolbarConfig } from 'ckeditor5/src/ui';
+import { enablePlaceholder } from 'ckeditor5/src/engine';
+import { ElementReplacer, Rect } from 'ckeditor5/src/utils';
+/**
+ * The classic editor UI class.
+ */
+export default class ClassicFloatingEditorUI extends EditorUI {
+    /**
+     * Creates an instance of the classic editor UI class.
+     *
+     * @param editor The editor instance.
+     * @param view The view of the UI.
+     */
+    constructor(editor, view) {
+        super(editor);
+        this.view = view;
+        this._toolbarConfig = normalizeToolbarConfig(editor.config.get('toolbar'));
+        this._elementReplacer = new ElementReplacer();
+        this.listenTo(editor.editing.view, 'scrollToTheSelection', this._handleScrollToTheSelectionWithStickyPanel.bind(this));
+    }
+    /**
+     * @inheritDoc
+     */
+    get element() {
+        return this.view.element;
+    }
+    /**
+     * Initializes the UI.
+     *
+     * @param replacementElement The DOM element that will be the source for the created editor.
+     */
+    init(replacementElement) {
+        const editor = this.editor;
+        const view = this.view;
+        const editingView = editor.editing.view;
+        const editable = view.editable;
+        const editingRoot = editingView.document.getRoot();
+        // The editable UI and editing root should share the same name. Then name is used
+        // to recognize the particular editable, for instance in ARIA attributes.
+        editable.name = editingRoot.rootName;
+        view.render();
+        // The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
+        // But it can be available earlier if a DOM element has been passed to BalloonEditor.create().
+        const editableElement = editable.element;
+        // Register the editable UI view in the editor. A single editor instance can aggregate multiple
+        // editable areas (roots) but the classic editor has only one.
+        this.setEditableElement(editable.name, editableElement);
+        // Let the editable UI element respond to the changes in the global editor focus
+        // tracker. It has been added to the same tracker a few lines above but, in reality, there are
+        // many focusable areas in the editor, like balloons, toolbars or dropdowns and as long
+        // as they have focus, the editable should act like it is focused too (although technically
+        // it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.
+        // Doing otherwise will result in editable focus styles disappearing, once e.g. the
+        // toolbar gets focused.
+        view.editable.bind('isFocused').to(this.focusTracker);
+        // Bind the editable UI element to the editing view, making it an end– and entry–point
+        // of the editor's engine. This is where the engine meets the UI.
+        editingView.attachDomRoot(editableElement);
+        // If an element containing the initial data of the editor was provided, replace it with
+        // an editor instance's UI in DOM until the editor is destroyed. For instance, a <textarea>
+        // can be such element.
+        if (replacementElement) {
+            this._elementReplacer.replace(replacementElement, this.element);
+        }
+        this._initPlaceholder();
+        this._initToolbar();
+        this.fire('ready');
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        const view = this.view;
+        const editingView = this.editor.editing.view;
+        this._elementReplacer.restore();
+        editingView.detachDomRoot(view.editable.name);
+        view.destroy();
+    }
+    /**
+     * Initializes the editor toolbar.
+     */
+    _initToolbar() {
+        const view = this.view;
+        // Set–up the sticky panel with toolbar.
+        view.stickyPanel.bind('isActive').to(this.focusTracker, 'isFocused');
+        view.stickyPanel.limiterElement = view.element;
+        view.stickyPanel.bind('viewportTopOffset').to(this, 'viewportOffset', ({ top }) => top || 0);
+        view.toolbar.fillFromConfig(this._toolbarConfig, this.componentFactory);
+        // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
+        this.addToolbar(view.toolbar);
+    }
+    /**
+     * Enable the placeholder text on the editing root.
+     */
+    _initPlaceholder() {
+        const editor = this.editor;
+        const editingView = editor.editing.view;
+        const editingRoot = editingView.document.getRoot();
+        const sourceElement = editor.sourceElement;
+        let placeholderText;
+        const placeholder = editor.config.get('placeholder');
+        if (placeholder) {
+            placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[this.view.editable.name];
+        }
+        if (!placeholderText && sourceElement && sourceElement.tagName.toLowerCase() === 'textarea') {
+            placeholderText = sourceElement.getAttribute('placeholder');
+        }
+        if (placeholderText) {
+            editingRoot.placeholder = placeholderText;
+        }
+        enablePlaceholder({
+            view: editingView,
+            element: editingRoot,
+            isDirectHost: false,
+            keepOnFocus: true
+        });
+    }
+    /**
+     * Provides an integration between the sticky toolbar and {@link module:utils/dom/scroll~scrollViewportToShowTarget}.
+     * It allows the UI-agnostic engine method to consider the geometry of the
+     * {@link module:editor-classic/classicfloatingeditoruiview~FloatingEditorUIView#stickyPanel} that pins to the
+     * edge of the viewport and can obscure the user caret after scrolling the window.
+     *
+     * @param evt The `scrollToTheSelection` event info.
+     * @param data The payload carried by the `scrollToTheSelection` event.
+     * @param originalArgs The original arguments passed to `scrollViewportToShowTarget()` method (see implementation to learn more).
+     */
+    _handleScrollToTheSelectionWithStickyPanel(evt, data, originalArgs) {
+        const stickyPanel = this.view.stickyPanel;
+        if (stickyPanel.isSticky) {
+            const stickyPanelHeight = new Rect(stickyPanel.element).height;
+            data.viewportOffset.top += stickyPanelHeight;
+        }
+        else {
+            const scrollViewportOnPanelGettingSticky = () => {
+                this.editor.editing.view.scrollToTheSelection(originalArgs);
+            };
+            this.listenTo(stickyPanel, 'change:isSticky', scrollViewportOnPanelGettingSticky);
+            // This works as a post-scroll-fixer because it's impossible predict whether the panel will be sticky after scrolling or not.
+            // Listen for a short period of time only and if the toolbar does not become sticky very soon, cancel the listener.
+            setTimeout(() => {
+                this.stopListening(stickyPanel, 'change:isSticky', scrollViewportOnPanelGettingSticky);
+            }, 20);
+        }
+    }
+}

package/src/ui/ClassicFloatingEditorUIView.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module editor-classic/classicfloatingeditoruiview
+ */
+import StickyPanelView from './panel/StickyPanelView';
+import { BoxedEditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
+import type { Locale } from 'ckeditor5/src/utils';
+import type { View } from 'ckeditor5/src/engine';
+import '../../theme/classicfloatingeditor.css';
+/**
+ * Classic editor UI view. Uses an inline editable and a sticky toolbar, all
+ * enclosed in a boxed UI view.
+ */
+export default class ClassicFloatingEditorUIView extends BoxedEditorUIView {
+    /**
+     * Sticky panel view instance. This is a parent view of a {@link #toolbar}
+     * that makes toolbar sticky.
+     */
+    readonly stickyPanel: StickyPanelView;
+    /**
+     * Toolbar view instance.
+     */
+    readonly toolbar: ToolbarView;
+    /**
+     * Editable UI view.
+     */
+    readonly editable: InlineEditableUIView;
+    /**
+     * Creates an instance of the classic editor UI view.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param editingView The editing view instance this view is related to.
+     * @param options Configuration options for the view instance.
+     * @param options.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
+     * in the main {@link module:editor-classic/classicfloatingeditoruiview~ClassicFloatingEditorUIView#toolbar toolbar}.
+     * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
+     */
+    constructor(locale: Locale, editingView: View, options?: {
+        shouldToolbarGroupWhenFull?: boolean;
+        containerElement?: HTMLElement;
+        panelAbsolute?: boolean;
+    });
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+}

package/src/ui/ClassicFloatingEditorUIView.js

@@ -0,0 +1,44 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module editor-classic/classicfloatingeditoruiview
+ */
+import StickyPanelView from './panel/StickyPanelView';
+import { BoxedEditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
+import '../../theme/classicfloatingeditor.css';
+/**
+ * Classic editor UI view. Uses an inline editable and a sticky toolbar, all
+ * enclosed in a boxed UI view.
+ */
+export default class ClassicFloatingEditorUIView extends BoxedEditorUIView {
+    /**
+     * Creates an instance of the classic editor UI view.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param editingView The editing view instance this view is related to.
+     * @param options Configuration options for the view instance.
+     * @param options.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
+     * in the main {@link module:editor-classic/classicfloatingeditoruiview~ClassicFloatingEditorUIView#toolbar toolbar}.
+     * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
+     */
+    constructor(locale, editingView, options = {}) {
+        super(locale);
+        this.stickyPanel = new StickyPanelView(locale, options.containerElement, options.panelAbsolute);
+        this.toolbar = new ToolbarView(locale, {
+            shouldGroupWhenFull: options.shouldToolbarGroupWhenFull
+        });
+        this.editable = new InlineEditableUIView(locale, editingView);
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        // Set toolbar as a child of a stickyPanel and makes toolbar sticky.
+        this.stickyPanel.content.add(this.toolbar);
+        this.top.add(this.stickyPanel);
+        this.main.add(this.editable);
+    }
+}

package/src/ui/panel/StickyPanelView.d.ts

@@ -0,0 +1,161 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/panel/sticky/stickypanelview
+ */
+import View from '@ckeditor/ckeditor5-ui/src/view';
+import type ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
+import { type Locale } from '@ckeditor/ckeditor5-utils';
+import '../../../theme/stickypanel.css';
+/**
+ * The sticky panel view class.
+ */
+export default class StickyPanelView extends View {
+    /**
+     * Collection of the child views which creates balloon panel contents.
+     */
+    readonly content: ViewCollection;
+    containerElement: HTMLElement | Window;
+    panelAbsolute: boolean;
+    position: string | null;
+    panel_height: number;
+    panel_width: number;
+    /**
+     * Controls whether the sticky panel should be active.
+     *
+     * @readonly
+     * @observable
+     */
+    isActive: boolean;
+    /**
+     * Controls whether the sticky panel is in the "sticky" state.
+     *
+     * @readonly
+     * @observable
+     */
+    isSticky: boolean;
+    /**
+     * The limiter element for the sticky panel instance. Its bounding rect limits
+     * the "stickyness" of the panel, i.e. when the panel reaches the bottom
+     * edge of the limiter, it becomes sticky to that edge and does not float
+     * off the limiter. It is mandatory for the panel to work properly and once
+     * set, it cannot be changed.
+     *
+     * @readonly
+     * @observable
+     */
+    limiterElement: HTMLElement | null;
+    /**
+     * The offset from the bottom edge of {@link #limiterElement}
+     * which stops the panel from stickying any further to prevent limiter's content
+     * from being completely covered.
+     *
+     * @readonly
+     * @observable
+     * @default 50
+     */
+    limiterBottomOffset: number;
+    /**
+     * The offset from the top edge of the web browser's viewport which makes the
+     * panel become sticky. The default value is `0`, which means the panel becomes
+     * sticky when it's upper edge touches the top of the page viewport.
+     *
+     * This attribute is useful when the web page has UI elements positioned to the top
+     * either using `position: fixed` or `position: sticky`, which would cover the
+     * sticky panel or vice–versa (depending on the `z-index` hierarchy).
+     *
+     * Bound to {@link module:ui/editorui/editorui~EditorUI#viewportOffset `EditorUI#viewportOffset`}.
+     *
+     * If {@link module:core/editor/editorconfig~EditorConfig#ui `EditorConfig#ui.viewportOffset.top`} is defined, then
+     * it will override the default value.
+     *
+     * @observable
+     * @default 0
+     */
+    viewportTopOffset: number;
+    /**
+     * Controls the `margin-left` CSS style of the panel.
+     *
+     * @private
+     * @readonly
+     * @observable
+     */
+    _marginLeft: string | null;
+    /**
+     * Set `true` if the sticky panel reached the bottom edge of the
+     * {@link #limiterElement}.
+     *
+     * @private
+     * @readonly
+     * @observable
+     */
+    _isStickyToTheBottomOfLimiter: boolean;
+    /**
+     * The `top` CSS position of the panel when it is sticky to the top of the viewport or scrollable
+     * ancestors of the {@link #limiterElement}.
+     *
+     * @private
+     * @readonly
+     * @observable
+     */
+    _stickyTopOffset: number | null;
+    /**
+     * The `bottom` CSS position of the panel when it is sticky to the bottom of the {@link #limiterElement}.
+     *
+     * @private
+     * @readonly
+     * @observable
+     */
+    _stickyBottomOffset: number | null;
+    /**
+     * A dummy element which visually fills the space as long as the
+     * actual panel is sticky. It prevents flickering of the UI.
+     */
+    private _contentPanelPlaceholder;
+    /**
+     * The panel which accepts children into {@link #content} collection.
+     * Also an element which is positioned when {@link #isSticky}.
+     */
+    private _contentPanel;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale, containerElement?: HTMLElement, panelAbsolute?: boolean);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Analyzes the environment to decide whether the panel should be sticky or not.
+     * Then handles the positioning of the panel.
+     */
+    checkIfShouldBeSticky(): void;
+    /**
+     * Sticks the panel at the given CSS `top` offset.
+     *
+     * @private
+     * @param topOffset
+     */
+    private _stickToTopOfAncestors;
+    /**
+     * Sticks the panel at the bottom of the limiter with a given CSS `bottom` offset.
+     *
+     * @private
+     * @param stickyBottomOffset
+     */
+    private _stickToBottomOfLimiter;
+    /**
+     * Unsticks the panel putting it back to its original position.
+     *
+     * @private
+     */
+    private _unstick;
+    /**
+     * Returns the bounding rect of the {@link #_contentPanel}.
+     *
+     * @private
+     */
+    private get _contentPanelRect();
+}

package/src/ui/panel/StickyPanelView.js

@@ -0,0 +1,266 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/panel/sticky/stickypanelview
+ */
+import View from '@ckeditor/ckeditor5-ui/src/view';
+import Template from '@ckeditor/ckeditor5-ui/src/template';
+import { global, toUnit, Rect } from '@ckeditor/ckeditor5-utils';
+// @if CK_DEBUG_STICKYPANEL // const {
+// @if CK_DEBUG_STICKYPANEL // 	default: RectDrawer,
+// @if CK_DEBUG_STICKYPANEL // 	diagonalStylesBlack
+// @if CK_DEBUG_STICKYPANEL // } = require( '@ckeditor/ckeditor5-utils/tests/_utils/rectdrawer' );
+import '../../../theme/stickypanel.css';
+const toPx = toUnit('px');
+/**
+ * The sticky panel view class.
+ */
+export default class StickyPanelView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale, containerElement, panelAbsolute = false) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.containerElement = containerElement || global.window;
+        this.panelAbsolute = panelAbsolute;
+        this.set('position', null);
+        this.set('panel_height', 0);
+        this.set('panel_width', 0);
+        this.set('isActive', false);
+        this.set('isSticky', false);
+        this.set('limiterElement', null);
+        this.set('limiterBottomOffset', 50);
+        this.set('viewportTopOffset', 0);
+        this.set('_marginLeft', null);
+        this.set('_isStickyToTheBottomOfLimiter', false);
+        this.set('_stickyTopOffset', null);
+        this.set('_stickyBottomOffset', null);
+        this.content = this.createCollection();
+        this._contentPanelPlaceholder = new Template({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-sticky-panel__placeholder'
+                ],
+                style: {
+                    display: bind.to('isSticky', isSticky => isSticky ? 'block' : 'none'),
+                    height: bind.to('panel_height', value => {
+                        return toPx(value);
+                    }),
+                    width: bind.to('panel_width', value => {
+                        return toPx(value);
+                    }),
+                }
+            }
+        }).render();
+        this._contentPanel = new Template({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-sticky-panel__content',
+                    // Toggle class of the panel when "sticky" state changes in the view.
+                    bind.if('isSticky', 'ck-sticky-panel__content_sticky'),
+                    bind.if('_isStickyToTheBottomOfLimiter', 'ck-sticky-panel__content_sticky_bottom-limit')
+                ],
+                style: {
+                    position: bind.to('position', position => {
+                        return position;
+                    }),
+                    width: bind.to('isSticky', isSticky => {
+                        return isSticky ? toPx(this._contentPanelPlaceholder.getBoundingClientRect().width) : null;
+                    }),
+                    top: bind.to('_stickyTopOffset', value => value ? toPx(value) : value),
+                    bottom: bind.to('_stickyBottomOffset', value => value ? toPx(value) : value),
+                    marginLeft: bind.to('_marginLeft')
+                }
+            },
+            children: this.content
+        }).render();
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-sticky-panel'
+                ]
+            },
+            children: [
+                this._contentPanelPlaceholder,
+                this._contentPanel
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        // Check if the panel should go into the sticky state immediately.
+        this.checkIfShouldBeSticky();
+        // Update sticky state of the panel as the window and ancestors are being scrolled.
+        this.listenTo(this.containerElement, 'scroll', () => {
+            this.checkIfShouldBeSticky();
+        }, { useCapture: true });
+        // Synchronize with `model.isActive` because sticking an inactive panel is pointless.
+        this.listenTo(this, 'change:isActive', () => {
+            this.checkIfShouldBeSticky();
+        });
+    }
+    /**
+     * Analyzes the environment to decide whether the panel should be sticky or not.
+     * Then handles the positioning of the panel.
+     */
+    checkIfShouldBeSticky() {
+        // @if CK_DEBUG_STICKYPANEL // RectDrawer.clear();
+        if (!this.limiterElement || !this.isActive) {
+            this._unstick();
+            return;
+        }
+        this.panel_height = this._contentPanelRect.height;
+        this.panel_width = this._contentPanelRect.width;
+        const limiterRect = new Rect(this.limiterElement);
+        let visibleLimiterRect = limiterRect.getVisible();
+        if (visibleLimiterRect) {
+            const windowRect = new Rect(this.containerElement);
+            limiterRect.top -= windowRect.top;
+            limiterRect.bottom -= windowRect.top;
+            windowRect.top += this.viewportTopOffset;
+            windowRect.height -= this.viewportTopOffset;
+            visibleLimiterRect = visibleLimiterRect.getIntersection(windowRect);
+        }
+        // @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {
+        // @if CK_DEBUG_STICKYPANEL // 	RectDrawer.draw( visibleLimiterRect,
+        // @if CK_DEBUG_STICKYPANEL // 		{ outlineWidth: '3px', opacity: '.8', outlineColor: 'red', outlineOffset: '-3px' },
+        // @if CK_DEBUG_STICKYPANEL // 		'Visible anc'
+        // @if CK_DEBUG_STICKYPANEL // 	);
+        // @if CK_DEBUG_STICKYPANEL // }
+        // @if CK_DEBUG_STICKYPANEL //
+        // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( limiterRect,
+        // @if CK_DEBUG_STICKYPANEL // 	{ outlineWidth: '3px', opacity: '.8', outlineColor: 'green', outlineOffset: '-3px' },
+        // @if CK_DEBUG_STICKYPANEL // 	'Limiter'
+        // @if CK_DEBUG_STICKYPANEL // );
+        // Stick the panel only if
+        // * the limiter's ancestors are intersecting with each other so that some of their rects are visible,
+        // * and the limiter's top edge is above the visible ancestors' top edge.
+        if (visibleLimiterRect && limiterRect.top < visibleLimiterRect.top) {
+            // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( visibleLimiterRect,
+            // @if CK_DEBUG_STICKYPANEL // 	{ outlineWidth: '3px', opacity: '.8', outlineColor: 'fuchsia', outlineOffset: '-3px',
+            // @if CK_DEBUG_STICKYPANEL // 		backgroundColor: 'rgba(255, 0, 255, .3)' },
+            // @if CK_DEBUG_STICKYPANEL // 	'Visible limiter'
+            // @if CK_DEBUG_STICKYPANEL // );
+            const visibleLimiterTop = visibleLimiterRect.top;
+            // Check if there's a change the panel can be sticky to the bottom of the limiter.
+            if (visibleLimiterTop + this._contentPanelRect.height + this.limiterBottomOffset > visibleLimiterRect.bottom) {
+                const stickyBottomOffset = Math.max(limiterRect.bottom - visibleLimiterRect.bottom, 0) + this.limiterBottomOffset;
+                // @if CK_DEBUG_STICKYPANEL // const stickyBottomOffsetRect = new Rect( {
+                // @if CK_DEBUG_STICKYPANEL // 	top: limiterRect.bottom - stickyBottomOffset, left: 0, right: 2000,
+                // @if CK_DEBUG_STICKYPANEL // 	bottom: limiterRect.bottom - stickyBottomOffset, width: 2000, height: 1
+                // @if CK_DEBUG_STICKYPANEL // } );
+                // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( stickyBottomOffsetRect,
+                // @if CK_DEBUG_STICKYPANEL // 	{ outlineWidth: '1px', opacity: '.8', outlineColor: 'black' },
+                // @if CK_DEBUG_STICKYPANEL // 	'Sticky bottom offset'
+                // @if CK_DEBUG_STICKYPANEL // );
+                // Check if sticking the panel to the bottom of the limiter does not cause it to suddenly
+                // move upwards if there's not enough space for it.
+                if (limiterRect.bottom - stickyBottomOffset > limiterRect.top + this._contentPanelRect.height) {
+                    if (this.panelAbsolute) {
+                    }
+                    else {
+                        this._stickToBottomOfLimiter(stickyBottomOffset);
+                    }
+                }
+                else {
+                    this._unstick();
+                }
+            }
+            else {
+                if (this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height) {
+                    if (this.panelAbsolute) {
+                        if (limiterRect.top < 0 && -limiterRect.top < limiterRect.height - this.limiterBottomOffset) {
+                            this._stickToTopOfAncestors(-limiterRect.top, 'absolute');
+                        }
+                        else {
+                            this._unstick();
+                        }
+                    }
+                    else {
+                        this._stickToTopOfAncestors(visibleLimiterTop, null);
+                    }
+                }
+                else {
+                    this._unstick();
+                }
+            }
+        }
+        else {
+            this._unstick();
+        }
+        // @if CK_DEBUG_STICKYPANEL // console.clear();
+        // @if CK_DEBUG_STICKYPANEL // console.log( 'isSticky', this.isSticky );
+        // @if CK_DEBUG_STICKYPANEL // console.log( '_isStickyToTheBottomOfLimiter', this._isStickyToTheBottomOfLimiter );
+        // @if CK_DEBUG_STICKYPANEL // console.log( '_stickyTopOffset', this._stickyTopOffset );
+        // @if CK_DEBUG_STICKYPANEL // console.log( '_stickyBottomOffset', this._stickyBottomOffset );
+        // @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {
+        // @if CK_DEBUG_STICKYPANEL // 	RectDrawer.draw( visibleLimiterRect,
+        // @if CK_DEBUG_STICKYPANEL // 		{ ...diagonalStylesBlack,
+        // @if CK_DEBUG_STICKYPANEL // 			outlineWidth: '3px', opacity: '.8', outlineColor: 'orange', outlineOffset: '-3px',
+        // @if CK_DEBUG_STICKYPANEL // 			backgroundColor: 'rgba(0, 0, 255, .2)' },
+        // @if CK_DEBUG_STICKYPANEL // 		'visibleLimiterRect'
+        // @if CK_DEBUG_STICKYPANEL // 	);
+        // @if CK_DEBUG_STICKYPANEL // }
+    }
+    /**
+     * Sticks the panel at the given CSS `top` offset.
+     *
+     * @private
+     * @param topOffset
+     */
+    _stickToTopOfAncestors(topOffset, position) {
+        this.isSticky = true;
+        this._isStickyToTheBottomOfLimiter = false;
+        this._stickyBottomOffset = null;
+        this._stickyTopOffset = topOffset;
+        this._marginLeft = toPx(-global.window.scrollX);
+        this.position = position;
+    }
+    /**
+     * Sticks the panel at the bottom of the limiter with a given CSS `bottom` offset.
+     *
+     * @private
+     * @param stickyBottomOffset
+     */
+    _stickToBottomOfLimiter(stickyBottomOffset) {
+        this.isSticky = true;
+        this._isStickyToTheBottomOfLimiter = true;
+        this._stickyTopOffset = null;
+        this._stickyBottomOffset = stickyBottomOffset;
+        this._marginLeft = toPx(-global.window.scrollX);
+        this.position = null;
+    }
+    /**
+     * Unsticks the panel putting it back to its original position.
+     *
+     * @private
+     */
+    _unstick() {
+        this.isSticky = false;
+        this._isStickyToTheBottomOfLimiter = false;
+        this._stickyTopOffset = null;
+        this._stickyBottomOffset = null;
+        this._marginLeft = null;
+        this.position = null;
+    }
+    /**
+     * Returns the bounding rect of the {@link #_contentPanel}.
+     *
+     * @private
+     */
+    get _contentPanelRect() {
+        return new Rect(this._contentPanel);
+    }
+}