Skip to content

Commit 2913deb

Browse files
chrisdavidmillschrisdavidmills
authored
Merge pull request #15 from ninofiliu/master
Make the code more modern and readable
2 parents 5241b7c + ca7c959 commit 2913deb

File tree

5 files changed

+347
-355
lines changed

5 files changed

+347
-355
lines changed

‎a2hs/index.js

+17-17
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
const images = ['fox1','fox2','fox3','fox4'];
1+
const images = ['fox1', 'fox2', 'fox3', 'fox4'];
22
const imgElem = document.querySelector('img');
33

44
function randomValueFromArray(array) {
5-
let randomNo = Math.floor(Math.random() * array.length);
5+
const randomNo = Math.floor(Math.random() * array.length);
66
return array[randomNo];
77
}
88

9-
setInterval(function() {
10-
let randomChoice = randomValueFromArray(images);
11-
imgElem.src = 'images/' + randomChoice + '.jpg';
12-
}, 2000)
9+
setInterval(() => {
10+
const randomChoice = randomValueFromArray(images);
11+
imgElem.src = `images/${randomChoice}.jpg`;
12+
}, 2000);
1313

1414
// Register service worker to control making site work offline
1515

16-
if('serviceWorker' in navigator) {
16+
if ('serviceWorker' in navigator) {
1717
navigator.serviceWorker
18-
.register('/pwa-examples/a2hs/sw.js')
19-
.then(function() { console.log('Service Worker Registered'); });
18+
.register('/pwa-examples/a2hs/sw.js')
19+
.then(() => { console.log('Service Worker Registered'); });
2020
}
2121

2222
// Code to handle install prompt on desktop
@@ -33,19 +33,19 @@ window.addEventListener('beforeinstallprompt', (e) => {
3333
// Update UI to notify the user they can add to home screen
3434
addBtn.style.display = 'block';
3535

36-
addBtn.addEventListener('click', (e) => {
36+
addBtn.addEventListener('click', () => {
3737
// hide our user interface that shows our A2HS button
3838
addBtn.style.display = 'none';
3939
// Show the prompt
4040
deferredPrompt.prompt();
4141
// Wait for the user to respond to the prompt
4242
deferredPrompt.userChoice.then((choiceResult) => {
43-
if (choiceResult.outcome === 'accepted') {
44-
console.log('User accepted the A2HS prompt');
45-
} else {
46-
console.log('User dismissed the A2HS prompt');
47-
}
48-
deferredPrompt = null;
49-
});
43+
if (choiceResult.outcome === 'accepted') {
44+
console.log('User accepted the A2HS prompt');
45+
} else {
46+
console.log('User dismissed the A2HS prompt');
47+
}
48+
deferredPrompt = null;
49+
});
5050
});
5151
});

‎a2hs/sw.js

+15-19
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,21 @@
1-
self.addEventListener('install', function(e) {
2-
e.waitUntil(
3-
caches.open('fox-store').then(function(cache) {
4-
return cache.addAll([
5-
'/pwa-examples/a2hs/',
6-
'/pwa-examples/a2hs/index.html',
7-
'/pwa-examples/a2hs/index.js',
8-
'/pwa-examples/a2hs/style.css',
9-
'/pwa-examples/a2hs/images/fox1.jpg',
10-
'/pwa-examples/a2hs/images/fox2.jpg',
11-
'/pwa-examples/a2hs/images/fox3.jpg',
12-
'/pwa-examples/a2hs/images/fox4.jpg'
13-
]);
14-
})
15-
);
1+
self.addEventListener('install', (e) => {
2+
e.waitUntil(
3+
caches.open('fox-store').then((cache) => cache.addAll([
4+
'/pwa-examples/a2hs/',
5+
'/pwa-examples/a2hs/index.html',
6+
'/pwa-examples/a2hs/index.js',
7+
'/pwa-examples/a2hs/style.css',
8+
'/pwa-examples/a2hs/images/fox1.jpg',
9+
'/pwa-examples/a2hs/images/fox2.jpg',
10+
'/pwa-examples/a2hs/images/fox3.jpg',
11+
'/pwa-examples/a2hs/images/fox4.jpg',
12+
])),
13+
);
1614
});
1715

18-
self.addEventListener('fetch', function(e) {
16+
self.addEventListener('fetch', (e) => {
1917
console.log(e.request.url);
2018
e.respondWith(
21-
caches.match(e.request).then(function(response) {
22-
return response || fetch(e.request);
23-
})
19+
caches.match(e.request).then((response) => response || fetch(e.request)),
2420
);
2521
});

‎js13kpwa/app.js

+66-67
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,80 @@
11
// Generating content based on the template
2-
var template = "<article>\n\
3-
<img src='data/img/placeholder.png' data-src='data/img/SLUG.jpg' alt='NAME'>\n\
4-
<h3>#POS. NAME</h3>\n\
5-
<ul>\n\
6-
<li><span>Author:</span> <strong>AUTHOR</strong></li>\n\
7-
<li><span>Twitter:</span> <a href='https://twitter.com/TWITTER'>@TWITTER</a></li>\n\
8-
<li><span>Website:</span> <a href='http://WEBSITE/'>WEBSITE</a></li>\n\
9-
<li><span>GitHub:</span> <a href='https://GITHUB'>GITHUB</a></li>\n\
10-
<li><span>More:</span> <a href='http://js13kgames.com/entries/SLUG'>js13kgames.com/entries/SLUG</a></li>\n\
11-
</ul>\n\
12-
</article>";
13-
var content = '';
14-
for(var i=0; i<games.length; i++) {
15-
var entry = template.replace(/POS/g,(i+1))
16-
.replace(/SLUG/g,games[i].slug)
17-
.replace(/NAME/g,games[i].name)
18-
.replace(/AUTHOR/g,games[i].author)
19-
.replace(/TWITTER/g,games[i].twitter)
20-
.replace(/WEBSITE/g,games[i].website)
21-
.replace(/GITHUB/g,games[i].github);
22-
entry = entry.replace('<a href=\'http:///\'></a>','-');
23-
content += entry;
24-
};
2+
const template = `<article>
3+
<img src='data/img/placeholder.png' data-src='data/img/SLUG.jpg' alt='NAME'>
4+
<h3>#POS. NAME</h3>
5+
<ul>
6+
<li><span>Author:</span> <strong>AUTHOR</strong></li>
7+
<li><span>Twitter:</span> <a href='https://twitter.com/TWITTER'>@TWITTER</a></li>
8+
<li><span>Website:</span> <a href='http://WEBSITE/'>WEBSITE</a></li>
9+
<li><span>GitHub:</span> <a href='https://GITHUB'>GITHUB</a></li>
10+
<li><span>More:</span> <a href='http://js13kgames.com/entries/SLUG'>js13kgames.com/entries/SLUG</a></li>
11+
</ul>
12+
</article>`;
13+
let content = '';
14+
for (let i = 0; i < games.length; i++) {
15+
let entry = template.replace(/POS/g, (i + 1))
16+
.replace(/SLUG/g, games[i].slug)
17+
.replace(/NAME/g, games[i].name)
18+
.replace(/AUTHOR/g, games[i].author)
19+
.replace(/TWITTER/g, games[i].twitter)
20+
.replace(/WEBSITE/g, games[i].website)
21+
.replace(/GITHUB/g, games[i].github);
22+
entry = entry.replace('<a href=\'http:///\'></a>', '-');
23+
content += entry;
24+
}
2525
document.getElementById('content').innerHTML = content;
2626

2727
// Registering Service Worker
28-
if('serviceWorker' in navigator) {
29-
navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js');
30-
};
28+
if ('serviceWorker' in navigator) {
29+
navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js');
30+
}
3131

3232
// Requesting permission for Notifications after clicking on the button
33-
var button = document.getElementById("notifications");
34-
button.addEventListener('click', function(e) {
35-
Notification.requestPermission().then(function(result) {
36-
if(result === 'granted') {
37-
randomNotification();
38-
}
39-
});
33+
const button = document.getElementById('notifications');
34+
button.addEventListener('click', () => {
35+
Notification.requestPermission().then((result) => {
36+
if (result === 'granted') {
37+
randomNotification();
38+
}
39+
});
4040
});
4141

4242
// Setting up random Notification
4343
function randomNotification() {
44-
var randomItem = Math.floor(Math.random()*games.length);
45-
var notifTitle = games[randomItem].name;
46-
var notifBody = 'Created by '+games[randomItem].author+'.';
47-
var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
48-
var options = {
49-
body: notifBody,
50-
icon: notifImg
51-
}
52-
var notif = new Notification(notifTitle, options);
53-
setTimeout(randomNotification, 30000);
54-
};
44+
const randomItem = Math.floor(Math.random() * games.length);
45+
const notifTitle = games[randomItem].name;
46+
const notifBody = `Created by ${games[randomItem].author}.`;
47+
const notifImg = `data/img/${games[randomItem].slug}.jpg`;
48+
const options = {
49+
body: notifBody,
50+
icon: notifImg,
51+
};
52+
new Notification(notifTitle, options);
53+
setTimeout(randomNotification, 30000);
54+
}
5555

5656
// Progressive loading images
57-
var imagesToLoad = document.querySelectorAll('img[data-src]');
58-
var loadImages = function(image) {
59-
image.setAttribute('src', image.getAttribute('data-src'));
60-
image.onload = function() {
61-
image.removeAttribute('data-src');
62-
};
57+
const imagesToLoad = document.querySelectorAll('img[data-src]');
58+
const loadImages = (image) => {
59+
image.setAttribute('src', image.getAttribute('data-src'));
60+
image.onload = () => {
61+
image.removeAttribute('data-src');
62+
};
6363
};
64-
if('IntersectionObserver' in window) {
65-
var observer = new IntersectionObserver(function(items, observer) {
66-
items.forEach(function(item) {
67-
if(item.isIntersecting) {
68-
loadImages(item.target);
69-
observer.unobserve(item.target);
70-
}
71-
});
72-
});
73-
imagesToLoad.forEach(function(img) {
74-
observer.observe(img);
75-
});
64+
if ('IntersectionObserver' in window) {
65+
const observer = new IntersectionObserver((items) => {
66+
items.forEach((item) => {
67+
if (item.isIntersecting) {
68+
loadImages(item.target);
69+
observer.unobserve(item.target);
70+
}
71+
});
72+
});
73+
imagesToLoad.forEach((img) => {
74+
observer.observe(img);
75+
});
76+
} else {
77+
imagesToLoad.forEach((img) => {
78+
loadImages(img);
79+
});
7680
}
77-
else {
78-
imagesToLoad.forEach(function(img) {
79-
loadImages(img);
80-
});
81-
}

0 commit comments

Comments
 (0)