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 |