Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: static/js/main.js

Issue 29624561: Issue 6104 - Minified code in help center repository (Closed) Base URL: https://hg.adblockplus.org/help.eyeo.com
Patch Set: Consolidated gulp tasks Created Dec. 7, 2017, 2:48 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 (function()
2 {
3 document.addEventListener("DOMContentLoaded", function()
4 {
5
6 /**************************************************************************
7 * General
8 **************************************************************************/
9
10 // Change html class name from "no-js" to "js"
11 document.documentElement.className = "js";
12
13 /**************************************************************************
14 * Navbar
15 **************************************************************************/
16
17 function toggleNavbarCollapse()
18 {
19 var navbarCollapseEls = this.parentElement.getElementsByClassName("navbar- collapse");
20 for (var i = 0; i < navbarCollapseEls.length; i++)
21 {
22 navbarCollapseEls[i]
23 .classList.toggle("open")
24 }
25 }
26
27 var toggleNavbarCollapseEls = document.getElementsByClassName("toggle-navbar -collapse");
28 for (var i = 0; i < toggleNavbarCollapseEls.length; i++)
29 {
30 toggleNavbarCollapseEls[i]
31 .addEventListener("click", toggleNavbarCollapse, false);
32 }
33
34 /**************************************************************************
35 * CustomSelect
36 **************************************************************************/
37
38 function CustomSelect(select)
39 {
40 this.select = select;
41 this.close();
42 this.select
43 .addEventListener("click", this._onClick.bind(this), false);
44 this.select
45 .addEventListener("focusout", this._onFocusOut.bind(this), false);
46 }
47
48 CustomSelect.prototype._onFocusOut = function()
49 {
50 // setTimeout to allow document.activeElement
51 // to move to newly focused element
52 setTimeout(function()
53 {
54 var newFocus = document.activeElement;
55
56 if (newFocus
57 .classList.contains("custom-select-selected") ||
58 newFocus
59 .classList.contains("custom-select-option") ||
60 newFocus
61 .parentElement
62 .classList.contains("custom-select-option"))
63 {
64 return;
65 }
66
67 this.close();
68
69 }.bind(this), 1);
70 }
71
72 CustomSelect.prototype._onClick = function(event)
73 {
74 if (event.target.classList.contains("custom-select-selected"))
75 {
76 var options = this.select.querySelector(".custom-select-options");
77 if (options.getAttribute("aria-hidden") == "true")
78 {
79 this.open();
80 }
81 else
82 {
83 this.close();
84 }
85 }
86 }
87
88 CustomSelect.prototype.open = function()
89 {
90 this.select
91 .querySelector(".custom-select-selected")
92 .setAttribute("aria-expanded", "true");
93
94 this.select
95 .querySelector(".custom-select-options")
96 .removeAttribute("aria-hidden");
97 }
98
99 CustomSelect.prototype.close = function()
100 {
101 this.select
102 .querySelector(".custom-select-selected")
103 .setAttribute("aria-expanded", "false");
104
105 this.select
106 .querySelector(".custom-select-options")
107 .setAttribute("aria-hidden", "true");
108 }
109
110 new CustomSelect(document.getElementById("language-select"));
111
112 /**************************************************************************
113 * Accordion
114 **************************************************************************/
115
116 function Accordion(accordion)
117 {
118 this.accordion = accordion;
119
120 var accordionButtons = this.accordion.getElementsByClassName('accordion-to ggle-button');
121 for (var i = 0; i < accordionButtons.length; i++)
122 {
123 // Close all sections except the first
124 if (i !== 0)
125 {
126 accordionButtons[i].setAttribute("aria-expanded", "false");
127 document
128 .getElementById( accordionButtons[i].getAttribute("aria-controls") )
129 .setAttribute("hidden", "true");
130 }
131 }
132
133 this.accordion
134 .addEventListener("click", this._onClick.bind(this), false);
135 this.accordion
136 .addEventListener("keydown", this._onKeyDown.bind(this), false);
137 }
138
139 Accordion.prototype.toggleSection = function(clickedButton)
140 {
141 // Hide currently expanded section
142 var expandedButton = this.accordion.querySelector("button[aria-expanded='t rue']");
143 if (expandedButton)
144 {
145 expandedButton.setAttribute("aria-expanded", "false");
146 document
147 .getElementById( expandedButton.getAttribute("aria-controls") )
148 .setAttribute("hidden", "true");
149 }
150
151 // If currently expanded section is clicked
152 if (expandedButton === clickedButton) return;
153
154 // Expand new section
155 clickedButton.setAttribute("aria-expanded", "true");
156 document
157 .getElementById( clickedButton.getAttribute("aria-controls") )
158 .removeAttribute("hidden");
159 }
160
161 Accordion.prototype.focusNextSection = function()
162 {
163 var currentFocus = document.activeElement;
164 var nextheading = currentFocus.parentElement.nextElementSibling.nextElemen tSibling;
165
166 if (nextheading)
167 {
168 nextheading // .accordion-heading
169 .firstElementChild // .accordion-toggle-button
170 .focus();
171 }
172 else
173 {
174 this.accordion
175 .firstElementChild // .accordion-heading
176 .firstElementChild // .accordion-toggle-button
177 .focus();
178 }
179 }
180
181 Accordion.prototype.focusPrevSection = function()
182 {
183 var currentFocus = document.activeElement;
184 var prevAccordionBody = currentFocus.parentElement.previousElementSibling;
185
186 if (prevAccordionBody)
187 {
188 prevAccordionBody // .accordion-body
189 .previousElementSibling // .accordion-heading
190 .firstElementChild // .accordion-toggle-button
191 .focus();
192 }
193 else
194 {
195 this.accordion
196 .lastElementChild // .accordion-body
197 .previousElementSibling // .accordion-heading
198 .firstElementChild // .accordion-toggle-button
199 .focus();
200 }
201 }
202
203 Accordion.prototype._onKeyDown = function(event)
204 {
205 if (!event.target.classList.contains("accordion-toggle-button")) return;
206
207 if (event.key == "ArrowUp" || event.keyCode == 38)
208 {
209 this.focusPrevSection();
210 }
211 else if (event.key == "ArrowDown" || event.keyCode == 40)
212 {
213 this.focusNextSection();
214 }
215 }
216
217 Accordion.prototype._onClick = function(event)
218 {
219 if (!event.target.classList.contains("accordion-toggle-button")) return;
220
221 this.toggleSection(event.target);
222 }
223
224 var productTopicsAccordion = document.getElementById('product-topics-accordi on');
225 if (productTopicsAccordion)
226 {
227 new Accordion(productTopicsAccordion);
228 }
229
230 /**************************************************************************
231 * BrowserSelect
232 **************************************************************************/
233
234 function BrowserSelect(select)
235 {
236 this.select = select;
237 CustomSelect.apply(this, [this.select]);
238
239 this.BROWSER_STORAGE_KEY = "BROWSER";
240 this.BROWSER_AUTODETECTED_STORAGE_KEY = "BROWSER_AUTODETECTED";
241 this.SUPPORTED_BROWSERS = ["chrome", "opera", "samsungBrowser",
242 "yandexbrowser", "maxthon", "msie",
243 "msedge", "firefox", "ios", "safari"];
244 this.DEFAULT_BROWSER = "chrome";
245
246 this.select
247 .addEventListener("click", this._onClickOrKeyDown.bind(this), false);
248
249 this.select
250 .addEventListener("keydown", this._onClickOrKeyDown.bind(this), false);
251
252 var storedBrowser = localStorage.getItem(this.BROWSER_STORAGE_KEY);
253 if (storedBrowser) this.selectOption(storedBrowser);
254 else this.detectBrowser();
255 }
256
257 BrowserSelect.prototype = Object.create(CustomSelect.prototype);
258 BrowserSelect.prototype.constructor = BrowserSelect;
259
260 BrowserSelect.prototype.detectBrowser = function()
261 {
262 for (var i = 0; i < this.SUPPORTED_BROWSERS.length; i++)
263 {
264 var supportedBrowser = this.SUPPORTED_BROWSERS[i];
265 if (bowser[supportedBrowser])
266 {
267 localStorage.setItem(this.BROWSER_AUTODETECTED_STORAGE_KEY, "true");
268 return this.selectOption(supportedBrowser);
269 }
270 }
271
272 this.selectOption(this.DEFAULT_BROWSER);
273 };
274
275 BrowserSelect.prototype.selectOption = function(browser)
276 {
277 localStorage.setItem(this.BROWSER_STORAGE_KEY, browser);
278
279 // Change body class
280 var bodyClassList = Array.prototype.slice.call(document.body.classList);
281 for (var i = 0; i < bodyClassList.length; i++)
282 {
283 if (bodyClassList[i].indexOf("ua-") > -1)
284 {
285 document.body.classList.remove(bodyClassList[i]);
286 }
287 }
288 document.body.classList.add("ua-" + browser);
289
290 // Check selected option
291 var selectedItem = this.select
292 .querySelector("[data-value='" + browser + "']");
293 selectedItem.setAttribute("aria-checked", "true");
294
295 // Set selected option
296 var selectedOption = selectedItem.innerHTML;
297
298 if (localStorage.getItem(this.BROWSER_AUTODETECTED_STORAGE_KEY))
299 {
300 var autodetected = document
301 .getElementById("browser-select-autodetected")
302 .innerHTML;
303 selectedOption += "<span class='muted'>(" + autodetected + ")</span>";
304 }
305
306 this.select
307 .querySelector(".custom-select-selected")
308 .innerHTML = selectedOption;
309
310 if (!document.querySelector(".platform-" + browser))
311 {
312 this.handleNoContentForBrowser(browser);
313 }
314 };
315
316 BrowserSelect.prototype.handleNoContentForBrowser = function(browser)
317 {
318 var section = document.createElement("section");
319 section.classList.add("platform-" + browser);
320 section.innerHTML = document
321 .getElementById("no-content-for-platform-message")
322 .innerHTML;
323
324 document
325 .querySelector(".article-body")
326 .insertAdjacentElement("afterbegin", section);
327 }
328
329 BrowserSelect.prototype._onClickOrKeyDown = function(event)
330 {
331 var option = event.target.closest(".custom-select-option");
332 if (!option) return;
333
334 var IS_ENTER_KEY = event.key == "Enter" || event.keyCode == 13;
335 if (event.keyCode && !IS_ENTER_KEY) return;
336
337 localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY);
338
339 // Uncheck previously checked option
340 this.select
341 .querySelector("[aria-checked='true']")
342 .setAttribute("aria-checked", "false");
343
344 this.selectOption(option.getAttribute("data-value"));
345
346 this.close();
347 };
348
349 var browserSelect = document.getElementById("browser-select");
350 if (browserSelect)
351 {
352 new BrowserSelect(browserSelect);
353 }
354
355 }, false);
356 }());
OLDNEW

Powered by Google App Engine
This is Rietveld