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
@@ -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 my claim and we are actually inconsistent about how we do
this across repositories. I'm OK with whatever.

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