88 lines
No EOL
3.3 KiB
JavaScript
88 lines
No EOL
3.3 KiB
JavaScript
class Playlist {
|
|
constructor(wrapperEl, url) {
|
|
this.wrapperEl = wrapperEl;
|
|
|
|
const request = new Request(url, {
|
|
method: 'GET',
|
|
});
|
|
|
|
fetch(request)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
let playlist = this.wrapperEl.querySelector('.playlist');
|
|
if (!playlist) {
|
|
playlist = document.createElement('nav');
|
|
playlist.classList.add('playlist');
|
|
this.wrapperEl.appendChild(playlist)
|
|
}
|
|
else {
|
|
playlist.innerHTML = "";
|
|
}
|
|
|
|
const listEl = document.createElement("ul");
|
|
for (let file of data) {
|
|
const liEl = document.createElement("li");
|
|
|
|
|
|
const imgEl = document.createElement("img");
|
|
imgEl.classList.add('img');
|
|
imgEl.title = file.id;
|
|
imgEl.src = file.svg;
|
|
liEl.append(imgEl);
|
|
|
|
|
|
let time = file.mtime;
|
|
if (file.ctime != file.mtime){
|
|
time += ` (orig: ${file.ctime})`;
|
|
}
|
|
const dateEl = document.createElement("span");
|
|
dateEl.classList.add('date');
|
|
dateEl.innerText = time;
|
|
liEl.append(dateEl);
|
|
|
|
|
|
const nameEl = document.createElement("span");
|
|
nameEl.classList.add('name');
|
|
nameEl.innerText = file.name;
|
|
liEl.append(nameEl);
|
|
|
|
const linksEl = document.createElement("span");
|
|
linksEl.classList.add('links');
|
|
liEl.append(linksEl);
|
|
|
|
const playEl = document.createElement("a");
|
|
playEl.classList.add('play');
|
|
playEl.innerText = "Play";
|
|
playEl.href = location;
|
|
playEl.pathname = "play.html";
|
|
playEl.search = "?"+file.name;
|
|
linksEl.append(playEl);
|
|
|
|
const annotateEl = document.createElement("a");
|
|
annotateEl.classList.add('annotate');
|
|
annotateEl.innerText = "Annotate";
|
|
annotateEl.href = location;
|
|
annotateEl.pathname = "annotate.html";
|
|
annotateEl.search = "?"+file.name;
|
|
linksEl.append(annotateEl);
|
|
|
|
const drawEl = document.createElement("a");
|
|
drawEl.classList.add('draw');
|
|
drawEl.innerText = "Draw";
|
|
drawEl.href = location;
|
|
drawEl.pathname = "draw.html";
|
|
drawEl.hash = file.id;
|
|
linksEl.append(drawEl);
|
|
|
|
// liEl.addEventListener('click', (e) => {
|
|
// this.play(fileUrl);
|
|
// playlist.style.display = "none";
|
|
// });
|
|
listEl.appendChild(liEl);
|
|
}
|
|
playlist.appendChild(listEl);
|
|
// do something with the data sent in the request
|
|
});
|
|
|
|
}
|
|
} |