https://shadowfight2.com/js/main.js

1(function () {
2  var previewImages = document.querySelectorAll('#images img[data-big]');
3  var activeOverlay = null;
4  var activeImage = null;
5  var currentIndex = -1;
6  var previewItems = [];
7
8  if (!previewImages.length) {
9    return;
10  }
11
12  function syncPreviewState() {
13    var previewItem = previewItems[currentIndex];
14
15    if (!previewItem || !activeImage) {
16      return;
17    }
18
19    activeImage.src = previewItem.url;
20    activeImage.alt = previewItem.alt;
21  }
22
23  function showPreviewAtIndex(nextIndex) {
24    if (nextIndex < 0 || nextIndex >= previewItems.length) {
25      return;
26    }
27
28    currentIndex = nextIndex;
29    syncPreviewState();
30  }
31
32  function closePreview() {
33    if (!activeOverlay) {
34      return;
35    }
36
37    document.removeEventListener('keydown', onDocumentKeydown);
38    if (activeOverlay.parentNode) {
39      activeOverlay.parentNode.removeChild(activeOverlay);
40    }
41    activeOverlay = null;
42    activeImage = null;
43    currentIndex = -1;
44  }
45
46  function onDocumentKeydown(event) {
47    var key = event.key || '';
48
49    if (key === 'Escape' || event.keyCode === 27) {
50      closePreview();
51      return;
52    }
53
54    if (key === 'ArrowLeft' || event.keyCode === 37) {
55      showPreviewAtIndex(currentIndex - 1);
56      return;
57    }
58
59    if (key === 'ArrowRight' || event.keyCode === 39) {
60      showPreviewAtIndex(currentIndex + 1);
61    }
62  }
63
64  function openPreview(index) {
65    var overlay = document.createElement('div');
66    var backdrop = document.createElement('div');
67    var modal = document.createElement('div');
68    var closeButton = document.createElement('button');
69    var image = document.createElement('img');
70
71    closePreview();
72
73    overlay.className = 'overlay';
74
75    backdrop.className = 'overlay__bg';
76
77    modal.id = 'modalWindow';
78    modal.setAttribute('role', 'dialog');
79    modal.setAttribute('aria-modal', 'true');
80    modal.setAttribute('aria-label', 'Screenshot preview');
81
82    closeButton.type = 'button';
83    closeButton.className = 'modalClose';
84    closeButton.setAttribute('aria-label', 'Close preview');
85    closeButton.textContent = '\u00d7';
86
87    image.className = 'bigImg';
88
89    closeButton.addEventListener('click', closePreview);
90    backdrop.addEventListener('click', closePreview);
91
92    modal.appendChild(closeButton);
93    modal.appendChild(image);
94    overlay.appendChild(backdrop);
95    overlay.appendChild(modal);
96    document.body.appendChild(overlay);
97
98    activeOverlay = overlay;
99    activeImage = image;
100    document.addEventListener('keydown', onDocumentKeydown);
101    showPreviewAtIndex(index);
102
103    closeButton.focus();
104  }
105
106  function bindPreview(previewImage, previewNumber, index) {
107    var previewAlt = previewImage.alt || 'Screenshot ' + previewNumber;
108
109    previewItems.push({
110      url: previewImage.getAttribute('data-big'),
111      alt: previewAlt
112    });
113
114    previewImage.setAttribute('tabindex', '0');
115    previewImage.setAttribute('aria-label', 'Open screenshot ' + previewNumber + ' preview');
116
117    previewImage.addEventListener('click', function () {
118      openPreview(index);
119    });
120
121    previewImage.addEventListener('keydown', function (event) {
122      var key = event.key || '';
123
124      if (key !== 'Enter' && key !== ' ' && key !== 'Spacebar' && event.keyCode !== 13 && event.keyCode !== 32) {
125        return;
126      }
127
128      event.preventDefault();
129      openPreview(index);
130    });
131  }
132
133  for (var index = 0; index < previewImages.length; index += 1) {
134    bindPreview(previewImages[index], String(index + 1), index);
135  }
136})();