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: SVG enhancement for arrow-icon, correct formatting Created Oct. 20, 2017, 1:39 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
Index: static/js/main.js
===================================================================
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -194,10 +194,129 @@
}
var productTopicsAccordion = document.getElementById('product-topics-accordion');
if (productTopicsAccordion)
{
new Accordion(productTopicsAccordion);
}
+ /**************************************************************************
+ * BrowserSelect
+ **************************************************************************/
+
+ function BrowserSelect(select)
+ {
+ this.browserSelect = select;
+ this.browserCustomSelect = new CustomSelect(this.browserSelect);
+
+ 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
+ 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.browserSelect
+ .querySelector("[data-value='" + browser + "']");
+ selectedItem.setAttribute("aria-checked", "true");
+
+ // Set selected option
+ var selectedOption = document.createElement("li");
+ selectedOption.innerHTML = selectedItem.innerHTML;
+
+ if (localStorage.getItem(this.BROWSER_AUTODETECTED_STORAGE_KEY))
+ {
+ var autodetected = document
+ .getElementById('browser-select-autodetected')
+ .innerHTML;
+ 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);
+
+ // Uncheck previously checked option
+ this.browserSelect
+ .querySelector("[aria-checked='true']")
+ .setAttribute("aria-checked", "false");
+
+ this.selectOption(event.target.getAttribute("data-value"));
+
+ // Close Select
+ this.browserCustomSelect.close();
+ }
+
+ var browserSelect = document.getElementById("browser-select");
+ if (browserSelect)
+ {
+ new BrowserSelect(browserSelect);
+ }
+
}, false);
}());

Powered by Google App Engine
This is Rietveld