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

Side by Side Diff: static/dist/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: Move all requires to top of gulpfile.js Created Dec. 4, 2017, 2:10 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 /*!
2 * This file is part of help.eyeo.com.
3 * Copyright (C) 2017-present eyeo GmbH
4 *
5 * help.eyeo.com is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License as published by
7 * the Free Software Foundation, either version 3 of the License, or
8 * (at your option) any later version.
9 *
10 * help.eyeo.com is distributed in the hope that it will be useful,
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 * GNU General Public License for more details.
14 *
15 * You should have received a copy of the GNU General Public License
16 * along with help.eyeo.com. If not, see <http://www.gnu.org/licenses/>.
17 */
18 (function()
19 {
20 document.addEventListener("DOMContentLoaded", function()
21 {
22
23 /**************************************************************************
24 * General
25 **************************************************************************/
26
27 // Change html class name from "no-js" to "js"
28 document.documentElement.className = "js";
29
30 /**************************************************************************
31 * Navbar
32 **************************************************************************/
33
34 function toggleNavbarCollapse()
35 {
36 var navbarCollapseEls = this.parentElement.getElementsByClassName("navbar- collapse");
37 for (var i = 0; i < navbarCollapseEls.length; i++)
38 {
39 navbarCollapseEls[i]
40 .classList.toggle("open")
41 }
42 }
43
44 var toggleNavbarCollapseEls = document.getElementsByClassName("toggle-navbar -collapse");
45 for (var i = 0; i < toggleNavbarCollapseEls.length; i++)
46 {
47 toggleNavbarCollapseEls[i]
48 .addEventListener("click", toggleNavbarCollapse, false);
49 }
50
51 /**************************************************************************
52 * CustomSelect
53 **************************************************************************/
54
55 function CustomSelect(select)
56 {
57 this.select = select;
58 this.close();
59 this.select
60 .addEventListener("click", this._onClick.bind(this), false);
61 this.select
62 .addEventListener("focusout", this._onFocusOut.bind(this), false);
63 }
64
65 CustomSelect.prototype._onFocusOut = function()
66 {
67 // setTimeout to allow document.activeElement
68 // to move to newly focused element
69 setTimeout(function()
70 {
71 var newFocus = document.activeElement;
72
73 if (newFocus
74 .classList.contains("custom-select-selected") ||
75 newFocus
76 .classList.contains("custom-select-option") ||
77 newFocus
78 .parentElement
79 .classList.contains("custom-select-option"))
80 {
81 return;
82 }
83
84 this.close();
85
86 }.bind(this), 1);
87 }
88
89 CustomSelect.prototype._onClick = function(event)
90 {
91 if (event.target.classList.contains("custom-select-selected"))
92 {
93 var options = this.select.querySelector(".custom-select-options");
94 if (options.getAttribute("aria-hidden") == "true")
95 {
96 this.open();
97 }
98 else
99 {
100 this.close();
101 }
102 }
103 }
104
105 CustomSelect.prototype.open = function()
106 {
107 this.select
108 .querySelector(".custom-select-selected")
109 .setAttribute("aria-expanded", "true");
110
111 this.select
112 .querySelector(".custom-select-options")
113 .removeAttribute("aria-hidden");
114 }
115
116 CustomSelect.prototype.close = function()
117 {
118 this.select
119 .querySelector(".custom-select-selected")
120 .setAttribute("aria-expanded", "false");
121
122 this.select
123 .querySelector(".custom-select-options")
124 .setAttribute("aria-hidden", "true");
125 }
126
127 new CustomSelect(document.getElementById("language-select"));
128
129 /**************************************************************************
130 * Accordion
131 **************************************************************************/
132
133 function Accordion(accordion)
134 {
135 this.accordion = accordion;
136
137 var accordionButtons = this.accordion.getElementsByClassName('accordion-to ggle-button');
138 for (var i = 0; i < accordionButtons.length; i++)
139 {
140 // Close all sections except the first
141 if (i !== 0)
142 {
143 accordionButtons[i].setAttribute("aria-expanded", "false");
144 document
145 .getElementById( accordionButtons[i].getAttribute("aria-controls") )
146 .setAttribute("hidden", "true");
147 }
148 }
149
150 this.accordion
151 .addEventListener("click", this._onClick.bind(this), false);
152 this.accordion
153 .addEventListener("keydown", this._onKeyDown.bind(this), false);
154 }
155
156 Accordion.prototype.toggleSection = function(clickedButton)
157 {
158 // Hide currently expanded section
159 var expandedButton = this.accordion.querySelector("button[aria-expanded='t rue']");
160 if (expandedButton)
161 {
162 expandedButton.setAttribute("aria-expanded", "false");
163 document
164 .getElementById( expandedButton.getAttribute("aria-controls") )
165 .setAttribute("hidden", "true");
166 }
167
168 // If currently expanded section is clicked
169 if (expandedButton === clickedButton) return;
170
171 // Expand new section
172 clickedButton.setAttribute("aria-expanded", "true");
173 document
174 .getElementById( clickedButton.getAttribute("aria-controls") )
175 .removeAttribute("hidden");
176 }
177
178 Accordion.prototype.focusNextSection = function()
179 {
180 var currentFocus = document.activeElement;
181 var nextheading = currentFocus.parentElement.nextElementSibling.nextElemen tSibling;
182
183 if (nextheading)
184 {
185 nextheading // .accordion-heading
186 .firstElementChild // .accordion-toggle-button
187 .focus();
188 }
189 else
190 {
191 this.accordion
192 .firstElementChild // .accordion-heading
193 .firstElementChild // .accordion-toggle-button
194 .focus();
195 }
196 }
197
198 Accordion.prototype.focusPrevSection = function()
199 {
200 var currentFocus = document.activeElement;
201 var prevAccordionBody = currentFocus.parentElement.previousElementSibling;
202
203 if (prevAccordionBody)
204 {
205 prevAccordionBody // .accordion-body
206 .previousElementSibling // .accordion-heading
207 .firstElementChild // .accordion-toggle-button
208 .focus();
209 }
210 else
211 {
212 this.accordion
213 .lastElementChild // .accordion-body
214 .previousElementSibling // .accordion-heading
215 .firstElementChild // .accordion-toggle-button
216 .focus();
217 }
218 }
219
220 Accordion.prototype._onKeyDown = function(event)
221 {
222 if (!event.target.classList.contains("accordion-toggle-button")) return;
223
224 if (event.key == "ArrowUp" || event.keyCode == 38)
225 {
226 this.focusPrevSection();
227 }
228 else if (event.key == "ArrowDown" || event.keyCode == 40)
229 {
230 this.focusNextSection();
231 }
232 }
233
234 Accordion.prototype._onClick = function(event)
235 {
236 if (!event.target.classList.contains("accordion-toggle-button")) return;
237
238 this.toggleSection(event.target);
239 }
240
241 var productTopicsAccordion = document.getElementById('product-topics-accordi on');
242 if (productTopicsAccordion)
243 {
244 new Accordion(productTopicsAccordion);
245 }
246
247 /**************************************************************************
248 * BrowserSelect
249 **************************************************************************/
250
251 function BrowserSelect(select)
252 {
253 this.select = select;
254 CustomSelect.apply(this, [this.select]);
255
256 this.BROWSER_STORAGE_KEY = "BROWSER";
257 this.BROWSER_AUTODETECTED_STORAGE_KEY = "BROWSER_AUTODETECTED";
258 this.SUPPORTED_BROWSERS = ["chrome", "opera", "samsungBrowser",
259 "yandexbrowser", "maxthon", "msie",
260 "msedge", "firefox", "ios", "safari"];
261 this.DEFAULT_BROWSER = "chrome";
262
263 this.select
264 .addEventListener("click", this._onClickOrKeyDown.bind(this), false);
265
266 this.select
267 .addEventListener("keydown", this._onClickOrKeyDown.bind(this), false);
268
269 var storedBrowser = localStorage.getItem(this.BROWSER_STORAGE_KEY);
270 if (storedBrowser) this.selectOption(storedBrowser);
271 else this.detectBrowser();
272 }
273
274 BrowserSelect.prototype = Object.create(CustomSelect.prototype);
275 BrowserSelect.prototype.constructor = BrowserSelect;
276
277 BrowserSelect.prototype.detectBrowser = function()
278 {
279 for (var i = 0; i < this.SUPPORTED_BROWSERS.length; i++)
280 {
281 var supportedBrowser = this.SUPPORTED_BROWSERS[i];
282 if (bowser[supportedBrowser])
283 {
284 localStorage.setItem(this.BROWSER_AUTODETECTED_STORAGE_KEY, "true");
285 return this.selectOption(supportedBrowser);
286 }
287 }
288
289 this.selectOption(this.DEFAULT_BROWSER);
290 };
291
292 BrowserSelect.prototype.selectOption = function(browser)
293 {
294 localStorage.setItem(this.BROWSER_STORAGE_KEY, browser);
295
296 // Change body class
297 var bodyClassList = Array.prototype.slice.call(document.body.classList);
298 for (var i = 0; i < bodyClassList.length; i++)
299 {
300 if (bodyClassList[i].indexOf("ua-") > -1)
301 {
302 document.body.classList.remove(bodyClassList[i]);
303 }
304 }
305 document.body.classList.add("ua-" + browser);
306
307 // Check selected option
308 var selectedItem = this.select
309 .querySelector("[data-value='" + browser + "']");
310 selectedItem.setAttribute("aria-checked", "true");
311
312 // Set selected option
313 var selectedOption = selectedItem.innerHTML;
314
315 if (localStorage.getItem(this.BROWSER_AUTODETECTED_STORAGE_KEY))
316 {
317 var autodetected = document
318 .getElementById("browser-select-autodetected")
319 .innerHTML;
320 selectedOption += "<span class='muted'>(" + autodetected + ")</span>";
321 }
322
323 this.select
324 .querySelector(".custom-select-selected")
325 .innerHTML = selectedOption;
326
327 if (!document.querySelector(".platform-" + browser))
328 {
329 this.handleNoContentForBrowser(browser);
330 }
331 };
332
333 BrowserSelect.prototype.handleNoContentForBrowser = function(browser)
334 {
335 var section = document.createElement("section");
336 section.classList.add("platform-" + browser);
337 section.innerHTML = document
338 .getElementById("no-content-for-platform-message")
339 .innerHTML;
340
341 document
342 .querySelector(".article-body")
343 .insertAdjacentElement("afterbegin", section);
344 }
345
346 BrowserSelect.prototype._onClickOrKeyDown = function(event)
347 {
348 var option = event.target.closest(".custom-select-option");
349 if (!option) return;
350
351 var IS_ENTER_KEY = event.key == "Enter" || event.keyCode == 13;
352 if (event.keyCode && !IS_ENTER_KEY) return;
353
354 localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY);
355
356 // Uncheck previously checked option
357 this.select
358 .querySelector("[aria-checked='true']")
359 .setAttribute("aria-checked", "false");
360
361 this.selectOption(option.getAttribute("data-value"));
362
363 this.close();
364 };
365
366 var browserSelect = document.getElementById("browser-select");
367 if (browserSelect)
368 {
369 new BrowserSelect(browserSelect);
370 }
371
372 }, false);
373 }());
374 //# sourceMappingURL=main.js.map
375
376 //# sourceMappingURL=main-debug.js.map
377
378 //# sourceMappingURL=main.js.map
379
380 //# sourceMappingURL=main.js.map
OLDNEW

Powered by Google App Engine
This is Rietveld