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
@@ -31,16 +31,18 @@
     }
 
     /**************************************************************************
      * 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);
     }
 
@@ -50,16 +52,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 +223,122 @@
     }
 
     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";

[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.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.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 + "']");
+      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);
 }());