browser-selection 1.0.0 → 1.0.3

package/dist/browser-selection-styles.css

@@ -1 +1 @@
-.wrapper{max-width:600px;box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;font-family:"Plus Jakarta Sans",sans-serif;font-size:16px;color:#212529;background-color:rgba(0,0,0,0);margin:0;padding:0;line-height:1.5}@font-face{font-family:"Plus Jakarta Sans";src:url("./fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}.dropdown{border:1px solid #cbd5e1;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;cursor:pointer;position:relative;background-color:#fff}.dropdown__arrow{position:absolute;z-index:100}.dropdown__item{position:relative;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.dropdown__item:hover{background-color:#cbd5e1}.dropdown__icon{display:inline-block;margin:11px 10px 0 11px}.dropdown__text{display:inline-block;position:absolute;top:12px;font-weight:500;font-size:14px;white-space:nowrap}.dropdown__slider{display:none;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;max-height:200px;overflow-x:hidden;border:1px solid #cbd5e1;position:absolute;background-color:#fff;z-index:9999}@media(max-width: 767px){.dropdown{width:100% !important}.dropdown__text,.dropdown__item,.dropdown__slider,.dropdown__selected{width:100% !important}}.group{display:flex;align-items:stretch}.group__input{display:flex;border-radius:8px 0 0 8px;align-items:center;position:relative;margin-bottom:1rem;gap:8px;padding:8px 8px 8px 16px;border:1px solid #e4e4e7;border-radius:8px;background-color:#fff}.group__input input{font:inherit;color:#333;width:100%;border:none;outline:none}.group__input button{flex-shrink:0;white-space:nowrap;display:inline-block;line-height:1.6rem;text-align:center;color:#fff;font-size:16px;font-weight:500;font-family:"Plus Jakarta Sans",sans-serif;background-color:#2b3b80;text-align:center;cursor:pointer;padding:.6rem 1.5rem;border-radius:8px;border-color:#2b3b80;transition:background-color .2s ease}.group__input button:hover{background-color:rgb(36.55,50.15,108.8)}@media(max-width: 576px){.group__input{flex-direction:column;align-items:stretch;padding:.75rem;gap:.75rem}}.group__list{padding:0;margin:0;border:1px solid #cbd5e1;border-radius:8px;max-height:456px}.group__list .list{border:none;border-radius:0;border-bottom:1px solid #cbd5e1}.group__list .lists{margin:0;padding:0;max-height:calc(350px - 40px);overflow-y:scroll}.group__list .list:last-child{border:none}.group__list-heading{font-weight:500;font-size:14px;color:#506466}.group__dropdown{display:flex;border-radius:8px}.group__dropdown .dropdown__item,.group__dropdown .dropdown__slider{border-radius:0}.group__dropdown div[id]:nth-child(1) .dropdown{border-radius:8px 0 0 8px}.group__dropdown div[id]:nth-child(2) .dropdown{border-radius:0}.group__dropdown div[id]:nth-child(3) .dropdown{border-radius:0 8px 8px 0}@media(max-width: 767px){.group{width:100% !important}.group__dropdown{flex-direction:column;gap:8px}.group__dropdown .dropdown{border-radius:6px !important}}
+.wdd-wrapper{max-width:600px;box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;font-family:"Plus Jakarta Sans",sans-serif;font-size:16px;color:#212529;background-color:rgba(0,0,0,0);margin:0;padding:0;line-height:1.5}@font-face{font-family:"Plus Jakarta Sans";src:url("./fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}.wdd-dropdown{border:1px solid #cbd5e1;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;cursor:pointer;position:relative;background-color:#fff}.wdd-dropdown__arrow{position:absolute;z-index:100}.wdd-dropdown__item{position:relative;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.wdd-dropdown__item:hover{background-color:#cbd5e1}.wdd-dropdown__icon{display:inline-block;margin:11px 10px 0 11px}.wdd-dropdown__text{display:inline-block;position:absolute;top:12px;font-weight:500;font-size:14px;white-space:nowrap}.wdd-dropdown__slider{display:none;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;max-height:200px;overflow-x:hidden;border:1px solid #cbd5e1;position:absolute;background-color:#fff;z-index:9999}@media(max-width: 767px){.wdd-dropdown{width:100% !important}.wdd-dropdown__text,.wdd-dropdown__item,.wdd-dropdown__slider,.wdd-dropdown__selected{width:100% !important}}.wdd-group{display:flex;align-items:stretch}.wdd-group__input{display:flex;border-radius:8px 0 0 8px;align-items:center;position:relative;margin-bottom:1rem;gap:8px;padding:8px 8px 8px 16px;border:1px solid #e4e4e7;border-radius:8px;background-color:#fff}.wdd-group__input input{font:inherit;color:#333;width:100%;border:none;outline:none}.wdd-group__input button{flex-shrink:0;white-space:nowrap;display:inline-block;line-height:1.6rem;text-align:center;color:#fff;font-size:16px;font-weight:500;font-family:"Plus Jakarta Sans",sans-serif;background-color:#2b3b80;text-align:center;cursor:pointer;padding:.6rem 1.5rem;border-radius:8px;border-color:#2b3b80;transition:background-color .2s ease}.wdd-group__input button:hover{background-color:rgb(36.55,50.15,108.8)}@media(max-width: 576px){.wdd-group__input{flex-direction:column;align-items:stretch;padding:.75rem;gap:.75rem}}.wdd-group__list{padding:0;margin:0;border:1px solid #cbd5e1;border-radius:8px;max-height:456px}.wdd-group__list .wdd-list{border:none;border-radius:0;border-bottom:1px solid #cbd5e1}.wdd-group__list .wdd-lists{margin:0;padding:0;max-height:calc(350px - 40px);overflow-y:scroll}.wdd-group__list .wdd-list:last-child{border:none}.wdd-group__list-heading{font-weight:500;font-size:14px;color:#506466}.wdd-group__dropdown{display:flex;border-radius:8px}.wdd-group__dropdown .wdd-dropdown__item,.wdd-group__dropdown .wdd-dropdown__slider{border-radius:0}.wdd-group__dropdown div[id]:nth-child(1) .wdd-dropdown{border-radius:8px 0 0 8px}.wdd-group__dropdown div[id]:nth-child(2) .wdd-dropdown{border-radius:0}.wdd-group__dropdown div[id]:nth-child(3) .wdd-dropdown{border-radius:0 8px 8px 0}@media(max-width: 767px){.wdd-group{width:100% !important}.wdd-group__dropdown{flex-direction:column;gap:8px}.wdd-group__dropdown .wdd-dropdown{border-radius:6px !important}}

package/dist/js/browser-selection.js

@@ -6,6 +6,9 @@ var script =
   })();
 
 var scriptSrc = script ? script.src : null;
