https://www.penny.ro/scripts/unsupported-browser.js

1/* eslint-disable no-var */
2(function () {
3  var request = new XMLHttpRequest();
4  var showDialog = true;
5
6  request.onreadystatechange = function () {
7    if (this.readyState === 4 && this.status === 200) {
8      var response = JSON.parse(this.responseText);
9      if (showDialog) {
10        showDialog = false;
11        displayAlert(response);
12      }
13    }
14  };
15  request.open('GET', '/api/content/configs');
16  request.setRequestHeader('x-request-id', 'unsupported-browser-cid');
17  request.send();
18
19  function displayAlert(response) {
20    var container = document.createElement('div');
21    var overlay = document.createElement('div');
22    var dialog = document.createElement('div');
23    var wrapper = document.createElement('div');
24    var button = document.createElement('button');
25    var icon = document.createElement('span');
26    var paragraph = document.createElement('div');
27
28    dialog.setAttribute('role', 'alert');
29    button.setAttribute('type', 'button');
30    button.setAttribute('name', 'button');
31    button.setAttribute('autofocus');
32
33    container.className = 'ws-unsupported-browser';
34    overlay.className = 'ws-unsupported-browser__overlay';
35    dialog.className = 'ws-unsupported-browser__dialog ws-card';
36    icon.className = 'ws-icon notranslate text-base-color3';
37
38    var style = document.createElement('style');
39    style.innerHTML =
40      '.ws-unsupported-browser__dialog {' +
41      'display: flex;' +
42      'position: fixed;' +
43      'max-width: 500px;' +
44      'padding: 24px;' +
45      'z-index: 7;' +
46      'top: 50%;' +
47      'left: 50%;' +
48      'transform: translate(-50%, -50%);' +
49      '}' +
50      '.ws-unsupported-browser__overlay {' +
51      'background-color: rgba(0, 0, 0, 0.5);' +
52      'width: 100%;' +
53      'height: 100%;' +
54      'overflow: hidden;' +
55      'position: fixed;' +
56      'top: 0;' +
57      'bottom: 0;' +
58      'left: 0;' +
59      'z-index: 6' +
60      '}';
61
62    icon.innerHTML = 'clear';
63    paragraph.innerHTML = response.client.unsupportedbrowsertext;
64
65    button.appendChild(icon);
66    wrapper.appendChild(button);
67    dialog.appendChild(paragraph);
68    container.appendChild(overlay);
69    container.appendChild(dialog);
70    dialog.appendChild(wrapper);
71    container.appendChild(style);
72    document.body.appendChild(container);
73
74    overlay.onclick = function () {
75      document.body.removeChild(container);
76    };
77    button.onclick = function () {
78      document.body.removeChild(container);
79    };
80  }
81})();