Issue 6003 - Better handling of no-content-for-platform-message on help.eyeo.com

static/js/main.js

Index: static/js/main.js
===================================================================
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -230,38 +230,57 @@
     /**************************************************************************
      * BrowserSelect
      **************************************************************************/
 
     function BrowserSelect(select)
     {
       this.select = select;
       CustomSelect.apply(this, [this.select]);
+      this.noContentMessage = document.getElementById("no-content-for-platform-message");
       
       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.setCurrentArticleSupportedBrowsers();
+      
       this.select
         .addEventListener("click", this._onClickOrKeyDown.bind(this), false);
       
       this.select
         .addEventListener("keydown", this._onClickOrKeyDown.bind(this), false);
 
+      this.noContentMessage
+        .addEventListener("click", this._onClickNoContentMessage.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.setCurrentArticleSupportedBrowsers = function()
+    {
+      for (var i = 0; i < this.SUPPORTED_BROWSERS.length; i++)
+      {
+        var supportedBrowser = this.SUPPORTED_BROWSERS[i];
+        if (!document.querySelector(".platform-"+supportedBrowser))
+        {
+          this.noContentMessage.querySelector("."+supportedBrowser)
+              .setAttribute("hidden", "true");
+        }
+      }
+    };
+
     BrowserSelect.prototype.detectBrowser = function()
     {
       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");
@@ -301,36 +320,27 @@
                               .getElementById("browser-select-autodetected")
                               .innerHTML;
         selectedOption += "<span class='muted'>(" + autodetected + ")</span>";
       }
 
       this.select
           .querySelector(".custom-select-selected")
           .innerHTML = selectedOption;
+
+      this.noContentMessage.setAttribute("aria-hidden", "true");
+      this.noContentMessage.setAttribute("hidden", "true");
       
       if (!document.querySelector(".platform-" + browser))
       {
-        this.handleNoContentForBrowser(browser);
+        this.noContentMessage.removeAttribute("aria-hidden");
+        this.noContentMessage.removeAttribute("hidden");
       }
     };
 
-    BrowserSelect.prototype.handleNoContentForBrowser = function(browser)
-    {
-      var section = document.createElement("section");
-      section.classList.add("platform-" + browser);
-      section.innerHTML = document
-                            .getElementById("no-content-for-platform-message")
-                            .innerHTML;
-
-      document
-        .querySelector(".article-body")
-        .insertAdjacentElement("afterbegin", section);
-    }
-
     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);
@@ -340,16 +350,24 @@
           .querySelector("[aria-checked='true']")
           .setAttribute("aria-checked", "false");
 
       this.selectOption(event.target.getAttribute("data-value"));
 
       this.close();
     };
 
+    BrowserSelect.prototype._onClickNoContentMessage = function(event)
+    {
+      if (event.target.tagName != "BUTTON") return;
+
+      var browser = event.target.parentElement.className;
+      this.selectOption(browser);
+    };
+
     var browserSelect = document.getElementById("browser-select");
     if (browserSelect)
     {
       new BrowserSelect(browserSelect);
     }
 
   }, false);
 }());