templates/index.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

const deep_value = (o, p) => p.split('.').reduce((a, v) => a[v], o);

let slideIndeces = {};

// Next/previous controls
function plusSlides(id, n) {
  showSlides(id, slideIndeces[id] += n);
}

// Thumbnail image controls
function currentSlide(id, n) {
  showSlides(id, slideIndeces[id] = n);
}

function showSlides(id, n) {
  let i;
  console.log(`${id}-slide`);
  let slides = document.getElementsByClassName(`${id}-slide`);
  let dots = document.getElementsByClassName(`${id}-demo`);
  let captionText = document.getElementById(`${id}-caption`);

  // Overflow
  if (n > slides.length) { slideIndeces[id] = 1; }
  // Underflow
  if (n < 1) { slideIndeces[id] = slides.length; }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  let slide = slides[slideIndeces[id]-1];
  slide.style.display = "block";
  const project = deep_value(projects, slide.id);
  dots[slideIndeces[id]-1].className += " active";
  if ('Download' in project) {
    captionText.innerHTML = `<a href="${project.Pfad}/${project.Download}" download>${project.Name}</a> von ${project.Team} ${project.Lizenz}`
  } else {
    captionText.innerHTML = dots[slideIndeces[id]-1].alt;
  }
} 

window.onload = function () {
  let slides = document.getElementsByClassName("container");
  for (let slide of slides) {
    let id = slide.id.replace("-slides", "");
    slideIndeces[id] = 1;
    showSlides(id, 1);
  }
}