Explorar el Código

Removed FloatingToolbarView from the codebase. Added FloatingPanelView styles instead.

Aleksander Nowodzinski hace 8 años
padre
commit
93af56b927

+ 0 - 183
packages/ckeditor5-ui/src/toolbar/floating/floatingtoolbarview.js

@@ -1,183 +0,0 @@
-/**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/**
- * @module ui/toolbar/floating/floatingtoolbarview
- */
-
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
-import Template from '../../template';
-import ToolbarView from '../toolbarview';
-import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
-import { getOptimalPosition } from '@ckeditor/ckeditor5-utils/src/dom/position';
-
-const toPx = toUnit( 'px' );
-
-/**
- * The floating toolbar view class. It floats around the {@link #targetElement}
- * to remain visible in the viewport.
- *
- * @extends module:ui/toolbar/toolbarview~ToolbarView
- */
-export default class FloatingToolbarView extends ToolbarView {
-	/**
-	 * @inheritDoc
-	 */
-	constructor( locale ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		/**
-		 * Controls whether the floating toolbar is active. When any editable
-		 * is focused in the editor, toolbar becomes active.
-		 *
-		 * @readonly
-		 * @observable
-		 * @member {Boolean} #isActive
-		 */
-		this.set( 'isActive', false );
-
-		/**
-		 * The absolute top position of the toolbar, in pixels.
-		 *
-		 * @observable
-		 * @default 0
-		 * @member {Number} #top
-		 */
-		this.set( 'top', 0 );
-
-		/**
-		 * The absolute left position of the toolbar, in pixels.
-		 *
-		 * @observable
-		 * @default 0
-		 * @member {Number} #left
-		 */
-		this.set( 'left', 0 );
-
-		/**
-		 * An element with respect to which the toolbar is positioned.
-		 *
-		 * @readonly
-		 * @observable
-		 * @member {HTMLElement} #targetElement
-		 */
-		this.set( 'targetElement', null );
-
-		Template.extend( this.template, {
-			attributes: {
-				class: [
-					'ck-toolbar_floating',
-					bind.if( 'isActive', 'ck-toolbar_active' ),
-				],
-				style: {
-					top: bind.to( 'top', toPx ),
-					left: bind.to( 'left', toPx ),
-				}
-			}
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		this.listenTo( global.window, 'scroll', () => this._updatePosition() );
-		this.listenTo( this, 'change:isActive', () => this._updatePosition() );
-
-		return super.init();
-	}
-
-	/**
-	 * Analyzes the environment to decide where the toolbar should
-	 * be positioned.
-	 *
-	 * @protected
-	 */
-	_updatePosition() {
-		if ( !this.isActive ) {
-			return;
-		}
-
-		const { nw, sw, ne, se } = FloatingToolbarView.defaultPositions;
-		const { top, left } = getOptimalPosition( {
-			element: this.element,
-			target: this.targetElement,
-			positions: [ nw, sw, ne, se ],
-			limiter: global.document.body,
-			fitInViewport: true
-		} );
-
-		Object.assign( this, { top, left } );
-	}
-}
-
-/**
- * A default set of positioning functions used by the toolbar view to float
- * around {@link targetElement}.
- *
- * The available positioning functions are as follows:
- *
- * * South east:
- *
- *		+----------------+
- *		| #targetElement |
- *		+----------------+
- *		       [ Toolbar ]
- *
- * * South west:
- *
- *		+----------------+
- *		| #targetElement |
- *		+----------------+
- *		[ Toolbar ]
- *
- * * North east:
- *
- *		       [ Toolbar ]
- *		+----------------+
- *		| #targetElement |
- *		+----------------+
- *
- *
- * * North west:
- *
- *		[ Toolbar ]
- *		+----------------+
- *		| #targetElement |
- *		+----------------+
- *
- * See {@link #_updatePosition}.
- *
- * Positioning functions must be compatible with {@link module:utils/dom/position~Position}.
- *
- * @member {Object} module:ui/toolbar/floating/floatingtoolbarview~FloatingToolbarView#defaultPositions
- */
-FloatingToolbarView.defaultPositions = {
-	nw: ( targetRect, toolbarRect ) => ( {
-		top: targetRect.top - toolbarRect.height,
-		left: targetRect.left,
-		name: 'nw'
-	} ),
-
-	sw: ( targetRect ) => ( {
-		top: targetRect.bottom,
-		left: targetRect.left,
-		name: 'sw'
-	} ),
-
-	ne: ( targetRect, toolbarRect ) => ( {
-		top: targetRect.top - toolbarRect.height,
-		left: targetRect.left + targetRect.width - toolbarRect.width,
-		name: 'ne'
-	} ),
-
-	se: ( targetRect, toolbarRect ) => ( {
-		top: targetRect.bottom,
-		left: targetRect.left + targetRect.width - toolbarRect.width,
-		name: 'se'
-	} )
-};

+ 1 - 1
packages/ckeditor5-ui/tests/manual/contextualtoolbar/contextualtoolbar.js

@@ -16,7 +16,7 @@ import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
 
 import Template from '../../../src/template';
 import ToolbarView from '../../../src/toolbar/toolbarview';
-import BalloonPanelView from '../../../src/balloonpanel/balloonpanelview';
+import BalloonPanelView from '../../../src/panel/balloon/balloonpanelview';
 
 const arrowVOffset = BalloonPanelView.arrowVerticalOffset;
 const positions = {

+ 1 - 1
packages/ckeditor5-ui/tests/manual/imagetoolbar/imagetoolbar.js

@@ -17,7 +17,7 @@ import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
 
 import Template from '../../../src/template';
 import ToolbarView from '../../../src/toolbar/toolbarview';
-import BalloonPanelView from '../../../src/balloonpanel/balloonpanelview';
+import BalloonPanelView from '../../../src/panel/balloon/balloonpanelview';
 
 const arrowVOffset = BalloonPanelView.arrowVerticalOffset;
 const positions = {

+ 1 - 1
packages/ckeditor5-ui/tests/manual/tickets/126/1.js

@@ -5,7 +5,7 @@
 
 /* global document, window */
 
-import BalloonPanelView from '../../../../src/balloonpanel/balloonpanelview';
+import BalloonPanelView from '../../../../src/panel/balloon/balloonpanelview';
 
 import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
 

+ 0 - 212
packages/ckeditor5-ui/tests/toolbar/floating/floatingtoolbarview.js

@@ -1,212 +0,0 @@
-/**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* global Event */
-
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
-import FloatingToolbarView from '../../../src/toolbar/floating/floatingtoolbarview';
-import ToolbarView from '../../../src/toolbar/toolbarview';
-import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
-import * as positionUtils from '@ckeditor/ckeditor5-utils/src/dom/position';
-
-testUtils.createSinonSandbox();
-
-describe( 'FloatingToolbarView', () => {
-	let locale, view, target;
-
-	beforeEach( () => {
-		locale = {};
-		view = new FloatingToolbarView( locale );
-
-		target = global.document.createElement( 'a' );
-
-		global.document.body.appendChild( view.element );
-		global.document.body.appendChild( target );
-
-		view.targetElement = target;
-
-		return view.init();
-	} );
-
-	afterEach( () => {
-		view.element.remove();
-
-		return view.destroy();
-	} );
-
-	describe( 'constructor()', () => {
-		it( 'should inherit from ToolbarView', () => {
-			expect( view ).to.be.instanceOf( ToolbarView );
-		} );
-
-		it( 'should set view#locale', () => {
-			expect( view.locale ).to.equal( locale );
-		} );
-
-		it( 'should set #isActive', () => {
-			expect( view.isActive ).to.be.false;
-		} );
-
-		it( 'should set #top', () => {
-			expect( view.top ).to.equal( 0 );
-		} );
-
-		it( 'should set #left', () => {
-			expect( view.left ).to.equal( 0 );
-		} );
-
-		it( 'should set #targetElement', () => {
-			view = new FloatingToolbarView( locale );
-
-			expect( view.targetElement ).to.be.null;
-		} );
-	} );
-
-	describe( 'template', () => {
-		it( 'should create element from template', () => {
-			expect( view.element.classList.contains( 'ck-toolbar_floating' ) ).to.be.true;
-		} );
-
-		describe( 'bindings', () => {
-			describe( 'class', () => {
-				it( 'reacts on #isActive', () => {
-					view.isActive = false;
-					expect( view.element.classList.contains( 'ck-toolbar_active' ) ).to.be.false;
-
-					view.isActive = true;
-					expect( view.element.classList.contains( 'ck-toolbar_active' ) ).to.be.true;
-				} );
-			} );
-
-			describe( 'style', () => {
-				it( 'reacts on #top', () => {
-					view.top = 30;
-					expect( view.element.style.top ).to.equal( '30px' );
-				} );
-
-				it( 'reacts on #left', () => {
-					view.left = 20;
-					expect( view.element.style.left ).to.equal( '20px' );
-				} );
-			} );
-		} );
-	} );
-
-	describe( 'init()', () => {
-		it( 'calls #_updatePosition on window.scroll', () => {
-			const spy = sinon.spy( view, '_updatePosition' );
-
-			global.window.dispatchEvent( new Event( 'scroll', { bubbles: true } ) );
-			sinon.assert.calledOnce( spy );
-		} );
-
-		it( 'calls #_updatePosition on #change:isActive', () => {
-			view.isActive = false;
-
-			const spy = sinon.spy( view, '_updatePosition' );
-
-			view.isActive = true;
-			sinon.assert.calledOnce( spy );
-
-			view.isActive = false;
-			sinon.assert.calledTwice( spy );
-		} );
-	} );
-
-	describe( '_updatePosition()', () => {
-		it( 'does not update when not #isActive', () => {
-			const spy = testUtils.sinon.spy( positionUtils, 'getOptimalPosition' );
-
-			view.isActive = false;
-
-			view._updatePosition();
-			sinon.assert.notCalled( spy );
-
-			view.isActive = true;
-
-			view._updatePosition();
-
-			// Note: #_updatePosition() is called on #change:isActive.
-			sinon.assert.calledTwice( spy );
-		} );
-
-		it( 'uses getOptimalPosition() utility', () => {
-			const { nw, sw, ne, se } = FloatingToolbarView.defaultPositions;
-
-			view.isActive = true;
-
-			const spy = testUtils.sinon.stub( positionUtils, 'getOptimalPosition' ).returns( {
-				top: 5,
-				left: 10
-			} );
-
-			view._updatePosition();
-
-			sinon.assert.calledWithExactly( spy, {
-				element: view.element,
-				target: target,
-				positions: [ nw, sw, ne, se ],
-				limiter: global.document.body,
-				fitInViewport: true
-			} );
-
-			expect( view.top ).to.equal( 5 );
-			expect( view.left ).to.equal( 10 );
-		} );
-	} );
-
-	describe( 'defaultPositions', () => {
-		let targetRect, toolbarRect, defaultPositions;
-
-		beforeEach( () => {
-			defaultPositions = FloatingToolbarView.defaultPositions;
-
-			targetRect = {
-				top: 10,
-				width: 100,
-				left: 10,
-				height: 10,
-				bottom: 20
-			};
-
-			toolbarRect = {
-				width: 20,
-				height: 10
-			};
-		} );
-
-		it( 'should provide "nw" position', () => {
-			expect( defaultPositions.nw( targetRect, toolbarRect ) ).to.deep.equal( {
-				top: 0,
-				left: 10,
-				name: 'nw'
-			} );
-		} );
-
-		it( 'should provide "sw" position', () => {
-			expect( defaultPositions.sw( targetRect, toolbarRect ) ).to.deep.equal( {
-				top: 20,
-				left: 10,
-				name: 'sw'
-			} );
-		} );
-
-		it( 'should provide "ne" position', () => {
-			expect( defaultPositions.ne( targetRect, toolbarRect ) ).to.deep.equal( {
-				top: 0,
-				left: 90,
-				name: 'ne'
-			} );
-		} );
-
-		it( 'should provide "se" position', () => {
-			expect( defaultPositions.se( targetRect, toolbarRect ) ).to.deep.equal( {
-				top: 20,
-				left: 90,
-				name: 'se'
-			} );
-		} );
-	} );
-} );

packages/ckeditor5-ui/theme/components/balloonpanel.scss → packages/ckeditor5-ui/theme/components/panel/balloonpanel.scss


+ 5 - 7
packages/ckeditor5-ui/theme/components/toolbar/floatingtoolbar.scss

@@ -1,13 +1,11 @@
 // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-.ck-toolbar {
-	&.ck-toolbar_floating {
-		position: absolute;
-		display: none;
+.ck-floating-panel {
+	position: absolute;
+	display: none;
 
-		&.ck-toolbar_active {
-			display: block;
-		}
+	&_active {
+		display: block;
 	}
 }

+ 2 - 2
packages/ckeditor5-ui/theme/theme.scss

@@ -13,7 +13,7 @@
 @import 'components/dropdown';
 @import 'components/list';
 @import 'components/label';
-@import 'components/balloonpanel';
+@import 'components/panel/balloonpanel';
+@import 'components/panel/floatingpanel';
 @import 'components/editor';
 @import 'components/toolbar/stickytoolbar';
-@import 'components/toolbar/floatingtoolbar';