KollerSystems.github.io/navbar.js at master · KollerSystems/KollerSystems.github.io · GitHub

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
const _textpanel = document.getElementById('textpanel');

const _gradientDivs = document.getElementsByClassName('gradientCircle');

_textpanel.addEventListener('mouseenter', () => {
  for (let i = 0; i < _gradientDivs.length; i++) {
    _gradientDivs[i].style.opacity = 0.5;
  }
});
_textpanel.addEventListener('mouseleave', () => {
  if (_textpanel.classList.contains('hover')) {
    return false;
  }
  for (let i = 0; i < _gradientDivs.length; i++) {
    _gradientDivs[i].style.opacity = 0;
  }
});

async function sleep(time) {
  return new Promise(res => {
    setTimeout(res, time);
  });
}

window.addEventListener('load', async e => {
  _textpanel.style.pointerEvents = 'none';
  _textpanel.style.transition = 'width 0s ease';
  _textpanel.style.width = '100%';
  for (let i = 0; i < _gradientDivs.length; i++) {
    _gradientDivs[i].style.opacity = 0.5;
  }
  await sleep(10);
  _textpanel.style.transition = 'width 0.8s ease';
  _textpanel.style.width = '';
  for (let i = 0; i < _gradientDivs.length; i++) {
    _gradientDivs[i].style.opacity = 0;
  }
  await sleep(810);
  _textpanel.style.pointerEvents = '';
  _textpanel.style.transition = '';
});

const _navanchors = document.getElementsByClassName('navAnchor');
const _transformN = 25;
for (let i = 0; i < _navanchors.length; i++) {
  _navanchors[i].addEventListener('click', async e => {
    e.preventDefault();
    _textpanel.classList.add('hover');
    _textpanel.style.width = '30%';
    e.target.parentNode.parentNode.style.opacity = 1;
    for (let n = 0; n < _navanchors.length; n++)
      _navanchors[n].style.opacity = 1;

    const nElement = Array.from(e.target.parentNode.parentNode.children).indexOf(e.target.parentNode);
    let transformMatrix = getComputedStyle(e.target).transform.replaceAll('matrix(', '').replaceAll(')', '').split(', ');
    transformMatrix[5] = Number(transformMatrix[5]) + ((nElement >= _navanchors.length/2) ? _transformN : -1*_transformN);
    e.target.style.transform = 'matrix(' + transformMatrix.join(', ') + ')';

    let n = 1;
    while ((_navanchors[nElement + n] ?? '') || (_navanchors[nElement - n] ?? '')) {
      await sleep(200);
      if (_navanchors[nElement + n] ?? '') {
        let matrix = getComputedStyle(_navanchors[nElement + n]).transform.replaceAll('matrix(', '').replaceAll(')', '').split(', ');
        matrix[5] = Number(matrix[5]) + _transformN;
        _navanchors[nElement + n].style.transform = 'matrix(' + matrix.join(', ') + ')';
        _navanchors[nElement + n].style.opacity = 0;
      }
      if (_navanchors[nElement - n] ?? '') {
        let matrix = getComputedStyle(_navanchors[nElement - n]).transform.replaceAll('matrix(', '').replaceAll(')', '').split(', ');
        matrix[5] = Number(matrix[5]) - _transformN;
        _navanchors[nElement - n].style.transform = 'matrix(' + matrix.join(', ') + ')';
        _navanchors[nElement - n].style.opacity = 0;
      }
      n++;
    }

    await sleep(500);
    _textpanel.style.transition = 'width 0.8s ease';
    _textpanel.style.width = '100%';
    await sleep(810);
    if (document.activeElement == e.target) {
      e.target.blur();
    } else {
      e.target.focus();
    }
    let matrix = getComputedStyle(e.target).transform.replaceAll('matrix(', '').replaceAll(')', '').split(', ');
    matrix[0] = 1.04;
    matrix[3] = 1.04;
    e.target.style.transform = 'matrix(' + matrix.join(', ') + ')';
    e.target.style.opacity = 0;
    await sleep(410);
    window.location.replace(e.target.href);
  });
}