OLD | NEW |
(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 |
OLD | NEW |