8
0
Quellcode durchsuchen

Refactoring after changes in `ckeditor5-ui-default`.

Oskar Wrobel vor 9 Jahren
Ursprung
Commit
3e2ca282cc

+ 5 - 1
packages/ckeditor5-link/src/link.js

@@ -194,7 +194,11 @@ export default class Link extends Feature {
 		} );
 
 		// Always focus editor on panel hide.
-		this.listenTo( panelModel, 'hide', () => viewDocument.focus() );
+		this.listenTo( balloonPanel.view.model, 'change:isVisible', ( evt, propertyName, value ) => {
+			if ( !value ) {
+				viewDocument.focus();
+			}
+		} );
 
 		// Hide panel on editor focus.
 		// @TODO replace it by some FocusManager.

+ 35 - 56
packages/ckeditor5-link/src/ui/linkballoonpanel.js

@@ -9,10 +9,8 @@ import ButtonView from '../../ui/button/buttonview.js';
 import BalloonPanel from '../../ui/balloonpanel/balloonpanel.js';
 import LabeledInput from '../../ui/labeledinput/labeledinput.js';
 import LabeledInputView from '../../ui/labeledinput/labeledinputview.js';
-import Form from '../../ui/form/form.js';
-import FormView from '../../ui/form/formview.js';
-import Box from '../../ui/box/box.js';
-import BoxView from '../../ui/box/boxview.js';
+import LinkForm from './linkform.js';
+import LinkFormView from './linkformview.js';
 
 /**
  * The link balloon panel controller class.
@@ -34,8 +32,8 @@ export default class LinkBalloonPanel extends BalloonPanel {
 	/**
 	 * Creates an instance of {@link link.ui.LinkBalloonPanel} class.
 	 *
-	 * @param {ui.balloonPanel.BalloonPanelModel} model Model of this balloon panel.
-	 * @param {ui.View} view View of this balloon panel.
+	 * @param {link.ui.balloonPanel.LinkBalloonPanelModel} model Model of this link balloon panel.
+	 * @param {ui.View} view View of this link balloon panel.
 	 */
 	constructor( model, view ) {
 		super( model, view );
@@ -59,11 +57,39 @@ export default class LinkBalloonPanel extends BalloonPanel {
 		 *
 		 * @member {ui.form.Form} link.ui.LinkBalloonPanel#form
 		 */
-		this.form = new Form( formModel, new FormView( this.locale ) );
+		this.form = new LinkForm( formModel, new LinkFormView( this.locale ) );
 
-		// Add Input and buttons as a form content.
+		/**
+		 * Button component for submitting form.
+		 *
+		 * @member {ui.button.Button} link.ui.LinkBalloonPanel#saveButton
+		 */
+		this.saveButton = this._createSaveButton();
+
+		/**
+		 * Button component for canceling form.
+		 *
+		 * @member {ui.button.Button} link.ui.LinkBalloonPanel#cancelButton
+		 */
+		this.cancelButton = this._createCancelButton();
+
+		/**
+		 * Button component for unlinking.
+		 *
+		 * @member {ui.button.Button} link.ui.LinkBalloonPanel#unlinkButton
+		 */
+		this.unlinkButton = this._createUnlinkButton();
+
+		// Add Input to the form content.
 		this.form.add( 'content', this._createLabeledInput() );
-		this.form.add( 'content', this._createButtons() );
+
+		// Add `Save` and `Cancel` buttons to the form actions.
+		this.form.add( 'actions', this.saveButton );
+		this.form.add( 'actions', this.cancelButton );
+		this.form.add( 'actions', this.unlinkButton );
+
+		// Add `Unlink` button to the form additional action.
+		// this.form.add( 'additionalActions', this.unlinkButton );
 
 		return this.form;
 	}
@@ -93,53 +119,6 @@ export default class LinkBalloonPanel extends BalloonPanel {
 	}
 
 	/**
-	 * Create {@link ui.box.Box Box} instance with `Cancel` and `Save` buttons.
-	 *
-	 * @private
-	 * @returns {ui.box.Box} Box component.
-	 */
-	_createButtons() {
-		const wrapper = new Box( new Model( {
-			alignContent: 'right'
-		} ), new BoxView( this.locale ) );
-		wrapper.view.element.classList.add( 'ck-link-balloon-panel_actions' );
-
-		const additionalActions = new Box( new Model(), new BoxView( this.locale ) );
-
-		/**
-		 * Button component for submitting form.
-		 *
-		 * @member {ui.button.Button} link.ui.LinkBalloonPanel#saveButton
-		 */
-		this.saveButton = this._createSaveButton();
-
-		/**
-		 * Button component for canceling form.
-		 *
-		 * @member {ui.button.Button} link.ui.LinkBalloonPanel#cancelButton
-		 */
-		this.cancelButton = this._createCancelButton();
-
-		/**
-		 * Button component for unlinking.
-		 *
-		 * @member {ui.button.Button} link.ui.LinkBalloonPanel#unlinkButton
-		 */
-		this.unlinkButton = this._createUnlinkButton();
-
-		// Add `Save`, `Cancel` and `Unlink` buttons as a wrapper content.
-		wrapper.add( 'content', this.saveButton );
-		wrapper.add( 'content', this.cancelButton );
-
-		// Append Unlink button into additional action box.
-		additionalActions.add( 'content', this.unlinkButton );
-
-		wrapper.add( 'content', additionalActions );
-
-		return wrapper;
-	}
-
-	/**
 	 * Initialize {@link ui.button.Button Button} for submitting form.
 	 *
 	 * @private

+ 30 - 0
packages/ckeditor5-link/src/ui/linkform.js

@@ -0,0 +1,30 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import Form from '../../ui/form/form.js';
+
+/**
+ * The link form class.
+ *
+ *		new LinkForm( new Model(), new LinkFormView() );
+ *
+ * See {@link link.ui.LinkFormView}.
+ *
+ * @memberOf link.ui
+ * @extends ui.form.Form
+ */
+export default class LinkForm extends Form {
+	/**
+	 * Creates an instance of {@link link.ui.LinkForm} class.
+	 *
+	 * @param {link.ui.LinkFormModel} model Model of this link form.
+	 * @param {ui.View} view View of this link form.
+	 */
+	constructor( model, view ) {
+		super( model, view );
+
+		this.addCollection( 'actions' );
+	}
+}

+ 45 - 0
packages/ckeditor5-link/src/ui/linkformview.js

@@ -0,0 +1,45 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import Template from '../../ui/template.js';
+import FormView from '../../ui/form/formview.js';
+
+/**
+ * The link form view controller class.
+ *
+ * See {@link link.ui.LinkForm}.
+ *
+ * @memberOf link.ui
+ * @extends ui.form.FormView
+ */
+export default class LinkFormView extends FormView {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale ) {
+		super( locale );
+
+		Template.extend( this.template, {
+			attributes: {
+				class: [
+					'ck-link-form',
+				]
+			}
+		} );
+
+		this.template.definition.children = [
+			{
+				tag: 'div',
+				attributes: {
+					class: [
+						'ck-link-form_actions'
+					]
+				}
+			}
+		];
+
+		this.register( 'actions', 'div.ck-link-form_actions' );
+	}
+}

