Bläddra i källkod

Merge branch 't/227'. Closes #227.

Aleksander Nowodzinski 9 år sedan
förälder
incheckning
da46dbb862

+ 42 - 0
packages/ckeditor5-engine/src/ui/bindings/toolbar.js

@@ -0,0 +1,42 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import BaseToolbar from '../../../ui/toolbar/toolbar.js';
+
+/**
+ * The editor toolbar controller class.
+ *
+ * @memberOf core.ui.bindings
+ * @extends ui.toolbar.Toolbar
+ */
+
+export default class Toolbar extends BaseToolbar {
+	/**
+	 * Creates a new toolbar instance.
+	 *
+	 * @param {core.ui.Model} model
+	 * @param {core.ui.View} view
+	 * @param {core.Editor} editor
+	 */
+	constructor( model, view, editor ) {
+		super( model, view );
+
+		this.editor = editor;
+	}
+
+	/**
+	 * Adds buttons to the toolbar. Buttons are taken from the {@link core.editorUI.EditorUI#featureComponents}
+	 * factory.
+	 *
+	 * @param {String[]} buttons The name of the buttons to add to the toolbar.
+	 */
+	addButtons( buttons ) {
+		for ( let button of buttons ) {
+			this.add( 'buttons', this.editor.ui.featureComponents.create( button ) );
+		}
+	}
+}

+ 0 - 54
packages/ckeditor5-engine/src/ui/button/button.js

@@ -1,54 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-import Controller from '../controller.js';
-
-/**
- * The basic button controller class.
- *
- * @memberOf core.ui.button
- * @extends core.ui.Controller
- */
-
-export default class Button extends Controller {
-	constructor( model, view ) {
-		super( model, view );
-
-		view.on( 'click', () => model.fire( 'execute' ) );
-	}
-}
-
-/**
- * The basic button model interface.
- *
- * @memberOf core.ui.button
- * @interface ButtonModel
- */
-
-/**
- * The label of the button.
- *
- * @member {String} core.ui.button.ButtonModel#label
- */
-
-/**
- * Whether the button is "on" (e.g. some feature which this button represents is currently enabled).
- *
- * @member {Boolean} core.ui.button.ButtonModel#isOn
- */
-
-/**
- * Whether the button is enabled (can be clicked).
- *
- * @member {Boolean} core.ui.button.ButtonModel#isEnabled
- */
-
-/**
- * Fired when the button action should be executed.
- *
- * @event core.ui.button.ButtonModel#execute
- */

+ 0 - 61
packages/ckeditor5-engine/src/ui/button/buttonview.js

@@ -1,61 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-import View from '../view.js';
-
-/**
- * The basic button view class.
- *
- * @memberOf core.ui.button
- * @extends core.ui.View
- */
-
-export default class ButtonView extends View {
-	constructor( model ) {
-		super( model );
-
-		const bind = this.attributeBinder;
-
-		this.template = {
-			tag: 'button',
-
-			attributes: {
-				class: [
-					'ck-button',
-					bind.to( 'isEnabled', value => value ? 'ck-enabled' : 'ck-disabled' ),
-					bind.to( 'isOn', value => value ? 'ck-on' : 'ck-off' )
-				]
-			},
-
-			children: [
-				{
-					text: bind.to( 'label' )
-				}
-			],
-
-			on: {
-				mousedown: ( evt ) => {
-					evt.preventDefault();
-				},
-
-				click: () => {
-					// We can't make the button disabled using the disabled attribute, because it won't be focusable.
-					// Though, shouldn't this condition be moved to the button controller?
-					if ( model.isEnabled ) {
-						this.fire( 'click' );
-					}
-				}
-			}
-		};
-	}
-}
-
-/**
- * Fired when the button is being clicked. It won't be fired when the button is disabled.
- *
- * @event core.ui.button.ButtonView#click
- */

+ 1 - 1
packages/ckeditor5-engine/src/ui/componentfactory.js

