-
Notifications
You must be signed in to change notification settings - Fork 0
/
updateContentBrowserScript.js
132 lines (120 loc) · 6.52 KB
/
updateContentBrowserScript.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/**
* This is the browser script. It runs when we launch our website (GitHub pages website).
* This script is a companion of index.html to render the data on our website.
* This function attaches an event listener to the document.
* The object `document` is a global object representing the entire HTML document.
* The `.addEventListener('DOMContentLoaded', ...)` is a method used to listen for a specific event
* (DOMContentLoaded in this case).
* The 'DOMContentLoaded' event is fired when the initial HTML document has been completely loaded and parsed.
* It does not wait for stylesheets, images, or other external resources to load—just the core HTML structure.
* Using this event ensures that the DOM (Document Object Model) is fully available,
* and all the elements are accessible for JavaScript manipulation.
* The `async () => { }` is an arrow function that is declared as async.
* The async keyword allows you to use await within the function, which makes it easier to work with asynchronous code.
* This type of function is called an asynchronous immediately-invoked function in this context because
* it is executed as soon as the event occurs.
* It conveys:
* "Once the HTML document is fully loaded, execute the asynchronous function defined inside the { ... } block."
*/
document.addEventListener('DOMContentLoaded', async () => {
// Retrieve references to HTML elements by their ID
const fileList = document.getElementById('file-list');
const sortOptions = document.getElementById('sort-options');
const loader = document.getElementById('loader');
const messageBox = document.getElementById('message-box');
const messageText = document.getElementById('message-text');
const closeMessageButton = document.getElementById('close-message');
/*
* Create an empty array that will store the external json information that we are going to fetch.
* The external json information will be stored temporarily (within this function scope only) in this array.
*/
let kotlinFiles = [];
// Show the loader until the files are loaded
loader.style.display = 'block';
// Close the message box when the close button is clicked
closeMessageButton.addEventListener('click', () => {
messageBox.style.display = 'none';
});
async function loadFiles() {
try {
// This line makes a fetch request to retrieve the files.json file.
// The await keyword makes the function pause until the fetch request completes,
// allowing you to work with the result as if it were synchronous.
const response = await fetch(`files.json`);
if (!response.ok) throw new Error('Failed to fetch files');
// This line parses the response from the files.json file into a JavaScript object or array
// and stores it in the variable kotlinFiles.
// The `await` keyword ensures that the code waits until the data is fully parsed.
kotlinFiles = await response.json();
// The function `renderFileList` is used to dynamically display the list of Kotlin files on the page,
// rendering them as links or in another UI format.
renderFileList(kotlinFiles);
} catch (error) {
console.error('Error loading files:', error);
showMessage('Error loading files. Please try again later.', 'error');
} finally {
loader.style.display = 'none';
}
}
/*
* Why this function? To render the data (files) on browser UI.
* How does it do that?
* The function takes a single parameter called files, which is expected to be an array of file objects.
* Each object contains details such as the file name and URL.
* Within the function:
* The `fileList` is a reference to an HTML element (e.g., a div) that has the ID file-list.
* It is where the list of files will be displayed on the page.
* Setting innerHTML to an empty string ('') clears any existing content within the fileList element.
* This ensures that each time the function runs, the file list is refreshed with only the latest set of files, avoiding duplicates.
* Then, we create a new anchor (<a>) element dynamically.
* An anchor element is used to create clickable links in HTML.
* link.href = file.url; Sets the href attribute of the newly created anchor (<a>) element to the URL provided by the file object.
* This makes each link navigable, allowing the user to click on it to access the specific file URL.
* The file.name is displayed as the clickable text of the link.
* link.className = 'file-link';
* Adds a CSS class ('file-link') to the link element.
* This allows you to style the links uniformly using CSS. It provides consistency in appearance and behavior.
* fileList.appendChild(link);:
* fileList is the HTML element where you want to display the list of files.
* appendChild(link) adds the newly created anchor (<a>) element to the fileList container.
* This line is responsible for adding the link to the DOM so that it becomes visible on the webpage.
*/
function renderFileList(files) {
fileList.innerHTML = '';
files.forEach((file, index) => {
const link = document.createElement('a');
link.href = file.url;
link.textContent = `${index + 1}. ${file.name}`; // Add serial number before the file name
link.className = 'file-link';
fileList.appendChild(link);
});
}
function showMessage(message, type) {
messageText.textContent = message;
messageBox.className = `message-box ${type}`;
messageBox.style.display = 'block';
}
// Add sorting functionality
sortOptions.addEventListener('change', () => {
const option = sortOptions.value;
let sortedFiles = [...kotlinFiles];
switch (option) {
case 'ascending':
sortedFiles.sort((a, b) => a.name.localeCompare(b.name));
break;
case 'descending':
sortedFiles.sort((a, b) => b.name.localeCompare(a.name));
break;
case 'latest':
sortedFiles.sort((a, b) => new Date(b.modifiedDate) - new Date(a.modifiedDate));
break;
case 'oldest':
sortedFiles.sort((a, b) => new Date(a.createdDate) - new Date(b.createdDate));
break;
default:
break;
}
renderFileList(sortedFiles);
});
await loadFiles();
});