Răsfoiți Sursa

Added fake panels to ContextualBalloon.

Oskar Wróbel 6 ani în urmă
părinte
comite
6b75267f83

+ 83 - 2
packages/ckeditor5-ui/src/panel/balloon/contextualballoon.js

@@ -137,6 +137,21 @@ export default class ContextualBalloon extends Plugin {
 		 * @type {module:ui/view~View}
 		 * @type {module:ui/view~View}
 		 */
 		 */
 		this._rotatorView = this._createRotatorView();
 		this._rotatorView = this._createRotatorView();
+
+		/**
+		 * Fake panels view.
+		 *
+		 * @private
+		 * @type {module:ui/view~View}
+		 */
+		this._fakePanelsView = new FakePanelsView( editor.locale );
+		this._fakePanelsView.bind( 'position' ).to( this.view, 'position', position => {
+			return position.startsWith( 'arrow_n' ) ? 'bottom' : 'top';
+		} );
+		this._fakePanelsView.bind( 'panelsLength' ).to( this, '_panelsLength', length => {
+			return length < 2 ? 0 : Math.min( 5, length ) - 1;
+		} );
+		this.view.content.add( this._fakePanelsView );
 	}
 	}
 
 
 	/**
 	/**
@@ -424,11 +439,11 @@ export default class ContextualBalloon extends Plugin {
 // @private
 // @private
 // @extends module:ui/view~View
 // @extends module:ui/view~View
 class RotatorView extends View {
 class RotatorView extends View {
+	// @inheritDoc
 	constructor( locale ) {
 	constructor( locale ) {
 		super( locale );
 		super( locale );
 
 
 		const t = locale.t;
 		const t = locale.t;
-
 		const bind = this.bindTemplate;
 		const bind = this.bindTemplate;
 
 
 		// Defines whether navigation is visible or not.
 		// Defines whether navigation is visible or not.
@@ -454,7 +469,7 @@ class RotatorView extends View {
 		// @type {module:ui/button/buttonview~ButtonView}
 		// @type {module:ui/button/buttonview~ButtonView}
 		this.buttonNextView = this._createButtonView( t( 'Next balloon' ), nextIcon );
 		this.buttonNextView = this._createButtonView( t( 'Next balloon' ), nextIcon );
 
 
-		// Collection of the child views which creates balloon panel contents.
+		// Collection of the child views which creates rotator content.
 		//
 		//
 		// @readonly
 		// @readonly
 		// @type {module:ui/viewcollection~ViewCollection}
 		// @type {module:ui/viewcollection~ViewCollection}
@@ -553,3 +568,69 @@ class RotatorView extends View {
 		return view;
 		return view;
 	}
 	}
 }
 }
+
+// @private
+// @extends module:ui/view~View
+class FakePanelsView extends View {
+	// @inheritDoc
+	constructor( locale ) {
+		super( locale );
+
+		// Number of rendered fake panels.
+		//
+		// @observable
+		// @member {Boolean} #panelsLength
+		this.set( 'panelsLength', 0 );
+
+		// @observable
+		// @member {'top'|'bottom'} #position
+		this.set( 'position', 'top' );
+
+		// Collection of the child views which creates fake panel content.
+		//
+		// @readonly
+		// @type {module:ui/viewcollection~ViewCollection}
+		this.content = this.createCollection();
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: 'ck-fake-panels'
+			},
+			children: this.content
+		} );
+
+		this.on( 'change:panelsLength', ( evt, name, next, prev ) => {
+			if ( next > prev ) {
+				this._addPanels( next - prev );
+			} else {
+				this._removePanels( prev - next );
+			}
+		} );
+	}
+
+	// @private
+	// @param {Number} number
+	_addPanels( number ) {
+		while ( number-- ) {
+			const view = new View();
+
+			view.setTemplate( { tag: 'div' } );
+
+			this.content.add( view );
+			this.registerChild( view );
+		}
+	}
+
+	// @private
+	// @param {Number} number
+	_removePanels( number ) {
+		while ( number-- ) {
+			const view = this.content.last;
+
+			this.content.remove( view );
+			this.deregisterChild( view );
+			view.destroy();
+		}
+	}
+}

+ 62 - 0
packages/ckeditor5-ui/theme/components/panel/balloonrotator.css

@@ -8,3 +8,65 @@
 	align-items: center;
 	align-items: center;
 	justify-content: center;
 	justify-content: center;
 }
 }
+
+
+
+
+
+/* WIP */
+.ck .ck-fake-panels {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: -1;
+}
+
+.ck .ck-fake-panels div {
+	position: absolute;
+	background: #fff;
+	border: solid 1px #e1e1e1;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	transform: translate( 6px, 6px );
+	z-index: -1;
+}
+
+.ck .ck-fake-panels div + div {
+	transform: translate( 12px, 12px );
+	z-index: -2;
+}
+
+.ck .ck-fake-panels div + div + div {
+	transform: translate( 18px, 18px );
+	z-index: -3;
+}
+
+.ck .ck-fake-panels div + div + div + div {
+	transform: translate( 26px, 26px );
+	z-index: -4;
+}
+
+.ck.ck-balloon-panel {
+	&[class*="arrow_s"] {
+		& .ck-fake-panels div {
+			transform: translate( 6px, -6px );
+		}
+
+		& .ck-fake-panels div + div {
+			transform: translate( 12px, -12px );
+		}
+
+		& .ck-fake-panels div + div + div {
+			transform: translate( 18px, -18px );
+		}
+
+		& .ck-fake-panels div + div + div + div {
+			transform: translate( 26px, -26px );
+		}
+	}
+}