8
0
Просмотр исходного кода

Other: The toolbar should support a vertical offset from the top of the web page. Closes #60.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
1203116bdf

+ 17 - 1
packages/ckeditor5-editor-classic/src/classiceditorui.js

@@ -10,6 +10,7 @@
 import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
+import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig';
 
 /**
  * The classic editor UI class.
@@ -44,6 +45,14 @@ export default class ClassicEditorUI {
 		 */
 		this.focusTracker = new FocusTracker();
 
+		/**
+		 * A normalized `config.toolbar` object.
+		 *
+		 * @type {Object}
+		 * @private
+		 */
+		this._toolbarConfig = normalizeToolbarConfig( editor.config.get( 'toolbar' ) );
+
 		// Set–up the view.
 		view.set( 'width', editor.config.get( 'ui.width' ) );
 		view.set( 'height', editor.config.get( 'ui.height' ) );
@@ -52,6 +61,10 @@ export default class ClassicEditorUI {
 		view.toolbar.bind( 'isActive' ).to( this.focusTracker, 'isFocused' );
 		view.toolbar.limiterElement = view.element;
 
+		if ( this._toolbarConfig ) {
+			view.toolbar.viewportTopOffset = this._toolbarConfig.viewportTopOffset;
+		}
+
 		// Setup the editable.
 		const editingRoot = editor.editing.createRoot( 'div' );
 		view.editable.bind( 'isReadOnly' ).to( editingRoot );
@@ -67,7 +80,10 @@ export default class ClassicEditorUI {
 		const editor = this.editor;
 
 		this.view.init();
-		this.view.toolbar.fillFromConfig( editor.config.get( 'toolbar' ), this.componentFactory );
+
+		if ( this._toolbarConfig ) {
+			this.view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
+		}
 
 		enableToolbarKeyboardFocus( {
 			origin: editor.editing.view,

+ 73 - 10
packages/ckeditor5-editor-classic/tests/classiceditorui.js

@@ -27,20 +27,29 @@ describe( 'ClassicEditorUI', () => {
 		editorElement = document.createElement( 'div' );
 		document.body.appendChild( editorElement );
 
-		editor = new ClassicTestEditor( editorElement, {
+		return ClassicTestEditor.create( editorElement, {
 			toolbar: [ 'foo', 'bar' ],
 			ui: {
 				width: 100,
 				height: 200
 			}
+		} )
+		.then( newEditor => {
+			editor = newEditor;
+
+			view = new ClassicEditorUIView( editor.locale );
+			ui = new ClassicEditorUI( editor, view );
+			editable = editor.editing.view.getRoot();
+
+			ui.componentFactory.add( 'foo', viewCreator( 'foo' ) );
+			ui.componentFactory.add( 'bar', viewCreator( 'bar' ) );
 		} );
+	} );
 
-		view = new ClassicEditorUIView( editor.locale );
-		ui = new ClassicEditorUI( editor, view );
-		editable = editor.editing.view.getRoot();
+	afterEach( () => {
+		editorElement.remove();
 
-		ui.componentFactory.add( 'foo', viewCreator( 'foo' ) );
-		ui.componentFactory.add( 'bar', viewCreator( 'bar' ) );
+		editor.destroy();
 	} );
 
 	describe( 'constructor()', () => {
@@ -77,6 +86,31 @@ describe( 'ClassicEditorUI', () => {
 			it( 'sets view.toolbar#limiterElement', () => {
 				expect( view.toolbar.limiterElement ).to.equal( view.element );
 			} );
+
+			it( 'sets view.toolbar#viewportTopOffset', () => {
+				editorElement = document.createElement( 'div' );
+				document.body.appendChild( editorElement );
+
+				return ClassicTestEditor.create( editorElement, {
+					toolbar: {
+						items: [ 'foo', 'bar' ],
+						viewportTopOffset: 100
+					}
+				} )
+				.then( editor => {
+					view = new ClassicEditorUIView( editor.locale );
+					ui = new ClassicEditorUI( editor, view );
+					editable = editor.editing.view.getRoot();
+
+					ui.componentFactory.add( 'foo', viewCreator( 'foo' ) );
+					ui.componentFactory.add( 'bar', viewCreator( 'bar' ) );
+
+					expect( view.toolbar.viewportTopOffset ).to.equal( 100 );
+
+					editorElement.remove();
+					return editor.destroy();
+				} );
+			} );
 		} );
 
 		describe( 'editable', () => {
@@ -127,11 +161,40 @@ describe( 'ClassicEditorUI', () => {
 			sinon.assert.calledOnce( spy );
 		} );
 
-		it( 'fills view.toolbar#items with editor config', () => {
-			const spy = testUtils.sinon.spy( view.toolbar, 'fillFromConfig' );
+		describe( 'view.toolbar#items', () => {
+			it( 'are filled with the config.toolbar (specified as an Array)', () => {
+				const spy = testUtils.sinon.spy( view.toolbar, 'fillFromConfig' );
 
-			ui.init();
-			sinon.assert.calledWithExactly( spy, editor.config.get( 'toolbar' ), ui.componentFactory );
+				ui.init();
+				sinon.assert.calledWithExactly( spy, editor.config.get( 'toolbar' ), ui.componentFactory );
+			} );
+
+			it( 'are filled with the config.toolbar (specified as an Object)', () => {
+				editorElement = document.createElement( 'div' );
+				document.body.appendChild( editorElement );
+
+				return ClassicTestEditor.create( editorElement, {
+					toolbar: {
+						items: [ 'foo', 'bar' ],
+						viewportTopOffset: 100
+					}
+				} )
+				.then( editor => {
+					view = new ClassicEditorUIView( editor.locale );
+					ui = new ClassicEditorUI( editor, view );
+
+					ui.componentFactory.add( 'foo', viewCreator( 'foo' ) );
+					ui.componentFactory.add( 'bar', viewCreator( 'bar' ) );
+
+					const spy = testUtils.sinon.spy( view.toolbar, 'fillFromConfig' );
+
+					ui.init();
+					sinon.assert.calledWithExactly( spy,
+						editor.config.get( 'toolbar.items' ),
+						ui.componentFactory
+					);
+				} );
+			} );
 		} );
 
 		it( 'initializes keyboard navigation between view#toolbar and view#editable', () => {

+ 3 - 0
packages/ckeditor5-editor-classic/tests/classiceditoruiview.js

@@ -56,8 +56,11 @@ describe( 'ClassicEditorUIView', () => {
 		it( 'returns editable\'s view element', () => {
 			document.body.appendChild( view.element );
 
+			view.toolbar.limiterElement = view.element;
 			view.init();
+
 			expect( view.editableElement.getAttribute( 'contentEditable' ) ).to.equal( 'true' );
+
 			view.destroy();
 		} );
 	} );