119 lines
3.8 KiB
JavaScript
119 lines
3.8 KiB
JavaScript
class Playlist {
|
|
constructor(wrapperEl, url) {
|
|
this.wrapperEl = wrapperEl;
|
|
|
|
this.onlyWithTitle = true;
|
|
|
|
const request = new Request(url, {
|
|
method: 'GET',
|
|
});
|
|
|
|
fetch(request)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
this.files = data;
|
|
this.buildList()
|
|
});
|
|
|
|
}
|
|
|
|
buildList() {
|
|
let playlist = this.wrapperEl.querySelector('.playlist');
|
|
if (!playlist) {
|
|
playlist = document.createElement('nav');
|
|
playlist.classList.add('playlist');
|
|
this.wrapperEl.appendChild(playlist)
|
|
}
|
|
else {
|
|
playlist.innerHTML = "";
|
|
}
|
|
|
|
const filterEl = document.createElement('label');
|
|
filterEl.classList.add('filter');
|
|
filterEl.innerText = "Show only diagrams with title"
|
|
const filterCheckEl = document.createElement('input');
|
|
filterCheckEl.type = "checkbox";
|
|
filterCheckEl.checked = this.onlyWithTitle;
|
|
filterCheckEl.addEventListener('click', (ev) => {
|
|
this.onlyWithTitle = ev.target.checked;
|
|
this.buildList()
|
|
})
|
|
filterEl.appendChild(filterCheckEl)
|
|
|
|
playlist.appendChild(filterEl)
|
|
|
|
const listEl = document.createElement("ul");
|
|
for (let file of this.files) {
|
|
|
|
if(this.onlyWithTitle && file.title === null) {
|
|
continue;
|
|
}
|
|
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);
|
|
|
|
if (file.title) {
|
|
const titleEl = document.createElement("span");
|
|
titleEl.classList.add('title');
|
|
titleEl.innerText = file.title;
|
|
liEl.append(titleEl);
|
|
}
|
|
|
|
|
|
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 = "annotate.html";
|
|
playEl.search = "?file=" + file.name + "&player=1";
|
|
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=" + 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
|
|
}
|
|
} |