|
|
@@ -11,8 +11,8 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
|
|
|
import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
|
|
|
import specialCharactersIcon from '../theme/icons/specialcharacters.svg';
|
|
|
import InsertSpecialCharacterCommand from './insertspecialcharactercommand';
|
|
|
-import SpecialCharactersTableView from './ui/specialcharacterstableview';
|
|
|
-import SpecialCharactersSelectView from './ui/specialcharactersselectview';
|
|
|
+import CharacterGridView from './ui/charactergridview';
|
|
|
+import SpecialCharactersNavigationView from './ui/specialcharactersnavigationview';
|
|
|
|
|
|
/**
|
|
|
* The special characters UI plugin.
|
|
|
@@ -23,78 +23,69 @@ export default class SpecialCharactersUI extends Plugin {
|
|
|
init() {
|
|
|
const editor = this.editor;
|
|
|
const t = editor.t;
|
|
|
- const specialCharacterPlugin = editor.plugins.get( 'SpecialCharacters' );
|
|
|
- const label = t( 'Special characters' );
|
|
|
-
|
|
|
+ const specialCharsPlugin = editor.plugins.get( 'SpecialCharacters' );
|
|
|
const command = new InsertSpecialCharacterCommand( editor );
|
|
|
+
|
|
|
editor.commands.add( 'specialCharacters', command );
|
|
|
|
|
|
// Add the `specialCharacters` dropdown button to feature components.
|
|
|
editor.ui.componentFactory.add( 'specialCharacters', locale => {
|
|
|
- // Prepare the dropdown element.
|
|
|
const dropdownView = createDropdown( locale );
|
|
|
-
|
|
|
- dropdownView.buttonView.set( {
|
|
|
- label,
|
|
|
- icon: specialCharactersIcon,
|
|
|
- tooltip: true
|
|
|
+ const navigationView = new SpecialCharactersNavigationView( locale, specialCharsPlugin.getGroups() );
|
|
|
+ const symbolGridView = new CharacterGridView( this.locale, {
|
|
|
+ columns: 10
|
|
|
} );
|
|
|
|
|
|
- dropdownView.bind( 'isEnabled' ).to( command );
|
|
|
+ symbolGridView.delegate( 'execute' ).to( dropdownView );
|
|
|
+
|
|
|
+ // Set the initial content of the special characters grid.
|
|
|
+ this._updateGrid( specialCharsPlugin, navigationView.currentGroupName, symbolGridView );
|
|
|
|
|
|
- const specialCharactersSelectView = new SpecialCharactersSelectView( locale, {
|
|
|
- labelText: label,
|
|
|
- selectOptions: getSelectViewOptions()
|
|
|
+ // Update the grid of special characters when a user changed the character group.
|
|
|
+ navigationView.on( 'execute', () => {
|
|
|
+ this._updateGrid( specialCharsPlugin, navigationView.currentGroupName, symbolGridView );
|
|
|
} );
|
|
|
|
|
|
- const symbolTableView = new SpecialCharactersTableView( locale, {
|
|
|
- columns: 10 // TODO: Read from config.
|
|
|
+ dropdownView.buttonView.set( {
|
|
|
+ label: t( 'Special characters' ),
|
|
|
+ icon: specialCharactersIcon,
|
|
|
+ tooltip: true
|
|
|
} );
|
|
|
|
|
|
- symbolTableView.delegate( 'execute' ).to( dropdownView, 'execute' );
|
|
|
+ dropdownView.bind( 'isEnabled' ).to( command );
|
|
|
|
|
|
// Insert a special character when a tile was clicked.
|
|
|
dropdownView.on( 'execute', ( evt, data ) => {
|
|
|
- command.execute( { item: data.title } );
|
|
|
+ editor.execute( 'specialCharacters', { item: data.name } );
|
|
|
+ editor.editing.view.focus();
|
|
|
} );
|
|
|
|
|
|
- // Draw special characters tiles when the dropdown is open.
|
|
|
- dropdownView.on( 'change:isOpen', ( evt, name, isVisible ) => {
|
|
|
- if ( !isVisible ) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- printCharacters( specialCharactersSelectView, symbolTableView.symbolGridView );
|
|
|
- } );
|
|
|
-
|
|
|
- // Draw special characters tiles for specified category (when a user has changed it).
|
|
|
- specialCharactersSelectView.on( 'input', () => {
|
|
|
- printCharacters( specialCharactersSelectView, symbolTableView.symbolGridView );
|
|
|
- } );
|
|
|
-
|
|
|
- dropdownView.panelView.children.add( specialCharactersSelectView );
|
|
|
- dropdownView.panelView.children.add( symbolTableView );
|
|
|
+ dropdownView.panelView.children.add( navigationView );
|
|
|
+ dropdownView.panelView.children.add( symbolGridView );
|
|
|
|
|
|
return dropdownView;
|
|
|
} );
|
|
|
+ }
|
|
|
|
|
|
- function printCharacters( selectView, gridView ) {
|
|
|
- // TODO: Keyboard navigation.
|
|
|
- gridView.items.clear();
|
|
|
-
|
|
|
- const groupName = selectView.value;
|
|
|
- const characterTitles = specialCharacterPlugin.getCharactersForGroup( groupName );
|
|
|
-
|
|
|
- for ( const title of characterTitles ) {
|
|
|
- const character = specialCharacterPlugin.getCharacter( title );
|
|
|
-
|
|
|
- gridView.items.add( gridView.createSymbolTile( character, title ) );
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function getSelectViewOptions() {
|
|
|
- return [ ...specialCharacterPlugin.getGroups() ]
|
|
|
- .map( groupName => ( { label: groupName, value: groupName } ) );
|
|
|
+ /**
|
|
|
+ * Updates the symbol grid depending on the currently selected character group.
|
|
|
+ *
|
|
|
+ * @private
|
|
|
+ * @param {module:special-characters/specialcharacters~SpecialCharacters} specialCharsPlugin
|
|
|
+ * @param {module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView#currentGroupName}
|
|
|
+ * currentGroupName
|
|
|
+ * @param {module:special-characters/ui/charactergridview~CharacterGridView} gridView
|
|
|
+ */
|
|
|
+ _updateGrid( specialCharsPlugin, currentGroupName, gridView ) {
|
|
|
+ // Updating the grid starts with removing all tiles belonging to the old group.
|
|
|
+ gridView.tiles.clear();
|
|
|
+
|
|
|
+ const characterTitles = specialCharsPlugin.getCharactersForGroup( currentGroupName );
|
|
|
+
|
|
|
+ for ( const title of characterTitles ) {
|
|
|
+ const character = specialCharsPlugin.getCharacter( title );
|
|
|
+
|
|
|
+ gridView.tiles.add( gridView.createTile( character, title ) );
|
|
|
}
|
|
|
}
|
|
|
}
|