+ 4 - 2
packages/ckeditor5-link/tests/link.js

@@ -209,10 +209,12 @@ describe( 'Link', () => {
 			expect( balloonPanel.view.model.isVisible ).to.true;
 		} );
 
-		it( 'should focus editor on balloonPanel#model hide event', () => {
+		it( 'should focus editor on balloonPanel hide', () => {
 			const focusSpy = sinon.spy( editor.editing.view, 'focus' );
 
-			balloonPanel.model.fire( 'hide' );
+			balloonPanel.view.model.isVisible = true;
+
+			balloonPanel.view.model.isVisible = false;
 
 			expect( focusSpy.calledOnce ).to.true;
 		} );

+ 23 - 11
packages/ckeditor5-link/tests/ui/linkballoonpanel.js

@@ -3,14 +3,14 @@
  * For licensing, see LICENSE.md.
  */
 
-/* bender-tags: ui, link */
+/* bender-tags: ui, balloonPanel */
 
 import LinkBalloonPanel from '/ckeditor5/link/ui/linkballoonpanel.js';
 import LinkBalloonPanelView from '/ckeditor5/link/ui/linkballoonpanelview.js';
 import BalloonPanel from '/ckeditor5/ui/balloonpanel/balloonpanel.js';
 import Model from '/ckeditor5/ui/model.js';
 
-import Form from '/ckeditor5/ui/form/form.js';
+import LinkForm from '/ckeditor5/link/ui/linkform.js';
 import LabeledInput from '/ckeditor5/ui/labeledinput/labeledinput.js';
 import Button from '/ckeditor5/ui/button/button.js';
 
@@ -36,11 +36,11 @@ describe( 'LinkBalloonPanel', () => {
 
 		describe( 'child components', () => {
 			describe( 'form', () => {
-				it( 'should create Form instance', () => {
-					expect( linkBalloonPanel.form ).to.instanceof( Form );
+				it( 'should be created', () => {
+					expect( linkBalloonPanel.form ).to.instanceof( LinkForm );
 				} );
 
-				it( 'should append to "content" collection', () => {
+				it( 'should be appended to "content" collection', () => {
 					expect( linkBalloonPanel.collections.get( 'content' ).get( 0 ) ).to.deep.equal( linkBalloonPanel.form );
 				} );
 
@@ -56,11 +56,11 @@ describe( 'LinkBalloonPanel', () => {
 			} );
 
 			describe( 'urlInput', () => {
-				it( 'should create LabeledInput instance', () => {
+				it( 'should be created', () => {
 					expect( linkBalloonPanel.urlInput ).to.instanceof( LabeledInput );
 				} );
 
-				it( 'should append to Form "content" collection', () => {
+				it( 'should be appended to the form "content" collection', () => {
 					expect( linkBalloonPanel.form.collections.get( 'content' ).get( 0 ) ).to.deep.equal( linkBalloonPanel.urlInput );
 				} );
 
@@ -74,10 +74,14 @@ describe( 'LinkBalloonPanel', () => {
 			} );
 
 			describe( 'saveButton', () => {
-				it( 'should create Button instance', () => {
+				it( 'should be created', () => {
 					expect( linkBalloonPanel.saveButton ).to.instanceof( Button );
 				} );
 
+				it( 'should be appended to the form "actions" collection', () => {
+					expect( linkBalloonPanel.form.collections.get( 'actions' ).get( 0 ) ).to.deep.equal( linkBalloonPanel.saveButton );
+				} );
+
 				it( 'should fire model#execute event on DOM click event', ( done ) => {
 					const executeSpy = sinon.spy();
 
@@ -91,16 +95,20 @@ describe( 'LinkBalloonPanel', () => {
 					} );
 				} );
 
-				it( 'should be a submit', () => {
+				it( 'should be a type `submit`', () => {
 					expect( linkBalloonPanel.saveButton.model.type ).to.equal( 'submit' );
 				} );
 			} );
 
 			describe( 'cancelButton', () => {
-				it( 'should create Button instance', () => {
+				it( 'should be created', () => {
 					expect( linkBalloonPanel.cancelButton ).to.instanceof( Button );
 				} );
 
+				it( 'should be appended to the form "actions" collection', () => {
+					expect( linkBalloonPanel.form.collections.get( 'actions' ).get( 1 ) ).to.deep.equal( linkBalloonPanel.cancelButton );
+				} );
+
 				it( 'should hide LinkBalloonPanel on cancelButton.model#execute event', () => {
 					const hideSpy = sinon.spy( linkBalloonPanel.view, 'hide' );
 
@@ -111,10 +119,14 @@ describe( 'LinkBalloonPanel', () => {
 			} );
 
 			describe( 'unlinkButton', () => {
-				it( 'should create Button instance', () => {
+				it( 'should be created', () => {
 					expect( linkBalloonPanel.unlinkButton ).to.instanceof( Button );
 				} );
 
+				it( 'should be appended to the form "actions" collection', () => {
+					expect( linkBalloonPanel.form.collections.get( 'actions' ).get( 2 ) ).to.deep.equal( linkBalloonPanel.unlinkButton );
+				} );
+
 				it( 'should fire model#execute-unlink event on unlinkButton.model#execute event', () => {
 					const executeUnlinkSpy = sinon.spy();
 

+ 1 - 1
packages/ckeditor5-link/tests/ui/linkballoonpanelview.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-/* bender-tags: ui, link */
+/* bender-tags: ui, balloonPanel */
 
 import LinkBalloonPanelView from '/ckeditor5/link/ui/linkballoonpanelview.js';
 import BalloonPanelView from '/ckeditor5/ui/balloonpanel/balloonpanelview.js';

+ 30 - 0
packages/ckeditor5-link/tests/ui/linkform.js

@@ -0,0 +1,30 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* bender-tags: ui, form */
+
+import LinkForm from '/ckeditor5/link/ui/linkform.js';
+import LinkFormView from '/ckeditor5/link/ui/linkformview.js';
+import Form from '/ckeditor5/ui/form/form.js';
+import Model from '/ckeditor5/ui/model.js';
+
+describe( 'LinkForm', () => {
+	let linkForm, view;
+
+	beforeEach( () => {
+		view = new LinkFormView();
+		linkForm = new LinkForm( new Model(), view );
+	} );
+
+	describe( 'constructor', () => {
+		it( 'should extend Form class', () => {
+			expect( linkForm ).to.instanceof( Form );
+		} );
+
+		it( 'should create empty "actions" collection', () => {
+			expect( linkForm.collections.get( 'actions' ) ).to.have.length( 0 );
+		} );
+	} );
+} );

+ 34 - 0
packages/ckeditor5-link/tests/ui/linkformview.js

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* bender-tags: ui, form */
+
+import LinkFormView from '/ckeditor5/link/ui/linkformview.js';
+import FormView from '/ckeditor5/ui/form/formview.js';
+
+describe( 'LinkFormView', () => {
+	let view;
+
+	beforeEach( () => {
+		view = new LinkFormView();
+
+		view.init();
+	} );
+
+	describe( 'constructor', () => {
+		it( 'should extend FormView class', () => {
+			expect( view ).to.instanceof( FormView );
+		} );
+
+		it( 'should create element from template', () => {
+			expect( view.element.classList.contains( 'ck-link-form' ) ).to.true;
+		} );
+
+		it( 'should register "actions" region', () => {
+			expect( view.regions.get( 1 ).name ).to.equal( 'actions' );
+			expect( view.regions.get( 1 ).element ).to.equal( view.element.querySelector( '.ck-link-form_actions' ) );
+		} );
+	} );
+} );

+ 8 - 7
packages/ckeditor5-link/theme/components/linkballoonpanel.scss

@@ -5,19 +5,20 @@
 	padding: ck-spacing();
 
 	// Box to accommodate buttons.
-	&_actions {
-		display: flex;
-		flex-direction: row-reverse;
+	.ck-link-form_actions {
+		clear: both;
 		padding-top: ck-spacing();
 
 		.ck-button {
+			float: right;
+
 			& + .ck-button {
 				margin-right: ck-spacing( 'medium' );
-			}
-		}
 
-		.ck-box {
-			flex-grow: 2;
+				& + .ck-button {
+					float: left;
+				}
+			}
 		}
 	}
 }