Преглед изворни кода

Review dropdown creation process in `FontSizeUI` and `FontFamilyUI`.

Maciej Gołaszewski пре 8 година
родитељ
комит
fa0fa1ba71

+ 33 - 28
packages/ckeditor5-font/src/fontfamily/fontfamilyui.js

@@ -28,51 +28,29 @@ export default class FontFamilyUI extends Plugin {
 		const editor = this.editor;
 		const editor = this.editor;
 		const t = editor.t;
 		const t = editor.t;
 
 
-		const dropdownItems = new Collection();
-
 		const options = this._getLocalizedOptions();
 		const options = this._getLocalizedOptions();
 
 
 		const command = editor.commands.get( 'fontFamily' );
 		const command = editor.commands.get( 'fontFamily' );
 
 
-		// Create dropdown items.
-		for ( const option of options ) {
-			const itemModel = new Model( {
-				commandName: 'fontFamily',
-				commandParam: option.model,
-				label: option.title
-			} );
-
-			itemModel.bind( 'isActive' ).to( command, 'value', value => value === option.model );
-
-			// Try to set a dropdown list item style.
-			if ( option.view && option.view.style ) {
-				itemModel.set( 'style', `font-family: ${ option.view.style[ 'font-family' ] }` );
-			}
-
-			dropdownItems.add( itemModel );
-		}
-
 		// Register UI component.
 		// Register UI component.
 		editor.ui.componentFactory.add( 'fontFamily', locale => {
 		editor.ui.componentFactory.add( 'fontFamily', locale => {
 			const dropdownView = createDropdown( locale );
 			const dropdownView = createDropdown( locale );
-			addListViewToDropdown( dropdownView, dropdownItems );
+			addListViewToDropdown( dropdownView, _prepareListOptions( options, command ) );
 
 
 			dropdownView.set( {
 			dropdownView.set( {
+				label: t( 'Font Family' ),
 				icon: fontFamilyIcon,
 				icon: fontFamilyIcon,
-				withText: false,
-				tooltip: t( 'Font Family' )
+				tooltip: true
 			} );
 			} );
 
 
-			dropdownView.bind( 'isEnabled' ).to( command, 'isEnabled' );
-
 			dropdownView.extendTemplate( {
 			dropdownView.extendTemplate( {
 				attributes: {
 				attributes: {
-					class: [
-						'ck-font-family-dropdown'
-					]
+					class: 'ck-font-family-dropdown'
 				}
 				}
 			} );
 			} );
 
 
+			dropdownView.bind( 'isEnabled' ).to( command );
+
 			// Execute command when an item from the dropdown is selected.
 			// Execute command when an item from the dropdown is selected.
 			this.listenTo( dropdownView, 'execute', evt => {
 			this.listenTo( dropdownView, 'execute', evt => {
 				editor.execute( evt.source.commandName, { value: evt.source.commandParam } );
 				editor.execute( evt.source.commandName, { value: evt.source.commandParam } );
@@ -110,3 +88,30 @@ export default class FontFamilyUI extends Plugin {
 		} );
 		} );
 	}
 	}
 }
 }
+
+// Prepares FontFamily dropdown items.
+// @private
+// @param {Array.<module:font/fontsize~FontSizeOption>} options
+// @param {module:font/fontsize/fontsizecommand~FontSizeCommand} command
+function _prepareListOptions( options, command ) {
+	const dropdownItems = new Collection();
+
+	// Create dropdown items.
+	for ( const option of options ) {
+		const itemModel = new Model( {
+			commandName: 'fontFamily',
+			commandParam: option.model,
+			label: option.title
+		} );
+
+		itemModel.bind( 'isActive' ).to( command, 'value', value => value === option.model );
+
+		// Try to set a dropdown list item style.
+		if ( option.view && option.view.style ) {
+			itemModel.set( 'style', `font-family: ${ option.view.style[ 'font-family' ] }` );
+		}
+
+		dropdownItems.add( itemModel );
+	}
+	return dropdownItems;
+}

+ 38 - 29
packages/ckeditor5-font/src/fontsize/fontsizeui.js

@@ -28,49 +28,24 @@ export default class FontSizeUI extends Plugin {
 	 */
 	 */
 	init() {
 	init() {
 		const editor = this.editor;
 		const editor = this.editor;
-		const dropdownItems = new Collection();
+		const t = editor.t;
 
 
 		const options = this._getLocalizedOptions();
 		const options = this._getLocalizedOptions();
-		const t = editor.t;
 
 
 		const command = editor.commands.get( 'fontSize' );
 		const command = editor.commands.get( 'fontSize' );
 
 
-		for ( const option of options ) {
-			const itemModel = new Model( {
-				commandName: 'fontSize',
-				commandParam: option.model,
-				label: option.title,
-				class: 'ck-fontsize-option'
-			} );
-
-			if ( option.view && option.view.style ) {
-				itemModel.set( 'style', `font-size:${ option.view.style[ 'font-size' ] }` );
-			}
-
-			if ( option.view && option.view.class ) {
-				itemModel.set( 'class', `${ itemModel.class } ${ option.view.class }` );
-			}
-
-			itemModel.bind( 'isActive' ).to( command, 'value', value => value === option.model );
-
-			// Add the option to the collection.
-			dropdownItems.add( itemModel );
-		}
-
 		// Register UI component.
 		// Register UI component.
 		editor.ui.componentFactory.add( 'fontSize', locale => {
 		editor.ui.componentFactory.add( 'fontSize', locale => {
 			const dropdownView = createDropdown( locale );
 			const dropdownView = createDropdown( locale );
-			addListViewToDropdown( dropdownView, dropdownItems );
+			addListViewToDropdown( dropdownView, _prepareListOptions( options, command ) );
 
 
 			// Create dropdown model.
 			// Create dropdown model.
 			dropdownView.set( {
 			dropdownView.set( {
+				label: t( 'Font Size' ),
 				icon: fontSizeIcon,
 				icon: fontSizeIcon,
-				withText: false,
-				tooltip: t( 'Font Size' )
+				tooltip: true
 			} );
 			} );
 
 
-			dropdownView.bind( 'isEnabled' ).to( command, 'isEnabled' );
-
 			dropdownView.extendTemplate( {
 			dropdownView.extendTemplate( {
 				attributes: {
 				attributes: {
 					class: [
 					class: [
@@ -79,6 +54,8 @@ export default class FontSizeUI extends Plugin {
 				}
 				}
 			} );
 			} );
 
 
+			dropdownView.bind( 'isEnabled' ).to( command );
+
 			// Execute command when an item from the dropdown is selected.
 			// Execute command when an item from the dropdown is selected.
 			this.listenTo( dropdownView, 'execute', evt => {
 			this.listenTo( dropdownView, 'execute', evt => {
 				editor.execute( evt.source.commandName, { value: evt.source.commandParam } );
 				editor.execute( evt.source.commandName, { value: evt.source.commandParam } );
@@ -126,3 +103,35 @@ export default class FontSizeUI extends Plugin {
 		} );
 		} );
 	}
 	}
 }
 }
+
+// Prepares FontSize dropdown items.
+// @private
+// @param {Array.<module:font/fontsize~FontSizeOption>} options
+// @param {module:font/fontsize/fontsizecommand~FontSizeCommand} command
+function _prepareListOptions( options, command ) {
+	const dropdownItems = new Collection();
+
+	for ( const option of options ) {
+		const itemModel = new Model( {
+			commandName: 'fontSize',
+			commandParam: option.model,
+			label: option.title,
+			class: 'ck-fontsize-option'
+		} );
+
+		if ( option.view && option.view.style ) {
+			itemModel.set( 'style', `font-size:${ option.view.style[ 'font-size' ] }` );
+		}
+
+		if ( option.view && option.view.class ) {
+			itemModel.set( 'class', `${ itemModel.class } ${ option.view.class }` );
+		}
+
+		itemModel.bind( 'isActive' ).to( command, 'value', value => value === option.model );
+
+		// Add the option to the collection.
+		dropdownItems.add( itemModel );
+	}
+
+	return dropdownItems;
+}

+ 3 - 3
packages/ckeditor5-font/tests/fontfamily/fontfamilyui.js

@@ -65,9 +65,9 @@ describe( 'FontFamilyUI', () => {
 		it( 'button has the base properties', () => {
 		it( 'button has the base properties', () => {
 			const button = dropdown.buttonView;
 			const button = dropdown.buttonView;
 
 
-			expect( button ).to.have.property( 'tooltip', 'Font Family' );
+			expect( button ).to.have.property( 'label', 'Font Family' );
+			expect( button ).to.have.property( 'tooltip', true );
 			expect( button ).to.have.property( 'icon', fontFamilyIcon );
 			expect( button ).to.have.property( 'icon', fontFamilyIcon );
-			expect( button ).to.have.property( 'withText', false );
 		} );
 		} );
 
 
 		it( 'should add custom CSS class to dropdown', () => {
 		it( 'should add custom CSS class to dropdown', () => {
@@ -123,7 +123,7 @@ describe( 'FontFamilyUI', () => {
 			it( 'works for the #buttonView', () => {
 			it( 'works for the #buttonView', () => {
 				const buttonView = dropdown.buttonView;
 				const buttonView = dropdown.buttonView;
 
 
-				expect( buttonView.tooltip ).to.equal( 'Czcionka' );
+				expect( buttonView.label ).to.equal( 'Czcionka' );
 			} );
 			} );
 
 
 			it( 'works for the listView#items in the panel', () => {
 			it( 'works for the listView#items in the panel', () => {

+ 3 - 3
packages/ckeditor5-font/tests/fontsize/fontsizeui.js

@@ -74,9 +74,9 @@ describe( 'FontSizeUI', () => {
 		it( 'button has the base properties', () => {
 		it( 'button has the base properties', () => {
 			const button = dropdown.buttonView;
 			const button = dropdown.buttonView;
 
 
-			expect( button ).to.have.property( 'tooltip', 'Font Size' );
+			expect( button ).to.have.property( 'label', 'Font Size' );
+			expect( button ).to.have.property( 'tooltip', true );
 			expect( button ).to.have.property( 'icon', fontSizeIcon );
 			expect( button ).to.have.property( 'icon', fontSizeIcon );
-			expect( button ).to.have.property( 'withText', false );
 		} );
 		} );
 
 
 		it( 'should add custom CSS class to dropdown', () => {
 		it( 'should add custom CSS class to dropdown', () => {
@@ -214,7 +214,7 @@ describe( 'FontSizeUI', () => {
 			it( 'works for the #buttonView', () => {
 			it( 'works for the #buttonView', () => {
 				const buttonView = dropdown.buttonView;
 				const buttonView = dropdown.buttonView;
 
 
-				expect( buttonView.tooltip ).to.equal( 'Rozmiar czcionki' );
+				expect( buttonView.label ).to.equal( 'Rozmiar czcionki' );
 			} );
 			} );
 
 
 			it( 'works for the listView#items in the panel', () => {
 			it( 'works for the listView#items in the panel', () => {