|
|
@@ -4,22 +4,20 @@
|
|
|
*/
|
|
|
|
|
|
/**
|
|
|
- * @module ui/toolbar/sticky/stickytoolbarview
|
|
|
+ * @module ui/panel/sticky/stickypanelview
|
|
|
*/
|
|
|
|
|
|
import global from '@ckeditor/ckeditor5-utils/src/dom/global';
|
|
|
+import View from '../../view';
|
|
|
import Template from '../../template';
|
|
|
-import ToolbarView from '../toolbarview';
|
|
|
import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
|
|
|
|
|
|
const toPx = toUnit( 'px' );
|
|
|
|
|
|
/**
|
|
|
- * The sticky toolbar view class.
|
|
|
- *
|
|
|
- * @extends module:ui/toolbar/toolbarview~ToolbarView
|
|
|
+ * The sticky panel view class.
|
|
|
*/
|
|
|
-export default class StickyToolbarView extends ToolbarView {
|
|
|
+export default class StickyPanelView extends View {
|
|
|
/**
|
|
|
* @inheritDoc
|
|
|
*/
|
|
|
@@ -29,8 +27,7 @@ export default class StickyToolbarView extends ToolbarView {
|
|
|
const bind = this.bindTemplate;
|
|
|
|
|
|
/**
|
|
|
- * Controls whether the sticky toolbar should be active. When any editable
|
|
|
- * is focused in the editor, toolbar becomes active.
|
|
|
+ * Controls whether the sticky panel should be active.
|
|
|
*
|
|
|
* @readonly
|
|
|
* @observable
|
|
|
@@ -39,7 +36,7 @@ export default class StickyToolbarView extends ToolbarView {
|
|
|
this.set( 'isActive', false );
|
|
|
|
|
|
/**
|
|
|
- * Controls whether the sticky toolbar is in the "sticky" state.
|
|
|
+ * Controls whether the sticky panel is in the "sticky" state.
|
|
|
*
|
|
|
* @readonly
|
|
|
* @observable
|
|
|
@@ -48,10 +45,10 @@ export default class StickyToolbarView extends ToolbarView {
|
|
|
this.set( 'isSticky', false );
|
|
|
|
|
|
/**
|
|
|
- * The limiter element for the sticky toolbar instance. Its bounding rect limits
|
|
|
- * the "stickyness" of the toolbar, i.e. when the toolbar reaches the bottom
|
|
|
+ * 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 toolbar to work properly and once
|
|
|
+ * off the limiter. It is mandatory for the panel to work properly and once
|
|
|
* set, it cannot be changed.
|
|
|
*
|
|
|
* @readonly
|
|
|
@@ -62,7 +59,7 @@ export default class StickyToolbarView extends ToolbarView {
|
|
|
|
|
|
/**
|
|
|
* The offset from the bottom edge of {@link #limiterElement}
|
|
|
- * which stops the toolbar from stickying any further to prevent limiter's content
|
|
|
+ * which stops the panel from stickying any further to prevent limiter's content
|
|
|
* from being completely covered.
|
|
|
*
|
|
|
* @readonly
|
|
|
@@ -74,12 +71,12 @@ export default class StickyToolbarView extends ToolbarView {
|
|
|
|
|
|
/**
|
|
|
* The offset from the top edge of the web browser's viewport which makes the
|
|
|
- * toolbar become sticky. The default value is `0`, which means the toolbar becomes
|
|
|
+ * 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 toolbar or vice–versa (depending on the `z-index` hierarchy).
|
|
|
+ * sticky panel or vice–versa (depending on the `z-index` hierarchy).
|
|
|
*
|
|
|
* @readonly
|
|
|
* @observable
|
|
|
@@ -89,7 +86,7 @@ export default class StickyToolbarView extends ToolbarView {
|
|
|
this.set( 'viewportTopOffset', 0 );
|
|
|
|
|
|
/**
|
|
|
- * Controls the `margin-left` CSS style of the toolbar.
|
|
|
+ * Controls the `margin-left` CSS style of the panel.
|
|
|
*
|
|
|
* @protected
|
|
|
* @readonly
|
|
|
@@ -99,7 +96,7 @@ export default class StickyToolbarView extends ToolbarView {
|
|
|
this.set( '_marginLeft', null );
|
|
|
|
|
|
/**
|
|
|
- * Set `true` if the sticky toolbar reached the bottom edge of the
|
|
|
+ * Set `true` if the sticky panel reached the bottom edge of the
|
|
|
* {@link #limiterElement}.
|
|
|
*
|
|
|
* @protected
|
|
|
@@ -110,7 +107,7 @@ export default class StickyToolbarView extends ToolbarView {
|
|
|
this.set( '_isStickyToTheLimiter', false );
|
|
|
|
|
|
/**
|
|
|
- * Set `true` if the sticky toolbar uses the {@link #viewportTopOffset},
|
|
|
+ * Set `true` if the sticky panel uses the {@link #viewportTopOffset},
|
|
|
* i.e. not {@link #_isStickyToTheLimiter} and the {@link #viewportTopOffset}
|
|
|
* is not `0`.
|
|
|
*
|
|
|
@@ -122,26 +119,37 @@ export default class StickyToolbarView extends ToolbarView {
|
|
|
this.set( '_hasViewportTopOffset', false );
|
|
|
|
|
|
/**
|
|
|
- * The DOM bounding client rect of the {@link module:ui/view~View#element} of the toolbar.
|
|
|
+ * Collection of the child views which creates balloon panel contents.
|
|
|
+ *
|
|
|
+ * @readonly
|
|
|
+ * @member {module:ui/viewcollection~ViewCollection}
|
|
|
+ */
|
|
|
+ this.content = this.createCollection();
|
|
|
+
|
|
|
+ /**
|
|
|
+ * The DOM bounding client rect of the {@link module:ui/view~View#element} of the panel.
|
|
|
*
|
|
|
* @protected
|
|
|
- * @member {Object} #_toolbarRect
|
|
|
+ * @member {Object} #_panelRect
|
|
|
*/
|
|
|
|
|
|
/**
|
|
|
* The DOM bounding client rect of the {@link #limiterElement}
|
|
|
- * of the toolbar.
|
|
|
+ * of the panel.
|
|
|
*
|
|
|
* @protected
|
|
|
* @member {Object} #_limiterRect
|
|
|
*/
|
|
|
|
|
|
- Template.extend( this.template, {
|
|
|
+ this.template = new Template( {
|
|
|
+ tag: 'div',
|
|
|
+
|
|
|
attributes: {
|
|
|
class: [
|
|
|
- // Toggle class of the toolbar when "sticky" state changes in the view.
|
|
|
- bind.if( 'isSticky', 'ck-toolbar_sticky' ),
|
|
|
- bind.if( '_isStickyToTheLimiter', 'ck-toolbar_sticky_bottom-limit' ),
|
|
|
+ 'ck-sticky-panel',
|
|
|
+ // Toggle class of the panel when "sticky" state changes in the view.
|
|
|
+ bind.if( 'isSticky', 'ck-sticky-panel_sticky' ),
|
|
|
+ bind.if( '_isStickyToTheLimiter', 'ck-sticky-panel_sticky_bottom-limit' ),
|
|
|
],
|
|
|
style: {
|
|
|
width: bind.to( 'isSticky', isSticky => {
|
|
|
@@ -158,12 +166,14 @@ export default class StickyToolbarView extends ToolbarView {
|
|
|
|
|
|
marginLeft: bind.to( '_marginLeft' )
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+
|
|
|
+ children: this.content
|
|
|
} );
|
|
|
|
|
|
/**
|
|
|
* A dummy element which visually fills the space as long as the
|
|
|
- * actual toolbar is sticky. It prevents flickering of the UI.
|
|
|
+ * actual panel is sticky. It prevents flickering of the UI.
|
|
|
*
|
|
|
* @private
|
|
|
* @property {HTMLElement}
|
|
|
@@ -172,12 +182,12 @@ export default class StickyToolbarView extends ToolbarView {
|
|
|
tag: 'div',
|
|
|
attributes: {
|
|
|
class: [
|
|
|
- 'ck-toolbar__placeholder'
|
|
|
+ 'ck-sticky-panel__placeholder'
|
|
|
],
|
|
|
style: {
|
|
|
display: bind.to( 'isSticky', isSticky => isSticky ? 'block' : 'none' ),
|
|
|
height: bind.to( 'isSticky', isSticky => {
|
|
|
- return isSticky ? toPx( this._toolbarRect.height ) : null;
|
|
|
+ return isSticky ? toPx( this._panelRect.height ) : null;
|
|
|
} )
|
|
|
}
|
|
|
}
|
|
|
@@ -192,22 +202,22 @@ export default class StickyToolbarView extends ToolbarView {
|
|
|
|
|
|
this.element.parentNode.insertBefore( this._elementPlaceholder, this.element );
|
|
|
|
|
|
- // Check if the toolbar should go into the sticky state immediately.
|
|
|
+ // Check if the panel should go into the sticky state immediately.
|
|
|
this._checkIfShouldBeSticky();
|
|
|
|
|
|
- // Update sticky state of the toolbar as the window is being scrolled.
|
|
|
+ // Update sticky state of the panel as the window is being scrolled.
|
|
|
this.listenTo( global.window, 'scroll', () => {
|
|
|
this._checkIfShouldBeSticky();
|
|
|
} );
|
|
|
|
|
|
- // Synchronize with `model.isActive` because sticking an inactive toolbar is pointless.
|
|
|
+ // Synchronize with `model.isActive` because sticking an inactive panel is pointless.
|
|
|
this.listenTo( this, 'change:isActive', () => {
|
|
|
this._checkIfShouldBeSticky();
|
|
|
} );
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * Destroys the toolbar and removes the {@link #_elementPlaceholder}.
|
|
|
+ * Destroys the panel and removes the {@link #_elementPlaceholder}.
|
|
|
*/
|
|
|
destroy() {
|
|
|
super.destroy();
|
|
|
@@ -215,34 +225,34 @@ export default class StickyToolbarView extends ToolbarView {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * Analyzes the environment to decide whether the toolbar should
|
|
|
+ * Analyzes the environment to decide whether the panel should
|
|
|
* be sticky or not.
|
|
|
*
|
|
|
* @protected
|
|
|
*/
|
|
|
_checkIfShouldBeSticky() {
|
|
|
const limiterRect = this._limiterRect = this.limiterElement.getBoundingClientRect();
|
|
|
- const toolbarRect = this._toolbarRect = this.element.getBoundingClientRect();
|
|
|
+ const panelRect = this._panelRect = this.element.getBoundingClientRect();
|
|
|
|
|
|
- // The toolbar must be active to become sticky.
|
|
|
+ // The panel must be active to become sticky.
|
|
|
this.isSticky = this.isActive &&
|
|
|
// The limiter's top edge must be beyond the upper edge of the visible viewport (+the viewportTopOffset).
|
|
|
limiterRect.top < this.viewportTopOffset &&
|
|
|
- // The model#limiterElement's height mustn't be smaller than the toolbar's height and model#limiterBottomOffset.
|
|
|
+ // The model#limiterElement's height mustn't be smaller than the panel's height and model#limiterBottomOffset.
|
|
|
// There's no point in entering the sticky mode if the model#limiterElement is very, very small, because
|
|
|
- // it would immediately set model#_isStickyToTheLimiter true and, given model#limiterBottomOffset, the toolbar
|
|
|
+ // it would immediately set model#_isStickyToTheLimiter true and, given model#limiterBottomOffset, the panel
|
|
|
// would be positioned before the model#limiterElement.
|
|
|
- this._toolbarRect.height + this.limiterBottomOffset < limiterRect.height;
|
|
|
+ this._panelRect.height + this.limiterBottomOffset < limiterRect.height;
|
|
|
|
|
|
- // Stick the toolbar to the top edge of the viewport simulating CSS position:sticky.
|
|
|
+ // Stick the panel to the top edge of the viewport simulating CSS position:sticky.
|
|
|
// TODO: Possibly replaced by CSS in the future http://caniuse.com/#feat=css-sticky
|
|
|
if ( this.isSticky ) {
|
|
|
this._isStickyToTheLimiter =
|
|
|
- limiterRect.bottom < toolbarRect.height + this.limiterBottomOffset + this.viewportTopOffset;
|
|
|
+ limiterRect.bottom < panelRect.height + this.limiterBottomOffset + this.viewportTopOffset;
|
|
|
this._hasViewportTopOffset = !this._isStickyToTheLimiter && !!this.viewportTopOffset;
|
|
|
this._marginLeft = this._isStickyToTheLimiter ? null : toPx( -global.window.scrollX );
|
|
|
}
|
|
|
- // Detach the toolbar from the top edge of the viewport.
|
|
|
+ // Detach the panel from the top edge of the viewport.
|
|
|
else {
|
|
|
this._isStickyToTheLimiter = false;
|
|
|
this._hasViewportTopOffset = false;
|