@@ -75,7 +75,7 @@ export default class ComponentFactory {
 
 		const model = component.model;
 		const view = new component.ViewClass( model );
-		const controller = new component.ControllerClass( this.editor, model, view );
+		const controller = new component.ControllerClass( model, view, this.editor );
 
 		return controller;
 	}

+ 0 - 24
packages/ckeditor5-engine/src/ui/toolbar/toolbar.js

@@ -1,24 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-import Controller from '../controller.js';
-import ControllerCollection from '../controllercollection.js';
-
-/**
- * The basic toolbar controller class.
- *
- * @memberOf core.ui.toolbar
- * @extends core.ui.Controller
- */
-
-export default class Toolbar extends Controller {
-	constructor( model, view ) {
-		super( model, view );
-
-		this.collections.add( new ControllerCollection( 'buttons' ) );
-	}
-}

+ 0 - 30
packages/ckeditor5-engine/src/ui/toolbar/toolbarview.js

@@ -1,30 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-import View from '../view.js';
-
-/**
- * The basic toolbar view class.
- *
- * @memberOf core.ui.toolbar
- * @extends core.ui.View
- */
-
-export default class ToolbarView extends View {
-	constructor( model ) {
-		super( model );
-
-		this.template = {
-			tag: 'div',
-			attributes: {
-				class: [ 'ck-toolbar' ]
-			}
-		};
-
-		this.register( 'buttons', el => el );
-	}
-}

+ 3 - 3
packages/ckeditor5-engine/tests/_utils/ui/floatingtoolbar/floatingtoolbar.js

@@ -5,11 +5,11 @@
 
 'use strict';
 
