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

Merge pull request #13 from ckeditor/i/6175

Internal: Implement lazy loading for the special characters dropdown. Closes ckeditor/ckeditor5#6175.
Piotrek Koszuliński пре 6 година
родитељ
комит
5d4b2f272d

+ 50 - 32
packages/ckeditor5-special-characters/src/specialcharacters.js

@@ -77,35 +77,7 @@ export default class SpecialCharacters extends Plugin {
 		// Add the `specialCharacters` dropdown button to feature components.
 		editor.ui.componentFactory.add( 'specialCharacters', locale => {
 			const dropdownView = createDropdown( locale );
-			const specialCharsGroups = [ ...this.getGroups() ];
-
-			// Add a special group that shows all available special characters.
-			specialCharsGroups.unshift( ALL_SPECIAL_CHARACTERS_GROUP );
-
-			const navigationView = new SpecialCharactersNavigationView( locale, specialCharsGroups );
-			const gridView = new CharacterGridView( locale );
-			const infoView = new CharacterInfoView( locale );
-
-			gridView.delegate( 'execute' ).to( dropdownView );
-
-			gridView.on( 'tileHover', ( evt, data ) => {
-				infoView.set( data );
-			} );
-
-			dropdownView.on( 'change:isOpen', () => {
-				infoView.set( {
-					character: null,
-					name: null
-				} );
-			} );
-
-			// Set the initial content of the special characters grid.
-			this._updateGrid( navigationView.currentGroupName, gridView );
-
-			// Update the grid of special characters when a user changed the character group.
-			navigationView.on( 'execute', () => {
-				this._updateGrid( navigationView.currentGroupName, gridView );
-			} );
+			let dropdownPanelContent;
 
 			dropdownView.buttonView.set( {
 				label: t( 'Special characters' ),
@@ -121,9 +93,20 @@ export default class SpecialCharacters extends Plugin {
 				editor.editing.view.focus();
 			} );
 
-			dropdownView.panelView.children.add( navigationView );
-			dropdownView.panelView.children.add( gridView );
-			dropdownView.panelView.children.add( infoView );
+			dropdownView.on( 'change:isOpen', () => {
+				if ( !dropdownPanelContent ) {
+					dropdownPanelContent = this._createDropdownPanelContent( locale, dropdownView );
+
+					dropdownView.panelView.children.add( dropdownPanelContent.navigationView );
+					dropdownView.panelView.children.add( dropdownPanelContent.gridView );
+					dropdownView.panelView.children.add( dropdownPanelContent.infoView );
+				}
+
+				dropdownPanelContent.infoView.set( {
+					character: null,
+					name: null
+				} );
+			} );
 
 			return dropdownView;
 		} );
@@ -226,6 +209,41 @@ export default class SpecialCharacters extends Plugin {
 			gridView.tiles.add( gridView.createTile( character, title ) );
 		}
 	}
+
+	/**
+	 * Initializes the dropdown, used for lazy loading.
+	 *
+	 * @private
+	 * @param {module:utils/locale~Locale} locale
+	 * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+	 * @returns {Object} Returns an object with `navigationView`, `gridView` and `infoView` properties, containing UI parts.
+	 */
+	_createDropdownPanelContent( locale, dropdownView ) {
+		const specialCharsGroups = [ ...this.getGroups() ];
+
+		// Add a special group that shows all available special characters.
+		specialCharsGroups.unshift( ALL_SPECIAL_CHARACTERS_GROUP );
+
+		const navigationView = new SpecialCharactersNavigationView( locale, specialCharsGroups );
+		const gridView = new CharacterGridView( locale );
+		const infoView = new CharacterInfoView( locale );
+
+		gridView.delegate( 'execute' ).to( dropdownView );
+
+		gridView.on( 'tileHover', ( evt, data ) => {
+			infoView.set( data );
+		} );
+
+		// Update the grid of special characters when a user changed the character group.
+		navigationView.on( 'execute', () => {
+			this._updateGrid( navigationView.currentGroupName, gridView );
+		} );
+
+		// Set the initial content of the special characters grid.
+		this._updateGrid( navigationView.currentGroupName, gridView );
+
+		return { navigationView, gridView, infoView };
+	}
 }
 
 /**

+ 7 - 0
packages/ckeditor5-special-characters/tests/specialcharacters.js

@@ -64,6 +64,7 @@ describe( 'SpecialCharacters', () => {
 
 			beforeEach( () => {
 				dropdown = editor.ui.componentFactory.create( 'specialCharacters' );
+				dropdown.isOpen = true; // Dropdown is lazy loaded, so needs to be open to be verified (#6175).
 			} );
 
 			afterEach( () => {
@@ -177,6 +178,12 @@ describe( 'SpecialCharacters', () => {
 					expect( characterInfo.code ).to.equal( 'U+003c' );
 				} );
 			} );
+
+			it( 'is fully initialized when not open', () => {
+				// (#6175)
+				const uninitializedDropdown = editor.ui.componentFactory.create( 'specialCharacters' );
+				expect( uninitializedDropdown.panelView.children.length ).to.be.equal( 0 );
+			} );
 		} );
 	} );