Index: static/js/main.js |
=================================================================== |
--- a/static/js/main.js |
+++ b/static/js/main.js |
@@ -44,10 +44,113 @@ |
{ |
customSelectEls[i] |
.addEventListener("click", onClickCustomSelect, false); |
customSelectEls[i] |
.nextElementSibling |
.setAttribute("aria-hidden", "true"); |
} |
+ // Browser Select |
+ function BrowserSelect(select) |
+ { |
+ this.browserSelect = select; |
+ |
+ this.DEFAULT_BROWSER = "chrome"; |
+ this.BROWSER_STORAGE_KEY = "BROWSER"; |
+ this.BROWSER_AUTODETECTED_STORAGE_KEY = "BROWSER_AUTODETECTED"; |
+ |
+ this.browserSelect |
+ .addEventListener("click", this._onClickOrKeyDown.bind(this), false); |
+ |
+ this.browserSelect |
+ .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.detectBrowser = function() |
+ { |
+ localStorage.setItem(this.BROWSER_AUTODETECTED_STORAGE_KEY, "true"); |
+ |
+ var browser; |
+ if (bowser.chrome) browser = "chrome"; |
+ else if (bowser.opera) browser = "opera"; |
+ else if (bowser.coast) browser = "opera"; |
+ else if (bowser.samsungBrowser) browser = "samsung"; |
+ else if (bowser.yandexbrowser) browser = "yandex"; |
+ else if (bowser.maxthon) browser = "maxthon"; |
+ else if (bowser.msie) browser = "ie"; |
+ else if (bowser.msedge) browser = "edge"; |
+ else if (bowser.firefox) browser = "firefox"; |
+ else if (bowser.ios) browser = "ios"; |
+ else if (bowser.safari) browser = "safari"; |
+ else |
+ { |
+ localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY); |
+ browser = this.DEFAULT_BROWSER; |
+ } |
+ |
+ this.selectOption(browser); |
+ } |
+ |
+ BrowserSelect.prototype.selectOption = function(browser) |
+ { |
+ // Save value to Local Storage |
+ localStorage.setItem(this.BROWSER_STORAGE_KEY, browser); |
+ |
+ // Change body class |
+ document.body.className = "ua-"+browser; |
+ |
+ // Set selected option |
+ var selectedOption = document.createElement("li"); |
+ selectedOption.innerHTML = this |
+ .browserSelect |
+ .querySelector("[data-value='"+browser+"']") |
+ .innerHTML; |
+ |
+ if (localStorage.getItem(this.BROWSER_AUTODETECTED_STORAGE_KEY)) |
+ { |
+ selectedOption.innerHTML += "<span class='muted'>(autodetected)</span>"; |
+ } |
+ |
+ this.browserSelect |
+ .querySelector(".custom-select-selected") |
+ .innerHTML = selectedOption.innerHTML; |
+ } |
+ |
+ BrowserSelect.prototype._onClickOrKeyDown = function(event) |
+ { |
+ if (!event.target.classList.contains("custom-select-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); |
+ |
+ this.selectOption(event.target.getAttribute("data-value")); |
+ |
+ // Close Select |
+ document |
+ .querySelector("#browser-select .custom-select-selected") |
+ .setAttribute("aria-expanded", "false"); |
+ |
+ document |
+ .querySelector("#browser-select .custom-select-options") |
+ .setAttribute("aria-hidden", "true"); |
+ } |
+ |
+ var browserSelect = document.getElementById("browser-select"); |
+ if (browserSelect) |
+ { |
+ new BrowserSelect(document.getElementById("browser-select")); |
+ } |
+ |
}, false); |
}()); |