+const basePath = scriptSrc
+  ? scriptSrc.replace(/\/js\/browser-selection(\.min)?\.js$/, "")
+  : "";
 
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", MainFc);
@@ -45,17 +48,17 @@ function MainFc() {
   var containerElem = document.getElementById("browserling-dropdown-container");
 
   var wddWrapper = createDiv({
-    id: "wrapper",
-    class: "wrapper",
+    id: "wdd-wrapper",
+    class: "wdd-wrapper",
     innerHTML:
-      '<div class="group__input" id="run">' +
-      '<input id="input" type="text" class="input" placeholder="https://" />' +
-      '<button id="button" class="button">Test Now</button>' +
+      '<div class="wdd-group__input" id="wdd-run">' +
+      '<input id="wdd-input" type="text" class="wdd-input" placeholder="https://" />' +
+      '<button id="wdd-button" class="wdd-button">Test Now</button>' +
       "</div>" +
-      '<div id="group__dropdown" class="group__dropdown">' +
-      '<div id="platform"></div>' +
-      '<div id="browser"></div>' +
-      '<div id="version"></div>' +
+      '<div id="wdd-group__dropdown" class="wdd-group__dropdown">' +
+      '<div id="wdd-platform"></div>' +
+      '<div id="wdd-browser"></div>' +
+      '<div id="wdd-version"></div>' +
       "</div>"
   });
 
@@ -128,8 +131,9 @@ function MainFc() {
       osText === "Android" ? "android" : osText.toLowerCase().slice(0, 3);
     var iconUrl =
       os === "Android 12.1"
-        ? "/images/os-icons/android-12.png"
-        : "/images/os-icons/" +
+        ? basePath + "/images/os-icons/android-12.png"
+        : basePath +
+          "/images/os-icons/" +
           osText.toLowerCase() +
           "-" +
           osVersion.replace(".", "") +
@@ -147,26 +151,56 @@ function MainFc() {
   });
 
   g_AllBrowserTypes = {
-    ie: { text: "Internet Explorer", icon: "/images/browser-icons/ie.png" },
-    chrome: { text: "Chrome", icon: "/images/browser-icons/chrome.png" },
-    firefox: { text: "Firefox", icon: "/images/browser-icons/firefox.png" },
-    opera: { text: "Opera", icon: "/images/browser-icons/opera.png" },
-    safari: { text: "Safari", icon: "/images/browser-icons/safari.png" },
-    edge: { text: "Edge", icon: "/images/browser-icons/edge.png" },
-    brave: { text: "Brave", icon: "/images/browser-icons/brave.png" },
-    vivaldi: { text: "Vivaldi", icon: "/images/browser-icons/vivaldi.png" },
-    tor: { text: "Tor Browser", icon: "/images/browser-icons/tor.png" },
+    ie: {
+      text: "Internet Explorer",
+      icon: basePath + "/images/browser-icons/ie.png"
+    },
+    chrome: {
+      text: "Chrome",
+      icon: basePath + "/images/browser-icons/chrome.png"
+    },
+    firefox: {
+      text: "Firefox",
+      icon: basePath + "/images/browser-icons/firefox.png"
+    },
+    opera: {
+      text: "Opera",
+      icon: basePath + "/images/browser-icons/opera.png"
+    },
+    safari: {
+      text: "Safari",
+      icon: basePath + "/images/browser-icons/safari.png"
+    },
+    edge: { text: "Edge", icon: basePath + "/images/browser-icons/edge.png" },
+    brave: {
+      text: "Brave",
+      icon: basePath + "/images/browser-icons/brave.png"
+    },
+    vivaldi: {
+      text: "Vivaldi",
+      icon: basePath + "/images/browser-icons/vivaldi.png"
+    },
+    tor: {
+      text: "Tor Browser",
+      icon: basePath + "/images/browser-icons/tor.png"
+    },
     browser: {
       text: "Default Browser",
-      icon: "/images/browser-icons/android.png"
+      icon: basePath + "/images/browser-icons/android.png"
+    },
+    mypal: {
+      text: "Mypal",
+      icon: basePath + "/images/browser-icons/mypal.png"
     },
-    mypal: { text: "Mypal", icon: "/images/browser-icons/mypal.png" },
     supermium: {
       text: "Supermium",
-      icon: "/images/browser-icons/supermium.png"
+      icon: basePath + "/images/browser-icons/supermium.png"
+    },
+    ddg: {
+      text: "DuckDuckGo",
+      icon: basePath + "/images/browser-icons/ddg.png"
     },
-    ddg: { text: "DuckDuckGo", icon: "/images/browser-icons/ddg.png" },
-    orion: { text: "Orion", icon: "/images/browser-icons/orion.png" }
+    orion: { text: "Orion", icon: basePath + "/images/browser-icons/orion.png" }
   };
 
   function platformVersionToShortName(platformVersion) {
@@ -232,7 +266,7 @@ function MainFc() {
 
   function generateLink(url) {
     var platformVersion = document.querySelector(
-      "#platform .dropdown__selected .dropdown__text"
+      "#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text"
     );
 
     if (platformVersion) {
@@ -246,7 +280,7 @@ function MainFc() {
     platformVersion = platformVersionToShortName(platformVersion);
 
     var browser = document.querySelector(
-      "#browser .dropdown__selected .dropdown__text"
+      "#wdd-browser .wdd-dropdown__selected .wdd-dropdown__text"
     );
 
     if (browser) {
@@ -256,7 +290,7 @@ function MainFc() {
     }
 
     var version = document.querySelector(
-      "#version .dropdown__selected .dropdown__text"
+      "#wdd-version .wdd-dropdown__selected .wdd-dropdown__text"
     );
 
     if (version) {
@@ -365,7 +399,7 @@ function MainFc() {
 
   function lastChanges(data) {
     var platform = document.querySelector(
-      "#platform .dropdown__selected .dropdown__text"
+      "#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text"
     );
     if (platform) {
       platform = platform.textContent;
@@ -374,7 +408,7 @@ function MainFc() {
     }
 
     var browser = document.querySelector(
-      "#browser .dropdown__selected .dropdown__text"
+      "#wdd-browser .wdd-dropdown__selected .wdd-dropdown__text"
     );
     if (browser) {
       browser = browser.textContent;
@@ -383,7 +417,7 @@ function MainFc() {
     }
 
     var version = document.querySelector(
-      "#version .dropdown__selected .dropdown__text"
+      "#wdd-version .wdd-dropdown__selected .wdd-dropdown__text"
     );
     if (version) {
       version = version.textContent;
@@ -430,7 +464,7 @@ function MainFc() {
     versionDropdown.update(data[2]);
     if (version) {
       document.querySelector(
-        "#version .dropdown__selected .dropdown__item .dropdown__text"
+        "#wdd-version .wdd-dropdown__selected .wdd-dropdown__item .wdd-dropdown__text"
       ).textContent = version;
     }
 
@@ -469,7 +503,7 @@ function MainFc() {
   }
 
   var versionDropdown, browserDropdown, platformDropdown;
-  getJSON("/data/browsers.json", function (data) {
+  getJSON(basePath + "/data/browsers.json", function (data) {
     g_AllBrowserVersions = updateBrowserList(data);
 
     versionDropdown = new Dropdown({
@@ -482,15 +516,17 @@ function MainFc() {
       callback: function (selected) {
         var data = init(
           document.querySelector(
-            "#platform .dropdown__selected .dropdown__text"
+            "#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text"
           )
             ? document.querySelector(
-                "#platform .dropdown__selected .dropdown__text"
+                "#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text"
               ).textContent
             : "",
-          document.querySelector("#browser .dropdown__selected .dropdown__text")
+          document.querySelector(
+            "#wdd-browser .wdd-dropdown__selected .wdd-dropdown__text"
+          )
             ? document.querySelector(
-                "#browser .dropdown__selected .dropdown__text"
+                "#wdd-browser .wdd-dropdown__selected .wdd-dropdown__text"
               ).textContent
             : "",
           selected
@@ -499,7 +535,9 @@ function MainFc() {
       }
     });
 
-    document.querySelector("#version").appendChild(versionDropdown.create());
+    document
+      .querySelector("#wdd-version")
+      .appendChild(versionDropdown.create());
 
     browserDropdown = new Dropdown({
       width: 200,
@@ -510,10 +548,10 @@ function MainFc() {
       callback: function (selected) {
         var data = init(
           document.querySelector(
-            "#platform .dropdown__selected .dropdown__text"
+            "#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text"
           )
             ? document.querySelector(
-                "#platform .dropdown__selected .dropdown__text"
+                "#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text"
               ).textContent
             : "",
           selected
@@ -522,7 +560,9 @@ function MainFc() {
       }
     });
 
-    document.querySelector("#browser").appendChild(browserDropdown.create());
+    document
+      .querySelector("#wdd-browser")
+      .appendChild(browserDropdown.create());
 
     platformDropdown = new Dropdown({
       width: 200,
@@ -536,7 +576,9 @@ function MainFc() {
       }
     });
 
-    document.querySelector("#platform").appendChild(platformDropdown.create());
+    document
+      .querySelector("#wdd-platform")
+      .appendChild(platformDropdown.create());
 
     localStorageGet(
       ["platformName", "browserName", "version", "browsers", "cacheTime"],
@@ -555,13 +597,13 @@ function MainFc() {
           init(items.platformName, items.browserName);
 
           var nodes = document.querySelectorAll(
-            "#version .dropdown__slider .dropdown__item"
+            "#wdd-version .wdd-dropdown__slider .wdd-dropdown__item"
           );
 
           for (var i = 0; i < nodes.length; i++) {
             if (nodes[i].textContent === items.version) {
               var el = document.querySelector(
-                "#version .dropdown__selected .dropdown__text"
+                "#wdd-version .wdd-dropdown__selected .wdd-dropdown__text"
               );
               if (el) {
                 el.textContent = nodes[i].textContent;
@@ -576,13 +618,15 @@ function MainFc() {
   });
 
   // make run work
-  document.querySelector("#run button").addEventListener("click", function () {
-    var url = document.querySelector("#run input").value;
-    openUrl(url);
-  });
+  document
+    .querySelector("#wdd-run button")
+    .addEventListener("click", function () {
+      var url = document.querySelector("#wdd-run input").value;
+      openUrl(url);
+    });
 
   // fill url field with current tab's url
-  document.querySelector("#run input").value = window.location.href;
+  document.querySelector("#wdd-run input").value = window.location.href;
 }
 
 function Dropdown(opts) {
@@ -594,24 +638,26 @@ function Dropdown(opts) {
   var slider;
 
   function appendItem(x) {
-    var item = createDiv({ class: "dropdown__item" });
+    var item = createDiv({ class: "wdd-dropdown__item" });
 
     item.addEventListener("click", function () {
       // update selection
       if (x.icon) {
         selected
-          .querySelector(".dropdown__icon img")
+          .querySelector(".wdd-dropdown__icon img")
           .setAttribute("src", x.icon);
       }
 
       if (typeof x === "object") {
-        selected.querySelector(".dropdown__text").textContent = x.text;
+        selected.querySelector(".wdd-dropdown__text").textContent = x.text;
       } else if (typeof x === "number" || typeof x === "string") {
-        selected.querySelector(".dropdown__text").textContent = x;
+        selected.querySelector(".wdd-dropdown__text").textContent = x;
       }
 
       if (opts.callback) {
-        opts.callback(selected.querySelector(".dropdown__text").textContent);
+        opts.callback(
+          selected.querySelector(".wdd-dropdown__text").textContent
+        );
       }
 
       selected.click();
@@ -621,9 +667,9 @@ function Dropdown(opts) {
     item.style.height = opts.height + "px";
 
     if (x.icon) {
-      var icon = createDiv({ class: "dropdown__icon" });
+      var icon = createDiv({ class: "wdd-dropdown__icon" });
       var img = document.createElement("img");
-      img.src = "." + x.icon;
+      img.src = x.icon;
 
       if (opts.iconWidth) img.width = opts.iconWidth;
       if (opts.iconHeight) img.height = opts.iconHeight;
@@ -632,7 +678,7 @@ function Dropdown(opts) {
       item.appendChild(icon);
     }
 
-    var text = createDiv({ class: "dropdown__text" });
+    var text = createDiv({ class: "wdd-dropdown__text" });
 
     if (typeof x === "object") {
       text.textContent = x.text;
@@ -677,7 +723,7 @@ function Dropdown(opts) {
   }
 
   self.update = function (data) {
-    var nodes = dropdown.querySelectorAll(".dropdown__item");
+    var nodes = dropdown.querySelectorAll(".wdd-dropdown__item");
     for (var i = 0; i < nodes.length; i++) {
       nodes[i].parentNode.removeChild(nodes[i]);
     }
@@ -687,11 +733,11 @@ function Dropdown(opts) {
   self.create = function () {
     var data = opts.data;
 
-    dropdown = createDiv({ class: "dropdown" });
+    dropdown = createDiv({ class: "wdd-dropdown" });
 
-    var arrow = createDiv({ class: "dropdown__arrow" });
+    var arrow = createDiv({ class: "wdd-dropdown__arrow" });
     var arrowImg = document.createElement("img");
-    arrowImg.src = "./images/dropdown-arrow-down.svg";
+    arrowImg.src = basePath + "/images/dropdown-arrow-down.svg";
     arrow.appendChild(arrowImg);
 
     arrow.style.top = opts.height / 2 - 15 + "px";
@@ -703,10 +749,10 @@ function Dropdown(opts) {
       dropdown.style.backgroundColor = opts.backgroundColor;
     }
 
-    selected = createDiv({ class: "dropdown__selected" });
+    selected = createDiv({ class: "wdd-dropdown__selected" });
     dropdown.appendChild(selected);
 
-    slider = createDiv({ class: "dropdown__slider" });
+    slider = createDiv({ class: "wdd-dropdown__slider" });
     dropdown.appendChild(slider);
 
     appendAllItems(data);
@@ -717,14 +763,14 @@ function Dropdown(opts) {
         if (opts.onClick) opts.onClick("hidden");
         slider.style.display = "none";
         dropdown
-          .querySelector(".dropdown__arrow img")
-          .setAttribute("src", "./images/dropdown-arrow-down.svg");
+          .querySelector(".wdd-dropdown__arrow img")
+          .setAttribute("src", basePath + "/images/dropdown-arrow-down.svg");
       } else {
         if (opts.onClick) opts.onClick("visible");
         slider.style.display = "block";
         dropdown
-          .querySelector(".dropdown__arrow img")
-          .setAttribute("src", "./images/dropdown-arrow-up.svg");
+          .querySelector(".wdd-dropdown__arrow img")
+          .setAttribute("src", basePath + "/images/dropdown-arrow-up.svg");
       }
     });
 

package/dist/js/browser-selection.min.js

@@ -1 +1 @@
-var script=document.currentScript||(function(){var o=document.getElementsByTagName("script");return o[o.length-1]})(),scriptSrc=script?script.src:null;document.readyState==="loading"?document.addEventListener("DOMContentLoaded",MainFc):MainFc();function MainFc(){if(window.__browserSelectionInitialized)return;window.__browserSelectionInitialized=!0;function o(r,e){var t=new XMLHttpRequest;t.open("GET",r,!0),t.onreadystatechange=function(){if(t.readyState===4)if(t.status===200)try{e(JSON.parse(t.responseText))}catch{e(null)}else e(null)},t.onerror=function(){e(null)},t.send()}var w=document.getElementById("browserling-dropdown-container"),u=createDiv({id:"wrapper",class:"wrapper",innerHTML:'<div class="group__input" id="run"><input id="input" type="text" class="input" placeholder="https://" /><button id="button" class="button">Test Now</button></div><div id="group__dropdown" class="group__dropdown"><div id="platform"></div><div id="browser"></div><div id="version"></div></div>'});w.appendChild(u);var p,f={},x,y;y=["edge","ie","chrome","firefox","opera","brave","vivaldi","tor","safari","browser","mypal","supermium","orion","ddg","brave"];var i=["macOS 26 Tahoe","macOS 15 Sequoia","macOS 14 Sonoma","macOS 13 Ventura","macOS 12 Monterey","Windows 11","Windows 10","Windows 8.1","Windows 8","Windows 7","Windows Vista","Windows XP","Android 15","Android 14","Android 13","Android 12.1","Android 12","Android 11","Android 10","Android 9 Pie","Android 8.1 Oreo","Android 8.0 Oreo","Android 7.1 Nougat","Android 7.0 Nougat","Android 6.0 Marshmallow","Android 5.1 Lollipop","Android 5.0 Lollipop","Android 4.4 KitKat","iOS 26","iOS 18","iOS 17","iOS 16","iOS 15"];p=[],i.forEach(function(r){var e=r.split(" ")[0],t=r.split(" ")[1].toLowerCase(),n=e==="Android"?"android":e.toLowerCase().slice(0,3),d=r==="Android 12.1"?"/images/os-icons/android-12.png":"/images/os-icons/"+e.toLowerCase()+"-"+t.replace(".","")+".png",c={name:n,version:t,text:r,icon:d};r==="Windows 10"&&(c.selected=!0),p.push(c)}),x={ie:{text:"Internet Explorer",icon:"/images/browser-icons/ie.png"},chrome:{text:"Chrome",icon:"/images/browser-icons/chrome.png"},firefox:{text:"Firefox",icon:"/images/browser-icons/firefox.png"},opera:{text:"Opera",icon:"/images/browser-icons/opera.png"},safari:{text:"Safari",icon:"/images/browser-icons/safari.png"},edge:{text:"Edge",icon:"/images/browser-icons/edge.png"},brave:{text:"Brave",icon:"/images/browser-icons/brave.png"},vivaldi:{text:"Vivaldi",icon:"/images/browser-icons/vivaldi.png"},tor:{text:"Tor Browser",icon:"/images/browser-icons/tor.png"},browser:{text:"Default Browser",icon:"/images/browser-icons/android.png"},mypal:{text:"Mypal",icon:"/images/browser-icons/mypal.png"},supermium:{text:"Supermium",icon:"/images/browser-icons/supermium.png"},ddg:{text:"DuckDuckGo",icon:"/images/browser-icons/ddg.png"},orion:{text:"Orion",icon:"/images/browser-icons/orion.png"}};function a(r){return r.split(" ")[1].toLowerCase()}function v(r){return r=="Internet Explorer"?r="ie":r=="Tor Browser"?r="tor":r=="DuckDuckGo"?r="ddg":r=r.toLowerCase(),r}function h(r){var e="win";return/android/i.test(r)?e="android":/mac/i.test(r)?e="mac":/ios/i.test(r)&&(e="ios"),e}function S(r){var e={};return Object.keys(r).forEach(function(t){var n=Object.keys(r[t]);n.forEach(function(d){e[t+d]={};var c=Object.keys(r[t][d]);c.forEach(function(m){var s=[];r[t][d][m].forEach(function(l){/^\d+/.test(l)?s.push(l):s.unshift(l)});var g=s[s.length-1];g={text:g,selected:!0},s[s.length-1]=g,e[t+d][m]=s})})}),e}function T(r){var e=document.querySelector("#platform .dropdown__selected .dropdown__text");e?e=e.textContent:e="";var t=h(e);e=a(e);var n=document.querySelector("#browser .dropdown__selected .dropdown__text");n?n=v(n.textContent):n="";var d=document.querySelector("#version .dropdown__selected .dropdown__text");d?d=d.textContent:d="";var c="https://www.browserling.com/browse/"+t+e+"/"+n+d+"/"+encodeURIComponent(r);return c}function B(r){var e=T(r);console.log("open",e),window.open(e)}function L(r){var e=a(r),t=h(r);r=t+e;for(var n=JSON.parse(JSON.stringify(p)),d=JSON.parse(JSON.stringify(f)),c=[],m=JSON.parse(JSON.stringify(x)),s=Object.keys(d[r]),g=[],l=0;y.length>l;l++)s.indexOf(y[l])!==-1&&g.push(y[l]);for(var l=0;l<g.length;l++)c.push(m[g[l]]);return[n.map(function(_){return _.name+_.version===r?_.selected=!0:delete _.selected,_}),c,r]}function j(r,e){var t=a(r),n=h(r);r=n+t;for(var d=JSON.parse(JSON.stringify(x)),c=Object.keys(d),m=Object.keys(f[r]),s=0;s<c.length;s++)m.indexOf(c[s])==-1&&delete d[c[s]];for(var g=Object.keys(d).map(function(D){var C=d[D];return C.selected=C.text===e?!0:(delete C.selected,void 0),C}),l,_=Object.keys(d),s=0;s<_.length;s++)if(d[_[s]].selected){l=_[s];break}return[g,l]}function W(r,e){var t=JSON.parse(JSON.stringify(f[r][e]));return t.reverse(),t}function O(r){var e=document.querySelector("#platform .dropdown__selected .dropdown__text");e?e=e.textContent:e="";var t=document.querySelector("#browser .dropdown__selected .dropdown__text");t?t=t.textContent:t="";var n=document.querySelector("#version .dropdown__selected .dropdown__text");n?n=n.textContent:n="";var d=r[0][2]+"/"+r[1][1]+n;E({platformName:e,browserName:t,version:n,url:d})}function N(r){r===void 0&&(r=!1),o("https://www.browserling.com/browsers.json",function(e){if(e){var t=S(e);f=t,r&&b("Windows 10","Chrome"),E({browsers:t,cacheTime:Date.now()})}})}function b(r,e,t){var n=L(r);e||(e=n[1][0].text);var d=j(r,e),c=W(n[2],d[1]),m=[n,d,c];return q.update(m[0][0]),A.update(m[1][0]),k.update(m[2]),t&&(document.querySelector("#version .dropdown__selected .dropdown__item .dropdown__text").textContent=t),m}function J(r,e){var t={};if(Array.isArray(r))r.forEach(function(d){var c=localStorage.getItem(d);if(c)try{c=JSON.parse(c)}catch{}t[d]=c});else{var n=localStorage.getItem(r);try{n=JSON.parse(n)}catch{}t[r]=n}e(t)}function E(r){Object.keys(r).forEach(function(e){localStorage.setItem(e,JSON.stringify(r[e]))})}var k,A,q;o("/data/browsers.json",function(r){f=S(r),k=new Dropdown({width:90,height:45,iconWidth:20,iconHeight:20,center:!0,data:[],callback:function(e){var t=b(document.querySelector("#platform .dropdown__selected .dropdown__text")?document.querySelector("#platform .dropdown__selected .dropdown__text").textContent:"",document.querySelector("#browser .dropdown__selected .dropdown__text")?document.querySelector("#browser .dropdown__selected .dropdown__text").textContent:"",e);O(t)}}),document.querySelector("#version").appendChild(k.create()),A=new Dropdown({width:200,height:45,iconWidth:23,iconHeight:23,data:[],callback:function(e){var t=b(document.querySelector("#platform .dropdown__selected .dropdown__text")?document.querySelector("#platform .dropdown__selected .dropdown__text").textContent:"",e);O(t)}}),document.querySelector("#browser").appendChild(A.create()),q=new Dropdown({width:200,height:45,iconWidth:23,iconHeight:23,data:[],callback:function(e){var t=b(e);O(t)}}),document.querySelector("#platform").appendChild(q.create()),J(["platformName","browserName","version","browsers","cacheTime"],function(e){if(e.browsers&&e.cacheTime?Date.now()-e.cacheTime>3*3600*1e3?N():f=e.browsers:N(!0),e.platformName&&e.browserName&&e.version){b(e.platformName,e.browserName);for(var t=document.querySelectorAll("#version .dropdown__slider .dropdown__item"),n=0;n<t.length;n++)if(t[n].textContent===e.version){var d=document.querySelector("#version .dropdown__selected .dropdown__text");d&&(d.textContent=t[n].textContent)}}else b("Windows 10","Chrome")})}),document.querySelector("#run button").addEventListener("click",function(){var r=document.querySelector("#run input").value;B(r)}),document.querySelector("#run input").value=window.location.href}function Dropdown(o){if(!(this instanceof Dropdown))return new Dropdown(o);var w=this,u,p,f;function x(i){var a=createDiv({class:"dropdown__item"});if(a.addEventListener("click",function(){i.icon&&p.querySelector(".dropdown__icon img").setAttribute("src",i.icon),typeof i=="object"?p.querySelector(".dropdown__text").textContent=i.text:(typeof i=="number"||typeof i=="string")&&(p.querySelector(".dropdown__text").textContent=i),o.callback&&o.callback(p.querySelector(".dropdown__text").textContent),p.click()}),a.style.width=o.width+"px",a.style.height=o.height+"px",i.icon){var v=createDiv({class:"dropdown__icon"}),h=document.createElement("img");h.src="."+i.icon,o.iconWidth&&(h.width=o.iconWidth),o.iconHeight&&(h.height=o.iconHeight),v.appendChild(h),a.appendChild(v)}var S=createDiv({class:"dropdown__text"});typeof i=="object"?S.textContent=i.text:(typeof i=="number"||typeof i=="string")&&(S.textContent=i),(i.center||o.center)&&(S.style.left=o.width/2-20+"px"),a.appendChild(S),f.appendChild(a),i.selected&&p.appendChild(a.cloneNode(!0))}function y(i){i=Object.keys(i).map(function(a){return i[a]}),i.length&&(i.some(function(a){return a.selected})||(typeof i[0]=="object"?i[0].selected=!0:i[0]={text:i[0],selected:!0}),i.forEach(function(a){x(a)}))}w.update=function(i){for(var a=u.querySelectorAll(".dropdown__item"),v=0;v<a.length;v++)a[v].parentNode.removeChild(a[v]);y(i)},w.create=function(){var i=o.data;u=createDiv({class:"dropdown"});var a=createDiv({class:"dropdown__arrow"}),v=document.createElement("img");return v.src="./images/dropdown-arrow-down.svg",a.appendChild(v),a.style.top=o.height/2-15+"px",a.style.right="14px",u.appendChild(a),o.backgroundColor&&(u.style.backgroundColor=o.backgroundColor),p=createDiv({class:"dropdown__selected"}),u.appendChild(p),f=createDiv({class:"dropdown__slider"}),u.appendChild(f),y(i),p.addEventListener("click",function(){f.style.display==="block"?(o.onClick&&o.onClick("hidden"),f.style.display="none",u.querySelector(".dropdown__arrow img").setAttribute("src","./images/dropdown-arrow-down.svg")):(o.onClick&&o.onClick("visible"),f.style.display="block",u.querySelector(".dropdown__arrow img").setAttribute("src","./images/dropdown-arrow-up.svg"))}),a.addEventListener("click",function(){p.click()}),u}}function createDiv(o){o=o||{};var w=document.createElement("div");if("id"in o&&(w.id=o.id),"class"in o&&(w.className=o.class),"innerHTML"in o&&(w.innerHTML=o.innerHTML),"text"in o&&(w.textContent=o.text),"click"in o&&w.addEventListener("click",o.click),"attributes"in o)for(var u in o.attributes)w.setAttribute(u,o.attributes[u]);return w}
+var script=document.currentScript||(function(){var o=document.getElementsByTagName("script");return o[o.length-1]})(),scriptSrc=script?script.src:null;const basePath=scriptSrc?scriptSrc.replace(/\/js\/browser-selection(\.min)?\.js$/,""):"";document.readyState==="loading"?document.addEventListener("DOMContentLoaded",MainFc):MainFc();function MainFc(){if(window.__browserSelectionInitialized)return;window.__browserSelectionInitialized=!0;function o(r,e){var t=new XMLHttpRequest;t.open("GET",r,!0),t.onreadystatechange=function(){if(t.readyState===4)if(t.status===200)try{e(JSON.parse(t.responseText))}catch{e(null)}else e(null)},t.onerror=function(){e(null)},t.send()}var f=document.getElementById("browserling-dropdown-container"),w=createDiv({id:"wdd-wrapper",class:"wdd-wrapper",innerHTML:'<div class="wdd-group__input" id="wdd-run"><input id="wdd-input" type="text" class="wdd-input" placeholder="https://" /><button id="wdd-button" class="wdd-button">Test Now</button></div><div id="wdd-group__dropdown" class="wdd-group__dropdown"><div id="wdd-platform"></div><div id="wdd-browser"></div><div id="wdd-version"></div></div>'});f.appendChild(w);var u,p={},x,y;y=["edge","ie","chrome","firefox","opera","brave","vivaldi","tor","safari","browser","mypal","supermium","orion","ddg","brave"];var d=["macOS 26 Tahoe","macOS 15 Sequoia","macOS 14 Sonoma","macOS 13 Ventura","macOS 12 Monterey","Windows 11","Windows 10","Windows 8.1","Windows 8","Windows 7","Windows Vista","Windows XP","Android 15","Android 14","Android 13","Android 12.1","Android 12","Android 11","Android 10","Android 9 Pie","Android 8.1 Oreo","Android 8.0 Oreo","Android 7.1 Nougat","Android 7.0 Nougat","Android 6.0 Marshmallow","Android 5.1 Lollipop","Android 5.0 Lollipop","Android 4.4 KitKat","iOS 26","iOS 18","iOS 17","iOS 16","iOS 15"];u=[],d.forEach(function(r){var e=r.split(" ")[0],t=r.split(" ")[1].toLowerCase(),n=e==="Android"?"android":e.toLowerCase().slice(0,3),i=r==="Android 12.1"?basePath+"/images/os-icons/android-12.png":basePath+"/images/os-icons/"+e.toLowerCase()+"-"+t.replace(".","")+".png",c={name:n,version:t,text:r,icon:i};r==="Windows 10"&&(c.selected=!0),u.push(c)}),x={ie:{text:"Internet Explorer",icon:basePath+"/images/browser-icons/ie.png"},chrome:{text:"Chrome",icon:basePath+"/images/browser-icons/chrome.png"},firefox:{text:"Firefox",icon:basePath+"/images/browser-icons/firefox.png"},opera:{text:"Opera",icon:basePath+"/images/browser-icons/opera.png"},safari:{text:"Safari",icon:basePath+"/images/browser-icons/safari.png"},edge:{text:"Edge",icon:basePath+"/images/browser-icons/edge.png"},brave:{text:"Brave",icon:basePath+"/images/browser-icons/brave.png"},vivaldi:{text:"Vivaldi",icon:basePath+"/images/browser-icons/vivaldi.png"},tor:{text:"Tor Browser",icon:basePath+"/images/browser-icons/tor.png"},browser:{text:"Default Browser",icon:basePath+"/images/browser-icons/android.png"},mypal:{text:"Mypal",icon:basePath+"/images/browser-icons/mypal.png"},supermium:{text:"Supermium",icon:basePath+"/images/browser-icons/supermium.png"},ddg:{text:"DuckDuckGo",icon:basePath+"/images/browser-icons/ddg.png"},orion:{text:"Orion",icon:basePath+"/images/browser-icons/orion.png"}};function a(r){return r.split(" ")[1].toLowerCase()}function v(r){return r=="Internet Explorer"?r="ie":r=="Tor Browser"?r="tor":r=="DuckDuckGo"?r="ddg":r=r.toLowerCase(),r}function h(r){var e="win";return/android/i.test(r)?e="android":/mac/i.test(r)?e="mac":/ios/i.test(r)&&(e="ios"),e}function b(r){var e={};return Object.keys(r).forEach(function(t){var n=Object.keys(r[t]);n.forEach(function(i){e[t+i]={};var c=Object.keys(r[t][i]);c.forEach(function(m){var s=[];r[t][i][m].forEach(function(l){/^\d+/.test(l)?s.push(l):s.unshift(l)});var g=s[s.length-1];g={text:g,selected:!0},s[s.length-1]=g,e[t+i][m]=s})})}),e}function T(r){var e=document.querySelector("#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text");e?e=e.textContent:e="";var t=h(e);e=a(e);var n=document.querySelector("#wdd-browser .wdd-dropdown__selected .wdd-dropdown__text");n?n=v(n.textContent):n="";var i=document.querySelector("#wdd-version .wdd-dropdown__selected .wdd-dropdown__text");i?i=i.textContent:i="";var c="https://www.browserling.com/browse/"+t+e+"/"+n+i+"/"+encodeURIComponent(r);return c}function B(r){var e=T(r);console.log("open",e),window.open(e)}function j(r){var e=a(r),t=h(r);r=t+e;for(var n=JSON.parse(JSON.stringify(u)),i=JSON.parse(JSON.stringify(p)),c=[],m=JSON.parse(JSON.stringify(x)),s=Object.keys(i[r]),g=[],l=0;y.length>l;l++)s.indexOf(y[l])!==-1&&g.push(y[l]);for(var l=0;l<g.length;l++)c.push(m[g[l]]);return[n.map(function(_){return _.name+_.version===r?_.selected=!0:delete _.selected,_}),c,r]}function L(r,e){var t=a(r),n=h(r);r=n+t;for(var i=JSON.parse(JSON.stringify(x)),c=Object.keys(i),m=Object.keys(p[r]),s=0;s<c.length;s++)m.indexOf(c[s])==-1&&delete i[c[s]];for(var g=Object.keys(i).map(function(D){var C=i[D];return C.selected=C.text===e?!0:(delete C.selected,void 0),C}),l,_=Object.keys(i),s=0;s<_.length;s++)if(i[_[s]].selected){l=_[s];break}return[g,l]}function W(r,e){var t=JSON.parse(JSON.stringify(p[r][e]));return t.reverse(),t}function O(r){var e=document.querySelector("#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text");e?e=e.textContent:e="";var t=document.querySelector("#wdd-browser .wdd-dropdown__selected .wdd-dropdown__text");t?t=t.textContent:t="";var n=document.querySelector("#wdd-version .wdd-dropdown__selected .wdd-dropdown__text");n?n=n.textContent:n="";var i=r[0][2]+"/"+r[1][1]+n;E({platformName:e,browserName:t,version:n,url:i})}function N(r){r===void 0&&(r=!1),o("https://www.browserling.com/browsers.json",function(e){if(e){var t=b(e);p=t,r&&S("Windows 10","Chrome"),E({browsers:t,cacheTime:Date.now()})}})}function S(r,e,t){var n=j(r);e||(e=n[1][0].text);var i=L(r,e),c=W(n[2],i[1]),m=[n,i,c];return q.update(m[0][0]),A.update(m[1][0]),k.update(m[2]),t&&(document.querySelector("#wdd-version .wdd-dropdown__selected .wdd-dropdown__item .wdd-dropdown__text").textContent=t),m}function J(r,e){var t={};if(Array.isArray(r))r.forEach(function(i){var c=localStorage.getItem(i);if(c)try{c=JSON.parse(c)}catch{}t[i]=c});else{var n=localStorage.getItem(r);try{n=JSON.parse(n)}catch{}t[r]=n}e(t)}function E(r){Object.keys(r).forEach(function(e){localStorage.setItem(e,JSON.stringify(r[e]))})}var k,A,q;o(basePath+"/data/browsers.json",function(r){p=b(r),k=new Dropdown({width:90,height:45,iconWidth:20,iconHeight:20,center:!0,data:[],callback:function(e){var t=S(document.querySelector("#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text")?document.querySelector("#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text").textContent:"",document.querySelector("#wdd-browser .wdd-dropdown__selected .wdd-dropdown__text")?document.querySelector("#wdd-browser .wdd-dropdown__selected .wdd-dropdown__text").textContent:"",e);O(t)}}),document.querySelector("#wdd-version").appendChild(k.create()),A=new Dropdown({width:200,height:45,iconWidth:23,iconHeight:23,data:[],callback:function(e){var t=S(document.querySelector("#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text")?document.querySelector("#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text").textContent:"",e);O(t)}}),document.querySelector("#wdd-browser").appendChild(A.create()),q=new Dropdown({width:200,height:45,iconWidth:23,iconHeight:23,data:[],callback:function(e){var t=S(e);O(t)}}),document.querySelector("#wdd-platform").appendChild(q.create()),J(["platformName","browserName","version","browsers","cacheTime"],function(e){if(e.browsers&&e.cacheTime?Date.now()-e.cacheTime>3*3600*1e3?N():p=e.browsers:N(!0),e.platformName&&e.browserName&&e.version){S(e.platformName,e.browserName);for(var t=document.querySelectorAll("#wdd-version .wdd-dropdown__slider .wdd-dropdown__item"),n=0;n<t.length;n++)if(t[n].textContent===e.version){var i=document.querySelector("#wdd-version .wdd-dropdown__selected .wdd-dropdown__text");i&&(i.textContent=t[n].textContent)}}else S("Windows 10","Chrome")})}),document.querySelector("#wdd-run button").addEventListener("click",function(){var r=document.querySelector("#wdd-run input").value;B(r)}),document.querySelector("#wdd-run input").value=window.location.href}function Dropdown(o){if(!(this instanceof Dropdown))return new Dropdown(o);var f=this,w,u,p;function x(d){var a=createDiv({class:"wdd-dropdown__item"});if(a.addEventListener("click",function(){d.icon&&u.querySelector(".wdd-dropdown__icon img").setAttribute("src",d.icon),typeof d=="object"?u.querySelector(".wdd-dropdown__text").textContent=d.text:(typeof d=="number"||typeof d=="string")&&(u.querySelector(".wdd-dropdown__text").textContent=d),o.callback&&o.callback(u.querySelector(".wdd-dropdown__text").textContent),u.click()}),a.style.width=o.width+"px",a.style.height=o.height+"px",d.icon){var v=createDiv({class:"wdd-dropdown__icon"}),h=document.createElement("img");h.src=d.icon,o.iconWidth&&(h.width=o.iconWidth),o.iconHeight&&(h.height=o.iconHeight),v.appendChild(h),a.appendChild(v)}var b=createDiv({class:"wdd-dropdown__text"});typeof d=="object"?b.textContent=d.text:(typeof d=="number"||typeof d=="string")&&(b.textContent=d),(d.center||o.center)&&(b.style.left=o.width/2-20+"px"),a.appendChild(b),p.appendChild(a),d.selected&&u.appendChild(a.cloneNode(!0))}function y(d){d=Object.keys(d).map(function(a){return d[a]}),d.length&&(d.some(function(a){return a.selected})||(typeof d[0]=="object"?d[0].selected=!0:d[0]={text:d[0],selected:!0}),d.forEach(function(a){x(a)}))}f.update=function(d){for(var a=w.querySelectorAll(".wdd-dropdown__item"),v=0;v<a.length;v++)a[v].parentNode.removeChild(a[v]);y(d)},f.create=function(){var d=o.data;w=createDiv({class:"wdd-dropdown"});var a=createDiv({class:"wdd-dropdown__arrow"}),v=document.createElement("img");return v.src=basePath+"/images/dropdown-arrow-down.svg",a.appendChild(v),a.style.top=o.height/2-15+"px",a.style.right="14px",w.appendChild(a),o.backgroundColor&&(w.style.backgroundColor=o.backgroundColor),u=createDiv({class:"wdd-dropdown__selected"}),w.appendChild(u),p=createDiv({class:"wdd-dropdown__slider"}),w.appendChild(p),y(d),u.addEventListener("click",function(){p.style.display==="block"?(o.onClick&&o.onClick("hidden"),p.style.display="none",w.querySelector(".wdd-dropdown__arrow img").setAttribute("src",basePath+"/images/dropdown-arrow-down.svg")):(o.onClick&&o.onClick("visible"),p.style.display="block",w.querySelector(".wdd-dropdown__arrow img").setAttribute("src",basePath+"/images/dropdown-arrow-up.svg"))}),a.addEventListener("click",function(){u.click()}),w}}function createDiv(o){o=o||{};var f=document.createElement("div");if("id"in o&&(f.id=o.id),"class"in o&&(f.className=o.class),"innerHTML"in o&&(f.innerHTML=o.innerHTML),"text"in o&&(f.textContent=o.text),"click"in o&&f.addEventListener("click",o.click),"attributes"in o)for(var w in o.attributes)f.setAttribute(w,o.attributes[w]);return f}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-selection",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "Browser and OS selection widget",
   "main": "dist/js/browser-selection.js",
   "unpkg": "dist/js/browser-selection.min.js",