1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 | import MDCComponent from '@material/base/component';
|
25 | import MDCIconToggleFoundation from './foundation';
|
26 | import {MDCRipple, MDCRippleFoundation} from '@material/ripple/index';
|
27 |
|
28 |
|
29 |
|
30 |
|
31 | class MDCIconToggle extends MDCComponent {
|
32 | static attachTo(root) {
|
33 | return new MDCIconToggle(root);
|
34 | }
|
35 |
|
36 | constructor(...args) {
|
37 | super(...args);
|
38 |
|
39 |
|
40 | this.ripple_ = this.initRipple_();
|
41 | }
|
42 |
|
43 |
|
44 | get iconEl_() {
|
45 | const {'iconInnerSelector': sel} = this.root_.dataset;
|
46 | return sel ?
|
47 | (this.root_.querySelector(sel)) : this.root_;
|
48 | }
|
49 |
|
50 | |
51 |
|
52 |
|
53 |
|
54 | initRipple_() {
|
55 | const adapter = Object.assign(MDCRipple.createAdapter(this), {
|
56 | isUnbounded: () => true,
|
57 | isSurfaceActive: () => this.foundation_.isKeyboardActivated(),
|
58 | });
|
59 | const foundation = new MDCRippleFoundation(adapter);
|
60 | return new MDCRipple(this.root_, foundation);
|
61 | }
|
62 |
|
63 | destroy() {
|
64 | this.ripple_.destroy();
|
65 | super.destroy();
|
66 | }
|
67 |
|
68 |
|
69 | getDefaultFoundation() {
|
70 | return new MDCIconToggleFoundation({
|
71 | addClass: (className) => this.iconEl_.classList.add(className),
|
72 | removeClass: (className) => this.iconEl_.classList.remove(className),
|
73 | registerInteractionHandler: (type, handler) => this.root_.addEventListener(type, handler),
|
74 | deregisterInteractionHandler: (type, handler) => this.root_.removeEventListener(type, handler),
|
75 | setText: (text) => this.iconEl_.textContent = text,
|
76 | getTabIndex: () => this.root_.tabIndex,
|
77 | setTabIndex: (tabIndex) => this.root_.tabIndex = tabIndex,
|
78 | getAttr: (name, value) => this.root_.getAttribute(name, value),
|
79 | setAttr: (name, value) => this.root_.setAttribute(name, value),
|
80 | rmAttr: (name) => this.root_.removeAttribute(name),
|
81 | notifyChange: (evtData) => this.emit(MDCIconToggleFoundation.strings.CHANGE_EVENT, evtData),
|
82 | });
|
83 | }
|
84 |
|
85 | initialSyncWithDOM() {
|
86 | this.on = this.root_.getAttribute(MDCIconToggleFoundation.strings.ARIA_PRESSED) === 'true';
|
87 | this.disabled = this.root_.getAttribute(MDCIconToggleFoundation.strings.ARIA_DISABLED) === 'true';
|
88 | }
|
89 |
|
90 |
|
91 | get ripple() {
|
92 | return this.ripple_;
|
93 | }
|
94 |
|
95 |
|
96 | get on() {
|
97 | return this.foundation_.isOn();
|
98 | }
|
99 |
|
100 |
|
101 | set on(isOn) {
|
102 | this.foundation_.toggle(isOn);
|
103 | }
|
104 |
|
105 |
|
106 | get disabled() {
|
107 | return this.foundation_.isDisabled();
|
108 | }
|
109 |
|
110 |
|
111 | set disabled(isDisabled) {
|
112 | this.foundation_.setDisabled(isDisabled);
|
113 | }
|
114 |
|
115 | refreshToggleData() {
|
116 | this.foundation_.refreshToggleData();
|
117 | }
|
118 | }
|
119 |
|
120 | export {MDCIconToggle, MDCIconToggleFoundation};
|