Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: static/js/main.js

Issue 29559620: Issue 5692 - Create Browser Selector with Browser Detection Component for help.eyeo.com (Closed) Base URL: https://hg.adblockplus.org/help.eyeo.com
Patch Set: Added missing translations Created Sept. 29, 2017, 12:46 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « static/img/png/arrow-down-icon-secondary.png ('k') | static/js/vendor/bowser.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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);
}());
« no previous file with comments | « static/img/png/arrow-down-icon-secondary.png ('k') | static/js/vendor/bowser.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld