-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
99 lines (81 loc) · 2.55 KB
/
script.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
// container used to show an image popup
let image_popup = document.querySelector('.image-popup');
if (image_popup) {
// Loop each image so we can add the on click event
document.querySelectorAll('.images a').forEach(img_link => {
img_link.onclick = e => {
e.preventDefault();
let img_meta = img_link.querySelector('img');
let img = new Image();
img.onload = () => {
// Create popup with image
image_popup.innerHTML = `
<div class="con">
<h3>${img_meta.dataset.title}</h3>
<p>${img_meta.alt}</p>
<span id='close'onclick='image_popup.style.display = "none"; return false;'>×</span>
<img src="${img.src}" width="${img.width}" height="${img.height}">
<a href="delete.php?id=${img_meta.dataset.id}" class="trash" title="Delete Image"><i class="fas fa-trash fa-xs"></i></a>
</div>
`;
image_popup.style.display = 'flex';
// prevent images from exceeding window borders
let height = image_popup.querySelector('img').getBoundingClientRect().top - image_popup.querySelector('.con').getBoundingClientRect().top;
image_popup.querySelector('img').style.maxHeight = `calc(100% - ${height+40}px)`;
};
img.src = img_meta.src;
};
});
// close popup by different means
image_popup.onclick = e => {
if (e.target.className == 'image-popup') {
image_popup.style.display = "none";
}
};
document.addEventListener('keydown', function(event) {
const key = event.key;
if (key === "Escape") {
image_popup.style.display = "none";
}
});
}
// scroll to top feature
mybutton = document.getElementById("toTopBtn");
// show button when user scrolls down
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// scroll to top when user pushes the button
function toTop() {
window.scrollTo({ top: 0, behavior: 'smooth' })
}
/*
// johans script
var scrollToTopBtn = document.querySelector(".scrollToTopBtn")
var rootElement = document.documentElement
var TOGGLE_RATIO = 0.80
function handleScroll() {
var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight
if ((rootElement.scrollTop / scrollTotal) > TOGGLE_RATIO) {
scrollToTopBtn.classList.add("showBtn")
} else {
scrollToTopBtn.classList.remove("showBtn")
}
}
function scrollToTop() {
rootElement.scrollTo({
top: 0,
behavior: "smooth"
})
}
scrollToTopBtn.addEventListener("click",
scrollToTop)
document.addEventListener("scroll",
handleScroll)
};
*/