소스 검색

Review dropdown creation process in `Heading`.

Maciej Gołaszewski 8 년 전
부모
커밋
b7caf07c82
1개의 변경된 파일26개의 추가작업 그리고 26개의 파일을 삭제
  1. 26 26
      packages/ckeditor5-heading/src/heading.js

+ 26 - 26
packages/ckeditor5-heading/src/heading.js

@@ -46,32 +46,34 @@ export default class Heading extends Plugin {
 	 */
 	init() {
 		const editor = this.editor;
-		const dropdownItems = new Collection();
-		const options = this._getLocalizedOptions();
-		const commands = [];
 		const t = editor.t;
+		const options = this._getLocalizedOptions();
 		const defaultTitle = t( 'Choose heading' );
 		const dropdownTooltip = t( 'Heading' );
 
-		for ( const option of options ) {
-			const command = editor.commands.get( option.model );
-			const itemModel = new Model( {
-				commandName: option.model,
-				label: option.title,
-				class: option.class
-			} );
+		// Register UI component.
+		editor.ui.componentFactory.add( 'headings', locale => {
+			const commands = [];
+			const dropdownItems = new Collection();
 
-			itemModel.bind( 'isActive' ).to( command, 'value' );
+			for ( const option of options ) {
+				const command = editor.commands.get( option.model );
+				const itemModel = new Model( {
+					commandName: option.model,
+					label: option.title,
+					class: option.class
+				} );
 
-			// Add the option to the collection.
-			dropdownItems.add( itemModel );
+				itemModel.bind( 'isActive' ).to( command, 'value' );
 
-			commands.push( command );
-		}
+				// Add the option to the collection.
+				dropdownItems.add( itemModel );
+
+				commands.push( command );
+			}
 
-		// Register UI component.
-		editor.ui.componentFactory.add( 'headings', locale => {
 			const dropdownView = createDropdown( locale );
+			addListViewToDropdown( dropdownView, dropdownItems );
 
 			dropdownView.set( {
 				isOn: false,
@@ -79,7 +81,13 @@ export default class Heading extends Plugin {
 				tooltip: dropdownTooltip
 			} );
 
-			addListViewToDropdown( dropdownView, dropdownItems );
+			dropdownView.extendTemplate( {
+				attributes: {
+					class: [
+						'ck-heading-dropdown'
+					]
+				}
+			} );
 
 			dropdownView.bind( 'isEnabled' ).toMany( commands, 'isEnabled', ( ...areEnabled ) => {
 				return areEnabled.some( isEnabled => isEnabled );
@@ -92,14 +100,6 @@ export default class Heading extends Plugin {
 				return options[ index ] ? options[ index ].title : defaultTitle;
 			} );
 
-			dropdownView.extendTemplate( {
-				attributes: {
-					class: [
-						'ck-heading-dropdown'
-					]
-				}
-			} );
-
 			// Execute command when an item from the dropdown is selected.
 			this.listenTo( dropdownView, 'execute', evt => {
 				editor.execute( evt.source.commandName );