browser-selection 1.0.0

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

@@ -0,0 +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}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "browser-selection",
+  "version": "1.0.0",
+  "description": "Browser and OS selection widget",
+  "main": "dist/js/browser-selection.js",
+  "unpkg": "dist/js/browser-selection.min.js",
+  "files": [
+    "dist/js",
+    "dist/fonts",
+    "dist/images",
+    "dist/data",
+    "dist/browser-selection-styles.css"
+  ],
+  "scripts": {
+    "build": "sass scss/styles.scss dist/browser-selection-styles.css --style=compressed --no-source-map && esbuild dist/js/browser-selection.js --minify --outfile=dist/js/browser-selection.min.js",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "devDependencies": {
+    "esbuild": "^0.28.0",
+    "sass": "^1.99.0"
+  }
+}