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 17 matching lines @@
       toggleNavbarCollapseEls[i]
         .addEventListener("click", toggleNavbarCollapse, false);
     }
 
     /**************************************************************************
      * CustomSelect
      **************************************************************************/
 
     function CustomSelect(select)
     {
-      console.log(select)

[juliandoucette, 2017/10/31 13:19:58]

Hello, world

[ire, 2017/11/01 12:36:49]

Oops! Thanks :)

-
       this.select = select;
       this.close();
       this.select
           .addEventListener("click", this._onClick.bind(this), false);
       this.select
           .addEventListener("focusout", this._onFocusOut.bind(this), false);
     }
 
     CustomSelect.prototype._onFocusOut = function()
     {
@@ skipping 179 matching lines @@
 
     /**************************************************************************
      * BrowserSelect
      **************************************************************************/
 
     function BrowserSelect(select)
     {
       this.select = select;
       CustomSelect.apply(this, [this.select]);
       
-      this.DEFAULT_BROWSER = "chrome";
       this.BROWSER_STORAGE_KEY = "BROWSER";

[juliandoucette, 2017/10/31 13:19:59]

NIT/Suggest: The word "STORAGE" is unnecessary (very opinionated - ignore if you
disagree)

[ire, 2017/11/01 12:36:49]

I don't think it's unnecessary, because it's related to the "storage key", not
just the "browser key" if that makes sense. If anything, the word "BROWSER"
might be what is unnecessary, but I'd rather leave it for clarity.

       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 = CustomSelect.prototype;

[juliandoucette, 2017/10/31 13:19:59]

This assignment is by reference; not by copy. As a result, you are
unintentionally extending CustomSelect.prototype below. I suggest using
Object.create @see
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Obje...

[ire, 2017/11/01 12:36:48]

Thanks! Done.

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