|
|
@@ -11,24 +11,45 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
|
|
|
|
|
|
import '../../theme/characterinfo.css';
|
|
|
|
|
|
+/**
|
|
|
+ * The view displaying detailed information about a special character glyph, e.g. upon
|
|
|
+ * hovering it with a mouse.
|
|
|
+ *
|
|
|
+ * @extends module:ui/view~View
|
|
|
+ */
|
|
|
export default class CharacterInfoView extends View {
|
|
|
constructor( locale ) {
|
|
|
super( locale );
|
|
|
|
|
|
const bind = this.bindTemplate;
|
|
|
|
|
|
+ /**
|
|
|
+ * The character which info is displayed by the view. For instance,
|
|
|
+ * "∑" or "¿".
|
|
|
+ *
|
|
|
+ * @observable
|
|
|
+ * @member {String|null} #character
|
|
|
+ */
|
|
|
this.set( 'character', null );
|
|
|
- this.set( 'name', null );
|
|
|
|
|
|
- this.bind( 'code' ).to( this, 'character', char => {
|
|
|
- if ( char === null ) {
|
|
|
- return '';
|
|
|
- }
|
|
|
-
|
|
|
- const hexCode = char.codePointAt( 0 ).toString( 16 );
|
|
|
+ /**
|
|
|
+ * The name of the {@link #character}. For instance,
|
|
|
+ * "N-ary summation" or "Inverted question mark".
|
|
|
+ *
|
|
|
+ * @observable
|
|
|
+ * @member {String|null} #name
|
|
|
+ */
|
|
|
+ this.set( 'name', null );
|
|
|
|
|
|
- return 'U+' + ( '0000' + hexCode ).slice( -4 );
|
|
|
- } );
|
|
|
+ /**
|
|
|
+ * The "Unicode string" of the {@link #character}. For instance,
|
|
|
+ * "U+0061".
|
|
|
+ *
|
|
|
+ * @observable
|
|
|
+ * @readonly
|
|
|
+ * @member {String} #code
|
|
|
+ */
|
|
|
+ this.bind( 'code' ).to( this, 'character', characterToUnicodeString );
|
|
|
|
|
|
this.setTemplate( {
|
|
|
tag: 'div',
|
|
|
@@ -42,14 +63,8 @@ export default class CharacterInfoView extends View {
|
|
|
},
|
|
|
children: [
|
|
|
{
|
|
|
- text: bind.to( 'name', name => {
|
|
|
- if ( !name ) {
|
|
|
- // ZWSP to prevent vertical collapsing.
|
|
|
- return '\u200B';
|
|
|
- }
|
|
|
-
|
|
|
- return name;
|
|
|
- } )
|
|
|
+ // Note: ZWSP to prevent vertical collapsing.
|
|
|
+ text: bind.to( 'name', name => name ? name : '\u200B' )
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
@@ -76,3 +91,21 @@ export default class CharacterInfoView extends View {
|
|
|
} );
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// Converts a character into a "Unicode string", for instance:
|
|
|
+//
|
|
|
+// "$" -> "U+0024"
|
|
|
+//
|
|
|
+// Returns empty string when character is `null`.
|
|
|
+//
|
|
|
+// @param {String} character
|
|
|
+// @returns {String}
|
|
|
+function characterToUnicodeString( character ) {
|
|
|
+ if ( character === null ) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+
|
|
|
+ const hexCode = character.codePointAt( 0 ).toString( 16 );
|
|
|
+
|
|
|
+ return 'U+' + ( '0000' + hexCode ).slice( -4 );
|
|
|
+}
|