@ckeditor/ckeditor5-ui 45.0.0-alpha.7 → 45.0.0-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "45.0.0-alpha.7",
+  "version": "45.0.0-alpha.8",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -17,11 +17,11 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "45.0.0-alpha.7",
-    "@ckeditor/ckeditor5-editor-multi-root": "45.0.0-alpha.7",
-    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.7",
-    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.7",
-    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.7",
+    "@ckeditor/ckeditor5-core": "45.0.0-alpha.8",
+    "@ckeditor/ckeditor5-editor-multi-root": "45.0.0-alpha.8",
+    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.8",
+    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.8",
+    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.8",
     "@types/color-convert": "2.0.4",
     "color-convert": "2.0.1",
     "color-parse": "1.4.2",

package/src/panel/sticky/stickypanelview.d.ts

@@ -154,7 +154,7 @@ export default class StickyPanelView extends View {
      */
     private get _contentPanelRect();
     /**
-     * Sets custom CSS properties to the panel element to make it aware of the visual viewport offset.
+     * Returns normalized visual viewport offsets (only for Safari and iOS).
      */
-    private _updateVisualViewport;
+    private _getVisualViewportOffset;
 }

package/src/panel/sticky/stickypanelview.js

@@ -7,11 +7,7 @@
  */
 import View from '../../view.js';
 import Template from '../../template.js';
-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 { Rect, toUnit, global, env } from '@ckeditor/ckeditor5-utils';
 import '../../../theme/components/panel/stickypanel.css';
 const toPx = /* #__PURE__ */ toUnit('px');
 /**
@@ -113,10 +109,13 @@ export default class StickyPanelView extends View {
         this.listenTo(this, 'change:isActive', () => {
             this.checkIfShouldBeSticky();
         });
-        if (global.window.visualViewport) {
-            this.listenTo(global.window.visualViewport, 'scroll', () => this._updateVisualViewport());
-            this.listenTo(global.window.visualViewport, 'resize', () => this._updateVisualViewport());
-            this._updateVisualViewport();
+        if ((env.isiOS || env.isSafari) && global.window.visualViewport) {
+            this.listenTo(global.window.visualViewport, 'scroll', () => {
+                this.checkIfShouldBeSticky();
+            });
+            this.listenTo(global.window.visualViewport, 'resize', () => {
+                this.checkIfShouldBeSticky();
+            });
         }
     }
     /**
@@ -124,51 +123,36 @@ export default class StickyPanelView extends View {
      * Then handles the positioning of the panel.
      */
     checkIfShouldBeSticky() {
-        // @if CK_DEBUG_STICKYPANEL // RectDrawer.clear();
         if (!this.limiterElement || !this.isActive) {
             this._unstick();
             return;
         }
+        const { left: visualViewportOffsetLeft, top: visualViewportOffsetTop } = this._getVisualViewportOffset();
         const limiterRect = new Rect(this.limiterElement);
         let visibleLimiterRect = limiterRect.getVisible();
         if (visibleLimiterRect) {
             const windowRect = new Rect(global.window);
-            windowRect.top += this.viewportTopOffset;
-            windowRect.height -= this.viewportTopOffset;
+            let viewportTopOffset = this.viewportTopOffset;
+            if (env.isiOS || env.isSafari) {
+                // Adjust the viewport top offset to height visible in the visual viewport.
+                viewportTopOffset = visualViewportOffsetTop > this.viewportTopOffset ? 0 : this.viewportTopOffset - visualViewportOffsetTop;
+            }
+            windowRect.top += viewportTopOffset;
+            windowRect.height -= 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 // );
+        limiterRect.moveBy(visualViewportOffsetLeft, visualViewportOffsetTop);
+        if (visibleLimiterRect) {
+            visibleLimiterRect.moveBy(visualViewportOffsetLeft, visualViewportOffsetTop);
+        }
         // 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.
                 // Adding 1 avoids rounding problems and toolbar flickering when offset almost equals the height.
@@ -179,13 +163,11 @@ export default class StickyPanelView extends View {
                     this._unstick();
                 }
             }
+            else if (this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height) {
+                this._stickToTopOfAncestors(visibleLimiterTop);
+            }
             else {
-                if (this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height) {
-                    this._stickToTopOfAncestors(visibleLimiterTop);
-                }
-                else {
-                    this._unstick();
-                }
+                this._unstick();
             }
         }
         else {
@@ -196,14 +178,6 @@ export default class StickyPanelView extends View {
         // @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.
@@ -216,7 +190,7 @@ export default class StickyPanelView extends View {
         this._isStickyToTheBottomOfLimiter = false;
         this._stickyTopOffset = topOffset;
         this._stickyBottomOffset = null;
-        this._marginLeft = toPx(-global.window.scrollX);
+        this._marginLeft = toPx(-global.window.scrollX + this._getVisualViewportOffset().left);
     }
     /**
      * Sticks the panel at the bottom of the limiter with a given CSS `bottom` offset.
@@ -229,7 +203,7 @@ export default class StickyPanelView extends View {
         this._isStickyToTheBottomOfLimiter = true;
         this._stickyTopOffset = null;
         this._stickyBottomOffset = stickyBottomOffset;
-        this._marginLeft = toPx(-global.window.scrollX);
+        this._marginLeft = toPx(-global.window.scrollX + this._getVisualViewportOffset().left);
     }
     /**
      * Unsticks the panel putting it back to its original position.
@@ -252,10 +226,15 @@ export default class StickyPanelView extends View {
         return new Rect(this.contentPanelElement);
     }
     /**
-     * Sets custom CSS properties to the panel element to make it aware of the visual viewport offset.
+     * Returns normalized visual viewport offsets (only for Safari and iOS).
      */
-    _updateVisualViewport() {
-        this.element.style.setProperty('--ck-visual-viewport-left', `${global.window.visualViewport.offsetLeft}px`);
-        this.element.style.setProperty('--ck-visual-viewport-top', `${global.window.visualViewport.offsetTop}px`);
+    _getVisualViewportOffset() {
+        const visualViewport = global.window.visualViewport;
+        if (!(env.isiOS || env.isSafari) || !visualViewport) {
+            return { left: 0, top: 0 };
+        }
+        const left = Math.max(Math.round(visualViewport.offsetLeft), 0);
+        const top = Math.max(Math.round(visualViewport.offsetTop), 0);
+        return { left, top };
     }
 }

package/theme/components/panel/stickypanel.css

@@ -3,22 +3,15 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
-:root {
-	--ck-visual-viewport-left: 0px;
-	--ck-visual-viewport-top: 0px;
-}
-
 .ck.ck-sticky-panel {
 	& .ck-sticky-panel__content_sticky {
 		z-index: var(--ck-z-panel); /* #315 */
 		position: fixed;
 		top: 0;
-		transform: translate(var(--ck-visual-viewport-left, 0px), var(--ck-visual-viewport-top, 0px));
 	}
 
 	& .ck-sticky-panel__content_sticky_bottom-limit {
 		top: auto;
 		position: absolute;
-		transform: none;
 	}
 }