Procházet zdrojové kódy

Moved views to the ui-default package. Kept only bindings. Changed the order of params in the UI compoments so editor is last what allows using normal controller if components doesn't have bindings.

Piotrek Koszuliński před 9 roky
rodič
revize
ba18d20a16

+ 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 );
-		} );
-	} );
-} );