Skip to content

Commit e1ad029

Browse files
OvenoboyoOvenoboyo
committed
Handle null dom elements gracefully
Signed-off-by: Ovenoboyo <ovenoboyo@gmail.com>
1 parent 84bd8d0 commit e1ad029

4 files changed

Lines changed: 108 additions & 78 deletions

File tree

‎assets/js/commonUtils.js‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,35 @@
1-
export function isExpired(time) {
1+
export function isExpired (time) {
22
return Date.now() > time;
33
}
44

5-
export function getExpiryTime() {
5+
export function getExpiryTime () {
66
const date = new Date(Date.now());
77
date.setHours(date.getHours() + 2);
88
return date.valueOf();
99
}
1010

11-
export function shouldRegenRequest(cache) {
11+
export function shouldRegenRequest (cache) {
1212
if (cache) {
1313
return isExpired(cache.expiry);
1414
}
1515
return true;
1616
}
1717

18-
export function setCache(name, data) {
18+
export function setCache (name, data) {
1919
localStorage.setItem(name, JSON.stringify(data));
2020
}
21+
22+
export const setElemProperty = (id, prop, value) => {
23+
const elem = document.getElementById(id)
24+
if (elem) {
25+
elem[prop] = value
26+
}
27+
}
28+
29+
export const callElemMethod = (id, prop, ...obj) => {
30+
const elem = document.getElementById(id)
31+
if (elem) {
32+
elem[prop](...obj)
33+
}
34+
}
35+

‎assets/js/counterUtils.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { shouldRegenRequest, getExpiryTime, setCache } from './commonUtils.js'
2+
import { setElemProperty } from './commonUtils.js'
23

34
// TODO: fetch this from all-contributors spec
45
const noCodeContributorsCount = 3
@@ -54,17 +55,14 @@ async function getDiscordCount () {
5455

5556
export function setupCounters () {
5657
(async () => {
57-
const downloadsCounter = document.getElementById('downloads__count')
58-
downloadsCounter.innerHTML = Math.floor((await getGithubDownloadCount()) / 10) * 10 + '+'
58+
setElemProperty('downloads__count', 'innerHTML', Math.floor((await getGithubDownloadCount()) / 10) * 10 + '+')
5959
})();
6060

6161
(async () => {
62-
const activeContributorsCount = document.getElementById('contri__count')
63-
activeContributorsCount.innerHTML = ((await getGithubContributorsCount()) + noCodeContributorsCount) + "+"
62+
setElemProperty('contri__count', 'innerHTML', ((await getGithubContributorsCount()) + noCodeContributorsCount) + "+")
6463
})();
6564

6665
(async () => {
67-
const discordCount = document.getElementById('discord__count')
68-
discordCount.innerHTML = (await getDiscordCount()) + "+"
66+
setElemProperty('discord__count', 'innerHTML', (await getDiscordCount()) + "+")
6967
})();
7068
}

‎assets/js/domUtils.js‎

Lines changed: 79 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import {
33
getProviderFromURL,
44
getProviderRedirectURL,
55
getQueryParams,
6-
} from "./locationUtils.js";
6+
} from './locationUtils.js';
77

8+
import { setElemProperty, callElemMethod } from './commonUtils.js';
89
export function setupPageFunctionality () {
910

1011
enableScrolling()
@@ -21,46 +22,53 @@ export function setupPageFunctionality () {
2122

2223
document.onmouseup = enableScrolling
2324

24-
const music = document.getElementById("music");
25-
music.volume = 0.2;
26-
const playButtonContainer = document.getElementsByClassName("playbutton__container")[0];
27-
const playButton = document.getElementById("playButton");
28-
const playButtonIcon = document.getElementById("playButtonIcon");
25+
const music = document.getElementById('music');
26+
if (music) {
27+
music.volume = 0.2;
28+
}
29+
30+
const playButtonContainer = document.getElementsByClassName('playbutton__container')[0];
31+
const playButton = document.getElementById('playButton');
32+
const playButtonIcon = document.getElementById('playButtonIcon');
2933
let isPlaying = false;
3034

3135
const playPause = () => {
32-
if (!isPlaying) {
33-
isPlaying = true;
34-
music.src = 'https://res.cloudinary.com/thepranaygupta/video/upload/v1643119296/moosync/bg-music_x3sspk.mp3'
35-
music.play();
36-
playButton.title = "Pause";
37-
playButtonIcon.src = "./assets/img/pausebutton.svg";
38-
} else {
39-
isPlaying = false;
40-
41-
music.pause();
42-
playButton.title = "Play";
43-
playButtonIcon.src = "./assets/img/playbutton.svg";
36+
if (playButton && playButtonIcon) {
37+
if (!isPlaying) {
38+
isPlaying = true;
39+
music.src = 'https://res.cloudinary.com/thepranaygupta/video/upload/v1643119296/moosync/bg-music_x3sspk.mp3'
40+
music.play();
41+
playButton.title = 'Pause';
42+
playButtonIcon.src = './assets/img/pausebutton.svg';
43+
} else {
44+
isPlaying = false;
45+
46+
music.pause();
47+
playButton.title = 'Play';
48+
playButtonIcon.src = './assets/img/playbutton.svg';
49+
}
4450
}
4551
};
4652

47-
playButtonContainer.onclick = playPause;
53+
if (playButtonContainer) {
54+
playButtonContainer.onclick = playPause;
55+
}
4856

49-
document.getElementById("download__btn").onclick = () => {
50-
document.getElementById("downloads").scrollIntoView({
51-
behavior: "smooth",
52-
block: "center",
53-
inline: "center",
57+
setElemProperty('download__btn', 'onclick', () => {
58+
callElemMethod('downloads', 'scrollIntoView', {
59+
behavior: 'smooth',
60+
block: 'center',
61+
inline: 'center',
5462
});
55-
};
63+
});
5664

57-
document.getElementById('hamburger-close').onclick = overlayHandler.bind(this)
58-
document.getElementById('hamburger-open').onclick = overlayHandler.bind(this)
65+
setElemProperty('hamburger-close', 'onclick', overlayHandler.bind(this))
66+
setElemProperty('hamburger-open', 'onclick', overlayHandler.bind(this))
5967

60-
document.getElementById('home').onclick = overlayHandler.bind(this)
61-
document.getElementById('privacy').onclick = overlayHandler.bind(this)
62-
document.getElementById('documentation').onclick = overlayHandler.bind(this)
63-
document.getElementById('download').onclick = overlayHandler.bind(this)
68+
setElemProperty('home', 'onclick', overlayHandler.bind(this))
69+
setElemProperty('privacy', 'onclick', overlayHandler.bind(this))
70+
setElemProperty('documentation', 'onclick', overlayHandler.bind(this))
71+
setElemProperty('download', 'onclick', overlayHandler.bind(this))
6472

6573
}
6674

@@ -75,25 +83,25 @@ export function setupLoginModalFunctionality () {
7583
loginModal.classList.add('modal')
7684
loginModal.id = 'login-modal'
7785
loginModal.innerHTML = `
78-
<div class="modal-content">
79-
<span id="login-modal-close" class="close">&times;</span>
80-
<div id="login-modal-postlogin">
81-
<div class="modal-content-text" id="login-modal-content">
86+
<div class='modal-content'>
87+
<span id='login-modal-close' class='close'>&times;</span>
88+
<div id='login-modal-postlogin'>
89+
<div class='modal-content-text' id='login-modal-content'>
8290
Thank you for logging in to
83-
<span id="login-modal-platform-text-post" style="color:${color};">${providerMatch}</span>.<br />
91+
<span id='login-modal-platform-text-post' style='color:${color};'>${providerMatch}</span>.<br />
8492
You may now close this window<br />
8593
and enjoy your experience.
8694
<br />
8795
<br />
8896
Alternatively, You may enter this code
89-
<div id="oauth-code" class="oauth-code">${getQueryParams()}</div>
97+
<div id='oauth-code' class='oauth-code'>${getQueryParams()}</div>
9098
</div>
9199
</div>
92-
<div id="login-modal-prelogin">
93-
<p class="modal-content-text" id="login-modal-content">
100+
<div id='login-modal-prelogin'>
101+
<p class='modal-content-text' id='login-modal-content'>
94102
Do you want to login to
95-
<span id="login-modal-platform-text-pre" style="color:${color};">${providerMatch}</span>?
96-
<button title="Login" id="login-button" class="link__buttons login__button">
103+
<span id='login-modal-platform-text-pre' style='color:${color};'>${providerMatch}</span>?
104+
<button title='Login' id='login-button' class='link__buttons login__button'>
97105
Click to open Moosync
98106
</button>
99107
</p>
@@ -109,14 +117,23 @@ export function setupLoginModalFunctionality () {
109117
const closeButton = document.getElementById('login-modal-close')
110118

111119

112-
// Try to open popup
113-
openPopupAndHandleModal(loginModalPostLogin, loginModalPreLogin, providerMatch, false)
120+
if (loginModalPostLogin, loginModalPreLogin, providerMatch) {
121+
// Try to open popup
122+
openPopupAndHandleModal(loginModalPostLogin, loginModalPreLogin, providerMatch, false)
123+
}
124+
125+
if (loginButton) {
126+
loginButton.style.backgroundColor = color
127+
loginButton.onclick = () => openPopupAndHandleModal(loginModalPostLogin, loginModalPreLogin, providerMatch, true)
128+
}
114129

115-
loginButton.style.backgroundColor = color
116-
loginButton.onclick = () => openPopupAndHandleModal(loginModalPostLogin, loginModalPreLogin, providerMatch, true)
117-
closeButton.onclick = () => loginModal.style.display = 'none'
130+
if (closeButton) {
131+
closeButton.onclick = () => loginModal.style.display = 'none'
132+
}
118133

119-
loginModal.style.display = "block"
134+
if (loginModal) {
135+
loginModal.style.display = 'block'
136+
}
120137
}
121138
}
122139

@@ -131,7 +148,7 @@ function openPopupAndHandleModal (loginModalPostLogin, loginModalPreLogin, provi
131148
}
132149

133150
function openMoosync (provider, showWarning) {
134-
const res = window.open("moosync://" + getProviderRedirectURL(provider) + getQueryParams())
151+
const res = window.open('moosync://' + getProviderRedirectURL(provider) + getQueryParams())
135152
if (res) {
136153
window.history.replaceState(null, null, '/')
137154
} else {
@@ -144,18 +161,20 @@ function openMoosync (provider, showWarning) {
144161
}
145162

146163
function overlayHandler () {
147-
const overlayElement = document.getElementById("menu-overlay");
148-
149-
if (toggleStatus) {
150-
overlayElement.classList.remove(
151-
"moosync__navbar-mobileScreen-overlayClose"
152-
);
153-
overlayElement.classList.add("moosync__navbar-mobileScreen-overlayOpen");
154-
toggleStatus = false;
155-
} else {
156-
overlayElement.classList.remove("moosync__navbar-mobileScreen-overlayOpen");
157-
overlayElement.classList.add("moosync__navbar-mobileScreen-overlayClose");
158-
toggleStatus = true;
164+
const overlayElement = document.getElementById('menu-overlay');
165+
166+
if (overlayElement) {
167+
if (toggleStatus) {
168+
overlayElement.classList.remove(
169+
'moosync__navbar-mobileScreen-overlayClose'
170+
);
171+
overlayElement.classList.add('moosync__navbar-mobileScreen-overlayOpen');
172+
toggleStatus = false;
173+
} else {
174+
overlayElement.classList.remove('moosync__navbar-mobileScreen-overlayOpen');
175+
overlayElement.classList.add('moosync__navbar-mobileScreen-overlayClose');
176+
toggleStatus = true;
177+
}
159178
}
160179
}
161180

‎assets/js/downloadUtils.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { shouldRegenRequest, getExpiryTime, setCache } from "./commonUtils.js";
1+
import { shouldRegenRequest, getExpiryTime, setCache, callElemMethod, setElemProperty } from "./commonUtils.js";
22

33
const OSEnum = Object.freeze({
44
WINDOWS: "win",
@@ -127,7 +127,7 @@ export async function setupDownloadButton () {
127127
button.id = `${release.version} ${release.ext}`
128128

129129
clone.getElementById("download-icon").classList.add(getIconClass(os));
130-
downloadParent.appendChild(document.importNode(clone, true));
130+
callElemMethod('downloads', 'appendChild', document.importNode(clone, true))
131131

132132
document.getElementById(`${release.version} ${release.ext}`).onclick = () => window.open(release.url)
133133
}
@@ -141,8 +141,7 @@ export async function setupDownloadButton () {
141141
.replace('${version}', releases[0].version)
142142
.replace('${os}', osReadable)
143143

144-
downloadParent.appendChild(document.importNode(clone, true));
145-
144+
callElemMethod('downloads', 'appendChild', document.importNode(clone, true))
146145
const optionsContainer = document.getElementById('options-container')
147146

148147
for (const release of releases) {
@@ -163,11 +162,10 @@ export async function setupDownloadButton () {
163162
}
164163

165164
} else {
166-
downloadParent.innerHTML =
167-
"Sorry Moosync is not available for your platform yet";
165+
setElemProperty('downloads', 'innerHTML', "Sorry Moosync is not available for your platform yet")
168166
}
169167

170-
document.getElementById('other-download').onclick = () => {
168+
setElemProperty('other-download', 'onclick', () => {
171169
window.open('https://github.com/Moosync/Moosync/releases/latest')
172-
}
170+
})
173171
}

0 commit comments

Comments
 (0)