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: Indentation Created Nov. 1, 2017, 12:34 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/svg/arrow-icon-down-secondary.svg ('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
@@ -50,16 +50,18 @@
// 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();
@@ -219,10 +221,123 @@
}
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.DEFAULT_BROWSER = "chrome";
+ this.BROWSER_STORAGE_KEY = "BROWSER";
+ this.BROWSER_AUTODETECTED_STORAGE_KEY = "BROWSER_AUTODETECTED";
+
+ 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()
+ {
+ 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)
+ {
+ 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 + "']");
ire 2017/11/01 12:36:49 @julian Is this what you mean?
juliandoucette 2017/11/01 12:49:21 Yes. RE: kzar's comment. I think kzar debunked m
ire 2017/11/01 17:20:12 Okay, I prefer my way then :p
+ 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;
+ };
+
+ 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);
+
+ // Uncheck previously checked option
+ this.select
+ .querySelector("[aria-checked='true']")
+ .setAttribute("aria-checked", "false");
+
+ this.selectOption(event.target.getAttribute("data-value"));
+
+ this.close();
+ };
+
+ var browserSelect = document.getElementById("browser-select");
+ if (browserSelect)
+ {
+ new BrowserSelect(browserSelect);
+ }
+
}, false);
}());
« no previous file with comments | « static/img/svg/arrow-icon-down-secondary.svg ('k') | static/js/vendor/bowser.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld