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

static/js/main.js

-(function(){
+(function()
+{
   document.addEventListener("DOMContentLoaded", function()
   {
 
     /**************************************************************************
      * General
      **************************************************************************/
 
     // Change html class name from "no-js" to "js"
     document.documentElement.className = "js";
 
@@ skipping 216 matching lines @@
 
     /**************************************************************************
      * 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.SUPPORTED_BROWSERS = ["chrome", "opera", "samsungBrowser", 
+                                 "yandexbrowser", "maxthon", "msie", 
+                                 "msedge", "firefox", "ios", "safari"];
+      this.DEFAULT_BROWSER = "chrome";
       
       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);  
+      for (var i = 0; i < this.SUPPORTED_BROWSERS.length; i++)
+      {
+        var supportedBrowser = this.SUPPORTED_BROWSERS[i];
+        if (bowser[supportedBrowser])
+        {
+          localStorage.setItem(this.BROWSER_AUTODETECTED_STORAGE_KEY, "true");
+          return this.selectOption(supportedBrowser);
+        }
+      }
+
+      this.selectOption(this.DEFAULT_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

+                             .querySelector("[data-value='" + browser + "']");
       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;
@@ skipping 25 matching lines @@
     };
 
     var browserSelect = document.getElementById("browser-select");
     if (browserSelect)
     {
       new BrowserSelect(browserSelect);
     }
 
   }, false);
 }());