This repository has been archived by the owner on Jun 26, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 11
/
mentionsview.js
123 lines (103 loc) · 2.81 KB
/
mentionsview.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
118
119
120
121
122
123
/**
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/**
* @module mention/ui/mentionsview
*/
import ListView from '@ckeditor/ckeditor5-ui/src/list/listview';
import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
import '../../theme/mentionui.css';
/**
* The mention ui view.
*
* @extends module:ui/list/listview~ListView
*/
export default class MentionsView extends ListView {
/**
* @inheritDoc
*/
constructor( locale ) {
super( locale );
this.extendTemplate( {
attributes: {
class: [
'ck-mentions'
],
tabindex: '-1'
}
} );
}
/**
* {@link #select Selects} the first item.
*/
selectFirst() {
this.select( 0 );
}
/**
* Selects next item to the currently {@link #select selected}.
*
* If the last item is already selected, it will select the first item.
*/
selectNext() {
const item = this.selected;
const index = this.items.getIndex( item );
this.select( index + 1 );
}
/**
* Selects previous item to the currently {@link #select selected}.
*
* If the first item is already selected, it will select the last item.
*/
selectPrevious() {
const item = this.selected;
const index = this.items.getIndex( item );
this.select( index - 1 );
}
/**
* Marks item at a given index as selected.
*
* Handles selection cycling when passed index is out of bounds:
* - if the index is lower than 0, it will select the last item,
* - if the index is higher than the last item index, it will select the first item.
*
* @param {Number} index Index of an item to be marked as selected.
*/
select( index ) {
let indexToGet = 0;
if ( index > 0 && index < this.items.length ) {
indexToGet = index;
} else if ( index < 0 ) {
indexToGet = this.items.length - 1;
}
const item = this.items.get( indexToGet );
// Return early if item is already selected.
if ( this.selected === item ) {
return;
}
// Remove highlight of previously selected item.
if ( this.selected ) {
this.selected.removeHighlight();
}
item.highlight();
this.selected = item;
// Scroll the mentions view to the selected element.
if ( !this._isItemVisibleInScrolledArea( item ) ) {
this.element.scrollTop = item.element.offsetTop;
}
}
/**
* Triggers the `execute` event on the {@link #select selected} item.
*/
executeSelected() {
this.selected.fire( 'execute' );
}
// Checks if an item is visible in the scrollable area.
//
// The item is considered visible when:
// - its top boundary is inside the scrollable rect
// - its bottom boundary is inside the scrollable rect (the whole item must be visible)
_isItemVisibleInScrolledArea( item ) {
return new Rect( this.element ).contains( new Rect( item.element ) );
}
}