Skip to content

Commit bb5bdc8

Browse files
Martin-E-KarlssonMartin-E-Karlsson
committed
- Cleaned up unused HTML code
- Made the JavaScript safer and easier to read - Added comments and docstrings to the JavaScript - Added test files, the soundbite is taken from a royalty-free music library and was combined with the GIF version of the logo to create the video files
1 parent e31f485 commit bb5bdc8

12 files changed

Lines changed: 43 additions & 42 deletions

File tree

‎www/file-test.html‎

Lines changed: 39 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -203,19 +203,6 @@
203203
.filepath span {
204204
color: var(--accent);
205205
}
206-
207-
.skipped-note {
208-
margin-top: 1.5rem;
209-
max-width: 760px;
210-
font-size: 0.75rem;
211-
color: var(--text-dim);
212-
font-family: 'IBM Plex Mono', monospace;
213-
line-height: 1.8;
214-
}
215-
216-
.skipped-note strong {
217-
color: #555;
218-
}
219206
</style>
220207
</head>
221208
<body>
@@ -272,62 +259,72 @@ <h1>File Type Viewer</h1>
272259

273260
<!-- JavaScript which handles file selection and display -->
274261
<script>
275-
<!-- -->
262+
// A const mapping the path, category of file and label of each supported file format
276263
const types = {
277-
jpeg: { path: '/test-files/test.jpeg', kind: 'image', label: 'image/jpeg' },
278-
jpg: { path: '/test-files/test.jpg', kind: 'image', label: 'image/jpg' },
279-
png: { path: '/test-files/test.png', kind: 'image', label: 'image/png' },
280-
gif: { path: '/test-files/test.gif', kind: 'image', label: 'image/gif' },
281-
webp: { path: '/test-files/test.webp', kind: 'image', label: 'image/webp' },
282-
svg: { path: '/test-files/test.svg', kind: 'image', label: 'image/svg' },
283-
txt: { path: '/test-files/test.txt', kind: 'text', label: 'text/plain' },
284-
pdf: { path: '/test-files/test.pdf', kind: 'pdf', label: 'application/pdf' },
285-
mp4: { path: '/test-files/test.mp4', kind: 'video', label: 'video/mp4' },
286-
webm: { path: '/test-files/test.webm', kind: 'video', label: 'video/webm' },
287-
mp3: { path: '/test-files/test.mp3', kind: 'audio', label: 'audio/mpeg' },
288-
wav: { path: '/test-files/test.wav', kind: 'audio', label: 'audio/wav' },
264+
jpg: { path: '/test-files/test.jpg', category: 'image', label: 'jpg' },
265+
jpeg: { path: '/test-files/test.jpeg', category: 'image', label: 'jpeg' },
266+
png: { path: '/test-files/test.png', category: 'image', label: 'png' },
267+
gif: { path: '/test-files/test.gif', category: 'image', label: 'gif' },
268+
webp: { path: '/test-files/test.webp', category: 'image', label: 'webp' },
269+
svg: { path: '/test-files/test.svg', category: 'image', label: 'svg' },
270+
txt: { path: '/test-files/test.txt', category: 'text', label: 'plain' },
271+
pdf: { path: '/test-files/test.pdf', category: 'pdf', label: 'pdf' },
272+
mp4: { path: '/test-files/test.mp4', category: 'video', label: 'video/mp4' },
273+
webm: { path: '/test-files/test.webm', category: 'video', label: 'video/webm' },
274+
mp3: { path: '/test-files/test.mp3', category: 'audio', label: 'audio/mpeg' },
275+
wav: { path: '/test-files/test.wav', category: 'audio', label: 'audio/wav' },
289276
};
290277

291-
function loadFile(ext) {
278+
/**
279+
* Loads the type of file selected in the dropdown menu.
280+
* @param fileType
281+
*/
282+
function loadFile(fileType) {
292283
const contentArea = document.getElementById('content-area');
293284
const typeTag = document.getElementById('type-tag');
294285
const filePathDisplay = document.getElementById('filepath-display');
295286

296-
if (!ext || !types[ext]) {
287+
// If no filetype is selected then show a message prompting the user to select a file type
288+
if (!fileType || !types[fileType]) {
297289
contentArea.innerHTML = `<div class="placeholder"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>select a file type above</div>`;
298290
typeTag.textContent = '—';
299291
filePathDisplay.innerHTML = '—';
300292
return;
301293
}
302294

303-
const { path, kind, label } = types[ext];
304-
typeTag.textContent = ext;
295+
// Assigns a variable to each value in the types const and displays the information in the card header
296+
const { path, category, label } = types[fileType];
297+
typeTag.textContent = fileType;
305298
filePathDisplay.innerHTML = `<span>${path}</span>`;
306299

307-
if (kind === 'image') {
300+
// Displays the file type based on category
301+
if (category === 'image') {
308302
const image = document.createElement('img');
309303
image.src = path;
310-
image.alt = `test ${ext}`;
304+
image.alt = `test ${fileType}`;
311305
image.onerror = () => {
312-
image.outerHTML = `<span style="color:#4a6080;font-family:monospace;font-size:.8rem">file not found: ${path}</span>`;
306+
image.outerHTML = `<span style = "color:#4a6080;font-family:monospace;font-size:.8rem">file not found: ${path}</span>`;
313307
};
314308
contentArea.innerHTML = '';
315-
contentArea.appendChild(image); } else if (kind === 'text') {
309+
contentArea.appendChild(image);
310+
} else if (category === 'text') {
316311
fetch(path)
317312
.then(response => { if (!response.ok) { throw new Error('not found'); } return response.text(); })
318-
.then(responseText => { contentArea.innerHTML = `<pre>${escapeHtml(responseText)}</pre>`; })
313+
.then(responseText => {
314+
const pre = document.createElement('pre');
315+
pre.textContent = responseText;
316+
contentArea.innerHTML = '';
317+
contentArea.appendChild(pre);
318+
})
319319
.catch(() => { contentArea.innerHTML = `<span style="color:#555;font-family:monospace;font-size:.8rem">file not found: ${path}</span>`; });
320-
} else if (kind === 'pdf') {
320+
} else if (category === 'pdf') {
321321
contentArea.innerHTML = `<embed src="${path}" type="application/pdf">`;
322-
} else if (kind === 'video') {
322+
} else if (category === 'video') {
323323
contentArea.innerHTML = `<video controls><source src="${path}" type="${label}">Your browser does not support this video format.</video>`;
324-
} else if (kind === 'audio') {
324+
} else if (category === 'audio') {
325325
contentArea.innerHTML = `<audio controls><source src="${path}" type="${label}">Your browser does not support this audio format.</audio>`;
326326
}
327327
}
328-
329-
function escapeHtml(text) {
330-
return text.replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;');
331-
}</script>
328+
</script>
332329
</body>
333330
</html>

‎www/test-files/test.gif‎

275 KB
Loading

‎www/test-files/test.jpeg‎

8.96 KB
Loading

‎www/test-files/test.mp3‎

149 KB
Binary file not shown.

‎www/test-files/test.mp4‎

98.2 KB
Binary file not shown.

‎www/test-files/test.pdf‎

9.15 KB
Binary file not shown.

‎www/test-files/test.png‎

22.6 KB
Loading

‎www/test-files/test.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎www/test-files/test.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

‎www/test-files/test.wav‎

891 KB
Binary file not shown.

0 commit comments

Comments
 (0)