Index: static/js/main.js |
=================================================================== |
deleted file mode 100644 |
--- a/static/js/main.js |
+++ /dev/null |
@@ -1,356 +0,0 @@ |
-(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); |
-}()); |