]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | /** |
2 | * -------------------------------------------------------------------------- | |
3 | * Bootstrap (v4.0.0-alpha.6): button.js | |
4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |
5 | * -------------------------------------------------------------------------- | |
6 | */ | |
7 | ||
8 | const Button = (($) => { | |
9 | ||
10 | ||
11 | /** | |
12 | * ------------------------------------------------------------------------ | |
13 | * Constants | |
14 | * ------------------------------------------------------------------------ | |
15 | */ | |
16 | ||
17 | const NAME = 'button' | |
18 | const VERSION = '4.0.0-alpha.6' | |
19 | const DATA_KEY = 'bs.button' | |
20 | const EVENT_KEY = `.${DATA_KEY}` | |
21 | const DATA_API_KEY = '.data-api' | |
22 | const JQUERY_NO_CONFLICT = $.fn[NAME] | |
23 | ||
24 | const ClassName = { | |
25 | ACTIVE : 'active', | |
26 | BUTTON : 'btn', | |
27 | FOCUS : 'focus' | |
28 | } | |
29 | ||
30 | const Selector = { | |
31 | DATA_TOGGLE_CARROT : '[data-toggle^="button"]', | |
32 | DATA_TOGGLE : '[data-toggle="buttons"]', | |
33 | INPUT : 'input', | |
34 | ACTIVE : '.active', | |
35 | BUTTON : '.btn' | |
36 | } | |
37 | ||
38 | const Event = { | |
39 | CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`, | |
40 | FOCUS_BLUR_DATA_API : `focus${EVENT_KEY}${DATA_API_KEY} ` | |
41 | + `blur${EVENT_KEY}${DATA_API_KEY}` | |
42 | } | |
43 | ||
44 | ||
45 | /** | |
46 | * ------------------------------------------------------------------------ | |
47 | * Class Definition | |
48 | * ------------------------------------------------------------------------ | |
49 | */ | |
50 | ||
51 | class Button { | |
52 | ||
53 | constructor(element) { | |
54 | this._element = element | |
55 | } | |
56 | ||
57 | ||
58 | // getters | |
59 | ||
60 | static get VERSION() { | |
61 | return VERSION | |
62 | } | |
63 | ||
64 | ||
65 | // public | |
66 | ||
67 | toggle() { | |
68 | let triggerChangeEvent = true | |
69 | const rootElement = $(this._element).closest( | |
70 | Selector.DATA_TOGGLE | |
71 | )[0] | |
72 | ||
73 | if (rootElement) { | |
74 | const input = $(this._element).find(Selector.INPUT)[0] | |
75 | ||
76 | if (input) { | |
77 | if (input.type === 'radio') { | |
78 | if (input.checked && | |
79 | $(this._element).hasClass(ClassName.ACTIVE)) { | |
80 | triggerChangeEvent = false | |
81 | ||
82 | } else { | |
83 | const activeElement = $(rootElement).find(Selector.ACTIVE)[0] | |
84 | ||
85 | if (activeElement) { | |
86 | $(activeElement).removeClass(ClassName.ACTIVE) | |
87 | } | |
88 | } | |
89 | } | |
90 | ||
91 | if (triggerChangeEvent) { | |
92 | input.checked = !$(this._element).hasClass(ClassName.ACTIVE) | |
93 | $(input).trigger('change') | |
94 | } | |
95 | ||
96 | input.focus() | |
97 | } | |
98 | ||
99 | } | |
100 | ||
101 | this._element.setAttribute('aria-pressed', | |
102 | !$(this._element).hasClass(ClassName.ACTIVE)) | |
103 | ||
104 | if (triggerChangeEvent) { | |
105 | $(this._element).toggleClass(ClassName.ACTIVE) | |
106 | } | |
107 | } | |
108 | ||
109 | dispose() { | |
110 | $.removeData(this._element, DATA_KEY) | |
111 | this._element = null | |
112 | } | |
113 | ||
114 | ||
115 | // static | |
116 | ||
117 | static _jQueryInterface(config) { | |
118 | return this.each(function () { | |
119 | let data = $(this).data(DATA_KEY) | |
120 | ||
121 | if (!data) { | |
122 | data = new Button(this) | |
123 | $(this).data(DATA_KEY, data) | |
124 | } | |
125 | ||
126 | if (config === 'toggle') { | |
127 | data[config]() | |
128 | } | |
129 | }) | |
130 | } | |
131 | ||
132 | } | |
133 | ||
134 | ||
135 | /** | |
136 | * ------------------------------------------------------------------------ | |
137 | * Data Api implementation | |
138 | * ------------------------------------------------------------------------ | |
139 | */ | |
140 | ||
141 | $(document) | |
142 | .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => { | |
143 | event.preventDefault() | |
144 | ||
145 | let button = event.target | |
146 | ||
147 | if (!$(button).hasClass(ClassName.BUTTON)) { | |
148 | button = $(button).closest(Selector.BUTTON) | |
149 | } | |
150 | ||
151 | Button._jQueryInterface.call($(button), 'toggle') | |
152 | }) | |
153 | .on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => { | |
154 | const button = $(event.target).closest(Selector.BUTTON)[0] | |
155 | $(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type)) | |
156 | }) | |
157 | ||
158 | ||
159 | /** | |
160 | * ------------------------------------------------------------------------ | |
161 | * jQuery | |
162 | * ------------------------------------------------------------------------ | |
163 | */ | |
164 | ||
165 | $.fn[NAME] = Button._jQueryInterface | |
166 | $.fn[NAME].Constructor = Button | |
167 | $.fn[NAME].noConflict = function () { | |
168 | $.fn[NAME] = JQUERY_NO_CONFLICT | |
169 | return Button._jQueryInterface | |
170 | } | |
171 | ||
172 | return Button | |
173 | ||
174 | })(jQuery) | |
175 | ||
176 | export default Button |