Skip to content

Commit 4729ac8

Browse files
DavidWeidDavidWeid
authored
[WEB-3071] Remove jQuery - Part 2 (#21088)
* Remove jQuery from global-modals.js * remove jQ from integrations.js Remove header.js file (unused) * remove unused scripts: moveToAnchor, userDeviceIsMobile, and isOnScreen remove jQ injects from footer * remove unused files * remove jquery dependency
1 parent 2b57080 commit 4729ac8

File tree

14 files changed

+169
-404
lines changed

14 files changed

+169
-404
lines changed

‎.eslintignore

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
# Ignore all js directories, delete each as eslint errors are fixed
22
src/scripts/datadog-docs.js
3-
src/scripts/helpers/moveToAnchor.js
43
src/scripts/components/global-modals.js
5-
src/scripts/components/header.js
64
src/scripts/components/platforms.js
75
src/scripts/components/sidenav.js
86
src/scripts/jqmath-vanilla.js

‎assets/scripts/components/global-modals.js

Lines changed: 84 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { DOMReady } from '../helpers/documentReady';
2+
import { isMobile } from '../utils/isMobile';
23

34
const doOnLoad = () => {
45
const signupModal = document.getElementById('signupModal');
6+
57
signupModal.addEventListener('show.bs.modal', () => {
68
var regURL = 'https://app.datadoghq.com/signup_corp';
79
var mobileURL = 'https://app.datadoghq.com/signup_corp?mobile=true';
@@ -20,125 +22,116 @@ const doOnLoad = () => {
2022
lang_param = '';
2123
}
2224

23-
// Detect Mobile Devices
24-
var isMobile = {
25-
Android: function () {
26-
return navigator.userAgent.match(/Android/i);
27-
},
28-
BlackBerry: function () {
29-
return navigator.userAgent.match(/BlackBerry/i);
30-
},
31-
iOS: function () {
32-
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
33-
},
34-
Opera: function () {
35-
return navigator.userAgent.match(/Opera Mini/i);
36-
},
37-
Windows: function () {
38-
return navigator.userAgent.match(/IEMobile/i);
39-
},
40-
any: function () {
41-
return (
42-
isMobile.Android() ||
43-
isMobile.BlackBerry() ||
44-
isMobile.iOS() ||
45-
isMobile.Opera() ||
46-
isMobile.Windows()
47-
);
48-
}
49-
};
50-
5125
// Trigger conditional URL
52-
if (isMobile.any()) {
26+
if (isMobile()) {
5327
document.querySelector('#signUpIframe').setAttribute('src', mobileURL);
5428
} else {
5529
document.querySelector('#signUpIframe').setAttribute('src', regURL + lang_param);
5630
}
5731
});
5832

59-
signupModal.addEventListener('hide.bs.modal', function () {
33+
signupModal.addEventListener('hide.bs.modal', () => {
6034
document.querySelector('#signUpIframe').setAttribute('src', '');
6135
});
6236

6337
const imageModal = document.getElementById('popupImageModal');
64-
var naturalWidth = 0;
65-
var naturalHeight = 0;
66-
67-
imageModal.addEventListener('show.bs.modal', function () {
68-
$('#popupImageModal').on('show.bs.modal', function () {
69-
$('#popupImageModal .modal-content').css({ background: 'transparent', border: 'none' });
70-
$('#popupImageModal .modal-body, #popupImageModal .modal-dialog, #popupImageModal .modal-content').css(
71-
'height',
72-
'100%'
73-
);
74-
$('#popupImageModal .modal-body').html(
75-
'<div class="loader" style="position:absolute;top:50%;margin:-50px 0 0 -50px;height:100px;width:100px;"></div>'
76-
);
38+
let modalContent, modalBody, modalDialog;
39+
40+
if (imageModal) {
41+
modalContent = imageModal.querySelector('.modal-content');
42+
modalBody = imageModal.querySelector('.modal-body');
43+
modalDialog = imageModal.querySelector('.modal-dialog');
44+
45+
imageModal.addEventListener('show.bs.modal', (e) => {
46+
const loaderElement = document.createElement('div');
47+
const imageElement = document.createElement('img');
48+
const url = `${e.relatedTarget.href}&w=${window.innerWidth}&h=${window.innerHeight}`;
49+
const srcsetUrl = `${url}, ${url}&dpr=2 2x`;
50+
51+
loaderElement.setAttribute('class', 'loader');
52+
loaderElement.style.position = 'absolute';
53+
loaderElement.style.top = '50%';
54+
loaderElement.style.margin = '-50px 0 0 -50px';
55+
loaderElement.style.height = '100px';
56+
loaderElement.style.width = '100px';
57+
58+
imageElement.setAttribute('src', url);
59+
imageElement.setAttribute('srcset', srcsetUrl);
60+
imageElement.setAttribute('class', 'img-fluid');
61+
imageElement.style.display = 'none';
62+
imageElement.addEventListener('load', (e) => {
63+
resize(imageElement.naturalWidth, imageElement.naturalHeight);
64+
loaderElement.style.display = 'none';
65+
imageElement.style.display = 'block';
66+
});
67+
68+
document.querySelector('body').classList.remove('modal-open');
69+
70+
if (modalContent) {
71+
modalContent.style.background = 'transparent';
72+
modalContent.style.border = 'none';
73+
modalContent.style.height = '100%';
74+
}
75+
76+
if (modalBody) {
77+
modalBody.style.height = '100%';
78+
modalBody.appendChild(loaderElement);
79+
modalBody.appendChild(imageElement);
80+
}
81+
82+
if (modalDialog) {
83+
modalDialog.style.height = '100%';
84+
}
85+
});
86+
87+
imageModal.addEventListener('hide.bs.modal', () => {
88+
modalBody.replaceChildren();
7789
});
78-
});
7990

80-
imageModal.addEventListener('shown.bs.modal', function (e) {
81-
document.querySelector('body').classList.remove('modal-open');
82-
var modal = imageModal;
83-
var url = e.relatedTarget.href;
84-
85-
// try set modal popup imgix to cap out at browser width/height
86-
url += '&w=' + $(window).width() + '&h=' + $(window).height();
87-
var img = new Image();
88-
var srcseturl = url + ', ' + url + '&dpr=2 2x';
89-
var imgEl = $('<img src="' + url + '" srcset="' + srcseturl + '" alt="" class="img-fluid" />');
90-
img.onload = function () {
91-
/* Store naturalWidth & height for IE8 */
92-
naturalWidth = img.width;
93-
naturalHeight = img.height;
94-
$('#popupImageModal .modal-content').css({ background: '', border: '' });
95-
$('#popupImageModal .modal-body').html(imgEl);
96-
resize(naturalWidth, naturalHeight);
97-
if ($('#popupImageModal').is(':visible')) {
98-
modal.fadeIn();
91+
window.addEventListener('resize', () => {
92+
imageModalVisible = !!(
93+
imageModal.offsetWidth ||
94+
imageModal.offsetHeight ||
95+
imageModal.getClientRects().length
96+
);
97+
if (imageModalVisible) {
98+
const imageElement = imageModal.querySelector('img');
99+
resize(imageElement.naturalWidth, imageElement.naturalHeight);
99100
}
100-
};
101-
img.src = url;
102-
});
103-
imageModal.addEventListener('hide.bs.modal', function (e) {
104-
$('#popupImageModal .modal-body').empty();
105-
});
101+
});
102+
}
106103

107104
function resize(w, h) {
108-
var el = $('#popupImageModal .modal-body img');
109-
var p = $('#popupImageModal .modal-dialog');
110-
var parentW = (parseInt($(window).width()) / 100) * 90;
111-
var parentH = (parseInt($(window).height()) / 100) * 90;
105+
var el = document.querySelector('#popupImageModal .modal-body img');
106+
var p = document.querySelector('#popupImageModal .modal-dialog');
107+
var parentW = (parseInt(window.innerWidth) / 100) * 90;
108+
var parentH = (parseInt(window.innerHeight) / 100) * 90;
109+
112110
if (w && h) {
113111
/* Reset apparent image size first so container grows */
114-
el.css('width', '').css('height', '');
115-
p.css('width', '').css('height', '');
112+
el.style.width = '';
113+
el.style.height = '';
114+
p.style.width = '';
115+
p.style.height = '';
116+
116117
/* Calculate the worst ratio so that dimensions fit */
117118
/* Note: -1 to avoid rounding errors */
118119
var ratio = Math.max(w / (parentW - 1), h / (parentH - 1));
119120
/* Resize content */
120121
if (ratio > 1) {
121122
ratio = h / Math.floor(h / ratio); /* Round ratio down so height calc works */
122-
el.css('width', '' + w / ratio + 'px').css('height', '' + h / ratio + 'px');
123-
p.css('width', '' + w / ratio + 'px').css('height', '' + h / ratio + 'px');
123+
el.style.width = `${w / ratio}px`;
124+
el.style.height = `${h / ratio}px`;
125+
p.style.width = `${w / ratio}px`;
126+
p.style.height = `${h / ratio}px`;
124127
} else {
125-
el.css('width', '' + w + 'px').css('height', '' + h + 'px');
126-
p.css('width', '' + w + 'px').css('height', '' + h + 'px');
128+
el.style.width = `${w}px`;
129+
el.style.height = `${h}px`;
130+
p.style.width = `${w}px`;
131+
p.style.height = `${h}px`;
127132
}
128133
}
129134
}
130-
131-
window.addEventListener('resize', () => {
132-
if ($('#popupImageModal').is(':visible')) {
133-
resize(naturalWidth, naturalHeight);
134-
}
135-
});
136-
137-
window.addEventListener('scroll', () => {
138-
if ($('#popupImageModal').is(':visible')) {
139-
$('#popupImageModal').modal('hide');
140-
}
141-
});
142135
};
143136

144137
DOMReady(doOnLoad);

‎assets/scripts/components/header.js

Lines changed: 0 additions & 132 deletions
This file was deleted.

0 commit comments

Comments
 (0)