| Index: static/dist/js/main.js |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/static/dist/js/main.js |
| @@ -0,0 +1,380 @@ |
| +/*! |
| + * This file is part of help.eyeo.com. |
| + * Copyright (C) 2017-present eyeo GmbH |
| + * |
| + * help.eyeo.com is free software: you can redistribute it and/or modify |
| + * it under the terms of the GNU General Public License as published by |
| + * the Free Software Foundation, either version 3 of the License, or |
| + * (at your option) any later version. |
| + * |
| + * help.eyeo.com is distributed in the hope that it will be useful, |
| + * but WITHOUT ANY WARRANTY; without even the implied warranty of |
| + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| + * GNU General Public License for more details. |
| + * |
| + * You should have received a copy of the GNU General Public License |
| + * along with help.eyeo.com. If not, see <http://www.gnu.org/licenses/>. |
| + */ |
| +(function() |
| +{ |
| + document.addEventListener("DOMContentLoaded", function() |
| + { |
| + |
| + /************************************************************************** |
| + * General |
| + **************************************************************************/ |
| + |
| + // Change html class name from "no-js" to "js" |
| + document.documentElement.className = "js"; |
| + |
| + /************************************************************************** |
| + * Navbar |
| + **************************************************************************/ |
| + |
| + function toggleNavbarCollapse() |
| + { |
| + var navbarCollapseEls = this.parentElement.getElementsByClassName("navbar-collapse"); |
| + for (var i = 0; i < navbarCollapseEls.length; i++) |
| + { |
| + navbarCollapseEls[i] |
| + .classList.toggle("open") |
| + } |
| + } |
| + |
| + var toggleNavbarCollapseEls = document.getElementsByClassName("toggle-navbar-collapse"); |
| + for (var i = 0; i < toggleNavbarCollapseEls.length; i++) |
| + { |
| + toggleNavbarCollapseEls[i] |
| + .addEventListener("click", toggleNavbarCollapse, false); |
| + } |
| + |
| + /************************************************************************** |
| + * CustomSelect |
| + **************************************************************************/ |
| + |
| + function CustomSelect(select) |
| + { |
| + this.select = select; |
| + this.close(); |
| + this.select |
| + .addEventListener("click", this._onClick.bind(this), false); |
| + this.select |
| + .addEventListener("focusout", this._onFocusOut.bind(this), false); |
| + } |
| + |
| + CustomSelect.prototype._onFocusOut = function() |
| + { |
| + // setTimeout to allow document.activeElement |
| + // to move to newly focused element |
| + setTimeout(function() |
| + { |
| + var newFocus = document.activeElement; |
| + |
| + if (newFocus |
| + .classList.contains("custom-select-selected") || |
| + newFocus |
| + .classList.contains("custom-select-option") || |
| + newFocus |
| + .parentElement |
| + .classList.contains("custom-select-option")) |
| + { |
| + return; |
| + } |
| + |
| + this.close(); |
| + |
| + }.bind(this), 1); |
| + } |
| + |
| + CustomSelect.prototype._onClick = function(event) |
| + { |
| + if (event.target.classList.contains("custom-select-selected")) |
| + { |
| + var options = this.select.querySelector(".custom-select-options"); |
| + if (options.getAttribute("aria-hidden") == "true") |
| + { |
| + this.open(); |
| + } |
| + else |
| + { |
| + this.close(); |
| + } |
| + } |
| + } |
| + |
| + CustomSelect.prototype.open = function() |
| + { |
| + this.select |
| + .querySelector(".custom-select-selected") |
| + .setAttribute("aria-expanded", "true"); |
| + |
| + this.select |
| + .querySelector(".custom-select-options") |
| + .removeAttribute("aria-hidden"); |
| + } |
| + |
| + CustomSelect.prototype.close = function() |
| + { |
| + this.select |
| + .querySelector(".custom-select-selected") |
| + .setAttribute("aria-expanded", "false"); |
| + |
| + this.select |
| + .querySelector(".custom-select-options") |
| + .setAttribute("aria-hidden", "true"); |
| + } |
| + |
| + new CustomSelect(document.getElementById("language-select")); |
| + |
| + /************************************************************************** |
| + * Accordion |
| + **************************************************************************/ |
| + |
| + function Accordion(accordion) |
| + { |
| + this.accordion = accordion; |
| + |
| + var accordionButtons = this.accordion.getElementsByClassName('accordion-toggle-button'); |
| + for (var i = 0; i < accordionButtons.length; i++) |
| + { |
| + // Close all sections except the first |
| + if (i !== 0) |
| + { |
| + accordionButtons[i].setAttribute("aria-expanded", "false"); |
| + document |
| + .getElementById( accordionButtons[i].getAttribute("aria-controls") ) |
| + .setAttribute("hidden", "true"); |
| + } |
| + } |
| + |
| + this.accordion |
| + .addEventListener("click", this._onClick.bind(this), false); |
| + this.accordion |
| + .addEventListener("keydown", this._onKeyDown.bind(this), false); |
| + } |
| + |
| + Accordion.prototype.toggleSection = function(clickedButton) |
| + { |
| + // Hide currently expanded section |
| + var expandedButton = this.accordion.querySelector("button[aria-expanded='true']"); |
| + if (expandedButton) |
| + { |
| + expandedButton.setAttribute("aria-expanded", "false"); |
| + document |
| + .getElementById( expandedButton.getAttribute("aria-controls") ) |
| + .setAttribute("hidden", "true"); |
| + } |
| + |
| + // If currently expanded section is clicked |
| + if (expandedButton === clickedButton) return; |
| + |
| + // Expand new section |
| + clickedButton.setAttribute("aria-expanded", "true"); |
| + document |
| + .getElementById( clickedButton.getAttribute("aria-controls") ) |
| + .removeAttribute("hidden"); |
| + } |
| + |
| + Accordion.prototype.focusNextSection = function() |
| + { |
| + var currentFocus = document.activeElement; |
| + var nextheading = currentFocus.parentElement.nextElementSibling.nextElementSibling; |
| + |
| + if (nextheading) |
| + { |
| + nextheading // .accordion-heading |
| + .firstElementChild // .accordion-toggle-button |
| + .focus(); |
| + } |
| + else |
| + { |
| + this.accordion |
| + .firstElementChild // .accordion-heading |
| + .firstElementChild // .accordion-toggle-button |
| + .focus(); |
| + } |
| + } |
| + |
| + Accordion.prototype.focusPrevSection = function() |
| + { |
| + var currentFocus = document.activeElement; |
| + var prevAccordionBody = currentFocus.parentElement.previousElementSibling; |
| + |
| + if (prevAccordionBody) |
| + { |
| + prevAccordionBody // .accordion-body |
| + .previousElementSibling // .accordion-heading |
| + .firstElementChild // .accordion-toggle-button |
| + .focus(); |
| + } |
| + else |
| + { |
| + this.accordion |
| + .lastElementChild // .accordion-body |
| + .previousElementSibling // .accordion-heading |
| + .firstElementChild // .accordion-toggle-button |
| + .focus(); |
| + } |
| + } |
| + |
| + Accordion.prototype._onKeyDown = function(event) |
| + { |
| + if (!event.target.classList.contains("accordion-toggle-button")) return; |
| + |
| + if (event.key == "ArrowUp" || event.keyCode == 38) |
| + { |
| + this.focusPrevSection(); |
| + } |
| + else if (event.key == "ArrowDown" || event.keyCode == 40) |
| + { |
| + this.focusNextSection(); |
| + } |
| + } |
| + |
| + Accordion.prototype._onClick = function(event) |
| + { |
| + if (!event.target.classList.contains("accordion-toggle-button")) return; |
| + |
| + this.toggleSection(event.target); |
| + } |
| + |
| + var productTopicsAccordion = document.getElementById('product-topics-accordion'); |
| + if (productTopicsAccordion) |
| + { |
| + new Accordion(productTopicsAccordion); |
| + } |
| + |
| + /************************************************************************** |
| + * BrowserSelect |
| + **************************************************************************/ |
| + |
| + function BrowserSelect(select) |
| + { |
| + this.select = select; |
| + CustomSelect.apply(this, [this.select]); |
| + |
| + this.BROWSER_STORAGE_KEY = "BROWSER"; |
| + this.BROWSER_AUTODETECTED_STORAGE_KEY = "BROWSER_AUTODETECTED"; |
| + this.SUPPORTED_BROWSERS = ["chrome", "opera", "samsungBrowser", |
| + "yandexbrowser", "maxthon", "msie", |
| + "msedge", "firefox", "ios", "safari"]; |
| + this.DEFAULT_BROWSER = "chrome"; |
| + |
| + this.select |
| + .addEventListener("click", this._onClickOrKeyDown.bind(this), false); |
| + |
| + this.select |
| + .addEventListener("keydown", this._onClickOrKeyDown.bind(this), false); |
| + |
| + var storedBrowser = localStorage.getItem(this.BROWSER_STORAGE_KEY); |
| + if (storedBrowser) this.selectOption(storedBrowser); |
| + else this.detectBrowser(); |
| + } |
| + |
| + BrowserSelect.prototype = Object.create(CustomSelect.prototype); |
| + BrowserSelect.prototype.constructor = BrowserSelect; |
| + |
| + BrowserSelect.prototype.detectBrowser = function() |
| + { |
| + for (var i = 0; i < this.SUPPORTED_BROWSERS.length; i++) |
| + { |
| + var supportedBrowser = this.SUPPORTED_BROWSERS[i]; |
| + if (bowser[supportedBrowser]) |
| + { |
| + localStorage.setItem(this.BROWSER_AUTODETECTED_STORAGE_KEY, "true"); |
| + return this.selectOption(supportedBrowser); |
| + } |
| + } |
| + |
| + this.selectOption(this.DEFAULT_BROWSER); |
| + }; |
| + |
| + BrowserSelect.prototype.selectOption = function(browser) |
| + { |
| + localStorage.setItem(this.BROWSER_STORAGE_KEY, browser); |
| + |
| + // Change body class |
| + var bodyClassList = Array.prototype.slice.call(document.body.classList); |
| + for (var i = 0; i < bodyClassList.length; i++) |
| + { |
| + if (bodyClassList[i].indexOf("ua-") > -1) |
| + { |
| + document.body.classList.remove(bodyClassList[i]); |
| + } |
| + } |
| + document.body.classList.add("ua-" + browser); |
| + |
| + // Check selected option |
| + var selectedItem = this.select |
| + .querySelector("[data-value='" + browser + "']"); |
| + selectedItem.setAttribute("aria-checked", "true"); |
| + |
| + // Set selected option |
| + var selectedOption = selectedItem.innerHTML; |
| + |
| + if (localStorage.getItem(this.BROWSER_AUTODETECTED_STORAGE_KEY)) |
| + { |
| + var autodetected = document |
| + .getElementById("browser-select-autodetected") |
| + .innerHTML; |
| + selectedOption += "<span class='muted'>(" + autodetected + ")</span>"; |
| + } |
| + |
| + this.select |
| + .querySelector(".custom-select-selected") |
| + .innerHTML = selectedOption; |
| + |
| + if (!document.querySelector(".platform-" + browser)) |
| + { |
| + this.handleNoContentForBrowser(browser); |
| + } |
| + }; |
| + |
| + BrowserSelect.prototype.handleNoContentForBrowser = function(browser) |
| + { |
| + var section = document.createElement("section"); |
| + section.classList.add("platform-" + browser); |
| + section.innerHTML = document |
| + .getElementById("no-content-for-platform-message") |
| + .innerHTML; |
| + |
| + document |
| + .querySelector(".article-body") |
| + .insertAdjacentElement("afterbegin", section); |
| + } |
| + |
| + BrowserSelect.prototype._onClickOrKeyDown = function(event) |
| + { |
| + var option = event.target.closest(".custom-select-option"); |
| + if (!option) return; |
| + |
| + var IS_ENTER_KEY = event.key == "Enter" || event.keyCode == 13; |
| + if (event.keyCode && !IS_ENTER_KEY) return; |
| + |
| + localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY); |
| + |
| + // Uncheck previously checked option |
| + this.select |
| + .querySelector("[aria-checked='true']") |
| + .setAttribute("aria-checked", "false"); |
| + |
| + this.selectOption(option.getAttribute("data-value")); |
| + |
| + this.close(); |
| + }; |
| + |
| + var browserSelect = document.getElementById("browser-select"); |
| + if (browserSelect) |
| + { |
| + new BrowserSelect(browserSelect); |
| + } |
| + |
| + }, false); |
| +}()); |
| +//# sourceMappingURL=main.js.map |
| + |
| +//# sourceMappingURL=main-debug.js.map |
| + |
| +//# sourceMappingURL=main.js.map |
| + |
| +//# sourceMappingURL=main.js.map |