/
dropdownpanelview.js
110 lines (96 loc) · 2.67 KB
/
dropdownpanelview.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
/**
* @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 ui/dropdown/dropdownpanelview
*/
import View from '../view';
/**
* The dropdown panel view class.
*
* See {@link module:ui/dropdown/dropdownview~DropdownView} to learn about the common usage.
*
* @extends module:ui/view~View
*/
export default class DropdownPanelView extends View {
/**
* @inheritDoc
*/
constructor( locale ) {
super( locale );
const bind = this.bindTemplate;
/**
* Controls whether the panel is visible.
*
* @observable
* @member {Boolean} #isVisible
*/
this.set( 'isVisible', false );
/**
* The position of the panel, relative to the parent.
*
* This property is reflected in the CSS class set to {@link #element} that controls
* the position of the panel.
*
* @observable
* @default 'se'
* @member {'se'|'sw'|'ne'|'nw'} #position
*/
this.set( 'position', 'se' );
/**
* Collection of the child views in this panel.
*
* A common child type is the {@link module:ui/list/listview~ListView} and {@link module:ui/toolbar/toolbarview~ToolbarView}.
* See {@link module:ui/dropdown/utils~addListToDropdown} and
* {@link module:ui/dropdown/utils~addToolbarToDropdown} to learn more about child views of dropdowns.
*
* @readonly
* @member {module:ui/viewcollection~ViewCollection}
*/
this.children = this.createCollection();
this.setTemplate( {
tag: 'div',
attributes: {
class: [
'ck',
'ck-reset',
'ck-dropdown__panel',
bind.to( 'position', value => `ck-dropdown__panel_${ value }` ),
bind.if( 'isVisible', 'ck-dropdown__panel-visible' )
]
},
children: this.children,
on: {
// Drag and drop in the panel should not break the selection in the editor.
// https://github.com/ckeditor/ckeditor5-ui/issues/228
selectstart: bind.to( evt => evt.preventDefault() )
}
} );
}
/**
* Focuses the view element or first item in view collection on opening dropdown's panel.
*
* See also {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable}.
*/
focus() {
if ( this.children.length ) {
this.children.first.focus();
}
}
/**
* Focuses the view element or last item in view collection on opening dropdown's panel.
*
* See also {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable}.
*/
focusLast() {
if ( this.children.length ) {
const lastChild = this.children.last;
if ( typeof lastChild.focusLast === 'function' ) {
lastChild.focusLast();
} else {
lastChild.focus();
}
}
}
}