Skip to content

Commit 82bc082

Browse files
captainbrossetcaptainbrosset
committed
Made the filters work, and fixed a few CSS issues
1 parent be03503 commit 82bc082

File tree

3 files changed

+334
-318
lines changed

3 files changed

+334
-318
lines changed

‎pwa-installer/app.js

Lines changed: 35 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,53 @@
1-
// All of the UI DOM elements we need.
2-
const installBtn = document.getElementById("btnInstallStore");
3-
const pwinterBtn = document.getElementById("installPwinter");
4-
const pwampBtn = document.getElementById("installPwamp");
5-
const tempConvBtn = document.getElementById("installPwaGettingStarted");
6-
const emailClientBtn = document.getElementById("installEmailClient");
7-
const oneDivBtn = document.getElementById("install1Div");
8-
const wamiBtn = document.getElementById("installWami");
9-
const bubbleBtn = document.getElementById("installBubble");
10-
const appTitleBtn = document.getElementById("installappTitle");
11-
12-
13-
installBtn.addEventListener('click', async () => {
1+
const installStoreBtn = document.getElementById("install-store");
2+
const mainEl = document.querySelector("main");
3+
const filtersEl = document.querySelector(".filters");
4+
const appEntryEls = mainEl.querySelectorAll('.app-entry');
5+
6+
// Install the store itself.
7+
installStoreBtn.addEventListener('click', async () => {
148
let installation = await navigator.install();
15-
});
169

17-
pwinterBtn.addEventListener('click', async () => {
18-
let installation = await navigator.install('https://diek.us/pwinter/',
19-
'https://diek.us/pwinter/index.html?randomize=true');
10+
console.log("Store installed", installation);
2011
});
2112

22-
pwampBtn.addEventListener('click', async () => {
23-
let installation = await navigator.install('https://microsoftedge.github.io/Demos/pwamp/',
24-
'https://microsoftedge.github.io/Demos/pwamp/');
25-
});
13+
// Install buttons for individual apps.
14+
mainEl.addEventListener('click', async (e) => {
15+
const installBtn = e.target;
16+
const appEntryEl = installBtn.closest('.app-entry');
2617

27-
bubbleBtn.addEventListener('click', async () => {
28-
let installation = await navigator.install('https://diek.us/bubble/',
29-
'https://diek.us/bubble/index.html');
30-
});
18+
if (!appEntryEl || !installBtn.classList.contains('install-button')) {
19+
return;
20+
}
3121

32-
tempConvBtn.addEventListener('click', async () => {
33-
let installation = await navigator.install('https://microsoftedge.github.io/Demos/pwa-getting-started/index.html', 'https://microsoftedge.github.io/Demos/pwa-getting-started/');
22+
const installUrl = appEntryEl.dataset.installUrl;
23+
const manifestId = appEntryEl.dataset.manifestId;
3424

35-
});
25+
let installation = await navigator.install(installUrl, manifestId);
3626

37-
emailClientBtn.addEventListener('click', async () => {
38-
let installation = await navigator.install('https://microsoftedge.github.io/Demos/email-client/',
39-
'https://microsoftedge.github.io/Demos/email-client/index.html');
27+
console.log("App installed", installation);
4028
});
4129

42-
oneDivBtn.addEventListener('click', async () => {
43-
let installation = await navigator.install('https://microsoftedge.github.io/Demos/1DIV/dist/',
44-
'https://microsoftedge.github.io/Demos/1DIV/dist/index.html');
45-
});
46-
47-
wamiBtn.addEventListener('click', async () => {
48-
let installation = await navigator.install('https://microsoftedge.github.io/Demos/wami/index.html', 'https://microsoftedge.github.io/Demos/wami/');
49-
});
30+
// Filter apps by category.
31+
filtersEl.addEventListener('click', (e) => {
32+
const filterBtn = e.target;
33+
if (!filterBtn.classList.contains('category-filter')) {
34+
return;
35+
}
5036

51-
appTitleBtn.addEventListener('click', async () => {
52-
let installation = await navigator.install('https://microsoftedge.github.io/Demos/pwa-application-title/', 'https://microsoftedge.github.io/Demos/pwa-application-title/');
53-
});
37+
const category = filterBtn.dataset.category;
5438

39+
appEntryEls.forEach((entry) => {
40+
if (category === 'all' || entry.dataset.categories.includes(category)) {
41+
entry.style.display = '';
42+
} else {
43+
entry.style.display = 'none';
44+
}
45+
});
46+
});
5547

5648
const init = () => {
5749
if (window.matchMedia('(display-mode: standalone)').matches || window.matchMedia('(display-mode: window-controls-overlay)').matches) {
58-
installBtn.style.display = 'none';
50+
installStoreBtn.style.display = 'none';
5951
}
6052
};
6153

‎pwa-installer/index.html

Lines changed: 127 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,145 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<link href="styles/reset.css" rel="stylesheet">
7-
<link href="styles/pwa-installer.css" rel="stylesheet">
8-
<link rel="icon" type="image/x-icon" href="images/favicon.png">
9-
<link rel="manifest" href="manifest.json" />
10-
<meta name="application-title" content="PWA installer by the Microsoft Edge team">
11-
<title>PWA installer</title>
12-
<link rel="stylesheet" href="styles/pwa-installer-dark.css" media="(prefers-color-scheme: dark)"/>
13-
<link rel="stylesheet" href="styles/pwa-installer-light.css" media="(prefers-color-scheme: light)"/>
14-
<meta name="theme-color" content="#FFF5E0" media="(prefers-color-scheme: light)"/>
15-
<meta name="theme-color" content="#3D3D3D" media="(prefers-color-scheme: dark)"/>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="styles/reset.css" rel="stylesheet">
8+
<link href="styles/pwa-installer.css" rel="stylesheet">
9+
<link rel="icon" type="image/x-icon" href="images/favicon.png">
10+
<link rel="manifest" href="manifest.json" />
11+
<meta name="application-title" content="PWA installer by the Microsoft Edge team">
12+
<title>PWA installer</title>
13+
<link rel="stylesheet" href="styles/pwa-installer-dark.css" media="(prefers-color-scheme: dark)" />
14+
<link rel="stylesheet" href="styles/pwa-installer-light.css" media="(prefers-color-scheme: light)" />
15+
<meta name="theme-color" content="#FFF5E0" media="(prefers-color-scheme: light)" />
16+
<meta name="theme-color" content="#3D3D3D" media="(prefers-color-scheme: dark)" />
1617

1718
</head>
19+
1820
<body>
19-
<div class="draggable"></div>
20-
<header>
21-
<img src="images/pwa-installer-logo.svg" width="200" height="100" class="storeicon">
22-
<button class="btn_install_store" id="btnInstallStore">Install PWAs</button>
23-
<div class="category_filter_nav">
24-
<button class="btn_category">new!</button>
25-
<button class="btn_category">PWA</button>
26-
<button class="btn_category">CSS</button>
27-
<button class="btn_category">all demos</button>
28-
</div>
29-
</header>
30-
<main>
31-
<article class="instructions">
32-
<h2>Instructions</h2>
33-
<p>This collection contains demo webpages, apps, and sample code to demonstrate various features of Microsoft Edge. You can filter the type of demo with the buttons above.</p>
34-
<p><strong>Some additional details for demos to work:</strong></p>
35-
<ul>
36-
<li>Check if you need to enable any experimental features in <code>about://flags</code>.</li>
37-
<li><a href="https://developer.microsoft.com/microsoft-edge/origin-trials/trials" target="_blank">List of active Origin Trials on Microsoft Edge.</a></li>
38-
<li>This app uses the <a href="https://aka.ms/webinstall">Web Install API</a> to install demos and the <a href="https://developer.chrome.com/blog/masonry" target="_blank">Masonry layout</a> to arrange items.</li>
39-
</ul>
40-
</article>
21+
<div class="draggable"></div>
22+
<header>
23+
<img src="images/pwa-installer-logo.svg" width="200" height="100" class="store-icon">
24+
<button class="install-button-store" id="install-store">Install the store app</button>
25+
<div class="filters">
26+
<button class="category-filter" data-category="media">media</button>
27+
<button class="category-filter" data-category="productivity">productivity</button>
28+
<button class="category-filter" data-category="creativity">creativity</button>
29+
<button class="category-filter" data-category="samples">samples</button>
30+
<button class="category-filter" data-category="all">all demos</button>
31+
</div>
32+
</header>
33+
<main>
34+
<article class="instructions">
35+
<h2>Instructions</h2>
36+
<p>This collection contains demo webpages, apps, and sample code to demonstrate various features of Microsoft
37+
Edge. You can filter the type of demo with the buttons above.</p>
38+
<p><strong>Some additional details for demos to work:</strong></p>
39+
<ul>
40+
<li>Check if you need to enable any experimental features in <code>about://flags</code>.</li>
41+
<li><a href="https://developer.microsoft.com/microsoft-edge/origin-trials/trials" target="_blank">List of active
42+
Origin Trials on Microsoft Edge.</a></li>
43+
<li>This app uses the <a href="https://aka.ms/webinstall">Web Install API</a> to install demos and the <a
44+
href="https://developer.chrome.com/blog/masonry" target="_blank">Masonry layout</a> to arrange items.</li>
45+
</ul>
46+
</article>
4147

42-
<article class="app_entry">
43-
<img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/pwa-getting-started/icon512.png" width="75" height="75" class="app_icon">
44-
<h2><a href="https://microsoftedge.github.io/Demos/pwa-getting-started/index.html" target="_blank">Temperature converter</a> - PWA getting started demo app</h2>
45-
<p class="app_descrip">A simple PWA demo app that converts temperatures.
46-
For instructions, see <a href="https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/" target="_blank">Get started with PWAs
47-
</a>.</p><!-- todo: change from [Get started with PWAs] to [Temperature convertor sample] after merge https://github.com/MicrosoftDocs/edge-developer/pull/3476 -->
48-
<button id="installPwaGettingStarted" class="btn_install">Install</button>
49-
</article>
48+
<article class="app-entry" data-categories="samples productivity"
49+
data-install-url="https://microsoftedge.github.io/Demos/pwa-getting-started/index.html"
50+
data-manifest-id="https://microsoftedge.github.io/Demos/pwa-getting-started/">
51+
<img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/pwa-getting-started/icon512.png"
52+
width="75" height="75" class="app-icon">
53+
<h2><a href="https://microsoftedge.github.io/Demos/pwa-getting-started/index.html" target="_blank">Temperature
54+
converter</a> - PWA getting started demo app</h2>
55+
<p class="app-description">A simple PWA demo app that converts temperatures.
56+
For instructions, see <a href="https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/"
57+
target="_blank">Get started with PWAs
58+
</a>.</p>
59+
<!-- todo: change from [Get started with PWAs] to [Temperature convertor sample] after merge https://github.com/MicrosoftDocs/edge-developer/pull/3476 -->
60+
<button class="install-button">Install</button>
61+
</article>
5062

51-
<article class="app_entry">
52-
<img src="images/app-icons/pwinter.png" width="75" height="75" class="app_icon">
53-
<h2><a href="https://diek.us/pwinter" target="_blank">The PWinter</a></h2>
54-
<p class="app_descrip">The PWinter is your custom PWA icon generator!</p>
55-
<button id="installPwinter" class="btn_install">Install</button>
56-
</article>
63+
<article class="app-entry" data-categories="creativity media" data-install-url="https://diek.us/pwinter/"
64+
data-manifest-id="https://diek.us/pwinter/index.html?randomize=true">
65+
<img src="images/app-icons/pwinter.png" width="75" height="75" class="app-icon">
66+
<h2><a href="https://diek.us/pwinter" target="_blank">The PWinter</a></h2>
67+
<p class="app-description">The PWinter is your custom PWA icon generator!</p>
68+
<button class="install-button">Install</button>
69+
</article>
5770

58-
<article class="app_entry">
59-
<img src="images/app-icons/pwamp.png" width="75" height="75" class="app_icon">
60-
<h2><a href="https://microsoftedge.github.io/Demos/pwamp/" target="_blank">PWAmp</a></h2>
61-
<p class="app_descrip">A music player PWA demo to play local audio files.</p>
62-
<button id="installPwamp" class="btn_install">Install</button>
63-
</article>
71+
<article class="app-entry" data-categories="media" data-install-url="https://microsoftedge.github.io/Demos/pwamp/"
72+
data-manifest-id="https://microsoftedge.github.io/Demos/pwamp/">
73+
<img src="images/app-icons/pwamp.png" width="75" height="75" class="app-icon">
74+
<h2><a href="https://microsoftedge.github.io/Demos/pwamp/" target="_blank">PWAmp</a></h2>
75+
<p class="app-description">A music player PWA demo to play local audio files.</p>
76+
<button class="install-button">Install</button>
77+
</article>
6478

65-
<article class="app_entry">
66-
<img src="images/app-icons/bubble.png" width="75" height="75" class="app_icon">
67-
<h2><a href="https://diek.us/bubble" target="_blank">Bubble</a></h2>
68-
<p class="app_descrip">360° equirectangular picture viewer. For images from 360 cameras.</p>
69-
<button id="installBubble" class="btn_install">Install</button>
70-
</article>
79+
<article class="app-entry" data-categories="media creativity" data-install-url="https://diek.us/bubble/"
80+
data-manifest-id="https://diek.us/bubble/index.html">
81+
<img src="images/app-icons/bubble.png" width="75" height="75" class="app-icon">
82+
<h2><a href="https://diek.us/bubble" target="_blank">Bubble</a></h2>
83+
<p class="app-description">360° equirectangular picture viewer. For images from 360 cameras.</p>
84+
<button class="install-button">Install</button>
85+
</article>
7186

72-
<article class="app_entry">
73-
<img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/email-client/img/icon-256.png" width="75" height="75" class="app_icon">
74-
<h2><a href="https://microsoftedge.github.io/Demos/email-client/" target="_blank">Email Client demo</a></h2>
75-
<p class="app_descrip">A simulated email client PWA that demonstrates how to use PWA protocol handlers.</p>
76-
<button id="installEmailClient" class="btn_install">Install</button>
77-
</article>
87+
<article class="app-entry" data-categories="productivity samples"
88+
data-install-url="https://microsoftedge.github.io/Demos/email-client/"
89+
data-manifest-id="https://microsoftedge.github.io/Demos/email-client/index.html">
90+
<img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/email-client/img/icon-256.png"
91+
width="75" height="75" class="app-icon">
92+
<h2><a href="https://microsoftedge.github.io/Demos/email-client/" target="_blank">Email Client demo</a></h2>
93+
<p class="app-description">A simulated email client PWA that demonstrates how to use PWA protocol handlers.</p>
94+
<button class="install-button">Install</button>
95+
</article>
7896

79-
<article class="app_entry">
80-
<img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/1DIV/dist/img/icon-256.png" width="75" height="75" class="app_icon">
81-
<h2><a href="https://microsoftedge.github.io/Demos/1DIV/dist/index.html" target="_blank">1DIV</a></h2>
82-
<p class="app_descrip">A CSS sandbox PWA that demonstrates the Window Controls Overlay feature.</p>
83-
<button id="install1Div" class="btn_install">Install</button>
84-
</article>
97+
<article class="app-entry" data-categories="creativity"
98+
data-install-url="https://microsoftedge.github.io/Demos/1DIV/dist/"
99+
data-manifest-id="https://microsoftedge.github.io/Demos/1DIV/dist/index.html">
100+
<img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/1DIV/dist/img/icon-256.png"
101+
width="75" height="75" class="app-icon">
102+
<h2><a href="https://microsoftedge.github.io/Demos/1DIV/dist/index.html" target="_blank">1DIV</a></h2>
103+
<p class="app-description">A CSS sandbox PWA that demonstrates the Window Controls Overlay feature.</p>
104+
<button class="install-button">Install</button>
105+
</article>
85106

86-
<article class="app_entry">
87-
<img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/wami/favicon-256.png" width="75" height="75" class="app_icon">
88-
<h2><a href="https://microsoftedge.github.io/Demos/wami/index.html" target="_blank">wami</a></h2>
89-
<p class="app_descrip">An image manipulation demo app to crop, resize, or add effects to images.</p>
90-
<button id="installWami" class="btn_install">Install</button>
91-
</article>
107+
<article class="app-entry" data-categories="productivity creativity media"
108+
data-install-url="https://microsoftedge.github.io/Demos/wami/index.html"
109+
data-manifest-id="https://microsoftedge.github.io/Demos/wami/">
110+
<img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/wami/favicon-256.png" width="75"
111+
height="75" class="app-icon">
112+
<h2><a href="https://microsoftedge.github.io/Demos/wami/index.html" target="_blank">wami</a></h2>
113+
<p class="app-description">An image manipulation demo app to crop, resize, or add effects to images.</p>
114+
<button class="install-button">Install</button>
115+
</article>
92116

93-
<article class="app_entry">
94-
<img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/pwa-application-title/icon.png" width="75" height="75" class="app_icon">
95-
<h2><a href="https://microsoftedge.github.io/Demos/pwa-application-title/" target="_blank">Application Title demo</a></h2>
96-
<p class="app_descrip">A demo web app to showcase the <code>application-title</code> meta tag.</p>
97-
<button id="installappTitle" class="btn_install">Install</button>
98-
</article>
117+
<article class="app-entry" data-categories="samples"
118+
data-install-url="https://microsoftedge.github.io/Demos/pwa-application-title/"
119+
data-manifest-id="https://microsoftedge.github.io/Demos/pwa-application-title/">
120+
<img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/pwa-application-title/icon.png"
121+
width="75" height="75" class="app-icon">
122+
<h2><a href="https://microsoftedge.github.io/Demos/pwa-application-title/" target="_blank">Application Title
123+
demo</a></h2>
124+
<p class="app-description">A demo web app to showcase the <code>application-title</code> meta tag.</p>
125+
<button class="install-button">Install</button>
126+
</article>
99127

100-
</main>
101-
<footer>
102-
&copy; Microsoft Edge
103-
</footer>
128+
</main>
129+
<footer>
130+
&copy; Microsoft Edge
131+
</footer>
104132

105-
<template>
106-
<article class="app_entry">
107-
<img src="" width="75" height="75" class="app_icon">
108-
<h2>Title</h2>
109-
<p class="app_descrip">Equirectangular picture viewer.</p>
110-
<button class="btn_install">Install</button>
111-
</article>
112-
</template>
133+
<template>
134+
<article class="app-entry">
135+
<img src="" width="75" height="75" class="app-icon">
136+
<h2>Title</h2>
137+
<p class="app-description">Equirectangular picture viewer.</p>
138+
<button class="install-button">Install</button>
139+
</article>
140+
</template>
113141

114-
<script type="module" src="app.js" defer></script>
142+
<script type="module" src="app.js" defer></script>
115143
</body>
116-
</html>
144+
145+
</html>

0 commit comments

Comments
 (0)