Kaynağa Gözat

Merge pull request #7 from ckeditor/t/4

Feature: Used `ButtonDropdown` to aggregate alignment buttons. Closes #4. Closes #9.
Aleksander Nowodzinski 8 yıl önce
ebeveyn
işleme
bb7fb3b435

+ 2 - 2
packages/ckeditor5-alignment/src/alignmentcommand.js

@@ -134,7 +134,7 @@ export default class AlignmentCommand extends Command {
 // @private
 function removeAlignmentFromSelection( blocks, batch ) {
 	for ( const block of blocks ) {
-		batch.removeAttribute( block, 'alignment' );
+		batch.removeAttribute( 'alignment', block );
 	}
 }
 
@@ -142,6 +142,6 @@ function removeAlignmentFromSelection( blocks, batch ) {
 // @private
 function setAlignmentOnSelection( blocks, batch, type ) {
 	for ( const block of blocks ) {
-		batch.setAttribute( block, 'alignment', type );
+		batch.setAttribute( 'alignment', type, block );
 	}
 }

+ 30 - 2
packages/ckeditor5-alignment/src/alignmentui.js

@@ -16,6 +16,8 @@ import alignRightIcon from '../theme/icons/align-right.svg';
 import alignCenterIcon from '../theme/icons/align-center.svg';
 import alignJustifyIcon from '../theme/icons/align-justify.svg';
 import AlignmentEditing, { isSupported } from './alignmentediting';
+import createButtonDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/button/createbuttondropdown';
+import Model from '../../ckeditor5-ui/src/model';
 
 const icons = new Map( [
 	[ 'left', alignLeftIcon ],
@@ -75,11 +77,34 @@ export default class AlignmentUI extends Plugin {
 	 * @inheritDoc
 	 */
 	init() {
-		const styles = this.editor.config.get( 'alignment.styles' );
+		const editor = this.editor;
+		const componentFactory = editor.ui.componentFactory;
+		const t = editor.t;
+		const styles = editor.config.get( 'alignment.styles' );
 
 		styles
 			.filter( isSupported )
 			.forEach( style => this._addButton( style ) );
+
+		componentFactory.add( 'alignmentDropdown', locale => {
+			const buttons = styles.map( style => {
+				return componentFactory.create( AlignmentEditing.commandName( style ) );
+			} );
+
+			const model = new Model( {
+				label: t( 'Text alignment' ),
+				defaultIcon: alignLeftIcon,
+				withText: false,
+				isVertical: true,
+				tooltip: true,
+				toolbarClassName: 'ck-editor-toolbar',
+				buttons
+			} );
+
+			const dropdown = createButtonDropdown( model, locale );
+
+			return dropdown;
+		} );
 	}
 
 	/**
@@ -107,7 +132,10 @@ export default class AlignmentUI extends Plugin {
 			buttonView.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
 
 			// Execute command.
-			this.listenTo( buttonView, 'execute', () => editor.execute( commandName ) );
+			this.listenTo( buttonView, 'execute', () => {
+				editor.execute( commandName );
+				editor.editing.view.focus();
+			} );
 
 			return buttonView;
 		} );

+ 77 - 0
packages/ckeditor5-alignment/tests/alignmentui.js

@@ -8,6 +8,8 @@
 import AlignmentEditing from '../src/alignmentediting';
 import AlignmentUI from '../src/alignmentui';
 
+import alignLeftIcon from '../theme/icons/align-left.svg';
+
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 
 describe( 'Alignment', () => {
@@ -202,4 +204,79 @@ describe( 'Alignment', () => {
 			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'alignJustify' );
 		} );
 	} );
+
+	describe( 'alignmentDropdown', () => {
+		let dropdown;
+
+		beforeEach( () => {
+			command = editor.commands.get( 'alignLeft' );
+			dropdown = editor.ui.componentFactory.create( 'alignmentDropdown' );
+		} );
+
+		it( 'button has the base properties', () => {
+			const button = dropdown.buttonView;
+
+			expect( button ).to.have.property( 'label', 'Text alignment' );
+			expect( button ).to.have.property( 'icon' );
+			expect( button ).to.have.property( 'tooltip', true );
+			expect( button ).to.have.property( 'withText', false );
+		} );
+
+		it( '#toolbarView has the base properties', () => {
+			const toolbarView = dropdown.toolbarView;
+
+			expect( toolbarView ).to.have.property( 'className', 'ck-editor-toolbar' );
+			expect( toolbarView ).to.have.property( 'isVertical', true );
+		} );
+
+		it( 'should hold defined buttons', () => {
+			const items = [ ...dropdown.toolbarView.items ].map( item => item.label );
+
+			expect( items ).to.have.length( 4 );
+
+			expect( items.includes( 'Align left' ) ).to.be.true;
+			expect( items.includes( 'Align right' ) ).to.be.true;
+			expect( items.includes( 'Align center' ) ).to.be.true;
+			expect( items.includes( 'Justify' ) ).to.be.true;
+		} );
+
+		describe( 'config', () => {
+			beforeEach( () => {
+				element = document.createElement( 'div' );
+				document.body.appendChild( element );
+
+				return ClassicTestEditor
+					.create( element, {
+						plugins: [ AlignmentEditing, AlignmentUI ],
+						alignment: { styles: [ 'center', 'justify' ] }
+					} )
+					.then( newEditor => {
+						editor = newEditor;
+
+						dropdown = editor.ui.componentFactory.create( 'alignmentDropdown' );
+						command = editor.commands.get( 'alignCenter' );
+						button = editor.ui.componentFactory.create( 'alignCenter' );
+					} );
+			} );
+
+			it( 'should hold only defined buttons', () => {
+				const items = [ ...dropdown.toolbarView.items ].map( item => item.label );
+
+				expect( items ).to.have.length( 2 );
+
+				expect( items.includes( 'Align center' ) ).to.be.true;
+				expect( items.includes( 'Justify' ) ).to.be.true;
+			} );
+
+			it( 'should have default icon set', () => {
+				expect( dropdown.buttonView.icon ).to.equal( alignLeftIcon );
+			} );
+
+			it( 'should change icon to active alignment', () => {
+				command.value = true;
+
+				expect( dropdown.buttonView.icon ).to.equal( button.icon );
+			} );
+		} );
+	} );
 } );

+ 1 - 4
packages/ckeditor5-alignment/tests/manual/alignment.js

@@ -12,10 +12,7 @@ import Alignment from '../../src/alignment';
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ ArticlePluginSet, Alignment ],
-		toolbar: [
-			'headings', 'bold', 'italic', 'link', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'bulletedList', 'numberedList',
-			'blockQuote', 'undo', 'redo'
-		]
+		toolbar: [ 'headings', 'bold', 'italic', 'link', 'alignmentDropdown', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ]
 	} )
 	.then( editor => {
 		window.editor = editor;

+ 7 - 6
packages/ckeditor5-alignment/tests/manual/alignment.md

@@ -6,7 +6,7 @@
   * third paragraph should be centered,
   * fourth paragraph should be justified,
   * an image with caption between first and second paragraphs.
-2. Toolbar should have four buttons for alignment control: left, right, center and justify.
+2. Toolbar should have alignment button dropdown with four buttons for alignment control: left, right, center and justify.
 
 ### Testing
 
@@ -24,10 +24,11 @@ You should be able to create blocks that can be aligned:
 3. lists
 
 Alignment UI should:
-1. highlight "left" button when selection is inside left aligned block (default one)
-2. highlight "right" button when selection is inside right aligned block
-3. highlight "center" button when selection is inside centered block
-4. highlight "justify" button when selection is inside justified block
+1. change button dropdown to "left" and highlight "left" button when selection is inside left aligned block (default one)
+2. change button dropdown to "right" and highlight "right" button when selection is inside right aligned block
+3. change button dropdown to "center" and highlight "center" button when selection is inside centered block
+4. change button dropdown to "justify" and highlight "justify" button when selection is inside justified block
 5. be disabled if in figcaption
-6. only one button should be active at once
+6. only one button should be active at once inside dropdown
+7. alignment dropdown should be vertical
 

+ 1 - 1
packages/ckeditor5-alignment/tests/manual/alignmentconfig.js

@@ -13,7 +13,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ ArticlePluginSet, Alignment ],
 		toolbar: [
-			'headings', 'bold', 'italic', 'link', 'alignCenter', 'alignJustify', 'bulletedList', 'numberedList',
+			'headings', 'bold', 'italic', 'link', 'alignmentDropdown', 'bulletedList', 'numberedList',
 			'blockQuote', 'undo', 'redo'
 		],
 		alignment: { styles: [ 'center', 'justify' ] }

+ 6 - 1
packages/ckeditor5-alignment/tests/manual/alignmentconfig.md

@@ -6,10 +6,15 @@
   * third paragraph should be centered,
   * fourth paragraph should be justified,
   * an image with caption between first and second paragraphs.
-2. Toolbar should have only two buttons for alignment control: center and justify.
+2. Toolbar should have button dropdown with only two buttons for alignment control: center and justify.
 
 ### Testing
 
+Alignment dropdown button should change to:
+- "left" icon when text has default (left) alignment,
+- "center" icon when text is centered,
+- "jusifty" icon when text is justified.
+
 "Center" alignment button:
 1. should be highlighted only in third paragraph,
 2. should enable/disable center alignment on any paragraph.