-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
/
charactergridview.js
117 lines (103 loc) · 3.12 KB
/
charactergridview.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/**
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/**
* @module special-characters/ui/charactergridview
*/
import View from '@ckeditor/ckeditor5-ui/src/view';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import '../../theme/charactergrid.css';
/**
* A grid of character tiles. It allows browsing special characters and selecting the character to
* be inserted into the content.
*
* @extends module:ui/view~View
*/
export default class CharacterGridView extends View {
/**
* Creates an instance of a character grid containing tiles representing special characters.
*
* @param {module:utils/locale~Locale} locale The localization services instance.
*/
constructor( locale ) {
super( locale );
/**
* A collection of the child tile views. Each tile represents a particular character.
*
* @readonly
* @member {module:ui/viewcollection~ViewCollection}
*/
this.tiles = this.createCollection();
this.setTemplate( {
tag: 'div',
children: [
{
tag: 'div',
attributes: {
class: [
'ck',
'ck-character-grid__tiles'
]
},
children: this.tiles
}
],
attributes: {
class: [
'ck',
'ck-character-grid'
]
}
} );
/**
* Fired when any of {@link #tiles grid tiles} is clicked.
*
* @event execute
* @param {Object} data Additional information about the event.
* @param {String} data.name The name of the tile that caused the event (e.g. "greek small letter epsilon").
* @param {String} data.character A human-readable character displayed as the label (e.g. "ε").
*/
/**
* Fired when a mouse or another pointing device caused the cursor to move onto any {@link #tiles grid tile}
* (similar to the native `mouseover` DOM event).
*
* @event tileHover
* @param {Object} data Additional information about the event.
* @param {String} data.name The name of the tile that caused the event (e.g. "greek small letter epsilon").
* @param {String} data.character A human-readable character displayed as the label (e.g. "ε").
*/
}
/**
* Creates a new tile for the grid.
*
* @param {String} character A human-readable character displayed as the label (e.g. "ε").
* @param {String} name The name of the character (e.g. "greek small letter epsilon").
* @returns {module:ui/button/buttonview~ButtonView}
*/
createTile( character, name ) {
const tile = new ButtonView( this.locale );
tile.set( {
label: character,
withText: true,
class: 'ck-character-grid__tile'
} );
// Labels are vital for the users to understand what character they're looking at.
// For now we're using native title attribute for that, see #5817.
tile.extendTemplate( {
attributes: {
title: name
},
on: {
mouseover: tile.bindTemplate.to( 'mouseover' )
}
} );
tile.on( 'mouseover', () => {
this.fire( 'tileHover', { name, character } );
} );
tile.on( 'execute', () => {
this.fire( 'execute', { name, character } );
} );
return tile;
}
}