/
switchbuttonview.js
99 lines (84 loc) · 1.6 KB
/
switchbuttonview.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
/**
* @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/button/switchbuttonview
*/
import View from '../view';
import ButtonView from './buttonview';
import '../../theme/components/button/switchbutton.css';
/**
* The switch button view class.
*
* const view = new SwitchButtonView();
*
* view.set( {
* withText: true,
* label: 'Switch me!'
* } );
*
* view.render();
*
* document.body.append( view.element );
*
* @extends module:ui/button/buttonview~ButtonView
*/
export default class SwitchButtonView extends ButtonView {
/**
* @inheritDoc
*/
constructor( locale ) {
super( locale );
this.isToggleable = true;
/**
* The toggle switch of the button.
*
* @readonly
* @member {module:ui/view~View} #toggleSwitchView
*/
this.toggleSwitchView = this._createToggleView();
this.extendTemplate( {
attributes: {
class: 'ck-switchbutton'
}
} );
}
/**
* @inheritDoc
*/
render() {
super.render();
this.children.add( this.toggleSwitchView );
}
/**
* Creates a toggle child view.
*
* @private
* @returns {module:ui/view~View}
*/
_createToggleView() {
const toggleSwitchView = new View();
toggleSwitchView.setTemplate( {
tag: 'span',
attributes: {
class: [
'ck',
'ck-button__toggle'
]
},
children: [
{
tag: 'span',
attributes: {
class: [
'ck',
'ck-button__toggle__inner'
]
}
}
]
} );
return toggleSwitchView;
}
}