8
0
فهرست منبع

Code refactoring.

Aleksander Nowodzinski 6 سال پیش
والد
کامیت
f179d37f1d

+ 2 - 3
packages/ckeditor5-table/src/tablecellpropertiesui.js

@@ -271,10 +271,9 @@ export default class TableCellPropertiesUI extends Plugin {
 		editor.editing.view.focus();
 		editor.editing.view.focus();
 
 
 		if ( this._isViewInBalloon ) {
 		if ( this._isViewInBalloon ) {
-			// TODO below
-			// Blur the input element before removing it from DOM to prevent issues in some browsers.
+			// Blur any input element before removing it from DOM to prevent issues in some browsers.
 			// See https://github.com/ckeditor/ckeditor5/issues/1501.
 			// See https://github.com/ckeditor/ckeditor5/issues/1501.
-			// this.formView.saveButtonView.focus();
+			this.view.saveButtonView.focus();
 
 
 			this._balloon.remove( this.view );
 			this._balloon.remove( this.view );
 
 

+ 82 - 0
packages/ckeditor5-table/src/ui/formrowview.js

@@ -0,0 +1,82 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/ui/formrowview
+ */
+
+import View from '@ckeditor/ckeditor5-ui/src/view';
+
+/**
+ * TODO
+ *
+ * @extends module:ui/view~View
+ */
+export default class FormRowView extends View {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale, options = {} ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		/**
+		 * An additional CSS class added to the {@link #element}.
+		 *
+		 * @observable
+		 * @member {String} #class
+		 */
+		this.set( 'class', options.class || null );
+
+		/**
+		 * TODO
+		 *
+		 * @observable
+		 * @member {String} #role
+		 */
+		this.set( '_role', null );
+
+		/**
+		 * TODO
+		 *
+		 * @member {String} #ariaLabelledBy
+		 */
+		this.set( '_ariaLabelledBy', null );
+
+		if ( options.labelView ) {
+			this.set( {
+				_role: 'group',
+				_ariaLabelledBy: options.labelView.id
+			} );
+		}
+
+		/**
+		 * A collection of row items (buttons, dropdowns, etc.).
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.children = this.createCollection();
+
+		if ( options.children ) {
+			options.children.forEach( child => this.children.add( child ) );
+		}
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck',
+					'ck-form__row',
+					bind.to( 'class' )
+				],
+				role: bind.to( '_role' ),
+				'aria-labelledby': bind.to( '_ariaLabelledBy' )
+			},
+			children: this.children
+		} );
+	}
+}

+ 70 - 100
packages/ckeditor5-table/src/ui/tablecellpropertiesview.js

@@ -24,8 +24,6 @@ import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dr
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
 
-import uid from '@ckeditor/ckeditor5-utils/src/uid';
-
 import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 
 
@@ -41,6 +39,7 @@ import alignBottomIcon from '../../theme/icons/align-bottom.svg';
 
 
 import '../../theme/form.css';
 import '../../theme/form.css';
 import '../../theme/tablecellproperties.css';
 import '../../theme/tablecellproperties.css';
+import FormRowView from './formrowview';
 
 
 const ALIGNMENT_ICONS = {
 const ALIGNMENT_ICONS = {
 	left: alignLeftIcon,
 	left: alignLeftIcon,
@@ -125,6 +124,45 @@ export default class TableCellPropertiesView extends View {
 			verticalAlignment: 'middle'
 			verticalAlignment: 'middle'
 		} );
 		} );
 
 
+		const borderRowView = new FormRowView( locale, {
+			labelView: this.borderRowLabel,
+			children: [
+				this.borderRowLabel,
+				this.borderStyleDropdown,
+				this.borderColorInput,
+				this.borderWidthInput
+			]
+		} );
+
+		borderRowView.class = 'ck-table-cell-properties-form__border-row';
+
+		const paddingBackgroundRowView = new FormRowView( locale, {
+			children: [
+				this.backgroundInput,
+				this.paddingInput,
+			]
+		} );
+
+		const alignmentRowView = new FormRowView( locale, {
+			labelView: this.alignmentLabel,
+			children: [
+				this.alignmentLabel,
+				this.horizontalAlignmentToolbar,
+				this.verticalAlignmentToolbar,
+			]
+		} );
+
+		alignmentRowView.class = 'ck-table-cell-properties-form__alignment-row';
+
+		const actionRowView = new FormRowView( locale, {
+			children: [
+				this.saveButtonView,
+				this.cancelButtonView,
+			]
+		} );
+
+		actionRowView.class = 'ck-table-form__action-row';
+
 		this.setTemplate( {
 		this.setTemplate( {
 			tag: 'form',
 			tag: 'form',
 			attributes: {
 			attributes: {
@@ -150,60 +188,10 @@ export default class TableCellPropertiesView extends View {
 					]
 					]
 				},
 				},
 
 
-				// Border
-				createFormRowDefinition( {
-					ariaLabelledBy: this.borderRowLabel,
-					className: 'ck-table-cell-properties-form__border-row',
-					children: [
-						this.borderRowLabel,
-
-						// TODO: This should become a new component or be integrated into LabeledInputView.
-						{
-							tag: 'div',
-							attributes: {
-								class: [
-									'ck',
-									'ck-labeled-dropdown',
-									'ck-table-cell-properties-form__border-style'
-								],
-							},
-							children: [
-								this.borderStyleDropdownLabel,
-								this.borderStyleDropdown,
-							]
-						},
-						this.borderColorInput,
-						this.borderWidthInput,
-					]
-				} ),
-
-				// Background & Padding
-				createFormRowDefinition( {
-					children: [
-						this.backgroundInput,
-						this.paddingInput,
-					]
-				} ),
-
-				// Alignment
-				createFormRowDefinition( {
-					ariaLabelledBy: this.alignmentLabel,
-					className: 'ck-table-cell-properties-form__alignment-row',
-					children: [
-						this.alignmentLabel,
-						this.horizontalAlignmentToolbar,
-						this.verticalAlignmentToolbar
-					]
-				} ),
-
-				// Action buttons
-				createFormRowDefinition( {
-					className: 'ck-table-form__action-row',
-					children: [
-						this.saveButtonView,
-						this.cancelButtonView
-					]
-				} )
+				borderRowView,
+				paddingBackgroundRowView,
+				alignmentRowView,
+				actionRowView
 			]
 			]
 		} );
 		} );
 	}
 	}
@@ -220,10 +208,10 @@ export default class TableCellPropertiesView extends View {
 
 
 		const focusableChildViews = [
 		const focusableChildViews = [
 			this.borderStyleDropdown,
 			this.borderStyleDropdown,
-			this.borderWidthInput,
 			this.borderColorInput,
 			this.borderColorInput,
-			this.paddingInput,
+			this.borderWidthInput,
 			this.backgroundInput,
 			this.backgroundInput,
+			this.paddingInput,
 			this.horizontalAlignmentToolbar,
 			this.horizontalAlignmentToolbar,
 			this.verticalAlignmentToolbar,
 			this.verticalAlignmentToolbar,
 			this.saveButtonView,
 			this.saveButtonView,
@@ -259,7 +247,7 @@ export default class TableCellPropertiesView extends View {
 
 
 		// -- Style ---------------------------------------------------
 		// -- Style ---------------------------------------------------
 
 
-		const borderStyleDropdown = this.borderStyleDropdown = createDropdown( locale );
+		const borderStyleDropdown = createDropdown( locale );
 		borderStyleDropdown.buttonView.set( {
 		borderStyleDropdown.buttonView.set( {
 			isOn: false,
 			isOn: false,
 			withText: true,
 			withText: true,
@@ -284,8 +272,29 @@ export default class TableCellPropertiesView extends View {
 
 
 		addListToDropdown( borderStyleDropdown, this._getBorderStyleDefinitions() );
 		addListToDropdown( borderStyleDropdown, this._getBorderStyleDefinitions() );
 
 
-		this.borderStyleDropdownLabel = new LabelView( locale );
-		this.borderStyleDropdownLabel.text = t( 'Style' );
+		const borderStyleLabel = new LabelView( locale );
+		borderStyleLabel.text = t( 'Style' );
+
+		// TODO: This should become a new component or be integrated into LabeledInputView.
+		this.borderStyleDropdown = new View( locale );
+		this.borderStyleDropdown.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck',
+					'ck-labeled-dropdown',
+					'ck-table-cell-properties-form__border-style'
+				],
+			},
+			children: [
+				borderStyleLabel,
+				borderStyleDropdown,
+			]
+		} );
+
+		this.borderStyleDropdown.focus = () => {
+			borderStyleDropdown.focus();
+		};
 
 
 		// -- Width ---------------------------------------------------
 		// -- Width ---------------------------------------------------
 
 
@@ -540,42 +549,3 @@ function createAlignmentButton( locale, label, icon ) {
 
 
 	return button;
 	return button;
 }
 }
-
-function createFormRowDefinition( {
-	children,
-	className,
-	ariaLabelledBy
-} ) {
-	const def = {
-		tag: 'div',
-		attributes: {
-			class: [
-				'ck',
-				'ck-form__row'
-			]
-		},
-		children
-	};
-
-	// Note: Flexbox does not work on fieldset elements in Chrome
-	// (https://bugs.chromium.org/p/chromium/issues/detail?id=375693).
-	// This is why "role" is used and the label has an id. It's a hack but better than nothing.
-	if ( ariaLabelledBy ) {
-		const id = `ck-editor__aria-label_${ uid() }`;
-
-		ariaLabelledBy.extendTemplate( {
-			attributes: {
-				id
-			}
-		} );
-
-		def.attributes.role = 'group';
-		def.attributes[ 'aria-labelledby' ] = id;
-	}
-
-	if ( className ) {
-		def.attributes.class.push( className );
-	}
-
-	return def;
-}