browser-selection 1.0.0 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +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}}
|
|
1
|
+
.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}}
|
|
@@ -6,6 +6,9 @@ var script =
|
|
|
6
6
|
})();
|
|
7
7
|
|
|
8
8
|
var scriptSrc = script ? script.src : null;
|
|
9
|
+
const basePath = scriptSrc
|
|
10
|
+
? scriptSrc.replace(/\/js\/browser-selection(\.min)?\.js$/, "")
|
|
11
|
+
: "";
|
|
9
12
|
|
|
10
13
|
if (document.readyState === "loading") {
|
|
11
14
|
document.addEventListener("DOMContentLoaded", MainFc);
|
|
@@ -45,17 +48,17 @@ function MainFc() {
|
|
|
45
48
|
var containerElem = document.getElementById("browserling-dropdown-container");
|
|
46
49
|
|
|
47
50
|
var wddWrapper = createDiv({
|
|
48
|
-
id: "wrapper",
|
|
49
|
-
class: "wrapper",
|
|
51
|
+
id: "wdd-wrapper",
|
|
52
|
+
class: "wdd-wrapper",
|
|
50
53
|
innerHTML:
|
|
51
|
-
'<div class="group__input" id="run">' +
|
|
52
|
-
'<input id="input" type="text" class="input" placeholder="https://" />' +
|
|
53
|
-
'<button id="button" class="button">Test Now</button>' +
|
|
54
|
+
'<div class="wdd-group__input" id="wdd-run">' +
|
|
55
|
+
'<input id="wdd-input" type="text" class="wdd-input" placeholder="https://" />' +
|
|
56
|
+
'<button id="wdd-button" class="wdd-button">Test Now</button>' +
|
|
54
57
|
"</div>" +
|
|
55
|
-
'<div id="group__dropdown" class="group__dropdown">' +
|
|
56
|
-
'<div id="platform"></div>' +
|
|
57
|
-
'<div id="browser"></div>' +
|
|
58
|
-
'<div id="version"></div>' +
|
|
58
|
+
'<div id="wdd-group__dropdown" class="wdd-group__dropdown">' +
|
|
59
|
+
'<div id="wdd-platform"></div>' +
|
|
60
|
+
'<div id="wdd-browser"></div>' +
|
|
61
|
+
'<div id="wdd-version"></div>' +
|
|
59
62
|
"</div>"
|
|
60
63
|
});
|
|
61
64
|
|
|
@@ -128,8 +131,9 @@ function MainFc() {
|
|
|
128
131
|
osText === "Android" ? "android" : osText.toLowerCase().slice(0, 3);
|
|
129
132
|
var iconUrl =
|
|
130
133
|
os === "Android 12.1"
|
|
131
|
-
? "/images/os-icons/android-12.png"
|
|
132
|
-
:
|
|
134
|
+
? basePath + "/images/os-icons/android-12.png"
|
|
135
|
+
: basePath +
|
|
136
|
+
"/images/os-icons/" +
|
|
133
137
|
osText.toLowerCase() +
|
|
134
138
|
"-" +
|
|
135
139
|
osVersion.replace(".", "") +
|
|
@@ -147,26 +151,56 @@ function MainFc() {
|
|
|
147
151
|
});
|
|
148
152
|
|
|
149
153
|
g_AllBrowserTypes = {
|
|
150
|
-
ie: {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
154
|
+
ie: {
|
|
155
|
+
text: "Internet Explorer",
|
|
156
|
+
icon: basePath + "/images/browser-icons/ie.png"
|
|
157
|
+
},
|
|
158
|
+
chrome: {
|
|
159
|
+
text: "Chrome",
|
|
160
|
+
icon: basePath + "/images/browser-icons/chrome.png"
|
|
161
|
+
},
|
|
162
|
+
firefox: {
|
|
163
|
+
text: "Firefox",
|
|
164
|
+
icon: basePath + "/images/browser-icons/firefox.png"
|
|
165
|
+
},
|
|
166
|
+
opera: {
|
|
167
|
+
text: "Opera",
|
|
168
|
+
icon: basePath + "/images/browser-icons/opera.png"
|
|
169
|
+
},
|
|
170
|
+
safari: {
|
|
171
|
+
text: "Safari",
|
|
172
|
+
icon: basePath + "/images/browser-icons/safari.png"
|
|
173
|
+
},
|
|
174
|
+
edge: { text: "Edge", icon: basePath + "/images/browser-icons/edge.png" },
|
|
175
|
+
brave: {
|
|
176
|
+
text: "Brave",
|
|
177
|
+
icon: basePath + "/images/browser-icons/brave.png"
|
|
178
|
+
},
|
|
179
|
+
vivaldi: {
|
|
180
|
+
text: "Vivaldi",
|
|
181
|
+
icon: basePath + "/images/browser-icons/vivaldi.png"
|
|
182
|
+
},
|
|
183
|
+
tor: {
|
|
184
|
+
text: "Tor Browser",
|
|
185
|
+
icon: basePath + "/images/browser-icons/tor.png"
|
|
186
|
+
},
|
|
159
187
|
browser: {
|
|
160
188
|
text: "Default Browser",
|
|
161
|
-
icon: "/images/browser-icons/android.png"
|
|
189
|
+
icon: basePath + "/images/browser-icons/android.png"
|
|
190
|
+
},
|
|
191
|
+
mypal: {
|
|
192
|
+
text: "Mypal",
|
|
193
|
+
icon: basePath + "/images/browser-icons/mypal.png"
|
|
162
194
|
},
|
|
163
|
-
mypal: { text: "Mypal", icon: "/images/browser-icons/mypal.png" },
|
|
164
195
|
supermium: {
|
|
165
196
|
text: "Supermium",
|
|
166
|
-
icon: "/images/browser-icons/supermium.png"
|
|
197
|
+
icon: basePath + "/images/browser-icons/supermium.png"
|
|
198
|
+
},
|
|
199
|
+
ddg: {
|
|
200
|
+
text: "DuckDuckGo",
|
|
201
|
+
icon: basePath + "/images/browser-icons/ddg.png"
|
|
167
202
|
},
|
|
168
|
-
|
|
169
|
-
orion: { text: "Orion", icon: "/images/browser-icons/orion.png" }
|
|
203
|
+
orion: { text: "Orion", icon: basePath + "/images/browser-icons/orion.png" }
|
|
170
204
|
};
|
|
171
205
|
|
|
172
206
|
function platformVersionToShortName(platformVersion) {
|
|
@@ -232,7 +266,7 @@ function MainFc() {
|
|
|
232
266
|
|
|
233
267
|
function generateLink(url) {
|
|
234
268
|
var platformVersion = document.querySelector(
|
|
235
|
-
"#platform .dropdown__selected .dropdown__text"
|
|
269
|
+
"#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text"
|
|
236
270
|
);
|
|
237
271
|
|
|
238
272
|
if (platformVersion) {
|
|
@@ -246,7 +280,7 @@ function MainFc() {
|
|
|
246
280
|
platformVersion = platformVersionToShortName(platformVersion);
|
|
247
281
|
|
|
248
282
|
var browser = document.querySelector(
|
|
249
|
-
"#browser .dropdown__selected .dropdown__text"
|
|
283
|
+
"#wdd-browser .wdd-dropdown__selected .wdd-dropdown__text"
|
|
250
284
|
);
|
|
251
285
|
|
|
252
286
|
if (browser) {
|
|
@@ -256,7 +290,7 @@ function MainFc() {
|
|
|
256
290
|
}
|
|
257
291
|
|
|
258
292
|
var version = document.querySelector(
|
|
259
|
-
"#version .dropdown__selected .dropdown__text"
|
|
293
|
+
"#wdd-version .wdd-dropdown__selected .wdd-dropdown__text"
|
|
260
294
|
);
|
|
261
295
|
|
|
262
296
|
if (version) {
|
|
@@ -365,7 +399,7 @@ function MainFc() {
|
|
|
365
399
|
|
|
366
400
|
function lastChanges(data) {
|
|
367
401
|
var platform = document.querySelector(
|
|
368
|
-
"#platform .dropdown__selected .dropdown__text"
|
|
402
|
+
"#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text"
|
|
369
403
|
);
|
|
370
404
|
if (platform) {
|
|
371
405
|
platform = platform.textContent;
|
|
@@ -374,7 +408,7 @@ function MainFc() {
|
|
|
374
408
|
}
|
|
375
409
|
|
|
376
410
|
var browser = document.querySelector(
|
|
377
|
-
"#browser .dropdown__selected .dropdown__text"
|
|
411
|
+
"#wdd-browser .wdd-dropdown__selected .wdd-dropdown__text"
|
|
378
412
|
);
|
|
379
413
|
if (browser) {
|
|
380
414
|
browser = browser.textContent;
|
|
@@ -383,7 +417,7 @@ function MainFc() {
|
|
|
383
417
|
}
|
|
384
418
|
|
|
385
419
|
var version = document.querySelector(
|
|
386
|
-
"#version .dropdown__selected .dropdown__text"
|
|
420
|
+
"#wdd-version .wdd-dropdown__selected .wdd-dropdown__text"
|
|
387
421
|
);
|
|
388
422
|
if (version) {
|
|
389
423
|
version = version.textContent;
|
|
@@ -430,7 +464,7 @@ function MainFc() {
|
|
|
430
464
|
versionDropdown.update(data[2]);
|
|
431
465
|
if (version) {
|
|
432
466
|
document.querySelector(
|
|
433
|
-
"#version .dropdown__selected .dropdown__item .dropdown__text"
|
|
467
|
+
"#wdd-version .wdd-dropdown__selected .wdd-dropdown__item .wdd-dropdown__text"
|
|
434
468
|
).textContent = version;
|
|
435
469
|
}
|
|
436
470
|
|
|
@@ -469,7 +503,7 @@ function MainFc() {
|
|
|
469
503
|
}
|
|
470
504
|
|
|
471
505
|
var versionDropdown, browserDropdown, platformDropdown;
|
|
472
|
-
getJSON("/data/browsers.json", function (data) {
|
|
506
|
+
getJSON(basePath + "/data/browsers.json", function (data) {
|
|
473
507
|
g_AllBrowserVersions = updateBrowserList(data);
|
|
474
508
|
|
|
475
509
|
versionDropdown = new Dropdown({
|
|
@@ -482,15 +516,17 @@ function MainFc() {
|
|
|
482
516
|
callback: function (selected) {
|
|
483
517
|
var data = init(
|
|
484
518
|
document.querySelector(
|
|
485
|
-
"#platform .dropdown__selected .dropdown__text"
|
|
519
|
+
"#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text"
|
|
486
520
|
)
|
|
487
521
|
? document.querySelector(
|
|
488
|
-
"#platform .dropdown__selected .dropdown__text"
|
|
522
|
+
"#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text"
|
|
489
523
|
).textContent
|
|
490
524
|
: "",
|
|
491
|
-
document.querySelector(
|
|
525
|
+
document.querySelector(
|
|
526
|
+
"#wdd-browser .wdd-dropdown__selected .wdd-dropdown__text"
|
|
527
|
+
)
|
|
492
528
|
? document.querySelector(
|
|
493
|
-
"#browser .dropdown__selected .dropdown__text"
|
|
529
|
+
"#wdd-browser .wdd-dropdown__selected .wdd-dropdown__text"
|
|
494
530
|
).textContent
|
|
495
531
|
: "",
|
|
496
532
|
selected
|
|
@@ -499,7 +535,9 @@ function MainFc() {
|
|
|
499
535
|
}
|
|
500
536
|
});
|
|
501
537
|
|
|
502
|
-
document
|
|
538
|
+
document
|
|
539
|
+
.querySelector("#wdd-version")
|
|
540
|
+
.appendChild(versionDropdown.create());
|
|
503
541
|
|
|
504
542
|
browserDropdown = new Dropdown({
|
|
505
543
|
width: 200,
|
|
@@ -510,10 +548,10 @@ function MainFc() {
|
|
|
510
548
|
callback: function (selected) {
|
|
511
549
|
var data = init(
|
|
512
550
|
document.querySelector(
|
|
513
|
-
"#platform .dropdown__selected .dropdown__text"
|
|
551
|
+
"#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text"
|
|
514
552
|
)
|
|
515
553
|
? document.querySelector(
|
|
516
|
-
"#platform .dropdown__selected .dropdown__text"
|
|
554
|
+
"#wdd-platform .wdd-dropdown__selected .wdd-dropdown__text"
|
|
517
555
|
).textContent
|
|
518
556
|
: "",
|
|
519
557
|
selected
|
|
@@ -522,7 +560,9 @@ function MainFc() {
|
|
|
522
560
|
}
|
|
523
561
|
});
|
|
524
562
|
|
|
525
|
-
document
|
|
563
|
+
document
|
|
564
|
+
.querySelector("#wdd-browser")
|
|
565
|
+
.appendChild(browserDropdown.create());
|
|
526
566
|
|
|
527
567
|
platformDropdown = new Dropdown({
|
|
528
568
|
width: 200,
|
|
@@ -536,7 +576,9 @@ function MainFc() {
|
|
|
536
576
|
}
|
|
537
577
|
});
|
|
538
578
|
|
|
539
|
-
document
|
|
579
|
+
document
|
|
580
|
+
.querySelector("#wdd-platform")
|
|
581
|
+
.appendChild(platformDropdown.create());
|
|
540
582
|
|
|
541
583
|
localStorageGet(
|
|
542
584
|
["platformName", "browserName", "version", "browsers", "cacheTime"],
|
|
@@ -555,13 +597,13 @@ function MainFc() {
|
|
|
555
597
|
init(items.platformName, items.browserName);
|
|
556
598
|
|
|
557
599
|
var nodes = document.querySelectorAll(
|
|
558
|
-
"#version .dropdown__slider .dropdown__item"
|
|
600
|
+
"#wdd-version .wdd-dropdown__slider .wdd-dropdown__item"
|
|
559
601
|
);
|
|
560
602
|
|
|
561
603
|
for (var i = 0; i < nodes.length; i++) {
|
|
562
604
|
if (nodes[i].textContent === items.version) {
|
|
563
605
|
var el = document.querySelector(
|
|
564
|
-
"#version .dropdown__selected .dropdown__text"
|
|
606
|
+
"#wdd-version .wdd-dropdown__selected .wdd-dropdown__text"
|
|
565
607
|
);
|
|
566
608
|
if (el) {
|
|
567
609
|
el.textContent = nodes[i].textContent;
|
|
@@ -576,13 +618,15 @@ function MainFc() {
|
|
|
576
618
|
});
|
|
577
619
|
|
|
578
620
|
// make run work
|
|
579
|
-
document
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
621
|
+
document
|
|
622
|
+
.querySelector("#wdd-run button")
|
|
623
|
+
.addEventListener("click", function () {
|
|
624
|
+
var url = document.querySelector("#wdd-run input").value;
|
|
625
|
+
openUrl(url);
|
|
626
|
+
});
|
|
583
627
|
|
|
584
628
|
// fill url field with current tab's url
|
|
585
|
-
document.querySelector("#run input").value = window.location.href;
|
|
629
|
+
document.querySelector("#wdd-run input").value = window.location.href;
|
|
586
630
|
}
|
|
587
631
|
|
|
588
632
|
function Dropdown(opts) {
|
|
@@ -594,24 +638,26 @@ function Dropdown(opts) {
|
|
|
594
638
|
var slider;
|
|
595
639
|
|
|
596
640
|
function appendItem(x) {
|
|
597
|
-
var item = createDiv({ class: "dropdown__item" });
|
|
641
|
+
var item = createDiv({ class: "wdd-dropdown__item" });
|
|
598
642
|
|
|
599
643
|
item.addEventListener("click", function () {
|
|
600
644
|
// update selection
|
|
601
645
|
if (x.icon) {
|
|
602
646
|
selected
|
|
603
|
-
.querySelector(".dropdown__icon img")
|
|
647
|
+
.querySelector(".wdd-dropdown__icon img")
|
|
604
648
|
.setAttribute("src", x.icon);
|
|
605
649
|
}
|
|
606
650
|
|
|
607
651
|
if (typeof x === "object") {
|
|
608
|
-
selected.querySelector(".dropdown__text").textContent = x.text;
|
|
652
|
+
selected.querySelector(".wdd-dropdown__text").textContent = x.text;
|
|
609
653
|
} else if (typeof x === "number" || typeof x === "string") {
|
|
610
|
-
selected.querySelector(".dropdown__text").textContent = x;
|
|
654
|
+
selected.querySelector(".wdd-dropdown__text").textContent = x;
|
|
611
655
|
}
|
|
612
656
|
|
|
613
657
|
if (opts.callback) {
|
|
614
|
-
opts.callback(
|
|
658
|
+
opts.callback(
|
|
659
|
+
selected.querySelector(".wdd-dropdown__text").textContent
|
|
660
|
+
);
|
|
615
661
|
}
|
|
616
662
|
|
|
617
663
|
selected.click();
|
|
@@ -621,9 +667,9 @@ function Dropdown(opts) {
|
|
|
621
667
|
item.style.height = opts.height + "px";
|
|
622
668
|
|
|
623
669
|
if (x.icon) {
|
|
624
|
-
var icon = createDiv({ class: "dropdown__icon" });
|
|
670
|
+
var icon = createDiv({ class: "wdd-dropdown__icon" });
|
|
625
671
|
var img = document.createElement("img");
|
|
626
|
-
img.src =
|
|
672
|
+
img.src = x.icon;
|
|
627
673
|
|
|
628
674
|
if (opts.iconWidth) img.width = opts.iconWidth;
|
|
629
675
|
if (opts.iconHeight) img.height = opts.iconHeight;
|
|
@@ -632,7 +678,7 @@ function Dropdown(opts) {
|
|
|
632
678
|
item.appendChild(icon);
|
|
633
679
|
}
|
|
634
680
|
|
|
635
|
-
var text = createDiv({ class: "dropdown__text" });
|
|
681
|
+
var text = createDiv({ class: "wdd-dropdown__text" });
|
|
636
682
|
|
|
637
683
|
if (typeof x === "object") {
|
|
638
684
|
text.textContent = x.text;
|
|
@@ -677,7 +723,7 @@ function Dropdown(opts) {
|
|
|
677
723
|
}
|
|
678
724
|
|
|
679
725
|
self.update = function (data) {
|
|
680
|
-
var nodes = dropdown.querySelectorAll(".dropdown__item");
|
|
726
|
+
var nodes = dropdown.querySelectorAll(".wdd-dropdown__item");
|
|
681
727
|
for (var i = 0; i < nodes.length; i++) {
|
|
682
728
|
nodes[i].parentNode.removeChild(nodes[i]);
|
|
683
729
|
}
|
|
@@ -687,11 +733,11 @@ function Dropdown(opts) {
|
|
|
687
733
|
self.create = function () {
|
|
688
734
|
var data = opts.data;
|
|
689
735
|
|
|
690
|
-
dropdown = createDiv({ class: "dropdown" });
|
|
736
|
+
dropdown = createDiv({ class: "wdd-dropdown" });
|
|
691
737
|
|
|
692
|
-
var arrow = createDiv({ class: "dropdown__arrow" });
|
|
738
|
+
var arrow = createDiv({ class: "wdd-dropdown__arrow" });
|
|
693
739
|
var arrowImg = document.createElement("img");
|
|
694
|
-
arrowImg.src = "
|
|
740
|
+
arrowImg.src = basePath + "/images/dropdown-arrow-down.svg";
|
|
695
741
|
arrow.appendChild(arrowImg);
|
|
696
742
|
|
|
697
743
|
arrow.style.top = opts.height / 2 - 15 + "px";
|
|
@@ -703,10 +749,10 @@ function Dropdown(opts) {
|
|
|
703
749
|
dropdown.style.backgroundColor = opts.backgroundColor;
|
|
704
750
|
}
|
|
705
751
|
|
|
706
|
-
selected = createDiv({ class: "dropdown__selected" });
|
|
752
|
+
selected = createDiv({ class: "wdd-dropdown__selected" });
|
|
707
753
|
dropdown.appendChild(selected);
|
|
708
754
|
|
|
709
|
-
slider = createDiv({ class: "dropdown__slider" });
|
|
755
|
+
slider = createDiv({ class: "wdd-dropdown__slider" });
|
|
710
756
|
dropdown.appendChild(slider);
|
|
711
757
|
|
|
712
758
|
appendAllItems(data);
|
|
@@ -717,14 +763,14 @@ function Dropdown(opts) {
|
|
|
717
763
|
if (opts.onClick) opts.onClick("hidden");
|
|
718
764
|
slider.style.display = "none";
|
|
719
765
|
dropdown
|
|
720
|
-
.querySelector(".dropdown__arrow img")
|
|
721
|
-
.setAttribute("src", "
|
|
766
|
+
.querySelector(".wdd-dropdown__arrow img")
|
|
767
|
+
.setAttribute("src", basePath + "/images/dropdown-arrow-down.svg");
|
|
722
768
|
} else {
|
|
723
769
|
if (opts.onClick) opts.onClick("visible");
|
|
724
770
|
slider.style.display = "block";
|
|
725
771
|
dropdown
|
|
726
|
-
.querySelector(".dropdown__arrow img")
|
|
727
|
-
.setAttribute("src", "
|
|
772
|
+
.querySelector(".wdd-dropdown__arrow img")
|
|
773
|
+
.setAttribute("src", basePath + "/images/dropdown-arrow-up.svg");
|
|
728
774
|
}
|
|
729
775
|
});
|
|
730
776
|
|
|
@@ -1 +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}
|
|
1
|
+
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}
|