Kamil Piechaczek 6 年之前
父节点
当前提交
57efd3173d
共有 1 个文件被更改,包括 48 次插入7 次删除
  1. 48 7
      packages/ckeditor5-special-characters/src/specialcharactersui.js

+ 48 - 7
packages/ckeditor5-special-characters/src/specialcharactersui.js

@@ -8,8 +8,10 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import specialCharactersIcon from '../theme/icons/specialcharacters.svg';
+import InsertSpecialCharacterCommand from './insertspecialcharactercommand';
+import SelectView from '@ckeditor/ckeditor5-ui/src/selectview/selectview';
 
 /**
  * The special characters UI plugin.
@@ -20,21 +22,60 @@ export default class SpecialCharactersUI extends Plugin {
 	init() {
 		const editor = this.editor;
 		const t = editor.t;
+		const specialCharacterPlugin = editor.plugins.get( 'SpecialCharacters' );
 
-		// Add the `specialCharacters` button to feature components.
+		const command = new InsertSpecialCharacterCommand( editor );
+		editor.commands.add( 'specialCharacters', command );
+
+		// Add the `specialCharacters` dropdown button to feature components.
 		editor.ui.componentFactory.add( 'specialCharacters', locale => {
-			const command = editor.commands.get( 'specialCharacters' );
-			const view = new ButtonView( locale );
+			// Prepare all special characters groups for displaying in the select view.
+			const specialCharactersGroups = [ ...specialCharacterPlugin.getGroups() ]
+				.map( groupName => ( { label: groupName, value: groupName } ) );
+
+			const dropdownView = createDropdown( locale );
+			const selectView = new SelectView( locale, specialCharactersGroups );
 
-			view.set( {
+			dropdownView.buttonView.set( {
 				label: t( 'Special characters' ),
 				icon: specialCharactersIcon,
 				tooltip: true
 			} );
 
-			view.bind( 'isEnabled' ).to( command, 'isEnabled' );
+			dropdownView.bind( 'isEnabled' ).to( command );
+			dropdownView.panelView.children.add( selectView );
 
-			return view;
+			// When a special character was clicked, insert it to the editor.
+			dropdownView.on( 'execute', ( evt, data ) => {
+				console.log( 'Kliknąłem.', data );
+
+				// command.execute( { item: data } );
+			} );
+
+			dropdownView.on( 'change:isOpen', ( evt, name, isVisible ) => {
+				if ( !isVisible ) {
+					return;
+				}
+
+				// Draw special characters tiles when the dropdown is opened.
+				printCharacters( selectView );
+			} );
+
+			// Draw special characters when a user changed a category.
+			selectView.on( 'input', () => {
+				printCharacters( selectView );
+			} );
+
+			return dropdownView;
 		} );
+
+		function printCharacters( selectView ) {
+			const groupName = selectView.element.value;
+			const characters = specialCharacterPlugin.getCharacterForGroup( groupName );
+
+			console.log( { groupName, characters } );
+			console.log( 'Rysuj!' );
+		}
 	}
 }
+