Issue 5692 - Create Browser Selector with Browser Detection Component for help.eyeo.com

static/js/main.js

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";

[ire, 2017/09/29 12:09:18]

This is an arbitrary decision. We can change this based on browser usage
statistics and make this whatever is our most commonly used browser.

+      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";

[ire, 2017/09/29 12:09:18]

I decided to go with bowser unless we have some other preferred way of detecting
browser

+      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

[ire, 2017/09/29 12:09:17]

I think I should refactor the way the custom select was created so I can call a
"close" function instead of having to do it manually here.

I will create a separate issue for that then refactor this when that is done.

[ire, 2017/10/11 17:21:45]

Done.

+      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);
 }());