-import Toolbar from '/ckeditor5/ui/toolbar/toolbar.js';
+import Toolbar from '/ckeditor5/core/ui/bindings/toolbar.js';
 
 export default class FloatingToolbar extends Toolbar {
-	constructor( editor, model, view ) {
-		super( editor, model, view );
+	constructor( model, view, editor ) {
+		super( model, view, editor );
 
 		model.bind( 'isVisible' ).to( editor.editable, 'isFocused' );
 	}

+ 2 - 2
packages/ckeditor5-engine/tests/creator/manual/_utils/creator/classiccreator.js

@@ -11,7 +11,7 @@ import BoxedEditorUIView from '/tests/core/_utils/ui/boxededitorui/boxededitorui
 import FramedEditable from '/tests/core/_utils/ui/editable/framed/framededitable.js';
 import FramedEditableView from '/tests/core/_utils/ui/editable/framed/framededitableview.js';
 import Model from '/ckeditor5/core/ui/model.js';
-import Toolbar from '/ckeditor5/ui/toolbar/toolbar.js';
+import Toolbar from '/ckeditor5/core/ui/bindings/toolbar.js';
 import ToolbarView from '/ckeditor5/ui/toolbar/toolbarview.js';
 import { imitateFeatures, imitateDestroyFeatures } from '../imitatefeatures.js';
 
@@ -49,7 +49,7 @@ export default class ClassicCreator extends Creator {
 	}
 
 	_setupToolbar() {
-		const toolbar = new Toolbar( this.editor, new Model(), new ToolbarView() );
+		const toolbar = new Toolbar( new Model(), new ToolbarView(), this.editor );
 
 		toolbar.addButtons( this.editor.config.toolbar );
 

+ 2 - 2
packages/ckeditor5-engine/tests/creator/manual/_utils/creator/inlinecreator.js

@@ -50,8 +50,8 @@ export default class InlineCreator extends Creator {
 		const toolbar1Model = new Model();
 		const toolbar2Model = new Model();
 
-		const toolbar1 = new FloatingToolbar( this.editor, toolbar1Model, new FloatingToolbarView( toolbar1Model ) );
-		const toolbar2 = new FloatingToolbar( this.editor, toolbar2Model, new FloatingToolbarView( toolbar2Model ) );
+		const toolbar1 = new FloatingToolbar( toolbar1Model, new FloatingToolbarView( toolbar1Model ), this.editor );
+		const toolbar2 = new FloatingToolbar( toolbar2Model, new FloatingToolbarView( toolbar2Model ), this.editor );
 
 		toolbar1.addButtons( this.editor.config.toolbar );
 		toolbar2.addButtons( this.editor.config.toolbar.reverse() );

+ 64 - 0
packages/ckeditor5-engine/tests/ui/bindings/toolbar.js

@@ -0,0 +1,64 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* bender-tags: ui, toolbar */
+
+'use strict';
+
+import Editor from '/ckeditor5/core/editor.js';
+import Model from '/ckeditor5/core/ui/model.js';
+import View from '/ckeditor5/core/ui/view.js';
+import Controller from '/ckeditor5/core/ui/controller.js';
+import Toolbar from '/ckeditor5/core/ui/bindings/toolbar.js';
+
+describe( 'Toolbar', () => {
+	let toolbar, view, model, editor;
+
+	beforeEach( () => {
+		editor = new Editor();
+		model = new Model();
+		view = new View( model );
+		toolbar = new Toolbar( view, model, editor );
+	} );
+
+	describe( 'constructor', () => {
+		it( 'sets all the properties', () => {
+			expect( toolbar ).to.have.property( 'editor', editor );
+		} );
+	} );
+
+	describe( 'addButtons', () => {
+		it( 'creates buttons for each button name', () => {
+			const createSpy = sinon.spy( () => new Controller() );
+
+			editor.ui = {
+				featureComponents: {
+					create: createSpy
+				}
+			};
+
+			toolbar.addButtons( [ 'foo', 'bar' ] );
+
+			expect( createSpy.callCount ).to.equal( 2 );
+			expect( createSpy.firstCall.calledWith( 'foo' ) ).to.be.true;
+			expect( createSpy.secondCall.calledWith( 'bar' ) ).to.be.true;
+		} );
+
+		it( 'adds created compoments to the collection of buttons', () => {
+			const component = new Controller();
+			const createSpy = sinon.spy( () => component );
+
+			editor.ui = {
+				featureComponents: {
+					create: createSpy
+				}
+			};
+
+			toolbar.addButtons( [ 'foo' ] );
+
+			expect( toolbar.collections.get( 'buttons' ).get( 0 ) ).to.equal( component );
+		} );
+	} );
+} );

+ 0 - 34
packages/ckeditor5-engine/tests/ui/button/button.js

@@ -1,34 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* bender-tags: ui, button */
-
-'use strict';
-
-import Button from '/ckeditor5/core/ui/button/button.js';
-import View from '/ckeditor5/core/ui/view.js';
-import Model from '/ckeditor5/core/ui/model.js';
-
-describe( 'Button', () => {
-	let model, button, view;
-
-	beforeEach( () => {
-		model = new Model();
-		view = new View();
-		button = new Button( model, view );
-	} );
-
-	describe( 'constructor', () => {
-		it( 'creates view#click -> model#execute binding', () => {
-			const spy = sinon.spy();
-
-			model.on( 'execute', spy );
-
-			view.fire( 'click' );
-
-			expect( spy.calledOnce ).to.be.true;
-		} );
-	} );
-} );

+ 0 - 84
packages/ckeditor5-engine/tests/ui/button/buttonview.js

@@ -1,84 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* bender-tags: ui, button */
-
-'use strict';
-
-import ButtonView from '/ckeditor5/core/ui/button/buttonview.js';
-import Model from '/ckeditor5/core/ui/model.js';
-
-describe( 'ButtonView', () => {
-	let model, view;
-
-	beforeEach( () => {
-		model = new Model( {
-			label: 'foo',
-			isEnabled: true,
-			isOn: false
-		} );
-		view = new ButtonView( model );
-
-		return view.init();
-	} );
-
-	describe( '<button> bindings', () => {
-		describe( 'class', () => {
-			it( 'is set initially', () => {
-				expect( view.element.classList.contains( 'ck-button' ) ).to.be.true( 'ck-button' );
-				expect( view.element.classList.contains( 'ck-enabled' ) ).to.be.true( 'ck-enabled' );
-				expect( view.element.classList.contains( 'ck-off' ) ).to.be.true( 'ck-off' );
-			} );
-
-			it( 'reacts on model.isEnabled', () => {
-				model.isEnabled = false;
-
-				expect( view.element.classList.contains( 'ck-disabled' ) ).to.be.true( 'ck-disabled' );
-			} );
-
-			it( 'reacts on model.isOn', () => {
-				model.isOn = true;
-
-				expect( view.element.classList.contains( 'ck-on' ) ).to.be.true( 'ck-on' );
-			} );
-		} );
-
-		describe( 'text', () => {
-			it( 'is set initially', () => {
-				expect( view.element.textContent ).to.equal( 'foo' );
-			} );
-
-			it( 'reacts on model.label', () => {
-				model.label = 'bar';
-
-				expect( view.element.textContent ).to.equal( 'bar' );
-			} );
-		} );
-
-		describe( 'mousedown event', () => {
-			it( 'should be prevented', () => {
-				const ret = view.element.dispatchEvent( new Event( 'mousedown', { cancelable: true } ) );
-
-				expect( ret ).to.be.false;
-			} );
-		} );
-
-		describe( 'click event', () => {
-			it( 'triggers click event if button is not disabled', () => {
-				const spy = sinon.spy();
-
-				view.on( 'click', spy );
-
-				view.element.dispatchEvent( new Event( 'click' ) );
-				expect( spy.callCount ).to.equal( 1 );
-
-				model.isEnabled = false;
-
-				view.element.dispatchEvent( new Event( 'click' ) );
-				expect( spy.callCount ).to.equal( 1 );
-			} );
-		} );
-	} );
-} );

+ 2 - 2
packages/ckeditor5-engine/tests/ui/componentfactory.js

@@ -40,10 +40,10 @@ describe( 'ComponentFactory', () => {
 			class View {}
 
 			class Controller {
-				constructor( ed, model, view ) {
-					expect( ed ).to.equal( editor );
+				constructor( model, view, ed ) {
 					expect( model ).to.equal( model );
 					expect( view ).to.be.instanceof( View );
+					expect( ed ).to.equal( editor );
 				}
 			}
 

+ 0 - 25
packages/ckeditor5-engine/tests/ui/toolbar/toolbar.js

@@ -1,25 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* bender-tags: ui, toolbar */
-
-'use strict';
-
-import Toolbar from '/ckeditor5/core/ui/toolbar/toolbar.js';
-import ControllerCollection from '/ckeditor5/core/ui/controllercollection.js';
-
-describe( 'Toolbar', () => {
-	let toolbar;
-
-	beforeEach( () => {
-		toolbar = new Toolbar();
-	} );
-
-	describe( 'constructor', () => {
-		it( 'creates buttons collection', () => {
-			expect( toolbar.collections.get( 'buttons' ) ).to.be.instanceof( ControllerCollection );
-		} );
-	} );
-} );

+ 0 - 34
packages/ckeditor5-engine/tests/ui/toolbar/toolbarview.js

@@ -1,34 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* bender-tags: ui, toolbar */
-
-'use strict';
-
-import ToolbarView from '/ckeditor5/core/ui/toolbar/toolbarview.js';
-import Model from '/ckeditor5/core/ui/model.js';
-
-describe( 'ToolbarView', () => {
-	let model, view;
-
-	beforeEach( () => {
-		model = new Model();
-		view = new ToolbarView( model );
-
-		return view.init();
-	} );
-
-	describe( 'the main element bindings', () => {
-		it( 'is fine', () => {
-			expect( view.element.classList.contains( 'ck-toolbar' ) );
-		} );
-	} );
-
-	describe( 'buttons region', () => {
-		it( 'is bound to the main element', () => {
-			expect( view.regions.get( 'buttons' ).element ).to.equal( view.element );
-		} );
-	} );
-} );