-
Notifications
You must be signed in to change notification settings - Fork 0
/
myScript.js
109 lines (80 loc) · 2.91 KB
/
myScript.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
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
// progressive-image.js
if (window.addEventListener && window.requestAnimationFrame && document.getElementsByClassName) window.addEventListener('load', function() {
// start
let imageContainers = document.getElementsByClassName('progressive replace')
let timer
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', scroller, false);
inView();
// throttled scroll/resize
function scroller(e) {
timer = timer || setTimeout(function() {
timer = null;
requestAnimationFrame(inView);
}, 300);
}
// image in view?
function inView() {
let pageYOffsetStartIndex = window.pageYOffset;
let pageYOffsetEndIndex = pageYOffsetStartIndex + window.innerHeight
let imageBoxCoordinate
let imageTopPixel
let imageBottomPixel
let imageIndex = 0;
while (imageIndex < imageContainers.length) {
imageBoxCoordinate = imageContainers[imageIndex].getBoundingClientRect();
imageTopPixel = pageYOffsetStartIndex + imageBoxCoordinate.top;
imageBottomPixel = imageTopPixel + imageBoxCoordinate.height;
if (pageYOffsetStartIndex < imageBottomPixel && pageYOffsetEndIndex > imageTopPixel) {
loadFullImage(imageContainers[imageIndex]);
imageContainers[imageIndex].classList.remove('replace');
}else{
imageIndex++;
}
}
}
// replace with full image
function loadFullImage(item) {
if (!item || !item.href) return;
// load image
let img = new Image();
if (item.dataset) {
img.srcset = item.dataset.srcset || '';
img.sizes = item.dataset.sizes || '';
}
img.src = item.href;
img.className = 'reveal';
if (img.complete) addImg();
else img.onload = addImg;
// replace image
function addImg() {
// disable click
item.addEventListener('click', function(e) { e.preventDefault(); }, false);
// add full image
item.appendChild(img).addEventListener('animationend', function(e) {
// remove preview image
var pImg = item.querySelector && item.querySelector('img.preview');
if (pImg) {
e.target.alt = pImg.alt || '';
item.removeChild(pImg);
e.target.classList.remove('reveal');
}
});
}
}
}, false);
function deleteImg(id){
const divTag = document.getElementById(`${id}`)
divTag.style.display = "none";
}
function shuffle() {
const container = document.getElementById("main-container");
const elementsArray = [...container.getElementsByClassName('shuffleMe')]
elementsArray.forEach(function(element){
container.removeChild(element);
})
elementsArray.sort(() => Math.floor(Math.random() * 3) - 1 )
elementsArray.forEach(function(element){
container.appendChild(element);
})
}